<Avatar text="KB" round={false} />

<Avatar imgSrc="./porunga-close.png" size="large" />

<Badge text="Nice" />
<Badge text="Nice" variant="accent-1" />
<Badge text="Nice" variant="accent-2"/>
<Badge text="Nice" variant="accent-3"/>
<Badge text="Nice" variant="accent-4"/>
<Badge text="Nice" variant="success" />
<Badge text="Nice" variant="warning" />

<Badge rounded text="Nice Round" />
<Badge rounded text="Nice Round" variant="accent-1" />
<Badge rounded text="Nice Round" variant="accent-2" />
<Badge rounded text="Nice Round" variant="accent-3" />
<Badge rounded text="Nice Round" variant="accent-4" />
<Badge rounded text="Nice Round" variant="success" />
<Badge rounded text="Nice Round" variant="warning" />

<Box
  padding="medium"
  borderStyle="solid"
  borderColor="brand"
  borderWidth="small"
  justify="space-between"
>
  <Box margin="small" padding="large" backgroundColor="light-5">
    box
  </Box>
  <Box margin="small" padding="large" backgroundColor="light-5">
    box
  </Box>
  <Box margin="small" padding="large" backgroundColor="light-5">
    box
  </Box>
</Box>

<Box
  padding="medium"
  borderStyle="solid"
  borderColor="brand"
  borderWidth="small"
  direction="column"
>
  <Box padding="large" margin="small" backgroundColor="light-5">
    box
  </Box>
  <Box padding="large" margin="small" backgroundColor="light-5">
    box
  </Box>
  <Box padding="large" margin="small" backgroundColor="light-5">
    box
  </Box>
</Box>

<Box
  padding="medium"
  borderStyle="solid"
  borderColor="brand"
  borderWidth="small"
  wrap="wrap"
>
  <Box padding="xxlarge" margin="small" backgroundColor="light-5">
    box
  </Box>
  <Box padding="xxlarge" margin="small" backgroundColor="light-5">
    box
  </Box>
  <Box padding="xxlarge" margin="small" backgroundColor="light-5">
    box
  </Box>
  <Box padding="xxlarge" margin="small" backgroundColor="light-5">
    box
  </Box>
  <Box padding="xxlarge" margin="small" backgroundColor="light-5">
    box
  </Box>
  <Box padding="xxlarge" margin="small" backgroundColor="light-5">
    box
  </Box>
  <Box padding="xxlarge" margin="small" backgroundColor="light-5">
    box
  </Box>
</Box>

<Button label="Default Button" />

<Button primaryColor='brand' label="Brand" />
<Button primaryColor='accent-1' label="Accent-1" />
<Button primaryColor='success' label="Success" />
<Button primaryColor='warning' label="Warning" />
<Button primaryColor='error' label="Error" />

<Button rounded primaryColor='brand' label="Brand" />
<Button rounded primaryColor='accent-1' label="Accent-1" />
<Button rounded primaryColor='success' label="Success" />
<Button rounded primaryColor='warning' label="Warning" />
<Button rounded primaryColor='error' label="Error" />

<Button isOutline primaryColor='brand' label="Brand" />
<Button isOutline primaryColor='accent-1' label="Accent-1" />
<Button isOutline primaryColor='success' label="Success" />
<Button isOutline primaryColor='warning' label="Warning" />
<Button isOutline primaryColor='error' label="Error" />

<Button rounded isOutline primaryColor='brand' label="Brand" />
<Button rounded isOutline primaryColor='accent-1' label="Accent-1" />
<Button rounded isOutline primaryColor='success' label="Success" />
<Button rounded isOutline primaryColor='warning' label="Warning" />
<Button rounded isOutline primaryColor='error' label="Error" />

<Card
  title="Nostrud incididunt minim occaecat aliqua nostrud eu nulla magna."
  footerText="Commodo nostrud sit veniam mollit esse sunt."
>
  Consequat enim eiusmod qui cupidatat. Do enim incididunt aute pariatur enim
  nulla sunt ea minim. Dolore mollit dolore ex veniam anim. Consectetur labore
  dolore minim duis magna deserunt pariatur irure consequat. Laborum eiusmod
  ipsum et velit quis laborum labore laboris eu deserunt dolor dolore elit.
</Card>

<Card
  title="Nostrud incididunt minim occaecat aliqua nostrud eu nulla magna."
  heroImage={{ src: './porunga-close.png', alt: 'building-blocks' }}
  footerText="Commodo nostrud sit veniam mollit esse sunt."
>
  Consequat enim eiusmod qui cupidatat. Do enim incididunt aute pariatur enim
  nulla sunt ea minim. Dolore mollit dolore ex veniam anim. Consectetur labore
  dolore minim duis magna deserunt pariatur irure consequat. Laborum eiusmod
  ipsum et velit quis laborum labore laboris eu deserunt dolor dolore elit.
