@preply/ds-docs 2.0.1 → 2.1.0

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

@@ -0,0 +1,252 @@
+import{j as t}from"./jsx-runtime-BTJTZTIL.js";import{F as e}from"./TokyoUIFav-DOVerCtW.js";import{I as s}from"./IconButton-B7CxWK4j.js";import{B as a}from"./Button-BlwReLw5.js";import{S as b}from"./consts-KAYct7Gj.js";import{T as U}from"./Text-BXZIkJPK.js";import{g as u}from"./getTokenVar-DU_DEzTd.js";import{c as p}from"./tokens-Di5DrZN4.js";import"./index-ChsGqxH_.js";import"./index-Cb9e4tly.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./render-icon-BT0Aq7PA.js";import"./ButtonBase-BCfmDQ_b.js";import"./Spinner-B2C3RkCF.js";import"./classNames-BUL1Zq7e.js";import"./defaults-B1rzzf6M.js";import"./filterHTMLAttributes-DYdLqcvH.js";import"./useHostname-Y3PlXofY.js";import"./index-DdzHuZ-Y.js";import"./index-CC6DAVyL.js";import"./componentNames-Bwls0I02.js";import"./text-accent-DZDDtpIt.js";import"./text-centered-CznToR0o.js";import"./constants-BgBLeZzp.js";const yt={title:"components/Button",component:a,subcomponents:{IconButton:s},argTypes:{size:{description:b},fullWidth:{description:b}}},i=()=>t.jsxs("div",{style:{display:"flex",gap:"1rem"},children:[t.jsx(a,{children:"Button"}),t.jsx(a,{leadingSvgIcon:e,children:"Button"}),t.jsx(a,{trailingSvgIcon:e,children:"Button"}),t.jsx(s,{svg:e,assistiveText:"Favourite"})]});i.tags=["!autodocs","!test"];i.parameters={chromatic:{disableSnapshot:!0}};const g=()=>{const o=u(p.background.primaryInverted);return t.jsxs("div",{style:{display:"flex",gap:"1rem"},children:[t.jsx(a,{variant:"primary",children:"Primary"}),t.jsx(a,{variant:"secondary",children:"Secondary"}),t.jsx(a,{variant:"tertiary",children:"Tertiary"}),t.jsx(a,{variant:"ghost",children:"Ghost"}),t.jsx("div",{style:{backgroundColor:o,borderRadius:"8px"},children:t.jsx(a,{variant:"inverted",children:"Inverted"})}),t.jsx(a,{variant:"critical",children:"Critical"}),t.jsx(a,{variant:"onColor",children:"onColor"})]})},d=()=>{const o=u(p.background.primaryInverted);return t.jsxs("div",{style:{display:"flex",gap:"1rem"},children:[t.jsx(s,{variant:"primary",svg:e,assistiveText:"primary"}),t.jsx(s,{variant:"secondary",svg:e,assistiveText:"secondary"}),t.jsx(s,{variant:"tertiary",svg:e,assistiveText:"tertiary"}),t.jsx(s,{variant:"ghost",svg:e,assistiveText:"ghost"}),t.jsx("div",{style:{backgroundColor:o,borderRadius:"8px"},children:t.jsx(s,{variant:"inverted",svg:e,assistiveText:"inverted"})}),t.jsx(s,{variant:"critical",svg:e,assistiveText:"critical"}),t.jsx(s,{variant:"onColor",svg:e,assistiveText:"onColor"})]})};d.storyName="Variants (IconButton)";const m=()=>{const o=u(p.background.primaryInverted);return t.jsxs("div",{style:{display:"flex",gap:"8px"},children:[t.jsxs("div",{style:{display:"flex",gap:"4px"},children:[t.jsx(a,{variant:"ai",children:"AI"}),t.jsx(s,{variant:"ai",svg:e,assistiveText:"Fav"})]}),t.jsxs("div",{style:{display:"flex",gap:"4px",backgroundColor:o},children:[t.jsx(a,{variant:"classroom",children:"Classroom"}),t.jsx(s,{variant:"classroom",svg:e,assistiveText:"Fav"})]})]})},x=()=>t.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"8px"},children:[t.jsxs("div",{style:{display:"flex",gap:"4px"},children:[t.jsx(a,{size:"small",children:"Small"}),t.jsx(s,{size:"small",svg:e,assistiveText:"Fav"})]}),t.jsxs("div",{style:{display:"flex",gap:"4px"},children:[t.jsx(a,{size:"medium",children:"Medium"}),t.jsx(s,{size:"medium",svg:e,assistiveText:"Fav"})]}),t.jsxs("div",{style:{display:"flex",gap:"4px"},children:[t.jsx(a,{size:"large",children:"Large"}),t.jsx(s,{size:"large",svg:e,assistiveText:"Fav"})]})]}),l=()=>t.jsx(a,{wrap:!0,children:"Do the really quite unusually long thing"});l.tags=["!autodocs"];l.decorators=[o=>t.jsx("div",{style:{width:"200px"},children:o()})];const v=()=>{const o=u(p.background.primaryInverted);return t.jsx("div",{style:{display:"flex",gap:"16px",flexDirection:"column"},children:["small","medium","large"].map(n=>["primary","secondary","tertiary","ghost","inverted","critical","ai","onColor","classroom"].map(r=>t.jsxs(t.Fragment,{children:[t.jsxs(U,{variant:"default-regular-italic",children:[r," - ",n]}),t.jsxs("div",{style:{display:"flex",gap:"16px",backgroundColor:r==="inverted"||r==="classroom"?o:void 0},children:[t.jsx(a,{size:n,variant:r,children:"button"}),t.jsx(a,{size:n,variant:r,leadingSvgIcon:e,children:"button"}),t.jsx(a,{size:n,variant:r,trailingSvgIcon:e,children:"button"}),t.jsx(a,{size:n,variant:r,busy:!0,assistiveText:"Fav",children:"button"}),t.jsx(a,{size:n,variant:r,disabled:!0,children:"disabled"}),t.jsx(a,{size:n,variant:r,dsInternalSimulation:"hover",children:"hover"}),t.jsx(a,{size:n,variant:r,dsInternalSimulation:"active",children:"active"}),t.jsx(a,{size:n,variant:r,dsInternalSimulation:"focus",children:"focus"})]},`${n}-${r}`)]})))})};v.tags=["!autodocs"];const c=()=>{const o=u(p.background.primaryInverted);return t.jsx("div",{style:{display:"flex",gap:"16px",flexDirection:"column"},children:["small","medium","large"].map(n=>["primary","secondary","tertiary","ghost","inverted","critical","ai","onColor","classroom"].map(r=>t.jsxs(t.Fragment,{children:[t.jsxs(U,{variant:"default-regular-italic",children:[r," - ",n]}),t.jsxs("div",{style:{display:"flex",gap:"16px",backgroundColor:r==="inverted"||r==="classroom"?o:void 0},children:[t.jsx(s,{svg:e,assistiveText:"fav",size:n,variant:r}),t.jsx(s,{svg:e,assistiveText:"fav",size:n,variant:r,busy:!0}),t.jsx(s,{svg:e,assistiveText:"fav",size:n,variant:r,disabled:!0}),t.jsx(s,{svg:e,assistiveText:"fav",size:n,variant:r,dsInternalSimulation:"hover"}),t.jsx(s,{svg:e,assistiveText:"fav",size:n,variant:r,dsInternalSimulation:"active"}),t.jsx(s,{svg:e,assistiveText:"fav",size:n,variant:r,dsInternalSimulation:"focus"})]},`${n}-${r}`)]})))})};c.storyName="Combinations (IconButton)";c.tags=["!autodocs"];const y={parameters:{chromatic:{disableSnapshot:!0}},decorators:[(o,{args:n})=>t.jsx("div",{style:{backgroundColor:n.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":e},control:"select"},trailingSvgIcon:{options:["None","With Icon"],mapping:{None:void 0,"With Icon":e},control:"select"},url:{table:{disable:!0}},a11yLabel:{table:{disable:!0}}}};var h,B,I;i.parameters={...i.parameters,docs:{...(h=i.parameters)==null?void 0:h.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>`,...(I=(B=i.parameters)==null?void 0:B.docs)==null?void 0:I.source}}};var f,j,T;g.parameters={...g.parameters,docs:{...(f=g.parameters)==null?void 0:f.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>;
+}`,...(T=(j=g.parameters)==null?void 0:j.docs)==null?void 0:T.source}}};var S,F,z;d.parameters={...d.parameters,docs:{...(S=d.parameters)==null?void 0:S.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>;
+}`,...(z=(F=d.parameters)==null?void 0:F.docs)==null?void 0:z.source}}};var C,k,V;m.parameters={...m.parameters,docs:{...(C=m.parameters)==null?void 0:C.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=(k=m.parameters)==null?void 0:k.docs)==null?void 0:V.source}}};var N,W,w;x.parameters={...x.parameters,docs:{...(N=x.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=(W=x.parameters)==null?void 0:W.docs)==null?void 0:w.source}}};var R,$,D;l.parameters={...l.parameters,docs:{...(R=l.parameters)==null?void 0:R.docs,source:{originalSource:"() => <Button wrap>Do the really quite unusually long thing</Button>",...(D=($=l.parameters)==null?void 0:$.docs)==null?void 0:D.source}}};var P,E,L;v.parameters={...v.parameters,docs:{...(P=v.parameters)==null?void 0:P.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
+      }}>
+                            <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>
+                    </>))}
+        </div>;
+}`,...(L=(E=v.parameters)==null?void 0:E.docs)==null?void 0:L.source}}};var q,M,_;c.parameters={...c.parameters,docs:{...(q=c.parameters)==null?void 0:q.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>;
+}`,...(_=(M=c.parameters)==null?void 0:M.docs)==null?void 0:_.source}}};var A,O,G;y.parameters={...y.parameters,docs:{...(A=y.parameters)==null?void 0:A.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
+      }
+    }
+  }
+}`,...(G=(O=y.parameters)==null?void 0:O.docs)==null?void 0:G.source}}};const bt=["Icons","Variants","VariantsIconButton","MiscVariants","Sizes","WrappingText","Combinations","CombinationsIconButton","Playground"];export{v as Combinations,c as CombinationsIconButton,i as Icons,m as MiscVariants,y as Playground,x as Sizes,g as Variants,d as VariantsIconButton,l as WrappingText,bt as __namedExportsOrder,yt as default};

package/dist/assets/ButtonBase-BCfmDQ_b.js

@@ -0,0 +1,8 @@
+import{j as n}from"./jsx-runtime-BTJTZTIL.js";import{r}from"./index-Cb9e4tly.js";import{S as G}from"./Spinner-B2C3RkCF.js";import{f as Q}from"./filterHTMLAttributes-DYdLqcvH.js";import{a as J,B as Y}from"./defaults-B1rzzf6M.js";import{u as $}from"./useHostname-Y3PlXofY.js";import{b as s,s as B,m as tt,a as C}from"./classNames-BUL1Zq7e.js";import{g as et,a as nt}from"./index-DdzHuZ-Y.js";import{m as at}from"./index-CC6DAVyL.js";const it="ButtonBase__0qXGj",v={"button-width--width-full":"button-width--width-full__nxjVK","button-width--width-auto":"button-width--width-auto__CngVf","button-width--narrow-l--width-full":"button-width--narrow-l--width-full__rZc8T","button-width--narrow-l--width-auto":"button-width--narrow-l--width-auto__Fs14X","button-width--medium-s--width-full":"button-width--medium-s--width-full__lb8XX","button-width--medium-s--width-auto":"button-width--medium-s--width-auto__gtajp","button-width--medium-l--width-full":"button-width--medium-l--width-full__qOGDr","button-width--medium-l--width-auto":"button-width--medium-l--width-auto__vFKgm","button-width--wide-s--width-full":"button-width--wide-s--width-full__5nhxD","button-width--wide-s--width-auto":"button-width--wide-s--width-auto__J4Ht3","button-width--wide-l--width-full":"button-width--wide-l--width-full__Rsexc","button-width--wide-l--width-auto":"button-width--wide-l--width-auto__k6Ctk",ButtonBase:it,"ButtonBase--content":"ButtonBase--content__ZEhK4","ButtonBase--is-icon-button":"ButtonBase--is-icon-button__CDG-9","ButtonBase--busy":"ButtonBase--busy__M2Cgo","ButtonBase--dsInternalSimulation-focus":"ButtonBase--dsInternalSimulation-focus__xhIA9","ButtonBase--is-busy":"ButtonBase--is-busy__FT7vR","ButtonBase--width-full":"ButtonBase--width-full__0ENoK","ButtonBase--width-auto":"ButtonBase--width-auto__vwDOv","ButtonBase--narrow-l--width-full":"ButtonBase--narrow-l--width-full__-H9pn","ButtonBase--narrow-l--width-auto":"ButtonBase--narrow-l--width-auto__2i3td","ButtonBase--medium-s--width-full":"ButtonBase--medium-s--width-full__sNHbR","ButtonBase--medium-s--width-auto":"ButtonBase--medium-s--width-auto__6T6zO","ButtonBase--medium-l--width-full":"ButtonBase--medium-l--width-full__FTcYM","ButtonBase--medium-l--width-auto":"ButtonBase--medium-l--width-auto__KPNbM","ButtonBase--wide-s--width-full":"ButtonBase--wide-s--width-full__YgEMT","ButtonBase--wide-s--width-auto":"ButtonBase--wide-s--width-auto__nM-ia","ButtonBase--wide-l--width-full":"ButtonBase--wide-l--width-full__CFPdD","ButtonBase--wide-l--width-auto":"ButtonBase--wide-l--width-auto__6gGyZ","ButtonBase--size-xs":"ButtonBase--size-xs__-H91X","ButtonBase--is-icon-button-size-xs":"ButtonBase--is-icon-button-size-xs__EPZ9W","ButtonBase--size-s":"ButtonBase--size-s__lwe2R","ButtonBase--is-icon-button-size-s":"ButtonBase--is-icon-button-size-s__rDjsc","ButtonBase--size-m":"ButtonBase--size-m__VomvS","ButtonBase--is-icon-button-size-m":"ButtonBase--is-icon-button-size-m__XNsyO","ButtonBase--size-l":"ButtonBase--size-l__zpj7k","ButtonBase--is-icon-button-size-l":"ButtonBase--is-icon-button-size-l__ZW9LI","ButtonBase--size-xl":"ButtonBase--size-xl__Xpxy6","ButtonBase--is-icon-button-size-xl":"ButtonBase--is-icon-button-size-xl__wMWhi","ButtonBase--size-large":"ButtonBase--size-large__-OxgW","ButtonBase--is-icon-button-size-large":"ButtonBase--is-icon-button-size-large__bebMj","ButtonBase--size-medium":"ButtonBase--size-medium__YgQDT","ButtonBase--is-icon-button-size-medium":"ButtonBase--is-icon-button-size-medium__AC6Cq","ButtonBase--size-small":"ButtonBase--size-small__UMBKe","ButtonBase--is-icon-button-size-small":"ButtonBase--is-icon-button-size-small__hZmvi","ButtonBase--narrow-l--size-xs":"ButtonBase--narrow-l--size-xs__GRcw7","ButtonBase--narrow-l--is-icon-button-size-xs":"ButtonBase--narrow-l--is-icon-button-size-xs__GLth2","ButtonBase--narrow-l--size-s":"ButtonBase--narrow-l--size-s__pnGJC","ButtonBase--narrow-l--is-icon-button-size-s":"ButtonBase--narrow-l--is-icon-button-size-s__-l6X-","ButtonBase--narrow-l--size-m":"ButtonBase--narrow-l--size-m__D-uV5","ButtonBase--narrow-l--is-icon-button-size-m":"ButtonBase--narrow-l--is-icon-button-size-m__OXWKs","ButtonBase--narrow-l--size-l":"ButtonBase--narrow-l--size-l__TgiXj","ButtonBase--narrow-l--is-icon-button-size-l":"ButtonBase--narrow-l--is-icon-button-size-l__JnU0h","ButtonBase--narrow-l--size-xl":"ButtonBase--narrow-l--size-xl__LYDGc","ButtonBase--narrow-l--is-icon-button-size-xl":"ButtonBase--narrow-l--is-icon-button-size-xl__2s9LK","ButtonBase--narrow-l--size-large":"ButtonBase--narrow-l--size-large__jbaAB","ButtonBase--narrow-l--is-icon-button-size-large":"ButtonBase--narrow-l--is-icon-button-size-large__UIpIh","ButtonBase--narrow-l--size-medium":"ButtonBase--narrow-l--size-medium__62t1K","ButtonBase--narrow-l--is-icon-button-size-medium":"ButtonBase--narrow-l--is-icon-button-size-medium__r2nuk","ButtonBase--narrow-l--size-small":"ButtonBase--narrow-l--size-small__8uFFR","ButtonBase--narrow-l--is-icon-button-size-small":"ButtonBase--narrow-l--is-icon-button-size-small__CkKxU","ButtonBase--medium-s--size-xs":"ButtonBase--medium-s--size-xs__u7Kp0","ButtonBase--medium-s--is-icon-button-size-xs":"ButtonBase--medium-s--is-icon-button-size-xs__cOdRd","ButtonBase--medium-s--size-s":"ButtonBase--medium-s--size-s__uRksZ","ButtonBase--medium-s--is-icon-button-size-s":"ButtonBase--medium-s--is-icon-button-size-s__zRxOl","ButtonBase--medium-s--size-m":"ButtonBase--medium-s--size-m__duOck","ButtonBase--medium-s--is-icon-button-size-m":"ButtonBase--medium-s--is-icon-button-size-m__fuXOy","ButtonBase--medium-s--size-l":"ButtonBase--medium-s--size-l__Q-pD5","ButtonBase--medium-s--is-icon-button-size-l":"ButtonBase--medium-s--is-icon-button-size-l__qxrPe","ButtonBase--medium-s--size-xl":"ButtonBase--medium-s--size-xl__YA9fY","ButtonBase--medium-s--is-icon-button-size-xl":"ButtonBase--medium-s--is-icon-button-size-xl__MsrBO","ButtonBase--medium-s--size-large":"ButtonBase--medium-s--size-large__XpFoi","ButtonBase--medium-s--is-icon-button-size-large":"ButtonBase--medium-s--is-icon-button-size-large__-IvSU","ButtonBase--medium-s--size-medium":"ButtonBase--medium-s--size-medium__ZA4JC","ButtonBase--medium-s--is-icon-button-size-medium":"ButtonBase--medium-s--is-icon-button-size-medium__946RE","ButtonBase--medium-s--size-small":"ButtonBase--medium-s--size-small__nNIDt","ButtonBase--medium-s--is-icon-button-size-small":"ButtonBase--medium-s--is-icon-button-size-small__aAjgr","ButtonBase--medium-l--size-xs":"ButtonBase--medium-l--size-xs__F1Khc","ButtonBase--medium-l--is-icon-button-size-xs":"ButtonBase--medium-l--is-icon-button-size-xs__Zdx1R","ButtonBase--medium-l--size-s":"ButtonBase--medium-l--size-s__-d24-","ButtonBase--medium-l--is-icon-button-size-s":"ButtonBase--medium-l--is-icon-button-size-s__aU0C-","ButtonBase--medium-l--size-m":"ButtonBase--medium-l--size-m__sy5Ba","ButtonBase--medium-l--is-icon-button-size-m":"ButtonBase--medium-l--is-icon-button-size-m__i0Q9n","ButtonBase--medium-l--size-l":"ButtonBase--medium-l--size-l__6N-hW","ButtonBase--medium-l--is-icon-button-size-l":"ButtonBase--medium-l--is-icon-button-size-l__d3lcu","ButtonBase--medium-l--size-xl":"ButtonBase--medium-l--size-xl__dcKDz","ButtonBase--medium-l--is-icon-button-size-xl":"ButtonBase--medium-l--is-icon-button-size-xl__Uv8OQ","ButtonBase--medium-l--size-large":"ButtonBase--medium-l--size-large__yo-U7","ButtonBase--medium-l--is-icon-button-size-large":"ButtonBase--medium-l--is-icon-button-size-large__3ORQx","ButtonBase--medium-l--size-medium":"ButtonBase--medium-l--size-medium__N9rbz","ButtonBase--medium-l--is-icon-button-size-medium":"ButtonBase--medium-l--is-icon-button-size-medium__EFk6V","ButtonBase--medium-l--size-small":"ButtonBase--medium-l--size-small__FMlot","ButtonBase--medium-l--is-icon-button-size-small":"ButtonBase--medium-l--is-icon-button-size-small__Ak0TL","ButtonBase--wide-s--size-xs":"ButtonBase--wide-s--size-xs__1P6u0","ButtonBase--wide-s--is-icon-button-size-xs":"ButtonBase--wide-s--is-icon-button-size-xs__wKzds","ButtonBase--wide-s--size-s":"ButtonBase--wide-s--size-s__4tjeJ","ButtonBase--wide-s--is-icon-button-size-s":"ButtonBase--wide-s--is-icon-button-size-s__kCxEP","ButtonBase--wide-s--size-m":"ButtonBase--wide-s--size-m__hbKwx","ButtonBase--wide-s--is-icon-button-size-m":"ButtonBase--wide-s--is-icon-button-size-m__f3Nhn","ButtonBase--wide-s--size-l":"ButtonBase--wide-s--size-l__Wh6gM","ButtonBase--wide-s--is-icon-button-size-l":"ButtonBase--wide-s--is-icon-button-size-l__Hea7S","ButtonBase--wide-s--size-xl":"ButtonBase--wide-s--size-xl__TDm9a","ButtonBase--wide-s--is-icon-button-size-xl":"ButtonBase--wide-s--is-icon-button-size-xl__esIhV","ButtonBase--wide-s--size-large":"ButtonBase--wide-s--size-large__ASjU0","ButtonBase--wide-s--is-icon-button-size-large":"ButtonBase--wide-s--is-icon-button-size-large__hF4qT","ButtonBase--wide-s--size-medium":"ButtonBase--wide-s--size-medium__glo8Q","ButtonBase--wide-s--is-icon-button-size-medium":"ButtonBase--wide-s--is-icon-button-size-medium__W-O0C","ButtonBase--wide-s--size-small":"ButtonBase--wide-s--size-small__b10zZ","ButtonBase--wide-s--is-icon-button-size-small":"ButtonBase--wide-s--is-icon-button-size-small__-E8EY","ButtonBase--wide-l--size-xs":"ButtonBase--wide-l--size-xs__kHS9Z","ButtonBase--wide-l--is-icon-button-size-xs":"ButtonBase--wide-l--is-icon-button-size-xs__QbVcv","ButtonBase--wide-l--size-s":"ButtonBase--wide-l--size-s__CYShW","ButtonBase--wide-l--is-icon-button-size-s":"ButtonBase--wide-l--is-icon-button-size-s__gzfeW","ButtonBase--wide-l--size-m":"ButtonBase--wide-l--size-m__RbcmO","ButtonBase--wide-l--is-icon-button-size-m":"ButtonBase--wide-l--is-icon-button-size-m__qRd80","ButtonBase--wide-l--size-l":"ButtonBase--wide-l--size-l__2TbsS","ButtonBase--wide-l--is-icon-button-size-l":"ButtonBase--wide-l--is-icon-button-size-l__jNZM3","ButtonBase--wide-l--size-xl":"ButtonBase--wide-l--size-xl__dcdbH","ButtonBase--wide-l--is-icon-button-size-xl":"ButtonBase--wide-l--is-icon-button-size-xl__3q1LH","ButtonBase--wide-l--size-large":"ButtonBase--wide-l--size-large__qXddN","ButtonBase--wide-l--is-icon-button-size-large":"ButtonBase--wide-l--is-icon-button-size-large__ceEkB","ButtonBase--wide-l--size-medium":"ButtonBase--wide-l--size-medium__OPxKX","ButtonBase--wide-l--is-icon-button-size-medium":"ButtonBase--wide-l--is-icon-button-size-medium__dAxcc","ButtonBase--wide-l--size-small":"ButtonBase--wide-l--size-small__tqGj-","ButtonBase--wide-l--is-icon-button-size-small":"ButtonBase--wide-l--is-icon-button-size-small__cCSAh","ButtonBase--variant-primary":"ButtonBase--variant-primary__oSRJV","ButtonBase--variant-primary--dsInternalSimulation-hover":"ButtonBase--variant-primary--dsInternalSimulation-hover__D7OCC","ButtonBase--variant-primary--dsInternalSimulation-active":"ButtonBase--variant-primary--dsInternalSimulation-active__V0iju","ButtonBase--variant-secondary":"ButtonBase--variant-secondary__APosz","ButtonBase--variant-secondary--dsInternalSimulation-hover":"ButtonBase--variant-secondary--dsInternalSimulation-hover__5F1t-","ButtonBase--variant-secondary--dsInternalSimulation-active":"ButtonBase--variant-secondary--dsInternalSimulation-active__MwFWM","ButtonBase--variant-tertiary":"ButtonBase--variant-tertiary__oSJoa","ButtonBase--variant-tertiary--dsInternalSimulation-hover":"ButtonBase--variant-tertiary--dsInternalSimulation-hover__juCHk","ButtonBase--variant-tertiary--dsInternalSimulation-active":"ButtonBase--variant-tertiary--dsInternalSimulation-active__CZKvj","ButtonBase--variant-quaternary":"ButtonBase--variant-quaternary__gX2sB","ButtonBase--variant-quaternary--dsInternalSimulation-hover":"ButtonBase--variant-quaternary--dsInternalSimulation-hover__Hzaa5","ButtonBase--variant-quaternary--dsInternalSimulation-active":"ButtonBase--variant-quaternary--dsInternalSimulation-active__cKsaN","ButtonBase--variant-ghost":"ButtonBase--variant-ghost__pR3-X","ButtonBase--variant-ghost--dsInternalSimulation-hover":"ButtonBase--variant-ghost--dsInternalSimulation-hover__O2HFh","ButtonBase--variant-ghost--dsInternalSimulation-active":"ButtonBase--variant-ghost--dsInternalSimulation-active__CvLh8","ButtonBase--variant-ghost--is-selected":"ButtonBase--variant-ghost--is-selected__mS0Le","ButtonBase--variant-plain":"ButtonBase--variant-plain__QQfSn","ButtonBase--variant-plain--dsInternalSimulation-hover":"ButtonBase--variant-plain--dsInternalSimulation-hover__4FVKR","ButtonBase--variant-plain--dsInternalSimulation-active":"ButtonBase--variant-plain--dsInternalSimulation-active__eOt0K","ButtonBase--variant-dangerous":"ButtonBase--variant-dangerous__EQxp-","ButtonBase--variant-dangerous--dsInternalSimulation-hover":"ButtonBase--variant-dangerous--dsInternalSimulation-hover__qplLA","ButtonBase--variant-dangerous--dsInternalSimulation-active":"ButtonBase--variant-dangerous--dsInternalSimulation-active__y0P1N","ButtonBase--variant-critical":"ButtonBase--variant-critical__-t4Qu","ButtonBase--variant-critical--dsInternalSimulation-hover":"ButtonBase--variant-critical--dsInternalSimulation-hover__iyVj2","ButtonBase--variant-critical--dsInternalSimulation-active":"ButtonBase--variant-critical--dsInternalSimulation-active__2RACT","ButtonBase--variant-onColor":"ButtonBase--variant-onColor__Hgon2","ButtonBase--variant-onColor--dsInternalSimulation-hover":"ButtonBase--variant-onColor--dsInternalSimulation-hover__8ca7h","ButtonBase--variant-onColor--dsInternalSimulation-active":"ButtonBase--variant-onColor--dsInternalSimulation-active__OxSu7","ButtonBase--variant-classroom":"ButtonBase--variant-classroom__ZiZjl","ButtonBase--variant-classroom--dsInternalSimulation-hover":"ButtonBase--variant-classroom--dsInternalSimulation-hover__Fy83L","ButtonBase--variant-classroom--dsInternalSimulation-active":"ButtonBase--variant-classroom--dsInternalSimulation-active__88eK7","ButtonBase--variant-classroom--is-selected":"ButtonBase--variant-classroom--is-selected__GHt9-","ButtonBase--variant-primaryB2b":"ButtonBase--variant-primaryB2b__q-vvW","ButtonBase--variant-primaryB2b--dsInternalSimulation-hover":"ButtonBase--variant-primaryB2b--dsInternalSimulation-hover__Nrl78","ButtonBase--variant-primaryB2b--dsInternalSimulation-active":"ButtonBase--variant-primaryB2b--dsInternalSimulation-active__IGZDa","ButtonBase--variant-primaryTutor":"ButtonBase--variant-primaryTutor__B6BAn","ButtonBase--variant-primaryTutor--dsInternalSimulation-hover":"ButtonBase--variant-primaryTutor--dsInternalSimulation-hover__HXGA0","ButtonBase--variant-primaryTutor--dsInternalSimulation-active":"ButtonBase--variant-primaryTutor--dsInternalSimulation-active__FCV-3","ButtonBase--variant-inverted":"ButtonBase--variant-inverted__9yknJ","ButtonBase--variant-inverted--dsInternalSimulation-hover":"ButtonBase--variant-inverted--dsInternalSimulation-hover__oX9GA","ButtonBase--variant-inverted--dsInternalSimulation-active":"ButtonBase--variant-inverted--dsInternalSimulation-active__-HnsQ","ButtonBase--variant-newFeature":"ButtonBase--variant-newFeature__8uk2D","ButtonBase--variant-newFeature--dsInternalSimulation-hover":"ButtonBase--variant-newFeature--dsInternalSimulation-hover__plXXr","ButtonBase--variant-newFeature--dsInternalSimulation-active":"ButtonBase--variant-newFeature--dsInternalSimulation-active__yDfE1","ButtonBase--variant-ai":"ButtonBase--variant-ai__iq9tW","ButtonBase--variant-ai--dsInternalSimulation-hover":"ButtonBase--variant-ai--dsInternalSimulation-hover__78mV7","ButtonBase--variant-ai--dsInternalSimulation-active":"ButtonBase--variant-ai--dsInternalSimulation-active__48Tn0","ButtonBase--no-wrap":"ButtonBase--no-wrap__8TMhQ"},T=(t,e)=>{typeof t=="function"?t(e):t&&(t.current=e)},st=(t,e)=>r.useCallback(a=>{T(t,a),T(e,a)},[t,e]),w="ButtonBase",ot=t=>Object.prototype.hasOwnProperty.call(t,"selected"),c=({children:t,busy:e})=>{const a=[...C(v,w,["content"])],o=[...C(v,w,["busy"])];return n.jsxs(n.Fragment,{children:[n.jsx("span",{className:a.join(" "),children:t}),e&&n.jsx("span",{className:o.join(" "),children:n.jsx(G,{})})]})},q=r.forwardRef(function(e,a){const{variant:o=J,size:z=Y,fullWidth:V=!1,wrap:R=!1,href:j,download:k,opensInNewTab:F,nofollow:N,submitsForm:E,assistiveText:D,onClick:d,disabled:l,busy:i,isIconButton:b,as:h,url:O,a11yLabel:A,dataset:K,children:m,dsInternalSimulation:p,preplyDsComponent:H,...L}=e,{selected:M}=ot(e)?e:{selected:void 0},X=$(),f=r.useRef(null),y=st(f,a),P=u=>{(l||i)&&u.preventDefault(),d==null||d(u)},U=u=>{var g;const I=at(u.key);(I===" "||I==="Enter")&&(u.preventDefault(),(g=f.current)==null||g.click())},Z=p==="focus"?s("dsInternalSimulation-focus",void 0,!0):B(`variant-${o}--dsInternalSimulation`,p),W=tt(v,w,[Z,B("variant",o),B("size",z),b?B("is-icon-button-size",z):[],s(void 0,"no-wrap",R),s("width-full","width-auto",V),s("is-busy",void 0,i),s("is-icon-button",void 0,b),s(`variant-${o}--is-selected`,void 0,M)]),S={...Q(L),...et(K,{preplyDsComponent:H}),className:W.join(" "),"aria-label":D||A,onClick:P,disabled:l,"aria-disabled":l||i?!0:void 0,ref:y},_=j||O,x={...S,download:k,ref:y,role:"button",tabIndex:l?-1:0,href:_,onKeyDown:U};return _?n.jsx("a",{...x,...nt(X,_,F,N),children:c({children:m,busy:i})}):h?r.cloneElement(h,{...x},c({children:m,busy:i})):n.jsx("button",{...S,type:E?"submit":"button",children:c({children:m,busy:i})})});try{q.displayName="ButtonBase",q.__docgenInfo={description:"",displayName:"ButtonBase",props:{variant:{defaultValue:null,description:"",name:"variant",required:!1,type:{name:"enum",value:[{value:'"primary"'},{value:'"secondary"'},{value:'"tertiary"'},{value:'"quaternary"'},{value:'"ghost"'},{value:'"plain"'},{value:'"dangerous"'},{value:'"critical"'},{value:'"onColor"'},{value:'"classroom"'},{value:'"primaryB2b"'},{value:'"primaryTutor"'},{value:'"inverted"'},{value:'"newFeature"'},{value:'"ai"'}]}},size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"xs"'},{value:'"s"'},{value:'"m"'},{value:'"l"'},{value:'"xl"'},{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<Element>"}]}},disabled:{defaultValue:null,description:"",name:"disabled",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"}]}},isIconButton:{defaultValue:null,description:"",name:"isIconButton",required:!0,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"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},preplyDsComponent:{defaultValue:null,description:"@see getDatasetProps",name:"preplyDsComponent",required:!0,type:{name:"string"}},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"}]}},selected:{defaultValue:null,description:"",name:"selected",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}}}}}catch{}export{q as B};

package/dist/assets/ButtonBase-C0CIM4Jh.css

@@ -0,0 +1 @@
+.button-width--width-full__nxjVK{width:100%}.button-width--width-auto__CngVf{width:auto}@media (min-width: 400px){.button-width--narrow-l--width-full__rZc8T{width:100%}.button-width--narrow-l--width-auto__Fs14X{width:auto}}@media (min-width: 700px){.button-width--medium-s--width-full__lb8XX{width:100%}.button-width--medium-s--width-auto__gtajp{width:auto}}@media (min-width: 880px){.button-width--medium-l--width-full__qOGDr{width:100%}.button-width--medium-l--width-auto__vFKgm{width:auto}}@media (min-width: 1200px){.button-width--wide-s--width-full__5nhxD{width:100%}.button-width--wide-s--width-auto__J4Ht3{width:auto}}@media (min-width: 1900px){.button-width--wide-l--width-full__Rsexc{width:100%}.button-width--wide-l--width-auto__k6Ctk{width:auto}}.ButtonBase__0qXGj{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-size:var(--8d63e4);line-height:var(--d4313c);color:var(--aface6);position:relative;display:inline-flex;align-items:center;justify-content:center;font-weight:var(--d61910);text-align:center;text-decoration:none;background-color:transparent;border-radius:var(--8d5131);border-width:var(--0b1b71);border-style:solid;border-color:transparent;-webkit-user-select:none;user-select:none;cursor:pointer;height:fit-content;-webkit-tap-highlight-color:transparent;outline:none;-ms-touch-action:manipulation;touch-action:manipulation}.ButtonBase--content__ZEhK4{display:inline-flex;align-items:center;gap:var(--0aee7b);justify-content:center;vertical-align:baseline}.ButtonBase--is-icon-button__CDG-9 .ButtonBase--content__ZEhK4 svg{width:var(--f02c4e);height:var(--f02c4e)}.ButtonBase--is-icon-button__CDG-9 .ButtonBase--content__ZEhK4 svg path{fill:currentColor}.ButtonBase--busy__M2Cgo{position:absolute;top:0;left:0;width:100%;height:100%;display:inline-flex;align-items:center;justify-content:center}.ButtonBase__0qXGj[disabled],.ButtonBase__0qXGj[disabled]:hover{cursor:not-allowed;color:var(--a8b89c);background-color:var(--04daeb);border-color:var(--e05289)}.ButtonBase__0qXGj:focus-visible,.ButtonBase--dsInternalSimulation-focus__xhIA9{outline-style:solid;outline-color:var(--603ec6);outline-width:var(--99d31f);outline-offset:var(--c0b12c)}.ButtonBase--is-busy__FT7vR{cursor:default;pointer-events:none}.ButtonBase--is-busy__FT7vR .ButtonBase--content__ZEhK4{visibility:hidden}.ButtonBase--width-full__0ENoK{width:100%}.ButtonBase--width-auto__vwDOv{width:auto}@media (min-width: 400px){.ButtonBase--narrow-l--width-full__-H9pn{width:100%}.ButtonBase--narrow-l--width-auto__2i3td{width:auto}}@media (min-width: 700px){.ButtonBase--medium-s--width-full__sNHbR{width:100%}.ButtonBase--medium-s--width-auto__6T6zO{width:auto}}@media (min-width: 880px){.ButtonBase--medium-l--width-full__FTcYM{width:100%}.ButtonBase--medium-l--width-auto__KPNbM{width:auto}}@media (min-width: 1200px){.ButtonBase--wide-s--width-full__YgEMT{width:100%}.ButtonBase--wide-s--width-auto__nM-ia{width:auto}}@media (min-width: 1900px){.ButtonBase--wide-l--width-full__CFPdD{width:100%}.ButtonBase--wide-l--width-auto__6gGyZ{width:auto}}.ButtonBase--size-xs__-H91X{min-height:var(--50cc65);padding-top:calc((var(--50cc65) - var(--d4313c) * var(--357dd0)) / 2 - var(--0b1b71));padding-bottom:calc((var(--50cc65) - var(--d4313c) * var(--357dd0)) / 2 - var(--0b1b71));padding-left:var(--29b033);padding-right:var(--29b033);font-size:var(--357dd0);letter-spacing:var(--027f88)}.ButtonBase--is-icon-button-size-xs__EPZ9W{width:var(--50cc65);height:var(--50cc65);padding:0}.ButtonBase--size-s__lwe2R{min-height:var(--2f2e00);padding-top:calc((var(--2f2e00) - var(--d4313c) * var(--b47a67)) / 2 - var(--0b1b71));padding-bottom:calc((var(--2f2e00) - var(--d4313c) * var(--b47a67)) / 2 - var(--0b1b71));padding-left:var(--65766b);padding-right:var(--65766b);font-size:var(--b47a67);letter-spacing:var(--fc5c61)}.ButtonBase--is-icon-button-size-s__rDjsc{width:var(--2f2e00);height:var(--2f2e00);padding:0}.ButtonBase--size-m__VomvS{min-height:var(--bcfcbc);padding-top:calc((var(--bcfcbc) - var(--d4313c) * var(--89a358)) / 2 - var(--0b1b71));padding-bottom:calc((var(--bcfcbc) - var(--d4313c) * var(--89a358)) / 2 - var(--0b1b71));padding-left:var(--0f2d7e);padding-right:var(--0f2d7e);font-size:var(--89a358);letter-spacing:var(--2e1239)}.ButtonBase--is-icon-button-size-m__XNsyO{width:var(--bcfcbc);height:var(--bcfcbc);padding:0}.ButtonBase--size-l__zpj7k{min-height:var(--26156f);padding-top:calc((var(--26156f) - var(--d4313c) * var(--a899be)) / 2 - var(--0b1b71));padding-bottom:calc((var(--26156f) - var(--d4313c) * var(--a899be)) / 2 - var(--0b1b71));padding-left:var(--b1c76a);padding-right:var(--b1c76a);font-size:var(--a899be);letter-spacing:var(--c04d5d)}.ButtonBase--is-icon-button-size-l__ZW9LI{width:var(--26156f);height:var(--26156f);padding:0}.ButtonBase--size-xl__Xpxy6{min-height:var(--d6bfc9);padding-top:calc((var(--d6bfc9) - var(--d4313c) * var(--f7be07)) / 2 - var(--0b1b71));padding-bottom:calc((var(--d6bfc9) - var(--d4313c) * var(--f7be07)) / 2 - var(--0b1b71));padding-left:var(--88eefe);padding-right:var(--88eefe);font-size:var(--f7be07);letter-spacing:var(--a34be4)}.ButtonBase--is-icon-button-size-xl__wMWhi{width:var(--d6bfc9);height:var(--d6bfc9);padding:0}.ButtonBase--size-large__-OxgW{min-height:var(--3d8452);padding-top:calc((var(--3d8452) - var(--d4313c) * var(--56d354)) / 2 - var(--0b1b71));padding-bottom:calc((var(--3d8452) - var(--d4313c) * var(--56d354)) / 2 - var(--0b1b71));padding-left:var(--79f043);padding-right:var(--79f043);font-size:var(--56d354);letter-spacing:var(--dc9bea)}.ButtonBase--is-icon-button-size-large__bebMj{width:var(--3d8452);height:var(--3d8452);padding:0}.ButtonBase--size-medium__YgQDT{min-height:var(--c82a41);padding-top:calc((var(--c82a41) - var(--d4313c) * var(--c84e20)) / 2 - var(--0b1b71));padding-bottom:calc((var(--c82a41) - var(--d4313c) * var(--c84e20)) / 2 - var(--0b1b71));padding-left:var(--aebd97);padding-right:var(--aebd97);font-size:var(--c84e20);letter-spacing:var(--ad1bd2)}.ButtonBase--is-icon-button-size-medium__AC6Cq{width:var(--c82a41);height:var(--c82a41);padding:0}.ButtonBase--size-small__UMBKe{min-height:var(--5eca09);padding-top:calc((var(--5eca09) - var(--d4313c) * var(--f20194)) / 2 - var(--0b1b71));padding-bottom:calc((var(--5eca09) - var(--d4313c) * var(--f20194)) / 2 - var(--0b1b71));padding-left:var(--d17b90);padding-right:var(--d17b90);font-size:var(--f20194);letter-spacing:var(--9663af)}.ButtonBase--is-icon-button-size-small__hZmvi{width:var(--5eca09);height:var(--5eca09);padding:0}@media (min-width: 400px){.ButtonBase--narrow-l--size-xs__GRcw7{min-height:var(--50cc65);padding-top:calc((var(--50cc65) - var(--d4313c) * var(--357dd0)) / 2 - var(--0b1b71));padding-bottom:calc((var(--50cc65) - var(--d4313c) * var(--357dd0)) / 2 - var(--0b1b71));padding-left:var(--29b033);padding-right:var(--29b033);font-size:var(--357dd0);letter-spacing:var(--027f88)}.ButtonBase--narrow-l--is-icon-button-size-xs__GLth2{width:var(--50cc65);height:var(--50cc65);padding:0}.ButtonBase--narrow-l--size-s__pnGJC{min-height:var(--2f2e00);padding-top:calc((var(--2f2e00) - var(--d4313c) * var(--b47a67)) / 2 - var(--0b1b71));padding-bottom:calc((var(--2f2e00) - var(--d4313c) * var(--b47a67)) / 2 - var(--0b1b71));padding-left:var(--65766b);padding-right:var(--65766b);font-size:var(--b47a67);letter-spacing:var(--fc5c61)}.ButtonBase--narrow-l--is-icon-button-size-s__-l6X-{width:var(--2f2e00);height:var(--2f2e00);padding:0}.ButtonBase--narrow-l--size-m__D-uV5{min-height:var(--bcfcbc);padding-top:calc((var(--bcfcbc) - var(--d4313c) * var(--89a358)) / 2 - var(--0b1b71));padding-bottom:calc((var(--bcfcbc) - var(--d4313c) * var(--89a358)) / 2 - var(--0b1b71));padding-left:var(--0f2d7e);padding-right:var(--0f2d7e);font-size:var(--89a358);letter-spacing:var(--2e1239)}.ButtonBase--narrow-l--is-icon-button-size-m__OXWKs{width:var(--bcfcbc);height:var(--bcfcbc);padding:0}.ButtonBase--narrow-l--size-l__TgiXj{min-height:var(--26156f);padding-top:calc((var(--26156f) - var(--d4313c) * var(--a899be)) / 2 - var(--0b1b71));padding-bottom:calc((var(--26156f) - var(--d4313c) * var(--a899be)) / 2 - var(--0b1b71));padding-left:var(--b1c76a);padding-right:var(--b1c76a);font-size:var(--a899be);letter-spacing:var(--c04d5d)}.ButtonBase--narrow-l--is-icon-button-size-l__JnU0h{width:var(--26156f);height:var(--26156f);padding:0}.ButtonBase--narrow-l--size-xl__LYDGc{min-height:var(--d6bfc9);padding-top:calc((var(--d6bfc9) - var(--d4313c) * var(--f7be07)) / 2 - var(--0b1b71));padding-bottom:calc((var(--d6bfc9) - var(--d4313c) * var(--f7be07)) / 2 - var(--0b1b71));padding-left:var(--88eefe);padding-right:var(--88eefe);font-size:var(--f7be07);letter-spacing:var(--a34be4)}.ButtonBase--narrow-l--is-icon-button-size-xl__2s9LK{width:var(--d6bfc9);height:var(--d6bfc9);padding:0}.ButtonBase--narrow-l--size-large__jbaAB{min-height:var(--3d8452);padding-top:calc((var(--3d8452) - var(--d4313c) * var(--56d354)) / 2 - var(--0b1b71));padding-bottom:calc((var(--3d8452) - var(--d4313c) * var(--56d354)) / 2 - var(--0b1b71));padding-left:var(--79f043);padding-right:var(--79f043);font-size:var(--56d354);letter-spacing:var(--dc9bea)}.ButtonBase--narrow-l--is-icon-button-size-large__UIpIh{width:var(--3d8452);height:var(--3d8452);padding:0}.ButtonBase--narrow-l--size-medium__62t1K{min-height:var(--c82a41);padding-top:calc((var(--c82a41) - var(--d4313c) * var(--c84e20)) / 2 - var(--0b1b71));padding-bottom:calc((var(--c82a41) - var(--d4313c) * var(--c84e20)) / 2 - var(--0b1b71));padding-left:var(--aebd97);padding-right:var(--aebd97);font-size:var(--c84e20);letter-spacing:var(--ad1bd2)}.ButtonBase--narrow-l--is-icon-button-size-medium__r2nuk{width:var(--c82a41);height:var(--c82a41);padding:0}.ButtonBase--narrow-l--size-small__8uFFR{min-height:var(--5eca09);padding-top:calc((var(--5eca09) - var(--d4313c) * var(--f20194)) / 2 - var(--0b1b71));padding-bottom:calc((var(--5eca09) - var(--d4313c) * var(--f20194)) / 2 - var(--0b1b71));padding-left:var(--d17b90);padding-right:var(--d17b90);font-size:var(--f20194);letter-spacing:var(--9663af)}.ButtonBase--narrow-l--is-icon-button-size-small__CkKxU{width:var(--5eca09);height:var(--5eca09);padding:0}}@media (min-width: 700px){.ButtonBase--medium-s--size-xs__u7Kp0{min-height:var(--50cc65);padding-top:calc((var(--50cc65) - var(--d4313c) * var(--357dd0)) / 2 - var(--0b1b71));padding-bottom:calc((var(--50cc65) - var(--d4313c) * var(--357dd0)) / 2 - var(--0b1b71));padding-left:var(--29b033);padding-right:var(--29b033);font-size:var(--357dd0);letter-spacing:var(--027f88)}.ButtonBase--medium-s--is-icon-button-size-xs__cOdRd{width:var(--50cc65);height:var(--50cc65);padding:0}.ButtonBase--medium-s--size-s__uRksZ{min-height:var(--2f2e00);padding-top:calc((var(--2f2e00) - var(--d4313c) * var(--b47a67)) / 2 - var(--0b1b71));padding-bottom:calc((var(--2f2e00) - var(--d4313c) * var(--b47a67)) / 2 - var(--0b1b71));padding-left:var(--65766b);padding-right:var(--65766b);font-size:var(--b47a67);letter-spacing:var(--fc5c61)}.ButtonBase--medium-s--is-icon-button-size-s__zRxOl{width:var(--2f2e00);height:var(--2f2e00);padding:0}.ButtonBase--medium-s--size-m__duOck{min-height:var(--bcfcbc);padding-top:calc((var(--bcfcbc) - var(--d4313c) * var(--89a358)) / 2 - var(--0b1b71));padding-bottom:calc((var(--bcfcbc) - var(--d4313c) * var(--89a358)) / 2 - var(--0b1b71));padding-left:var(--0f2d7e);padding-right:var(--0f2d7e);font-size:var(--89a358);letter-spacing:var(--2e1239)}.ButtonBase--medium-s--is-icon-button-size-m__fuXOy{width:var(--bcfcbc);height:var(--bcfcbc);padding:0}.ButtonBase--medium-s--size-l__Q-pD5{min-height:var(--26156f);padding-top:calc((var(--26156f) - var(--d4313c) * var(--a899be)) / 2 - var(--0b1b71));padding-bottom:calc((var(--26156f) - var(--d4313c) * var(--a899be)) / 2 - var(--0b1b71));padding-left:var(--b1c76a);padding-right:var(--b1c76a);font-size:var(--a899be);letter-spacing:var(--c04d5d)}.ButtonBase--medium-s--is-icon-button-size-l__qxrPe{width:var(--26156f);height:var(--26156f);padding:0}.ButtonBase--medium-s--size-xl__YA9fY{min-height:var(--d6bfc9);padding-top:calc((var(--d6bfc9) - var(--d4313c) * var(--f7be07)) / 2 - var(--0b1b71));padding-bottom:calc((var(--d6bfc9) - var(--d4313c) * var(--f7be07)) / 2 - var(--0b1b71));padding-left:var(--88eefe);padding-right:var(--88eefe);font-size:var(--f7be07);letter-spacing:var(--a34be4)}.ButtonBase--medium-s--is-icon-button-size-xl__MsrBO{width:var(--d6bfc9);height:var(--d6bfc9);padding:0}.ButtonBase--medium-s--size-large__XpFoi{min-height:var(--3d8452);padding-top:calc((var(--3d8452) - var(--d4313c) * var(--56d354)) / 2 - var(--0b1b71));padding-bottom:calc((var(--3d8452) - var(--d4313c) * var(--56d354)) / 2 - var(--0b1b71));padding-left:var(--79f043);padding-right:var(--79f043);font-size:var(--56d354);letter-spacing:var(--dc9bea)}.ButtonBase--medium-s--is-icon-button-size-large__-IvSU{width:var(--3d8452);height:var(--3d8452);padding:0}.ButtonBase--medium-s--size-medium__ZA4JC{min-height:var(--c82a41);padding-top:calc((var(--c82a41) - var(--d4313c) * var(--c84e20)) / 2 - var(--0b1b71));padding-bottom:calc((var(--c82a41) - var(--d4313c) * var(--c84e20)) / 2 - var(--0b1b71));padding-left:var(--aebd97);padding-right:var(--aebd97);font-size:var(--c84e20);letter-spacing:var(--ad1bd2)}.ButtonBase--medium-s--is-icon-button-size-medium__946RE{width:var(--c82a41);height:var(--c82a41);padding:0}.ButtonBase--medium-s--size-small__nNIDt{min-height:var(--5eca09);padding-top:calc((var(--5eca09) - var(--d4313c) * var(--f20194)) / 2 - var(--0b1b71));padding-bottom:calc((var(--5eca09) - var(--d4313c) * var(--f20194)) / 2 - var(--0b1b71));padding-left:var(--d17b90);padding-right:var(--d17b90);font-size:var(--f20194);letter-spacing:var(--9663af)}.ButtonBase--medium-s--is-icon-button-size-small__aAjgr{width:var(--5eca09);height:var(--5eca09);padding:0}}@media (min-width: 880px){.ButtonBase--medium-l--size-xs__F1Khc{min-height:var(--50cc65);padding-top:calc((var(--50cc65) - var(--d4313c) * var(--357dd0)) / 2 - var(--0b1b71));padding-bottom:calc((var(--50cc65) - var(--d4313c) * var(--357dd0)) / 2 - var(--0b1b71));padding-left:var(--29b033);padding-right:var(--29b033);font-size:var(--357dd0);letter-spacing:var(--027f88)}.ButtonBase--medium-l--is-icon-button-size-xs__Zdx1R{width:var(--50cc65);height:var(--50cc65);padding:0}.ButtonBase--medium-l--size-s__-d24-{min-height:var(--2f2e00);padding-top:calc((var(--2f2e00) - var(--d4313c) * var(--b47a67)) / 2 - var(--0b1b71));padding-bottom:calc((var(--2f2e00) - var(--d4313c) * var(--b47a67)) / 2 - var(--0b1b71));padding-left:var(--65766b);padding-right:var(--65766b);font-size:var(--b47a67);letter-spacing:var(--fc5c61)}.ButtonBase--medium-l--is-icon-button-size-s__aU0C-{width:var(--2f2e00);height:var(--2f2e00);padding:0}.ButtonBase--medium-l--size-m__sy5Ba{min-height:var(--bcfcbc);padding-top:calc((var(--bcfcbc) - var(--d4313c) * var(--89a358)) / 2 - var(--0b1b71));padding-bottom:calc((var(--bcfcbc) - var(--d4313c) * var(--89a358)) / 2 - var(--0b1b71));padding-left:var(--0f2d7e);padding-right:var(--0f2d7e);font-size:var(--89a358);letter-spacing:var(--2e1239)}.ButtonBase--medium-l--is-icon-button-size-m__i0Q9n{width:var(--bcfcbc);height:var(--bcfcbc);padding:0}.ButtonBase--medium-l--size-l__6N-hW{min-height:var(--26156f);padding-top:calc((var(--26156f) - var(--d4313c) * var(--a899be)) / 2 - var(--0b1b71));padding-bottom:calc((var(--26156f) - var(--d4313c) * var(--a899be)) / 2 - var(--0b1b71));padding-left:var(--b1c76a);padding-right:var(--b1c76a);font-size:var(--a899be);letter-spacing:var(--c04d5d)}.ButtonBase--medium-l--is-icon-button-size-l__d3lcu{width:var(--26156f);height:var(--26156f);padding:0}.ButtonBase--medium-l--size-xl__dcKDz{min-height:var(--d6bfc9);padding-top:calc((var(--d6bfc9) - var(--d4313c) * var(--f7be07)) / 2 - var(--0b1b71));padding-bottom:calc((var(--d6bfc9) - var(--d4313c) * var(--f7be07)) / 2 - var(--0b1b71));padding-left:var(--88eefe);padding-right:var(--88eefe);font-size:var(--f7be07);letter-spacing:var(--a34be4)}.ButtonBase--medium-l--is-icon-button-size-xl__Uv8OQ{width:var(--d6bfc9);height:var(--d6bfc9);padding:0}.ButtonBase--medium-l--size-large__yo-U7{min-height:var(--3d8452);padding-top:calc((var(--3d8452) - var(--d4313c) * var(--56d354)) / 2 - var(--0b1b71));padding-bottom:calc((var(--3d8452) - var(--d4313c) * var(--56d354)) / 2 - var(--0b1b71));padding-left:var(--79f043);padding-right:var(--79f043);font-size:var(--56d354);letter-spacing:var(--dc9bea)}.ButtonBase--medium-l--is-icon-button-size-large__3ORQx{width:var(--3d8452);height:var(--3d8452);padding:0}.ButtonBase--medium-l--size-medium__N9rbz{min-height:var(--c82a41);padding-top:calc((var(--c82a41) - var(--d4313c) * var(--c84e20)) / 2 - var(--0b1b71));padding-bottom:calc((var(--c82a41) - var(--d4313c) * var(--c84e20)) / 2 - var(--0b1b71));padding-left:var(--aebd97);padding-right:var(--aebd97);font-size:var(--c84e20);letter-spacing:var(--ad1bd2)}.ButtonBase--medium-l--is-icon-button-size-medium__EFk6V{width:var(--c82a41);height:var(--c82a41);padding:0}.ButtonBase--medium-l--size-small__FMlot{min-height:var(--5eca09);padding-top:calc((var(--5eca09) - var(--d4313c) * var(--f20194)) / 2 - var(--0b1b71));padding-bottom:calc((var(--5eca09) - var(--d4313c) * var(--f20194)) / 2 - var(--0b1b71));padding-left:var(--d17b90);padding-right:var(--d17b90);font-size:var(--f20194);letter-spacing:var(--9663af)}.ButtonBase--medium-l--is-icon-button-size-small__Ak0TL{width:var(--5eca09);height:var(--5eca09);padding:0}}@media (min-width: 1200px){.ButtonBase--wide-s--size-xs__1P6u0{min-height:var(--50cc65);padding-top:calc((var(--50cc65) - var(--d4313c) * var(--357dd0)) / 2 - var(--0b1b71));padding-bottom:calc((var(--50cc65) - var(--d4313c) * var(--357dd0)) / 2 - var(--0b1b71));padding-left:var(--29b033);padding-right:var(--29b033);font-size:var(--357dd0);letter-spacing:var(--027f88)}.ButtonBase--wide-s--is-icon-button-size-xs__wKzds{width:var(--50cc65);height:var(--50cc65);padding:0}.ButtonBase--wide-s--size-s__4tjeJ{min-height:var(--2f2e00);padding-top:calc((var(--2f2e00) - var(--d4313c) * var(--b47a67)) / 2 - var(--0b1b71));padding-bottom:calc((var(--2f2e00) - var(--d4313c) * var(--b47a67)) / 2 - var(--0b1b71));padding-left:var(--65766b);padding-right:var(--65766b);font-size:var(--b47a67);letter-spacing:var(--fc5c61)}.ButtonBase--wide-s--is-icon-button-size-s__kCxEP{width:var(--2f2e00);height:var(--2f2e00);padding:0}.ButtonBase--wide-s--size-m__hbKwx{min-height:var(--bcfcbc);padding-top:calc((var(--bcfcbc) - var(--d4313c) * var(--89a358)) / 2 - var(--0b1b71));padding-bottom:calc((var(--bcfcbc) - var(--d4313c) * var(--89a358)) / 2 - var(--0b1b71));padding-left:var(--0f2d7e);padding-right:var(--0f2d7e);font-size:var(--89a358);letter-spacing:var(--2e1239)}.ButtonBase--wide-s--is-icon-button-size-m__f3Nhn{width:var(--bcfcbc);height:var(--bcfcbc);padding:0}.ButtonBase--wide-s--size-l__Wh6gM{min-height:var(--26156f);padding-top:calc((var(--26156f) - var(--d4313c) * var(--a899be)) / 2 - var(--0b1b71));padding-bottom:calc((var(--26156f) - var(--d4313c) * var(--a899be)) / 2 - var(--0b1b71));padding-left:var(--b1c76a);padding-right:var(--b1c76a);font-size:var(--a899be);letter-spacing:var(--c04d5d)}.ButtonBase--wide-s--is-icon-button-size-l__Hea7S{width:var(--26156f);height:var(--26156f);padding:0}.ButtonBase--wide-s--size-xl__TDm9a{min-height:var(--d6bfc9);padding-top:calc((var(--d6bfc9) - var(--d4313c) * var(--f7be07)) / 2 - var(--0b1b71));padding-bottom:calc((var(--d6bfc9) - var(--d4313c) * var(--f7be07)) / 2 - var(--0b1b71));padding-left:var(--88eefe);padding-right:var(--88eefe);font-size:var(--f7be07);letter-spacing:var(--a34be4)}.ButtonBase--wide-s--is-icon-button-size-xl__esIhV{width:var(--d6bfc9);height:var(--d6bfc9);padding:0}.ButtonBase--wide-s--size-large__ASjU0{min-height:var(--3d8452);padding-top:calc((var(--3d8452) - var(--d4313c) * var(--56d354)) / 2 - var(--0b1b71));padding-bottom:calc((var(--3d8452) - var(--d4313c) * var(--56d354)) / 2 - var(--0b1b71));padding-left:var(--79f043);padding-right:var(--79f043);font-size:var(--56d354);letter-spacing:var(--dc9bea)}.ButtonBase--wide-s--is-icon-button-size-large__hF4qT{width:var(--3d8452);height:var(--3d8452);padding:0}.ButtonBase--wide-s--size-medium__glo8Q{min-height:var(--c82a41);padding-top:calc((var(--c82a41) - var(--d4313c) * var(--c84e20)) / 2 - var(--0b1b71));padding-bottom:calc((var(--c82a41) - var(--d4313c) * var(--c84e20)) / 2 - var(--0b1b71));padding-left:var(--aebd97);padding-right:var(--aebd97);font-size:var(--c84e20);letter-spacing:var(--ad1bd2)}.ButtonBase--wide-s--is-icon-button-size-medium__W-O0C{width:var(--c82a41);height:var(--c82a41);padding:0}.ButtonBase--wide-s--size-small__b10zZ{min-height:var(--5eca09);padding-top:calc((var(--5eca09) - var(--d4313c) * var(--f20194)) / 2 - var(--0b1b71));padding-bottom:calc((var(--5eca09) - var(--d4313c) * var(--f20194)) / 2 - var(--0b1b71));padding-left:var(--d17b90);padding-right:var(--d17b90);font-size:var(--f20194);letter-spacing:var(--9663af)}.ButtonBase--wide-s--is-icon-button-size-small__-E8EY{width:var(--5eca09);height:var(--5eca09);padding:0}}@media (min-width: 1900px){.ButtonBase--wide-l--size-xs__kHS9Z{min-height:var(--50cc65);padding-top:calc((var(--50cc65) - var(--d4313c) * var(--357dd0)) / 2 - var(--0b1b71));padding-bottom:calc((var(--50cc65) - var(--d4313c) * var(--357dd0)) / 2 - var(--0b1b71));padding-left:var(--29b033);padding-right:var(--29b033);font-size:var(--357dd0);letter-spacing:var(--027f88)}.ButtonBase--wide-l--is-icon-button-size-xs__QbVcv{width:var(--50cc65);height:var(--50cc65);padding:0}.ButtonBase--wide-l--size-s__CYShW{min-height:var(--2f2e00);padding-top:calc((var(--2f2e00) - var(--d4313c) * var(--b47a67)) / 2 - var(--0b1b71));padding-bottom:calc((var(--2f2e00) - var(--d4313c) * var(--b47a67)) / 2 - var(--0b1b71));padding-left:var(--65766b);padding-right:var(--65766b);font-size:var(--b47a67);letter-spacing:var(--fc5c61)}.ButtonBase--wide-l--is-icon-button-size-s__gzfeW{width:var(--2f2e00);height:var(--2f2e00);padding:0}.ButtonBase--wide-l--size-m__RbcmO{min-height:var(--bcfcbc);padding-top:calc((var(--bcfcbc) - var(--d4313c) * var(--89a358)) / 2 - var(--0b1b71));padding-bottom:calc((var(--bcfcbc) - var(--d4313c) * var(--89a358)) / 2 - var(--0b1b71));padding-left:var(--0f2d7e);padding-right:var(--0f2d7e);font-size:var(--89a358);letter-spacing:var(--2e1239)}.ButtonBase--wide-l--is-icon-button-size-m__qRd80{width:var(--bcfcbc);height:var(--bcfcbc);padding:0}.ButtonBase--wide-l--size-l__2TbsS{min-height:var(--26156f);padding-top:calc((var(--26156f) - var(--d4313c) * var(--a899be)) / 2 - var(--0b1b71));padding-bottom:calc((var(--26156f) - var(--d4313c) * var(--a899be)) / 2 - var(--0b1b71));padding-left:var(--b1c76a);padding-right:var(--b1c76a);font-size:var(--a899be);letter-spacing:var(--c04d5d)}.ButtonBase--wide-l--is-icon-button-size-l__jNZM3{width:var(--26156f);height:var(--26156f);padding:0}.ButtonBase--wide-l--size-xl__dcdbH{min-height:var(--d6bfc9);padding-top:calc((var(--d6bfc9) - var(--d4313c) * var(--f7be07)) / 2 - var(--0b1b71));padding-bottom:calc((var(--d6bfc9) - var(--d4313c) * var(--f7be07)) / 2 - var(--0b1b71));padding-left:var(--88eefe);padding-right:var(--88eefe);font-size:var(--f7be07);letter-spacing:var(--a34be4)}.ButtonBase--wide-l--is-icon-button-size-xl__3q1LH{width:var(--d6bfc9);height:var(--d6bfc9);padding:0}.ButtonBase--wide-l--size-large__qXddN{min-height:var(--3d8452);padding-top:calc((var(--3d8452) - var(--d4313c) * var(--56d354)) / 2 - var(--0b1b71));padding-bottom:calc((var(--3d8452) - var(--d4313c) * var(--56d354)) / 2 - var(--0b1b71));padding-left:var(--79f043);padding-right:var(--79f043);font-size:var(--56d354);letter-spacing:var(--dc9bea)}.ButtonBase--wide-l--is-icon-button-size-large__ceEkB{width:var(--3d8452);height:var(--3d8452);padding:0}.ButtonBase--wide-l--size-medium__OPxKX{min-height:var(--c82a41);padding-top:calc((var(--c82a41) - var(--d4313c) * var(--c84e20)) / 2 - var(--0b1b71));padding-bottom:calc((var(--c82a41) - var(--d4313c) * var(--c84e20)) / 2 - var(--0b1b71));padding-left:var(--aebd97);padding-right:var(--aebd97);font-size:var(--c84e20);letter-spacing:var(--ad1bd2)}.ButtonBase--wide-l--is-icon-button-size-medium__dAxcc{width:var(--c82a41);height:var(--c82a41);padding:0}.ButtonBase--wide-l--size-small__tqGj-{min-height:var(--5eca09);padding-top:calc((var(--5eca09) - var(--d4313c) * var(--f20194)) / 2 - var(--0b1b71));padding-bottom:calc((var(--5eca09) - var(--d4313c) * var(--f20194)) / 2 - var(--0b1b71));padding-left:var(--d17b90);padding-right:var(--d17b90);font-size:var(--f20194);letter-spacing:var(--9663af)}.ButtonBase--wide-l--is-icon-button-size-small__cCSAh{width:var(--5eca09);height:var(--5eca09);padding:0}}.ButtonBase--variant-primary__oSRJV{color:var(--d2baa6);background-color:var(--508b34);border-color:var(--44bfe9);text-decoration:var(--74cfa2)}.ButtonBase--variant-primary--dsInternalSimulation-hover__D7OCC{color:var(--df6151);background-color:var(--902b50)}@media (hover: hover) and (pointer: fine){.ButtonBase--variant-primary__oSRJV:hover{color:var(--df6151);background-color:var(--902b50)}}.ButtonBase--variant-primary__oSRJV[disabled],.ButtonBase--variant-primary__oSRJV[disabled]:hover{border-color:var(--f0720e)}.ButtonBase--variant-primary__oSRJV:active,.ButtonBase--variant-primary--dsInternalSimulation-active__V0iju{color:var(--15cee1);background-color:var(--c1c1ca)}.ButtonBase--variant-secondary__APosz{color:var(--1614c9);background-color:var(--e56164);border-color:var(--ab736c);text-decoration:var(--c6c73d)}.ButtonBase--variant-secondary--dsInternalSimulation-hover__5F1t-{color:var(--0d6ae2);background-color:var(--0d124d)}@media (hover: hover) and (pointer: fine){.ButtonBase--variant-secondary__APosz:hover{color:var(--0d6ae2);background-color:var(--0d124d)}}.ButtonBase--variant-secondary__APosz[disabled],.ButtonBase--variant-secondary__APosz[disabled]:hover{border-color:var(--3f0f51)}.ButtonBase--variant-secondary__APosz:active,.ButtonBase--variant-secondary--dsInternalSimulation-active__MwFWM{color:var(--22cb4c);background-color:var(--33b439)}.ButtonBase--variant-tertiary__oSJoa{color:var(--937543);background-color:var(--28f3c1);border-color:var(--10556e);text-decoration:var(--ce0e6a)}.ButtonBase--variant-tertiary--dsInternalSimulation-hover__juCHk{color:var(--175a77);background-color:var(--ec17be)}@media (hover: hover) and (pointer: fine){.ButtonBase--variant-tertiary__oSJoa:hover{color:var(--175a77);background-color:var(--ec17be)}}.ButtonBase--variant-tertiary__oSJoa[disabled],.ButtonBase--variant-tertiary__oSJoa[disabled]:hover{border-color:var(--fd08b7)}.ButtonBase--variant-tertiary__oSJoa:active,.ButtonBase--variant-tertiary--dsInternalSimulation-active__CZKvj{color:var(--8274ee);background-color:var(--b0bf50)}.ButtonBase--variant-quaternary__gX2sB{color:var(--9cf6ec);background-color:var(--e46449);border-color:var(--0e9e01);text-decoration:var(--5c0a2f)}.ButtonBase--variant-quaternary--dsInternalSimulation-hover__Hzaa5{color:var(--6609c6);background-color:var(--afc176)}@media (hover: hover) and (pointer: fine){.ButtonBase--variant-quaternary__gX2sB:hover{color:var(--6609c6);background-color:var(--afc176)}}.ButtonBase--variant-quaternary__gX2sB[disabled],.ButtonBase--variant-quaternary__gX2sB[disabled]:hover{border-color:var(--3e2684)}.ButtonBase--variant-quaternary__gX2sB:active,.ButtonBase--variant-quaternary--dsInternalSimulation-active__cKsaN{color:var(--e9f226);background-color:var(--2ee553)}.ButtonBase--variant-ghost__pR3-X{color:var(--255ddc);background-color:var(--64bffa);border-color:var(--39e128);text-decoration:var(--31d455)}.ButtonBase--variant-ghost--dsInternalSimulation-hover__O2HFh{color:var(--e69072);background-color:var(--3b749f)}@media (hover: hover) and (pointer: fine){.ButtonBase--variant-ghost__pR3-X:hover{color:var(--e69072);background-color:var(--3b749f)}}.ButtonBase--variant-ghost__pR3-X[disabled],.ButtonBase--variant-ghost__pR3-X[disabled]:hover{border-color:var(--af2d26)}.ButtonBase--variant-ghost__pR3-X:active,.ButtonBase--variant-ghost--dsInternalSimulation-active__CvLh8{color:var(--ddf285);background-color:var(--6beb48)}.ButtonBase--variant-ghost--is-selected__mS0Le{color:var(--5f5238);background-color:var(--a5cfbe)}.ButtonBase--variant-plain__QQfSn{color:var(--122a99);background-color:var(--bbb356);border-color:var(--0cad84);text-decoration:var(--d2d32f)}.ButtonBase--variant-plain--dsInternalSimulation-hover__4FVKR{color:var(--1265db);background-color:var(--df2aca)}@media (hover: hover) and (pointer: fine){.ButtonBase--variant-plain__QQfSn:hover{color:var(--1265db);background-color:var(--df2aca)}}.ButtonBase--variant-plain__QQfSn[disabled],.ButtonBase--variant-plain__QQfSn[disabled]:hover{border-color:var(--c6b607)}.ButtonBase--variant-plain__QQfSn:active,.ButtonBase--variant-plain--dsInternalSimulation-active__eOt0K{color:var(--a41624);background-color:var(--435fa5)}.ButtonBase--variant-dangerous__EQxp-{color:var(--efde5b);background-color:var(--118bda);border-color:var(--ab5970);text-decoration:var(--0bf14c)}.ButtonBase--variant-dangerous--dsInternalSimulation-hover__qplLA{color:var(--6f5d5d);background-color:var(--e0b0f4)}@media (hover: hover) and (pointer: fine){.ButtonBase--variant-dangerous__EQxp-:hover{color:var(--6f5d5d);background-color:var(--e0b0f4)}}.ButtonBase--variant-dangerous__EQxp-[disabled],.ButtonBase--variant-dangerous__EQxp-[disabled]:hover{border-color:var(--7deffa)}.ButtonBase--variant-dangerous__EQxp-:active,.ButtonBase--variant-dangerous--dsInternalSimulation-active__y0P1N{color:var(--6b4e92);background-color:var(--a5eaa1)}.ButtonBase--variant-critical__-t4Qu{color:var(--f68030);background-color:var(--faae28);border-color:var(--b357d0);text-decoration:var(--91f4fa)}.ButtonBase--variant-critical--dsInternalSimulation-hover__iyVj2{color:var(--c3136e);background-color:var(--064c43)}@media (hover: hover) and (pointer: fine){.ButtonBase--variant-critical__-t4Qu:hover{color:var(--c3136e);background-color:var(--064c43)}}.ButtonBase--variant-critical__-t4Qu[disabled],.ButtonBase--variant-critical__-t4Qu[disabled]:hover{border-color:var(--e117c7)}.ButtonBase--variant-critical__-t4Qu:active,.ButtonBase--variant-critical--dsInternalSimulation-active__2RACT{color:var(--f9fba8);background-color:var(--152a7a)}.ButtonBase--variant-onColor__Hgon2{color:var(--96343f);background-color:var(--d64a99);border-color:var(--d2723c);text-decoration:var(--af7137)}.ButtonBase--variant-onColor--dsInternalSimulation-hover__8ca7h{color:var(--145384);background-color:var(--549e56)}@media (hover: hover) and (pointer: fine){.ButtonBase--variant-onColor__Hgon2:hover{color:var(--145384);background-color:var(--549e56)}}.ButtonBase--variant-onColor__Hgon2[disabled],.ButtonBase--variant-onColor__Hgon2[disabled]:hover{border-color:var(--e1a214)}.ButtonBase--variant-onColor__Hgon2:active,.ButtonBase--variant-onColor--dsInternalSimulation-active__OxSu7{color:var(--f772e8);background-color:var(--936fce)}.ButtonBase--variant-classroom__ZiZjl{color:var(--8d482c);background-color:var(--7a038f);border-color:var(--38faba);text-decoration:var(--4d5ea8)}.ButtonBase--variant-classroom--dsInternalSimulation-hover__Fy83L{color:var(--55bfda);background-color:var(--077a93)}@media (hover: hover) and (pointer: fine){.ButtonBase--variant-classroom__ZiZjl:hover{color:var(--55bfda);background-color:var(--077a93)}}.ButtonBase--variant-classroom__ZiZjl[disabled],.ButtonBase--variant-classroom__ZiZjl[disabled]:hover{border-color:var(--659377)}.ButtonBase--variant-classroom__ZiZjl:active,.ButtonBase--variant-classroom--dsInternalSimulation-active__88eK7{color:var(--b62751);background-color:var(--45d93a)}.ButtonBase--variant-classroom--is-selected__GHt9-{color:var(--a0b42b);background-color:var(--16a985)}.ButtonBase--variant-primaryB2b__q-vvW{color:var(--4a94de);background-color:var(--6c36b5);border-color:var(--4a9eb5);text-decoration:var(--6c9741)}.ButtonBase--variant-primaryB2b--dsInternalSimulation-hover__Nrl78{color:var(--3e45d7);background-color:var(--dcdb32)}@media (hover: hover) and (pointer: fine){.ButtonBase--variant-primaryB2b__q-vvW:hover{color:var(--3e45d7);background-color:var(--dcdb32)}}.ButtonBase--variant-primaryB2b__q-vvW[disabled],.ButtonBase--variant-primaryB2b__q-vvW[disabled]:hover{border-color:var(--e7f949)}.ButtonBase--variant-primaryB2b__q-vvW:active,.ButtonBase--variant-primaryB2b--dsInternalSimulation-active__IGZDa{color:var(--cb03bc);background-color:var(--fc3d8b)}.ButtonBase--variant-primaryTutor__B6BAn{color:var(--c93681);background-color:var(--4aa1b1);border-color:var(--f103e9);text-decoration:var(--6e7352)}.ButtonBase--variant-primaryTutor--dsInternalSimulation-hover__HXGA0{color:var(--e91696);background-color:var(--46a009)}@media (hover: hover) and (pointer: fine){.ButtonBase--variant-primaryTutor__B6BAn:hover{color:var(--e91696);background-color:var(--46a009)}}.ButtonBase--variant-primaryTutor__B6BAn[disabled],.ButtonBase--variant-primaryTutor__B6BAn[disabled]:hover{border-color:var(--f6a20e)}.ButtonBase--variant-primaryTutor__B6BAn:active,.ButtonBase--variant-primaryTutor--dsInternalSimulation-active__FCV-3{color:var(--58d992);background-color:var(--dd5a43)}.ButtonBase--variant-inverted__9yknJ{color:var(--81b7df);background-color:var(--c54155);border-color:var(--fe1378);text-decoration:var(--fb8624)}.ButtonBase--variant-inverted--dsInternalSimulation-hover__oX9GA{color:var(--79a09e);background-color:var(--8a16b5)}@media (hover: hover) and (pointer: fine){.ButtonBase--variant-inverted__9yknJ:hover{color:var(--79a09e);background-color:var(--8a16b5)}}.ButtonBase--variant-inverted__9yknJ[disabled],.ButtonBase--variant-inverted__9yknJ[disabled]:hover{border-color:var(--e797f1)}.ButtonBase--variant-inverted__9yknJ:active,.ButtonBase--variant-inverted--dsInternalSimulation-active__-HnsQ{color:var(--77e945);background-color:var(--de59a1)}.ButtonBase--variant-newFeature__8uk2D{color:var(--ad44c3);background-color:var(--7dbfce);border-color:var(--a7eddc);text-decoration:var(--fd7ece)}.ButtonBase--variant-newFeature--dsInternalSimulation-hover__plXXr{color:var(--ddcea1);background-color:var(--dd2815)}@media (hover: hover) and (pointer: fine){.ButtonBase--variant-newFeature__8uk2D:hover{color:var(--ddcea1);background-color:var(--dd2815)}}.ButtonBase--variant-newFeature__8uk2D[disabled],.ButtonBase--variant-newFeature__8uk2D[disabled]:hover{border-color:var(--7d2338)}.ButtonBase--variant-newFeature__8uk2D:active,.ButtonBase--variant-newFeature--dsInternalSimulation-active__yDfE1{color:var(--d4762b);background-color:var(--b3e453)}.ButtonBase--variant-ai__iq9tW{color:var(--aa08fb);background-color:var(--1bdcc0);border-color:var(--8e8894);text-decoration:var(--c82204)}.ButtonBase--variant-ai--dsInternalSimulation-hover__78mV7{color:var(--59b757);background-color:var(--f043dc)}@media (hover: hover) and (pointer: fine){.ButtonBase--variant-ai__iq9tW:hover{color:var(--59b757);background-color:var(--f043dc)}}.ButtonBase--variant-ai__iq9tW[disabled],.ButtonBase--variant-ai__iq9tW[disabled]:hover{border-color:var(--6ac212)}.ButtonBase--variant-ai__iq9tW:active,.ButtonBase--variant-ai--dsInternalSimulation-active__48Tn0{color:var(--349ae3);background-color:var(--5bba7d)}.ButtonBase--variant-ai__iq9tW{border-image:var(--0b0037)}.ButtonBase--variant-ai__iq9tW[disabled],.ButtonBase--variant-ai__iq9tW[disabled]:hover{border-image:initial;border-color:var(--6ac212)}.ButtonBase--no-wrap__8TMhQ{min-width:max-content}

package/dist/assets/Chips-DAK2so_G.css

@@ -0,0 +1 @@
+.chips__Ztl9M{display:flex;gap:var(--813599);flex-wrap:wrap}.chips__Ztl9M:is(ul){list-style:none;margin:0;padding:0}.chips__Ztl9M .chip__at7hU{box-sizing:border-box;cursor:pointer;height:var(--ece0fe);width:fit-content;font-size:var(--475c79);font-weight:var(--a3f251);line-height:var(--e33d9e);color:var(--628fb7);background-color:var(--3546c3);border:solid var(--26b8e3);border-radius:var(--fa4b1a);border-color:var(--c03289);display:flex;align-items:center}.chips__Ztl9M .chip__at7hU button{all:unset}@media (hover: hover) and (pointer: fine){.chips__Ztl9M .chip__at7hU:hover{background-color:var(--302ecf)}}.chips__Ztl9M .chip__at7hU:has(.chip-toggle__pNz7e:focus-visible){outline:solid var(--26b8e3) var(--5b4fe9);outline-offset:var(--05dd73)}.chips__Ztl9M .chip__at7hU:has(.chip-toggle__pNz7e:active){border-color:var(--11d206);background-color:var(--a5c761)}.chips__Ztl9M .chip__at7hU:has(.chip-toggle__pNz7e[aria-pressed=true]){border-color:var(--11d206);background-color:var(--a5c761)}.chips__Ztl9M .chip__at7hU .chip-toggle__pNz7e{padding:var(--66b80b) var(--813599);display:flex;gap:var(--66b80b)}.chips__Ztl9M .chip__at7hU .chip-remove__gfkjj{height:fit-content;width:fit-content;display:flex;justify-content:center;align-items:center;padding:var(--66b80b) var(--813599) var(--66b80b) 0;border-radius:inherit}.chips__Ztl9M .chip__at7hU .chip-remove__gfkjj:focus-visible{outline:solid var(--26b8e3) var(--5b4fe9);outline-offset:var(--109103) var(--05dd73)}.chips__Ztl9M[data-variant=choice] .chip__at7hU:has(.chip-toggle__pNz7e[aria-pressed=true]){color:var(--c2b191);background-color:var(--4983fe)}.chips__Ztl9M[data-variant=choice] .chip__at7hU .chip-remove__gfkjj{display:none}.chips__Ztl9M[data-variant=filter] .chip__at7hU:has(.chip-toggle__pNz7e[aria-pressed=false]) .chip-remove__gfkjj{display:none}

package/dist/assets/{Chips.stories-B6Md1MMV.js → Chips.stories-3FQFAew8.js}

@@ -1,4 +1,4 @@
-import{j as i}from"./jsx-runtime-BTJTZTIL.js";import{F as L}from"./TokyoUIFav-DOVerCtW.js";import{a as b}from"./chunk-D5ZWXAHU-BhFjjRSl.js";import{r as p}from"./index-Cb9e4tly.js";import{f as K,e as a,u as x}from"./index-BVDq5o4N.js";import{I as S}from"./Icon-BmtvHdpX.js";import{f as X}from"./filterHTMLAttributes-DYdLqcvH.js";import{u as Z}from"./index-D1pfvbUR.js";import{g as G}from"./shared-strings-Biv7UF3M.js";import{g as q}from"./index-DdzHuZ-Y.js";import{w as z}from"./componentNames-Bwls0I02.js";import"./index-ChsGqxH_.js";import"./v4-CtRu48qb.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./text-accent-Pc_gtAUU.js";import"./classNames-BUL1Zq7e.js";import"./render-icon-BT0Aq7PA.js";import"./defaults-B1rzzf6M.js";import"./tslib.es6-BntfKcQG.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";const Q="_chips_ircnt_3",ee="_chip_ircnt_3",C={chips:Q,chip:ee,"chip-toggle":"_chip-toggle_ircnt_37","chip-remove":"_chip-remove_ircnt_54"},te=({title:r,titleId:o,...s},t)=>p.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",ref:t,"aria-labelledby":o,...s},r?p.createElement("title",{id:o},r):null,p.createElement("path",{fillRule:"evenodd",d:"M7.207 5.793a1 1 0 0 0-1.414 1.414L10.586 12l-4.793 4.793a1 1 0 1 0 1.414 1.414L12 13.414l4.793 4.793a1 1 0 0 0 1.414-1.414L13.414 12l4.793-4.793a1 1 0 0 0-1.414-1.414L12 10.586 7.207 5.793Z",clipRule:"evenodd"})),ie=p.forwardRef(te),l=({variant:r="choice",children:o,"aria-label":s,dataset:t})=>{const e={...t,variant:r};return i.jsx("ul",{"aria-label":s,className:C.chips,...q(e,{preplyDsComponent:z.Chips}),children:o})};l.Item=p.forwardRef(function({label:o,leadingSvgIcon:s,pressed:t,onToggle:e,onRemove:n,"aria-controls":c,dataset:u,...y},M){const{formatMessage:U}=Z(),A=()=>e==null?void 0:e(!t),Y=n??A;return i.jsxs("li",{...X(y),ref:M,className:C.chip,...q(u,{preplyDsComponent:z.Chip}),children:[i.jsxs("button",{type:"button",className:C["chip-toggle"],"aria-pressed":t,"aria-controls":c,onClick:A,onKeyUp:J=>{switch(J.key){case"Backspace":case"Delete":if(!t)return;A();break}},children:[s&&i.jsx(S,{size:"24",svg:s}),o]}),i.jsx("button",{type:"button",className:C["chip-remove"],onClick:Y,"aria-label":U(G.remove),"aria-controls":c,children:i.jsx(S,{size:"24",svg:ie})})]})});try{l.displayName="Chips",l.__docgenInfo={description:"A Chips container.\n\nAdd `Chips.Item` children to render a list of Chips.",displayName:"Chips",props:{variant:{defaultValue:{value:"choice"},description:"The Chip list variant;\n- For simple checkbox-like behaviour, use `choice`.\n- For more complex filtering controls, use `filter`.",name:"variant",required:!1,type:{name:"enum",value:[{value:'"choice"'},{value:'"filter"'}]}},"aria-label":{defaultValue:null,description:`Allows assistive technologies to correctly identify and announce
+import{j as i}from"./jsx-runtime-BTJTZTIL.js";import{F as L}from"./TokyoUIFav-DOVerCtW.js";import{a as b}from"./chunk-D5ZWXAHU-BhFjjRSl.js";import{r as p}from"./index-Cb9e4tly.js";import{f as J,e as a,u as x}from"./index-BVDq5o4N.js";import{I as S}from"./Icon-Wpz7-Jvg.js";import{f as K}from"./filterHTMLAttributes-DYdLqcvH.js";import{u as X}from"./index-D1pfvbUR.js";import{g as G}from"./shared-strings-Biv7UF3M.js";import{g as z}from"./index-DdzHuZ-Y.js";import{w as q}from"./componentNames-Bwls0I02.js";import"./index-ChsGqxH_.js";import"./v4-CtRu48qb.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./text-accent-DZDDtpIt.js";import"./classNames-BUL1Zq7e.js";import"./render-icon-BT0Aq7PA.js";import"./defaults-B1rzzf6M.js";import"./tslib.es6-BntfKcQG.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";const Q="chips__Ztl9M",ee="chip__at7hU",C={chips:Q,chip:ee,"chip-toggle":"chip-toggle__pNz7e","chip-remove":"chip-remove__gfkjj"},te=({title:r,titleId:o,...s},t)=>p.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",ref:t,"aria-labelledby":o,...s},r?p.createElement("title",{id:o},r):null,p.createElement("path",{fillRule:"evenodd",d:"M7.207 5.793a1 1 0 0 0-1.414 1.414L10.586 12l-4.793 4.793a1 1 0 1 0 1.414 1.414L12 13.414l4.793 4.793a1 1 0 0 0 1.414-1.414L13.414 12l4.793-4.793a1 1 0 0 0-1.414-1.414L12 10.586 7.207 5.793Z",clipRule:"evenodd"})),ie=p.forwardRef(te),l=({variant:r="choice",children:o,"aria-label":s,dataset:t})=>{const e={...t,variant:r};return i.jsx("ul",{"aria-label":s,className:C.chips,...z(e,{preplyDsComponent:q.Chips}),children:o})};l.Item=p.forwardRef(function({label:o,leadingSvgIcon:s,pressed:t,onToggle:e,onRemove:n,"aria-controls":c,dataset:u,...y},M){const{formatMessage:U}=X(),A=()=>e==null?void 0:e(!t),Y=n??A;return i.jsxs("li",{...K(y),ref:M,className:C.chip,...z(u,{preplyDsComponent:q.Chip}),children:[i.jsxs("button",{type:"button",className:C["chip-toggle"],"aria-pressed":t,"aria-controls":c,onClick:A,onKeyUp:Z=>{switch(Z.key){case"Backspace":case"Delete":if(!t)return;A();break}},children:[s&&i.jsx(S,{size:"24",svg:s}),o]}),i.jsx("button",{type:"button",className:C["chip-remove"],onClick:Y,"aria-label":U(G.remove),"aria-controls":c,children:i.jsx(S,{size:"24",svg:ie})})]})});try{l.displayName="Chips",l.__docgenInfo={description:"A Chips container.\n\nAdd `Chips.Item` children to render a list of Chips.",displayName:"Chips",props:{variant:{defaultValue:{value:"choice"},description:"The Chip list variant;\n- For simple checkbox-like behaviour, use `choice`.\n- For more complex filtering controls, use `filter`.",name:"variant",required:!1,type:{name:"enum",value:[{value:'"choice"'},{value:'"filter"'}]}},"aria-label":{defaultValue:null,description:`Allows assistive technologies to correctly identify and announce
 the Chip list.
 @example <Chips aria-label="tutor filter">
   // When the Chip below is in focus, screen readers may announce it as:
