braid-design-system 32.16.0 → 32.16.2

package/dist/playroom/snippets.mjs

@@ -1,903 +1,4 @@
-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();
+import { snippets } from "../lib/playroom/snippets.mjs";
 export {
   snippets as default
 };