From 59fdf2890bcb2a02587b9a93267a7e19f617b8f0 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Mon, 16 Sep 2024 09:03:11 +0000 Subject: [PATCH] deploy: 5c5b46c408a66f12c2a55c4f60339dc694f727e8 --- ...8da.js => AlertBanner.stories-c426409c.js} | 2 +- ...f5d9be59.js => Avatar.stories-71c65545.js} | 2 +- ...-74997fda.js => Badge.stories-b029c069.js} | 2 +- ...110.js => BooleanPill.stories-702ad857.js} | 2 +- ...9c869d87.js => Button.stories-81def227.js} | 2 +- ...86c.js => ButtonGroup.stories-d78c2410.js} | 2 +- ...s-7136c12b.js => Card.stories-0c6fd7f3.js} | 2 +- ...elog-d09700fd.js => Changelog-ef2895b8.js} | 2 +- ...d3e08f.js => Checkbox.stories-2a7c0798.js} | 2 +- ...a.js => CheckboxGroup.stories-b1ccd020.js} | 2 +- ...ab70258b.js => Color-6VNJS4EI-89ab36ce.js} | 2 +- ...da.js => CornerDialog.stories-5b757560.js} | 2 +- ...9eb97f9.js => Counter.stories-c3f72f40.js} | 2 +- ...9b85ed1.js => Divider.stories-c2ba6d60.js} | 2 +- assets/DocsRenderer-NNNQARDV-58ffdfa6.js | 1 + assets/DocsRenderer-NNNQARDV-97b08615.js | 1 - ...7e6a3f.js => FileIcon.stories-472b2208.js} | 2 +- ...314ae0.js => FileItem.stories-b4c3da12.js} | 2 +- assets/Header-bd913400.js | 1 + assets/Header.stories-bff52702.js | 27 +++ ...77f1.js => HelperText.stories-76d070ec.js} | 2 +- ...s-9fc50467.js => Icon.stories-af199cb6.js} | 2 +- ...e723.js => IconButton.stories-107d0739.js} | 2 +- ...6f.js => InlineBanner.stories-e4d19938.js} | 2 +- ...f.js => InlineMessage.stories-82d378b4.js} | 2 +- ...9.js => InlineMetrics.stories-e08c6d7f.js} | 2 +- assets/InlineSearchInput-5d7f41cf.js | 1 - assets/InlineSearchInput-5f62f4f4.js | 1 + ... => InlineSearchInput.stories-e6e8c645.js} | 2 +- ...-c6fcf41b.js => Label.stories-080280e4.js} | 2 +- ...533b663a.js => Loader.stories-38cb6fec.js} | 2 +- ...980.js => MetricsCard.stories-e177abbd.js} | 2 +- ...7.js => NewItemButton.stories-79720ef9.js} | 2 +- ...07a0b53.js => Popover.stories-581e3519.js} | 2 +- ...c47.js => RadioButton.stories-8255924a.js} | 2 +- ...s => RadioButtonGroup.stories-05821043.js} | 2 +- ...{ReadMe-4ecc6dee.js => ReadMe-cf81fdf1.js} | 2 +- ...ut-4f2af798.js => SearchInput-65954fe3.js} | 2 +- ...dea.js => SearchInput.stories-abe13af6.js} | 2 +- ...2a924a12.js => Select.stories-53a92a8a.js} | 2 +- ....js => SelectablePill.stories-ab024ad6.js} | 2 +- ...e6.js => SocialButton.stories-d390b959.js} | 2 +- ...249985e0.js => Status.stories-158fa267.js} | 2 +- ...b7609.js => StatusDot.stories-4d648510.js} | 2 +- ...es-84b7de9b.js => Tag.stories-682437b9.js} | 2 +- assets/TagInput.stories-28ac3636.js | 34 ++++ assets/TagInput.stories-eef58812.js | 34 ---- ...etDocs-b00055fe.js => TetDocs-85781681.js} | 2 +- assets/TextInput-caa0a9e6.js | 1 + assets/TextInput-ff669e43.js | 1 - ...6fb39.js => TextInput.stories-6cac2c81.js} | 2 +- ...-19529646.js => Toast.stories-254bdd90.js} | 2 +- ...83f5ba7d.js => Toggle.stories-cd83ea8e.js} | 2 +- ...765ccf1.js => Tooltip.stories-109917dc.js} | 2 +- ...1c.js => WithTooltip-V3YHNWJZ-97df6c8a.js} | 2 +- ...18d4b5c4.js => chunk-HLWAVYOI-9d0ad931.js} | 2 +- ...78fa.js => formatter-SWP5E3XI-0c0afcd4.js} | 2 +- assets/iframe-6ef61652.js | 1 - assets/iframe-e2d638c9.js | 1 + .../{index-8e69feee.js => index-74beb656.js} | 8 +- assets/preview-bb3f8911.js | 1 - assets/preview-f6a47fe4.js | 1 + ...=> syntaxhighlighter-V7JZZA35-28300d9e.js} | 2 +- iframe.html | 2 +- index.json | 2 +- project.json | 2 +- src/components/Header/Header.d.ts | 4 + src/components/Header/Header.props.d.ts | 11 ++ src/components/Header/Header.stories.d.ts | 19 ++ src/components/Header/Header.styles.d.ts | 164 ++++++++++++++++++ src/components/Header/Header.test.d.ts | 1 + src/components/Header/index.d.ts | 3 + src/components/Header/stylesBuilder.d.ts | 15 ++ src/docs-components/HeaderDocs.d.ts | 2 + src/index.d.ts | 1 + stories.json | 2 +- 76 files changed, 343 insertions(+), 95 deletions(-) rename assets/{AlertBanner.stories-c8ec78da.js => AlertBanner.stories-c426409c.js} (94%) rename assets/{Avatar.stories-f5d9be59.js => Avatar.stories-71c65545.js} (96%) rename assets/{Badge.stories-74997fda.js => Badge.stories-b029c069.js} (94%) rename assets/{BooleanPill.stories-ff01d110.js => BooleanPill.stories-702ad857.js} (95%) rename assets/{Button.stories-9c869d87.js => Button.stories-81def227.js} (99%) rename assets/{ButtonGroup.stories-39cbb86c.js => ButtonGroup.stories-d78c2410.js} (92%) rename assets/{Card.stories-7136c12b.js => Card.stories-0c6fd7f3.js} (98%) rename assets/{Changelog-d09700fd.js => Changelog-ef2895b8.js} (98%) rename assets/{Checkbox.stories-fbd3e08f.js => Checkbox.stories-2a7c0798.js} (96%) rename assets/{CheckboxGroup.stories-82f98fea.js => CheckboxGroup.stories-b1ccd020.js} (94%) rename assets/{Color-6VNJS4EI-ab70258b.js => Color-6VNJS4EI-89ab36ce.js} (99%) rename assets/{CornerDialog.stories-265920da.js => CornerDialog.stories-5b757560.js} (98%) rename assets/{Counter.stories-79eb97f9.js => Counter.stories-c3f72f40.js} (97%) rename assets/{Divider.stories-c9b85ed1.js => Divider.stories-c2ba6d60.js} (88%) create mode 100644 assets/DocsRenderer-NNNQARDV-58ffdfa6.js delete mode 100644 assets/DocsRenderer-NNNQARDV-97b08615.js rename assets/{FileIcon.stories-c67e6a3f.js => FileIcon.stories-472b2208.js} (89%) rename assets/{FileItem.stories-4f314ae0.js => FileItem.stories-b4c3da12.js} (98%) create mode 100644 assets/Header-bd913400.js create mode 100644 assets/Header.stories-bff52702.js rename assets/{HelperText.stories-97cd77f1.js => HelperText.stories-76d070ec.js} (93%) rename assets/{Icon.stories-9fc50467.js => Icon.stories-af199cb6.js} (92%) rename assets/{IconButton.stories-b635e723.js => IconButton.stories-107d0739.js} (92%) rename assets/{InlineBanner.stories-4dbc9e6f.js => InlineBanner.stories-e4d19938.js} (94%) rename assets/{InlineMessage.stories-94acedef.js => InlineMessage.stories-82d378b4.js} (95%) rename assets/{InlineMetrics.stories-3ac06339.js => InlineMetrics.stories-e08c6d7f.js} (91%) delete mode 100644 assets/InlineSearchInput-5d7f41cf.js create mode 100644 assets/InlineSearchInput-5f62f4f4.js rename assets/{InlineSearchInput.stories-104b824f.js => InlineSearchInput.stories-e6e8c645.js} (86%) rename assets/{Label.stories-c6fcf41b.js => Label.stories-080280e4.js} (94%) rename assets/{Loader.stories-533b663a.js => Loader.stories-38cb6fec.js} (97%) rename assets/{MetricsCard.stories-0da37980.js => MetricsCard.stories-e177abbd.js} (96%) rename assets/{NewItemButton.stories-1fdbb8b7.js => NewItemButton.stories-79720ef9.js} (92%) rename assets/{Popover.stories-a07a0b53.js => Popover.stories-581e3519.js} (94%) rename assets/{RadioButton.stories-3befac47.js => RadioButton.stories-8255924a.js} (97%) rename assets/{RadioButtonGroup.stories-282b5c60.js => RadioButtonGroup.stories-05821043.js} (96%) rename assets/{ReadMe-4ecc6dee.js => ReadMe-cf81fdf1.js} (97%) rename assets/{SearchInput-4f2af798.js => SearchInput-65954fe3.js} (92%) rename assets/{SearchInput.stories-2e347dea.js => SearchInput.stories-abe13af6.js} (91%) rename assets/{Select.stories-2a924a12.js => Select.stories-53a92a8a.js} (93%) rename assets/{SelectablePill.stories-1c9160f3.js => SelectablePill.stories-ab024ad6.js} (97%) rename assets/{SocialButton.stories-61cd88e6.js => SocialButton.stories-d390b959.js} (97%) rename assets/{Status.stories-249985e0.js => Status.stories-158fa267.js} (94%) rename assets/{StatusDot.stories-2bbb7609.js => StatusDot.stories-4d648510.js} (94%) rename assets/{Tag.stories-84b7de9b.js => Tag.stories-682437b9.js} (92%) create mode 100644 assets/TagInput.stories-28ac3636.js delete mode 100644 assets/TagInput.stories-eef58812.js rename assets/{TetDocs-b00055fe.js => TetDocs-85781681.js} (99%) create mode 100644 assets/TextInput-caa0a9e6.js delete mode 100644 assets/TextInput-ff669e43.js rename assets/{TextInput.stories-5ab6fb39.js => TextInput.stories-6cac2c81.js} (96%) rename assets/{Toast.stories-19529646.js => Toast.stories-254bdd90.js} (95%) rename assets/{Toggle.stories-83f5ba7d.js => Toggle.stories-cd83ea8e.js} (97%) rename assets/{Tooltip.stories-3765ccf1.js => Tooltip.stories-109917dc.js} (94%) rename assets/{WithTooltip-V3YHNWJZ-089a2f1c.js => WithTooltip-V3YHNWJZ-97df6c8a.js} (64%) rename assets/{chunk-HLWAVYOI-18d4b5c4.js => chunk-HLWAVYOI-9d0ad931.js} (87%) rename assets/{formatter-SWP5E3XI-a82778fa.js => formatter-SWP5E3XI-0c0afcd4.js} (99%) delete mode 100644 assets/iframe-6ef61652.js create mode 100644 assets/iframe-e2d638c9.js rename assets/{index-8e69feee.js => index-74beb656.js} (99%) delete mode 100644 assets/preview-bb3f8911.js create mode 100644 assets/preview-f6a47fe4.js rename assets/{syntaxhighlighter-V7JZZA35-0d80127c.js => syntaxhighlighter-V7JZZA35-28300d9e.js} (65%) create mode 100644 src/components/Header/Header.d.ts create mode 100644 src/components/Header/Header.props.d.ts create mode 100644 src/components/Header/Header.stories.d.ts create mode 100644 src/components/Header/Header.styles.d.ts create mode 100644 src/components/Header/Header.test.d.ts create mode 100644 src/components/Header/index.d.ts create mode 100644 src/components/Header/stylesBuilder.d.ts create mode 100644 src/docs-components/HeaderDocs.d.ts diff --git a/assets/AlertBanner.stories-c8ec78da.js b/assets/AlertBanner.stories-c426409c.js similarity index 94% rename from assets/AlertBanner.stories-c8ec78da.js rename to assets/AlertBanner.stories-c426409c.js index eebc4fbb..5552725e 100644 --- a/assets/AlertBanner.stories-c8ec78da.js +++ b/assets/AlertBanner.stories-c426409c.js @@ -1,4 +1,4 @@ -import{j as e}from"./jsx-runtime-ffb262ed.js";import{a as i}from"./chunk-WFFRPTHA-80d37c1b.js";import{A as m}from"./AlertBanner-d1cf2c2e.js";import{l as k}from"./mergeConfigWithCustom-aec35d44.js";import{S as a}from"./SectionHeader-e7c49046.js";import{t as c}from"./TetrislyProvider-679426f7.js";import{T as $}from"./TetDocs-b00055fe.js";import"./index-76fb7be0.js";import"./_commonjsHelpers-de833af9.js";import"./preview-errors-60885292.js";import"./index-356e4a49.js";import"./v4-4a60fe23.js";import"./tetrisly-icons.es-12549e88.js";import"./Button-62f4c63b.js";import"./index-52c2b68d.js";import"./IconButton-9e77b08a.js";import"./useAction-275346b1.js";import"./index-8e69feee.js";import"./iframe-6ef61652.js";import"../sb-preview/runtime.js";import"./index-d3ea75b5.js";import"./index-11d98b33.js";import"./index-8fd8397b.js";const C=["none","success","warning","negative"],S=()=>e.jsx(e.Fragment,{children:C.map(r=>e.jsxs(c.section,{children:[e.jsxs(a,{px:{md:"$dimension-1000",_:"$dimension-500"},py:"$dimension-500",variant:"H1",children:["Intent: ",k.capitalize(r)]}),e.jsxs(c.div,{px:{md:"$dimension-1000",_:"$dimension-500"},children:[e.jsx(a,{py:"$dimension-500",variant:"H2",children:"Action: No"}),e.jsx(m,{text:"Alert text",intent:r})]}),e.jsxs(c.div,{px:{md:"$dimension-1000",_:"$dimension-500"},children:[e.jsx(a,{py:"$dimension-500",variant:"H2",children:"Action: Yes"}),e.jsx(m,{text:"Alert text",intent:r,my:"$dimension-500",action:[{label:"Click me",onClick:i("onClick")},{label:"Or click me",onClick:i("onClick")}]})]})]},r))}),M={title:"AlertBanner",component:m,tags:["autodocs"],args:{text:"Alert text",action:[{label:"Action",onClick:i("onClick")},{label:"Action",onClick:i("onClick")}]},argTypes:{intent:{options:["none","success","warning","negative"],defaultValue:"none",control:{type:"radio"}}},parameters:{docs:{description:{component:"Prominent element used to display important messages or notifications to users. Alert Banners can convey various levels of urgency, such as success, warning, or error. They are designed to capture the user's attention and provide a clear and concise message."},page:()=>e.jsx($,{docs:"https://docs.tetrisly.com/components/list/alertbanner",children:e.jsx(S,{})})}}},t={},n={args:{intent:"success"}},s={args:{intent:"warning"}},o={args:{intent:"negative"}};var p,l,d;t.parameters={...t.parameters,docs:{...(p=t.parameters)==null?void 0:p.docs,source:{originalSource:"{}",...(d=(l=t.parameters)==null?void 0:l.docs)==null?void 0:d.source}}};var g,u,x;n.parameters={...n.parameters,docs:{...(g=n.parameters)==null?void 0:g.docs,source:{originalSource:`{ +import{j as e}from"./jsx-runtime-ffb262ed.js";import{a as i}from"./chunk-WFFRPTHA-80d37c1b.js";import{A as m}from"./AlertBanner-d1cf2c2e.js";import{l as k}from"./mergeConfigWithCustom-aec35d44.js";import{S as a}from"./SectionHeader-e7c49046.js";import{t as c}from"./TetrislyProvider-679426f7.js";import{T as $}from"./TetDocs-85781681.js";import"./index-76fb7be0.js";import"./_commonjsHelpers-de833af9.js";import"./preview-errors-60885292.js";import"./index-356e4a49.js";import"./v4-4a60fe23.js";import"./tetrisly-icons.es-12549e88.js";import"./Button-62f4c63b.js";import"./index-52c2b68d.js";import"./IconButton-9e77b08a.js";import"./useAction-275346b1.js";import"./index-74beb656.js";import"./iframe-e2d638c9.js";import"../sb-preview/runtime.js";import"./index-d3ea75b5.js";import"./index-11d98b33.js";import"./index-8fd8397b.js";const C=["none","success","warning","negative"],S=()=>e.jsx(e.Fragment,{children:C.map(r=>e.jsxs(c.section,{children:[e.jsxs(a,{px:{md:"$dimension-1000",_:"$dimension-500"},py:"$dimension-500",variant:"H1",children:["Intent: ",k.capitalize(r)]}),e.jsxs(c.div,{px:{md:"$dimension-1000",_:"$dimension-500"},children:[e.jsx(a,{py:"$dimension-500",variant:"H2",children:"Action: No"}),e.jsx(m,{text:"Alert text",intent:r})]}),e.jsxs(c.div,{px:{md:"$dimension-1000",_:"$dimension-500"},children:[e.jsx(a,{py:"$dimension-500",variant:"H2",children:"Action: Yes"}),e.jsx(m,{text:"Alert text",intent:r,my:"$dimension-500",action:[{label:"Click me",onClick:i("onClick")},{label:"Or click me",onClick:i("onClick")}]})]})]},r))}),M={title:"AlertBanner",component:m,tags:["autodocs"],args:{text:"Alert text",action:[{label:"Action",onClick:i("onClick")},{label:"Action",onClick:i("onClick")}]},argTypes:{intent:{options:["none","success","warning","negative"],defaultValue:"none",control:{type:"radio"}}},parameters:{docs:{description:{component:"Prominent element used to display important messages or notifications to users. Alert Banners can convey various levels of urgency, such as success, warning, or error. They are designed to capture the user's attention and provide a clear and concise message."},page:()=>e.jsx($,{docs:"https://docs.tetrisly.com/components/list/alertbanner",children:e.jsx(S,{})})}}},t={},n={args:{intent:"success"}},s={args:{intent:"warning"}},o={args:{intent:"negative"}};var p,l,d;t.parameters={...t.parameters,docs:{...(p=t.parameters)==null?void 0:p.docs,source:{originalSource:"{}",...(d=(l=t.parameters)==null?void 0:l.docs)==null?void 0:d.source}}};var g,u,x;n.parameters={...n.parameters,docs:{...(g=n.parameters)==null?void 0:g.docs,source:{originalSource:`{ args: { intent: 'success' } diff --git a/assets/Avatar.stories-f5d9be59.js b/assets/Avatar.stories-71c65545.js similarity index 96% rename from assets/Avatar.stories-f5d9be59.js rename to assets/Avatar.stories-71c65545.js index 3a6226c4..789b055a 100644 --- a/assets/Avatar.stories-f5d9be59.js +++ b/assets/Avatar.stories-71c65545.js @@ -1,4 +1,4 @@ -import{j as a}from"./jsx-runtime-ffb262ed.js";import{A as u}from"./Avatar-aeb94954.js";import{l as h}from"./mergeConfigWithCustom-aec35d44.js";import{C as y}from"./Cols-5e984f12.js";import{S as t}from"./SectionHeader-e7c49046.js";import{t as n}from"./TetrislyProvider-679426f7.js";import{T as j}from"./TetDocs-b00055fe.js";import{a as f}from"./Appearance-35507110.js";import"./index-76fb7be0.js";import"./_commonjsHelpers-de833af9.js";import"./index-8e69feee.js";import"./iframe-6ef61652.js";import"../sb-preview/runtime.js";import"./index-d3ea75b5.js";import"./index-11d98b33.js";import"./index-8fd8397b.js";import"./index-356e4a49.js";const v=["blue","green","grey","red","orange","raspberry","magenta","purple","grape","violet","cyan","teal","aquamarine","emerald"],$=["large","medium","small","xSmall","2xSmall"],S=["rounded","square"],A=["low","high"],p=({size:r,...e})=>a.jsx(n.div,{display:"flex",gap:"40px",alignItems:"center",children:$.map(s=>a.jsx(u,{...e,size:s},s))}),q=()=>a.jsx(a.Fragment,{children:A.map(r=>a.jsxs(n.section,{pb:"$space-component-padding-4xLarge",py:"$dimension-500",children:[a.jsxs(t,{px:{md:"$dimension-1000",_:"$dimension-500"},variant:"H1",as:"h2",children:[h.capitalize(r)," Emphasis"]}),a.jsx(y,{gap:"80px",px:{md:"$dimension-1000",_:"$dimension-500"},children:S.map(e=>a.jsxs(n.div,{display:"flex",flexDirection:"column",children:[a.jsx(t,{variant:"H2",as:"h3",py:"$dimension-500",children:e==="rounded"?"Shape: Rounded (Default)":"Shape: Square"}),a.jsx(n.hr,{}),a.jsxs(n.div,{display:"flex",flexDirection:"column",gap:"$space-component-gap-xLarge",py:"$space-component-padding-2xLarge",children:[r==="low"&&a.jsx(p,{appearance:"image",shape:e,img:{src:"https://thispersondoesnotexist.com/"}}),v.map(s=>a.jsx(p,{appearance:s,shape:e,emphasis:r,initials:"M"},`${s}${e}${r}`))]})]},e))})]},r))}),G={title:"Avatar",component:u,tags:["autodocs"],args:{img:{src:"https://thispersondoesnotexist.com/"}},argTypes:{img:{if:{arg:"appearance",eq:"image"}},initials:{if:{arg:"appearance",neq:"image"}},emphasis:{if:{arg:"appearance",neq:"image"}},appearance:{options:f,control:{type:"select"}}},parameters:{docs:{description:{component:"A visual representation of a user's identity, often displayed as a small image or icon. Avatars can be personalized with user-uploaded photos or auto-generated images and are commonly used in profile sections, comments, and messaging interfaces."},page:()=>a.jsx(j,{docs:"https://docs.tetrisly.com/components/list/avatar",children:a.jsx(q,{})})}}},o={argTypes:{appearance:f},args:{initials:"M",appearance:"cyan"}},i={args:{appearance:"image"}};var m,c,d;o.parameters={...o.parameters,docs:{...(m=o.parameters)==null?void 0:m.docs,source:{originalSource:`{ +import{j as a}from"./jsx-runtime-ffb262ed.js";import{A as u}from"./Avatar-aeb94954.js";import{l as h}from"./mergeConfigWithCustom-aec35d44.js";import{C as y}from"./Cols-5e984f12.js";import{S as t}from"./SectionHeader-e7c49046.js";import{t as n}from"./TetrislyProvider-679426f7.js";import{T as j}from"./TetDocs-85781681.js";import{a as f}from"./Appearance-35507110.js";import"./index-76fb7be0.js";import"./_commonjsHelpers-de833af9.js";import"./index-74beb656.js";import"./iframe-e2d638c9.js";import"../sb-preview/runtime.js";import"./index-d3ea75b5.js";import"./index-11d98b33.js";import"./index-8fd8397b.js";import"./index-356e4a49.js";const v=["blue","green","grey","red","orange","raspberry","magenta","purple","grape","violet","cyan","teal","aquamarine","emerald"],$=["large","medium","small","xSmall","2xSmall"],S=["rounded","square"],A=["low","high"],p=({size:r,...e})=>a.jsx(n.div,{display:"flex",gap:"40px",alignItems:"center",children:$.map(s=>a.jsx(u,{...e,size:s},s))}),q=()=>a.jsx(a.Fragment,{children:A.map(r=>a.jsxs(n.section,{pb:"$space-component-padding-4xLarge",py:"$dimension-500",children:[a.jsxs(t,{px:{md:"$dimension-1000",_:"$dimension-500"},variant:"H1",as:"h2",children:[h.capitalize(r)," Emphasis"]}),a.jsx(y,{gap:"80px",px:{md:"$dimension-1000",_:"$dimension-500"},children:S.map(e=>a.jsxs(n.div,{display:"flex",flexDirection:"column",children:[a.jsx(t,{variant:"H2",as:"h3",py:"$dimension-500",children:e==="rounded"?"Shape: Rounded (Default)":"Shape: Square"}),a.jsx(n.hr,{}),a.jsxs(n.div,{display:"flex",flexDirection:"column",gap:"$space-component-gap-xLarge",py:"$space-component-padding-2xLarge",children:[r==="low"&&a.jsx(p,{appearance:"image",shape:e,img:{src:"https://thispersondoesnotexist.com/"}}),v.map(s=>a.jsx(p,{appearance:s,shape:e,emphasis:r,initials:"M"},`${s}${e}${r}`))]})]},e))})]},r))}),G={title:"Avatar",component:u,tags:["autodocs"],args:{img:{src:"https://thispersondoesnotexist.com/"}},argTypes:{img:{if:{arg:"appearance",eq:"image"}},initials:{if:{arg:"appearance",neq:"image"}},emphasis:{if:{arg:"appearance",neq:"image"}},appearance:{options:f,control:{type:"select"}}},parameters:{docs:{description:{component:"A visual representation of a user's identity, often displayed as a small image or icon. Avatars can be personalized with user-uploaded photos or auto-generated images and are commonly used in profile sections, comments, and messaging interfaces."},page:()=>a.jsx(j,{docs:"https://docs.tetrisly.com/components/list/avatar",children:a.jsx(q,{})})}}},o={argTypes:{appearance:f},args:{initials:"M",appearance:"cyan"}},i={args:{appearance:"image"}};var m,c,d;o.parameters={...o.parameters,docs:{...(m=o.parameters)==null?void 0:m.docs,source:{originalSource:`{ argTypes: { appearance: appearances }, diff --git a/assets/Badge.stories-74997fda.js b/assets/Badge.stories-b029c069.js similarity index 94% rename from assets/Badge.stories-74997fda.js rename to assets/Badge.stories-b029c069.js index ed569cfb..7c508736 100644 --- a/assets/Badge.stories-74997fda.js +++ b/assets/Badge.stories-b029c069.js @@ -1,4 +1,4 @@ -import{j as e}from"./jsx-runtime-ffb262ed.js";import{B as r}from"./Badge-ea0f212c.js";import{l as j}from"./mergeConfigWithCustom-aec35d44.js";import{S as l}from"./SectionHeader-e7c49046.js";import{S as v,a as y}from"./States-c70e8d91.js";import{t as o}from"./TetrislyProvider-679426f7.js";import{a as $}from"./Appearance-35507110.js";import{T as B}from"./TetDocs-b00055fe.js";import"./index-76fb7be0.js";import"./_commonjsHelpers-de833af9.js";import"./tetrisly-icons.es-12549e88.js";import"./index-8e69feee.js";import"./iframe-6ef61652.js";import"../sb-preview/runtime.js";import"./index-d3ea75b5.js";import"./index-11d98b33.js";import"./index-8fd8397b.js";import"./index-356e4a49.js";const p=["neutral","informative","positive","warning","negative"],I=["high","medium","low"],S=()=>e.jsx(e.Fragment,{children:I.map(a=>e.jsxs(o.section,{display:"flex",padding:"40px 0px",flexDirection:"column",children:[e.jsxs(l,{px:"$dimension-1000",variant:"H1",my:"auto",as:"h2",children:[j.capitalize(a)," Emphasis"]}),e.jsxs(o.div,{px:"$dimension-1000",borderBottomWidth:"1px",borderBottomColor:"$color-border-neutral-subtle",children:[e.jsx(l,{variant:"H2",as:"h3",py:"$dimension-500",children:"Intent"}),e.jsx(v,{states:p,gap:"$dimension-500",flexBasis:"$dimension-100"}),e.jsx(o.div,{py:"$dimension-500",display:"flex",flexWrap:"wrap",gap:"$dimension-500",children:p.map(s=>e.jsxs(o.div,{display:"flex",flexDirection:"column",gap:"$dimension-400",flexBasis:"100",flexShrink:"0",flexGrow:"1",children:[e.jsx(r,{intent:s,emphasis:a,label:"Badge Text"}),e.jsx(r,{intent:s,emphasis:a,icon:"16-bolt"})]},s))})]}),e.jsxs(o.div,{px:"$dimension-1000",w:"100%",children:[e.jsx(l,{variant:"H2",as:"h3",py:"$dimension-500",children:"Appearance"}),e.jsx(o.div,{children:e.jsx(o.div,{py:"$dimension-500",display:"flex",gap:"48px",flexWrap:"wrap",children:$.map(s=>e.jsxs(o.div,{display:"flex",gap:"72px",my:"20",flexDirection:"column",children:[e.jsx(y,{state:s}),e.jsxs(o.div,{display:"flex",flexWrap:"wrap",flexDirection:"column",gap:"$dimension-400",flexShrink:"0",children:[e.jsx(r,{appearance:s,emphasis:a,label:"Badge Text"}),e.jsx(r,{appearance:s,emphasis:a,icon:"16-bolt"})]},s)]}))})})]})]},a))}),K={title:"Badge",component:r,tags:["autodocs"],argTypes:{emphasis:{control:{type:"select",options:["high","medium","low"]}}},parameters:{docs:{description:{component:"A small, visually distinct element used to display numbers, small pieces of information, or statuses. Badges are often paired with icons or other components to convey relevant information or updates."},page:()=>e.jsx(B,{docs:"https://docs.tetrisly.com/components/list/badge",children:e.jsx(S,{})})}}},i={args:{intent:"informative",emphasis:"high",label:"Label"}},n={args:{appearance:"blue",icon:"16-bolt"}},t={args:{intent:"informative",label:"Label",beforeIcon:"16-bolt",afterIcon:"16-bolt"}};var m,c,d;i.parameters={...i.parameters,docs:{...(m=i.parameters)==null?void 0:m.docs,source:{originalSource:`{ +import{j as e}from"./jsx-runtime-ffb262ed.js";import{B as r}from"./Badge-ea0f212c.js";import{l as j}from"./mergeConfigWithCustom-aec35d44.js";import{S as l}from"./SectionHeader-e7c49046.js";import{S as v,a as y}from"./States-c70e8d91.js";import{t as o}from"./TetrislyProvider-679426f7.js";import{a as $}from"./Appearance-35507110.js";import{T as B}from"./TetDocs-85781681.js";import"./index-76fb7be0.js";import"./_commonjsHelpers-de833af9.js";import"./tetrisly-icons.es-12549e88.js";import"./index-74beb656.js";import"./iframe-e2d638c9.js";import"../sb-preview/runtime.js";import"./index-d3ea75b5.js";import"./index-11d98b33.js";import"./index-8fd8397b.js";import"./index-356e4a49.js";const p=["neutral","informative","positive","warning","negative"],I=["high","medium","low"],S=()=>e.jsx(e.Fragment,{children:I.map(a=>e.jsxs(o.section,{display:"flex",padding:"40px 0px",flexDirection:"column",children:[e.jsxs(l,{px:"$dimension-1000",variant:"H1",my:"auto",as:"h2",children:[j.capitalize(a)," Emphasis"]}),e.jsxs(o.div,{px:"$dimension-1000",borderBottomWidth:"1px",borderBottomColor:"$color-border-neutral-subtle",children:[e.jsx(l,{variant:"H2",as:"h3",py:"$dimension-500",children:"Intent"}),e.jsx(v,{states:p,gap:"$dimension-500",flexBasis:"$dimension-100"}),e.jsx(o.div,{py:"$dimension-500",display:"flex",flexWrap:"wrap",gap:"$dimension-500",children:p.map(s=>e.jsxs(o.div,{display:"flex",flexDirection:"column",gap:"$dimension-400",flexBasis:"100",flexShrink:"0",flexGrow:"1",children:[e.jsx(r,{intent:s,emphasis:a,label:"Badge Text"}),e.jsx(r,{intent:s,emphasis:a,icon:"16-bolt"})]},s))})]}),e.jsxs(o.div,{px:"$dimension-1000",w:"100%",children:[e.jsx(l,{variant:"H2",as:"h3",py:"$dimension-500",children:"Appearance"}),e.jsx(o.div,{children:e.jsx(o.div,{py:"$dimension-500",display:"flex",gap:"48px",flexWrap:"wrap",children:$.map(s=>e.jsxs(o.div,{display:"flex",gap:"72px",my:"20",flexDirection:"column",children:[e.jsx(y,{state:s}),e.jsxs(o.div,{display:"flex",flexWrap:"wrap",flexDirection:"column",gap:"$dimension-400",flexShrink:"0",children:[e.jsx(r,{appearance:s,emphasis:a,label:"Badge Text"}),e.jsx(r,{appearance:s,emphasis:a,icon:"16-bolt"})]},s)]}))})})]})]},a))}),K={title:"Badge",component:r,tags:["autodocs"],argTypes:{emphasis:{control:{type:"select",options:["high","medium","low"]}}},parameters:{docs:{description:{component:"A small, visually distinct element used to display numbers, small pieces of information, or statuses. Badges are often paired with icons or other components to convey relevant information or updates."},page:()=>e.jsx(B,{docs:"https://docs.tetrisly.com/components/list/badge",children:e.jsx(S,{})})}}},i={args:{intent:"informative",emphasis:"high",label:"Label"}},n={args:{appearance:"blue",icon:"16-bolt"}},t={args:{intent:"informative",label:"Label",beforeIcon:"16-bolt",afterIcon:"16-bolt"}};var m,c,d;i.parameters={...i.parameters,docs:{...(m=i.parameters)==null?void 0:m.docs,source:{originalSource:`{ args: { intent: 'informative', emphasis: 'high', diff --git a/assets/BooleanPill.stories-ff01d110.js b/assets/BooleanPill.stories-702ad857.js similarity index 95% rename from assets/BooleanPill.stories-ff01d110.js rename to assets/BooleanPill.stories-702ad857.js index bd8a468a..b05b7e74 100644 --- a/assets/BooleanPill.stories-ff01d110.js +++ b/assets/BooleanPill.stories-702ad857.js @@ -1,4 +1,4 @@ -import{j as e}from"./jsx-runtime-ffb262ed.js";import{B as I}from"./BooleanPill-a9ee29cc.js";import{l as E}from"./mergeConfigWithCustom-aec35d44.js";import{S as p}from"./SectionHeader-e7c49046.js";import{t as a}from"./TetrislyProvider-679426f7.js";import{T as M}from"./TetDocs-b00055fe.js";import"./index-76fb7be0.js";import"./_commonjsHelpers-de833af9.js";import"./tetrisly-icons.es-12549e88.js";import"./Avatar-aeb94954.js";import"./index-8e69feee.js";import"./iframe-6ef61652.js";import"../sb-preview/runtime.js";import"./index-d3ea75b5.js";import"./index-11d98b33.js";import"./index-8fd8397b.js";import"./index-356e4a49.js";const u=["default","disabled"],T=[!1,!0],k=[!1,!0],N=[{id:"0",text:"Value",onChange:()=>{}},{id:"1",text:"Value",avatar:{initials:"M"}},{id:"2",text:"Value",avatar:{image:"https://thispersondoesnotexist.com/"}}],m=()=>e.jsx(e.Fragment,{children:u.map(t=>e.jsxs(a.section,{display:"flex",pt:"$dimension-500",flexDirection:"column",children:[e.jsx(p,{variant:"Hero",as:"h2",px:"$dimension-1000",children:E.startCase(t)}),T.map(s=>e.jsxs(a.div,{display:"flex",flexDirection:"column",bg:s?"$color-background-neutral-subtle":void 0,children:[e.jsx(p,{variant:"H2",as:"h3",px:"$dimension-1000",py:"$dimension-500",borderBottom:"$color-neutral-strong",children:s?"Inverted":"Primary"}),k.map(l=>e.jsxs(a.div,{px:"$dimension-1000",pb:"$dimension-500",children:[e.jsxs(p,{variant:"H3",as:"h4",pt:"$dimension-500",children:["Selected: ",String(l)]}),e.jsx(a.div,{display:"flex",flexBasis:"180px",flexGrow:"1",flexShrink:"0",alignItems:"flex-start",flexWrap:"wrap",justifyContent:"flex-start",flexDirection:"row",gap:"$dimension-300",py:"$dimension-500",children:N.map(({id:V,...C})=>e.jsx(I,{state:t,isInverted:s,isSelected:l,...C},V))})]},`${u}-${s}-${l}`))]},`${t}-${s}`))]},t))});try{m.displayName="BooleanPillDocs",m.__docgenInfo={description:"",displayName:"BooleanPillDocs",props:{}}}catch{}const ae={title:"BooleanPill",component:I,tags:["autodocs"],argTypes:{},args:{state:"default",text:"Value"},parameters:{docs:{description:{component:"A compact, rounded indicator used to represent tags, categories, or statuses. Pills often include text and/or icons and can be interactive, such as allowing users to remove a filter or tag."},page:()=>e.jsx(M,{docs:"https://docs.tetrisly.com/components/in-progress/pill",children:e.jsx(m,{})})}}},r={args:{state:"default"}},o={args:{state:"default",avatar:{image:"https://thispersondoesnotexist.com/"}}},i={args:{state:"disabled"}},n={args:{isSelected:!0}},d={args:{isSelected:!0,state:"disabled"}},c={args:{isSelected:!0,avatar:{appearance:"magenta",initials:"M"}}};var g,x,f;r.parameters={...r.parameters,docs:{...(g=r.parameters)==null?void 0:g.docs,source:{originalSource:`{ +import{j as e}from"./jsx-runtime-ffb262ed.js";import{B as I}from"./BooleanPill-a9ee29cc.js";import{l as E}from"./mergeConfigWithCustom-aec35d44.js";import{S as p}from"./SectionHeader-e7c49046.js";import{t as a}from"./TetrislyProvider-679426f7.js";import{T as M}from"./TetDocs-85781681.js";import"./index-76fb7be0.js";import"./_commonjsHelpers-de833af9.js";import"./tetrisly-icons.es-12549e88.js";import"./Avatar-aeb94954.js";import"./index-74beb656.js";import"./iframe-e2d638c9.js";import"../sb-preview/runtime.js";import"./index-d3ea75b5.js";import"./index-11d98b33.js";import"./index-8fd8397b.js";import"./index-356e4a49.js";const u=["default","disabled"],T=[!1,!0],k=[!1,!0],N=[{id:"0",text:"Value",onChange:()=>{}},{id:"1",text:"Value",avatar:{initials:"M"}},{id:"2",text:"Value",avatar:{image:"https://thispersondoesnotexist.com/"}}],m=()=>e.jsx(e.Fragment,{children:u.map(t=>e.jsxs(a.section,{display:"flex",pt:"$dimension-500",flexDirection:"column",children:[e.jsx(p,{variant:"Hero",as:"h2",px:"$dimension-1000",children:E.startCase(t)}),T.map(s=>e.jsxs(a.div,{display:"flex",flexDirection:"column",bg:s?"$color-background-neutral-subtle":void 0,children:[e.jsx(p,{variant:"H2",as:"h3",px:"$dimension-1000",py:"$dimension-500",borderBottom:"$color-neutral-strong",children:s?"Inverted":"Primary"}),k.map(l=>e.jsxs(a.div,{px:"$dimension-1000",pb:"$dimension-500",children:[e.jsxs(p,{variant:"H3",as:"h4",pt:"$dimension-500",children:["Selected: ",String(l)]}),e.jsx(a.div,{display:"flex",flexBasis:"180px",flexGrow:"1",flexShrink:"0",alignItems:"flex-start",flexWrap:"wrap",justifyContent:"flex-start",flexDirection:"row",gap:"$dimension-300",py:"$dimension-500",children:N.map(({id:V,...C})=>e.jsx(I,{state:t,isInverted:s,isSelected:l,...C},V))})]},`${u}-${s}-${l}`))]},`${t}-${s}`))]},t))});try{m.displayName="BooleanPillDocs",m.__docgenInfo={description:"",displayName:"BooleanPillDocs",props:{}}}catch{}const ae={title:"BooleanPill",component:I,tags:["autodocs"],argTypes:{},args:{state:"default",text:"Value"},parameters:{docs:{description:{component:"A compact, rounded indicator used to represent tags, categories, or statuses. Pills often include text and/or icons and can be interactive, such as allowing users to remove a filter or tag."},page:()=>e.jsx(M,{docs:"https://docs.tetrisly.com/components/in-progress/pill",children:e.jsx(m,{})})}}},r={args:{state:"default"}},o={args:{state:"default",avatar:{image:"https://thispersondoesnotexist.com/"}}},i={args:{state:"disabled"}},n={args:{isSelected:!0}},d={args:{isSelected:!0,state:"disabled"}},c={args:{isSelected:!0,avatar:{appearance:"magenta",initials:"M"}}};var g,x,f;r.parameters={...r.parameters,docs:{...(g=r.parameters)==null?void 0:g.docs,source:{originalSource:`{ args: { state: 'default' } diff --git a/assets/Button.stories-9c869d87.js b/assets/Button.stories-81def227.js similarity index 99% rename from assets/Button.stories-9c869d87.js rename to assets/Button.stories-81def227.js index 5c35c0a4..6e8172d7 100644 --- a/assets/Button.stories-9c869d87.js +++ b/assets/Button.stories-81def227.js @@ -1,4 +1,4 @@ -import{j as e}from"./jsx-runtime-ffb262ed.js";import{B as D}from"./Button-62f4c63b.js";import{l as w}from"./mergeConfigWithCustom-aec35d44.js";import{t as i}from"./TetrislyProvider-679426f7.js";import{S as k}from"./SectionHeader-e7c49046.js";import{T as se}from"./TetDocs-b00055fe.js";import"./index-76fb7be0.js";import"./_commonjsHelpers-de833af9.js";import"./tetrisly-icons.es-12549e88.js";import"./index-52c2b68d.js";import"./index-8e69feee.js";import"./iframe-6ef61652.js";import"../sb-preview/runtime.js";import"./index-d3ea75b5.js";import"./index-11d98b33.js";import"./index-8fd8397b.js";import"./index-356e4a49.js";const ce=a=>a==="bare"?["medium","large"]:["small","medium","large"],t=({variant:a,...l})=>e.jsx(i.div,{display:"flex",flexBasis:"180px",flexGrow:"1",flexShrink:"0",alignItems:"flex-start",justifyContent:"center",flexDirection:"column",gap:"$dimension-400",py:"$dimension-500",children:ce(a).map(u=>e.jsx(D,{...l,size:u,variant:a},u))});try{t.displayName="ButtonSizes",t.__docgenInfo={description:"",displayName:"ButtonSizes",props:{label:{defaultValue:null,description:"",name:"label",required:!1,type:{name:"string"}},state:{defaultValue:null,description:"",name:"state",required:!1,type:{name:"enum",value:[{value:'"disabled"'},{value:'"loading"'},{value:'"selected"'}]}},custom:{defaultValue:null,description:"",name:"custom",required:!1,type:{name:"ButtonConfig"}},beforeIcon:{defaultValue:null,description:"",name:"beforeIcon",required:!1,type:{name:"enum",value:[{value:'"20-accesibility"'},{value:'"20-activity"'},{value:'"20-alarm-clock"'},{value:'"20-alert-fill"'},{value:'"20-alert"'},{value:'"20-anchor"'},{value:'"20-apps"'},{value:'"20-archive"'},{value:'"20-arrow-down-left"'},{value:'"20-arrow-down-right"'},{value:'"20-arrow-down"'},{value:'"20-arrow-left"'},{value:'"20-arrow-right"'},{value:'"20-arrow-up-left"'},{value:'"20-arrow-up-right"'},{value:'"20-arrow-up"'},{value:'"20-arrowhead-down"'},{value:'"20-arrowhead-left"'},{value:'"20-arrowhead-right"'},{value:'"20-arrowhead-up"'},{value:'"20-attachment"'},{value:'"20-background"'},{value:'"20-backspace"'},{value:'"20-backward"'},{value:'"20-bank"'},{value:'"20-battery-charging"'},{value:'"20-battery-empty"'},{value:'"20-battery-full"'},{value:'"20-battery-low"'},{value:'"20-battery-medium"'},{value:'"20-bell"'},{value:'"20-block"'},{value:'"20-bluetooth-off"'},{value:'"20-bluetooth"'},{value:'"20-bolt"'},{value:'"20-book"'},{value:'"20-bookmark"'},{value:'"20-border-all"'},{value:'"20-border-bottom"'},{value:'"20-border-horizontal"'},{value:'"20-border-inner"'},{value:'"20-border-left"'},{value:'"20-border-right"'},{value:'"20-border-style"'},{value:'"20-border-top"'},{value:'"20-border-vertical"'},{value:'"20-brackets-curly"'},{value:'"20-brain"'},{value:'"20-broadcast"'},{value:'"20-brush"'},{value:'"20-bug"'},{value:'"20-bulb"'},{value:'"20-calculator"'},{value:'"20-calendar-check"'},{value:'"20-calendar-close"'},{value:'"20-calendar-edit"'},{value:'"20-calendar-minus"'},{value:'"20-calendar-plus"'},{value:'"20-calendar"'},{value:'"20-camera"'},{value:'"20-card"'},{value:'"20-chart-bar-box"'},{value:'"20-chart-bar"'},{value:'"20-chart-line"'},{value:'"20-chart-pie"'},{value:'"20-chat"'},{value:'"20-check-badge-fill"'},{value:'"20-check-badge"'},{value:'"20-check-circle-fill"'},{value:'"20-check-circle"'},{value:'"20-check-large"'},{value:'"20-check-small"'},{value:'"20-chevron-down-small-circle"'},{value:'"20-chevron-down-small-fill"'},{value:'"20-chevron-down-small"'},{value:'"20-chevron-down"'},{value:'"20-chevron-left-small-circle"'},{value:'"20-chevron-left-small-fill"'},{value:'"20-chevron-left-small"'},{value:'"20-chevron-left"'},{value:'"20-chevron-right-small-circle"'},{value:'"20-chevron-right-small-fill"'},{value:'"20-chevron-right-small"'},{value:'"20-chevron-right"'},{value:'"20-chevron-up-small-circle"'},{value:'"20-chevron-up-small-fill"'},{value:'"20-chevron-up-small"'},{value:'"20-chevron-up"'},{value:'"20-clipboard"'},{value:'"20-close"'},{value:'"20-cloud"'},{value:'"20-code-2"'},{value:'"20-code"'},{value:'"20-command"'},{value:'"20-comment"'},{value:'"20-company"'},{value:'"20-compass"'},{value:'"20-copy"'},{value:'"20-cpu"'},{value:'"20-crown"'},{value:'"20-cursor-arrow-fill"'},{value:'"20-cursor-arrow"'},{value:'"20-cursor-text"'},{value:'"20-database"'},{value:'"20-delete"'},{value:'"20-desktop"'},{value:'"20-devices"'},{value:'"20-diamond"'},{value:'"20-dns"'},{value:'"20-download"'},{value:'"20-drag-drop-horizontal"'},{value:'"20-drag-drop-vertical"'},{value:'"20-edit"'},{value:'"20-email"'},{value:'"20-emoji-big-smile"'},{value:'"20-emoji-sad"'},{value:'"20-emoji-smile"'},{value:'"20-error-fill"'},{value:'"20-error"'},{value:'"20-extension"'},{value:'"20-eye-off"'},{value:'"20-eye"'},{value:'"20-file-check"'},{value:'"20-file-close"'},{value:'"20-file-edit"'},{value:'"20-file-minus"'},{value:'"20-file-plus"'},{value:'"20-file"'},{value:'"20-filter"'},{value:'"20-fingerprint"'},{value:'"20-fire"'},{value:'"20-flag"'},{value:'"20-folder-check"'},{value:'"20-folder-close"'},{value:'"20-folder-edit"'},{value:'"20-folder-minus"'},{value:'"20-folder-plus"'},{value:'"20-folder"'},{value:'"20-format-align-center"'},{value:'"20-format-align-justify"'},{value:'"20-format-align-left"'},{value:'"20-format-align-right"'},{value:'"20-format-all-small-caps"'},{value:'"20-format-bold"'},{value:'"20-format-font-size"'},{value:'"20-format-indent-decrease"'},{value:'"20-format-indent-increase"'},{value:'"20-format-italic"'},{value:'"20-format-letter-spacing"'},{value:'"20-format-line-height"'},{value:'"20-format-lowercase"'},{value:'"20-format-paragraph-spacing"'},{value:'"20-format-scale-horizontal"'},{value:'"20-format-scale-vertical"'},{value:'"20-format-small-caps"'},{value:'"20-format-strikethrough"'},{value:'"20-format-subscript"'},{value:'"20-format-superscript"'},{value:'"20-format-titlecase"'},{value:'"20-format-underline"'},{value:'"20-format-uppercase"'},{value:'"20-forward"'},{value:'"20-fullscreen-exit"'},{value:'"20-fullscreen"'},{value:'"20-function"'},{value:'"20-git-branch"'},{value:'"20-git-commit"'},{value:'"20-git-diff"'},{value:'"20-git-fork"'},{value:'"20-git-merge"'},{value:'"20-git-pull-request"'},{value:'"20-globe"'},{value:'"20-hashtag"'},{value:'"20-heading"'},{value:'"20-headphones"'},{value:'"20-health"'},{value:'"20-heart"'},{value:'"20-help-fill"'},{value:'"20-help"'},{value:'"20-home"'},{value:'"20-horizontal-align-center"'},{value:'"20-horizontal-align-left"'},{value:'"20-horizontal-align-right"'},{value:'"20-hourglass"'},{value:'"20-image-check"'},{value:'"20-image-close"'},{value:'"20-image-edit"'},{value:'"20-image-minus"'},{value:'"20-image-plus"'},{value:'"20-image"'},{value:'"20-images"'},{value:'"20-inbox"'},{value:'"20-info-circle"'},{value:'"20-info-fill"'},{value:'"20-key"'},{value:'"20-keyboard"'},{value:'"20-label"'},{value:'"20-laptop"'},{value:'"20-layer-align-bottom-center"'},{value:'"20-layer-align-horizontal"'},{value:'"20-layer-align-left-center"'},{value:'"20-layer-align-right-center"'},{value:'"20-layer-align-top-center"'},{value:'"20-layer-align-vertical"'},{value:'"20-layer-three"'},{value:'"20-layer-two"'},{value:'"20-layout-swap-horizontal"'},{value:'"20-layout-swap-vertical"'},{value:'"20-link-broken"'},{value:'"20-link"'},{value:'"20-list-bullet"'},{value:'"20-list-check"'},{value:'"20-list-ordered"'},{value:'"20-list-unordered"'},{value:'"20-lock"'},{value:'"20-log-in"'},{value:'"20-log-out"'},{value:'"20-mail"'},{value:'"20-map"'},{value:'"20-marker-pin"'},{value:'"20-math-alpha"'},{value:'"20-math-angle"'},{value:'"20-math-beta"'},{value:'"20-math-gamma"'},{value:'"20-math-infinite"'},{value:'"20-math-omega"'},{value:'"20-math-pi"'},{value:'"20-math-sigma"'},{value:'"20-math-sine-wawe"'},{value:'"20-math-square-root "'},{value:'"20-math-theta"'},{value:'"20-megaphone"'},{value:'"20-menu"'},{value:'"20-message"'},{value:'"20-mic"'},{value:'"20-minus"'},{value:'"20-mobile"'},{value:'"20-more-horizontal"'},{value:'"20-more-vertical"'},{value:'"20-mouse"'},{value:'"20-navigation"'},{value:'"20-notification"'},{value:'"20-open-in-new"'},{value:'"20-option"'},{value:'"20-package"'},{value:'"20-paintroller"'},{value:'"20-paperplane"'},{value:'"20-paragraph"'},{value:'"20-pause-circle"'},{value:'"20-pause"'},{value:'"20-phone-call"'},{value:'"20-phone-callback"'},{value:'"20-phone-forwarded"'},{value:'"20-phone-incoming"'},{value:'"20-phone-missed"'},{value:'"20-phone-outgoing"'},{value:'"20-phone"'},{value:'"20-pin"'},{value:'"20-placeholder-2"'},{value:'"20-placeholder"'},{value:'"20-play-circle"'},{value:'"20-play"'},{value:'"20-plugin"'},{value:'"20-plus"'},{value:'"20-print"'},{value:'"20-questionmark"'},{value:'"20-quote"'},{value:'"20-rainbow"'},{value:'"20-receipt"'},{value:'"20-redo"'},{value:'"20-refresh"'},{value:'"20-repeat"'},{value:'"20-reply"'},{value:'"20-robot"'},{value:'"20-scissors"'},{value:'"20-search"'},{value:'"20-settings"'},{value:'"20-share"'},{value:'"20-shield"'},{value:'"20-shirt"'},{value:'"20-shopping-basket"'},{value:'"20-shopping-cart"'},{value:'"20-sidebar-hide"'},{value:'"20-sidebar-show"'},{value:'"20-slider"'},{value:'"20-speedmeter"'},{value:'"20-star-filled"'},{value:'"20-star-half-filled"'},{value:'"20-star"'},{value:'"20-stopwatch"'},{value:'"20-suitcase"'},{value:'"20-sun"'},{value:'"20-tablet"'},{value:'"20-tag"'},{value:'"20-target-off"'},{value:'"20-target"'},{value:'"20-terminal-2"'},{value:'"20-terminal"'},{value:'"20-tetrisly"'},{value:'"20-text"'},{value:'"20-thumb-down"'},{value:'"20-thumb-up"'},{value:'"20-ticket"'},{value:'"20-time-clock"'},{value:'"20-toggle-off"'},{value:'"20-toggle-on"'},{value:'"20-transaction-horizontal"'},{value:'"20-transaction-vertical"'},{value:'"20-tree"'},{value:'"20-trend-down"'},{value:'"20-trend-up"'},{value:'"20-turn-off"'},{value:'"20-tv"'},{value:'"20-undo"'},{value:'"20-unfold-less"'},{value:'"20-unfold-more"'},{value:'"20-unlock"'},{value:'"20-upload"'},{value:'"20-user-check"'},{value:'"20-user-close"'},{value:'"20-user-edit"'},{value:'"20-user-minus"'},{value:'"20-user-plus"'},{value:'"20-user"'},{value:'"20-users"'},{value:'"20-vertical-align-bottom"'},{value:'"20-vertical-align-center"'},{value:'"20-vertical-align-top"'},{value:'"20-video-camera"'},{value:'"20-video"'},{value:'"20-view-boxes"'},{value:'"20-view-columns"'},{value:'"20-view-dashboard"'},{value:'"20-view-day"'},{value:'"20-view-layout-bottom"'},{value:'"20-view-layout-grid"'},{value:'"20-view-layout-left"'},{value:'"20-view-layout-right"'},{value:'"20-view-layout-top"'},{value:'"20-view-lp"'},{value:'"20-view-rows"'},{value:'"20-view-schedule"'},{value:'"20-view-slider"'},{value:'"20-view-table"'},{value:'"20-voice"'},{value:'"20-voicemail"'},{value:'"20-volume-max"'},{value:'"20-volume-medium"'},{value:'"20-volume-min"'},{value:'"20-volume-mute"'},{value:'"20-wallet"'},{value:'"20-warning-fill"'},{value:'"20-warning"'},{value:'"20-watch"'},{value:'"20-water-drop"'},{value:'"20-wifi-off"'},{value:'"20-wifi"'}]}},afterIcon:{defaultValue:null,description:"",name:"afterIcon",required:!1,type:{name:"enum",value:[{value:'"20-accesibility"'},{value:'"20-activity"'},{value:'"20-alarm-clock"'},{value:'"20-alert-fill"'},{value:'"20-alert"'},{value:'"20-anchor"'},{value:'"20-apps"'},{value:'"20-archive"'},{value:'"20-arrow-down-left"'},{value:'"20-arrow-down-right"'},{value:'"20-arrow-down"'},{value:'"20-arrow-left"'},{value:'"20-arrow-right"'},{value:'"20-arrow-up-left"'},{value:'"20-arrow-up-right"'},{value:'"20-arrow-up"'},{value:'"20-arrowhead-down"'},{value:'"20-arrowhead-left"'},{value:'"20-arrowhead-right"'},{value:'"20-arrowhead-up"'},{value:'"20-attachment"'},{value:'"20-background"'},{value:'"20-backspace"'},{value:'"20-backward"'},{value:'"20-bank"'},{value:'"20-battery-charging"'},{value:'"20-battery-empty"'},{value:'"20-battery-full"'},{value:'"20-battery-low"'},{value:'"20-battery-medium"'},{value:'"20-bell"'},{value:'"20-block"'},{value:'"20-bluetooth-off"'},{value:'"20-bluetooth"'},{value:'"20-bolt"'},{value:'"20-book"'},{value:'"20-bookmark"'},{value:'"20-border-all"'},{value:'"20-border-bottom"'},{value:'"20-border-horizontal"'},{value:'"20-border-inner"'},{value:'"20-border-left"'},{value:'"20-border-right"'},{value:'"20-border-style"'},{value:'"20-border-top"'},{value:'"20-border-vertical"'},{value:'"20-brackets-curly"'},{value:'"20-brain"'},{value:'"20-broadcast"'},{value:'"20-brush"'},{value:'"20-bug"'},{value:'"20-bulb"'},{value:'"20-calculator"'},{value:'"20-calendar-check"'},{value:'"20-calendar-close"'},{value:'"20-calendar-edit"'},{value:'"20-calendar-minus"'},{value:'"20-calendar-plus"'},{value:'"20-calendar"'},{value:'"20-camera"'},{value:'"20-card"'},{value:'"20-chart-bar-box"'},{value:'"20-chart-bar"'},{value:'"20-chart-line"'},{value:'"20-chart-pie"'},{value:'"20-chat"'},{value:'"20-check-badge-fill"'},{value:'"20-check-badge"'},{value:'"20-check-circle-fill"'},{value:'"20-check-circle"'},{value:'"20-check-large"'},{value:'"20-check-small"'},{value:'"20-chevron-down-small-circle"'},{value:'"20-chevron-down-small-fill"'},{value:'"20-chevron-down-small"'},{value:'"20-chevron-down"'},{value:'"20-chevron-left-small-circle"'},{value:'"20-chevron-left-small-fill"'},{value:'"20-chevron-left-small"'},{value:'"20-chevron-left"'},{value:'"20-chevron-right-small-circle"'},{value:'"20-chevron-right-small-fill"'},{value:'"20-chevron-right-small"'},{value:'"20-chevron-right"'},{value:'"20-chevron-up-small-circle"'},{value:'"20-chevron-up-small-fill"'},{value:'"20-chevron-up-small"'},{value:'"20-chevron-up"'},{value:'"20-clipboard"'},{value:'"20-close"'},{value:'"20-cloud"'},{value:'"20-code-2"'},{value:'"20-code"'},{value:'"20-command"'},{value:'"20-comment"'},{value:'"20-company"'},{value:'"20-compass"'},{value:'"20-copy"'},{value:'"20-cpu"'},{value:'"20-crown"'},{value:'"20-cursor-arrow-fill"'},{value:'"20-cursor-arrow"'},{value:'"20-cursor-text"'},{value:'"20-database"'},{value:'"20-delete"'},{value:'"20-desktop"'},{value:'"20-devices"'},{value:'"20-diamond"'},{value:'"20-dns"'},{value:'"20-download"'},{value:'"20-drag-drop-horizontal"'},{value:'"20-drag-drop-vertical"'},{value:'"20-edit"'},{value:'"20-email"'},{value:'"20-emoji-big-smile"'},{value:'"20-emoji-sad"'},{value:'"20-emoji-smile"'},{value:'"20-error-fill"'},{value:'"20-error"'},{value:'"20-extension"'},{value:'"20-eye-off"'},{value:'"20-eye"'},{value:'"20-file-check"'},{value:'"20-file-close"'},{value:'"20-file-edit"'},{value:'"20-file-minus"'},{value:'"20-file-plus"'},{value:'"20-file"'},{value:'"20-filter"'},{value:'"20-fingerprint"'},{value:'"20-fire"'},{value:'"20-flag"'},{value:'"20-folder-check"'},{value:'"20-folder-close"'},{value:'"20-folder-edit"'},{value:'"20-folder-minus"'},{value:'"20-folder-plus"'},{value:'"20-folder"'},{value:'"20-format-align-center"'},{value:'"20-format-align-justify"'},{value:'"20-format-align-left"'},{value:'"20-format-align-right"'},{value:'"20-format-all-small-caps"'},{value:'"20-format-bold"'},{value:'"20-format-font-size"'},{value:'"20-format-indent-decrease"'},{value:'"20-format-indent-increase"'},{value:'"20-format-italic"'},{value:'"20-format-letter-spacing"'},{value:'"20-format-line-height"'},{value:'"20-format-lowercase"'},{value:'"20-format-paragraph-spacing"'},{value:'"20-format-scale-horizontal"'},{value:'"20-format-scale-vertical"'},{value:'"20-format-small-caps"'},{value:'"20-format-strikethrough"'},{value:'"20-format-subscript"'},{value:'"20-format-superscript"'},{value:'"20-format-titlecase"'},{value:'"20-format-underline"'},{value:'"20-format-uppercase"'},{value:'"20-forward"'},{value:'"20-fullscreen-exit"'},{value:'"20-fullscreen"'},{value:'"20-function"'},{value:'"20-git-branch"'},{value:'"20-git-commit"'},{value:'"20-git-diff"'},{value:'"20-git-fork"'},{value:'"20-git-merge"'},{value:'"20-git-pull-request"'},{value:'"20-globe"'},{value:'"20-hashtag"'},{value:'"20-heading"'},{value:'"20-headphones"'},{value:'"20-health"'},{value:'"20-heart"'},{value:'"20-help-fill"'},{value:'"20-help"'},{value:'"20-home"'},{value:'"20-horizontal-align-center"'},{value:'"20-horizontal-align-left"'},{value:'"20-horizontal-align-right"'},{value:'"20-hourglass"'},{value:'"20-image-check"'},{value:'"20-image-close"'},{value:'"20-image-edit"'},{value:'"20-image-minus"'},{value:'"20-image-plus"'},{value:'"20-image"'},{value:'"20-images"'},{value:'"20-inbox"'},{value:'"20-info-circle"'},{value:'"20-info-fill"'},{value:'"20-key"'},{value:'"20-keyboard"'},{value:'"20-label"'},{value:'"20-laptop"'},{value:'"20-layer-align-bottom-center"'},{value:'"20-layer-align-horizontal"'},{value:'"20-layer-align-left-center"'},{value:'"20-layer-align-right-center"'},{value:'"20-layer-align-top-center"'},{value:'"20-layer-align-vertical"'},{value:'"20-layer-three"'},{value:'"20-layer-two"'},{value:'"20-layout-swap-horizontal"'},{value:'"20-layout-swap-vertical"'},{value:'"20-link-broken"'},{value:'"20-link"'},{value:'"20-list-bullet"'},{value:'"20-list-check"'},{value:'"20-list-ordered"'},{value:'"20-list-unordered"'},{value:'"20-lock"'},{value:'"20-log-in"'},{value:'"20-log-out"'},{value:'"20-mail"'},{value:'"20-map"'},{value:'"20-marker-pin"'},{value:'"20-math-alpha"'},{value:'"20-math-angle"'},{value:'"20-math-beta"'},{value:'"20-math-gamma"'},{value:'"20-math-infinite"'},{value:'"20-math-omega"'},{value:'"20-math-pi"'},{value:'"20-math-sigma"'},{value:'"20-math-sine-wawe"'},{value:'"20-math-square-root "'},{value:'"20-math-theta"'},{value:'"20-megaphone"'},{value:'"20-menu"'},{value:'"20-message"'},{value:'"20-mic"'},{value:'"20-minus"'},{value:'"20-mobile"'},{value:'"20-more-horizontal"'},{value:'"20-more-vertical"'},{value:'"20-mouse"'},{value:'"20-navigation"'},{value:'"20-notification"'},{value:'"20-open-in-new"'},{value:'"20-option"'},{value:'"20-package"'},{value:'"20-paintroller"'},{value:'"20-paperplane"'},{value:'"20-paragraph"'},{value:'"20-pause-circle"'},{value:'"20-pause"'},{value:'"20-phone-call"'},{value:'"20-phone-callback"'},{value:'"20-phone-forwarded"'},{value:'"20-phone-incoming"'},{value:'"20-phone-missed"'},{value:'"20-phone-outgoing"'},{value:'"20-phone"'},{value:'"20-pin"'},{value:'"20-placeholder-2"'},{value:'"20-placeholder"'},{value:'"20-play-circle"'},{value:'"20-play"'},{value:'"20-plugin"'},{value:'"20-plus"'},{value:'"20-print"'},{value:'"20-questionmark"'},{value:'"20-quote"'},{value:'"20-rainbow"'},{value:'"20-receipt"'},{value:'"20-redo"'},{value:'"20-refresh"'},{value:'"20-repeat"'},{value:'"20-reply"'},{value:'"20-robot"'},{value:'"20-scissors"'},{value:'"20-search"'},{value:'"20-settings"'},{value:'"20-share"'},{value:'"20-shield"'},{value:'"20-shirt"'},{value:'"20-shopping-basket"'},{value:'"20-shopping-cart"'},{value:'"20-sidebar-hide"'},{value:'"20-sidebar-show"'},{value:'"20-slider"'},{value:'"20-speedmeter"'},{value:'"20-star-filled"'},{value:'"20-star-half-filled"'},{value:'"20-star"'},{value:'"20-stopwatch"'},{value:'"20-suitcase"'},{value:'"20-sun"'},{value:'"20-tablet"'},{value:'"20-tag"'},{value:'"20-target-off"'},{value:'"20-target"'},{value:'"20-terminal-2"'},{value:'"20-terminal"'},{value:'"20-tetrisly"'},{value:'"20-text"'},{value:'"20-thumb-down"'},{value:'"20-thumb-up"'},{value:'"20-ticket"'},{value:'"20-time-clock"'},{value:'"20-toggle-off"'},{value:'"20-toggle-on"'},{value:'"20-transaction-horizontal"'},{value:'"20-transaction-vertical"'},{value:'"20-tree"'},{value:'"20-trend-down"'},{value:'"20-trend-up"'},{value:'"20-turn-off"'},{value:'"20-tv"'},{value:'"20-undo"'},{value:'"20-unfold-less"'},{value:'"20-unfold-more"'},{value:'"20-unlock"'},{value:'"20-upload"'},{value:'"20-user-check"'},{value:'"20-user-close"'},{value:'"20-user-edit"'},{value:'"20-user-minus"'},{value:'"20-user-plus"'},{value:'"20-user"'},{value:'"20-users"'},{value:'"20-vertical-align-bottom"'},{value:'"20-vertical-align-center"'},{value:'"20-vertical-align-top"'},{value:'"20-video-camera"'},{value:'"20-video"'},{value:'"20-view-boxes"'},{value:'"20-view-columns"'},{value:'"20-view-dashboard"'},{value:'"20-view-day"'},{value:'"20-view-layout-bottom"'},{value:'"20-view-layout-grid"'},{value:'"20-view-layout-left"'},{value:'"20-view-layout-right"'},{value:'"20-view-layout-top"'},{value:'"20-view-lp"'},{value:'"20-view-rows"'},{value:'"20-view-schedule"'},{value:'"20-view-slider"'},{value:'"20-view-table"'},{value:'"20-voice"'},{value:'"20-voicemail"'},{value:'"20-volume-max"'},{value:'"20-volume-medium"'},{value:'"20-volume-min"'},{value:'"20-volume-mute"'},{value:'"20-wallet"'},{value:'"20-warning-fill"'},{value:'"20-warning"'},{value:'"20-watch"'},{value:'"20-water-drop"'},{value:'"20-wifi-off"'},{value:'"20-wifi"'}]}},hasDropdownIndicator:{defaultValue:null,description:"",name:"hasDropdownIndicator",required:!1,type:{name:"boolean"}},variant:{defaultValue:null,description:"",name:"variant",required:!1,type:{name:"enum",value:[{value:'"default"'},{value:'"bare"'},{value:'"ghost"'}]}},size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"large"'},{value:'"medium"'},{value:'"small"'}]}},appearance:{defaultValue:null,description:"",name:"appearance",required:!1,type:{name:"enum",value:[{value:'"primary"'},{value:'"secondary"'},{value:'"inverted"'},{value:'"reverseInverted"'}]}},intent:{defaultValue:null,description:"",name:"intent",required:!1,type:{name:"enum",value:[{value:'"none"'},{value:'"success"'},{value:'"destructive"'}]}}}}}catch{}const x=({variant:a,appearance:l,intent:u})=>{const o={variant:a,appearance:l,intent:u};return e.jsxs(i.div,{display:"flex",gap:"$dimension-300",pl:"5px",overflowX:"scroll",children:[e.jsx(t,{...o,label:"Button label"}),e.jsx(t,{...o,label:"Button label",beforeIcon:"20-placeholder"}),e.jsx(t,{...o,label:"Button label",afterIcon:"20-placeholder"}),e.jsx(t,{...o,label:"Button label",beforeIcon:"20-placeholder",afterIcon:"20-placeholder"}),e.jsx(t,{...o,label:"Button label",hasDropdownIndicator:!0}),e.jsx(t,{...o,label:"Button label",beforeIcon:"20-placeholder",hasDropdownIndicator:!0})]})};try{x.displayName="ButtonRow",x.__docgenInfo={description:"",displayName:"ButtonRow",props:{intent:{defaultValue:null,description:"",name:"intent",required:!1,type:{name:"enum",value:[{value:'"none"'},{value:'"success"'},{value:'"destructive"'}]}},appearance:{defaultValue:null,description:"",name:"appearance",required:!1,type:{name:"enum",value:[{value:'"primary"'},{value:'"secondary"'},{value:'"inverted"'},{value:'"reverseInverted"'}]}},variant:{defaultValue:null,description:"",name:"variant",required:!1,type:{name:"enum",value:[{value:'"default"'},{value:'"bare"'},{value:'"ghost"'}]}}}}}catch{}const de=["default","ghost","bare"],me=a=>a==="default"?["primary","secondary","inverted"]:["primary","secondary","inverted","reverseInverted"],pe=(a,l)=>a==="default"&&l==="secondary"||l==="primary"?["none","success","destructive"]:["none"],B=()=>e.jsx(e.Fragment,{children:de.map(a=>e.jsxs(i.section,{display:"flex",pt:"$dimension-500",flexDirection:"column",children:[e.jsx(k,{variant:"Hero",as:"h2",px:"$dimension-1000",children:w.startCase(a)}),me(a).map(l=>e.jsxs(i.div,{display:"flex",flexDirection:"column",bg:l==="inverted"?"$color-background-inverted":void 0,children:[e.jsx(k,{variant:"H2",inverted:l==="inverted",as:"h3",px:"$dimension-1000",py:"$dimension-500",borderBottom:"$color-neutral-strong",children:w.startCase(l)}),pe(a,l).map(u=>e.jsxs(i.div,{display:"flex",flexDirection:"column",px:"$dimension-1000",pb:"$dimension-500",borderBottomWidth:"1px",borderBottomColor:"$color-border-neutral-subtle",children:[e.jsxs(k,{variant:"H3",as:"h4",pt:"$dimension-500",inverted:l==="inverted",children:["Intent: ",w.startCase(u)]}),e.jsx(x,{variant:a,appearance:l,intent:u})]},u))]},l))]},a))});try{B.displayName="ButtonDocs",B.__docgenInfo={description:"",displayName:"ButtonDocs",props:{}}}catch{}const $e={title:"Button",component:D,tags:["autodocs"],args:{label:"Button label"},argTypes:{state:{options:[void 0,"disabled","loading","selected"],defaultValue:void 0,control:{type:"radio"}},size:{options:["small","medium","large"],defaultValue:"medium",control:{type:"radio"}},variant:{options:["default","ghost","bare"],defaultValue:"default",control:{type:"radio"}},intent:{options:["none","success","destructive"],defaultValue:"none",control:{type:"radio"}}},parameters:{docs:{description:{component:"A versatile and interactive element. Buttons allow users to perform actions and navigate through an application. They come in various styles and sizes, providing clear visual cues and feedback to users."},page:()=>e.jsx(se,{docs:"https://docs.tetrisly.com/components/list/button",children:e.jsx(B,{})})}}},r={argTypes:{appearance:{options:["primary","secondary","inverted","reverseInverted"],defaultValue:"primary",control:{type:"radio"}}}},s={...r,args:{state:"loading"}},c={...r,args:{state:"disabled"}},d={...r,args:{beforeIcon:"20-placeholder"}},m={...r,args:{afterIcon:"20-placeholder"}},p={...r,args:{hasDropdownIndicator:!0}},v={args:{variant:"ghost"},argTypes:{appearance:{options:["primary","secondary","inverted","reverseInverted"],defaultValue:"primary",control:{type:"radio"}}}},f={...v,args:{state:"loading"}},h={...v,args:{state:"disabled"}},n={args:{variant:"bare"},argTypes:{appearance:{options:["primary","secondary","inverted","reverseInverted"],defaultValue:"primary",control:{type:"radio"}},size:{options:["medium","large"],defaultValue:"medium",control:{type:"radio"}}}},g={...n,args:{state:"loading",variant:"bare"}},b={...n,args:{state:"disabled",variant:"bare"}},y={render:()=>e.jsx("div",{style:{display:"flex",width:"400px",flexDirection:"column"},children:e.jsx(D,{label:"Button 1"})})};var I,j,z;r.parameters={...r.parameters,docs:{...(I=r.parameters)==null?void 0:I.docs,source:{originalSource:`{ +import{j as e}from"./jsx-runtime-ffb262ed.js";import{B as D}from"./Button-62f4c63b.js";import{l as w}from"./mergeConfigWithCustom-aec35d44.js";import{t as i}from"./TetrislyProvider-679426f7.js";import{S as k}from"./SectionHeader-e7c49046.js";import{T as se}from"./TetDocs-85781681.js";import"./index-76fb7be0.js";import"./_commonjsHelpers-de833af9.js";import"./tetrisly-icons.es-12549e88.js";import"./index-52c2b68d.js";import"./index-74beb656.js";import"./iframe-e2d638c9.js";import"../sb-preview/runtime.js";import"./index-d3ea75b5.js";import"./index-11d98b33.js";import"./index-8fd8397b.js";import"./index-356e4a49.js";const ce=a=>a==="bare"?["medium","large"]:["small","medium","large"],t=({variant:a,...l})=>e.jsx(i.div,{display:"flex",flexBasis:"180px",flexGrow:"1",flexShrink:"0",alignItems:"flex-start",justifyContent:"center",flexDirection:"column",gap:"$dimension-400",py:"$dimension-500",children:ce(a).map(u=>e.jsx(D,{...l,size:u,variant:a},u))});try{t.displayName="ButtonSizes",t.__docgenInfo={description:"",displayName:"ButtonSizes",props:{label:{defaultValue:null,description:"",name:"label",required:!1,type:{name:"string"}},state:{defaultValue:null,description:"",name:"state",required:!1,type:{name:"enum",value:[{value:'"disabled"'},{value:'"loading"'},{value:'"selected"'}]}},custom:{defaultValue:null,description:"",name:"custom",required:!1,type:{name:"ButtonConfig"}},beforeIcon:{defaultValue:null,description:"",name:"beforeIcon",required:!1,type:{name:"enum",value:[{value:'"20-accesibility"'},{value:'"20-activity"'},{value:'"20-alarm-clock"'},{value:'"20-alert-fill"'},{value:'"20-alert"'},{value:'"20-anchor"'},{value:'"20-apps"'},{value:'"20-archive"'},{value:'"20-arrow-down-left"'},{value:'"20-arrow-down-right"'},{value:'"20-arrow-down"'},{value:'"20-arrow-left"'},{value:'"20-arrow-right"'},{value:'"20-arrow-up-left"'},{value:'"20-arrow-up-right"'},{value:'"20-arrow-up"'},{value:'"20-arrowhead-down"'},{value:'"20-arrowhead-left"'},{value:'"20-arrowhead-right"'},{value:'"20-arrowhead-up"'},{value:'"20-attachment"'},{value:'"20-background"'},{value:'"20-backspace"'},{value:'"20-backward"'},{value:'"20-bank"'},{value:'"20-battery-charging"'},{value:'"20-battery-empty"'},{value:'"20-battery-full"'},{value:'"20-battery-low"'},{value:'"20-battery-medium"'},{value:'"20-bell"'},{value:'"20-block"'},{value:'"20-bluetooth-off"'},{value:'"20-bluetooth"'},{value:'"20-bolt"'},{value:'"20-book"'},{value:'"20-bookmark"'},{value:'"20-border-all"'},{value:'"20-border-bottom"'},{value:'"20-border-horizontal"'},{value:'"20-border-inner"'},{value:'"20-border-left"'},{value:'"20-border-right"'},{value:'"20-border-style"'},{value:'"20-border-top"'},{value:'"20-border-vertical"'},{value:'"20-brackets-curly"'},{value:'"20-brain"'},{value:'"20-broadcast"'},{value:'"20-brush"'},{value:'"20-bug"'},{value:'"20-bulb"'},{value:'"20-calculator"'},{value:'"20-calendar-check"'},{value:'"20-calendar-close"'},{value:'"20-calendar-edit"'},{value:'"20-calendar-minus"'},{value:'"20-calendar-plus"'},{value:'"20-calendar"'},{value:'"20-camera"'},{value:'"20-card"'},{value:'"20-chart-bar-box"'},{value:'"20-chart-bar"'},{value:'"20-chart-line"'},{value:'"20-chart-pie"'},{value:'"20-chat"'},{value:'"20-check-badge-fill"'},{value:'"20-check-badge"'},{value:'"20-check-circle-fill"'},{value:'"20-check-circle"'},{value:'"20-check-large"'},{value:'"20-check-small"'},{value:'"20-chevron-down-small-circle"'},{value:'"20-chevron-down-small-fill"'},{value:'"20-chevron-down-small"'},{value:'"20-chevron-down"'},{value:'"20-chevron-left-small-circle"'},{value:'"20-chevron-left-small-fill"'},{value:'"20-chevron-left-small"'},{value:'"20-chevron-left"'},{value:'"20-chevron-right-small-circle"'},{value:'"20-chevron-right-small-fill"'},{value:'"20-chevron-right-small"'},{value:'"20-chevron-right"'},{value:'"20-chevron-up-small-circle"'},{value:'"20-chevron-up-small-fill"'},{value:'"20-chevron-up-small"'},{value:'"20-chevron-up"'},{value:'"20-clipboard"'},{value:'"20-close"'},{value:'"20-cloud"'},{value:'"20-code-2"'},{value:'"20-code"'},{value:'"20-command"'},{value:'"20-comment"'},{value:'"20-company"'},{value:'"20-compass"'},{value:'"20-copy"'},{value:'"20-cpu"'},{value:'"20-crown"'},{value:'"20-cursor-arrow-fill"'},{value:'"20-cursor-arrow"'},{value:'"20-cursor-text"'},{value:'"20-database"'},{value:'"20-delete"'},{value:'"20-desktop"'},{value:'"20-devices"'},{value:'"20-diamond"'},{value:'"20-dns"'},{value:'"20-download"'},{value:'"20-drag-drop-horizontal"'},{value:'"20-drag-drop-vertical"'},{value:'"20-edit"'},{value:'"20-email"'},{value:'"20-emoji-big-smile"'},{value:'"20-emoji-sad"'},{value:'"20-emoji-smile"'},{value:'"20-error-fill"'},{value:'"20-error"'},{value:'"20-extension"'},{value:'"20-eye-off"'},{value:'"20-eye"'},{value:'"20-file-check"'},{value:'"20-file-close"'},{value:'"20-file-edit"'},{value:'"20-file-minus"'},{value:'"20-file-plus"'},{value:'"20-file"'},{value:'"20-filter"'},{value:'"20-fingerprint"'},{value:'"20-fire"'},{value:'"20-flag"'},{value:'"20-folder-check"'},{value:'"20-folder-close"'},{value:'"20-folder-edit"'},{value:'"20-folder-minus"'},{value:'"20-folder-plus"'},{value:'"20-folder"'},{value:'"20-format-align-center"'},{value:'"20-format-align-justify"'},{value:'"20-format-align-left"'},{value:'"20-format-align-right"'},{value:'"20-format-all-small-caps"'},{value:'"20-format-bold"'},{value:'"20-format-font-size"'},{value:'"20-format-indent-decrease"'},{value:'"20-format-indent-increase"'},{value:'"20-format-italic"'},{value:'"20-format-letter-spacing"'},{value:'"20-format-line-height"'},{value:'"20-format-lowercase"'},{value:'"20-format-paragraph-spacing"'},{value:'"20-format-scale-horizontal"'},{value:'"20-format-scale-vertical"'},{value:'"20-format-small-caps"'},{value:'"20-format-strikethrough"'},{value:'"20-format-subscript"'},{value:'"20-format-superscript"'},{value:'"20-format-titlecase"'},{value:'"20-format-underline"'},{value:'"20-format-uppercase"'},{value:'"20-forward"'},{value:'"20-fullscreen-exit"'},{value:'"20-fullscreen"'},{value:'"20-function"'},{value:'"20-git-branch"'},{value:'"20-git-commit"'},{value:'"20-git-diff"'},{value:'"20-git-fork"'},{value:'"20-git-merge"'},{value:'"20-git-pull-request"'},{value:'"20-globe"'},{value:'"20-hashtag"'},{value:'"20-heading"'},{value:'"20-headphones"'},{value:'"20-health"'},{value:'"20-heart"'},{value:'"20-help-fill"'},{value:'"20-help"'},{value:'"20-home"'},{value:'"20-horizontal-align-center"'},{value:'"20-horizontal-align-left"'},{value:'"20-horizontal-align-right"'},{value:'"20-hourglass"'},{value:'"20-image-check"'},{value:'"20-image-close"'},{value:'"20-image-edit"'},{value:'"20-image-minus"'},{value:'"20-image-plus"'},{value:'"20-image"'},{value:'"20-images"'},{value:'"20-inbox"'},{value:'"20-info-circle"'},{value:'"20-info-fill"'},{value:'"20-key"'},{value:'"20-keyboard"'},{value:'"20-label"'},{value:'"20-laptop"'},{value:'"20-layer-align-bottom-center"'},{value:'"20-layer-align-horizontal"'},{value:'"20-layer-align-left-center"'},{value:'"20-layer-align-right-center"'},{value:'"20-layer-align-top-center"'},{value:'"20-layer-align-vertical"'},{value:'"20-layer-three"'},{value:'"20-layer-two"'},{value:'"20-layout-swap-horizontal"'},{value:'"20-layout-swap-vertical"'},{value:'"20-link-broken"'},{value:'"20-link"'},{value:'"20-list-bullet"'},{value:'"20-list-check"'},{value:'"20-list-ordered"'},{value:'"20-list-unordered"'},{value:'"20-lock"'},{value:'"20-log-in"'},{value:'"20-log-out"'},{value:'"20-mail"'},{value:'"20-map"'},{value:'"20-marker-pin"'},{value:'"20-math-alpha"'},{value:'"20-math-angle"'},{value:'"20-math-beta"'},{value:'"20-math-gamma"'},{value:'"20-math-infinite"'},{value:'"20-math-omega"'},{value:'"20-math-pi"'},{value:'"20-math-sigma"'},{value:'"20-math-sine-wawe"'},{value:'"20-math-square-root "'},{value:'"20-math-theta"'},{value:'"20-megaphone"'},{value:'"20-menu"'},{value:'"20-message"'},{value:'"20-mic"'},{value:'"20-minus"'},{value:'"20-mobile"'},{value:'"20-more-horizontal"'},{value:'"20-more-vertical"'},{value:'"20-mouse"'},{value:'"20-navigation"'},{value:'"20-notification"'},{value:'"20-open-in-new"'},{value:'"20-option"'},{value:'"20-package"'},{value:'"20-paintroller"'},{value:'"20-paperplane"'},{value:'"20-paragraph"'},{value:'"20-pause-circle"'},{value:'"20-pause"'},{value:'"20-phone-call"'},{value:'"20-phone-callback"'},{value:'"20-phone-forwarded"'},{value:'"20-phone-incoming"'},{value:'"20-phone-missed"'},{value:'"20-phone-outgoing"'},{value:'"20-phone"'},{value:'"20-pin"'},{value:'"20-placeholder-2"'},{value:'"20-placeholder"'},{value:'"20-play-circle"'},{value:'"20-play"'},{value:'"20-plugin"'},{value:'"20-plus"'},{value:'"20-print"'},{value:'"20-questionmark"'},{value:'"20-quote"'},{value:'"20-rainbow"'},{value:'"20-receipt"'},{value:'"20-redo"'},{value:'"20-refresh"'},{value:'"20-repeat"'},{value:'"20-reply"'},{value:'"20-robot"'},{value:'"20-scissors"'},{value:'"20-search"'},{value:'"20-settings"'},{value:'"20-share"'},{value:'"20-shield"'},{value:'"20-shirt"'},{value:'"20-shopping-basket"'},{value:'"20-shopping-cart"'},{value:'"20-sidebar-hide"'},{value:'"20-sidebar-show"'},{value:'"20-slider"'},{value:'"20-speedmeter"'},{value:'"20-star-filled"'},{value:'"20-star-half-filled"'},{value:'"20-star"'},{value:'"20-stopwatch"'},{value:'"20-suitcase"'},{value:'"20-sun"'},{value:'"20-tablet"'},{value:'"20-tag"'},{value:'"20-target-off"'},{value:'"20-target"'},{value:'"20-terminal-2"'},{value:'"20-terminal"'},{value:'"20-tetrisly"'},{value:'"20-text"'},{value:'"20-thumb-down"'},{value:'"20-thumb-up"'},{value:'"20-ticket"'},{value:'"20-time-clock"'},{value:'"20-toggle-off"'},{value:'"20-toggle-on"'},{value:'"20-transaction-horizontal"'},{value:'"20-transaction-vertical"'},{value:'"20-tree"'},{value:'"20-trend-down"'},{value:'"20-trend-up"'},{value:'"20-turn-off"'},{value:'"20-tv"'},{value:'"20-undo"'},{value:'"20-unfold-less"'},{value:'"20-unfold-more"'},{value:'"20-unlock"'},{value:'"20-upload"'},{value:'"20-user-check"'},{value:'"20-user-close"'},{value:'"20-user-edit"'},{value:'"20-user-minus"'},{value:'"20-user-plus"'},{value:'"20-user"'},{value:'"20-users"'},{value:'"20-vertical-align-bottom"'},{value:'"20-vertical-align-center"'},{value:'"20-vertical-align-top"'},{value:'"20-video-camera"'},{value:'"20-video"'},{value:'"20-view-boxes"'},{value:'"20-view-columns"'},{value:'"20-view-dashboard"'},{value:'"20-view-day"'},{value:'"20-view-layout-bottom"'},{value:'"20-view-layout-grid"'},{value:'"20-view-layout-left"'},{value:'"20-view-layout-right"'},{value:'"20-view-layout-top"'},{value:'"20-view-lp"'},{value:'"20-view-rows"'},{value:'"20-view-schedule"'},{value:'"20-view-slider"'},{value:'"20-view-table"'},{value:'"20-voice"'},{value:'"20-voicemail"'},{value:'"20-volume-max"'},{value:'"20-volume-medium"'},{value:'"20-volume-min"'},{value:'"20-volume-mute"'},{value:'"20-wallet"'},{value:'"20-warning-fill"'},{value:'"20-warning"'},{value:'"20-watch"'},{value:'"20-water-drop"'},{value:'"20-wifi-off"'},{value:'"20-wifi"'}]}},afterIcon:{defaultValue:null,description:"",name:"afterIcon",required:!1,type:{name:"enum",value:[{value:'"20-accesibility"'},{value:'"20-activity"'},{value:'"20-alarm-clock"'},{value:'"20-alert-fill"'},{value:'"20-alert"'},{value:'"20-anchor"'},{value:'"20-apps"'},{value:'"20-archive"'},{value:'"20-arrow-down-left"'},{value:'"20-arrow-down-right"'},{value:'"20-arrow-down"'},{value:'"20-arrow-left"'},{value:'"20-arrow-right"'},{value:'"20-arrow-up-left"'},{value:'"20-arrow-up-right"'},{value:'"20-arrow-up"'},{value:'"20-arrowhead-down"'},{value:'"20-arrowhead-left"'},{value:'"20-arrowhead-right"'},{value:'"20-arrowhead-up"'},{value:'"20-attachment"'},{value:'"20-background"'},{value:'"20-backspace"'},{value:'"20-backward"'},{value:'"20-bank"'},{value:'"20-battery-charging"'},{value:'"20-battery-empty"'},{value:'"20-battery-full"'},{value:'"20-battery-low"'},{value:'"20-battery-medium"'},{value:'"20-bell"'},{value:'"20-block"'},{value:'"20-bluetooth-off"'},{value:'"20-bluetooth"'},{value:'"20-bolt"'},{value:'"20-book"'},{value:'"20-bookmark"'},{value:'"20-border-all"'},{value:'"20-border-bottom"'},{value:'"20-border-horizontal"'},{value:'"20-border-inner"'},{value:'"20-border-left"'},{value:'"20-border-right"'},{value:'"20-border-style"'},{value:'"20-border-top"'},{value:'"20-border-vertical"'},{value:'"20-brackets-curly"'},{value:'"20-brain"'},{value:'"20-broadcast"'},{value:'"20-brush"'},{value:'"20-bug"'},{value:'"20-bulb"'},{value:'"20-calculator"'},{value:'"20-calendar-check"'},{value:'"20-calendar-close"'},{value:'"20-calendar-edit"'},{value:'"20-calendar-minus"'},{value:'"20-calendar-plus"'},{value:'"20-calendar"'},{value:'"20-camera"'},{value:'"20-card"'},{value:'"20-chart-bar-box"'},{value:'"20-chart-bar"'},{value:'"20-chart-line"'},{value:'"20-chart-pie"'},{value:'"20-chat"'},{value:'"20-check-badge-fill"'},{value:'"20-check-badge"'},{value:'"20-check-circle-fill"'},{value:'"20-check-circle"'},{value:'"20-check-large"'},{value:'"20-check-small"'},{value:'"20-chevron-down-small-circle"'},{value:'"20-chevron-down-small-fill"'},{value:'"20-chevron-down-small"'},{value:'"20-chevron-down"'},{value:'"20-chevron-left-small-circle"'},{value:'"20-chevron-left-small-fill"'},{value:'"20-chevron-left-small"'},{value:'"20-chevron-left"'},{value:'"20-chevron-right-small-circle"'},{value:'"20-chevron-right-small-fill"'},{value:'"20-chevron-right-small"'},{value:'"20-chevron-right"'},{value:'"20-chevron-up-small-circle"'},{value:'"20-chevron-up-small-fill"'},{value:'"20-chevron-up-small"'},{value:'"20-chevron-up"'},{value:'"20-clipboard"'},{value:'"20-close"'},{value:'"20-cloud"'},{value:'"20-code-2"'},{value:'"20-code"'},{value:'"20-command"'},{value:'"20-comment"'},{value:'"20-company"'},{value:'"20-compass"'},{value:'"20-copy"'},{value:'"20-cpu"'},{value:'"20-crown"'},{value:'"20-cursor-arrow-fill"'},{value:'"20-cursor-arrow"'},{value:'"20-cursor-text"'},{value:'"20-database"'},{value:'"20-delete"'},{value:'"20-desktop"'},{value:'"20-devices"'},{value:'"20-diamond"'},{value:'"20-dns"'},{value:'"20-download"'},{value:'"20-drag-drop-horizontal"'},{value:'"20-drag-drop-vertical"'},{value:'"20-edit"'},{value:'"20-email"'},{value:'"20-emoji-big-smile"'},{value:'"20-emoji-sad"'},{value:'"20-emoji-smile"'},{value:'"20-error-fill"'},{value:'"20-error"'},{value:'"20-extension"'},{value:'"20-eye-off"'},{value:'"20-eye"'},{value:'"20-file-check"'},{value:'"20-file-close"'},{value:'"20-file-edit"'},{value:'"20-file-minus"'},{value:'"20-file-plus"'},{value:'"20-file"'},{value:'"20-filter"'},{value:'"20-fingerprint"'},{value:'"20-fire"'},{value:'"20-flag"'},{value:'"20-folder-check"'},{value:'"20-folder-close"'},{value:'"20-folder-edit"'},{value:'"20-folder-minus"'},{value:'"20-folder-plus"'},{value:'"20-folder"'},{value:'"20-format-align-center"'},{value:'"20-format-align-justify"'},{value:'"20-format-align-left"'},{value:'"20-format-align-right"'},{value:'"20-format-all-small-caps"'},{value:'"20-format-bold"'},{value:'"20-format-font-size"'},{value:'"20-format-indent-decrease"'},{value:'"20-format-indent-increase"'},{value:'"20-format-italic"'},{value:'"20-format-letter-spacing"'},{value:'"20-format-line-height"'},{value:'"20-format-lowercase"'},{value:'"20-format-paragraph-spacing"'},{value:'"20-format-scale-horizontal"'},{value:'"20-format-scale-vertical"'},{value:'"20-format-small-caps"'},{value:'"20-format-strikethrough"'},{value:'"20-format-subscript"'},{value:'"20-format-superscript"'},{value:'"20-format-titlecase"'},{value:'"20-format-underline"'},{value:'"20-format-uppercase"'},{value:'"20-forward"'},{value:'"20-fullscreen-exit"'},{value:'"20-fullscreen"'},{value:'"20-function"'},{value:'"20-git-branch"'},{value:'"20-git-commit"'},{value:'"20-git-diff"'},{value:'"20-git-fork"'},{value:'"20-git-merge"'},{value:'"20-git-pull-request"'},{value:'"20-globe"'},{value:'"20-hashtag"'},{value:'"20-heading"'},{value:'"20-headphones"'},{value:'"20-health"'},{value:'"20-heart"'},{value:'"20-help-fill"'},{value:'"20-help"'},{value:'"20-home"'},{value:'"20-horizontal-align-center"'},{value:'"20-horizontal-align-left"'},{value:'"20-horizontal-align-right"'},{value:'"20-hourglass"'},{value:'"20-image-check"'},{value:'"20-image-close"'},{value:'"20-image-edit"'},{value:'"20-image-minus"'},{value:'"20-image-plus"'},{value:'"20-image"'},{value:'"20-images"'},{value:'"20-inbox"'},{value:'"20-info-circle"'},{value:'"20-info-fill"'},{value:'"20-key"'},{value:'"20-keyboard"'},{value:'"20-label"'},{value:'"20-laptop"'},{value:'"20-layer-align-bottom-center"'},{value:'"20-layer-align-horizontal"'},{value:'"20-layer-align-left-center"'},{value:'"20-layer-align-right-center"'},{value:'"20-layer-align-top-center"'},{value:'"20-layer-align-vertical"'},{value:'"20-layer-three"'},{value:'"20-layer-two"'},{value:'"20-layout-swap-horizontal"'},{value:'"20-layout-swap-vertical"'},{value:'"20-link-broken"'},{value:'"20-link"'},{value:'"20-list-bullet"'},{value:'"20-list-check"'},{value:'"20-list-ordered"'},{value:'"20-list-unordered"'},{value:'"20-lock"'},{value:'"20-log-in"'},{value:'"20-log-out"'},{value:'"20-mail"'},{value:'"20-map"'},{value:'"20-marker-pin"'},{value:'"20-math-alpha"'},{value:'"20-math-angle"'},{value:'"20-math-beta"'},{value:'"20-math-gamma"'},{value:'"20-math-infinite"'},{value:'"20-math-omega"'},{value:'"20-math-pi"'},{value:'"20-math-sigma"'},{value:'"20-math-sine-wawe"'},{value:'"20-math-square-root "'},{value:'"20-math-theta"'},{value:'"20-megaphone"'},{value:'"20-menu"'},{value:'"20-message"'},{value:'"20-mic"'},{value:'"20-minus"'},{value:'"20-mobile"'},{value:'"20-more-horizontal"'},{value:'"20-more-vertical"'},{value:'"20-mouse"'},{value:'"20-navigation"'},{value:'"20-notification"'},{value:'"20-open-in-new"'},{value:'"20-option"'},{value:'"20-package"'},{value:'"20-paintroller"'},{value:'"20-paperplane"'},{value:'"20-paragraph"'},{value:'"20-pause-circle"'},{value:'"20-pause"'},{value:'"20-phone-call"'},{value:'"20-phone-callback"'},{value:'"20-phone-forwarded"'},{value:'"20-phone-incoming"'},{value:'"20-phone-missed"'},{value:'"20-phone-outgoing"'},{value:'"20-phone"'},{value:'"20-pin"'},{value:'"20-placeholder-2"'},{value:'"20-placeholder"'},{value:'"20-play-circle"'},{value:'"20-play"'},{value:'"20-plugin"'},{value:'"20-plus"'},{value:'"20-print"'},{value:'"20-questionmark"'},{value:'"20-quote"'},{value:'"20-rainbow"'},{value:'"20-receipt"'},{value:'"20-redo"'},{value:'"20-refresh"'},{value:'"20-repeat"'},{value:'"20-reply"'},{value:'"20-robot"'},{value:'"20-scissors"'},{value:'"20-search"'},{value:'"20-settings"'},{value:'"20-share"'},{value:'"20-shield"'},{value:'"20-shirt"'},{value:'"20-shopping-basket"'},{value:'"20-shopping-cart"'},{value:'"20-sidebar-hide"'},{value:'"20-sidebar-show"'},{value:'"20-slider"'},{value:'"20-speedmeter"'},{value:'"20-star-filled"'},{value:'"20-star-half-filled"'},{value:'"20-star"'},{value:'"20-stopwatch"'},{value:'"20-suitcase"'},{value:'"20-sun"'},{value:'"20-tablet"'},{value:'"20-tag"'},{value:'"20-target-off"'},{value:'"20-target"'},{value:'"20-terminal-2"'},{value:'"20-terminal"'},{value:'"20-tetrisly"'},{value:'"20-text"'},{value:'"20-thumb-down"'},{value:'"20-thumb-up"'},{value:'"20-ticket"'},{value:'"20-time-clock"'},{value:'"20-toggle-off"'},{value:'"20-toggle-on"'},{value:'"20-transaction-horizontal"'},{value:'"20-transaction-vertical"'},{value:'"20-tree"'},{value:'"20-trend-down"'},{value:'"20-trend-up"'},{value:'"20-turn-off"'},{value:'"20-tv"'},{value:'"20-undo"'},{value:'"20-unfold-less"'},{value:'"20-unfold-more"'},{value:'"20-unlock"'},{value:'"20-upload"'},{value:'"20-user-check"'},{value:'"20-user-close"'},{value:'"20-user-edit"'},{value:'"20-user-minus"'},{value:'"20-user-plus"'},{value:'"20-user"'},{value:'"20-users"'},{value:'"20-vertical-align-bottom"'},{value:'"20-vertical-align-center"'},{value:'"20-vertical-align-top"'},{value:'"20-video-camera"'},{value:'"20-video"'},{value:'"20-view-boxes"'},{value:'"20-view-columns"'},{value:'"20-view-dashboard"'},{value:'"20-view-day"'},{value:'"20-view-layout-bottom"'},{value:'"20-view-layout-grid"'},{value:'"20-view-layout-left"'},{value:'"20-view-layout-right"'},{value:'"20-view-layout-top"'},{value:'"20-view-lp"'},{value:'"20-view-rows"'},{value:'"20-view-schedule"'},{value:'"20-view-slider"'},{value:'"20-view-table"'},{value:'"20-voice"'},{value:'"20-voicemail"'},{value:'"20-volume-max"'},{value:'"20-volume-medium"'},{value:'"20-volume-min"'},{value:'"20-volume-mute"'},{value:'"20-wallet"'},{value:'"20-warning-fill"'},{value:'"20-warning"'},{value:'"20-watch"'},{value:'"20-water-drop"'},{value:'"20-wifi-off"'},{value:'"20-wifi"'}]}},hasDropdownIndicator:{defaultValue:null,description:"",name:"hasDropdownIndicator",required:!1,type:{name:"boolean"}},variant:{defaultValue:null,description:"",name:"variant",required:!1,type:{name:"enum",value:[{value:'"default"'},{value:'"bare"'},{value:'"ghost"'}]}},size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"large"'},{value:'"medium"'},{value:'"small"'}]}},appearance:{defaultValue:null,description:"",name:"appearance",required:!1,type:{name:"enum",value:[{value:'"primary"'},{value:'"secondary"'},{value:'"inverted"'},{value:'"reverseInverted"'}]}},intent:{defaultValue:null,description:"",name:"intent",required:!1,type:{name:"enum",value:[{value:'"none"'},{value:'"success"'},{value:'"destructive"'}]}}}}}catch{}const x=({variant:a,appearance:l,intent:u})=>{const o={variant:a,appearance:l,intent:u};return e.jsxs(i.div,{display:"flex",gap:"$dimension-300",pl:"5px",overflowX:"scroll",children:[e.jsx(t,{...o,label:"Button label"}),e.jsx(t,{...o,label:"Button label",beforeIcon:"20-placeholder"}),e.jsx(t,{...o,label:"Button label",afterIcon:"20-placeholder"}),e.jsx(t,{...o,label:"Button label",beforeIcon:"20-placeholder",afterIcon:"20-placeholder"}),e.jsx(t,{...o,label:"Button label",hasDropdownIndicator:!0}),e.jsx(t,{...o,label:"Button label",beforeIcon:"20-placeholder",hasDropdownIndicator:!0})]})};try{x.displayName="ButtonRow",x.__docgenInfo={description:"",displayName:"ButtonRow",props:{intent:{defaultValue:null,description:"",name:"intent",required:!1,type:{name:"enum",value:[{value:'"none"'},{value:'"success"'},{value:'"destructive"'}]}},appearance:{defaultValue:null,description:"",name:"appearance",required:!1,type:{name:"enum",value:[{value:'"primary"'},{value:'"secondary"'},{value:'"inverted"'},{value:'"reverseInverted"'}]}},variant:{defaultValue:null,description:"",name:"variant",required:!1,type:{name:"enum",value:[{value:'"default"'},{value:'"bare"'},{value:'"ghost"'}]}}}}}catch{}const de=["default","ghost","bare"],me=a=>a==="default"?["primary","secondary","inverted"]:["primary","secondary","inverted","reverseInverted"],pe=(a,l)=>a==="default"&&l==="secondary"||l==="primary"?["none","success","destructive"]:["none"],B=()=>e.jsx(e.Fragment,{children:de.map(a=>e.jsxs(i.section,{display:"flex",pt:"$dimension-500",flexDirection:"column",children:[e.jsx(k,{variant:"Hero",as:"h2",px:"$dimension-1000",children:w.startCase(a)}),me(a).map(l=>e.jsxs(i.div,{display:"flex",flexDirection:"column",bg:l==="inverted"?"$color-background-inverted":void 0,children:[e.jsx(k,{variant:"H2",inverted:l==="inverted",as:"h3",px:"$dimension-1000",py:"$dimension-500",borderBottom:"$color-neutral-strong",children:w.startCase(l)}),pe(a,l).map(u=>e.jsxs(i.div,{display:"flex",flexDirection:"column",px:"$dimension-1000",pb:"$dimension-500",borderBottomWidth:"1px",borderBottomColor:"$color-border-neutral-subtle",children:[e.jsxs(k,{variant:"H3",as:"h4",pt:"$dimension-500",inverted:l==="inverted",children:["Intent: ",w.startCase(u)]}),e.jsx(x,{variant:a,appearance:l,intent:u})]},u))]},l))]},a))});try{B.displayName="ButtonDocs",B.__docgenInfo={description:"",displayName:"ButtonDocs",props:{}}}catch{}const $e={title:"Button",component:D,tags:["autodocs"],args:{label:"Button label"},argTypes:{state:{options:[void 0,"disabled","loading","selected"],defaultValue:void 0,control:{type:"radio"}},size:{options:["small","medium","large"],defaultValue:"medium",control:{type:"radio"}},variant:{options:["default","ghost","bare"],defaultValue:"default",control:{type:"radio"}},intent:{options:["none","success","destructive"],defaultValue:"none",control:{type:"radio"}}},parameters:{docs:{description:{component:"A versatile and interactive element. Buttons allow users to perform actions and navigate through an application. They come in various styles and sizes, providing clear visual cues and feedback to users."},page:()=>e.jsx(se,{docs:"https://docs.tetrisly.com/components/list/button",children:e.jsx(B,{})})}}},r={argTypes:{appearance:{options:["primary","secondary","inverted","reverseInverted"],defaultValue:"primary",control:{type:"radio"}}}},s={...r,args:{state:"loading"}},c={...r,args:{state:"disabled"}},d={...r,args:{beforeIcon:"20-placeholder"}},m={...r,args:{afterIcon:"20-placeholder"}},p={...r,args:{hasDropdownIndicator:!0}},v={args:{variant:"ghost"},argTypes:{appearance:{options:["primary","secondary","inverted","reverseInverted"],defaultValue:"primary",control:{type:"radio"}}}},f={...v,args:{state:"loading"}},h={...v,args:{state:"disabled"}},n={args:{variant:"bare"},argTypes:{appearance:{options:["primary","secondary","inverted","reverseInverted"],defaultValue:"primary",control:{type:"radio"}},size:{options:["medium","large"],defaultValue:"medium",control:{type:"radio"}}}},g={...n,args:{state:"loading",variant:"bare"}},b={...n,args:{state:"disabled",variant:"bare"}},y={render:()=>e.jsx("div",{style:{display:"flex",width:"400px",flexDirection:"column"},children:e.jsx(D,{label:"Button 1"})})};var I,j,z;r.parameters={...r.parameters,docs:{...(I=r.parameters)==null?void 0:I.docs,source:{originalSource:`{ argTypes: { appearance: { options: ['primary', 'secondary', 'inverted', 'reverseInverted'], diff --git a/assets/ButtonGroup.stories-39cbb86c.js b/assets/ButtonGroup.stories-d78c2410.js similarity index 92% rename from assets/ButtonGroup.stories-39cbb86c.js rename to assets/ButtonGroup.stories-d78c2410.js index ea662c53..9a928dc6 100644 --- a/assets/ButtonGroup.stories-39cbb86c.js +++ b/assets/ButtonGroup.stories-d78c2410.js @@ -1,4 +1,4 @@ -import{j as t}from"./jsx-runtime-ffb262ed.js";import{B as c}from"./ButtonGroup-2df34866.js";import{B as o}from"./Button-62f4c63b.js";import{S as a}from"./SectionHeader-e7c49046.js";import{t as s}from"./TetrislyProvider-679426f7.js";import{v as d}from"./v4-4a60fe23.js";import{T as b}from"./TetDocs-b00055fe.js";import"./index-76fb7be0.js";import"./_commonjsHelpers-de833af9.js";import"./mergeConfigWithCustom-aec35d44.js";import"./tetrisly-icons.es-12549e88.js";import"./index-52c2b68d.js";import"./index-8e69feee.js";import"./iframe-6ef61652.js";import"../sb-preview/runtime.js";import"./index-d3ea75b5.js";import"./index-11d98b33.js";import"./index-8fd8397b.js";import"./index-356e4a49.js";const x=[4,3,2],f=["medium","small"],i=()=>t.jsx(t.Fragment,{children:x.map(e=>t.jsxs(s.section,{display:"flex",pt:"$dimension-500",pb:"$dimension-500",flexDirection:"column",children:[t.jsxs(a,{variant:"H1",as:"h1",px:"$dimension-1000",children:[e," items"]}),f.map(n=>t.jsxs(s.div,{display:"flex",flexDirection:"column",children:[t.jsxs(a,{variant:"H2",as:"h3",px:"$dimension-1000",py:"$dimension-300",borderBottom:"$color-neutral-strong",children:["Size: ",n==="medium"?"Medium (Default)":"Small"]}),t.jsx(s.div,{px:"$dimension-1000",pb:"$dimension-500",mt:"$dimension-400",mb:"$dimension-400",children:t.jsx(c,{children:[...Array(e)].map(()=>{const u=d();return t.jsx(o,{label:"Button label"},`button-item-${u}`)})})},n)]},n))]},e))});try{i.displayName="ButtonGroupDocs",i.__docgenInfo={description:"",displayName:"ButtonGroupDocs",props:{}}}catch{}const I={title:"ButtonGroup",component:c,tags:["autodocs"],argTypes:{size:{options:["small","medium"],defaultValue:"medium",control:{type:"radio"}}},parameters:{docs:{description:{component:"A set of related buttons that are visually and functionally grouped. Button Group acts as a cohesive unit, providing users with clear options for actions or navigation."},page:()=>t.jsx(b,{docs:"https://docs.tetrisly.com/components/list/buttongroup",children:t.jsx(i,{})})}}},r={args:{children:[t.jsx(o,{label:"button"}),t.jsx(o,{label:"button"}),t.jsx(o,{label:"button"}),t.jsx(o,{label:"button"})]}};var m,l,p;r.parameters={...r.parameters,docs:{...(m=r.parameters)==null?void 0:m.docs,source:{originalSource:`{ +import{j as t}from"./jsx-runtime-ffb262ed.js";import{B as c}from"./ButtonGroup-2df34866.js";import{B as o}from"./Button-62f4c63b.js";import{S as a}from"./SectionHeader-e7c49046.js";import{t as s}from"./TetrislyProvider-679426f7.js";import{v as d}from"./v4-4a60fe23.js";import{T as b}from"./TetDocs-85781681.js";import"./index-76fb7be0.js";import"./_commonjsHelpers-de833af9.js";import"./mergeConfigWithCustom-aec35d44.js";import"./tetrisly-icons.es-12549e88.js";import"./index-52c2b68d.js";import"./index-74beb656.js";import"./iframe-e2d638c9.js";import"../sb-preview/runtime.js";import"./index-d3ea75b5.js";import"./index-11d98b33.js";import"./index-8fd8397b.js";import"./index-356e4a49.js";const x=[4,3,2],f=["medium","small"],i=()=>t.jsx(t.Fragment,{children:x.map(e=>t.jsxs(s.section,{display:"flex",pt:"$dimension-500",pb:"$dimension-500",flexDirection:"column",children:[t.jsxs(a,{variant:"H1",as:"h1",px:"$dimension-1000",children:[e," items"]}),f.map(n=>t.jsxs(s.div,{display:"flex",flexDirection:"column",children:[t.jsxs(a,{variant:"H2",as:"h3",px:"$dimension-1000",py:"$dimension-300",borderBottom:"$color-neutral-strong",children:["Size: ",n==="medium"?"Medium (Default)":"Small"]}),t.jsx(s.div,{px:"$dimension-1000",pb:"$dimension-500",mt:"$dimension-400",mb:"$dimension-400",children:t.jsx(c,{children:[...Array(e)].map(()=>{const u=d();return t.jsx(o,{label:"Button label"},`button-item-${u}`)})})},n)]},n))]},e))});try{i.displayName="ButtonGroupDocs",i.__docgenInfo={description:"",displayName:"ButtonGroupDocs",props:{}}}catch{}const I={title:"ButtonGroup",component:c,tags:["autodocs"],argTypes:{size:{options:["small","medium"],defaultValue:"medium",control:{type:"radio"}}},parameters:{docs:{description:{component:"A set of related buttons that are visually and functionally grouped. Button Group acts as a cohesive unit, providing users with clear options for actions or navigation."},page:()=>t.jsx(b,{docs:"https://docs.tetrisly.com/components/list/buttongroup",children:t.jsx(i,{})})}}},r={args:{children:[t.jsx(o,{label:"button"}),t.jsx(o,{label:"button"}),t.jsx(o,{label:"button"}),t.jsx(o,{label:"button"})]}};var m,l,p;r.parameters={...r.parameters,docs:{...(m=r.parameters)==null?void 0:m.docs,source:{originalSource:`{ args: { children: [