@preply/ds-docs 11.0.0 → 11.1.0

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

@@ -0,0 +1,246 @@
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Button-DnVrHohm.js";import{n as o,t as s}from"./Avatar-LEDcSb51.js";import{n as c,t as l}from"./IconButton-CUt4Aks_.js";import{n as u,t as d}from"./BubbleCounter-DwJsPISN.js";import{n as f,t as p}from"./LayoutFlex-DdWp4cl3.js";import{n as m,t as h}from"./TokyoUIMessages-z4JOaU4E.js";var g,_,v,y,b,x,S,C,w,T,E,D,O,k,A;t((()=>{e(n(),1),u(),c(),m(),i(),o(),f(),g=r(),_={title:`components/BubbleCounter`,component:d,decorators:[e=>(0,g.jsx)(`div`,{style:{padding:`24px`},children:(0,g.jsx)(e,{})})]},v=()=>(0,g.jsx)(`table`,{style:{borderCollapse:`separate`,borderSpacing:`16px`},children:(0,g.jsxs)(`tbody`,{children:[(0,g.jsxs)(`tr`,{children:[(0,g.jsx)(`td`,{children:`dark`}),(0,g.jsx)(`td`,{children:(0,g.jsx)(d,{count:5,variant:`dark`})})]}),(0,g.jsxs)(`tr`,{children:[(0,g.jsx)(`td`,{children:`light`}),(0,g.jsx)(`td`,{children:(0,g.jsx)(d,{count:5,variant:`light`})})]})]})}),y=()=>(0,g.jsxs)(`table`,{style:{borderCollapse:`separate`,borderSpacing:`16px`},children:[(0,g.jsx)(`thead`,{children:(0,g.jsxs)(`tr`,{children:[(0,g.jsx)(`th`,{children:`Variant`}),(0,g.jsx)(`th`,{children:`small`}),(0,g.jsx)(`th`,{children:`medium`}),(0,g.jsx)(`th`,{children:`large`})]})}),(0,g.jsxs)(`tbody`,{children:[(0,g.jsxs)(`tr`,{children:[(0,g.jsx)(`td`,{children:`dark`}),(0,g.jsx)(`td`,{children:(0,g.jsx)(d,{count:5,size:`small`,variant:`dark`})}),(0,g.jsx)(`td`,{children:(0,g.jsx)(d,{count:5,size:`medium`,variant:`dark`})}),(0,g.jsx)(`td`,{children:(0,g.jsx)(d,{count:5,size:`large`,variant:`dark`})})]}),(0,g.jsxs)(`tr`,{children:[(0,g.jsx)(`td`,{children:`light`}),(0,g.jsx)(`td`,{children:(0,g.jsx)(d,{count:5,size:`small`,variant:`light`})}),(0,g.jsx)(`td`,{children:(0,g.jsx)(d,{count:5,size:`medium`,variant:`light`})}),(0,g.jsx)(`td`,{children:(0,g.jsx)(d,{count:5,size:`large`,variant:`light`})})]})]})]}),b=()=>(0,g.jsxs)(`table`,{style:{borderCollapse:`separate`,borderSpacing:`16px`},children:[(0,g.jsx)(`thead`,{children:(0,g.jsxs)(`tr`,{children:[(0,g.jsx)(`th`,{children:`Variant`}),(0,g.jsx)(`th`,{children:`small`}),(0,g.jsx)(`th`,{children:`medium`}),(0,g.jsx)(`th`,{children:`large`})]})}),(0,g.jsxs)(`tbody`,{children:[(0,g.jsxs)(`tr`,{children:[(0,g.jsx)(`td`,{children:`dark`}),(0,g.jsx)(`td`,{children:(0,g.jsx)(d,{count:500,size:`small`,variant:`dark`})}),(0,g.jsx)(`td`,{children:(0,g.jsx)(d,{count:500,size:`medium`,variant:`dark`})}),(0,g.jsx)(`td`,{children:(0,g.jsx)(d,{count:500,size:`large`,variant:`dark`})})]}),(0,g.jsxs)(`tr`,{children:[(0,g.jsx)(`td`,{children:`light`}),(0,g.jsx)(`td`,{children:(0,g.jsx)(d,{count:500,size:`small`,variant:`light`})}),(0,g.jsx)(`td`,{children:(0,g.jsx)(d,{count:500,size:`medium`,variant:`light`})}),(0,g.jsx)(`td`,{children:(0,g.jsx)(d,{count:500,size:`large`,variant:`light`})})]})]})]}),x=()=>(0,g.jsxs)(`table`,{style:{borderCollapse:`separate`,borderSpacing:`16px`},children:[(0,g.jsx)(`thead`,{children:(0,g.jsxs)(`tr`,{children:[(0,g.jsx)(`th`,{children:`Variant`}),(0,g.jsx)(`th`,{children:`small`}),(0,g.jsx)(`th`,{children:`medium`}),(0,g.jsx)(`th`,{children:`medium`})]})}),(0,g.jsxs)(`tbody`,{children:[(0,g.jsxs)(`tr`,{children:[(0,g.jsx)(`td`,{children:`dark`}),(0,g.jsx)(`td`,{children:(0,g.jsx)(d,{size:`small`,variant:`dark`,showEmpty:!0})}),(0,g.jsx)(`td`,{children:(0,g.jsx)(d,{size:`medium`,variant:`dark`,showEmpty:!0})}),(0,g.jsx)(`td`,{children:(0,g.jsx)(d,{size:`large`,variant:`dark`,showEmpty:!0})})]}),(0,g.jsxs)(`tr`,{children:[(0,g.jsx)(`td`,{children:`light`}),(0,g.jsx)(`td`,{children:(0,g.jsx)(d,{size:`small`,variant:`light`,showEmpty:!0})}),(0,g.jsx)(`td`,{children:(0,g.jsx)(d,{size:`medium`,variant:`light`,showEmpty:!0})}),(0,g.jsx)(`td`,{children:(0,g.jsx)(d,{size:`large`,variant:`light`,showEmpty:!0})})]})]})]}),S=()=>(0,g.jsxs)(p,{gap:`12`,children:[(0,g.jsxs)(a,{variant:`primary`,size:`medium`,children:[`Messages `,(0,g.jsx)(d,{variant:`dark`,count:5,size:`medium`})]}),(0,g.jsxs)(a,{variant:`tertiary`,size:`medium`,children:[`Messages `,(0,g.jsx)(d,{variant:`light`,count:5,size:`medium`})]})]}),C=()=>(0,g.jsxs)(p,{gap:`12`,children:[(0,g.jsx)(d,{count:5,size:`small`,children:(0,g.jsx)(s,{size:`48`})}),(0,g.jsx)(d,{count:5,size:`medium`,children:(0,g.jsx)(s,{size:`64`})}),(0,g.jsx)(d,{count:5,size:`large`,children:(0,g.jsx)(s,{size:`96`})})]}),w=()=>(0,g.jsxs)(p,{gap:`12`,children:[(0,g.jsx)(d,{count:5,size:`small`,children:(0,g.jsx)(l,{svg:h,assistiveText:`Messages`,size:`small`,variant:`tertiary`})}),(0,g.jsx)(d,{count:5,size:`medium`,children:(0,g.jsx)(l,{svg:h,assistiveText:`Messages`,size:`medium`,variant:`tertiary`})}),(0,g.jsx)(d,{count:5,size:`large`,children:(0,g.jsx)(l,{svg:h,assistiveText:`Messages`,size:`large`,variant:`tertiary`})})]}),T=()=>(0,g.jsx)(`div`,{style:{"--ds-bubblecounter-target-offset":`20%`,"--ds-bubblecounter-outline-color":`red`},children:(0,g.jsx)(d,{count:5,size:`medium`,children:(0,g.jsx)(`div`,{style:{backgroundColor:`lightgray`,width:`30px`,height:`30px`,borderRadius:`50%`,padding:`8px`}})})}),T.parameters={docs:{canvas:{sourceState:`shown`}}},E=()=>(0,g.jsx)(l,{svg:h,assistiveText:`Messages`,variant:`tertiary`,size:`large`}),D=()=>(0,g.jsx)(d,{count:void 0,children:(0,g.jsx)(E,{})}),D.parameters={docs:{canvas:{sourceState:`shown`}}},O=()=>(0,g.jsx)(d,{showEmpty:!0,children:(0,g.jsx)(E,{})}),O.parameters={docs:{canvas:{sourceState:`shown`}}},k={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`}}},v.parameters={...v.parameters,docs:{...v.parameters?.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>`,...v.parameters?.docs?.source}}},y.parameters={...y.parameters,docs:{...y.parameters?.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>`,...y.parameters?.docs?.source}}},b.parameters={...b.parameters,docs:{...b.parameters?.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>`,...b.parameters?.docs?.source},description:{story:"Numbers exceeding the `limit` prop value are clamped, with a `+` suffix.",...b.parameters?.docs?.description}}},x.parameters={...x.parameters,docs:{...x.parameters?.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>`,...x.parameters?.docs?.source}}},S.parameters={...S.parameters,docs:{...S.parameters?.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>`,...S.parameters?.docs?.source}}},C.parameters={...C.parameters,docs:{...C.parameters?.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>`,...C.parameters?.docs?.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.`,...C.parameters?.docs?.description}}},w.parameters={...w.parameters,docs:{...w.parameters?.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>`,...w.parameters?.docs?.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.",...w.parameters?.docs?.description}}},T.parameters={...T.parameters,docs:{...T.parameters?.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>`,...T.parameters?.docs?.source},description:{story:`Some styling escape hatches exist in the form of custom CSS properties:
+
+- \`--ds-bubblecounter-target-offset\`: Overrides the position offset between
+  the \`BubbleCounter\` and the target element.
+- \`--ds-bubblecounter-outline-color\`: Forces a coutout outline to render and
+  overrides its color.
+
+You can set these on the \`BubbleCounter\`'s parent element, and they will be
+inherited automatically.`,...T.parameters?.docs?.description}}},D.parameters={...D.parameters,docs:{...D.parameters?.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>
+   * );
+   */;
+}`,...D.parameters?.docs?.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`,...D.parameters?.docs?.description}}},O.parameters={...O.parameters,docs:{...O.parameters?.docs,source:{originalSource:`() => <BubbleCounter showEmpty>
+        <MessagesButton />
+    </BubbleCounter>`,...O.parameters?.docs?.source},description:{story:"The counter can be rendered without a value using the `showEmpty` prop.",...O.parameters?.docs?.description}}},k.parameters={...k.parameters,docs:{...k.parameters?.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'
+    }
+  }
+}`,...k.parameters?.docs?.source}}},A=[`Variants`,`Sizes`,`Limit`,`Empty`,`AsIndicator`,`AsIndicatorOverlay`,`AsIndicatorOverlayOnIconButton`,`AsIndicatorWithCSSEscapeHatches`,`HideOnEmptyCount`,`ShowOnEmptyCount`,`Playground`]}))();export{S as AsIndicator,C as AsIndicatorOverlay,w as AsIndicatorOverlayOnIconButton,T as AsIndicatorWithCSSEscapeHatches,x as Empty,D as HideOnEmptyCount,b as Limit,k as Playground,O as ShowOnEmptyCount,y as Sizes,v as Variants,A as __namedExportsOrder,_ as default};

package/dist/assets/Button-DnVrHohm.js

@@ -0,0 +1,18 @@
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{at as r,it as i,t as a,w as o,x as s,y as c}from"./dist-DtfJeYQK.js";import{t as l}from"./jsx-runtime-C2wGStra.js";import{n as u,t as d}from"./dist-Cc1j9Pjk.js";import{n as f,t as p}from"./render-icon-Dzkg3KVE.js";import{n as m,t as h}from"./ButtonBase-DV0YtoS6.js";var g,_,v,y,b,x=t((()=>{g=`Button__zN6zT`,_=`leadingIcon__wQqJW`,v=`trailingIcon__zChSf`,y=`icon__sU6GA`,b={Button:g,leadingIcon:_,trailingIcon:v,"Button--size-s":`Button--size-s__yKEFo`,icon:y,"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`}})),S,C,w,T=t((()=>{o(),d(),a(),S=e(n(),1),p(),m(),x(),C=l(),w=(0,S.forwardRef)(function({variant:e=r,size:t=i,url:n,a11yLabel:a,leadingSvgIcon:o,trailingSvgIcon:l,children:d,...p},m){let g=!!o||!!l,_=c(b,u.Button,[s(`size`,t)]);return(0,C.jsxs)(h,{...p,ref:m,isIconButton:!1,variant:e,size:t,url:n,a11yLabel:a,preplyDsComponent:u.Button,className:g?_.join(` `):``,children:[!!o&&(0,C.jsx)(`span`,{className:`${b.icon} ${b.leadingIcon}`,children:f(o,{"aria-hidden":`true`,focusable:`false`})}),d,!!l&&(0,C.jsx)(`span`,{className:`${b.icon} ${b.trailingIcon}`,children:f(l,{"aria-hidden":`true`,focusable:`false`})})]})});try{w.displayName=`Button`,w.__docgenInfo={description:``,displayName:`Button`,props:{id:{defaultValue:null,description:``,name:`id`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},onKeyDown:{defaultValue:null,description:``,name:`onKeyDown`,required:!1,type:{name:`enum`,value:[{value:`KeyboardEventHandler`}]}},onKeyUp:{defaultValue:null,description:``,name:`onKeyUp`,required:!1,type:{name:`enum`,value:[{value:`KeyboardEventHandler`}]}},onClick:{defaultValue:null,description:``,name:`onClick`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onMouseDown:{defaultValue:null,description:``,name:`onMouseDown`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onMouseEnter:{defaultValue:null,description:``,name:`onMouseEnter`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onMouseMove:{defaultValue:null,description:``,name:`onMouseMove`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onMouseUp:{defaultValue:null,description:``,name:`onMouseUp`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onPointerDown:{defaultValue:null,description:``,name:`onPointerDown`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onPointerEnter:{defaultValue:null,description:``,name:`onPointerEnter`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},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>>`}]}},download:{defaultValue:null,description:``,name:`download`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},href:{defaultValue:null,description:``,name:`href`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},disabled:{defaultValue:null,description:``,name:`disabled`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},size:{defaultValue:{value:`small`},description:``,name:`size`,required:!1,type:{name:`enum`,value:[{value:`"small"`},{value:`"medium"`},{value:`"large"`},{value:`ResponsiveProp<ButtonSize>`}]}},selected:{defaultValue:null,description:`Used only for classroom and ghost variants`,name:`selected`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},wrap:{defaultValue:null,description:``,name:`wrap`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},variant:{defaultValue:{value:`primary`},description:``,name:`variant`,required:!1,type:{name:`enum`,value:[{value:`"primary"`},{value:`"secondary"`},{value:`"tertiary"`},{value:`"inverted"`},{value:`"critical"`},{value:`"ai"`},{value:`"quaternary"`},{value:`"ghost"`},{value:`"onColor"`},{value:`"classroom"`},{value:`"primaryB2b"`},{value:`"primaryTutor"`},{value:`"newFeature"`}]}},url:{defaultValue:null,description:"@deprecated Use `href` instead",name:`url`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},fullWidth:{defaultValue:null,description:``,name:`fullWidth`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`},{value:`ResponsiveProp<boolean>`}]}},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`}]}},busy:{defaultValue:null,description:`Replaces the content with a loading indicator.`,name:`busy`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},a11yLabel:{defaultValue:null,description:"@deprecated Use `assistiveText` instead",name:`a11yLabel`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},leadingSvgIcon:{defaultValue:null,description:`The leading SVG icon.
+@example import TokyoUITag from '@preply/ds-media-icons/dist/24/TokyoUITag.svg';
+
+<Button leadingSvgIcon={TokyoUITag}>Button</Button>
+or
+<Button leadingSvgIcon={<TokyoUITag />}>Button</Button>`,name:`leadingSvgIcon`,required:!1,type:{name:`enum`,value:[{value:`ComponentClass<SVGAttributes<SVGElement>, any>`},{value:`FunctionComponent<SVGAttributes<SVGElement>>`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},trailingSvgIcon:{defaultValue:null,description:`The trailing SVG icon.
+@example import TokyoUITag from '@preply/ds-media-icons/dist/24/TokyoUITag.svg';
+
+<Button trailingSvgIcon={TokyoUITag}>Button</Button>
+or
+<Button trailingSvgIcon={<TokyoUITag />}>Button</Button>`,name:`trailingSvgIcon`,required:!1,type:{name:`enum`,value:[{value:`ComponentClass<SVGAttributes<SVGElement>, any>`},{value:`FunctionComponent<SVGAttributes<SVGElement>>`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:`ref`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`(instance: HTMLAnchorElement | HTMLButtonElement | null) => void`},{value:`RefObject<HTMLAnchorElement | HTMLButtonElement>`}]}},key:{defaultValue:null,description:``,name:`key`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`number`},{value:`bigint`}]}}}}}catch{}}));export{T as n,w as t};

package/dist/assets/Button-DsoMn9D3.css

@@ -0,0 +1 @@
+.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 (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 (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 (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 (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 (width>=1900px){.Button--wide-l--size-s__HAZa1 .icon__sU6GA,.Button--wide-l--size-m__xB4x0 .icon__sU6GA,.Button--wide-l--size-small__WdoWT .icon__sU6GA,.Button--wide-l--size-medium__KgZbS .icon__sU6GA{margin-top:calc(-1 * var(--f316e1) / 2);margin-bottom:calc(-1 * var(--f316e1) / 2)}.Button--wide-l--size-s__HAZa1 .icon__sU6GA svg,.Button--wide-l--size-m__xB4x0 .icon__sU6GA svg,.Button--wide-l--size-small__WdoWT .icon__sU6GA svg,.Button--wide-l--size-medium__KgZbS .icon__sU6GA svg{width:var(--f316e1);height:var(--f316e1)}.Button--wide-l--size-l__rw5N1 .icon__sU6GA,.Button--wide-l--size-large__7TyOT .icon__sU6GA{margin-top:calc(-1 * var(--7789ee) / 2);margin-bottom:calc(-1 * var(--7789ee) / 2)}.Button--wide-l--size-l__rw5N1 .icon__sU6GA svg,.Button--wide-l--size-large__7TyOT .icon__sU6GA svg{width:var(--7789ee);height:var(--7789ee)}}

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

@@ -0,0 +1,271 @@
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{C as r,Y as i,t as a,w as o}from"./dist-DtfJeYQK.js";import{t as s}from"./jsx-runtime-C2wGStra.js";import{n as c,t as l}from"./Text-bm2vnOS2.js";import{n as u,t as d}from"./Button-DnVrHohm.js";import{n as f,t as p}from"./IconButton-CUt4Aks_.js";import{r as m,t as h}from"./storybook-utils-CXrHOWy7.js";import{n as g,t as _}from"./TokyoUIFav-D3EBPocg.js";var v,y,b,x,S,C,w,T,E,D,O,k,A,j;t((()=>{o(),g(),a(),v=e(n(),1),f(),u(),c(),h(),y=s(),b={title:`components/Button`,component:d,subcomponents:{IconButton:p},argTypes:{size:{description:m},fullWidth:{description:m}}},x=()=>(0,y.jsxs)(`div`,{style:{display:`flex`,gap:`1rem`},children:[(0,y.jsx)(d,{children:`Button`}),(0,y.jsx)(d,{leadingSvgIcon:_,children:`Button`}),(0,y.jsx)(d,{trailingSvgIcon:_,children:`Button`}),(0,y.jsx)(p,{svg:_,assistiveText:`Favourite`})]}),x.tags=[`!autodocs`,`!test`],x.parameters={chromatic:{disableSnapshot:!0}},S=()=>{let e=r(i.background.primaryInverted);return(0,y.jsxs)(`div`,{style:{display:`flex`,gap:`1rem`},children:[(0,y.jsx)(d,{variant:`primary`,children:`Primary`}),(0,y.jsx)(d,{variant:`secondary`,children:`Secondary`}),(0,y.jsx)(d,{variant:`tertiary`,children:`Tertiary`}),(0,y.jsx)(d,{variant:`ghost`,children:`Ghost`}),(0,y.jsx)(`div`,{style:{backgroundColor:e,borderRadius:`8px`},children:(0,y.jsx)(d,{variant:`inverted`,children:`Inverted`})}),(0,y.jsx)(d,{variant:`critical`,children:`Critical`}),(0,y.jsx)(d,{variant:`onColor`,children:`onColor`})]})},C=()=>{let e=r(i.background.primaryInverted);return(0,y.jsxs)(`div`,{style:{display:`flex`,gap:`1rem`},children:[(0,y.jsx)(p,{variant:`primary`,svg:_,assistiveText:`primary`}),(0,y.jsx)(p,{variant:`secondary`,svg:_,assistiveText:`secondary`}),(0,y.jsx)(p,{variant:`tertiary`,svg:_,assistiveText:`tertiary`}),(0,y.jsx)(p,{variant:`ghost`,svg:_,assistiveText:`ghost`}),(0,y.jsx)(`div`,{style:{backgroundColor:e,borderRadius:`8px`},children:(0,y.jsx)(p,{variant:`inverted`,svg:_,assistiveText:`inverted`})}),(0,y.jsx)(p,{variant:`critical`,svg:_,assistiveText:`critical`}),(0,y.jsx)(p,{variant:`onColor`,svg:_,assistiveText:`onColor`})]})},C.storyName=`Variants (IconButton)`,w=()=>{let e=r(i.background.primaryInverted);return(0,y.jsxs)(`div`,{style:{display:`flex`,gap:`8px`},children:[(0,y.jsxs)(`div`,{style:{display:`flex`,gap:`4px`},children:[(0,y.jsx)(d,{variant:`ai`,children:`AI`}),(0,y.jsx)(p,{variant:`ai`,svg:_,assistiveText:`Fav`})]}),(0,y.jsxs)(`div`,{style:{display:`flex`,gap:`4px`,backgroundColor:e},children:[(0,y.jsx)(d,{variant:`classroom`,children:`Classroom`}),(0,y.jsx)(p,{variant:`classroom`,svg:_,assistiveText:`Fav`}),(0,y.jsx)(p,{variant:`classroom`,svg:_,assistiveText:`Fav`,selected:!0})]})]})},T=()=>(0,y.jsxs)(`div`,{style:{display:`flex`,alignItems:`center`,gap:`8px`},children:[(0,y.jsxs)(`div`,{style:{display:`flex`,gap:`4px`},children:[(0,y.jsx)(d,{size:`small`,children:`Small`}),(0,y.jsx)(p,{size:`small`,svg:_,assistiveText:`Fav`})]}),(0,y.jsxs)(`div`,{style:{display:`flex`,gap:`4px`},children:[(0,y.jsx)(d,{size:`medium`,children:`Medium`}),(0,y.jsx)(p,{size:`medium`,svg:_,assistiveText:`Fav`})]}),(0,y.jsxs)(`div`,{style:{display:`flex`,gap:`4px`},children:[(0,y.jsx)(d,{size:`large`,children:`Large`}),(0,y.jsx)(p,{size:`large`,svg:_,assistiveText:`Fav`})]})]}),E=()=>(0,y.jsxs)(y.Fragment,{children:[(0,y.jsx)(d,{wrap:!0,size:`small`,children:`Do the really quite unusually long thing`}),(0,y.jsx)(d,{wrap:!0,size:`medium`,children:`Do the really quite unusually long thing`}),(0,y.jsx)(d,{wrap:!0,size:`large`,children:`Do the really quite unusually long thing`})]}),E.tags=[`!autodocs`],E.decorators=[e=>(0,y.jsx)(`div`,{style:{width:`200px`},children:e()})],D=()=>(0,y.jsx)(d,{size:{_:`small`,"medium-l":`medium`,"wide-s":`large`},leadingSvgIcon:_,children:`Change the viewport size`}),D.parameters={chromatic:{modes:{"narrow-l":{viewport:`narrow-l`},"medium-l":{viewport:`medium-l`},"wide-s":{viewport:`wide-s`}}}},O=()=>{let e=r(i.background.primaryInverted);return(0,y.jsx)(`div`,{style:{display:`flex`,gap:`16px`,flexDirection:`column`},children:[`small`,`medium`,`large`].map(t=>[`primary`,`secondary`,`tertiary`,`ghost`,`inverted`,`critical`,`ai`,`onColor`,`classroom`].map(n=>(0,y.jsxs)(v.Fragment,{children:[(0,y.jsxs)(l,{variant:`default-regular-italic`,children:[n,` - `,t]}),(0,y.jsxs)(`div`,{style:{display:`flex`,gap:`16px`,backgroundColor:n===`inverted`||n===`classroom`?e:void 0},children:[(0,y.jsx)(d,{size:t,variant:n,children:`button`}),(0,y.jsx)(d,{size:t,variant:n,leadingSvgIcon:_,children:`button`}),(0,y.jsx)(d,{size:t,variant:n,trailingSvgIcon:_,children:`button`}),(0,y.jsx)(d,{size:t,variant:n,busy:!0,assistiveText:`Fav`,children:`button`}),(0,y.jsx)(d,{size:t,variant:n,disabled:!0,children:`disabled`}),(0,y.jsx)(d,{size:t,variant:n,dsInternalSimulation:`hover`,children:`hover`}),(0,y.jsx)(d,{size:t,variant:n,dsInternalSimulation:`active`,children:`active`}),(0,y.jsx)(d,{size:t,variant:n,dsInternalSimulation:`focus`,children:`focus`})]},`${t}-${n}`)]},`${t}-${n}`)))})},O.tags=[`!autodocs`],k=()=>{let e=r(i.background.primaryInverted);return(0,y.jsx)(`div`,{style:{display:`flex`,gap:`16px`,flexDirection:`column`},children:[`small`,`medium`,`large`].map(t=>[`primary`,`secondary`,`tertiary`,`ghost`,`inverted`,`critical`,`ai`,`onColor`,`classroom`].map(n=>(0,y.jsxs)(y.Fragment,{children:[(0,y.jsxs)(l,{variant:`default-regular-italic`,children:[n,` - `,t]}),(0,y.jsxs)(`div`,{style:{display:`flex`,gap:`16px`,backgroundColor:n===`inverted`||n===`classroom`?e:void 0},children:[(0,y.jsx)(p,{svg:_,assistiveText:`fav`,size:t,variant:n}),(0,y.jsx)(p,{svg:_,assistiveText:`fav`,size:t,variant:n,busy:!0}),(0,y.jsx)(p,{svg:_,assistiveText:`fav`,size:t,variant:n,disabled:!0}),(0,y.jsx)(p,{svg:_,assistiveText:`fav`,size:t,variant:n,dsInternalSimulation:`hover`}),(0,y.jsx)(p,{svg:_,assistiveText:`fav`,size:t,variant:n,dsInternalSimulation:`active`}),(0,y.jsx)(p,{svg:_,assistiveText:`fav`,size:t,variant:n,dsInternalSimulation:`focus`})]},`${t}-${n}`)]})))})},k.storyName=`Combinations (IconButton)`,k.tags=[`!autodocs`],A={parameters:{chromatic:{disableSnapshot:!0}},decorators:[(e,{args:t})=>(0,y.jsx)(`div`,{style:{backgroundColor:t.variant===`inverted`?`black`:void 0},children:e()})],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":_},control:`select`},trailingSvgIcon:{options:[`None`,`With Icon`],mapping:{None:void 0,"With Icon":_},control:`select`},url:{table:{disable:!0}},a11yLabel:{table:{disable:!0}}}},x.parameters={...x.parameters,docs:{...x.parameters?.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>`,...x.parameters?.docs?.source}}},S.parameters={...S.parameters,docs:{...S.parameters?.docs,source:{originalSource:`() => {
+  const grey = getTokenVar(color.background.primaryInverted);
+  return <div style={{
+    display: 'flex',
+    gap: '1rem'
+  }}>
+            <Button variant="primary">Primary</Button>
+            <Button variant="secondary">Secondary</Button>
+            <Button variant="tertiary">Tertiary</Button>
+            <Button variant="ghost">Ghost</Button>
+            <div style={{
+      backgroundColor: grey,
+      borderRadius: '8px'
+    }}>
+                <Button variant="inverted">Inverted</Button>
+            </div>
+            <Button variant="critical">Critical</Button>
+            <Button variant="onColor">onColor</Button>
+        </div>;
+}`,...S.parameters?.docs?.source}}},C.parameters={...C.parameters,docs:{...C.parameters?.docs,source:{originalSource:`() => {
+  const grey = getTokenVar(color.background.primaryInverted);
+  return <div style={{
+    display: 'flex',
+    gap: '1rem'
+  }}>
+            <IconButton variant="primary" svg={Fav} assistiveText="primary" />
+            <IconButton variant="secondary" svg={Fav} assistiveText="secondary" />
+            <IconButton variant="tertiary" svg={Fav} assistiveText="tertiary" />
+            <IconButton variant="ghost" svg={Fav} assistiveText="ghost" />
+            <div style={{
+      backgroundColor: grey,
+      borderRadius: '8px'
+    }}>
+                <IconButton variant="inverted" svg={Fav} assistiveText="inverted" />
+            </div>
+            <IconButton variant="critical" svg={Fav} assistiveText="critical" />
+            <IconButton variant="onColor" svg={Fav} assistiveText="onColor" />
+        </div>;
+}`,...C.parameters?.docs?.source}}},w.parameters={...w.parameters,docs:{...w.parameters?.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" />
+                <IconButton variant="classroom" svg={Fav} assistiveText="Fav" selected />
+            </div>
+        </div>;
+}`,...w.parameters?.docs?.source}}},T.parameters={...T.parameters,docs:{...T.parameters?.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>`,...T.parameters?.docs?.source}}},E.parameters={...E.parameters,docs:{...E.parameters?.docs,source:{originalSource:`() => <>
+        <Button wrap size="small">
+            Do the really quite unusually long thing
+        </Button>
+        <Button wrap size="medium">
+            Do the really quite unusually long thing
+        </Button>
+        <Button wrap size="large">
+            Do the really quite unusually long thing
+        </Button>
+    </>`,...E.parameters?.docs?.source}}},D.parameters={...D.parameters,docs:{...D.parameters?.docs,source:{originalSource:`() => {
+  return <Button size={{
+    _: 'small',
+    'medium-l': 'medium',
+    'wide-s': 'large'
+  }} leadingSvgIcon={Fav}>
+            Change the viewport size
+        </Button>;
+}`,...D.parameters?.docs?.source}}},O.parameters={...O.parameters,docs:{...O.parameters?.docs,source:{originalSource:`() => {
+  const grey = getTokenVar(color.background.primaryInverted);
+  return <div style={{
+    display: 'flex',
+    gap: '16px',
+    flexDirection: 'column'
+  }}>
+            {(['small', 'medium', 'large'] as const).map(size => (['primary', 'secondary', 'tertiary', 'ghost', 'inverted', 'critical', 'ai', 'onColor', 'classroom'] as const).map(variant => <Fragment key={\`\${size}-\${variant}\`}>
+                        <Text variant="default-regular-italic">
+                            {variant} - {size}
+                        </Text>
+                        <div key={\`\${size}-\${variant}\`} style={{
+        display: 'flex',
+        gap: '16px',
+        backgroundColor: variant === 'inverted' || variant === 'classroom' ? grey : undefined
+      }}>
+                            <Button size={size} variant={variant}>
+                                button
+                            </Button>
+                            <Button size={size} variant={variant} leadingSvgIcon={Fav}>
+                                button
+                            </Button>
+                            <Button size={size} variant={variant} trailingSvgIcon={Fav}>
+                                button
+                            </Button>
+                            <Button size={size} variant={variant} busy assistiveText="Fav">
+                                button
+                            </Button>
+                            <Button size={size} variant={variant} disabled>
+                                disabled
+                            </Button>
+                            <Button size={size} variant={variant} dsInternalSimulation="hover">
+                                hover
+                            </Button>
+                            <Button size={size} variant={variant} dsInternalSimulation="active">
+                                active
+                            </Button>
+                            <Button size={size} variant={variant} dsInternalSimulation="focus">
+                                focus
+                            </Button>
+                        </div>
+                    </Fragment>))}
+        </div>;
+}`,...O.parameters?.docs?.source}}},k.parameters={...k.parameters,docs:{...k.parameters?.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>;
+}`,...k.parameters?.docs?.source}}},A.parameters={...A.parameters,docs:{...A.parameters?.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
+      }
+    }
+  }
+}`,...A.parameters?.docs?.source}}},j=[`Icons`,`Variants`,`VariantsIconButton`,`MiscVariants`,`Sizes`,`WrappingText`,`ResponsiveSize`,`Combinations`,`CombinationsIconButton`,`Playground`]}))();export{O as Combinations,k as CombinationsIconButton,x as Icons,w as MiscVariants,A as Playground,D as ResponsiveSize,T as Sizes,S as Variants,C as VariantsIconButton,E as WrappingText,j as __namedExportsOrder,b as default};

