@preply/ds-docs 10.0.0 → 11.1.0

package/dist/assets/BubbleCounter.stories-D2G7jKKI.js

@@ -1,242 +0,0 @@
-import{j as e,g as je}from"./iframe-DjYTJz7A.js";import{b as l,I as b}from"./IconButton-D4lbFOKH.js";import{w as ye}from"./componentNames-hc9KR2nX.js";import{F as g}from"./TokyoUIMessages-0is9ybHR.js";import{B as C}from"./Button-DS2bg8PO.js";import{A as v}from"./Avatar-Dlo9b83e.js";import{L as j}from"./LayoutFlex-p_p7LCCd.js";import"./preload-helper-Dp1pzeXC.js";import"./render-icon-DZ6hllTG.js";import"./ButtonBase-sV1YoG7h.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./Spinner-BG27lVzS.js";import"./useMergeRefs-CL5DIjXV.js";import"./useHostname-By9vNKnQ.js";import"./index-CC6DAVyL.js";import"./constants-5om8Ptru.js";import"./layout-relative.module-BM7yIsEb.js";const t=({count:r,showEmpty:be=!1,limit:y=99,size:ge="large",variant:xe="dark",children:x,dataset:ve})=>{if(r===void 0&&!be)return x??e.jsx(e.Fragment,{});const z=e.jsx("span",{className:[l.bubbleCounter,l[`size-${ge}`],l[`variant-${xe}`]].join(" "),...je(ve,{preplyDsComponent:ye.BubbleCounter}),children:typeof r=="number"&&(r>y?`${y}+`:r)});return x?e.jsxs("div",{className:l.childTargetOverlay,children:[z,x]}):z};try{t.displayName="BubbleCounter",t.__docgenInfo={description:"",displayName:"BubbleCounter",props:{count:{defaultValue:null,description:"The counter's current value;\n\n- If `undefined`, the counter is not rendered.\n- If above `limit`, the `limit` value is rendered instead, with a `+`\n  suffix.",name:"count",required:!1,type:{name:"enum",value:[{value:"number"}]}},showEmpty:{defaultValue:{value:"false"},description:"If `true`, the counter will render even if `count` is `undefined`.",name:"showEmpty",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},limit:{defaultValue:{value:"99"},description:"",name:"limit",required:!1,type:{name:"enum",value:[{value:"number"}]}},size:{defaultValue:{value:"large"},description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"small"'},{value:'"medium"'},{value:'"large"'}]}},variant:{defaultValue:{value:"dark"},description:"",name:"variant",required:!1,type:{name:"enum",value:[{value:'"light"'},{value:'"dark"'}]}},children:{defaultValue:null,description:`When provided, the \`BubbleCounter\` will position itself as an indicator
-overlay above the target child element.
-
-This is intended to work on just one child, but will not throw errors if
-you pass multiple children in order to avoid breaking UX unnecessarily.`,name:"children",required:!1,type:{name:"enum",value:[{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}}}}}catch{}const qe={title:"components/BubbleCounter",component:t,decorators:[r=>e.jsx("div",{style:{padding:"24px"},children:e.jsx(r,{})})]},u=()=>e.jsx("table",{style:{borderCollapse:"separate",borderSpacing:"16px"},children:e.jsxs("tbody",{children:[e.jsxs("tr",{children:[e.jsx("td",{children:"dark"}),e.jsx("td",{children:e.jsx(t,{count:5,variant:"dark"})})]}),e.jsxs("tr",{children:[e.jsx("td",{children:"light"}),e.jsx("td",{children:e.jsx(t,{count:5,variant:"light"})})]})]})}),c=()=>e.jsxs("table",{style:{borderCollapse:"separate",borderSpacing:"16px"},children:[e.jsx("thead",{children:e.jsxs("tr",{children:[e.jsx("th",{children:"Variant"}),e.jsx("th",{children:"small"}),e.jsx("th",{children:"medium"}),e.jsx("th",{children:"large"})]})}),e.jsxs("tbody",{children:[e.jsxs("tr",{children:[e.jsx("td",{children:"dark"}),e.jsx("td",{children:e.jsx(t,{count:5,size:"small",variant:"dark"})}),e.jsx("td",{children:e.jsx(t,{count:5,size:"medium",variant:"dark"})}),e.jsx("td",{children:e.jsx(t,{count:5,size:"large",variant:"dark"})})]}),e.jsxs("tr",{children:[e.jsx("td",{children:"light"}),e.jsx("td",{children:e.jsx(t,{count:5,size:"small",variant:"light"})}),e.jsx("td",{children:e.jsx(t,{count:5,size:"medium",variant:"light"})}),e.jsx("td",{children:e.jsx(t,{count:5,size:"large",variant:"light"})})]})]})]}),i=()=>e.jsxs("table",{style:{borderCollapse:"separate",borderSpacing:"16px"},children:[e.jsx("thead",{children:e.jsxs("tr",{children:[e.jsx("th",{children:"Variant"}),e.jsx("th",{children:"small"}),e.jsx("th",{children:"medium"}),e.jsx("th",{children:"large"})]})}),e.jsxs("tbody",{children:[e.jsxs("tr",{children:[e.jsx("td",{children:"dark"}),e.jsx("td",{children:e.jsx(t,{count:500,size:"small",variant:"dark"})}),e.jsx("td",{children:e.jsx(t,{count:500,size:"medium",variant:"dark"})}),e.jsx("td",{children:e.jsx(t,{count:500,size:"large",variant:"dark"})})]}),e.jsxs("tr",{children:[e.jsx("td",{children:"light"}),e.jsx("td",{children:e.jsx(t,{count:500,size:"small",variant:"light"})}),e.jsx("td",{children:e.jsx(t,{count:500,size:"medium",variant:"light"})}),e.jsx("td",{children:e.jsx(t,{count:500,size:"large",variant:"light"})})]})]})]}),m=()=>e.jsxs("table",{style:{borderCollapse:"separate",borderSpacing:"16px"},children:[e.jsx("thead",{children:e.jsxs("tr",{children:[e.jsx("th",{children:"Variant"}),e.jsx("th",{children:"small"}),e.jsx("th",{children:"medium"}),e.jsx("th",{children:"medium"})]})}),e.jsxs("tbody",{children:[e.jsxs("tr",{children:[e.jsx("td",{children:"dark"}),e.jsx("td",{children:e.jsx(t,{size:"small",variant:"dark",showEmpty:!0})}),e.jsx("td",{children:e.jsx(t,{size:"medium",variant:"dark",showEmpty:!0})}),e.jsx("td",{children:e.jsx(t,{size:"large",variant:"dark",showEmpty:!0})})]}),e.jsxs("tr",{children:[e.jsx("td",{children:"light"}),e.jsx("td",{children:e.jsx(t,{size:"small",variant:"light",showEmpty:!0})}),e.jsx("td",{children:e.jsx(t,{size:"medium",variant:"light",showEmpty:!0})}),e.jsx("td",{children:e.jsx(t,{size:"large",variant:"light",showEmpty:!0})})]})]})]}),h=()=>e.jsxs(j,{gap:"12",children:[e.jsxs(C,{variant:"primary",size:"medium",children:["Messages ",e.jsx(t,{variant:"dark",count:5,size:"medium"})]}),e.jsxs(C,{variant:"tertiary",size:"medium",children:["Messages ",e.jsx(t,{variant:"light",count:5,size:"medium"})]})]}),o=()=>e.jsxs(j,{gap:"12",children:[e.jsx(t,{count:5,size:"small",children:e.jsx(v,{size:"48"})}),e.jsx(t,{count:5,size:"medium",children:e.jsx(v,{size:"64"})}),e.jsx(t,{count:5,size:"large",children:e.jsx(v,{size:"96"})})]}),d=()=>e.jsxs(j,{gap:"12",children:[e.jsx(t,{count:5,size:"small",children:e.jsx(b,{svg:g,assistiveText:"Messages",size:"small",variant:"tertiary"})}),e.jsx(t,{count:5,size:"medium",children:e.jsx(b,{svg:g,assistiveText:"Messages",size:"medium",variant:"tertiary"})}),e.jsx(t,{count:5,size:"large",children:e.jsx(b,{svg:g,assistiveText:"Messages",size:"large",variant:"tertiary"})})]}),s=()=>e.jsx("div",{style:{"--ds-bubblecounter-target-offset":"20%","--ds-bubblecounter-outline-color":"red"},children:e.jsx(t,{count:5,size:"medium",children:e.jsx("div",{style:{backgroundColor:"lightgray",width:"30px",height:"30px",borderRadius:"50%",padding:"8px"}})})});s.parameters={docs:{canvas:{sourceState:"shown"}}};const pe=()=>e.jsx(b,{svg:g,assistiveText:"Messages",variant:"tertiary",size:"large"}),a=()=>{const r=[];return e.jsx(t,{count:r.length||void 0,children:e.jsx(pe,{})})};a.parameters={docs:{canvas:{sourceState:"shown"}}};const n=()=>e.jsx(t,{showEmpty:!0,children:e.jsx(pe,{})});n.parameters={docs:{canvas:{sourceState:"shown"}}};const p={tags:["!autodocs"],parameters:{chromatic:{disableSnapshot:!0}},args:{count:5,size:"large",variant:"dark"},argTypes:{dataset:{control:"object"},count:{control:"number"},limit:{control:"number"},size:{control:"select",options:["small","medium","large"]},variant:{control:"select",options:["dark","light"]},children:{control:"text",description:"Add any text here to see how the counter positions over children"}}};var B,f,S;u.parameters={...u.parameters,docs:{...(B=u.parameters)==null?void 0:B.docs,source:{originalSource:`() => <table style={{
-  borderCollapse: 'separate',
-  borderSpacing: '16px'
-}}>
-        <tbody>
-            <tr>
-                <td>dark</td>
-                <td>
-                    <BubbleCounter count={5} variant="dark" />
-                </td>
-            </tr>
-            <tr>
-                <td>light</td>
-                <td>
-                    <BubbleCounter count={5} variant="light" />
-                </td>
-            </tr>
-        </tbody>
-    </table>`,...(S=(f=u.parameters)==null?void 0:f.docs)==null?void 0:S.source}}};var k,w,E;c.parameters={...c.parameters,docs:{...(k=c.parameters)==null?void 0:k.docs,source:{originalSource:`() => <table style={{
-  borderCollapse: 'separate',
-  borderSpacing: '16px'
-}}>
-        <thead>
-            <tr>
-                <th>Variant</th>
-                <th>small</th>
-                <th>medium</th>
-                <th>large</th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr>
-                <td>dark</td>
-                <td>
-                    <BubbleCounter count={5} size="small" variant="dark" />
-                </td>
-                <td>
-                    <BubbleCounter count={5} size="medium" variant="dark" />
-                </td>
-                <td>
-                    <BubbleCounter count={5} size="large" variant="dark" />
-                </td>
-            </tr>
-            <tr>
-                <td>light</td>
-                <td>
-                    <BubbleCounter count={5} size="small" variant="light" />
-                </td>
-                <td>
-                    <BubbleCounter count={5} size="medium" variant="light" />
-                </td>
-                <td>
-                    <BubbleCounter count={5} size="large" variant="light" />
-                </td>
-            </tr>
-        </tbody>
-    </table>`,...(E=(w=c.parameters)==null?void 0:w.docs)==null?void 0:E.source}}};var I,M,T,V,A;i.parameters={...i.parameters,docs:{...(I=i.parameters)==null?void 0:I.docs,source:{originalSource:`() => <table style={{
-  borderCollapse: 'separate',
-  borderSpacing: '16px'
-}}>
-        <thead>
-            <tr>
-                <th>Variant</th>
-                <th>small</th>
-                <th>medium</th>
-                <th>large</th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr>
-                <td>dark</td>
-                <td>
-                    <BubbleCounter count={500} size="small" variant="dark" />
-                </td>
-                <td>
-                    <BubbleCounter count={500} size="medium" variant="dark" />
-                </td>
-                <td>
-                    <BubbleCounter count={500} size="large" variant="dark" />
-                </td>
-            </tr>
-            <tr>
-                <td>light</td>
-                <td>
-                    <BubbleCounter count={500} size="small" variant="light" />
-                </td>
-                <td>
-                    <BubbleCounter count={500} size="medium" variant="light" />
-                </td>
-                <td>
-                    <BubbleCounter count={500} size="large" variant="light" />
-                </td>
-            </tr>
-        </tbody>
-    </table>`,...(T=(M=i.parameters)==null?void 0:M.docs)==null?void 0:T.source},description:{story:"Numbers exceeding the `limit` prop value are clamped, with a `+` suffix.",...(A=(V=i.parameters)==null?void 0:V.docs)==null?void 0:A.description}}};var O,F,L;m.parameters={...m.parameters,docs:{...(O=m.parameters)==null?void 0:O.docs,source:{originalSource:`() => <table style={{
-  borderCollapse: 'separate',
-  borderSpacing: '16px'
-}}>
-        <thead>
-            <tr>
-                <th>Variant</th>
-                <th>small</th>
-                <th>medium</th>
-                <th>medium</th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr>
-                <td>dark</td>
-                <td>
-                    <BubbleCounter size="small" variant="dark" showEmpty />
-                </td>
-                <td>
-                    <BubbleCounter size="medium" variant="dark" showEmpty />
-                </td>
-                <td>
-                    <BubbleCounter size="large" variant="dark" showEmpty />
-                </td>
-            </tr>
-            <tr>
-                <td>light</td>
-                <td>
-                    <BubbleCounter size="small" variant="light" showEmpty />
-                </td>
-                <td>
-                    <BubbleCounter size="medium" variant="light" showEmpty />
-                </td>
-                <td>
-                    <BubbleCounter size="large" variant="light" showEmpty />
-                </td>
-            </tr>
-        </tbody>
-    </table>`,...(L=(F=m.parameters)==null?void 0:F.docs)==null?void 0:L.source}}};var _,q,H;h.parameters={...h.parameters,docs:{...(_=h.parameters)==null?void 0:_.docs,source:{originalSource:`() => <LayoutFlex gap="12">
-        <Button variant="primary" size="medium">
-            Messages <BubbleCounter variant="dark" count={5} size="medium" />
-        </Button>
-        <Button variant="tertiary" size="medium">
-            Messages <BubbleCounter variant="light" count={5} size="medium" />
-        </Button>
-    </LayoutFlex>`,...(H=(q=h.parameters)==null?void 0:q.docs)==null?void 0:H.source}}};var N,W,R,U,D;o.parameters={...o.parameters,docs:{...(N=o.parameters)==null?void 0:N.docs,source:{originalSource:`() => <LayoutFlex gap="12">
-        <BubbleCounter count={5} size="small">
-            <Avatar size="48" />
-        </BubbleCounter>
-        <BubbleCounter count={5} size="medium">
-            <Avatar size="64" />
-        </BubbleCounter>
-        <BubbleCounter count={5} size="large">
-            <Avatar size="96" />
-        </BubbleCounter>
-    </LayoutFlex>`,...(R=(W=o.parameters)==null?void 0:W.docs)==null?void 0:R.source},description:{story:`The BubbleCounter can accept a child and display itself above it as an
-indicator overlay.
-
-This is useful for showing notifications or counts on top of UI elements
-like buttons and avatars.
-
-See the \`AsIndicatorWithCSSEscapeHatches\` story for details on how to
-override the \`BubbleCounter\` position offset.`,...(D=(U=o.parameters)==null?void 0:U.docs)==null?void 0:D.description}}};var G,P,$,X,J;d.parameters={...d.parameters,docs:{...(G=d.parameters)==null?void 0:G.docs,source:{originalSource:`() => <LayoutFlex gap="12">
-        <BubbleCounter count={5} size="small">
-            <IconButton svg={TokyoUIMessagesSVG} assistiveText="Messages" size="small" variant="tertiary" />
-        </BubbleCounter>
-        <BubbleCounter count={5} size="medium">
-            <IconButton svg={TokyoUIMessagesSVG} assistiveText="Messages" size="medium" variant="tertiary" />
-        </BubbleCounter>
-        <BubbleCounter count={5} size="large">
-            <IconButton svg={TokyoUIMessagesSVG} assistiveText="Messages" size="large" variant="tertiary" />
-        </BubbleCounter>
-    </LayoutFlex>`,...($=(P=d.parameters)==null?void 0:P.docs)==null?void 0:$.source},description:{story:"For design system `IconButton`s, the `BubbleCounter` will automatically\nrender an outline to provide visual contrast against the button.\n\nSee the `AsIndicatorWithCSSEscapeHatches` story for details on how to\noverride the outline color.",...(J=(X=d.parameters)==null?void 0:X.docs)==null?void 0:J.description}}};var Y,K,Q,Z,ee;s.parameters={...s.parameters,docs:{...(Y=s.parameters)==null?void 0:Y.docs,source:{originalSource:`() => <div style={{
-  // @ts-expect-error - Custom CSS properties
-  '--ds-bubblecounter-target-offset': '20%',
-  '--ds-bubblecounter-outline-color': 'red'
-}}>
-        <BubbleCounter count={5} size="medium">
-            <div style={{
-      backgroundColor: 'lightgray',
-      width: '30px',
-      height: '30px',
-      borderRadius: '50%',
-      padding: '8px'
-    }} />
-        </BubbleCounter>
-    </div>`,...(Q=(K=s.parameters)==null?void 0:K.docs)==null?void 0:Q.source},description:{story:"Some styling escape hatches exist in the form of custom CSS properties:\n\n- `--ds-bubblecounter-target-offset`: Overrides the position offset between\n  the `BubbleCounter` and the target element.\n- `--ds-bubblecounter-outline-color`: Forces a coutout outline to render and\n  overrides its color.\n\nYou can set these on the `BubbleCounter`'s parent element, and they will be\ninherited automatically.",...(ee=(Z=s.parameters)==null?void 0:Z.docs)==null?void 0:ee.description}}};var te,re,se,ae,ne;a.parameters={...a.parameters,docs:{...(te=a.parameters)==null?void 0:te.docs,source:{originalSource:`() => {
-  const messages = [];
-  return <BubbleCounter count={messages.length || undefined}>
-            <MessagesButton />
-        </BubbleCounter>
-  /*
-   * Instead of:
-   *
-   * if (messages.length === 0) {
-   *   return <MessagesButton />;
-   * }
-   * return (
-   *   <BubbleCounter count={messages.length}>
-   *     <MessagesButton />
-   *   </BubbleCounter>
-   * );
-   */;
-}`,...(se=(re=a.parameters)==null?void 0:re.docs)==null?void 0:se.source},description:{story:`When count is \`undefined\`, the counter is not rendered at all.
-
-This ensures you can use it as an indicator without needing to conditionally
-render it when the value`,...(ne=(ae=a.parameters)==null?void 0:ae.docs)==null?void 0:ne.description}}};var ie,oe,de,le,ue;n.parameters={...n.parameters,docs:{...(ie=n.parameters)==null?void 0:ie.docs,source:{originalSource:`() => <BubbleCounter showEmpty>
-        <MessagesButton />
-    </BubbleCounter>`,...(de=(oe=n.parameters)==null?void 0:oe.docs)==null?void 0:de.source},description:{story:"The counter can be rendered without a value using the `showEmpty` prop.",...(ue=(le=n.parameters)==null?void 0:le.docs)==null?void 0:ue.description}}};var ce,me,he;p.parameters={...p.parameters,docs:{...(ce=p.parameters)==null?void 0:ce.docs,source:{originalSource:`{
-  tags: ['!autodocs'],
-  parameters: {
-    chromatic: {
-      disableSnapshot: true
-    }
-  },
-  args: {
-    count: 5,
-    size: 'large',
-    variant: 'dark'
-  },
-  argTypes: {
-    dataset: {
-      control: 'object'
-    },
-    count: {
-      control: 'number'
-    },
-    limit: {
-      control: 'number'
-    },
-    size: {
-      control: 'select',
-      options: ['small', 'medium', 'large']
-    },
-    variant: {
-      control: 'select',
-      options: ['dark', 'light']
-    },
-    children: {
-      control: 'text',
-      description: 'Add any text here to see how the counter positions over children'
-    }
-  }
-}`,...(he=(me=p.parameters)==null?void 0:me.docs)==null?void 0:he.source}}};const He=["Variants","Sizes","Limit","Empty","AsIndicator","AsIndicatorOverlay","AsIndicatorOverlayOnIconButton","AsIndicatorWithCSSEscapeHatches","HideOnEmptyCount","ShowOnEmptyCount","Playground"];export{h as AsIndicator,o as AsIndicatorOverlay,d as AsIndicatorOverlayOnIconButton,s as AsIndicatorWithCSSEscapeHatches,m as Empty,a as HideOnEmptyCount,i as Limit,p as Playground,n as ShowOnEmptyCount,c as Sizes,u as Variants,He as __namedExportsOrder,qe as default};

package/dist/assets/Button-DS2bg8PO.js

@@ -1,18 +0,0 @@
-import{r as _,u as z,v as y,j as a,z as g,D as w}from"./iframe-DjYTJz7A.js";import{r as u}from"./render-icon-DZ6hllTG.js";import{B as V}from"./ButtonBase-sV1YoG7h.js";import{w as i}from"./componentNames-hc9KR2nX.js";const T="Button__zN6zT",q="leadingIcon__wQqJW",E="trailingIcon__zChSf",h="icon__sU6GA",e={Button:T,leadingIcon:q,trailingIcon:E,"Button--size-s":"Button--size-s__yKEFo",icon:h,"Button--size-m":"Button--size-m__-0jeH","Button--size-small":"Button--size-small__xrFvg","Button--size-medium":"Button--size-medium__Mc1B1","Button--size-l":"Button--size-l__7gew2","Button--size-large":"Button--size-large__LejpK","Button--narrow-l--size-s":"Button--narrow-l--size-s__oKIHq","Button--narrow-l--size-m":"Button--narrow-l--size-m__FfkOA","Button--narrow-l--size-small":"Button--narrow-l--size-small__y-M26","Button--narrow-l--size-medium":"Button--narrow-l--size-medium__so23Y","Button--narrow-l--size-l":"Button--narrow-l--size-l__xZOAd","Button--narrow-l--size-large":"Button--narrow-l--size-large__8clcn","Button--medium-s--size-s":"Button--medium-s--size-s__I-GoC","Button--medium-s--size-m":"Button--medium-s--size-m__Fk3sj","Button--medium-s--size-small":"Button--medium-s--size-small__N-91h","Button--medium-s--size-medium":"Button--medium-s--size-medium__sRSxR","Button--medium-s--size-l":"Button--medium-s--size-l__QXDbD","Button--medium-s--size-large":"Button--medium-s--size-large__Rtei-","Button--medium-l--size-s":"Button--medium-l--size-s__YqR0K","Button--medium-l--size-m":"Button--medium-l--size-m__BaJ0d","Button--medium-l--size-small":"Button--medium-l--size-small__iP5bS","Button--medium-l--size-medium":"Button--medium-l--size-medium__JanvZ","Button--medium-l--size-l":"Button--medium-l--size-l__ps0aM","Button--medium-l--size-large":"Button--medium-l--size-large__2gVOL","Button--wide-s--size-s":"Button--wide-s--size-s__OE3Yz","Button--wide-s--size-m":"Button--wide-s--size-m__H2KPf","Button--wide-s--size-small":"Button--wide-s--size-small__lDDYF","Button--wide-s--size-medium":"Button--wide-s--size-medium__CoePZ","Button--wide-s--size-l":"Button--wide-s--size-l__gcSoP","Button--wide-s--size-large":"Button--wide-s--size-large__KLj98","Button--wide-l--size-s":"Button--wide-l--size-s__HAZa1","Button--wide-l--size-m":"Button--wide-l--size-m__xB4x0","Button--wide-l--size-small":"Button--wide-l--size-small__WdoWT","Button--wide-l--size-medium":"Button--wide-l--size-medium__KgZbS","Button--wide-l--size-l":"Button--wide-l--size-l__rw5N1","Button--wide-l--size-large":"Button--wide-l--size-large__7TyOT"},o=_.forwardRef(function({variant:r=w,size:l=g,url:m,a11yLabel:d,leadingSvgIcon:n,trailingSvgIcon:t,children:c,...v},p){const f=!!n||!!t,B=z(e,i.Button,[y("size",l)]);return a.jsxs(V,{...v,ref:p,isIconButton:!1,variant:r,size:l,url:m,a11yLabel:d,preplyDsComponent:i.Button,className:f?B.join(" "):"",children:[!!n&&a.jsx("span",{className:`${e.icon} ${e.leadingIcon}`,children:u(n,{"aria-hidden":"true",focusable:"false"})}),c,!!t&&a.jsx("span",{className:`${e.icon} ${e.trailingIcon}`,children:u(t,{"aria-hidden":"true",focusable:"false"})})]})});try{o.displayName="Button",o.__docgenInfo={description:"",displayName:"Button",props:{href:{defaultValue:null,description:"",name:"href",required:!1,type:{name:"enum",value:[{value:"string"}]}},download:{defaultValue:null,description:"",name:"download",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},variant:{defaultValue:{value:"primary"},description:"",name:"variant",required:!1,type:{name:"enum",value:[{value:'"ai"'},{value:'"critical"'},{value:'"primary"'},{value:'"secondary"'},{value:'"tertiary"'},{value:'"inverted"'},{value:'"quaternary"'},{value:'"ghost"'},{value:'"onColor"'},{value:'"classroom"'},{value:'"primaryB2b"'},{value:'"primaryTutor"'},{value:'"newFeature"'}]}},opensInNewTab:{defaultValue:null,description:"",name:"opensInNewTab",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},nofollow:{defaultValue:null,description:"",name:"nofollow",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},assistiveText:{defaultValue:null,description:"",name:"assistiveText",required:!1,type:{name:"enum",value:[{value:"string"}]}},as:{defaultValue:null,description:`Custom element to render the button.
-
-Allows rendering the button using a different React element or component.
-This is particularly useful for integrating with router libraries like \`react-router\` or \`next/router\`.
-@example // Render as a react router link component
-import { Link } from 'react-router-dom';
-
-<ButtonBase as={<Link to="/home" />} />`,name:"as",required:!1,type:{name:"enum",value:[{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},url:{defaultValue:null,description:"@deprecated Use `href` instead",name:"url",required:!1,type:{name:"enum",value:[{value:"string"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},id:{defaultValue:null,description:"",name:"id",required:!1,type:{name:"enum",value:[{value:"string"}]}},onKeyDown:{defaultValue:null,description:"",name:"onKeyDown",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler"}]}},onKeyUp:{defaultValue:null,description:"",name:"onKeyUp",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler"}]}},onMouseDown:{defaultValue:null,description:"",name:"onMouseDown",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},onMouseEnter:{defaultValue:null,description:"",name:"onMouseEnter",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},onMouseMove:{defaultValue:null,description:"",name:"onMouseMove",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},onMouseUp:{defaultValue:null,description:"",name:"onMouseUp",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},onPointerDown:{defaultValue:null,description:"",name:"onPointerDown",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},onPointerEnter:{defaultValue:null,description:"",name:"onPointerEnter",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},size:{defaultValue:{value:"small"},description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"small"'},{value:'"medium"'},{value:'"large"'},{value:"ResponsiveProp<ButtonSize>"}]}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},fullWidth:{defaultValue:null,description:"",name:"fullWidth",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},wrap:{defaultValue:null,description:"",name:"wrap",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},submitsForm:{defaultValue:null,description:"",name:"submitsForm",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},busy:{defaultValue:null,description:"Replaces the content with a loading indicator.",name:"busy",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},a11yLabel:{defaultValue:null,description:"@deprecated Use `assistiveText` instead",name:"a11yLabel",required:!1,type:{name:"enum",value:[{value:"string"}]}},leadingSvgIcon:{defaultValue:null,description:`The leading SVG icon.
-@example import TokyoUITag from '@preply/ds-media-icons/dist/24/TokyoUITag.svg';
-
-<Button leadingSvgIcon={TokyoUITag}>Button</Button>
-or
-<Button leadingSvgIcon={<TokyoUITag />}>Button</Button>`,name:"leadingSvgIcon",required:!1,type:{name:"enum",value:[{value:"ComponentClass<SVGAttributes<SVGElement>, any>"},{value:"FunctionComponent<SVGAttributes<SVGElement>>"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},trailingSvgIcon:{defaultValue:null,description:`The trailing SVG icon.
-@example import TokyoUITag from '@preply/ds-media-icons/dist/24/TokyoUITag.svg';
-
-<Button trailingSvgIcon={TokyoUITag}>Button</Button>
-or
-<Button trailingSvgIcon={<TokyoUITag />}>Button</Button>`,name:"trailingSvgIcon",required:!1,type:{name:"enum",value:[{value:"ComponentClass<SVGAttributes<SVGElement>, any>"},{value:"FunctionComponent<SVGAttributes<SVGElement>>"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLAnchorElement | HTMLButtonElement | null) => void"},{value:"RefObject<HTMLAnchorElement | HTMLButtonElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}export{o as B};

package/dist/assets/Button-U6ON1pQl.css

@@ -1 +0,0 @@
-.Button__zN6zT .leadingIcon__wQqJW,.Button__zN6zT .trailingIcon__zChSf{display:flex}.Button__zN6zT .leadingIcon__wQqJW svg path,.Button__zN6zT .trailingIcon__zChSf svg path{fill:currentColor}.Button__zN6zT .leadingIcon__wQqJW{margin-left:calc(-1 * var(--53860b))}.Button__zN6zT .trailingIcon__zChSf{margin-right:calc(-1 * var(--53860b))}.Button--size-s__yKEFo .icon__sU6GA,.Button--size-m__-0jeH .icon__sU6GA,.Button--size-small__xrFvg .icon__sU6GA,.Button--size-medium__Mc1B1 .icon__sU6GA{margin-top:calc(-1 * var(--f316e1) / 2);margin-bottom:calc(-1 * var(--f316e1) / 2)}.Button--size-s__yKEFo .icon__sU6GA svg,.Button--size-m__-0jeH .icon__sU6GA svg,.Button--size-small__xrFvg .icon__sU6GA svg,.Button--size-medium__Mc1B1 .icon__sU6GA svg{width:var(--f316e1);height:var(--f316e1)}.Button--size-l__7gew2 .icon__sU6GA,.Button--size-large__LejpK .icon__sU6GA{margin-top:calc(-1 * var(--7789ee) / 2);margin-bottom:calc(-1 * var(--7789ee) / 2)}.Button--size-l__7gew2 .icon__sU6GA svg,.Button--size-large__LejpK .icon__sU6GA svg{width:var(--7789ee);height:var(--7789ee)}@media (min-width: 400px){.Button--narrow-l--size-s__oKIHq .icon__sU6GA,.Button--narrow-l--size-m__FfkOA .icon__sU6GA,.Button--narrow-l--size-small__y-M26 .icon__sU6GA,.Button--narrow-l--size-medium__so23Y .icon__sU6GA{margin-top:calc(-1 * var(--f316e1) / 2);margin-bottom:calc(-1 * var(--f316e1) / 2)}.Button--narrow-l--size-s__oKIHq .icon__sU6GA svg,.Button--narrow-l--size-m__FfkOA .icon__sU6GA svg,.Button--narrow-l--size-small__y-M26 .icon__sU6GA svg,.Button--narrow-l--size-medium__so23Y .icon__sU6GA svg{width:var(--f316e1);height:var(--f316e1)}.Button--narrow-l--size-l__xZOAd .icon__sU6GA,.Button--narrow-l--size-large__8clcn .icon__sU6GA{margin-top:calc(-1 * var(--7789ee) / 2);margin-bottom:calc(-1 * var(--7789ee) / 2)}.Button--narrow-l--size-l__xZOAd .icon__sU6GA svg,.Button--narrow-l--size-large__8clcn .icon__sU6GA svg{width:var(--7789ee);height:var(--7789ee)}}@media (min-width: 700px){.Button--medium-s--size-s__I-GoC .icon__sU6GA,.Button--medium-s--size-m__Fk3sj .icon__sU6GA,.Button--medium-s--size-small__N-91h .icon__sU6GA,.Button--medium-s--size-medium__sRSxR .icon__sU6GA{margin-top:calc(-1 * var(--f316e1) / 2);margin-bottom:calc(-1 * var(--f316e1) / 2)}.Button--medium-s--size-s__I-GoC .icon__sU6GA svg,.Button--medium-s--size-m__Fk3sj .icon__sU6GA svg,.Button--medium-s--size-small__N-91h .icon__sU6GA svg,.Button--medium-s--size-medium__sRSxR .icon__sU6GA svg{width:var(--f316e1);height:var(--f316e1)}.Button--medium-s--size-l__QXDbD .icon__sU6GA,.Button--medium-s--size-large__Rtei- .icon__sU6GA{margin-top:calc(-1 * var(--7789ee) / 2);margin-bottom:calc(-1 * var(--7789ee) / 2)}.Button--medium-s--size-l__QXDbD .icon__sU6GA svg,.Button--medium-s--size-large__Rtei- .icon__sU6GA svg{width:var(--7789ee);height:var(--7789ee)}}@media (min-width: 880px){.Button--medium-l--size-s__YqR0K .icon__sU6GA,.Button--medium-l--size-m__BaJ0d .icon__sU6GA,.Button--medium-l--size-small__iP5bS .icon__sU6GA,.Button--medium-l--size-medium__JanvZ .icon__sU6GA{margin-top:calc(-1 * var(--f316e1) / 2);margin-bottom:calc(-1 * var(--f316e1) / 2)}.Button--medium-l--size-s__YqR0K .icon__sU6GA svg,.Button--medium-l--size-m__BaJ0d .icon__sU6GA svg,.Button--medium-l--size-small__iP5bS .icon__sU6GA svg,.Button--medium-l--size-medium__JanvZ .icon__sU6GA svg{width:var(--f316e1);height:var(--f316e1)}.Button--medium-l--size-l__ps0aM .icon__sU6GA,.Button--medium-l--size-large__2gVOL .icon__sU6GA{margin-top:calc(-1 * var(--7789ee) / 2);margin-bottom:calc(-1 * var(--7789ee) / 2)}.Button--medium-l--size-l__ps0aM .icon__sU6GA svg,.Button--medium-l--size-large__2gVOL .icon__sU6GA svg{width:var(--7789ee);height:var(--7789ee)}}@media (min-width: 1200px){.Button--wide-s--size-s__OE3Yz .icon__sU6GA,.Button--wide-s--size-m__H2KPf .icon__sU6GA,.Button--wide-s--size-small__lDDYF .icon__sU6GA,.Button--wide-s--size-medium__CoePZ .icon__sU6GA{margin-top:calc(-1 * var(--f316e1) / 2);margin-bottom:calc(-1 * var(--f316e1) / 2)}.Button--wide-s--size-s__OE3Yz .icon__sU6GA svg,.Button--wide-s--size-m__H2KPf .icon__sU6GA svg,.Button--wide-s--size-small__lDDYF .icon__sU6GA svg,.Button--wide-s--size-medium__CoePZ .icon__sU6GA svg{width:var(--f316e1);height:var(--f316e1)}.Button--wide-s--size-l__gcSoP .icon__sU6GA,.Button--wide-s--size-large__KLj98 .icon__sU6GA{margin-top:calc(-1 * var(--7789ee) / 2);margin-bottom:calc(-1 * var(--7789ee) / 2)}.Button--wide-s--size-l__gcSoP .icon__sU6GA svg,.Button--wide-s--size-large__KLj98 .icon__sU6GA svg{width:var(--7789ee);height:var(--7789ee)}}@media (min-width: 1900px){.Button--wide-l--size-s__HAZa1 .icon__sU6GA,.Button--wide-l--size-m__xB4x0 .icon__sU6GA,.Button--wide-l--size-small__WdoWT .icon__sU6GA,.Button--wide-l--size-medium__KgZbS .icon__sU6GA{margin-top:calc(-1 * var(--f316e1) / 2);margin-bottom:calc(-1 * var(--f316e1) / 2)}.Button--wide-l--size-s__HAZa1 .icon__sU6GA svg,.Button--wide-l--size-m__xB4x0 .icon__sU6GA svg,.Button--wide-l--size-small__WdoWT .icon__sU6GA svg,.Button--wide-l--size-medium__KgZbS .icon__sU6GA svg{width:var(--f316e1);height:var(--f316e1)}.Button--wide-l--size-l__rw5N1 .icon__sU6GA,.Button--wide-l--size-large__7TyOT .icon__sU6GA{margin-top:calc(-1 * var(--7789ee) / 2);margin-bottom:calc(-1 * var(--7789ee) / 2)}.Button--wide-l--size-l__rw5N1 .icon__sU6GA svg,.Button--wide-l--size-large__7TyOT .icon__sU6GA svg{width:var(--7789ee);height:var(--7789ee)}}

package/dist/assets/Button.stories-VD5Bx8BA.js

@@ -1,270 +0,0 @@
-import{j as t,r as X}from"./iframe-DjYTJz7A.js";import{F as a}from"./TokyoUIFav-w08HsdRu.js";import{I as s}from"./IconButton-D4lbFOKH.js";import{B as e}from"./Button-DS2bg8PO.js";import{T as Q}from"./Text-C8DrHLQF.js";import{g as p}from"./getTokenVar-B8jDl0Ui.js";import{c as m}from"./tokens-Cp4gIGSO.js";import{S as b}from"./consts-KAYct7Gj.js";import"./preload-helper-Dp1pzeXC.js";import"./render-icon-DZ6hllTG.js";import"./ButtonBase-sV1YoG7h.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./Spinner-BG27lVzS.js";import"./useMergeRefs-CL5DIjXV.js";import"./useHostname-By9vNKnQ.js";import"./index-CC6DAVyL.js";import"./componentNames-hc9KR2nX.js";import"./text-accent-C5-m5mrW.js";import"./text-centered-D70wah8Y.js";const yt={title:"components/Button",component:e,subcomponents:{IconButton:s},argTypes:{size:{description:b},fullWidth:{description:b}}},i=()=>t.jsxs("div",{style:{display:"flex",gap:"1rem"},children:[t.jsx(e,{children:"Button"}),t.jsx(e,{leadingSvgIcon:a,children:"Button"}),t.jsx(e,{trailingSvgIcon:a,children:"Button"}),t.jsx(s,{svg:a,assistiveText:"Favourite"})]});i.tags=["!autodocs","!test"];i.parameters={chromatic:{disableSnapshot:!0}};const g=()=>{const o=p(m.background.primaryInverted);return t.jsxs("div",{style:{display:"flex",gap:"1rem"},children:[t.jsx(e,{variant:"primary",children:"Primary"}),t.jsx(e,{variant:"secondary",children:"Secondary"}),t.jsx(e,{variant:"tertiary",children:"Tertiary"}),t.jsx(e,{variant:"ghost",children:"Ghost"}),t.jsx("div",{style:{backgroundColor:o,borderRadius:"8px"},children:t.jsx(e,{variant:"inverted",children:"Inverted"})}),t.jsx(e,{variant:"critical",children:"Critical"}),t.jsx(e,{variant:"onColor",children:"onColor"})]})},d=()=>{const o=p(m.background.primaryInverted);return t.jsxs("div",{style:{display:"flex",gap:"1rem"},children:[t.jsx(s,{variant:"primary",svg:a,assistiveText:"primary"}),t.jsx(s,{variant:"secondary",svg:a,assistiveText:"secondary"}),t.jsx(s,{variant:"tertiary",svg:a,assistiveText:"tertiary"}),t.jsx(s,{variant:"ghost",svg:a,assistiveText:"ghost"}),t.jsx("div",{style:{backgroundColor:o,borderRadius:"8px"},children:t.jsx(s,{variant:"inverted",svg:a,assistiveText:"inverted"})}),t.jsx(s,{variant:"critical",svg:a,assistiveText:"critical"}),t.jsx(s,{variant:"onColor",svg:a,assistiveText:"onColor"})]})};d.storyName="Variants (IconButton)";const x=()=>{const o=p(m.background.primaryInverted);return t.jsxs("div",{style:{display:"flex",gap:"8px"},children:[t.jsxs("div",{style:{display:"flex",gap:"4px"},children:[t.jsx(e,{variant:"ai",children:"AI"}),t.jsx(s,{variant:"ai",svg:a,assistiveText:"Fav"})]}),t.jsxs("div",{style:{display:"flex",gap:"4px",backgroundColor:o},children:[t.jsx(e,{variant:"classroom",children:"Classroom"}),t.jsx(s,{variant:"classroom",svg:a,assistiveText:"Fav"})]})]})},y=()=>t.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"8px"},children:[t.jsxs("div",{style:{display:"flex",gap:"4px"},children:[t.jsx(e,{size:"small",children:"Small"}),t.jsx(s,{size:"small",svg:a,assistiveText:"Fav"})]}),t.jsxs("div",{style:{display:"flex",gap:"4px"},children:[t.jsx(e,{size:"medium",children:"Medium"}),t.jsx(s,{size:"medium",svg:a,assistiveText:"Fav"})]}),t.jsxs("div",{style:{display:"flex",gap:"4px"},children:[t.jsx(e,{size:"large",children:"Large"}),t.jsx(s,{size:"large",svg:a,assistiveText:"Fav"})]})]}),l=()=>t.jsxs(t.Fragment,{children:[t.jsx(e,{wrap:!0,size:"small",children:"Do the really quite unusually long thing"}),t.jsx(e,{wrap:!0,size:"medium",children:"Do the really quite unusually long thing"}),t.jsx(e,{wrap:!0,size:"large",children:"Do the really quite unusually long thing"})]});l.tags=["!autodocs"];l.decorators=[o=>t.jsx("div",{style:{width:"200px"},children:o()})];const v=()=>t.jsx(e,{size:{_:"small","medium-l":"medium","wide-s":"large"},leadingSvgIcon:a,children:"Change the viewport size"});v.parameters={chromatic:{modes:{"narrow-l":{viewport:"narrow-l"},"medium-l":{viewport:"medium-l"},"wide-s":{viewport:"wide-s"}}}};const u=()=>{const o=p(m.background.primaryInverted);return t.jsx("div",{style:{display:"flex",gap:"16px",flexDirection:"column"},children:["small","medium","large"].map(r=>["primary","secondary","tertiary","ghost","inverted","critical","ai","onColor","classroom"].map(n=>t.jsxs(X.Fragment,{children:[t.jsxs(Q,{variant:"default-regular-italic",children:[n," - ",r]}),t.jsxs("div",{style:{display:"flex",gap:"16px",backgroundColor:n==="inverted"||n==="classroom"?o:void 0},children:[t.jsx(e,{size:r,variant:n,children:"button"}),t.jsx(e,{size:r,variant:n,leadingSvgIcon:a,children:"button"}),t.jsx(e,{size:r,variant:n,trailingSvgIcon:a,children:"button"}),t.jsx(e,{size:r,variant:n,busy:!0,assistiveText:"Fav",children:"button"}),t.jsx(e,{size:r,variant:n,disabled:!0,children:"disabled"}),t.jsx(e,{size:r,variant:n,dsInternalSimulation:"hover",children:"hover"}),t.jsx(e,{size:r,variant:n,dsInternalSimulation:"active",children:"active"}),t.jsx(e,{size:r,variant:n,dsInternalSimulation:"focus",children:"focus"})]},`${r}-${n}`)]},`${r}-${n}`)))})};u.tags=["!autodocs"];const c=()=>{const o=p(m.background.primaryInverted);return t.jsx("div",{style:{display:"flex",gap:"16px",flexDirection:"column"},children:["small","medium","large"].map(r=>["primary","secondary","tertiary","ghost","inverted","critical","ai","onColor","classroom"].map(n=>t.jsxs(t.Fragment,{children:[t.jsxs(Q,{variant:"default-regular-italic",children:[n," - ",r]}),t.jsxs("div",{style:{display:"flex",gap:"16px",backgroundColor:n==="inverted"||n==="classroom"?o:void 0},children:[t.jsx(s,{svg:a,assistiveText:"fav",size:r,variant:n}),t.jsx(s,{svg:a,assistiveText:"fav",size:r,variant:n,busy:!0}),t.jsx(s,{svg:a,assistiveText:"fav",size:r,variant:n,disabled:!0}),t.jsx(s,{svg:a,assistiveText:"fav",size:r,variant:n,dsInternalSimulation:"hover"}),t.jsx(s,{svg:a,assistiveText:"fav",size:r,variant:n,dsInternalSimulation:"active"}),t.jsx(s,{svg:a,assistiveText:"fav",size:r,variant:n,dsInternalSimulation:"focus"})]},`${r}-${n}`)]})))})};c.storyName="Combinations (IconButton)";c.tags=["!autodocs"];const h={parameters:{chromatic:{disableSnapshot:!0}},decorators:[(o,{args:r})=>t.jsx("div",{style:{backgroundColor:r.variant==="inverted"?"black":void 0},children:o()})],args:{children:"Button",dataset:{qaid:"button"}},argTypes:{children:{control:"text"},dataset:{control:"object"},assistiveText:{control:"text"},disabled:{control:"boolean"},fullWidth:{control:"boolean"},wrap:{control:"boolean"},href:{control:"text"},download:{control:"boolean"},opensInNewTab:{control:"boolean"},nofollow:{control:"boolean"},submitsForm:{control:"boolean"},busy:{control:"boolean"},leadingSvgIcon:{options:["None","With Icon"],mapping:{None:void 0,"With Icon":a},control:"select"},trailingSvgIcon:{options:["None","With Icon"],mapping:{None:void 0,"With Icon":a},control:"select"},url:{table:{disable:!0}},a11yLabel:{table:{disable:!0}}}};var B,I,f;i.parameters={...i.parameters,docs:{...(B=i.parameters)==null?void 0:B.docs,source:{originalSource:`() => <div style={{
-  display: 'flex',
-  gap: '1rem'
-}}>
-        <Button>Button</Button>
-        <Button leadingSvgIcon={Fav}>Button</Button>
-        <Button trailingSvgIcon={Fav}>Button</Button>
-        <IconButton svg={Fav} assistiveText="Favourite" />
-    </div>`,...(f=(I=i.parameters)==null?void 0:I.docs)==null?void 0:f.source}}};var j,T,S;g.parameters={...g.parameters,docs:{...(j=g.parameters)==null?void 0:j.docs,source:{originalSource:`() => {
-  const grey = getTokenVar(color.background.primaryInverted);
-  return <div style={{
-    display: 'flex',
-    gap: '1rem'
-  }}>
-            <Button variant="primary">Primary</Button>
-            <Button variant="secondary">Secondary</Button>
-            <Button variant="tertiary">Tertiary</Button>
-            <Button variant="ghost">Ghost</Button>
-            <div style={{
-      backgroundColor: grey,
-      borderRadius: '8px'
-    }}>
-                <Button variant="inverted">Inverted</Button>
-            </div>
-            <Button variant="critical">Critical</Button>
-            <Button variant="onColor">onColor</Button>
-        </div>;
-}`,...(S=(T=g.parameters)==null?void 0:T.docs)==null?void 0:S.source}}};var F,z,C;d.parameters={...d.parameters,docs:{...(F=d.parameters)==null?void 0:F.docs,source:{originalSource:`() => {
-  const grey = getTokenVar(color.background.primaryInverted);
-  return <div style={{
-    display: 'flex',
-    gap: '1rem'
-  }}>
-            <IconButton variant="primary" svg={Fav} assistiveText="primary" />
-            <IconButton variant="secondary" svg={Fav} assistiveText="secondary" />
-            <IconButton variant="tertiary" svg={Fav} assistiveText="tertiary" />
-            <IconButton variant="ghost" svg={Fav} assistiveText="ghost" />
-            <div style={{
-      backgroundColor: grey,
-      borderRadius: '8px'
-    }}>
-                <IconButton variant="inverted" svg={Fav} assistiveText="inverted" />
-            </div>
-            <IconButton variant="critical" svg={Fav} assistiveText="critical" />
-            <IconButton variant="onColor" svg={Fav} assistiveText="onColor" />
-        </div>;
-}`,...(C=(z=d.parameters)==null?void 0:z.docs)==null?void 0:C.source}}};var k,w,V;x.parameters={...x.parameters,docs:{...(k=x.parameters)==null?void 0:k.docs,source:{originalSource:`() => {
-  const grey = getTokenVar(color.background.primaryInverted);
-  return <div style={{
-    display: 'flex',
-    gap: '8px'
-  }}>
-            <div style={{
-      display: 'flex',
-      gap: '4px'
-    }}>
-                <Button variant="ai">AI</Button>
-                <IconButton variant="ai" svg={Fav} assistiveText="Fav" />
-            </div>
-            <div style={{
-      display: 'flex',
-      gap: '4px',
-      backgroundColor: grey
-    }}>
-                <Button variant="classroom">Classroom</Button>
-                <IconButton variant="classroom" svg={Fav} assistiveText="Fav" />
-            </div>
-        </div>;
-}`,...(V=(w=x.parameters)==null?void 0:w.docs)==null?void 0:V.source}}};var N,W,$;y.parameters={...y.parameters,docs:{...(N=y.parameters)==null?void 0:N.docs,source:{originalSource:`() => <div style={{
-  display: 'flex',
-  alignItems: 'center',
-  gap: '8px'
-}}>
-        <div style={{
-    display: 'flex',
-    gap: '4px'
-  }}>
-            <Button size="small">Small</Button>
-            <IconButton size="small" svg={Fav} assistiveText="Fav" />
-        </div>
-        <div style={{
-    display: 'flex',
-    gap: '4px'
-  }}>
-            <Button size="medium">Medium</Button>
-            <IconButton size="medium" svg={Fav} assistiveText="Fav" />
-        </div>
-        <div style={{
-    display: 'flex',
-    gap: '4px'
-  }}>
-            <Button size="large">Large</Button>
-            <IconButton size="large" svg={Fav} assistiveText="Fav" />
-        </div>
-    </div>`,...($=(W=y.parameters)==null?void 0:W.docs)==null?void 0:$.source}}};var D,R,q;l.parameters={...l.parameters,docs:{...(D=l.parameters)==null?void 0:D.docs,source:{originalSource:`() => <>
-        <Button wrap size="small">
-            Do the really quite unusually long thing
-        </Button>
-        <Button wrap size="medium">
-            Do the really quite unusually long thing
-        </Button>
-        <Button wrap size="large">
-            Do the really quite unusually long thing
-        </Button>
-    </>`,...(q=(R=l.parameters)==null?void 0:R.docs)==null?void 0:q.source}}};var P,E,_;v.parameters={...v.parameters,docs:{...(P=v.parameters)==null?void 0:P.docs,source:{originalSource:`() => {
-  return <Button size={{
-    _: 'small',
-    'medium-l': 'medium',
-    'wide-s': 'large'
-  }} leadingSvgIcon={Fav}>
-            Change the viewport size
-        </Button>;
-}`,...(_=(E=v.parameters)==null?void 0:E.docs)==null?void 0:_.source}}};var L,M,A;u.parameters={...u.parameters,docs:{...(L=u.parameters)==null?void 0:L.docs,source:{originalSource:`() => {
-  const grey = getTokenVar(color.background.primaryInverted);
-  return <div style={{
-    display: 'flex',
-    gap: '16px',
-    flexDirection: 'column'
-  }}>
-            {(['small', 'medium', 'large'] as const).map(size => (['primary', 'secondary', 'tertiary', 'ghost', 'inverted', 'critical', 'ai', 'onColor', 'classroom'] as const).map(variant => <Fragment key={\`\${size}-\${variant}\`}>
-                        <Text variant="default-regular-italic">
-                            {variant} - {size}
-                        </Text>
-                        <div key={\`\${size}-\${variant}\`} style={{
-        display: 'flex',
-        gap: '16px',
-        backgroundColor: variant === 'inverted' || variant === 'classroom' ? grey : undefined
-      }}>
-                            <Button size={size} variant={variant}>
-                                button
-                            </Button>
-                            <Button size={size} variant={variant} leadingSvgIcon={Fav}>
-                                button
-                            </Button>
-                            <Button size={size} variant={variant} trailingSvgIcon={Fav}>
-                                button
-                            </Button>
-                            <Button size={size} variant={variant} busy assistiveText="Fav">
-                                button
-                            </Button>
-                            <Button size={size} variant={variant} disabled>
-                                disabled
-                            </Button>
-                            <Button size={size} variant={variant} dsInternalSimulation="hover">
-                                hover
-                            </Button>
-                            <Button size={size} variant={variant} dsInternalSimulation="active">
-                                active
-                            </Button>
-                            <Button size={size} variant={variant} dsInternalSimulation="focus">
-                                focus
-                            </Button>
-                        </div>
-                    </Fragment>))}
-        </div>;
-}`,...(A=(M=u.parameters)==null?void 0:M.docs)==null?void 0:A.source}}};var O,G,U;c.parameters={...c.parameters,docs:{...(O=c.parameters)==null?void 0:O.docs,source:{originalSource:`() => {
-  const grey = getTokenVar(color.background.primaryInverted);
-  return <div style={{
-    display: 'flex',
-    gap: '16px',
-    flexDirection: 'column'
-  }}>
-            {(['small', 'medium', 'large'] as const).map(size => (['primary', 'secondary', 'tertiary', 'ghost', 'inverted', 'critical', 'ai', 'onColor', 'classroom'] as const).map(variant => <>
-                        <Text variant="default-regular-italic">
-                            {variant} - {size}
-                        </Text>
-                        <div key={\`\${size}-\${variant}\`} style={{
-        display: 'flex',
-        gap: '16px',
-        backgroundColor: variant === 'inverted' || variant === 'classroom' ? grey : undefined
-      }}>
-                            <IconButton svg={Fav} assistiveText="fav" size={size} variant={variant} />
-
-                            <IconButton svg={Fav} assistiveText="fav" size={size} variant={variant} busy />
-
-                            <IconButton svg={Fav} assistiveText="fav" size={size} variant={variant} disabled />
-
-                            <IconButton svg={Fav} assistiveText="fav" size={size} variant={variant} dsInternalSimulation="hover" />
-
-                            <IconButton svg={Fav} assistiveText="fav" size={size} variant={variant} dsInternalSimulation="active" />
-
-                            <IconButton svg={Fav} assistiveText="fav" size={size} variant={variant} dsInternalSimulation="focus" />
-                        </div>
-                    </>))}
-        </div>;
-}`,...(U=(G=c.parameters)==null?void 0:G.docs)==null?void 0:U.source}}};var H,J,K;h.parameters={...h.parameters,docs:{...(H=h.parameters)==null?void 0:H.docs,source:{originalSource:`{
-  parameters: {
-    chromatic: {
-      disableSnapshot: true
-    }
-  },
-  decorators: [(story, {
-    args
-  }) => <div style={{
-    backgroundColor: args.variant === 'inverted' ? 'black' : undefined
-  }}>
-                {story()}
-            </div>],
-  args: {
-    children: 'Button',
-    dataset: {
-      qaid: 'button'
-    }
-  },
-  argTypes: {
-    children: {
-      control: 'text'
-    },
-    dataset: {
-      control: 'object'
-    },
-    assistiveText: {
-      control: 'text'
-    },
-    disabled: {
-      control: 'boolean'
-    },
-    fullWidth: {
-      control: 'boolean'
-    },
-    wrap: {
-      control: 'boolean'
-    },
-    href: {
-      control: 'text'
-    },
-    download: {
-      control: 'boolean'
-    },
-    opensInNewTab: {
-      control: 'boolean'
-    },
-    nofollow: {
-      control: 'boolean'
-    },
-    submitsForm: {
-      control: 'boolean'
-    },
-    busy: {
-      control: 'boolean'
-    },
-    leadingSvgIcon: {
-      options: ['None', 'With Icon'],
-      mapping: {
-        None: undefined,
-        'With Icon': Fav
-      },
-      control: 'select'
-    },
-    trailingSvgIcon: {
-      options: ['None', 'With Icon'],
-      mapping: {
-        None: undefined,
-        'With Icon': Fav
-      },
-      control: 'select'
-    },
-    // Disable deprecated props
-    url: {
-      table: {
-        disable: true
-      }
-    },
-    a11yLabel: {
-      table: {
-        disable: true
-      }
-    }
-  }
-}`,...(K=(J=h.parameters)==null?void 0:J.docs)==null?void 0:K.source}}};const ht=["Icons","Variants","VariantsIconButton","MiscVariants","Sizes","WrappingText","ResponsiveSize","Combinations","CombinationsIconButton","Playground"];export{u as Combinations,c as CombinationsIconButton,i as Icons,x as MiscVariants,h as Playground,v as ResponsiveSize,y as Sizes,g as Variants,d as VariantsIconButton,l as WrappingText,ht as __namedExportsOrder,yt as default};