</Card>

<Card
  title="Nostrud incididunt minim occaecat aliqua nostrud eu nulla magna."
  heroImage={{
    src: './porunga-close.png',
    alt: 'building-blocks',
    position: 'right',
  }}
  footerText="Commodo nostrud sit veniam mollit esse sunt."
>
  Consequat enim eiusmod qui cupidatat. Do enim incididunt aute pariatur enim
  nulla sunt ea minim. Dolore mollit dolore ex veniam anim. Consectetur labore
  dolore minim duis magna deserunt pariatur irure consequat. Laborum eiusmod
  ipsum et velit quis laborum labore laboris eu deserunt dolor dolore elit.
</Card>

<Checkbox label="Default Checkbox" />

<Checkbox primaryColor='brand' label="Brand Checkbox" />
<Checkbox primaryColor='accent-1' label="Accent-1 Checkbox" />
<Checkbox primaryColor='success' label="Success Checkbox" />
<Checkbox primaryColor='warning' label="Warning Checkbox" />
<Checkbox primaryColor='error' label="Error Checkbox" />

<Checkbox rounded primaryColor='brand' label="Brand Round Checkbox" />
<Checkbox rounded primaryColor='accent-1' label="Accent-1 Round Checkbox" />
<Checkbox rounded primaryColor='success' label="Success Round Checkbox" />
<Checkbox rounded primaryColor='warning' label="Warning Round Checkbox" />
<Checkbox rounded primaryColor='error' label="Error Round Checkbox" />

<Heading>Heading 1</Heading>
<Heading level="h2">Heading 2</Heading>
<Heading level="h3">Heading 3</Heading>
<Heading level="h4">Heading 4</Heading>
<Heading level="h5">Heading 5</Heading>
<Heading level="h6">Heading 6</Heading>

<Heading textAlign="center" color="brand">
  Centered Heading
</Heading>

<Input label="Name" />

<Input label="Name" placeholder="Enter Your First Name" />

<Input label="Name" value="David Hayter" disabled />

<form>
  <Input label="Name" required />
  <input type="submit" />
</form>

<Input label="Name" bottomText="The user's first name" />

<Input
  label="Name"
  borderColorActive="pink"
  borderColorInactive="green"
  hideLabel
/>

<Input label="Datetime" type="datetime-local" />
<Input label="Week" type="week" />
<Input label="Month" type="month" />
<Input label="Time" type="time" />
<Input label="Password" type="password" value="I'm hidden" />

<form>
  <Input
    label="Enter Password"
    name="password"
    pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
    title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters"
    type="password"
  />
  <input type="submit" />
</form>

<Paragraph size="xxlarge">
  Id labore commodo velit ut adipisicing tempor amet. Incididunt sunt aute quis
  consequat adipisicing dolore culpa irure aliquip aliquip labore. Nisi fugiat
  proident cupidatat officia.
</Paragraph>

<Paragraph size="large" color="dark-2">
  Id labore commodo velit ut adipisicing tempor amet. Incididunt sunt aute quis
  consequat adipisicing dolore culpa irure aliquip aliquip labore. Nisi fugiat
  proident cupidatat officia.
</Paragraph>

<Paragraph size="medium" color="dark-3">
  Id labore commodo velit ut adipisicing tempor amet. Incididunt sunt aute quis
  consequat adipisicing dolore culpa irure aliquip aliquip labore. Nisi fugiat
  proident cupidatat officia.
</Paragraph>

<Paragraph size="small" color="dark-4">
  Id labore commodo velit ut adipisicing tempor amet. Incididunt sunt aute quis
  consequat adipisicing dolore culpa irure aliquip aliquip labore. Nisi fugiat
  proident cupidatat officia.
</Paragraph>

<ProgressBar value={25} />

<ProgressBar value={20} />
<ProgressBar color="accent-1" value={40} />
<ProgressBar color="success" value={60} />
<ProgressBar color="warning" value={80} />
<ProgressBar color="error" value={100} />

<ProgressBar value={20} rounded />
<ProgressBar color="accent-1" value={40} rounded />
<ProgressBar color="success" value={60} rounded />
<ProgressBar color="warning" value={80} rounded />
<ProgressBar color="error" value={100} rounded />

<ProgressBar value={20} showValue />
<ProgressBar color="accent-1" value={40} showValue />
<ProgressBar color="success" value={60} showValue />
<ProgressBar color="warning" value={80} showValue />
<ProgressBar color="error" value={100} showValue />

<ProgressBar value={20} customText="1/5" />
<ProgressBar color="accent-1" value={40} customText="2/5" />
<ProgressBar color="success" value={60} customText="3/5" />
<ProgressBar color="warning" value={80} customText="4/5" />
<ProgressBar color="error" value={100} customText="5/5" />