@@ -8,7 +8,7 @@ the Chip list.
 Chips streamline filtering or action selection for users.
 
 See page on [Path](https://zeroheight.com/62fdeb7ec/v/latest/p/79810d-chip) site for design and usage info.
-`}},globals:{onToggle:K()}},v=()=>{const[r,o]=p.useState(!1);return i.jsx(l,{"aria-label":"Chips",children:i.jsx(l.Item,{label:"Chip",pressed:r,onToggle:o})})},g={parameters:{docs:{description:{story:"`Choice` Chips are used to select from a list of suggested options."}}},render:function(o,s){const[t,e]=p.useState({Ambition:!1,Boldness:!1,Collaboration:!0});return i.jsx(l,{variant:"choice","aria-label":"Principle choices",children:Object.entries(t).map(([n,c])=>i.jsx(l.Item,{label:n,pressed:c,onToggle:u=>{e(y=>({...y,[n]:u})),s.globals.onToggle([n,u])}},n))})},play:async({canvas:r,context:o})=>{const s=o.globals.onToggle,t=await r.findByText("Ambition"),e=await r.findByText("Boldness"),n=await r.findByText("Collaboration");a(t).toHaveAttribute("aria-pressed","false"),a(e).toHaveAttribute("aria-pressed","false"),a(n).toHaveAttribute("aria-pressed","true"),await x.click(t),a(s).toHaveBeenCalledWith(["Ambition",!0]),a(t).toHaveAttribute("aria-pressed","true"),a(e).toHaveAttribute("aria-pressed","false"),a(n).toHaveAttribute("aria-pressed","true"),await x.click(t),a(s).toHaveBeenCalledWith(["Ambition",!1]),a(t).toHaveAttribute("aria-pressed","false"),a(e).toHaveAttribute("aria-pressed","false"),a(n).toHaveAttribute("aria-pressed","true")}},f=()=>{const[r,o]=p.useState({Ambition:!1,Boldness:!1,Collaboration:!0});return i.jsx(l,{variant:"choice","aria-label":"Principle choices",children:Object.entries(r).map(([s,t])=>i.jsx(l.Item,{label:s,leadingSvgIcon:L,pressed:t,onToggle:e=>{o(n=>({...n,[s]:e})),b(`Toggle ${s} ${e?"on":"off"}`)()}},s))})};f.parameters={docs:{description:{story:"They may also have leading icons:"}}};const m=(r,o)=>{const[s,t]=p.useState({Ambition:!1,Boldness:!1,Collaboration:!0});return i.jsx(l,{variant:"filter","aria-label":"Principle filters",children:Object.entries(s).map(([e,n])=>i.jsx(l.Item,{label:e,pressed:n,onToggle:c=>{t(u=>({...u,[e]:c})),b(`Toggle ${e} ${c?"on":"off"}`)(),o.globals.onToggle([e,c])}},e))})};m.parameters={docs:{description:{story:"`Filter` Chips are used to add and remove filtering options from a list."}}};m.play=async({canvas:r,context:o})=>{const s=o.globals.onToggle,t=await r.findByText("Ambition"),e=await r.findByText("Boldness"),n=await r.findByText("Collaboration"),c=t.nextElementSibling;a(c).not.toBeVisible(),a(t).toHaveAttribute("aria-pressed","false"),a(e).toHaveAttribute("aria-pressed","false"),a(n).toHaveAttribute("aria-pressed","true"),await x.click(t),a(c).toBeVisible(),a(c).toHaveAccessibleName("Remove"),a(s).toHaveBeenCalledWith(["Ambition",!0]),a(t).toHaveAttribute("aria-pressed","true"),a(e).toHaveAttribute("aria-pressed","false"),a(n).toHaveAttribute("aria-pressed","true"),await x.click(c),a(s).toHaveBeenCalledWith(["Ambition",!1]),a(c).not.toBeVisible(),a(t).toHaveAttribute("aria-pressed","false"),a(e).toHaveAttribute("aria-pressed","false"),a(n).toHaveAttribute("aria-pressed","true")};const h=()=>{const[r,o]=p.useState({Ambition:!1,Boldness:!1,Collaboration:!0});return i.jsx(l,{variant:"filter","aria-label":"Principle filters",children:Object.entries(r).map(([s,t])=>i.jsx(l.Item,{label:s,leadingSvgIcon:L,pressed:t,onToggle:e=>{o(n=>({...n,[s]:e})),b(`Toggle ${s} ${e?"on":"off"}`)()}},s))})};h.parameters={docs:{description:{story:"They may also have leading icons:"}}};const d=()=>{const[r,o]=p.useState(!1),[s,t]=p.useState(void 0);return i.jsxs("div",{children:[i.jsx(l,{variant:"filter","aria-label":"Principle filters",children:i.jsx(l.Item,{label:"Principles",pressed:r,onToggle:e=>{if(s!==void 0){t(void 0),b("onToggle - Clear selected filter")();return}o(e),b(`Toggle filter ${e?"on":"off"}`)()},onRemove:()=>{t(void 0),o(!1),b("onRemove - Remove filter")()},"aria-controls":"principle-menu"})}),i.jsx("div",{id:"principle-menu",children:r&&(s?i.jsxs(i.Fragment,{children:[i.jsx("p",{children:"Your favorite principle is:"}),i.jsx("p",{children:s})]}):i.jsxs(i.Fragment,{children:[i.jsx("p",{children:"What's your favorite principle?"}),i.jsxs("form",{onSubmit:e=>{e.preventDefault(),t(e.nativeEvent.submitter.value)},children:[i.jsx("input",{type:"submit",value:"Ambition"}),i.jsx("input",{type:"submit",value:"Boldness"}),i.jsx("input",{type:"submit",value:"Collaboration"})]})]}))})]})};d.parameters={docs:{description:{story:`
+`}},globals:{onToggle:J()}},v=()=>{const[r,o]=p.useState(!1);return i.jsx(l,{"aria-label":"Chips",children:i.jsx(l.Item,{label:"Chip",pressed:r,onToggle:o})})},g={parameters:{docs:{description:{story:"`Choice` Chips are used to select from a list of suggested options."}}},render:function(o,s){const[t,e]=p.useState({Ambition:!1,Boldness:!1,Collaboration:!0});return i.jsx(l,{variant:"choice","aria-label":"Principle choices",children:Object.entries(t).map(([n,c])=>i.jsx(l.Item,{label:n,pressed:c,onToggle:u=>{e(y=>({...y,[n]:u})),s.globals.onToggle([n,u])}},n))})},play:async({canvas:r,context:o})=>{const s=o.globals.onToggle,t=await r.findByText("Ambition"),e=await r.findByText("Boldness"),n=await r.findByText("Collaboration");a(t).toHaveAttribute("aria-pressed","false"),a(e).toHaveAttribute("aria-pressed","false"),a(n).toHaveAttribute("aria-pressed","true"),await x.click(t),a(s).toHaveBeenCalledWith(["Ambition",!0]),a(t).toHaveAttribute("aria-pressed","true"),a(e).toHaveAttribute("aria-pressed","false"),a(n).toHaveAttribute("aria-pressed","true"),await x.click(t),a(s).toHaveBeenCalledWith(["Ambition",!1]),a(t).toHaveAttribute("aria-pressed","false"),a(e).toHaveAttribute("aria-pressed","false"),a(n).toHaveAttribute("aria-pressed","true")}},f=()=>{const[r,o]=p.useState({Ambition:!1,Boldness:!1,Collaboration:!0});return i.jsx(l,{variant:"choice","aria-label":"Principle choices",children:Object.entries(r).map(([s,t])=>i.jsx(l.Item,{label:s,leadingSvgIcon:L,pressed:t,onToggle:e=>{o(n=>({...n,[s]:e})),b(`Toggle ${s} ${e?"on":"off"}`)()}},s))})};f.parameters={docs:{description:{story:"They may also have leading icons:"}}};const m=(r,o)=>{const[s,t]=p.useState({Ambition:!1,Boldness:!1,Collaboration:!0});return i.jsx(l,{variant:"filter","aria-label":"Principle filters",children:Object.entries(s).map(([e,n])=>i.jsx(l.Item,{label:e,pressed:n,onToggle:c=>{t(u=>({...u,[e]:c})),b(`Toggle ${e} ${c?"on":"off"}`)(),o.globals.onToggle([e,c])}},e))})};m.parameters={docs:{description:{story:"`Filter` Chips are used to add and remove filtering options from a list."}}};m.play=async({canvas:r,context:o})=>{const s=o.globals.onToggle,t=await r.findByText("Ambition"),e=await r.findByText("Boldness"),n=await r.findByText("Collaboration"),c=t.nextElementSibling;a(c).not.toBeVisible(),a(t).toHaveAttribute("aria-pressed","false"),a(e).toHaveAttribute("aria-pressed","false"),a(n).toHaveAttribute("aria-pressed","true"),await x.click(t),a(c).toBeVisible(),a(c).toHaveAccessibleName("Remove"),a(s).toHaveBeenCalledWith(["Ambition",!0]),a(t).toHaveAttribute("aria-pressed","true"),a(e).toHaveAttribute("aria-pressed","false"),a(n).toHaveAttribute("aria-pressed","true"),await x.click(c),a(s).toHaveBeenCalledWith(["Ambition",!1]),a(c).not.toBeVisible(),a(t).toHaveAttribute("aria-pressed","false"),a(e).toHaveAttribute("aria-pressed","false"),a(n).toHaveAttribute("aria-pressed","true")};const h=()=>{const[r,o]=p.useState({Ambition:!1,Boldness:!1,Collaboration:!0});return i.jsx(l,{variant:"filter","aria-label":"Principle filters",children:Object.entries(r).map(([s,t])=>i.jsx(l.Item,{label:s,leadingSvgIcon:L,pressed:t,onToggle:e=>{o(n=>({...n,[s]:e})),b(`Toggle ${s} ${e?"on":"off"}`)()}},s))})};h.parameters={docs:{description:{story:"They may also have leading icons:"}}};const d=()=>{const[r,o]=p.useState(!1),[s,t]=p.useState(void 0);return i.jsxs("div",{children:[i.jsx(l,{variant:"filter","aria-label":"Principle filters",children:i.jsx(l.Item,{label:"Principles",pressed:r,onToggle:e=>{if(s!==void 0){t(void 0),b("onToggle - Clear selected filter")();return}o(e),b(`Toggle filter ${e?"on":"off"}`)()},onRemove:()=>{t(void 0),o(!1),b("onRemove - Remove filter")()},"aria-controls":"principle-menu"})}),i.jsx("div",{id:"principle-menu",children:r&&(s?i.jsxs(i.Fragment,{children:[i.jsx("p",{children:"Your favorite principle is:"}),i.jsx("p",{children:s})]}):i.jsxs(i.Fragment,{children:[i.jsx("p",{children:"What's your favorite principle?"}),i.jsxs("form",{onSubmit:e=>{e.preventDefault(),t(e.nativeEvent.submitter.value)},children:[i.jsx("input",{type:"submit",value:"Ambition"}),i.jsx("input",{type:"submit",value:"Boldness"}),i.jsx("input",{type:"submit",value:"Collaboration"})]})]}))})]})};d.parameters={docs:{description:{story:`
 Here is a complex example in which a chip can toggle a sub-flow for filter
 selection:
 `}}};d.tags=["!test"];d.parameters={chromatic:{disableSnapshot:!0}};var T,w,j;v.parameters={...v.parameters,docs:{...(T=v.parameters)==null?void 0:T.docs,source:{originalSource:`() => {