braid-design-system 32.12.0 → 32.12.2

package/dist/playroom/snippets.cjs

@@ -19,7 +19,7 @@ const snippets$K = [{
   code: '<AccordionItem label="Label" size="standard">\n        <Placeholder height={100} />\n      </AccordionItem>'
 }, {
   name: "Standalone item with a badge",
-  code: '<AccordionItem label="Label" badge={<Badge tone="promote" weight="strong">\n            Badge\n          </Badge>}>\n        <Placeholder height={100} />\n      </AccordionItem>'
+  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",
@@ -55,78 +55,81 @@ const snippets$I = [{
 }];
 const snippets$H = [{
   name: "Standard",
-  code: `<Autosuggest id="fruit" label="Fruit" suggestions={[{
-  text: 'Apples'
-}, {
-  text: 'Bananas'
-}, {
-  text: 'Carrots'
-}]} />`
+  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'
-  }]
-}]} />`
+  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'
-}]} />`
+  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'
-}]} />`
+  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'
-}]} />`
+  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'
-}]} />`
+  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",
@@ -253,16 +256,16 @@ const snippets$E = [{
 }];
 const snippets$D = [{
   name: "Soft",
-  code: '<ButtonIcon variant="soft" icon={<IconBookmark />} label="Bookmark" id="buttonicon-soft" />'
+  code: '<ButtonIcon\n  variant="soft"\n  icon={<IconBookmark />}\n  label="Bookmark"\n  id="buttonicon-soft" />'
 }, {
   name: "Transparent",
-  code: '<ButtonIcon variant="transparent" icon={<IconHelp />} label="Help" id="buttonicon-transparent" />'
+  code: '<ButtonIcon\n  variant="transparent"\n  icon={<IconHelp />}\n  label="Help"\n  id="buttonicon-transparent" />'
 }, {
   name: "Large",
-  code: '<ButtonIcon size="large" icon={<IconAdd />} label="Add" id="buttonicon-large" />'
+  code: '<ButtonIcon\n  size="large"\n  icon={<IconAdd />}\n  label="Add"\n  id="buttonicon-large" />'
 }, {
   name: "Secondary",
-  code: '<ButtonIcon tone="secondary" icon={<IconClear />} label="Close" id="buttonicon-secondary" />'
+  code: '<ButtonIcon\n  tone="secondary"\n  icon={<IconClear />}\n  label="Close"\n  id="buttonicon-secondary" />'
 }];
 const snippets$C = [{
   name: "With Heading",
@@ -333,7 +336,7 @@ const snippets$y = [{
   code: '<Dialog title="Dialog Heading" open={true}>\n        <Placeholder width={250} height={100} />\n      </Dialog>'
 }, {
   name: "With illustration",
-  code: '<Dialog title="Illustrated Dialog" open={true} illustration={<Box style={{\n  height: 100,\n  width: 100\n}}>\n            <IconMail size="fill" />\n          </Box>}>\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>'
+  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>'
@@ -379,19 +382,19 @@ const snippets$u = [{
   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 label="Label" placeholder="Please select" secondaryLabel="optional" tertiaryLabel={<TextLink href="#">\n            <IconHelp /> Help\n          </TextLink>}>\n        <option>Option 1</option>\n        <option>Option 2</option>\n      </Dropdown>'
+  code: '<Dropdown\n  label="Label"\n  placeholder="Please select"\n  secondaryLabel="optional"\n  tertiaryLabel={\n  <TextLink href="#">\n            <IconHelp /> Help\n          </TextLink>}>\n\n\n        <option>Option 1</option>\n        <option>Option 2</option>\n      </Dropdown>'
 }, {
   name: "With a description",
-  code: '<Dropdown label="Label" placeholder="Please select" description="Extra information about the field">\n        <option>Option 1</option>\n        <option>Option 2</option>\n        <option>Option 3</option>\n      </Dropdown>'
+  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 label="Label" placeholder="Please select" icon={<IconLocation />}>\n        <option>Option 1</option>\n        <option>Option 2</option>\n        <option>Option 3</option>\n      </Dropdown>'
+  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 label="Label" placeholder="Please select" tone="critical" message="Critical message">\n        <option>Option 1</option>\n        <option>Option 2</option>\n        <option>Option 3</option>\n      </Dropdown>'
+  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 label="Label" placeholder="Please select" tone="positive" message="Positive message">\n        <option>Option 1</option>\n        <option>Option 2</option>\n        <option>Option 3</option>\n      </Dropdown>'
+  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",
@@ -401,7 +404,7 @@ const snippets$t = [{
   code: '<FieldLabel label="Label" secondaryLabel="Optional" />'
 }, {
   name: "Standard with tertiary label",
-  code: '<FieldLabel label="Label" secondaryLabel="Optional" tertiaryLabel={<TextLink href="#">Help?</TextLink>} />'
+  code: '<FieldLabel\n  label="Label"\n  secondaryLabel="Optional"\n  tertiaryLabel={<TextLink href="#">Help?</TextLink>} />'
 }];
 const snippets$s = [{
   name: "Standard",
@@ -414,7 +417,7 @@ const snippets$s = [{
   code: '<FieldMessage tone="critical" message="This is a critical message" />'
 }, {
   name: "Secondary message",
-  code: '<FieldMessage message="This is a message" secondaryMessage={<Text size="small" tone="secondary">\n            Secondary\n          </Text>} />'
+  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",
@@ -452,13 +455,10 @@ const snippets$q = [{
   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={{\n  mobile: 'small',\n  tablet: 'large'\n}}>\n        <Placeholder width={48} height={48} />\n        <Placeholder width={48} height={48} />\n        <Placeholder width={48} height={48} />\n      </Inline>"
+  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'
-}}>
+  code: `<Inline space="small" align={{ mobile: 'center', tablet: 'left' }}>
         <Placeholder width={48} height={48} />
         <Placeholder width={48} height={48} />
         <Placeholder width={48} height={48} />