<RadioButton
    backgroundColor="error"
    name="radio"
    value="one"
    label="One"
    onClick={(e) => alert(`Radio "${e.currentTarget.value}" Selected`) }
/>

<RadioButton
    backgroundColor="warning"
    name="radio"
    value="two"
    label="Two"
    onClick={(e) => alert(`Radio "${e.currentTarget.value}" Selected`) }
/>

<RadioButton
    backgroundColor="success"
    name="radio" value="three"
    label="Three"
    onClick={(e) => alert(`Radio "${e.currentTarget.value}" Selected`) }
/>

<Select
  options={[
    { value: 'option-1', label: 'Option 1' },
    { value: 'option-2', label: 'Option 2' },
  ]}
/>

<Select
  defaultLabel="Kept you waiting huh?"
  options={[
    { value: 'option-1', label: 'Option 1' },
    { value: 'option-2', label: 'Option 2' },
  ]}
/>

<Select
  primaryColor="brand"
  options={[
    { value: 'option-1', label: 'Option 1' },
    { value: 'option-2', label: 'Option 2' },
  ]}
/>
<Select
  primaryColor="accent-1"
  options={[
    { value: 'option-1', label: 'Option 1' },
    { value: 'option-2', label: 'Option 2' },
  ]}
/>
<Select
  primaryColor="success"
  options={[
    { value: 'option-1', label: 'Option 1' },
    { value: 'option-2', label: 'Option 2' },
  ]}
/>
<Select
  primaryColor="warning"
  options={[
    { value: 'option-1', label: 'Option 1' },
    { value: 'option-2', label: 'Option 2' },
  ]}
/>
<Select
  primaryColor="error"
  options={[
    { value: 'option-1', label: 'Option 1' },
    { value: 'option-2', label: 'Option 2' },
  ]}
/>

<Select
  rounded
  primaryColor="brand"
  options={[
    { value: 'option-1', label: 'Option 1' },
    { value: 'option-2', label: 'Option 2' },
  ]}
/>
<Select
  rounded
  primaryColor="accent-1"
  options={[
    { value: 'option-1', label: 'Option 1' },
    { value: 'option-2', label: 'Option 2' },
  ]}
/>
<Select
  rounded
  primaryColor="success"
  options={[
    { value: 'option-1', label: 'Option 1' },
    { value: 'option-2', label: 'Option 2' },
  ]}
/>
<Select
  rounded
  primaryColor="warning"
  options={[
    { value: 'option-1', label: 'Option 1' },
    { value: 'option-2', label: 'Option 2' },
  ]}
/>
<Select
  rounded
  primaryColor="error"
  options={[
    { value: 'option-1', label: 'Option 1' },
    { value: 'option-2', label: 'Option 2' },
  ]}
/>

import { Box } from 'components'
;<Box wrap="wrap" justifyContent="space-around" basis="small">
  <Box width="small" direction="column">
    <Skeleton height="xsmall" />
    <Skeleton animate style={{ height: '1rem' }} margin={{ t: 'xsmall' }} />
    <Skeleton
      animate
      style={{ height: '1rem' }}
      margin={{ t: 'xsmall' }}
      width="1/3"
    />
  </Box>

  <Box width="small" direction="column">
    <Skeleton height="xsmall" />
    <Skeleton animate style={{ height: '1rem' }} margin={{ t: 'xsmall' }} />
    <Skeleton
      animate
      style={{ height: '1rem' }}
      margin={{ t: 'xsmall' }}
      width="1/3"
    />
  </Box>

  <Box width="small" direction="column">
    <Skeleton height="xsmall" />
    <Skeleton animate style={{ height: '1rem' }} margin={{ t: 'xsmall' }} />
    <Skeleton
      animate
      style={{ height: '1rem' }}
      margin={{ t: 'xsmall' }}
      width="1/3"
    />
  </Box>
</Box>

<Spinner />

<Text color="brand" size="xxsmall" family="serif" weight="normal" style="normal">
  Text 1
</Text>

<Text color="light-2" size="xsmall" family="sans-serif" weight="bold" style="italic">
  Text 2
</Text>

<Text color="light-4" size="small" family="monospace" weight="bolder" style="oblique">
  Text 3
</Text>

<Text color="light-6" size="medium" family="cursive" weight="lighter" style="normal">
  Text 4
</Text>

<Text>
  Text 5
</Text>

<Text color="dark-2" size="large" family="fantasy" weight="100" style="italic">
  Text 6
</Text>

<Text color="dark-4" size="xlarge" family="Helvetica" weight="800" style="oblique">
  Text 7
</Text>

<Text color="dark-6" size="xxlarge" family="Helvetica, Arial, sans-serif" weight="unset" style="unset">
  Text 8
</Text>

<TextArea rows={5} cols={100} placeholder="Default TextArea"></TextArea>