@preply/ds-docs 11.0.0 → 11.1.0

package/dist/assets/Badge-BSDHZ3bI.js

@@ -1,10 +0,0 @@
-import{r as y,g as b,j as t}from"./iframe-B_74HtSc.js";import{f as h}from"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import{I as B}from"./Icon-CC0yjdx9.js";import{w as T}from"./componentNames-hc9KR2nX.js";const x="badge__ioy0w",I="label__lXPEF",u={badge:x,label:I},V=e=>{switch(e){case"xs":return"small";case"s":return"medium";case"m":return"large";default:return e}},r=y.forwardRef(function({type:d="neutral",size:l="medium",leadingSvgIcon:n,dataset:o,children:m,accent:s,inverted:i,hideLabel:c,...p},v){const g=V(l),a={...o,size:g};s===void 0&&i===void 0?a.type=d:(a.accent=s||"unset",a.inverted=!!i);const f={...h(p),ref:v,className:u.badge,...b(a,{preplyDsComponent:T.Badge})};return t.jsxs("span",{...f,children:[!!n&&t.jsx(B,{accent:"primary",size:l==="large"?"24":"16",svg:n}),t.jsx("span",{className:u.label,"data-hidden":c,children:m})]})});try{r.displayName="Badge",r.__docgenInfo={description:"",displayName:"Badge",props:{size:{defaultValue:{value:"medium"},description:"The size of the badge.",name:"size",required:!1,type:{name:"enum",value:[{value:'"large"'},{value:'"medium"'},{value:'"small"'},{value:'"s"'},{value:'"xs"'},{value:'"m"'}]}},leadingSvgIcon:{defaultValue:null,description:`The leading SVG icon.
-@example import TokyoUITag from '@preply/ds-media-icons/dist/24/TokyoUITag.svg';
-
-<Badge leadingSvgIcon={TokyoUITag}>Badge</Badge>
-or
-<Badge leadingSvgIcon={<TokyoUITag />}>Badge</Badge>`,name:"leadingSvgIcon",required:!1,type:{name:"enum",value:[{value:"ComponentClass<SVGAttributes<SVGElement>, any>"},{value:"FunctionComponent<SVGAttributes<SVGElement>>"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},hideLabel:{defaultValue:null,description:`@deprecated Look at <IconTile> if you need an icon-only badge.
-
-Hides badge label visually, but keeps it in the accessibility tree.
-Use this prop to implement icons-only badges.
-@example <Badge leadingSvgIcon={<TokyoUITag />} hideLabel>Badge</Badge>`,name:"hideLabel",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},assistiveText:{defaultValue:null,description:"@deprecated badge children should have all necessary information",name:"assistiveText",required:!1,type:{name:"enum",value:[{value:"string"}]}},type:{defaultValue:{value:"neutral"},description:"The type of the badge.",name:"type",required:!1,type:{name:"enum",value:[{value:'"positive"'},{value:'"info"'},{value:'"warning"'},{value:'"critical"'},{value:'"ai"'},{value:'"neutral"'}]}},accent:{defaultValue:null,description:"@deprecated Use `type` instead.",name:"accent",required:!1,type:{name:"enum",value:[{value:'"accent"'},{value:'"tertiary"'},{value:'"positive"'},{value:'"info"'},{value:'"warning"'},{value:'"critical"'}]}},inverted:{defaultValue:null,description:"@deprecated inverted badge is deprecated & will be removed in the future releases",name:"inverted",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}}}}}catch{}export{r as B};

package/dist/assets/Badge.stories-6FOVA96I.js

@@ -1,90 +0,0 @@
-import{j as e}from"./iframe-B_74HtSc.js";import{F as n}from"./TokyoUITag-B1Xueyd7.js";import{L as d}from"./LayoutFlex-DXRMJ9FH.js";import{B as a}from"./Badge-BSDHZ3bI.js";import"./preload-helper-Dp1pzeXC.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./layout-relative.module-BIZVul8q.js";import"./componentNames-hc9KR2nX.js";import"./Icon-CC0yjdx9.js";import"./text-accent-BQ9POoE5.js";import"./render-icon-MT6RlyNs.js";const q={title:"components/Badge",component:a,parameters:{layout:"padded",docs:{source:{type:"dynamic"}}}},t=()=>e.jsxs(d,{gap:"16",children:[e.jsx(a,{type:"neutral",children:"Neutral"}),e.jsx(a,{type:"positive",children:"Positive"}),e.jsx(a,{type:"info",children:"Info"}),e.jsx(a,{type:"warning",children:"Warning"}),e.jsx(a,{type:"critical",children:"Critical"}),e.jsx(a,{type:"ai",children:"AI"}),e.jsx(a,{type:"neutral",leadingSvgIcon:e.jsx(n,{}),children:"Neutral"}),e.jsx(a,{type:"positive",leadingSvgIcon:e.jsx(n,{}),children:"Positive"}),e.jsx(a,{type:"info",leadingSvgIcon:e.jsx(n,{}),children:"Info"}),e.jsx(a,{type:"warning",leadingSvgIcon:e.jsx(n,{}),children:"Warning"}),e.jsx(a,{type:"critical",leadingSvgIcon:e.jsx(n,{}),children:"Critical"}),e.jsx(a,{type:"ai",leadingSvgIcon:e.jsx(n,{}),children:"AI"})]});n.displayName="TokyoUITag";const r=()=>e.jsxs(d,{gap:"16",alignItems:"center",children:[e.jsx(a,{size:"small",leadingSvgIcon:e.jsx(n,{}),children:"Small"}),e.jsx(a,{size:"medium",leadingSvgIcon:e.jsx(n,{}),children:"Medium"}),e.jsx(a,{size:"large",leadingSvgIcon:e.jsx(n,{}),children:"Large"})]}),i=()=>e.jsx(d,{gap:"16",direction:"column",children:e.jsx(a,{size:"small",leadingSvgIcon:e.jsx(n,{}),children:"Badge"})});i.tags=["!autodocs"];const o=()=>e.jsx("div",{style:{maxWidth:150,margin:"0 auto"},children:e.jsx(a,{size:"medium",leadingSvgIcon:e.jsx(n,{}),children:"I'm way too long to be a badge label"})}),s={parameters:{chromatic:{disableSnapshot:!0}},args:{type:"neutral",size:"medium",children:"Badge",dataset:{qaid:"badge"}},argTypes:{dataset:{control:"object"},leadingSvgIcon:{options:["None","With Icon"],mapping:{None:void 0,"With Icon":n},control:"select"},assistiveText:{table:{disable:!0}},accent:{table:{disable:!0}},inverted:{table:{disable:!0}}}};var g,l,c;t.parameters={...t.parameters,docs:{...(g=t.parameters)==null?void 0:g.docs,source:{originalSource:`() => <LayoutFlex gap="16">
-        <Badge type="neutral">Neutral</Badge>
-        <Badge type="positive">Positive</Badge>
-        <Badge type="info">Info</Badge>
-        <Badge type="warning">Warning</Badge>
-        <Badge type="critical">Critical</Badge>
-        <Badge type="ai">AI</Badge>
-        <Badge type="neutral" leadingSvgIcon={<TokyoUITag />}>
-            Neutral
-        </Badge>
-        <Badge type="positive" leadingSvgIcon={<TokyoUITag />}>
-            Positive
-        </Badge>
-        <Badge type="info" leadingSvgIcon={<TokyoUITag />}>
-            Info
-        </Badge>
-        <Badge type="warning" leadingSvgIcon={<TokyoUITag />}>
-            Warning
-        </Badge>
-        <Badge type="critical" leadingSvgIcon={<TokyoUITag />}>
-            Critical
-        </Badge>
-        <Badge type="ai" leadingSvgIcon={<TokyoUITag />}>
-            AI
-        </Badge>
-    </LayoutFlex>`,...(c=(l=t.parameters)==null?void 0:l.docs)==null?void 0:c.source}}};var p,m,u;r.parameters={...r.parameters,docs:{...(p=r.parameters)==null?void 0:p.docs,source:{originalSource:`() => <LayoutFlex gap="16" alignItems="center">
-        <Badge size="small" leadingSvgIcon={<TokyoUITag />}>
-            Small
-        </Badge>
-        <Badge size="medium" leadingSvgIcon={<TokyoUITag />}>
-            Medium
-        </Badge>
-        <Badge size="large" leadingSvgIcon={<TokyoUITag />}>
-            Large
-        </Badge>
-    </LayoutFlex>`,...(u=(m=r.parameters)==null?void 0:m.docs)==null?void 0:u.source}}};var y,I,x;i.parameters={...i.parameters,docs:{...(y=i.parameters)==null?void 0:y.docs,source:{originalSource:`() => <LayoutFlex gap="16" direction="column">
-        <Badge size="small" leadingSvgIcon={<TokyoUITag />}>
-            Badge
-        </Badge>
-    </LayoutFlex>`,...(x=(I=i.parameters)==null?void 0:I.docs)==null?void 0:x.source}}};var v,B,j,h,S;o.parameters={...o.parameters,docs:{...(v=o.parameters)==null?void 0:v.docs,source:{originalSource:`() => <div style={{
-  maxWidth: 150,
-  margin: '0 auto'
-}}>
-        <Badge size="medium" leadingSvgIcon={<TokyoUITag />}>
-            I&apos;m way too long to be a badge label
-        </Badge>
-    </div>`,...(j=(B=o.parameters)==null?void 0:B.docs)==null?void 0:j.source},description:{story:"Please avoid using long labels for badges.",...(S=(h=o.parameters)==null?void 0:h.docs)==null?void 0:S.description}}};var T,b,f;s.parameters={...s.parameters,docs:{...(T=s.parameters)==null?void 0:T.docs,source:{originalSource:`{
-  parameters: {
-    chromatic: {
-      disableSnapshot: true
-    }
-  },
-  args: {
-    type: 'neutral',
-    size: 'medium',
-    children: 'Badge',
-    dataset: {
-      qaid: 'badge'
-    }
-  },
-  argTypes: {
-    dataset: {
-      control: 'object'
-    },
-    leadingSvgIcon: {
-      options: ['None', 'With Icon'],
-      mapping: {
-        None: undefined,
-        'With Icon': TokyoUITag
-      },
-      control: 'select'
-    },
-    // Disable deprecated props
-    assistiveText: {
-      table: {
-        disable: true
-      }
-    },
-    accent: {
-      table: {
-        disable: true
-      }
-    },
-    inverted: {
-      table: {
-        disable: true
-      }
-    }
-  }
-}`,...(f=(b=s.parameters)==null?void 0:b.docs)==null?void 0:f.source}}};const E=["Types","Sizes","AsFlexChild","LongLabel","Playground"];export{i as AsFlexChild,o as LongLabel,s as Playground,r as Sizes,t as Types,E as __namedExportsOrder,q as default};

package/dist/assets/Box-CfDLuPKr.css

@@ -1 +0,0 @@
-.Box__T6Fyt{margin:0;list-style:none;font-weight:inherit;border:none;text-align:inherit;border-spacing:0;color:var(--628fb7);color:var(--3546c3);box-shadow:var(--a814c9);flex:1}.Box--box-radius-0__FWPBJ{border-radius:var(--adc668)}.Box--box-radius-2__IXJHQ{border-radius:var(--9817c7)}.Box--box-radius-4__aoSlX{border-radius:var(--7dcb5e)}.Box--box-radius-8__-BuzF{border-radius:var(--2071ea)}.Box--box-radius-16__n3666{border-radius:var(--f3f949)}.Box--box-radius-300__MyFTq{border-radius:var(--bb0f63)}@media (min-width: 400px){.Box--narrow-l--box-radius-0__rbA8v{border-radius:var(--adc668)}.Box--narrow-l--box-radius-2__Cn0nB{border-radius:var(--9817c7)}.Box--narrow-l--box-radius-4__dXX4d{border-radius:var(--7dcb5e)}.Box--narrow-l--box-radius-8__c2qTs{border-radius:var(--2071ea)}.Box--narrow-l--box-radius-16__7yiZ2{border-radius:var(--f3f949)}.Box--narrow-l--box-radius-300__Ic2BC{border-radius:var(--bb0f63)}}@media (min-width: 700px){.Box--medium-s--box-radius-0__6dX4D{border-radius:var(--adc668)}.Box--medium-s--box-radius-2__h-yhf{border-radius:var(--9817c7)}.Box--medium-s--box-radius-4__YmbvG{border-radius:var(--7dcb5e)}.Box--medium-s--box-radius-8__NOIeK{border-radius:var(--2071ea)}.Box--medium-s--box-radius-16__Q-4Io{border-radius:var(--f3f949)}.Box--medium-s--box-radius-300__fynf3{border-radius:var(--bb0f63)}}@media (min-width: 880px){.Box--medium-l--box-radius-0__-HCNC{border-radius:var(--adc668)}.Box--medium-l--box-radius-2__cWx-n{border-radius:var(--9817c7)}.Box--medium-l--box-radius-4__ibcr4{border-radius:var(--7dcb5e)}.Box--medium-l--box-radius-8__zm-dC{border-radius:var(--2071ea)}.Box--medium-l--box-radius-16__o3E1Q{border-radius:var(--f3f949)}.Box--medium-l--box-radius-300__Hsi3C{border-radius:var(--bb0f63)}}@media (min-width: 1200px){.Box--wide-s--box-radius-0__H9zOa{border-radius:var(--adc668)}.Box--wide-s--box-radius-2__FnsdM{border-radius:var(--9817c7)}.Box--wide-s--box-radius-4__G4jL0{border-radius:var(--7dcb5e)}.Box--wide-s--box-radius-8__7Mz6S{border-radius:var(--2071ea)}.Box--wide-s--box-radius-16__or-lk{border-radius:var(--f3f949)}.Box--wide-s--box-radius-300__rPeg0{border-radius:var(--bb0f63)}}@media (min-width: 1900px){.Box--wide-l--box-radius-0__HQ2Tn{border-radius:var(--adc668)}.Box--wide-l--box-radius-2__GYO54{border-radius:var(--9817c7)}.Box--wide-l--box-radius-4__267az{border-radius:var(--7dcb5e)}.Box--wide-l--box-radius-8__1hPOR{border-radius:var(--2071ea)}.Box--wide-l--box-radius-16__gp8Ov{border-radius:var(--f3f949)}.Box--wide-l--box-radius-300__NiuZR{border-radius:var(--bb0f63)}}.Box--background-primary__00zVu{background-color:var(--3546c3)}.Box--background-secondary__hY7w0{background-color:var(--302ecf)}.Box--background-tertiary__cIPge{background-color:var(--a5c761)}.Box--background-overlay__vbs8V{background-color:var(--02a0d5)}.Box--background-disabled__81WYT{background-color:var(--319b29)}.Box--background-brand__2W0VB{background-color:var(--cd91ab)}.Box--background-brandB2b__KQrLm{background-color:var(--706789)}.Box--background-accentLight__x6RrQ{background-color:var(--560eda)}.Box--background-accentDark__agpDd{background-color:var(--e4c520)}.Box--background-positiveLight__67dRq{background-color:var(--1836a4)}.Box--background-positiveDark__lYghV{background-color:var(--ae7f1f)}.Box--background-infoLight__u-TX4{background-color:var(--94a45e)}.Box--background-infoDark__ud4qs{background-color:var(--79dffb)}.Box--background-warningLight__JtSuS{background-color:var(--b503b8)}.Box--background-warningDark__SIgOQ{background-color:var(--34fc43)}.Box--background-criticalLight__uPTDs{background-color:var(--f15644)}.Box--background-criticalDark__12Zft{background-color:var(--87fcf8)}.Box--background-statusOnline__5PZcQ{background-color:var(--cbc115)}.Box--background-statusOffline__Vh0CO{background-color:var(--7ff085)}.Box--background-primaryInverted__TePy2{background-color:var(--4983fe)}.Box--background-secondaryInverted__tMytW{background-color:var(--19649f)}.Box--background-tertiaryInverted__K2wU5{background-color:var(--a469f2)}

package/dist/assets/Box.stories-DAVs5Qmd.js

@@ -1,44 +0,0 @@
-import{r as S,u as O,v as i,g as q,j as a,L as I,a5 as A,a6 as H}from"./iframe-B_74HtSc.js";import{H as c}from"./Heading-Cj8Si45g.js";import{L as m}from"./LayoutFlex-DXRMJ9FH.js";import{T as b}from"./Text-DvShrljd.js";import{f as R}from"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import{g as N}from"./layout-relative.module-BIZVul8q.js";import{w as u}from"./componentNames-hc9KR2nX.js";import{a as V,S as j}from"./consts-KAYct7Gj.js";import"./preload-helper-Dp1pzeXC.js";import"./text-accent-BQ9POoE5.js";import"./text-centered-BEaaxMgl.js";const C="Box__T6Fyt",E={Box:C,"Box--box-radius-0":"Box--box-radius-0__FWPBJ","Box--box-radius-2":"Box--box-radius-2__IXJHQ","Box--box-radius-4":"Box--box-radius-4__aoSlX","Box--box-radius-8":"Box--box-radius-8__-BuzF","Box--box-radius-16":"Box--box-radius-16__n3666","Box--box-radius-300":"Box--box-radius-300__MyFTq","Box--narrow-l--box-radius-0":"Box--narrow-l--box-radius-0__rbA8v","Box--narrow-l--box-radius-2":"Box--narrow-l--box-radius-2__Cn0nB","Box--narrow-l--box-radius-4":"Box--narrow-l--box-radius-4__dXX4d","Box--narrow-l--box-radius-8":"Box--narrow-l--box-radius-8__c2qTs","Box--narrow-l--box-radius-16":"Box--narrow-l--box-radius-16__7yiZ2","Box--narrow-l--box-radius-300":"Box--narrow-l--box-radius-300__Ic2BC","Box--medium-s--box-radius-0":"Box--medium-s--box-radius-0__6dX4D","Box--medium-s--box-radius-2":"Box--medium-s--box-radius-2__h-yhf","Box--medium-s--box-radius-4":"Box--medium-s--box-radius-4__YmbvG","Box--medium-s--box-radius-8":"Box--medium-s--box-radius-8__NOIeK","Box--medium-s--box-radius-16":"Box--medium-s--box-radius-16__Q-4Io","Box--medium-s--box-radius-300":"Box--medium-s--box-radius-300__fynf3","Box--medium-l--box-radius-0":"Box--medium-l--box-radius-0__-HCNC","Box--medium-l--box-radius-2":"Box--medium-l--box-radius-2__cWx-n","Box--medium-l--box-radius-4":"Box--medium-l--box-radius-4__ibcr4","Box--medium-l--box-radius-8":"Box--medium-l--box-radius-8__zm-dC","Box--medium-l--box-radius-16":"Box--medium-l--box-radius-16__o3E1Q","Box--medium-l--box-radius-300":"Box--medium-l--box-radius-300__Hsi3C","Box--wide-s--box-radius-0":"Box--wide-s--box-radius-0__H9zOa","Box--wide-s--box-radius-2":"Box--wide-s--box-radius-2__FnsdM","Box--wide-s--box-radius-4":"Box--wide-s--box-radius-4__G4jL0","Box--wide-s--box-radius-8":"Box--wide-s--box-radius-8__7Mz6S","Box--wide-s--box-radius-16":"Box--wide-s--box-radius-16__or-lk","Box--wide-s--box-radius-300":"Box--wide-s--box-radius-300__rPeg0","Box--wide-l--box-radius-0":"Box--wide-l--box-radius-0__HQ2Tn","Box--wide-l--box-radius-2":"Box--wide-l--box-radius-2__GYO54","Box--wide-l--box-radius-4":"Box--wide-l--box-radius-4__267az","Box--wide-l--box-radius-8":"Box--wide-l--box-radius-8__1hPOR","Box--wide-l--box-radius-16":"Box--wide-l--box-radius-16__gp8Ov","Box--wide-l--box-radius-300":"Box--wide-l--box-radius-300__NiuZR","Box--background-primary":"Box--background-primary__00zVu","Box--background-secondary":"Box--background-secondary__hY7w0","Box--background-tertiary":"Box--background-tertiary__cIPge","Box--background-overlay":"Box--background-overlay__vbs8V","Box--background-disabled":"Box--background-disabled__81WYT","Box--background-brand":"Box--background-brand__2W0VB","Box--background-brandB2b":"Box--background-brandB2b__KQrLm","Box--background-accentLight":"Box--background-accentLight__x6RrQ","Box--background-accentDark":"Box--background-accentDark__agpDd","Box--background-positiveLight":"Box--background-positiveLight__67dRq","Box--background-positiveDark":"Box--background-positiveDark__lYghV","Box--background-infoLight":"Box--background-infoLight__u-TX4","Box--background-infoDark":"Box--background-infoDark__ud4qs","Box--background-warningLight":"Box--background-warningLight__JtSuS","Box--background-warningDark":"Box--background-warningDark__SIgOQ","Box--background-criticalLight":"Box--background-criticalLight__uPTDs","Box--background-criticalDark":"Box--background-criticalDark__12Zft","Box--background-statusOnline":"Box--background-statusOnline__5PZcQ","Box--background-statusOffline":"Box--background-statusOffline__Vh0CO","Box--background-primaryInverted":"Box--background-primaryInverted__TePy2","Box--background-secondaryInverted":"Box--background-secondaryInverted__tMytW","Box--background-tertiaryInverted":"Box--background-tertiaryInverted__K2wU5"},r=S.forwardRef(function({children:g,background:_="primary",radius:v=A,padding:p=H,tag:k,dataset:f,...y},h){const w=O(E,u.Box,[i("box-radius",v),i("background",_)]),L=N(p),P=k??I,D=[...w,...L],T={...R(y),ref:h,className:D.join(" "),...q(f,{preplyDsComponent:u.Box})};return a.jsx(P,{...T,children:g})});try{r.displayName="Box",r.__docgenInfo={description:"A styleable container.\n\nUse this with `Layout*` components to create complex content containers.",displayName:"Box",props:{background:{defaultValue:{value:"primary"},description:"",name:"background",required:!1,type:{name:"enum",value:[{value:'"primary"'},{value:'"secondary"'},{value:'"tertiary"'},{value:'"accentDark"'},{value:'"overlay"'},{value:'"disabled"'},{value:'"brand"'},{value:'"brandB2b"'},{value:'"accentLight"'},{value:'"positiveLight"'},{value:'"positiveDark"'},{value:'"infoLight"'},{value:'"infoDark"'},{value:'"warningLight"'},{value:'"warningDark"'},{value:'"criticalLight"'},{value:'"criticalDark"'},{value:'"statusOnline"'},{value:'"statusOffline"'},{value:'"primaryInverted"'},{value:'"secondaryInverted"'},{value:'"tertiaryInverted"'}]}},radius:{defaultValue:{value:"16"},description:"",name:"radius",required:!1,type:{name:"enum",value:[{value:'"0"'},{value:'"2"'},{value:'"4"'},{value:'"8"'},{value:'"16"'},{value:'"300"'},{value:"ResponsiveProp<BoxRadius>"}]}},tag:{defaultValue:null,description:"",name:"tag",required:!1,type:{name:"enum",value:[{value:'"p"'},{value:'"div"'},{value:'"span"'},{value:'"main"'},{value:'"header"'},{value:'"footer"'},{value:'"article"'},{value:'"section"'},{value:'"ul"'},{value:'"ol"'},{value:'"li"'},{value:'"fieldset"'},{value:'"table"'},{value:'"th"'},{value:'"tr"'},{value:'"td"'},{value:'"thead"'},{value:'"tfoot"'},{value:'"tbody"'},{value:'"caption"'},{value:'"figure"'},{value:'"figcaption"'}]}},padding:{defaultValue:{value:"24"},description:"",name:"padding",required:!1,type:{name:"enum",value:[{value:'"0"'},{value:'"2"'},{value:'"4"'},{value:'"8"'},{value:'"16"'},{value:'"1"'},{value:'"6"'},{value:'"12"'},{value:'"20"'},{value:'"24"'},{value:'"32"'},{value:'"48"'},{value:'"64"'},{value:'"96"'},{value:'"160"'},{value:"[BoxPadding, BoxPadding]"},{value:"[BoxPadding, BoxPadding, BoxPadding]"},{value:"[BoxPadding, BoxPadding, BoxPadding, BoxPadding]"},{value:"ResponsiveProp<ShortHand<BoxPadding>>"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},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: HTMLElement | null) => void"},{value:"RefObject<HTMLElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}const K={title:"components/Box",component:r,argTypes:{radius:{description:j},padding:{description:V}}},e=()=>a.jsx(r,{background:"positiveLight",children:a.jsxs(m,{gap:"16",direction:"column",children:[a.jsx(c,{tag:"h3",variant:"medium",children:"Heading"}),a.jsx(b,{accent:"positive",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed metus nisi, ornare sit amet elit ut, porttitor commodo ipsum. Aliquam vel est quis erat sagittis posuere et vitae eros"})]})});e.storyName="Box";const o={parameters:{chromatic:{disableSnapshot:!0}},args:{background:void 0,radius:void 0,padding:void 0,children:a.jsxs(m,{gap:"16",direction:"column",children:[a.jsx(c,{variant:"large",tag:"h3",children:"Heading"}),a.jsx(b,{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed metus nisi, ornare sit amet elit ut, porttitor commodo ipsum. Aliquam vel est quis erat sagittis posuere et vitae eros"})]}),dataset:{qaid:"box"}},argTypes:{children:{control:!1},dataset:{control:"object"}}};var d,s,t;e.parameters={...e.parameters,docs:{...(d=e.parameters)==null?void 0:d.docs,source:{originalSource:`() => <Box background="positiveLight">
-        <LayoutFlex gap="16" direction="column">
-            <Heading tag="h3" variant="medium">
-                Heading
-            </Heading>
-            <Text accent="positive">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed metus nisi, ornare sit
-                amet elit ut, porttitor commodo ipsum. Aliquam vel est quis erat sagittis posuere et
-                vitae eros
-            </Text>
-        </LayoutFlex>
-    </Box>`,...(t=(s=e.parameters)==null?void 0:s.docs)==null?void 0:t.source}}};var n,l,x;o.parameters={...o.parameters,docs:{...(n=o.parameters)==null?void 0:n.docs,source:{originalSource:`{
-  parameters: {
-    chromatic: {
-      disableSnapshot: true
-    }
-  },
-  args: {
-    background: undefined,
-    radius: undefined,
-    padding: undefined,
-    children: <LayoutFlex gap="16" direction="column">
-                <Heading variant="large" tag="h3">
-                    Heading
-                </Heading>
-                <Text>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed metus nisi, ornare
-                    sit amet elit ut, porttitor commodo ipsum. Aliquam vel est quis erat sagittis
-                    posuere et vitae eros
-                </Text>
-            </LayoutFlex>,
-    dataset: {
-      qaid: 'box'
-    }
-  },
-  argTypes: {
-    children: {
-      control: false
-    },
-    dataset: {
-      control: 'object'
-    }
-  }
-}`,...(x=(l=o.parameters)==null?void 0:l.docs)==null?void 0:x.source}}};const $=["Base","Playground"];export{e as Base,o as Playground,$ as __namedExportsOrder,K as default};

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

@@ -1,242 +0,0 @@
-import{j as e,g as je}from"./iframe-B_74HtSc.js";import{b as l,I as b}from"./IconButton-BpjNyYgD.js";import{w as ye}from"./componentNames-hc9KR2nX.js";import{F as g}from"./TokyoUIMessages-hZLnK87p.js";import{B as C}from"./Button-C0Um_QuO.js";import{A as v}from"./Avatar-Die_4zu0.js";import{L as j}from"./LayoutFlex-DXRMJ9FH.js";import"./preload-helper-Dp1pzeXC.js";import"./render-icon-MT6RlyNs.js";import"./ButtonBase-HkSfLFbE.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./Spinner-8-RB4YZR.js";import"./useMergeRefs-Caz9hOck.js";import"./useHostname-CbpnzdHv.js";import"./index-CC6DAVyL.js";import"./constants-5om8Ptru.js";import"./layout-relative.module-BIZVul8q.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:'"large"'},{value:'"medium"'},{value:'"small"'}]}},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-C0Um_QuO.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-B_74HtSc.js";import{r as u}from"./render-icon-MT6RlyNs.js";import{B as V}from"./ButtonBase-HkSfLFbE.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:{variant:{defaultValue:{value:"primary"},description:"",name:"variant",required:!1,type:{name:"enum",value:[{value:'"primary"'},{value:'"secondary"'},{value:'"tertiary"'},{value:'"inverted"'},{value:'"critical"'},{value:'"quaternary"'},{value:'"ghost"'},{value:'"onColor"'},{value:'"classroom"'},{value:'"primaryB2b"'},{value:'"primaryTutor"'},{value:'"newFeature"'},{value:'"ai"'}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},id:{defaultValue:null,description:"",name:"id",required:!1,type:{name:"enum",value:[{value:"string"}]}},size:{defaultValue:{value:"small"},description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"large"'},{value:'"medium"'},{value:'"small"'},{value:"ResponsiveProp<ButtonSize>"}]}},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"}]}},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"}]}},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"}]}},submitsForm:{defaultValue:null,description:"",name:"submitsForm",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},assistiveText:{defaultValue:null,description:"",name:"assistiveText",required:!1,type:{name:"enum",value:[{value:"string"}]}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},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"}]}},onMouseUp:{defaultValue:null,description:"",name:"onMouseUp",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"}]}},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"}]}},busy:{defaultValue:null,description:"Replaces the content with a loading indicator.",name:"busy",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},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"}]}},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)}}