package/dist/assets/ButtonBase-DMbDbkQ4.css

@@ -0,0 +1 @@
+.button-width--width-full__nxjVK{width:100%}.button-width--width-auto__CngVf{width:auto}@media (width>=400px){.button-width--narrow-l--width-full__rZc8T{width:100%}.button-width--narrow-l--width-auto__Fs14X{width:auto}}@media (width>=700px){.button-width--medium-s--width-full__lb8XX{width:100%}.button-width--medium-s--width-auto__gtajp{width:auto}}@media (width>=880px){.button-width--medium-l--width-full__qOGDr{width:100%}.button-width--medium-l--width-auto__vFKgm{width:auto}}@media (width>=1200px){.button-width--wide-s--width-full__5nhxD{width:100%}.button-width--wide-s--width-auto__J4Ht3{width:auto}}@media (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(--f7d879);line-height:var(--1cb31f);color:var(--628fb7);font-weight:var(--d61910);text-align:center;border-radius:var(--8d5131);border-width:var(--0b1b71);-webkit-user-select:none;user-select:none;cursor:pointer;height:fit-content;transition:color var(--018058), border-color var(--018058), background-color var(--018058);-webkit-tap-highlight-color:transparent;-ms-touch-action:manipulation;touch-action:manipulation;background-color:#0000;border-style:solid;border-color:#0000;outline:none;justify-content:center;align-items:center;text-decoration:none;display:inline-flex;position:relative}.ButtonBase--content__ZEhK4{align-items:center;gap:var(--0aee7b);vertical-align:baseline;justify-content:center;display:inline-flex}.ButtonBase--is-icon-button__CDG-9 .ButtonBase--content__ZEhK4 svg{width:var(--f316e1);height:var(--f316e1)}.ButtonBase--is-icon-button__CDG-9 .ButtonBase--content__ZEhK4 svg path{fill:currentColor}.ButtonBase--is-icon-button-size-large__bebMj .ButtonBase--content__ZEhK4 svg{width:var(--7789ee);height:var(--7789ee)}.ButtonBase--busy__M2Cgo{justify-content:center;align-items:center;width:100%;height:100%;display:inline-flex;position:absolute;top:0;left:0}.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 (width>=400px){.ButtonBase--narrow-l--width-full__-H9pn{width:100%}.ButtonBase--narrow-l--width-auto__2i3td{width:auto}}@media (width>=700px){.ButtonBase--medium-s--width-full__sNHbR{width:100%}.ButtonBase--medium-s--width-auto__6T6zO{width:auto}}@media (width>=880px){.ButtonBase--medium-l--width-full__FTcYM{width:100%}.ButtonBase--medium-l--width-auto__KPNbM{width:auto}}@media (width>=1200px){.ButtonBase--wide-s--width-full__YgEMT{width:100%}.ButtonBase--wide-s--width-auto__nM-ia{width:auto}}@media (width>=1900px){.ButtonBase--wide-l--width-full__CFPdD{width:100%}.ButtonBase--wide-l--width-auto__6gGyZ{width:auto}}.ButtonBase--size-large__-OxgW{min-height:var(--3d8452);padding-top:6px;padding-bottom:6px;padding-left:var(--79f043);padding-right:var(--79f043);font-size:var(--56d354);letter-spacing:var(--dc9bea);line-height:var(--4c2ede)}.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:6px;padding-bottom:6px;padding-left:var(--aebd97);padding-right:var(--aebd97);font-size:var(--c84e20);letter-spacing:var(--ad1bd2);line-height:var(--5c2532)}.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:6px;padding-bottom:6px;padding-left:var(--d17b90);padding-right:var(--d17b90);font-size:var(--f20194);letter-spacing:var(--9663af);line-height:var(--50cd80)}.ButtonBase--is-icon-button-size-small__hZmvi{width:var(--5eca09);height:var(--5eca09);padding:0}@media (width>=400px){.ButtonBase--narrow-l--size-large__jbaAB{min-height:var(--3d8452);padding-top:6px;padding-bottom:6px;padding-left:var(--79f043);padding-right:var(--79f043);font-size:var(--56d354);letter-spacing:var(--dc9bea);line-height:var(--4c2ede)}.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:6px;padding-bottom:6px;padding-left:var(--aebd97);padding-right:var(--aebd97);font-size:var(--c84e20);letter-spacing:var(--ad1bd2);line-height:var(--5c2532)}.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:6px;padding-bottom:6px;padding-left:var(--d17b90);padding-right:var(--d17b90);font-size:var(--f20194);letter-spacing:var(--9663af);line-height:var(--50cd80)}.ButtonBase--narrow-l--is-icon-button-size-small__CkKxU{width:var(--5eca09);height:var(--5eca09);padding:0}}@media (width>=700px){.ButtonBase--medium-s--size-large__XpFoi{min-height:var(--3d8452);padding-top:6px;padding-bottom:6px;padding-left:var(--79f043);padding-right:var(--79f043);font-size:var(--56d354);letter-spacing:var(--dc9bea);line-height:var(--4c2ede)}.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:6px;padding-bottom:6px;padding-left:var(--aebd97);padding-right:var(--aebd97);font-size:var(--c84e20);letter-spacing:var(--ad1bd2);line-height:var(--5c2532)}.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:6px;padding-bottom:6px;padding-left:var(--d17b90);padding-right:var(--d17b90);font-size:var(--f20194);letter-spacing:var(--9663af);line-height:var(--50cd80)}.ButtonBase--medium-s--is-icon-button-size-small__aAjgr{width:var(--5eca09);height:var(--5eca09);padding:0}}@media (width>=880px){.ButtonBase--medium-l--size-large__yo-U7{min-height:var(--3d8452);padding-top:6px;padding-bottom:6px;padding-left:var(--79f043);padding-right:var(--79f043);font-size:var(--56d354);letter-spacing:var(--dc9bea);line-height:var(--4c2ede)}.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:6px;padding-bottom:6px;padding-left:var(--aebd97);padding-right:var(--aebd97);font-size:var(--c84e20);letter-spacing:var(--ad1bd2);line-height:var(--5c2532)}.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:6px;padding-bottom:6px;padding-left:var(--d17b90);padding-right:var(--d17b90);font-size:var(--f20194);letter-spacing:var(--9663af);line-height:var(--50cd80)}.ButtonBase--medium-l--is-icon-button-size-small__Ak0TL{width:var(--5eca09);height:var(--5eca09);padding:0}}@media (width>=1200px){.ButtonBase--wide-s--size-large__ASjU0{min-height:var(--3d8452);padding-top:6px;padding-bottom:6px;padding-left:var(--79f043);padding-right:var(--79f043);font-size:var(--56d354);letter-spacing:var(--dc9bea);line-height:var(--4c2ede)}.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:6px;padding-bottom:6px;padding-left:var(--aebd97);padding-right:var(--aebd97);font-size:var(--c84e20);letter-spacing:var(--ad1bd2);line-height:var(--5c2532)}.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:6px;padding-bottom:6px;padding-left:var(--d17b90);padding-right:var(--d17b90);font-size:var(--f20194);letter-spacing:var(--9663af);line-height:var(--50cd80)}.ButtonBase--wide-s--is-icon-button-size-small__-E8EY{width:var(--5eca09);height:var(--5eca09);padding:0}}@media (width>=1900px){.ButtonBase--wide-l--size-large__qXddN{min-height:var(--3d8452);padding-top:6px;padding-bottom:6px;padding-left:var(--79f043);padding-right:var(--79f043);font-size:var(--56d354);letter-spacing:var(--dc9bea);line-height:var(--4c2ede)}.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:6px;padding-bottom:6px;padding-left:var(--aebd97);padding-right:var(--aebd97);font-size:var(--c84e20);letter-spacing:var(--ad1bd2);line-height:var(--5c2532)}.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:6px;padding-bottom:6px;padding-left:var(--d17b90);padding-right:var(--d17b90);font-size:var(--f20194);letter-spacing:var(--9663af);line-height:var(--50cd80)}.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);-webkit-text-decoration:var(--74cfa2);text-decoration:var(--74cfa2)}.ButtonBase--variant-primary--dsInternalSimulation-hover__D7OCC{color:var(--df6151);background-color:var(--902b50);border-color:var(--1e9600)}@media (hover:hover) and (pointer:fine){.ButtonBase--variant-primary__oSRJV:hover{color:var(--df6151);background-color:var(--902b50);border-color:var(--1e9600)}}.ButtonBase--variant-primary__oSRJV[disabled],.ButtonBase--variant-primary__oSRJV[disabled]:hover{border-color:var(--f0720e);background-color:var(--818487)}.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);-webkit-text-decoration:var(--c6c73d);text-decoration:var(--c6c73d)}.ButtonBase--variant-secondary--dsInternalSimulation-hover__5F1t-{color:var(--0d6ae2);background-color:var(--0d124d);border-color:var(--76310d)}@media (hover:hover) and (pointer:fine){.ButtonBase--variant-secondary__APosz:hover{color:var(--0d6ae2);background-color:var(--0d124d);border-color:var(--76310d)}}.ButtonBase--variant-secondary__APosz[disabled],.ButtonBase--variant-secondary__APosz[disabled]:hover{border-color:var(--3f0f51);background-color:var(--ce895b)}.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);-webkit-text-decoration:var(--ce0e6a);text-decoration:var(--ce0e6a)}.ButtonBase--variant-tertiary--dsInternalSimulation-hover__juCHk{color:var(--175a77);background-color:var(--ec17be);border-color:var(--bdfcc7)}@media (hover:hover) and (pointer:fine){.ButtonBase--variant-tertiary__oSJoa:hover{color:var(--175a77);background-color:var(--ec17be);border-color:var(--bdfcc7)}}.ButtonBase--variant-tertiary__oSJoa[disabled],.ButtonBase--variant-tertiary__oSJoa[disabled]:hover{border-color:var(--fd08b7);background-color:var(--a8b810)}.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);-webkit-text-decoration:var(--5c0a2f);text-decoration:var(--5c0a2f)}.ButtonBase--variant-quaternary--dsInternalSimulation-hover__Hzaa5{color:var(--6609c6);background-color:var(--afc176);border-color:var(--51977c)}@media (hover:hover) and (pointer:fine){.ButtonBase--variant-quaternary__gX2sB:hover{color:var(--6609c6);background-color:var(--afc176);border-color:var(--51977c)}}.ButtonBase--variant-quaternary__gX2sB[disabled],.ButtonBase--variant-quaternary__gX2sB[disabled]:hover{border-color:var(--3e2684);background-color:var(--b973db)}.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);-webkit-text-decoration:var(--31d455);text-decoration:var(--31d455)}.ButtonBase--variant-ghost--dsInternalSimulation-hover__O2HFh{color:var(--e69072);background-color:var(--3b749f);border-color:var(--04cdaf)}@media (hover:hover) and (pointer:fine){.ButtonBase--variant-ghost__pR3-X:hover{color:var(--e69072);background-color:var(--3b749f);border-color:var(--04cdaf)}}.ButtonBase--variant-ghost__pR3-X[disabled],.ButtonBase--variant-ghost__pR3-X[disabled]:hover{border-color:var(--af2d26);background-color:var(--625417)}.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-critical__-t4Qu{color:var(--f68030);background-color:var(--faae28);border-color:var(--b357d0);-webkit-text-decoration:var(--91f4fa);text-decoration:var(--91f4fa)}.ButtonBase--variant-critical--dsInternalSimulation-hover__iyVj2{color:var(--c3136e);background-color:var(--064c43);border-color:var(--958f21)}@media (hover:hover) and (pointer:fine){.ButtonBase--variant-critical__-t4Qu:hover{color:var(--c3136e);background-color:var(--064c43);border-color:var(--958f21)}}.ButtonBase--variant-critical__-t4Qu[disabled],.ButtonBase--variant-critical__-t4Qu[disabled]:hover{border-color:var(--e117c7);background-color:var(--1ce20d)}.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);-webkit-text-decoration:var(--af7137);text-decoration:var(--af7137)}.ButtonBase--variant-onColor--dsInternalSimulation-hover__8ca7h{color:var(--145384);background-color:var(--549e56);border-color:var(--896b03)}@media (hover:hover) and (pointer:fine){.ButtonBase--variant-onColor__Hgon2:hover{color:var(--145384);background-color:var(--549e56);border-color:var(--896b03)}}.ButtonBase--variant-onColor__Hgon2[disabled],.ButtonBase--variant-onColor__Hgon2[disabled]:hover{border-color:var(--e1a214);background-color:var(--720019)}.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);-webkit-text-decoration:var(--4d5ea8);text-decoration:var(--4d5ea8)}.ButtonBase--variant-classroom--dsInternalSimulation-hover__Fy83L{color:var(--55bfda);background-color:var(--077a93);border-color:var(--4a0597)}@media (hover:hover) and (pointer:fine){.ButtonBase--variant-classroom__ZiZjl:hover{color:var(--55bfda);background-color:var(--077a93);border-color:var(--4a0597)}}.ButtonBase--variant-classroom__ZiZjl[disabled],.ButtonBase--variant-classroom__ZiZjl[disabled]:hover{border-color:var(--659377);background-color:var(--249654)}.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);-webkit-text-decoration:var(--6c9741);text-decoration:var(--6c9741)}.ButtonBase--variant-primaryB2b--dsInternalSimulation-hover__Nrl78{color:var(--3e45d7);background-color:var(--dcdb32);border-color:var(--a4c18c)}@media (hover:hover) and (pointer:fine){.ButtonBase--variant-primaryB2b__q-vvW:hover{color:var(--3e45d7);background-color:var(--dcdb32);border-color:var(--a4c18c)}}.ButtonBase--variant-primaryB2b__q-vvW[disabled],.ButtonBase--variant-primaryB2b__q-vvW[disabled]:hover{border-color:var(--e7f949);background-color:var(--8c7723)}.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);-webkit-text-decoration:var(--6e7352);text-decoration:var(--6e7352)}.ButtonBase--variant-primaryTutor--dsInternalSimulation-hover__HXGA0{color:var(--e91696);background-color:var(--46a009);border-color:var(--632796)}@media (hover:hover) and (pointer:fine){.ButtonBase--variant-primaryTutor__B6BAn:hover{color:var(--e91696);background-color:var(--46a009);border-color:var(--632796)}}.ButtonBase--variant-primaryTutor__B6BAn[disabled],.ButtonBase--variant-primaryTutor__B6BAn[disabled]:hover{border-color:var(--f6a20e);background-color:var(--07d682)}.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);-webkit-text-decoration:var(--fb8624);text-decoration:var(--fb8624)}.ButtonBase--variant-inverted--dsInternalSimulation-hover__oX9GA{color:var(--79a09e);background-color:var(--8a16b5);border-color:var(--19fa74)}@media (hover:hover) and (pointer:fine){.ButtonBase--variant-inverted__9yknJ:hover{color:var(--79a09e);background-color:var(--8a16b5);border-color:var(--19fa74)}}.ButtonBase--variant-inverted__9yknJ[disabled],.ButtonBase--variant-inverted__9yknJ[disabled]:hover{border-color:var(--e797f1);background-color:var(--b1756a)}.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);-webkit-text-decoration:var(--fd7ece);text-decoration:var(--fd7ece)}.ButtonBase--variant-newFeature--dsInternalSimulation-hover__plXXr{color:var(--ddcea1);background-color:var(--dd2815);border-color:var(--98c0df)}@media (hover:hover) and (pointer:fine){.ButtonBase--variant-newFeature__8uk2D:hover{color:var(--ddcea1);background-color:var(--dd2815);border-color:var(--98c0df)}}.ButtonBase--variant-newFeature__8uk2D[disabled],.ButtonBase--variant-newFeature__8uk2D[disabled]:hover{border-color:var(--7d2338);background-color:var(--e8c509)}.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);-webkit-text-decoration:var(--c82204);text-decoration:var(--c82204)}.ButtonBase--variant-ai--dsInternalSimulation-hover__78mV7{color:var(--59b757);background-color:var(--f043dc);border-color:var(--2ecd73)}@media (hover:hover) and (pointer:fine){.ButtonBase--variant-ai__iq9tW:hover{color:var(--59b757);background-color:var(--f043dc);border-color:var(--2ecd73)}}.ButtonBase--variant-ai__iq9tW[disabled],.ButtonBase--variant-ai__iq9tW[disabled]:hover{border-color:var(--6ac212);background-color:var(--d35901)}.ButtonBase--variant-ai__iq9tW:active,.ButtonBase--variant-ai--dsInternalSimulation-active__48Tn0{color:var(--349ae3);background-color:var(--5bba7d)}.ButtonBase--variant-ai__iq9tW{border:var(--0b1b71) solid var(--c03289);position:relative}@supports ((-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)) or (mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0))) and (mask-composite:exclude){.ButtonBase--variant-ai__iq9tW{border-color:#0000}.ButtonBase--variant-ai__iq9tW:before{content:"";border-radius:inherit;padding:var(--0b1b71);margin:calc(-1 * var(--0b1b71));background:var(--cab35d);pointer-events:none;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}}.ButtonBase--variant-ai__iq9tW[disabled]:before{display:none}.ButtonBase--variant-ai__iq9tW[disabled],.ButtonBase--variant-ai__iq9tW[disabled]:hover{border-color:var(--6ac212)}.ButtonBase--no-wrap__8TMhQ{min-width:max-content}