<Text>
  Lorem ipsum <IconCloud size="large" /> dolor sit amet, consectetur
  adipiscing elit. Sed non purus id dolor maximus eleifend nec in nunc.
  Integer quis lacinia leo, in suscipit orci. Donec enim augue, vehicula vel
  enim a, vestibulum tempus nunc.
</Text>

<div>
  <Text as="h1">Heading 1</Text>
  <Text as="h2">Heading 2</Text>
  <Text as="h3">Heading 3</Text>
  <Text as="h4">Heading 4</Text>
  <Text as="h5">Heading 5</Text>
  <Text as="h6">Heading 6</Text>
</div>

<div>
  <Text as="h1" appearance="h3">Heading 1 which looks like a Heading 3</Text>
  <Text appearance="prose">
    Prose (Long Form) Paragraph. Lorem ipsum dolor sit amet, consectetur
    adipiscing elit. Quisque molestie eros at nisl rhoncus, et condimentum
    dui elementum. Praesent gravida metus at scelerisque ultrices.
  </Text>
  <Text appearance="mouse">
    Mousetype Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing
    elit. Quisque molestie eros at nisl rhoncus, et condimentum dui
    elementum. Praesent gravida metus at scelerisque ultrices. Suspendisse
    at facilisis massa. Integer eleifend eleifend nibh posuere interdum.
  </Text>
</div>

<Text as="h1" noMargins>Heading 1</Text>

<div>
  <Text align="end">Align End</Text>
  <Text align="center">Align Center</Text>
  <Text align="justify">
    Align Justify: justified text should stretch the width of the container
    for each separate line. This example contains words of many lengths to
    display that lines are justified correctly. Lorem ipsum dolor sit amet,
    consectetur adipiscing elit. Curabitur mattis luctus nunc, in posuere
    odio viverra et. Quisque aliquam tincidunt ante ac mollis. Vestibulum
    et massa eget velit ultricies feugiat non non augue. Nulla nisl augue,
    ullamcorper ac dui.
  </Text>
</div>

<div>
  <Text truncate>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non purus
    id dolor maximus eleifend nec in nunc. Integer quis lacinia leo.
  </Text>
  <Text truncate={200}>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non purus
    id dolor maximus eleifend nec in nunc. Integer quis lacinia leo.
  </Text>
  <Text truncate="50%">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non purus
    id dolor maximus eleifend nec in nunc. Integer quis lacinia leo.
  </Text>
</div>

<div>
  <Text fontWeight="semiBold">Semi-bold Text</Text>
  <Text fontWeight="bold">Bold Text</Text>
  <Text fontWeight="extraBold">Extra-bold Text</Text>
  <Text fontWeight={300}>Light Text</Text>
</div>

<div>
  <Text color={theme.color_success}>Success Text</Text>
  <Text color={palette.magenta_60}>Magenta Text</Text>
  <DemoPanel backgroundColor="#421429">
    <Text color="#bfe7d4" noMargins>Custom Text</Text>
  </DemoPanel>
</div>

() => {
  const CustomDiv = styled('div')({
    backgroundColor: palette.sky_10,
    color: palette.sky_80,
    fontFamily: 'serif',
    fontSize: '1.25rem',
    padding: theme.space_inset_sm
  });
  return (
    <DemoLayout>
      For non-nested Text components, you can opt <em>in</em> to style
      inheritance by passing true to the inherit prop.

      <CustomDiv>
        This is a non-nested div with custom styles.
        <Text inherit>
          This non-nested Text has opted in to inheriting those custom styles.
        </Text>
      </CustomDiv>

      <Text as="div">
        For nested Text components (inside another Text), you can opt
        <em>out</em> of style inheritance by passing false to the inherit prop.

        <CustomDiv>
          This is a nested div with custom styles.
          <Text inherit={false}>
            This nested Text has opted out of inheriting those custom styles.
          </Text>
        </CustomDiv>
      </Text>
    </DemoLayout>
  );
}

<div dir="rtl">
  <ThemeProvider theme={{ direction: 'rtl' }}>
    <div>
      <Text>محاذاة البداية</Text>
      <Text align="end">محاذاة النهاية</Text>
    </div>
  </ThemeProvider>
</div>