<Text value="Hello, World!" />

<Col gap="sm">
  <Text value="Extra Small" size="xs" />
  <Text value="Small" size="sm" />
  <Text value="Medium" size="md" />
  <Text value="Large" size="lg" />
  <Text value="Extra Large" size="xl" />
  <Text value="2X Large" size="2xl" />
</Col>

<Col gap="sm">
  <Text value="Regular weight" weight="regular" />
  <Text value="Medium weight" weight="medium" />
  <Text value="Semibold weight" weight="semibold" />
  <Text value="Bold weight" weight="bold" />
</Col>

<Col gap="sm">
  <Text value="Primary color" color="primary" />
  <Text value="Muted color" color="muted" />
  <Text value="Success color" color="success" />
  <Text value="Error color" color="error" />
  <Text value="Custom color" color="#8B5CF6" />
</Col>

<Col gap="sm">
  <Text value="Italic text" italic />
  <Text value="Underlined text" underline />
  <Text value="Strikethrough text" strikethrough />
  <Text value="Combined styles" italic underline />
</Col>

<Col gap="sm">
  <Text value="uppercase text" transform="uppercase" />
  <Text value="LOWERCASE TEXT" transform="lowercase" />
  <Text value="capitalize each word" transform="capitalize" />
</Col>

<Col gap="md">
  {/* Line height as multiplier */}
  <Text
    value="This is text with 1.5x line height for better readability in paragraphs."
    lineHeight={1.5}
  />

  {/* Letter spacing */}
  <Text
    value="SPACED OUT TEXT"
    letterSpacing={2}
    weight="semibold"
  />
</Col>

<Text
  value="This is a very long text that will be truncated after two lines with an ellipsis at the end to prevent overflow."
  lines={2}
/>

<Col gap="sm">
  <Text value="Left aligned" align="left" />
  <Text value="Center aligned" align="center" />
  <Text value="Right aligned" align="right" />
</Col>

<Box background="primary" padding="md">
  <Text value="50% opacity" color="alpha-50" />
  <Text value="70% opacity" color="alpha-70" />
</Box>

<Row gap="sm">
  <Text value="Name:" weight="semibold" />
  <Text value={userName} flex={1} />
</Row>

<Text
  value="This is a longer description that provides context about the feature."
  color="muted"
  size="sm"
  lineHeight={1.5}
/>

<Row gap="xs" align="baseline">
  <Text value="$99" size="xl" weight="bold" />
  <Text value=".99" size="md" weight="bold" />
  <Text value="/month" size="sm" color="muted" />
</Row>

<Row gap="xs" align="center">
  <Icon name="check-circle" color="success" size="sm" />
  <Text value="Payment successful" color="success" weight="medium" />
</Row>

<Text
  value="Please enter a valid email address"
  color="error"
  size="sm"
/>