@@ -501,10 +501,10 @@ const snippets$n = [{
   code: '<MonthPicker label="Month" />'
 }, {
   name: "With additional labels",
-  code: '<MonthPicker label="Label" secondaryLabel="optional" tertiaryLabel={<TextLink href="#">\n            <IconHelp /> Help\n          </TextLink>} />'
+  code: '<MonthPicker\n  label="Label"\n  secondaryLabel="optional"\n  tertiaryLabel={\n  <TextLink href="#">\n            <IconHelp /> Help\n          </TextLink>} />'
 }, {
   name: "With a description",
-  code: '<MonthPicker label="Label" description="More detailed description of field." />'
+  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" />'
@@ -516,7 +516,23 @@ const snippets$n = [{
   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']} />`
+  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",
@@ -540,7 +556,7 @@ const snippets$k = [{
   code: '<Page footer={<Placeholder label="Footer" height={100} />}>\n        <Placeholder label="Header" height={60} />\n      </Page>'
 }, {
   name: "Footer below fold",
-  code: '<Page footer={<Placeholder label="Footer" height={100} />} footerPosition="belowFold">\n        <Placeholder label="Header" height={60} />\n      </Page>'
+  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",
@@ -558,16 +574,16 @@ const snippets$h = [{
   code: '<PasswordField label="Password" />'
 }, {
   name: "With additional labels",
-  code: '<PasswordField label="Password" secondaryLabel="optional" tertiaryLabel={<TextLink href="#">Forgot password?</TextLink>} />'
+  code: '<PasswordField\n  label="Password"\n  secondaryLabel="optional"\n  tertiaryLabel={<TextLink href="#">Forgot password?</TextLink>} />'
 }, {
   name: "With a description",
-  code: '<PasswordField label="Label" description="More detailed description of field." />'
+  code: '<PasswordField\n  label="Label"\n  description="More detailed description of field." />'
 }, {
   name: "With a critical message",
-  code: '<PasswordField label="Label" tone="critical" message="Critical message" />'
+  code: '<PasswordField\n  label="Label"\n  tone="critical"\n  message="Critical message" />'
 }, {
   name: "With a positive message",
-  code: '<PasswordField label="Label" tone="positive" message="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" />'
@@ -586,7 +602,7 @@ const snippets$g = [{
   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 label="Two" value="2" badge={<Badge tone="positive" weight="strong">\n              Badge\n            </Badge>} />\n      </RadioGroup>'
+  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>'
@@ -631,7 +647,7 @@ const snippets$d = [{
   code: '<Stack space="large">\n        <Placeholder height={40} />\n        <Placeholder height={40} />\n        <Placeholder height={40} />\n      </Stack>'
 }, {
   name: "Responsive Space",
-  code: "<Stack space={{\n  mobile: 'small',\n  tablet: 'large',\n  desktop: 'none'\n}}>\n        <Placeholder height={40} />\n        <Placeholder height={40} />\n        <Placeholder height={40} />\n      </Stack>"
+  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",
@@ -707,21 +723,31 @@ const snippets$8 = [{
 const snippets$7 = [{
   name: "Standard",
   code: `<Text>
-        <TextDropdown label="Label" value="Option 1" options={['Option 1', 'Option 2', 'Option 3']} />
+        <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']} />
+          <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']} />
+        <TextDropdown
+    label="Options"
+    options={['Option 1', 'Option 2', 'Option 3']} />
+
       </Heading>`
 }];
 const snippets$6 = [{
@@ -729,10 +755,10 @@ const snippets$6 = [{
   code: '<TextField label="Label" />'
 }, {
   name: "With additional labels",
-  code: '<TextField label="Label" secondaryLabel="optional" tertiaryLabel={<TextLink href="#">\n            <IconHelp /> Help\n          </TextLink>} />'
+  code: '<TextField\n  label="Label"\n  secondaryLabel="optional"\n  tertiaryLabel={\n  <TextLink href="#">\n            <IconHelp /> Help\n          </TextLink>} />'
 }, {
   name: "With a description",
-  code: '<TextField label="Label" description="More detailed description of field." />'
+  code: '<TextField\n  label="Label"\n  description="More detailed description of field." />'
 }, {
   name: "With an icon",
   code: '<TextField label="Label" icon={<IconSearch />} placeholder="Search" />'
@@ -764,10 +790,10 @@ const snippets$4 = [{
   code: '<Textarea label="Label" />'
 }, {
   name: "With additional labels",
-  code: '<Textarea label="Label" secondaryLabel="optional" tertiaryLabel={<TextLink href="#">\n            <IconHelp /> Help\n          </TextLink>} />'
+  code: '<Textarea\n  label="Label"\n  secondaryLabel="optional"\n  tertiaryLabel={\n  <TextLink href="#">\n            <IconHelp /> Help\n          </TextLink>} />'
 }, {
   name: "With a description",
-  code: '<Textarea label="Label" description="More detailed description of field." />'
+  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" />'
@@ -785,10 +811,10 @@ const snippets$4 = [{
   code: '<Textarea label="Label" grow={true} lineLimit={7} />'
 }, {
   name: "With character limit",
-  code: '<Textarea label="Label" description="Character limit of 100" characterLimit={100} />'
+  code: '<Textarea\n  label="Label"\n  description="Character limit of 100"\n  characterLimit={100} />'
 }, {
   name: "With a highlighted range",
-  code: '<Textarea label="Label" description="Characters 11-20 are highlighted" tone="critical" message="Critical message" highlightRanges={[{\n  start: 11,\n  end: 20\n}]} />'
+  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",
@@ -798,10 +824,10 @@ const snippets$3 = [{
   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={{\n  mobile: 2,\n  tablet: 4\n}}>\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>'
+  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={{\n  mobile: 1,\n  tablet: 2\n}} 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>'
+  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",
@@ -818,7 +844,7 @@ const snippets$2 = [{
 }];
 const snippets$1 = [{
   name: "Standard",
-  code: '<TooltipRenderer tooltip={<Text>This is a tooltip!</Text>}>\n        {({\n    triggerProps\n  }) => <Box {...triggerProps}>\n            <Placeholder label="Tooltip trigger" height={100} />\n          </Box>}\n      </TooltipRenderer>'
+  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,