const snippets$K = [{
  name: "Large",
  code: '<Accordion>\n        <AccordionItem label="Item 1">\n          <Placeholder height={100} />\n        </AccordionItem>\n        <AccordionItem label="Item 2">\n          <Placeholder height={100} />\n        </AccordionItem>\n        <AccordionItem label="Item 3">\n          <Placeholder height={100} />\n        </AccordionItem>\n      </Accordion>'
}, {
  name: "Large, without dividers",
  code: '<Accordion dividers={false}>\n        <AccordionItem label="Item 1">\n          <Placeholder height={100} />\n        </AccordionItem>\n        <AccordionItem label="Item 2">\n          <Placeholder height={100} />\n        </AccordionItem>\n        <AccordionItem label="Item 3">\n          <Placeholder height={100} />\n        </AccordionItem>\n      </Accordion>'
}, {
  name: "Standard",
  code: '<Accordion size="standard">\n        <AccordionItem label="Item 1">\n          <Placeholder height={100} />\n        </AccordionItem>\n        <AccordionItem label="Item 2">\n          <Placeholder height={100} />\n        </AccordionItem>\n        <AccordionItem label="Item 3">\n          <Placeholder height={100} />\n        </AccordionItem>\n      </Accordion>'
}, {
  name: "Standard, without dividers",
  code: '<Accordion size="standard" dividers={false}>\n        <AccordionItem label="Item 1">\n          <Placeholder height={100} />\n        </AccordionItem>\n        <AccordionItem label="Item 2">\n          <Placeholder height={100} />\n        </AccordionItem>\n        <AccordionItem label="Item 3">\n          <Placeholder height={100} />\n        </AccordionItem>\n      </Accordion>'
}, {
  name: "Large standalone item",
  code: '<AccordionItem label="Label">\n        <Placeholder height={100} />\n      </AccordionItem>'
}, {
  name: "Standard standalone item",
  code: '<AccordionItem label="Label" size="standard">\n        <Placeholder height={100} />\n      </AccordionItem>'
}, {
  name: "Standalone item with a badge",
  code: '<AccordionItem\n  label="Label"\n  badge={\n  <Badge tone="promote" weight="strong">\n            Badge\n          </Badge>}>\n\n\n        <Placeholder height={100} />\n      </AccordionItem>'
}];
const snippets$J = [{
  name: "With multiple buttons",
  code: '<Actions>\n        <Button>Submit</Button>\n        <Button variant="transparent">Cancel</Button>\n      </Actions>'
}, {
  name: "With a branded action",
  code: '<Actions>\n        <Button tone="brandAccent">Submit</Button>\n        <Button variant="transparent">Cancel</Button>\n      </Actions>'
}, {
  name: "With a destructive action",
  code: '<Actions>\n        <Button tone="critical" icon={<IconDelete />}>\n          Delete\n        </Button>\n        <Button variant="transparent">Cancel</Button>\n      </Actions>'
}, {
  name: "Small size",
  code: '<Actions size="small">\n        <Button>Button 1</Button>\n        <Button>Button 2</Button>\n        <Button variant="transparent">Button 3</Button>\n      </Actions>'
}];
const snippets$I = [{
  name: "Critical",
  code: '<Alert tone="critical">\n        <Text>Critical Alert</Text>\n      </Alert>'
}, {
  name: "Caution",
  code: '<Alert tone="caution">\n        <Text>Caution Alert</Text>\n      </Alert>'
}, {
  name: "Positive",
  code: '<Alert tone="positive">\n        <Text>Positive Alert</Text>\n      </Alert>'
}, {
  name: "Info",
  code: '<Alert tone="info">\n        <Text>Info Alert</Text>\n      </Alert>'
}, {
  name: "Promote",
  code: '<Alert tone="promote">\n        <Text>Promote Alert</Text>\n      </Alert>'
}, {
  name: "Dismissible alert",
  code: '<Alert onClose={() => {}} closeLabel="Close">\n        <Text>Dismissible Alert</Text>\n      </Alert>'
}];
const snippets$H = [{
  name: "Standard",
  code: `<Autosuggest
  id="fruit"
  label="Fruit"
  suggestions={[
  { text: 'Apples' },
  { text: 'Bananas' },
  { text: 'Carrots' }]} />`
}, {
  name: "Grouped suggestions",
  code: `<Autosuggest
  label="I like to eat"
  id="grouped"
  suggestions={[
  {
    label: 'Fruit',
    suggestions: [
    { text: 'Apples' },
    { text: 'Bananas' },
    { text: 'Carrots' }]

  },
  {
    label: 'Vegetables',
    suggestions: [
    { text: 'Broccoli' },
    { text: 'Carrots' },
    { text: 'Carrots' }]

  }]} />`
}, {
  name: "With mobile backdrop",
  code: `<Autosuggest
  showMobileBackdrop
  id="mobile"
  label="Fruit"
  suggestions={[
  { text: 'Apples' },
  { text: 'Bananas' },
  { text: 'Carrots' }]} />`
}, {
  name: "With error",
  code: `<Autosuggest
  label="I like to eat"
  id="error"
  tone="critical"
  message="You must make a selection"
  suggestions={[
  { text: 'Apples' },
  { text: 'Bananas' },
  { text: 'Carrots' }]} />`
}, {
  name: "With description",
  code: `<Autosuggest
  label="Fruit"
  id="error"
  description="Select your favourite fruit to eat from the available suggestions."
  suggestions={[
  { text: 'Apples' },
  { text: 'Bananas' },
  { text: 'Carrots' }]} />`
}, {
  name: "With icon",
  code: `<Autosuggest
  id="location"
  aria-label="Location"
  icon={<IconLocation />}
  placeholder="Enter a location"
  suggestions={[
  { text: 'Adelaide' },
  { text: 'Brisbane' },
  { text: 'Darwin' },
  { text: 'Hobart' },
  { text: 'Melbourne' },
  { text: 'Perth' },
  { text: 'Sydney' }]} />`
}];
const snippets$G = [{
  name: "Info",
  code: '<Badge tone="info">Badge</Badge>'
}, {
  name: "Info (strong)",
  code: '<Badge tone="info" weight="strong">\n        Badge\n      </Badge>'
}, {
  name: "Promote",
  code: '<Badge tone="promote">Badge</Badge>'
}, {
  name: "Promote (strong)",
  code: '<Badge tone="promote" weight="strong">\n        Badge\n      </Badge>'
}, {
  name: "Positive",
  code: '<Badge tone="positive">Badge</Badge>'
}, {
  name: "Positive (strong)",
  code: '<Badge tone="positive" weight="strong">\n        Badge\n      </Badge>'
}, {
  name: "Caution",
  code: '<Badge tone="caution">Badge</Badge>'
}, {
  name: "Caution (strong)",
  code: '<Badge tone="caution" weight="strong">\n        Badge\n      </Badge>'
}, {
  name: "Critical",
  code: '<Badge tone="critical">Badge</Badge>'
}, {
  name: "Critical (strong)",
  code: '<Badge tone="critical" weight="strong">\n        Badge\n      </Badge>'
}, {
  name: "Neutral",
  code: '<Badge tone="neutral">Badge</Badge>'
}, {
  name: "Neutral (strong)",
  code: '<Badge tone="neutral" weight="strong">\n        Badge\n      </Badge>'
}, {
  name: "Multiple",
  code: '<Inline space="small">\n        <Badge tone="info">Badge</Badge>\n        <Badge tone="positive">Badge</Badge>\n        <Badge tone="promote">Badge</Badge>\n      </Inline>'
}];
const snippets$F = [{
  name: "On all sides",
  code: '<Bleed space="gutter">\n        <Placeholder height={80} />\n      </Bleed>'
}, {
  name: "Horizontally",
  code: '<Bleed horizontal="gutter">\n        <Placeholder height={80} />\n      </Bleed>'
}, {
  name: "Vertically",
  code: '<Bleed vertical="gutter">\n        <Placeholder height={80} />\n      </Bleed>'
}, {
  name: "To the top",
  code: '<Bleed top="gutter">\n        <Placeholder height={80} />\n      </Bleed>'
}, {
  name: "To the bottom",
  code: '<Bleed bottom="gutter">\n        <Placeholder height={80} />\n      </Bleed>'
}, {
  name: "To the left",
  code: '<Bleed left="gutter">\n        <Placeholder height={80} />\n      </Bleed>'
}, {
  name: "To the right",
  code: '<Bleed right="gutter">\n        <Placeholder height={80} />\n      </Bleed>'
}];
const snippets$E = [{
  name: "Solid",
  code: '<Button variant="solid">Button</Button>'
}, {
  name: "Ghost",
  code: '<Button variant="ghost">Button</Button>'
}, {
  name: "Soft",
  code: '<Button variant="soft">Button</Button>'
}, {
  name: "Transparent",
  code: '<Button variant="transparent">Button</Button>'
}, {
  name: "Critical Solid",
  code: '<Button tone="critical" variant="solid">\n        Button\n      </Button>'
}, {
  name: "Critical Ghost",
  code: '<Button tone="critical" variant="ghost">\n        Button\n      </Button>'
}, {
  name: "Critical Soft",
  code: '<Button tone="critical" variant="soft">\n        Button\n      </Button>'
}, {
  name: "Critical Transparent",
  code: '<Button tone="critical" variant="transparent">\n        Button\n      </Button>'
}, {
  name: "BrandAccent Solid",
  code: '<Button tone="brandAccent" variant="solid">\n        Button\n      </Button>'
}, {
  name: "BrandAccent Ghost",
  code: '<Button tone="brandAccent" variant="ghost">\n        Button\n      </Button>'
}, {
  name: "BrandAccent Soft",
  code: '<Button tone="brandAccent" variant="soft">\n        Button\n      </Button>'
}, {
  name: "BrandAccent Transparent",
  code: '<Button tone="brandAccent" variant="transparent">\n        Button\n      </Button>'
}, {
  name: "Neutral Solid",
  code: '<Button tone="neutral" variant="solid">\n        Button\n      </Button>'
}, {
  name: "Neutral Ghost",
  code: '<Button tone="neutral" variant="ghost">\n        Button\n      </Button>'
}, {
  name: "Neutral Soft",
  code: '<Button tone="neutral" variant="soft">\n        Button\n      </Button>'
}, {
  name: "Neutral Transparent",
  code: '<Button tone="neutral" variant="transparent">\n        Button\n      </Button>'
}, {
  name: "Small Solid",
  code: '<Button size="small" variant="solid">\n        Button\n      </Button>'
}, {
  name: "Small Ghost",
  code: '<Button size="small" variant="ghost">\n        Button\n      </Button>'
}, {
  name: "Small Soft",
  code: '<Button size="small" variant="soft">\n        Button\n      </Button>'
}, {
  name: "Small Transparent",
  code: '<Button size="small" variant="transparent">\n        Button\n      </Button>'
}];
const snippets$D = [{
  name: "Soft",
  code: '<ButtonIcon\n  variant="soft"\n  icon={<IconBookmark />}\n  label="Bookmark"\n  id="buttonicon-soft" />'
}, {
  name: "Transparent",
  code: '<ButtonIcon\n  variant="transparent"\n  icon={<IconHelp />}\n  label="Help"\n  id="buttonicon-transparent" />'
}, {
  name: "Large",
  code: '<ButtonIcon\n  size="large"\n  icon={<IconAdd />}\n  label="Add"\n  id="buttonicon-large" />'
}, {
  name: "Secondary",
  code: '<ButtonIcon\n  tone="secondary"\n  icon={<IconClear />}\n  label="Close"\n  id="buttonicon-secondary" />'
}];
const snippets$C = [{
  name: "With Heading",
  code: '<Card>\n        <Stack space="gutter">\n          <Heading level="3">Heading</Heading>\n          <Text>Text</Text>\n        </Stack>\n      </Card>'
}, {
  name: "With promote tone",
  code: '<Card tone="promote">\n        <Stack space="gutter">\n          <Placeholder height={200} />\n        </Stack>\n      </Card>'
}, {
  name: "With formAccent tone",
  code: '<Card tone="formAccent">\n        <Stack space="gutter">\n          <Placeholder height={200} />\n        </Stack>\n      </Card>'
}, {
  name: "With rounded corners",
  code: '<Card rounded>\n        <Stack space="gutter">\n          <Placeholder height={200} />\n        </Stack>\n      </Card>'
}, {
  name: "With Overflow Menu",
  code: '<Card>\n        <Stack space="gutter">\n          <Columns space="gutter">\n            <Column>\n              <Heading level="3">Heading</Heading>\n            </Column>\n            <Column width="content">\n              <OverflowMenu label="Options">\n                <MenuItem>Menu Item</MenuItem>\n              </OverflowMenu>\n            </Column>\n          </Columns>\n          <Text>Text</Text>\n        </Stack>\n      </Card>'
}];
const snippets$B = [{
  name: "Standard",
  code: '<Checkbox label="Label" />'
}, {
  name: "Small",
  code: '<Checkbox label="Label" size="small" />'
}, {
  name: "With a critical message",
  code: '<Checkbox label="Label" tone="critical" message="Critical message" />'
}, {
  name: "With a description",
  code: '<Checkbox label="Label" description="Description" />'
}, {
  name: "With a Badge",
  code: '<Checkbox label="Label" badge={<Badge weight="strong">Badge</Badge>} />'
}, {
  name: "With nested content",
  code: '<Checkbox label="Label">\n        <Placeholder height={100} />\n      </Checkbox>'
}];
const snippets$A = [{
  name: "2 Columns",
  code: '<Columns space="gutter">\n        <Column>\n          <Placeholder height={60} label="Column" />\n        </Column>\n        <Column>\n          <Placeholder height={60} label="Column" />\n        </Column>\n      </Columns>'
}, {
  name: "2 Columns (Collapse Below Tablet)",
  code: '<Columns space="gutter" collapseBelow="tablet">\n        <Column>\n          <Placeholder height={60} label="Column" />\n        </Column>\n        <Column>\n          <Placeholder height={60} label="Column" />\n        </Column>\n      </Columns>'
}, {
  name: "3 Columns",
  code: '<Columns space="gutter">\n        <Column>\n          <Placeholder height={60} label="Column" />\n        </Column>\n        <Column>\n          <Placeholder height={60} label="Column" />\n        </Column>\n        <Column>\n          <Placeholder height={60} label="Column" />\n        </Column>\n      </Columns>'
}, {
  name: "3 Columns (Collapse Below Tablet)",
  code: '<Columns space="gutter" collapseBelow="tablet">\n        <Column>\n          <Placeholder height={60} label="Column" />\n        </Column>\n        <Column>\n          <Placeholder height={60} label="Column" />\n        </Column>\n        <Column>\n          <Placeholder height={60} label="Column" />\n        </Column>\n      </Columns>'
}, {
  name: "Main Content With Sidebar",
  code: '<Columns space="gutter" collapseBelow="tablet">\n        <Column width="2/3">\n          <Placeholder height={400} label="Main" />\n        </Column>\n        <Column>\n          <Placeholder height={100} label="Sidebar" />\n        </Column>\n      </Columns>'
}];
const snippets$z = [{
  name: "Standard",
  code: "<ContentBlock>\n        <Placeholder height={100} />\n      </ContentBlock>"
}, {
  name: "Xsmall",
  code: '<ContentBlock width="xsmall">\n        <Placeholder height={100} />\n      </ContentBlock>'
}, {
  name: "Small",
  code: '<ContentBlock width="small">\n        <Placeholder height={100} />\n      </ContentBlock>'
}, {
  name: "Large",
  code: '<ContentBlock width="large">\n        <Placeholder height={100} />\n      </ContentBlock>'
}];
const snippets$y = [{
  name: "Standard",
  code: '<Dialog title="Dialog Heading" open={true}>\n        <Placeholder width={250} height={100} />\n      </Dialog>'
}, {
  name: "With illustration",
  code: '<Dialog\n  title="Illustrated Dialog"\n  open={true}\n  illustration={\n  <Box style={{ height: 100, width: 100 }}>\n            <IconMail size="fill" />\n          </Box>}>\n\n\n        <Stack space="xlarge" align="center">\n          <Placeholder width="100%" height={100} />\n          <Inline space="small">\n            <Button>Got it</Button>\n            <Button variant="transparent">Cancel</Button>\n          </Inline>\n        </Stack>\n      </Dialog>'
}, {
  name: "Xsmall",
  code: '<Dialog title="Dialog Heading" width="xsmall" open={true}>\n        <Placeholder width="100%" height={100} />\n      </Dialog>'
}, {
  name: "Small",
  code: '<Dialog title="Dialog Heading" width="small" open={true}>\n        <Placeholder width="100%" height={100} />\n      </Dialog>'
}, {
  name: "Medium",
  code: '<Dialog title="Dialog Heading" width="medium" open={true}>\n        <Placeholder width="100%" height={100} />\n      </Dialog>'
}, {
  name: "Large",
  code: '<Dialog title="Dialog Heading" width="large" open={true}>\n        <Placeholder width="100%" height={100} />\n      </Dialog>'
}];
const snippets$x = [{
  name: "Standard",
  code: '<Disclosure expandLabel="Show" collapseLabel="Hide">\n        <Stack space="large">\n          <Text>Content</Text>\n        </Stack>\n      </Disclosure>'
}];
const snippets$w = [{
  name: "Regular",
  code: "<Divider />"
}, {
  name: "Strong",
  code: '<Divider weight="strong" />'
}];
const snippets$v = [{
  name: "Default",
  code: '<Drawer title="Drawer Heading" open={true}>\n        <Placeholder width="100%" height={100} />\n      </Drawer>'
}, {
  name: "Small",
  code: '<Drawer title="Drawer Heading" width="small" open={true}>\n        <Placeholder width="100%" height={100} />\n      </Drawer>'
}, {
  name: "Medium",
  code: '<Drawer title="Drawer Heading" width="medium" open={true}>\n        <Placeholder width="100%" height={100} />\n      </Drawer>'
}, {
  name: "Large",
  code: '<Drawer title="Drawer Heading" width="large" open={true}>\n        <Placeholder width="100%" height={100} />\n      </Drawer>'
}];
const snippets$u = [{
  name: "Standard",
  code: '<Dropdown label="Label" placeholder="Please select">\n        <option>Option 1</option>\n        <option>Option 2</option>\n        <option>Option 3</option>\n      </Dropdown>'
}, {
  name: "With option groups",
  code: '<Dropdown label="Label" placeholder="Please select">\n        <optgroup label="Group 1">\n          <option>Option 1</option>\n          <option>Option 2</option>\n          <option>Option 3</option>\n        </optgroup>\n        <optgroup label="Group 2">\n          <option>Option A</option>\n          <option>Option B</option>\n          <option>Option C</option>\n        </optgroup>\n      </Dropdown>'
}, {
  name: "With additional labels",
  code: '<Dropdown\n  label="Label"\n  placeholder="Please select"\n  secondaryLabel="optional"\n  tertiaryLabel={\n  <TextLink href="#" icon={<IconHelp />}>\n            Help\n          </TextLink>}>\n\n\n        <option>Option 1</option>\n        <option>Option 2</option>\n      </Dropdown>'
}, {
  name: "With a description",
  code: '<Dropdown\n  label="Label"\n  placeholder="Please select"\n  description="Extra information about the field">\n\n        <option>Option 1</option>\n        <option>Option 2</option>\n        <option>Option 3</option>\n      </Dropdown>'
}, {
  name: "With an icon",
  code: '<Dropdown\n  label="Label"\n  placeholder="Please select"\n  icon={<IconLocation />}>\n\n        <option>Option 1</option>\n        <option>Option 2</option>\n        <option>Option 3</option>\n      </Dropdown>'
}, {
  name: "With a critical message",
  code: '<Dropdown\n  label="Label"\n  placeholder="Please select"\n  tone="critical"\n  message="Critical message">\n\n        <option>Option 1</option>\n        <option>Option 2</option>\n        <option>Option 3</option>\n      </Dropdown>'
}, {
  name: "With a positive message",
  code: '<Dropdown\n  label="Label"\n  placeholder="Please select"\n  tone="positive"\n  message="Positive message">\n\n        <option>Option 1</option>\n        <option>Option 2</option>\n        <option>Option 3</option>\n      </Dropdown>'
}];
const snippets$t = [{
  name: "Standard",
  code: '<FieldLabel label="Label" />'
}, {
  name: "Standard with secondary label",
  code: '<FieldLabel label="Label" secondaryLabel="Optional" />'
}, {
  name: "Standard with tertiary label",
  code: '<FieldLabel\n  label="Label"\n  secondaryLabel="Optional"\n  tertiaryLabel={\n  <TextLink href="#" icon={<IconHelp />}>\n            Help\n          </TextLink>} />'
}];
const snippets$s = [{
  name: "Standard",
  code: '<FieldMessage message="This is a message" />'
}, {
  name: "Positive",
  code: '<FieldMessage tone="positive" message="This is a positive message" />'
}, {
  name: "Critical",
  code: '<FieldMessage tone="critical" message="This is a critical message" />'
}, {
  name: "Secondary message",
  code: '<FieldMessage\n  message="This is a message"\n  secondaryMessage={\n  <Text size="small" tone="secondary">\n            Secondary\n          </Text>} />'
}];
const snippets$r = [{
  name: "Level 1",
  code: '<Heading level="1">Heading</Heading>'
}, {
  name: "Level 1 (Weak)",
  code: '<Heading level="1" weight="weak">\n        Heading\n      </Heading>'
}, {
  name: "Level 1 (centered)",
  code: '<Heading level="1" align="center">\n        Heading\n      </Heading>'
}, {
  name: "Level 2",
  code: '<Heading level="2">Heading</Heading>'
}, {
  name: "Level 2 (Weak)",
  code: '<Heading level="2" weight="weak">\n        Heading\n      </Heading>'
}, {
  name: "Level 3",
  code: '<Heading level="3">Heading</Heading>'
}, {
  name: "Level 3 (Weak)",
  code: '<Heading level="3" weight="weak">\n        Heading\n      </Heading>'
}, {
  name: "Level 4",
  code: '<Heading level="4">Heading</Heading>'
}, {
  name: "Level 4 (Weak)",
  code: '<Heading level="4" weight="weak">\n        Heading\n      </Heading>'
}];
const snippets$q = [{
  name: "Small space",
  code: '<Inline space="small">\n        <Placeholder width={48} height={48} />\n        <Placeholder width={48} height={48} />\n        <Placeholder width={48} height={48} />\n      </Inline>'
}, {
  name: "Medium space",
  code: '<Inline space="medium">\n        <Placeholder width={48} height={48} />\n        <Placeholder width={48} height={48} />\n        <Placeholder width={48} height={48} />\n      </Inline>'
}, {
  name: "Responsive space",
  code: "<Inline space={{ mobile: 'small', tablet: 'large' }}>\n        <Placeholder width={48} height={48} />\n        <Placeholder width={48} height={48} />\n        <Placeholder width={48} height={48} />\n      </Inline>"
}, {
  name: "Responsive horizontal alignment",
  code: `<Inline space="small" align={{ mobile: 'center', tablet: 'left' }}>
        <Placeholder width={48} height={48} />
        <Placeholder width={48} height={48} />
        <Placeholder width={48} height={48} />
      </Inline>`
}, {
  name: "Vertically centered",
  code: '<Inline space="small" alignY="center">\n        <Placeholder width={48} height={40} />\n        <Placeholder width={48} height={100} />\n        <Placeholder width={48} height={60} />\n      </Inline>'
}];
const snippets$p = [{
  name: "XSmall Space",
  code: '<List space="xsmall">\n        <Text>Text</Text>\n        <Text>Text</Text>\n        <Text>Text</Text>\n      </List>'
}, {
  name: "Small Space",
  code: '<List space="small">\n        <Text>Text</Text>\n        <Text>Text</Text>\n        <Text>Text</Text>\n      </List>'
}, {
  name: "Medium Space",
  code: '<List space="medium">\n        <Text>Text</Text>\n        <Text>Text</Text>\n        <Text>Text</Text>\n      </List>'
}, {
  name: "Secondary",
  code: '<List space="medium" tone="secondary">\n        <Text>Text</Text>\n        <Text>Text</Text>\n        <Text>Text</Text>\n      </List>'
}, {
  name: "Numbered",
  code: '<List space="medium" type="number">\n        <Text>Text</Text>\n        <Text>Text</Text>\n        <Text>Text</Text>\n      </List>'
}, {
  name: "Alpha",
  code: '<List space="medium" type="alpha">\n        <Text>Text</Text>\n        <Text>Text</Text>\n        <Text>Text</Text>\n      </List>'
}, {
  name: "Roman",
  code: '<List space="medium" type="roman">\n        <Text>Text</Text>\n        <Text>Text</Text>\n        <Text>Text</Text>\n      </List>'
}, {
  name: "Icon",
  code: '<List space="medium" type="icon" icon={<IconTick tone="positive" />}>\n        <Text>Text</Text>\n        <Text>Text</Text>\n        <Text>Text</Text>\n      </List>'
}];
const snippets$o = [{
  name: "Standard",
  code: "<Loader />"
}];
const snippets$n = [{
  name: "Standard",
  code: '<MonthPicker label="Month" />'
}, {
  name: "With additional labels",
  code: '<MonthPicker\n  label="Label"\n  secondaryLabel="optional"\n  tertiaryLabel={\n  <TextLink href="#" icon={<IconHelp />}>\n            Help\n          </TextLink>} />'
}, {
  name: "With a description",
  code: '<MonthPicker\n  label="Label"\n  description="More detailed description of field." />'
}, {
  name: "With a critical message",
  code: '<MonthPicker label="Month" tone="critical" message="Critical message" />'
}, {
  name: "With a positive message",
  code: '<MonthPicker label="Month" tone="positive" message="Positive message" />'
}, {
  name: "With a neutral message",
  code: '<MonthPicker label="Month" tone="neutral" message="Neutral message" />'
}, {
  name: "With custom months and years",
  code: `<MonthPicker
  label="Started"
  monthLabel="MM"
  yearLabel="YYYY"
  monthNames={[
  '01',
  '02',
  '03',
  '04',
  '05',
  '06',
  '07',
  '08',
  '09',
  '10',
  '11',
  '12']} />`
}];
const snippets$m = [{
  name: "Critical",
  code: '<Notice tone="critical">\n        <Text>Critical Notice</Text>\n      </Notice>'
}, {
  name: "Positive",
  code: '<Notice tone="positive">\n        <Text>Positive Notice</Text>\n      </Notice>'
}, {
  name: "Info",
  code: '<Notice tone="info">\n        <Text>Info Notice</Text>\n      </Notice>'
}, {
  name: "Promote",
  code: '<Notice tone="promote">\n        <Text>Promote Notice</Text>\n      </Notice>'
}];
const snippets$l = [{
  name: "Standard",
  code: '<OverflowMenu label="Options">\n        <MenuItem>Option</MenuItem>\n        <MenuItem>Option</MenuItem>\n      </OverflowMenu>'
}];
const snippets$k = [{
  name: "Default",
  code: '<Page footer={<Placeholder label="Footer" height={100} />}>\n        <Placeholder label="Header" height={60} />\n      </Page>'
}, {
  name: "Footer below fold",
  code: '<Page\n  footer={<Placeholder label="Footer" height={100} />}\n  footerPosition="belowFold">\n\n        <Placeholder label="Header" height={60} />\n      </Page>'
}];
const snippets$j = [{
  name: "Medium",
  code: '<PageBlock width="medium">\n        <Placeholder height={100} />\n      </PageBlock>'
}, {
  name: "Large",
  code: '<PageBlock width="large">\n        <Placeholder height={100} />\n      </PageBlock>'
}];
const snippets$i = [{
  name: "Standard",
  code: "<Pagination />"
}];
const snippets$h = [{
  name: "Standard",
  code: '<PasswordField label="Password" />'
}, {
  name: "With additional labels",
  code: '<PasswordField\n  label="Password"\n  secondaryLabel="optional"\n  tertiaryLabel={<TextLink href="#">Forgot password?</TextLink>} />'
}, {
  name: "With a description",
  code: '<PasswordField\n  label="Label"\n  description="More detailed description of field." />'
}, {
  name: "With a critical message",
  code: '<PasswordField\n  label="Label"\n  tone="critical"\n  message="Critical message" />'
}, {
  name: "With a positive message",
  code: '<PasswordField\n  label="Label"\n  tone="positive"\n  message="Positive message" />'
}, {
  name: "With a neutral message",
  code: '<PasswordField label="Label" tone="neutral" message="Neutral message" />'
}];
const snippets$g = [{
  name: "Standard",
  code: '<RadioGroup label="Label">\n        <RadioItem label="One" value="1" />\n        <RadioItem label="Two" value="2" />\n      </RadioGroup>'
}, {
  name: "With a critical message",
  code: '<RadioGroup label="Label" tone="critical" message="Critical message">\n        <RadioItem label="One" value="1" />\n        <RadioItem label="Two" value="2" />\n      </RadioGroup>'
}, {
  name: "With a description",
  code: '<RadioGroup label="Label" description="More details about options">\n        <RadioItem label="One" value="1" />\n        <RadioItem label="Two" value="2" />\n      </RadioGroup>'
}, {
  name: "With item-level descriptions",
  code: '<RadioGroup label="Label">\n        <RadioItem label="One" value="1" description="Description for item 1" />\n        <RadioItem label="Two" value="2" description="Description for item 2" />\n      </RadioGroup>'
}, {
  name: "With a Badge",
  code: '<RadioGroup label="Label">\n        <RadioItem label="One" value="1" />\n        <RadioItem\n    label="Two"\n    value="2"\n    badge={\n    <Badge tone="positive" weight="strong">\n              Badge\n            </Badge>} />\n\n\n      </RadioGroup>'
}, {
  name: "Small",
  code: '<RadioGroup label="Label" size="small">\n        <RadioItem label="One" value="1" />\n        <RadioItem label="Two" value="2" />\n      </RadioGroup>'
}, {
  name: "With nested content",
  code: '<RadioGroup label="Label">\n        <RadioItem label="One" value="1" />\n        <RadioItem label="Two" value="2">\n          <Placeholder height={100} />\n        </RadioItem>\n      </RadioGroup>'
}];
const snippets$f = [{
  name: "Standard",
  code: "<Rating rating={3} />"
}, {
  name: "Large",
  code: '<Rating rating={3.7} size="large" />'
}, {
  name: "Variant: starsOnly",
  code: '<Rating rating={4.2} variant="starsOnly" />'
}, {
  name: "Variant: minimal",
  code: '<Rating rating={3.7} variant="minimal" />'
}];
const snippets$e = [{
  name: "Standard",
  code: "<Secondary>Secondary</Secondary>"
}];
const snippets$d = [{
  name: "XXSmall Space",
  code: '<Stack space="xxsmall">\n        <Placeholder height={40} />\n        <Placeholder height={40} />\n        <Placeholder height={40} />\n      </Stack>'
}, {
  name: "XSmall Space",
  code: '<Stack space="xsmall">\n        <Placeholder height={40} />\n        <Placeholder height={40} />\n        <Placeholder height={40} />\n      </Stack>'
}, {
  name: "Small Space",
  code: '<Stack space="small">\n        <Placeholder height={40} />\n        <Placeholder height={40} />\n        <Placeholder height={40} />\n      </Stack>'
}, {
  name: "Medium Space",
  code: '<Stack space="medium">\n        <Placeholder height={40} />\n        <Placeholder height={40} />\n        <Placeholder height={40} />\n      </Stack>'
}, {
  name: "Gutter Space",
  code: '<Stack space="gutter">\n        <Placeholder height={40} />\n        <Placeholder height={40} />\n        <Placeholder height={40} />\n      </Stack>'
}, {
  name: "Large Space",
  code: '<Stack space="large">\n        <Placeholder height={40} />\n        <Placeholder height={40} />\n        <Placeholder height={40} />\n      </Stack>'
}, {
  name: "Responsive Space",
  code: "<Stack space={{ mobile: 'small', tablet: 'large', desktop: 'none' }}>\n        <Placeholder height={40} />\n        <Placeholder height={40} />\n        <Placeholder height={40} />\n      </Stack>"
}];
const snippets$c = [{
  name: "Default",
  code: '<Stepper label="Linear steps" progress={3}>\n        <Step>1. First step</Step>\n        <Step>2. Second step</Step>\n        <Step>3. Third step</Step>\n        <Step>4. Forth step</Step>\n      </Stepper>'
}, {
  name: "Non-linear",
  code: '<Stepper mode="non-linear" label="Non-linear steps" activeStep={2}>\n        <Step>1. First step</Step>\n        <Step>2. Second step</Step>\n        <Step>3. Third step</Step>\n        <Step complete>4. Forth step</Step>\n      </Stepper>'
}, {
  name: "Neutral",
  code: '<Stepper label="Linear steps" tone="neutral" progress={3}>\n        <Step>1. First step</Step>\n        <Step>2. Second step</Step>\n        <Step>3. Third step</Step>\n        <Step>4. Forth step</Step>\n      </Stepper>'
}, {
  name: "Left aligned",
  code: '<Stepper label="Linear steps" align="left" progress={3}>\n        <Step>1. First step</Step>\n        <Step>2. Second step</Step>\n        <Step>3. Third step</Step>\n        <Step>4. Forth step</Step>\n      </Stepper>'
}];
const snippets$b = [{
  name: "Standard",
  code: "<Strong>Strong text</Strong>"
}];
const snippets$a = [{
  name: "2 Tabs",
  code: '<TabsProvider>\n        <Stack space="medium">\n          <Tabs>\n            <Tab>First</Tab>\n            <Tab>Second</Tab>\n          </Tabs>\n          <TabPanels>\n            <TabPanel>\n              <Placeholder label="First" height={200} />\n            </TabPanel>\n            <TabPanel>\n              <Placeholder label="Second" height={200} />\n            </TabPanel>\n          </TabPanels>\n        </Stack>\n      </TabsProvider>'
}, {
  name: "2 Tabs with Badge",
  code: '<TabsProvider>\n        <Stack space="medium">\n          <Tabs>\n            <Tab>First</Tab>\n            <Tab badge={<Badge tone="positive">Badge</Badge>}>Second</Tab>\n          </Tabs>\n          <TabPanels>\n            <TabPanel>\n              <Placeholder label="First" height={200} />\n            </TabPanel>\n            <TabPanel>\n              <Placeholder label="Second" height={200} />\n            </TabPanel>\n          </TabPanels>\n        </Stack>\n      </TabsProvider>'
}, {
  name: "2 Tabs (Centred)",
  code: '<TabsProvider>\n        <Stack space="medium">\n          <Tabs align="center">\n            <Tab>First</Tab>\n            <Tab>Second</Tab>\n          </Tabs>\n          <TabPanels>\n            <TabPanel>\n              <Placeholder label="First" height={200} />\n            </TabPanel>\n            <TabPanel>\n              <Placeholder label="Second" height={200} />\n            </TabPanel>\n          </TabPanels>\n        </Stack>\n      </TabsProvider>'
}, {
  name: "3 Tabs",
  code: '<TabsProvider>\n        <Stack space="medium">\n          <Tabs>\n            <Tab>First</Tab>\n            <Tab>Second</Tab>\n            <Tab>Third</Tab>\n          </Tabs>\n          <TabPanels>\n            <TabPanel>\n              <Placeholder label="First" height={200} />\n            </TabPanel>\n            <TabPanel>\n              <Placeholder label="Second" height={200} />\n            </TabPanel>\n            <TabPanel>\n              <Placeholder label="Third" height={200} />\n            </TabPanel>\n          </TabPanels>\n        </Stack>\n      </TabsProvider>'
}, {
  name: "3 Tabs with Badge",
  code: '<TabsProvider>\n        <Stack space="medium">\n          <Tabs>\n            <Tab>First</Tab>\n            <Tab>Second</Tab>\n            <Tab badge={<Badge tone="positive">Badge</Badge>}>Third</Tab>\n          </Tabs>\n          <TabPanels>\n            <TabPanel>\n              <Placeholder label="First" height={200} />\n            </TabPanel>\n            <TabPanel>\n              <Placeholder label="Second" height={200} />\n            </TabPanel>\n            <TabPanel>\n              <Placeholder label="Third" height={200} />\n            </TabPanel>\n          </TabPanels>\n        </Stack>\n      </TabsProvider>'
}, {
  name: "3 Tabs (Centred)",
  code: '<TabsProvider>\n        <Stack space="medium">\n          <Tabs align="center">\n            <Tab>First</Tab>\n            <Tab>Second</Tab>\n            <Tab>Third</Tab>\n          </Tabs>\n          <TabPanels>\n            <TabPanel>\n              <Placeholder label="First" height={200} />\n            </TabPanel>\n            <TabPanel>\n              <Placeholder label="Second" height={200} />\n            </TabPanel>\n            <TabPanel>\n              <Placeholder label="Third" height={200} />\n            </TabPanel>\n          </TabPanels>\n        </Stack>\n      </TabsProvider>'
}];
const snippets$9 = [{
  name: "Standard",
  code: '<Inline space="small">\n        <Tag>Tag</Tag>\n        <Tag>Tag</Tag>\n        <Tag>Tag</Tag>\n      </Inline>'
}, {
  name: "Clearable",
  code: '<Inline space="small">\n        <Tag onClear={() => {}} clearLabel="Clear">\n          Tag\n        </Tag>\n        <Tag onClear={() => {}} clearLabel="Clear">\n          Tag\n        </Tag>\n        <Tag onClear={() => {}} clearLabel="Clear">\n          Tag\n        </Tag>\n      </Inline>'
}];
const snippets$8 = [{
  name: "Standard",
  code: "<Text>Standard text</Text>"
}, {
  name: "Large",
  code: '<Text size="large">Large text</Text>'
}, {
  name: "Small",
  code: '<Text size="small">Small text</Text>'
}, {
  name: "Xsmall",
  code: '<Text size="xsmall">Xsmall text</Text>'
}, {
  name: "Tone (critical)",
  code: '<Text tone="critical">Critical text</Text>'
}, {
  name: "Tone (positive)",
  code: '<Text tone="positive">Positive text</Text>'
}, {
  name: "Tone (secondary)",
  code: '<Text tone="secondary">Secondary text</Text>'
}, {
  name: "Weight (strong)",
  code: '<Text weight="strong">Strong text</Text>'
}, {
  name: "Weight (medium)",
  code: '<Text weight="medium">Medium text</Text>'
}];
const snippets$7 = [{
  name: "Standard",
  code: `<Text>
        <TextDropdown
    label="Label"
    value="Option 1"
    options={['Option 1', 'Option 2', 'Option 3']} />

      </Text>`
}, {
  name: "Emphasised within a sentence",
  code: `<Text>
        Sort by{' '}
        <Strong>
          <TextDropdown
      label="Sort by"
      options={['Relevance', 'Date', 'Keyword']} />

        </Strong>
      </Text>`
}, {
  name: "Within a heading",
  code: `<Heading level="2">
        Heading with{' '}
        <TextDropdown
    label="Options"
    options={['Option 1', 'Option 2', 'Option 3']} />

      </Heading>`
}];
const snippets$6 = [{
  name: "Standard",
  code: '<TextField label="Label" />'
}, {
  name: "With additional labels",
  code: '<TextField\n  label="Label"\n  secondaryLabel="optional"\n  tertiaryLabel={\n  <TextLink href="#" icon={<IconHelp />}>\n            Help\n          </TextLink>} />'
}, {
  name: "With a description",
  code: '<TextField\n  label="Label"\n  description="More detailed description of field." />'
}, {
  name: "With an icon",
  code: '<TextField label="Label" icon={<IconSearch />} placeholder="Search" />'
}, {
  name: "With a prefix",
  code: '<TextField label="Label" prefix="Prefix" placeholder="Search" />'
}, {
  name: "With a critical message",
  code: '<TextField label="Label" tone="critical" message="Critical message" />'
}, {
  name: "With a positive message",
  code: '<TextField label="Label" tone="positive" message="Positive message" />'
}, {
  name: "With a neutral message",
  code: '<TextField label="Label" tone="neutral" message="Neutral message" />'
}];
const snippets$5 = [{
  name: "Inline link",
  code: '<Text>\n        <TextLink href="#">Link text</TextLink>\n      </Text>'
}, {
  name: "Large hit area",
  code: '<Text>\n        <TextLink href="#" hitArea="large">\n          Large hit area\n        </TextLink>\n      </Text>'
}, {
  name: "Visited",
  code: '<Text>\n        <TextLink href="" showVisited>\n          Visited link\n        </TextLink>\n      </Text>'
}];
const snippets$4 = [{
  name: "Standard",
  code: '<Textarea label="Label" />'
}, {
  name: "With additional labels",
  code: '<Textarea\n  label="Label"\n  secondaryLabel="optional"\n  tertiaryLabel={\n  <TextLink href="#" icon={<IconHelp />}>\n            Help\n          </TextLink>} />'
}, {
  name: "With a description",
  code: '<Textarea\n  label="Label"\n  description="More detailed description of field." />'
}, {
  name: "With a critical message",
  code: '<Textarea label="Label" tone="critical" message="Critical message" />'
}, {
  name: "With a positive message",
  code: '<Textarea label="Label" tone="positive" message="Positive message" />'
}, {
  name: "With a neutral message",
  code: '<Textarea label="Label" tone="neutral" message="Neutral message" />'
}, {
  name: "With fixed height of 5 lines",
  code: '<Textarea label="Label" grow={false} lines={5} />'
}, {
  name: "With dynamic height, limited to 7 lines",
  code: '<Textarea label="Label" grow={true} lineLimit={7} />'
}, {
  name: "With character limit",
  code: '<Textarea\n  label="Label"\n  description="Character limit of 100"\n  characterLimit={100} />'
}, {
  name: "With a highlighted range",
  code: '<Textarea\n  label="Label"\n  description="Characters 11-20 are highlighted"\n  tone="critical"\n  message="Critical message"\n  highlightRanges={[{ start: 11, end: 20 }]} />'
}];
const snippets$3 = [{
  name: "2 columns, small space",
  code: '<Tiles space="small" columns={2}>\n        <Placeholder height={48} />\n        <Placeholder height={48} />\n        <Placeholder height={48} />\n        <Placeholder height={48} />\n        <Placeholder height={48} />\n      </Tiles>'
}, {
  name: "3 columns, medium space",
  code: '<Tiles space="medium" columns={3}>\n        <Placeholder height={48} />\n        <Placeholder height={48} />\n        <Placeholder height={48} />\n        <Placeholder height={48} />\n        <Placeholder height={48} />\n      </Tiles>'
}, {
  name: "2 columns on mobile, 4 above tablet",
  code: '<Tiles space="small" columns={{ mobile: 2, tablet: 4 }}>\n        <Placeholder height={48} />\n        <Placeholder height={48} />\n        <Placeholder height={48} />\n        <Placeholder height={48} />\n        <Placeholder height={48} />\n        <Placeholder height={48} />\n      </Tiles>'
}, {
  name: "Dividers in single column",
  code: '<Tiles space="small" columns={{ mobile: 1, tablet: 2 }} dividers>\n        <Placeholder height={48} />\n        <Placeholder height={48} />\n        <Placeholder height={48} />\n        <Placeholder height={48} />\n        <Placeholder height={48} />\n        <Placeholder height={48} />\n      </Tiles>'
}];
const snippets$2 = [{
  name: "Standard",
  code: '<Toggle label="Label" />'
}, {
  name: "Small",
  code: '<Toggle label="Label" size="small" />'
}, {
  name: "Right aligned",
  code: '<Toggle label="Label" align="right" />'
}, {
  name: "Justified",
  code: '<Toggle label="Label" align="justify" />'
}];
const snippets$1 = [{
  name: "Standard",
  code: '<TooltipRenderer tooltip={<Text>This is a tooltip!</Text>}>\n        {({ triggerProps }) =>\n  <Box {...triggerProps}>\n            <Placeholder label="Tooltip trigger" height={100} />\n          </Box>}\n\n      </TooltipRenderer>'
}];
const snippets = Object.entries({
  Accordion: snippets$K,
  Actions: snippets$J,
  Alert: snippets$I,
  Autosuggest: snippets$H,
  Badge: snippets$G,
  Bleed: snippets$F,
  Button: snippets$E,
  ButtonIcon: snippets$D,
  Card: snippets$C,
  Checkbox: snippets$B,
  Columns: snippets$A,
  ContentBlock: snippets$z,
  Dialog: snippets$y,
  Disclosure: snippets$x,
  Divider: snippets$w,
  Drawer: snippets$v,
  Dropdown: snippets$u,
  FieldLabel: snippets$t,
  FieldMessage: snippets$s,
  Heading: snippets$r,
  Inline: snippets$q,
  List: snippets$p,
  Loader: snippets$o,
  MonthPicker: snippets$n,
  Notice: snippets$m,
  OverflowMenu: snippets$l,
  Page: snippets$k,
  PageBlock: snippets$j,
  Pagination: snippets$i,
  PasswordField: snippets$h,
  RadioGroup: snippets$g,
  Rating: snippets$f,
  Secondary: snippets$e,
  Stack: snippets$d,
  Stepper: snippets$c,
  Strong: snippets$b,
  Tabs: snippets$a,
  Tag: snippets$9,
  Text: snippets$8,
  TextDropdown: snippets$7,
  TextField: snippets$6,
  TextLink: snippets$5,
  Textarea: snippets$4,
  Tiles: snippets$3,
  Toggle: snippets$2,
  TooltipRenderer: snippets$1
}).map(
  ([group, snippets2]) => snippets2.map((snippet) => ({
    ...snippet,
    group
  }))
).flat();
export {
  snippets as default
};
