@preply/ds-docs 11.0.0 → 11.1.0

package/dist/assets/FieldButton-B7nd3jTk.css

@@ -0,0 +1 @@
+.FieldButton__ZIYKf{min-width:var(--d57208);height:var(--3caeb9);border-radius:var(--0191ea);border-style:solid;border-width:1px;border-color:var(--ea1746);cursor:pointer;transition:background-color var(--018058);-webkit-tap-highlight-color:transparent;-ms-touch-action:manipulation;touch-action:manipulation;background:0 0;border:none;outline:none;justify-content:center;align-items:center;display:flex}@media (hover:hover) and (pointer:fine){.FieldButton__ZIYKf:hover{background-color:var(--0bbea4)}}.FieldButton__ZIYKf:active{background-color:var(--33e933)}.FieldButton__ZIYKf:focus-visible{outline-style:solid;outline-color:var(--603ec6);outline-width:var(--99d31f);outline-offset:var(--c0b12c)}.FieldButton__ZIYKf svg{width:var(--f316e1);height:var(--f316e1)}

package/dist/assets/FieldButton-lc__KGvz.js

@@ -0,0 +1 @@
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,t as i,y as a}from"./dist-DtfJeYQK.js";import{t as o}from"./jsx-runtime-C2wGStra.js";import{n as s,t as c}from"./dist-Cc1j9Pjk.js";import{n as l,t as u}from"./filterAttributesPassedByRadixUIAtRuntime-CGiuUnR2.js";var d,f,p=t((()=>{d=`FieldButton__ZIYKf`,f={FieldButton:d}})),m,h,g,_=t((()=>{c(),i(),m=e(n(),1),l(),p(),h=o(),g=(0,m.forwardRef)(function({svg:e,assistiveText:t,onClick:n,dataset:i,...o},c){let l=a(f,s.FieldButton),d=e=>{e.stopPropagation(),n?.(e)};return(0,h.jsx)(`button`,{...u(o),...r(i,{preplyDsComponent:s.FieldButton}),className:l.join(` `),title:t,onClick:d,ref:c,type:`button`,children:(0,h.jsx)(e,{"aria-hidden":`true`,focusable:`false`})})});try{g.displayName=`FieldButton`,g.__docgenInfo={description:``,displayName:`FieldButton`,props:{svg:{defaultValue:null,description:``,name:`svg`,required:!0,type:{name:`enum`,value:[{value:`ComponentClass<SVGAttributes<SVGElement>, any>`},{value:`FunctionComponent<SVGAttributes<SVGElement>>`}]}},assistiveText:{defaultValue:null,description:``,name:`assistiveText`,required:!0,type:{name:`string`}},onClick:{defaultValue:null,description:``,name:`onClick`,required:!0,type:{name:`MouseEventHandler`}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:`ref`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`(instance: HTMLButtonElement | null) => void`},{value:`RefObject<HTMLButtonElement>`}]}},key:{defaultValue:null,description:``,name:`key`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`number`},{value:`bigint`}]}}}}}catch{}}));export{_ as n,g as t};

package/dist/assets/FieldButton.stories-BweftrEg.js

@@ -0,0 +1 @@
+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"./FieldButton-lc__KGvz.js";import{n as o,t as s}from"./TokyoUILibraryExplore-BZ10fOAZ.js";var c,l,u,d;t((()=>{o(),e(n(),1),i(),c=r(),l={title:`components/FieldButton`,component:a},u=()=>(0,c.jsx)(a,{svg:s,assistiveText:`Lorem Ipsum`,onClick:()=>void 0}),u.storyName=`FieldButton`,u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`() => <FieldButton svg={LibSvg} assistiveText="Lorem Ipsum" onClick={() => undefined} />`,...u.parameters?.docs?.source}}},d=[`Base`]}))();export{u as Base,d as __namedExportsOrder,l as default};

package/dist/assets/FormControl-DX3yRMc2.css

@@ -0,0 +1 @@
+.container__g46MP{--ds-input-scroll-margin-top:var(--d434fb);gap:var(--590b8d);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;flex-direction:column;display:flex}.container__g46MP:has(.label__dGrlk:not([data-hidden=true])){--ds-input-scroll-margin-top:calc(var(--590b8d) + var(--360264))}.label__dGrlk{color:var(--628fb7);font-size:var(--343d89);font-weight:var(--b44390);line-height:var(--360264);letter-spacing:var(--b8c41f)}.label__dGrlk[data-hidden=true]{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.label__dGrlk .required__w9EwB{white-space:nowrap;color:var(--a2f1c8)}.description__AST5n,.error__uRqiU{margin:var(--d434fb);font-weight:var(--c2057a);font-size:var(--d4ea3f);line-height:var(--ff8dfa);letter-spacing:var(--cdd9f4);color:var(--a2f1c8)}.error__uRqiU{color:var(--8ec9e5)}

package/dist/assets/FormControl-cSvM3XwI.js

@@ -0,0 +1,7 @@
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,t as i}from"./dist-DtfJeYQK.js";import{t as a}from"./jsx-runtime-C2wGStra.js";import{St as o,_ as s}from"./iframe-f34VuKy-.js";import{n as c,t as l}from"./dist-Cc1j9Pjk.js";import{i as u,r as d}from"./lib-CXCPi5ID.js";var f,p,m,h,g,_,v=t((()=>{f=`container__g46MP`,p=`label__dGrlk`,m=`required__w9EwB`,h=`description__AST5n`,g=`error__uRqiU`,_={container:f,label:p,required:m,description:h,error:g}}));function y({id:e,error:t,description:n,hasError:r}){let i={};return r&&(i[`aria-invalid`]=!0),t&&(i[`aria-invalid`]=!0,i[`aria-errormessage`]=`${e}-error`),n&&(i[`aria-describedby`]=`${e}-description`),i}var b,x,S,C=t((()=>{s(),b=e(n(),1),v(),d(),i(),l(),x=a(),S=({id:e,label:t,hideLabel:n,description:i,error:a,hasError:s,children:l,required:d,dataset:f,onClick:p,preplyDsComponent:m=c.FormControl,useLegacyRequiredLabel:h=!1})=>{let g=(0,b.useId)(),v=e||g,S=y({id:v,error:a,description:i,hasError:s}),C=r(f,{preplyDsComponent:m});return(0,x.jsxs)(`div`,{className:_.container,...C,onClick:p,children:[(0,x.jsxs)(`label`,{htmlFor:v,className:_.label,"data-hidden":n||!t,"data-testid":`label`,children:[t,!!h&&d&&(0,x.jsxs)(`span`,{"aria-hidden":!0,className:_.required,children:[` • `,(0,x.jsx)(u,{id:`preply-ds.fieldLabel.required`,defaultMessage:`Required`,description:`Form field required label`})]}),!h&&!d&&(0,x.jsxs)(`span`,{"aria-hidden":!0,className:_.required,children:[` • `,(0,x.jsx)(u,{id:`preply-ds.fieldLabel.optional`,defaultMessage:`Optional`,description:`Form field optional label`})]})]}),(0,x.jsx)(o,{id:v,required:d,...S,children:l}),a?(0,x.jsx)(`p`,{className:_.error,role:`alert`,id:`${v}-error`,"data-testid":`error`,children:a}):i?(0,x.jsx)(`p`,{className:_.description,id:`${v}-description`,"data-testid":`description`,children:i}):null]})};try{S.displayName=`FormControl`,S.__docgenInfo={description:"FormControl component provides a consistent layout and accessibility\nfor the form fields. You can use it to create custom fields not supported\nby the DS yet.\n\nNote that FormControl will implicitly provide some props to the child component:\n\n- `id` forwarded from FormControl props or will be generated automatically for accessibility purposes;\n- `aria-invalid` and `aria-errormessage` when `error` is provided;\n- `aria-describedby` when `description` is provided;\n- `required` when FormControl's `required` is true;",displayName:`FormControl`,props:{id:{defaultValue:null,description:`The id to be passed to the input element.
+If not provided, will be generated for accessibility purposes.`,name:`id`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},label:{defaultValue:null,description:"The field label. This is needed for accessibility purposes, but can be\nhidden using the `hideLabel` prop.",name:`label`,required:!0,type:{name:`enum`,value:[{value:`undefined`},{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},hideLabel:{defaultValue:null,description:"Use this to hide the `label` visually, but keep it in the accessibility\ntree.",name:`hideLabel`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},description:{defaultValue:null,description:`Additional descriptive text that appears below the input field
+to provide more context or instructions to the user.`,name:`description`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},error:{defaultValue:null,description:`Error message to display when the field has an invalid value.`,name:`error`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},hasError:{defaultValue:null,description:"Whether the field has an error.\n@deprecated Use `error` prop to explicitly describe the error to users",name:`hasError`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},required:{defaultValue:null,description:`Indicates if the field is required. When false, adds a "Optional"
+indicator next to the label.`,name:`required`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},onClick:{defaultValue:null,description:``,name:`onClick`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler<HTMLDivElement>`}]}},preplyDsComponent:{defaultValue:{value:`webComponentNames.FormControl`},description:`@deprecated The attribute is meant for internal usage only
+@ignore`,name:`preplyDsComponent`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},useLegacyRequiredLabel:{defaultValue:{value:`false`},description:`When true, adds a "Required" indicator next to the label for the required fields.
+When false, adds a "Optional" indicator next to the label for the optional fields instead.
+@deprecated This is a temporary solution for gradual migration to the "Optional" label.`,name:`useLegacyRequiredLabel`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}}}}}catch{}}));export{C as n,S as t};

package/dist/assets/FormControl.stories-guYQ8AuE.js

@@ -0,0 +1,42 @@
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{C as r,Q as i,Y as a,et as o,t as s,w as c}from"./dist-DtfJeYQK.js";import{t as l}from"./jsx-runtime-C2wGStra.js";import{n as u,t as d}from"./Icon-CfZyHxyH.js";import{n as f,t as p}from"./Text-bm2vnOS2.js";import{n as m,t as h}from"./FormControl-cSvM3XwI.js";import{r as g,t as _}from"./styled-components.browser.esm-BqKZXl6d.js";import{n as v,t as y}from"./TokyoUIUpload-B1wN3uN1.js";var b,x,S,C,w,T,E,D;t((()=>{m(),g(),b=e(n(),1),u(),v(),s(),c(),f(),x=l(),S={title:`Components/FormControl`,component:h,parameters:{layout:`padded`}},C=_.input.attrs({type:`file`})`
+    visibility: hidden;
+    position: absolute;
+    width: 0;
+    height: 0;
+    opacity: 0;
+`,w=_.label`
+    background: ${r(a.background.secondary)};
+    padding: ${r(o[24])} ${r(o[16])};
+    border-radius: ${r(i[8])};
+    cursor: pointer;
+
+    &:has(input[aria-invalid='true']) {
+        background: ${r(a.background.criticalLight)};
+    }
+`,T=_.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+`,E=()=>(0,x.jsx)(h,{label:`Upload photo`,description:`Your photo will be displayed in your profile`,children:(0,x.jsx)(e=>{let[t,n]=(0,b.useState)(`Select file to upload`),r=e[`aria-invalid`]?`critical`:`secondary`,i=t=>{n(t.target.files?.[0]?.name||`Select file to upload`),e.onChange?.(t)};return(0,x.jsxs)(w,{children:[(0,x.jsx)(C,{...e,onChange:i}),(0,x.jsxs)(T,{children:[(0,x.jsx)(d,{size:`32`,svg:y,accent:r}),(0,x.jsx)(p,{variant:`default-regular`,accent:r,children:t})]})]})},{})}),E.parameters={...E.parameters,docs:{...E.parameters?.docs,source:{originalSource:`() => {
+  const FileInput = (props: HTMLAttributes<HTMLInputElement>) => {
+    const [text, setText] = useState('Select file to upload');
+    const accent = props['aria-invalid'] ? 'critical' : 'secondary';
+    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+      setText(e.target.files?.[0]?.name || 'Select file to upload');
+      props.onChange?.(e);
+    };
+    return <Label>
+                <Input {...props} onChange={handleChange} />
+                <Inner>
+                    <Icon size="32" svg={TokyoUIUpload} accent={accent} />
+                    <Text variant="default-regular" accent={accent}>
+                        {text}
+                    </Text>
+                </Inner>
+            </Label>;
+  };
+  return <FormControl label="Upload photo" description="Your photo will be displayed in your profile">
+            <FileInput />
+        </FormControl>;
+}`,...E.parameters?.docs?.source},description:{story:`This example demonstrates how to use the FormControl to create a custom input field.`,...E.parameters?.docs?.description}}},D=[`CustomFormField`]}))();export{E as CustomFormField,D as __namedExportsOrder,S as default};

package/dist/assets/Heading-BMcfRMjT.css

@@ -0,0 +1 @@
+.Heading__Erkb1{-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;font-size:var(--f7d879);line-height:var(--1cb31f);margin:0}.Heading--variant-massive__JFGji{font-size:var(--cd577e);font-weight:var(--8c9f05);line-height:var(--2e9eee);letter-spacing:var(--d662ea)}.Heading--variant-huge__47FQz{font-size:var(--890dda);font-weight:var(--b1d4f5);line-height:var(--a1602a);letter-spacing:var(--65a2cd)}.Heading--variant-extraLarge__xRrqx{font-size:var(--0728b9);font-weight:var(--26b05f);line-height:var(--aaf219);letter-spacing:var(--ceac96)}.Heading--variant-large__wNK6S{font-size:var(--5d91ee);font-weight:var(--be9403);line-height:var(--ba6c7f);letter-spacing:var(--6408ce)}.Heading--variant-medium__bCNZ-{font-size:var(--d4d05b);font-weight:var(--6b93f9);line-height:var(--a7e8c0);letter-spacing:var(--3e1763)}.Heading--variant-small__308Nb{font-size:var(--054730);font-weight:var(--e1e6cd);line-height:var(--ced741);letter-spacing:var(--b63a2b)}@media (width>=400px){.Heading--narrow-l--variant-massive__yg4AJ{font-size:var(--cd577e);font-weight:var(--8c9f05);line-height:var(--2e9eee);letter-spacing:var(--d662ea)}.Heading--narrow-l--variant-huge__y9b4N{font-size:var(--890dda);font-weight:var(--b1d4f5);line-height:var(--a1602a);letter-spacing:var(--65a2cd)}.Heading--narrow-l--variant-extraLarge__XgyJu{font-size:var(--0728b9);font-weight:var(--26b05f);line-height:var(--aaf219);letter-spacing:var(--ceac96)}.Heading--narrow-l--variant-large__tzTo6{font-size:var(--5d91ee);font-weight:var(--be9403);line-height:var(--ba6c7f);letter-spacing:var(--6408ce)}.Heading--narrow-l--variant-medium__iP3sG{font-size:var(--d4d05b);font-weight:var(--6b93f9);line-height:var(--a7e8c0);letter-spacing:var(--3e1763)}.Heading--narrow-l--variant-small__KeKjn{font-size:var(--054730);font-weight:var(--e1e6cd);line-height:var(--ced741);letter-spacing:var(--b63a2b)}}@media (width>=700px){.Heading--medium-s--variant-massive__L-b4J{font-size:var(--cd577e);font-weight:var(--8c9f05);line-height:var(--2e9eee);letter-spacing:var(--d662ea)}.Heading--medium-s--variant-huge__2o5EA{font-size:var(--890dda);font-weight:var(--b1d4f5);line-height:var(--a1602a);letter-spacing:var(--65a2cd)}.Heading--medium-s--variant-extraLarge__eHmYu{font-size:var(--0728b9);font-weight:var(--26b05f);line-height:var(--aaf219);letter-spacing:var(--ceac96)}.Heading--medium-s--variant-large__AI3KL{font-size:var(--5d91ee);font-weight:var(--be9403);line-height:var(--ba6c7f);letter-spacing:var(--6408ce)}.Heading--medium-s--variant-medium__t5dUK{font-size:var(--d4d05b);font-weight:var(--6b93f9);line-height:var(--a7e8c0);letter-spacing:var(--3e1763)}.Heading--medium-s--variant-small__fCdNa{font-size:var(--054730);font-weight:var(--e1e6cd);line-height:var(--ced741);letter-spacing:var(--b63a2b)}}@media (width>=880px){.Heading--medium-l--variant-massive__jI3FW{font-size:var(--cd577e);font-weight:var(--8c9f05);line-height:var(--2e9eee);letter-spacing:var(--d662ea)}.Heading--medium-l--variant-huge__k0UpW{font-size:var(--890dda);font-weight:var(--b1d4f5);line-height:var(--a1602a);letter-spacing:var(--65a2cd)}.Heading--medium-l--variant-extraLarge__yfai7{font-size:var(--0728b9);font-weight:var(--26b05f);line-height:var(--aaf219);letter-spacing:var(--ceac96)}.Heading--medium-l--variant-large__65QTG{font-size:var(--5d91ee);font-weight:var(--be9403);line-height:var(--ba6c7f);letter-spacing:var(--6408ce)}.Heading--medium-l--variant-medium__UvxHB{font-size:var(--d4d05b);font-weight:var(--6b93f9);line-height:var(--a7e8c0);letter-spacing:var(--3e1763)}.Heading--medium-l--variant-small__QI2p2{font-size:var(--054730);font-weight:var(--e1e6cd);line-height:var(--ced741);letter-spacing:var(--b63a2b)}}@media (width>=1200px){.Heading--wide-s--variant-massive__B1S84{font-size:var(--cd577e);font-weight:var(--8c9f05);line-height:var(--2e9eee);letter-spacing:var(--d662ea)}.Heading--wide-s--variant-huge__KvYrn{font-size:var(--890dda);font-weight:var(--b1d4f5);line-height:var(--a1602a);letter-spacing:var(--65a2cd)}.Heading--wide-s--variant-extraLarge__TJs8l{font-size:var(--0728b9);font-weight:var(--26b05f);line-height:var(--aaf219);letter-spacing:var(--ceac96)}.Heading--wide-s--variant-large__Wcc0E{font-size:var(--5d91ee);font-weight:var(--be9403);line-height:var(--ba6c7f);letter-spacing:var(--6408ce)}.Heading--wide-s--variant-medium__mONpk{font-size:var(--d4d05b);font-weight:var(--6b93f9);line-height:var(--a7e8c0);letter-spacing:var(--3e1763)}.Heading--wide-s--variant-small__oRKSN{font-size:var(--054730);font-weight:var(--e1e6cd);line-height:var(--ced741);letter-spacing:var(--b63a2b)}}@media (width>=1900px){.Heading--wide-l--variant-massive__twgw-{font-size:var(--cd577e);font-weight:var(--8c9f05);line-height:var(--2e9eee);letter-spacing:var(--d662ea)}.Heading--wide-l--variant-huge__DBuNF{font-size:var(--890dda);font-weight:var(--b1d4f5);line-height:var(--a1602a);letter-spacing:var(--65a2cd)}.Heading--wide-l--variant-extraLarge__H9nEI{font-size:var(--0728b9);font-weight:var(--26b05f);line-height:var(--aaf219);letter-spacing:var(--ceac96)}.Heading--wide-l--variant-large__kJarT{font-size:var(--5d91ee);font-weight:var(--be9403);line-height:var(--ba6c7f);letter-spacing:var(--6408ce)}.Heading--wide-l--variant-medium__VN27E{font-size:var(--d4d05b);font-weight:var(--6b93f9);line-height:var(--a7e8c0);letter-spacing:var(--3e1763)}.Heading--wide-l--variant-small__Skmxk{font-size:var(--054730);font-weight:var(--e1e6cd);line-height:var(--ced741);letter-spacing:var(--b63a2b)}}

package/dist/assets/Heading-CEZfMm-F.js

@@ -0,0 +1 @@
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,t as i,x as a,y as o}from"./dist-DtfJeYQK.js";import{t as s}from"./jsx-runtime-C2wGStra.js";import{n as c,t as l}from"./dist-Cc1j9Pjk.js";import{n as u,t as d}from"./text-accent-CfNKCcRq.js";import{n as f,t as p}from"./filterAttributesPassedByRadixUIAtRuntime-CGiuUnR2.js";import{n as m,t as h}from"./text-centered-ozyo-Yf9.js";var g,_,v=t((()=>{g=`Heading__Erkb1`,_={Heading:g,"Heading--variant-massive":`Heading--variant-massive__JFGji`,"Heading--variant-huge":`Heading--variant-huge__47FQz`,"Heading--variant-extraLarge":`Heading--variant-extraLarge__xRrqx`,"Heading--variant-large":`Heading--variant-large__wNK6S`,"Heading--variant-medium":`Heading--variant-medium__bCNZ-`,"Heading--variant-small":`Heading--variant-small__308Nb`,"Heading--narrow-l--variant-massive":`Heading--narrow-l--variant-massive__yg4AJ`,"Heading--narrow-l--variant-huge":`Heading--narrow-l--variant-huge__y9b4N`,"Heading--narrow-l--variant-extraLarge":`Heading--narrow-l--variant-extraLarge__XgyJu`,"Heading--narrow-l--variant-large":`Heading--narrow-l--variant-large__tzTo6`,"Heading--narrow-l--variant-medium":`Heading--narrow-l--variant-medium__iP3sG`,"Heading--narrow-l--variant-small":`Heading--narrow-l--variant-small__KeKjn`,"Heading--medium-s--variant-massive":`Heading--medium-s--variant-massive__L-b4J`,"Heading--medium-s--variant-huge":`Heading--medium-s--variant-huge__2o5EA`,"Heading--medium-s--variant-extraLarge":`Heading--medium-s--variant-extraLarge__eHmYu`,"Heading--medium-s--variant-large":`Heading--medium-s--variant-large__AI3KL`,"Heading--medium-s--variant-medium":`Heading--medium-s--variant-medium__t5dUK`,"Heading--medium-s--variant-small":`Heading--medium-s--variant-small__fCdNa`,"Heading--medium-l--variant-massive":`Heading--medium-l--variant-massive__jI3FW`,"Heading--medium-l--variant-huge":`Heading--medium-l--variant-huge__k0UpW`,"Heading--medium-l--variant-extraLarge":`Heading--medium-l--variant-extraLarge__yfai7`,"Heading--medium-l--variant-large":`Heading--medium-l--variant-large__65QTG`,"Heading--medium-l--variant-medium":`Heading--medium-l--variant-medium__UvxHB`,"Heading--medium-l--variant-small":`Heading--medium-l--variant-small__QI2p2`,"Heading--wide-s--variant-massive":`Heading--wide-s--variant-massive__B1S84`,"Heading--wide-s--variant-huge":`Heading--wide-s--variant-huge__KvYrn`,"Heading--wide-s--variant-extraLarge":`Heading--wide-s--variant-extraLarge__TJs8l`,"Heading--wide-s--variant-large":`Heading--wide-s--variant-large__Wcc0E`,"Heading--wide-s--variant-medium":`Heading--wide-s--variant-medium__mONpk`,"Heading--wide-s--variant-small":`Heading--wide-s--variant-small__oRKSN`,"Heading--wide-l--variant-massive":`Heading--wide-l--variant-massive__twgw-`,"Heading--wide-l--variant-huge":`Heading--wide-l--variant-huge__DBuNF`,"Heading--wide-l--variant-extraLarge":`Heading--wide-l--variant-extraLarge__H9nEI`,"Heading--wide-l--variant-large":`Heading--wide-l--variant-large__kJarT`,"Heading--wide-l--variant-medium":`Heading--wide-l--variant-medium__VN27E`,"Heading--wide-l--variant-small":`Heading--wide-l--variant-small__Skmxk`}})),y,b,x,S=t((()=>{l(),i(),y=e(n(),1),u(),m(),f(),v(),b=s(),x=(0,y.forwardRef)(function({children:e,variant:t,accent:n,tag:i,centered:s,dataset:l,id:u,className:f,...m},g){let v=i||`h1`,y=o(_,c.Heading,a(`variant`,t)),x=h(s),S=d(!n,n),C=[...y,...x,...S,f];return(0,b.jsx)(v,{...p(m),className:C.join(` `),...r(l,{preplyDsComponent:c.Heading}),id:u,ref:g,children:e})});try{x.displayName=`Heading`,x.__docgenInfo={description:``,displayName:`Heading`,props:{strong:{defaultValue:null,description:"@deprecated The appropriate `font-weight` is automatically set",name:`strong`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},accent:{defaultValue:null,description:``,name:`accent`,required:!1,type:{name:`enum`,value:[{value:`"placeholder"`},{value:`"primary"`},{value:`"secondary"`},{value:`"tertiary"`},{value:`"accentDark"`},{value:`"inverted"`},{value:`"positive"`},{value:`"info"`},{value:`"warning"`},{value:`"critical"`}]}},centered:{defaultValue:null,description:``,name:`centered`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`},{value:`ResponsiveProp<boolean>`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},id:{defaultValue:null,description:``,name:`id`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},variant:{defaultValue:null,description:``,name:`variant`,required:!0,type:{name:`enum`,value:[{value:`"small"`},{value:`"medium"`},{value:`"large"`},{value:`"massive"`},{value:`"huge"`},{value:`"extraLarge"`},{value:`ResponsiveProp<HeadingVariant>`}]}},tag:{defaultValue:null,description:``,name:`tag`,required:!0,type:{name:`enum`,value:[{value:`"div"`},{value:`"h1"`},{value:`"h2"`},{value:`"h3"`},{value:`"h4"`},{value:`"h5"`},{value:`"p"`},{value:`"span"`}]}},className:{defaultValue:null,description:``,name:`className`,required:!1,type:{name:`enum`,value:[{value:`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: HTMLHeadingElement | null) => void`},{value:`RefObject<HTMLHeadingElement>`}]}},key:{defaultValue:null,description:``,name:`key`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`number`},{value:`bigint`}]}}}}}catch{}}));export{S as n,x as t};

package/dist/assets/Heading.stories-CzERNny6.js

@@ -0,0 +1,67 @@
+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"./Heading-CEZfMm-F.js";import{r as o,t as s}from"./storybook-utils-CXrHOWy7.js";var c,l,u,d,f;t((()=>{e(n(),1),i(),s(),c=r(),l={title:`components/Heading`,component:a,argTypes:{centered:{description:o},variant:{description:o}}},u=()=>(0,c.jsxs)(`div`,{style:{padding:`16px`,display:`grid`,gridTemplateColumns:`auto 3fr`,alignItems:`center`,gap:`16px`},children:[(0,c.jsx)(`span`,{children:`h1 / massive`}),(0,c.jsx)(a,{tag:`h1`,variant:`massive`,children:`Lorem ipsum`}),(0,c.jsx)(`span`,{children:`h2 / huge`}),(0,c.jsx)(a,{tag:`h2`,variant:`huge`,children:`Lorem ipsum`}),(0,c.jsx)(`span`,{children:`h3 / extraLarge`}),(0,c.jsx)(a,{tag:`h3`,variant:`extraLarge`,children:`Lorem ipsum`}),(0,c.jsx)(`span`,{children:`h4 / large`}),(0,c.jsx)(a,{tag:`h4`,variant:`large`,children:`Lorem ipsum`}),(0,c.jsx)(`span`,{children:`h5 / medium`}),(0,c.jsx)(a,{tag:`h5`,variant:`medium`,children:`Lorem ipsum`}),(0,c.jsx)(`span`,{children:`p / small`}),(0,c.jsx)(a,{tag:`p`,variant:`small`,children:`Lorem ipsum`})]}),d={parameters:{chromatic:{disableSnapshot:!0}},decorators:[(e,{args:t})=>(0,c.jsx)(`div`,{style:{backgroundColor:t.accent===`inverted`?`black`:void 0},children:e()})],args:{tag:`h1`,variant:`massive`,children:`Lorem ipsum`,dataset:{qaid:`heading`}},argTypes:{centered:{control:`boolean`},dataset:{control:`object`},strong:{table:{disable:!0}}}},u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`() => <div style={{
+  padding: '16px',
+  display: 'grid',
+  gridTemplateColumns: 'auto 3fr',
+  alignItems: 'center',
+  gap: '16px'
+}}>
+        <span>h1 / massive</span>
+        <Heading tag="h1" variant="massive">
+            Lorem ipsum
+        </Heading>
+        <span>h2 / huge</span>
+        <Heading tag="h2" variant="huge">
+            Lorem ipsum
+        </Heading>
+        <span>h3 / extraLarge</span>
+        <Heading tag="h3" variant="extraLarge">
+            Lorem ipsum
+        </Heading>
+        <span>h4 / large</span>
+        <Heading tag="h4" variant="large">
+            Lorem ipsum
+        </Heading>
+        <span>h5 / medium</span>
+        <Heading tag="h5" variant="medium">
+            Lorem ipsum
+        </Heading>
+        <span>p / small</span>
+        <Heading tag="p" variant="small">
+            Lorem ipsum
+        </Heading>
+    </div>`,...u.parameters?.docs?.source}}},d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+  parameters: {
+    chromatic: {
+      disableSnapshot: true
+    }
+  },
+  decorators: [(story, {
+    args
+  }) => <div style={{
+    backgroundColor: args.accent === 'inverted' ? 'black' : undefined
+  }}>
+                {story()}
+            </div>],
+  args: {
+    tag: 'h1',
+    variant: 'massive',
+    children: 'Lorem ipsum',
+    dataset: {
+      qaid: 'heading'
+    }
+  },
+  argTypes: {
+    centered: {
+      control: 'boolean'
+    },
+    dataset: {
+      control: 'object'
+    },
+    // Disable deprecated props
+    strong: {
+      table: {
+        disable: true
+      }
+    }
+  }
+}`,...d.parameters?.docs?.source}}},f=[`Typeset`,`Playground`]}))();export{d as Playground,u as Typeset,f as __namedExportsOrder,l as default};

package/dist/assets/Icon-CfZyHxyH.js

@@ -0,0 +1,8 @@
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,t as i,w as a,x as o,y as s}from"./dist-DtfJeYQK.js";import{t as c}from"./jsx-runtime-C2wGStra.js";import{n as l,t as u}from"./dist-Cc1j9Pjk.js";import{n as d,t as f}from"./text-accent-CfNKCcRq.js";import{n as p,t as m}from"./filterAttributesPassedByRadixUIAtRuntime-CGiuUnR2.js";import{n as h,t as g}from"./render-icon-Dzkg3KVE.js";var _,v,y=t((()=>{_=`Icon__EP3Vh`,v={Icon:_,"Icon--size-16":`Icon--size-16__P716Z`,"Icon--size-24":`Icon--size-24__uOdtd`,"Icon--size-32":`Icon--size-32__zP8We`,"Icon--size-48":`Icon--size-48__-KHYK`}})),b,x,S=t((()=>{b=`ExpColor__fSHBe`,x={ExpColor:b,"ExpColor--exp-color-grey-0":`ExpColor--exp-color-grey-0__IQ8rz`,"ExpColor--exp-color-grey-50":`ExpColor--exp-color-grey-50__4wU8k`,"ExpColor--exp-color-grey-100":`ExpColor--exp-color-grey-100__idyQR`,"ExpColor--exp-color-grey-200":`ExpColor--exp-color-grey-200__bSfXM`,"ExpColor--exp-color-grey-300":`ExpColor--exp-color-grey-300__TAgB4`,"ExpColor--exp-color-grey-400":`ExpColor--exp-color-grey-400__8AFVk`,"ExpColor--exp-color-grey-500":`ExpColor--exp-color-grey-500__fFByn`,"ExpColor--exp-color-grey-600":`ExpColor--exp-color-grey-600__gRj6N`,"ExpColor--exp-color-grey-700":`ExpColor--exp-color-grey-700__3iGwa`,"ExpColor--exp-color-grey-800":`ExpColor--exp-color-grey-800__on7RX`,"ExpColor--exp-color-grey-900":`ExpColor--exp-color-grey-900__9T1OC`,"ExpColor--exp-color-pink-50":`ExpColor--exp-color-pink-50__3o0cC`,"ExpColor--exp-color-pink-100":`ExpColor--exp-color-pink-100__yBJxi`,"ExpColor--exp-color-pink-200":`ExpColor--exp-color-pink-200__Zff-J`,"ExpColor--exp-color-pink-300":`ExpColor--exp-color-pink-300__wWr90`,"ExpColor--exp-color-pink-400":`ExpColor--exp-color-pink-400__-C3Dw`,"ExpColor--exp-color-pink-500":`ExpColor--exp-color-pink-500__Kpw6U`,"ExpColor--exp-color-pink-600":`ExpColor--exp-color-pink-600__g4tqI`,"ExpColor--exp-color-pink-700":`ExpColor--exp-color-pink-700__5lL8W`,"ExpColor--exp-color-pink-800":`ExpColor--exp-color-pink-800__JdCoO`,"ExpColor--exp-color-yellow-50":`ExpColor--exp-color-yellow-50__x4D1V`,"ExpColor--exp-color-yellow-100":`ExpColor--exp-color-yellow-100__Mp3-h`,"ExpColor--exp-color-yellow-200":`ExpColor--exp-color-yellow-200__dr309`,"ExpColor--exp-color-yellow-300":`ExpColor--exp-color-yellow-300__4eqgg`,"ExpColor--exp-color-yellow-400":`ExpColor--exp-color-yellow-400__7KEax`,"ExpColor--exp-color-yellow-500":`ExpColor--exp-color-yellow-500__YFTaH`,"ExpColor--exp-color-yellow-600":`ExpColor--exp-color-yellow-600__uioue`,"ExpColor--exp-color-yellow-700":`ExpColor--exp-color-yellow-700__APgN0`,"ExpColor--exp-color-yellow-800":`ExpColor--exp-color-yellow-800__iqZ5l`,"ExpColor--exp-color-blue-50":`ExpColor--exp-color-blue-50__9YSjB`,"ExpColor--exp-color-blue-100":`ExpColor--exp-color-blue-100__msV5Z`,"ExpColor--exp-color-blue-200":`ExpColor--exp-color-blue-200__0-B47`,"ExpColor--exp-color-blue-300":`ExpColor--exp-color-blue-300__kBuCR`,"ExpColor--exp-color-blue-400":`ExpColor--exp-color-blue-400__rug3Y`,"ExpColor--exp-color-blue-500":`ExpColor--exp-color-blue-500__1zhad`,"ExpColor--exp-color-blue-600":`ExpColor--exp-color-blue-600__INDau`,"ExpColor--exp-color-blue-700":`ExpColor--exp-color-blue-700__nKtQ-`,"ExpColor--exp-color-blue-800":`ExpColor--exp-color-blue-800__AWAr2`,"ExpColor--exp-color-teal-50":`ExpColor--exp-color-teal-50__7QmhW`,"ExpColor--exp-color-teal-100":`ExpColor--exp-color-teal-100__YLRdY`,"ExpColor--exp-color-teal-200":`ExpColor--exp-color-teal-200__aUMwT`,"ExpColor--exp-color-teal-300":`ExpColor--exp-color-teal-300__wI000`,"ExpColor--exp-color-teal-400":`ExpColor--exp-color-teal-400__uVmEI`,"ExpColor--exp-color-teal-500":`ExpColor--exp-color-teal-500__HM2LK`,"ExpColor--exp-color-teal-600":`ExpColor--exp-color-teal-600__0PlFD`,"ExpColor--exp-color-teal-700":`ExpColor--exp-color-teal-700__FVY4B`,"ExpColor--exp-color-teal-800":`ExpColor--exp-color-teal-800__2dQ3c`,"ExpColor--exp-color-red-50":`ExpColor--exp-color-red-50__k0fHb`,"ExpColor--exp-color-red-100":`ExpColor--exp-color-red-100__PuJbY`,"ExpColor--exp-color-red-200":`ExpColor--exp-color-red-200__cumh2`,"ExpColor--exp-color-red-300":`ExpColor--exp-color-red-300__dUiEM`,"ExpColor--exp-color-red-400":`ExpColor--exp-color-red-400__DBCU8`,"ExpColor--exp-color-red-500":`ExpColor--exp-color-red-500__lIF6t`,"ExpColor--exp-color-red-600":`ExpColor--exp-color-red-600__NNabI`,"ExpColor--exp-color-red-700":`ExpColor--exp-color-red-700__9Tz3v`,"ExpColor--exp-color-red-800":`ExpColor--exp-color-red-800__HCek3`}})),C,w,T=t((()=>{i(),S(),C=`ExpColor`,w=e=>s(x,C,[o(`exp-color`,e)])})),E,D,O,k=t((()=>{i(),E=e(n(),1),d(),p(),y(),g(),T(),a(),u(),D=c(),O=(0,E.forwardRef)(function({svg:e,size:t=`24`,accent:n,expColor:i,label:a,dataset:o,...c},u){let d=s(v,l.Icon,[`size-${t}`]),p=f(!1,n),g=n?[]:w(i),_=[...d,...p,...g],y={...m(c),className:_.join(` `),...r(o,{preplyDsComponent:l.Icon}),ref:u};if(!e)throw Error(`Icon prop svg is mandatory`);return(0,D.jsx)(`span`,{...y,role:`img`,"aria-hidden":!a,"aria-label":a,children:h(e,{"aria-hidden":`true`,focusable:`false`})})});try{O.displayName=`Icon`,O.__docgenInfo={description:``,displayName:`Icon`,props:{svg:{defaultValue:null,description:`The SVG icon to render.
+@example import TokyoUINotesWithPad from '@preply/ds-media-icons/dist/24/TokyoUINotesWithPad.svg';
+
+<Icon svg={TokyoUINotesWithPad} />
+@example <caption>Using as react server component</caption>
+import TokyoUINotesWithPad from '@preply/ds-media-icons/dist/24/TokyoUINotesWithPad.svg';
+
+<Icon svg={<TokyoUINotesWithPad />} />`,name:`svg`,required:!0,type:{name:`enum`,value:[{value:`ComponentClass<SVGAttributes<SVGElement>, any>`},{value:`FunctionComponent<SVGAttributes<SVGElement>>`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},size:{defaultValue:{value:`24`},description:``,name:`size`,required:!1,type:{name:`enum`,value:[{value:`"16"`},{value:`"24"`},{value:`"32"`},{value:`"48"`}]}},accent:{defaultValue:null,description:``,name:`accent`,required:!1,type:{name:`enum`,value:[{value:`"placeholder"`},{value:`"primary"`},{value:`"secondary"`},{value:`"tertiary"`},{value:`"accentDark"`},{value:`"inverted"`},{value:`"positive"`},{value:`"info"`},{value:`"warning"`},{value:`"critical"`}]}},expColor:{defaultValue:null,description:"If passed along with `accent`, `accent` takes precedence.",name:`expColor`,required:!1,type:{name:`enum`,value:[{value:`"grey-0"`},{value:`"grey-50"`},{value:`"grey-100"`},{value:`"grey-200"`},{value:`"grey-300"`},{value:`"grey-400"`},{value:`"grey-500"`},{value:`"grey-600"`},{value:`"grey-700"`},{value:`"grey-800"`},{value:`"grey-900"`},{value:`"pink-50"`},{value:`"pink-100"`},{value:`"pink-200"`},{value:`"pink-300"`},{value:`"pink-400"`},{value:`"pink-500"`},{value:`"pink-600"`},{value:`"pink-700"`},{value:`"pink-800"`},{value:`"yellow-50"`},{value:`"yellow-100"`},{value:`"yellow-200"`},{value:`"yellow-300"`},{value:`"yellow-400"`},{value:`"yellow-500"`},{value:`"yellow-600"`},{value:`"yellow-700"`},{value:`"yellow-800"`},{value:`"blue-50"`},{value:`"blue-100"`},{value:`"blue-200"`},{value:`"blue-300"`},{value:`"blue-400"`},{value:`"blue-500"`},{value:`"blue-600"`},{value:`"blue-700"`},{value:`"blue-800"`},{value:`"teal-50"`},{value:`"teal-100"`},{value:`"teal-200"`},{value:`"teal-300"`},{value:`"teal-400"`},{value:`"teal-500"`},{value:`"teal-600"`},{value:`"teal-700"`},{value:`"teal-800"`},{value:`"red-50"`},{value:`"red-100"`},{value:`"red-200"`},{value:`"red-300"`},{value:`"red-400"`},{value:`"red-500"`},{value:`"red-600"`},{value:`"red-700"`},{value:`"red-800"`}]}},label:{defaultValue:null,description:"If using the icon without any adjacent descriptive text, use this prop to\nprovide an `aria-label` for assistive technologies.",name:`label`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:`ref`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`(instance: HTMLSpanElement | null) => void`},{value:`RefObject<HTMLSpanElement>`}]}},key:{defaultValue:null,description:``,name:`key`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`number`},{value:`bigint`}]}}}}}catch{}}));export{k as n,O as t};

package/dist/assets/{Icon-CyGLQNx7.css → Icon-D-_6_kTJ.css}

@@ -1 +1 @@
-.Icon__EP3Vh{display:inline-block;vertical-align:text-top}.Icon__EP3Vh svg{display:block;width:100%;min-width:100%;max-width:100%;max-height:100%;fill:currentColor}.Icon--size-16__P716Z{width:var(--656bbc);height:var(--656bbc);min-width:var(--656bbc);max-width:var(--656bbc)}.Icon--size-24__uOdtd{width:var(--81dc82);height:var(--81dc82);min-width:var(--81dc82);max-width:var(--81dc82)}.Icon--size-32__zP8We{width:var(--2a6452);height:var(--2a6452);min-width:var(--2a6452);max-width:var(--2a6452)}.Icon--size-48__-KHYK{width:var(--03d2e4);height:var(--03d2e4);min-width:var(--03d2e4);max-width:var(--03d2e4)}.ExpColor__fSHBe.ExpColor--exp-color-grey-0__IQ8rz{color:var(--d751dc)}.ExpColor__fSHBe.ExpColor--exp-color-grey-50__4wU8k{color:var(--d4e1b8)}.ExpColor__fSHBe.ExpColor--exp-color-grey-100__idyQR{color:var(--e986ec)}.ExpColor__fSHBe.ExpColor--exp-color-grey-200__bSfXM{color:var(--8a8cb8)}.ExpColor__fSHBe.ExpColor--exp-color-grey-300__TAgB4{color:var(--e7dcf4)}.ExpColor__fSHBe.ExpColor--exp-color-grey-400__8AFVk{color:var(--d48a93)}.ExpColor__fSHBe.ExpColor--exp-color-grey-500__fFByn{color:var(--9b582c)}.ExpColor__fSHBe.ExpColor--exp-color-grey-600__gRj6N{color:var(--bd0a12)}.ExpColor__fSHBe.ExpColor--exp-color-grey-700__3iGwa{color:var(--5540cb)}.ExpColor__fSHBe.ExpColor--exp-color-grey-800__on7RX{color:var(--3f9d59)}.ExpColor__fSHBe.ExpColor--exp-color-grey-900__9T1OC{color:var(--0d2c1d)}.ExpColor__fSHBe.ExpColor--exp-color-pink-50__3o0cC{color:var(--696262)}.ExpColor__fSHBe.ExpColor--exp-color-pink-100__yBJxi{color:var(--2a8bdc)}.ExpColor__fSHBe.ExpColor--exp-color-pink-200__Zff-J{color:var(--9c55fe)}.ExpColor__fSHBe.ExpColor--exp-color-pink-300__wWr90{color:var(--55b1b2)}.ExpColor__fSHBe.ExpColor--exp-color-pink-400__-C3Dw{color:var(--e2e617)}.ExpColor__fSHBe.ExpColor--exp-color-pink-500__Kpw6U{color:var(--28075b)}.ExpColor__fSHBe.ExpColor--exp-color-pink-600__g4tqI{color:var(--0d21bc)}.ExpColor__fSHBe.ExpColor--exp-color-pink-700__5lL8W{color:var(--dcc28c)}.ExpColor__fSHBe.ExpColor--exp-color-pink-800__JdCoO{color:var(--e2ccaa)}.ExpColor__fSHBe.ExpColor--exp-color-yellow-50__x4D1V{color:var(--f73f81)}.ExpColor__fSHBe.ExpColor--exp-color-yellow-100__Mp3-h{color:var(--05c737)}.ExpColor__fSHBe.ExpColor--exp-color-yellow-200__dr309{color:var(--32d8a2)}.ExpColor__fSHBe.ExpColor--exp-color-yellow-300__4eqgg{color:var(--92f9a7)}.ExpColor__fSHBe.ExpColor--exp-color-yellow-400__7KEax{color:var(--4db3c1)}.ExpColor__fSHBe.ExpColor--exp-color-yellow-500__YFTaH{color:var(--2d6e08)}.ExpColor__fSHBe.ExpColor--exp-color-yellow-600__uioue{color:var(--2db5c2)}.ExpColor__fSHBe.ExpColor--exp-color-yellow-700__APgN0{color:var(--b31329)}.ExpColor__fSHBe.ExpColor--exp-color-yellow-800__iqZ5l{color:var(--66ebdf)}.ExpColor__fSHBe.ExpColor--exp-color-blue-50__9YSjB{color:var(--6ae6f0)}.ExpColor__fSHBe.ExpColor--exp-color-blue-100__msV5Z{color:var(--b916ba)}.ExpColor__fSHBe.ExpColor--exp-color-blue-200__0-B47{color:var(--c6fc9c)}.ExpColor__fSHBe.ExpColor--exp-color-blue-300__kBuCR{color:var(--b773b2)}.ExpColor__fSHBe.ExpColor--exp-color-blue-400__rug3Y{color:var(--e848c4)}.ExpColor__fSHBe.ExpColor--exp-color-blue-500__1zhad{color:var(--e57766)}.ExpColor__fSHBe.ExpColor--exp-color-blue-600__INDau{color:var(--fdf041)}.ExpColor__fSHBe.ExpColor--exp-color-blue-700__nKtQ-{color:var(--cd5904)}.ExpColor__fSHBe.ExpColor--exp-color-blue-800__AWAr2{color:var(--440fc3)}.ExpColor__fSHBe.ExpColor--exp-color-teal-50__7QmhW{color:var(--9fac3a)}.ExpColor__fSHBe.ExpColor--exp-color-teal-100__YLRdY{color:var(--32b0b3)}.ExpColor__fSHBe.ExpColor--exp-color-teal-200__aUMwT{color:var(--873ad3)}.ExpColor__fSHBe.ExpColor--exp-color-teal-300__wI000{color:var(--202011)}.ExpColor__fSHBe.ExpColor--exp-color-teal-400__uVmEI{color:var(--4f3eb4)}.ExpColor__fSHBe.ExpColor--exp-color-teal-500__HM2LK{color:var(--c47d0d)}.ExpColor__fSHBe.ExpColor--exp-color-teal-600__0PlFD{color:var(--985403)}.ExpColor__fSHBe.ExpColor--exp-color-teal-700__FVY4B{color:var(--2c9147)}.ExpColor__fSHBe.ExpColor--exp-color-teal-800__2dQ3c{color:var(--0d9ea5)}.ExpColor__fSHBe.ExpColor--exp-color-red-50__k0fHb{color:var(--f951e9)}.ExpColor__fSHBe.ExpColor--exp-color-red-100__PuJbY{color:var(--3aa891)}.ExpColor__fSHBe.ExpColor--exp-color-red-200__cumh2{color:var(--ba4c34)}.ExpColor__fSHBe.ExpColor--exp-color-red-300__dUiEM{color:var(--943cfc)}.ExpColor__fSHBe.ExpColor--exp-color-red-400__DBCU8{color:var(--8af651)}.ExpColor__fSHBe.ExpColor--exp-color-red-500__lIF6t{color:var(--f5bfe7)}.ExpColor__fSHBe.ExpColor--exp-color-red-600__NNabI{color:var(--1bd221)}.ExpColor__fSHBe.ExpColor--exp-color-red-700__9Tz3v{color:var(--38cd90)}.ExpColor__fSHBe.ExpColor--exp-color-red-800__HCek3{color:var(--e9fcc6)}
+.Icon__EP3Vh{vertical-align:text-top;display:inline-block}.Icon__EP3Vh svg{fill:currentColor;width:100%;min-width:100%;max-width:100%;max-height:100%;display:block}.Icon--size-16__P716Z{width:var(--656bbc);height:var(--656bbc);min-width:var(--656bbc);max-width:var(--656bbc)}.Icon--size-24__uOdtd{width:var(--81dc82);height:var(--81dc82);min-width:var(--81dc82);max-width:var(--81dc82)}.Icon--size-32__zP8We{width:var(--2a6452);height:var(--2a6452);min-width:var(--2a6452);max-width:var(--2a6452)}.Icon--size-48__-KHYK{width:var(--03d2e4);height:var(--03d2e4);min-width:var(--03d2e4);max-width:var(--03d2e4)}.ExpColor__fSHBe.ExpColor--exp-color-grey-0__IQ8rz{color:var(--d751dc)}.ExpColor__fSHBe.ExpColor--exp-color-grey-50__4wU8k{color:var(--d4e1b8)}.ExpColor__fSHBe.ExpColor--exp-color-grey-100__idyQR{color:var(--e986ec)}.ExpColor__fSHBe.ExpColor--exp-color-grey-200__bSfXM{color:var(--8a8cb8)}.ExpColor__fSHBe.ExpColor--exp-color-grey-300__TAgB4{color:var(--e7dcf4)}.ExpColor__fSHBe.ExpColor--exp-color-grey-400__8AFVk{color:var(--d48a93)}.ExpColor__fSHBe.ExpColor--exp-color-grey-500__fFByn{color:var(--9b582c)}.ExpColor__fSHBe.ExpColor--exp-color-grey-600__gRj6N{color:var(--bd0a12)}.ExpColor__fSHBe.ExpColor--exp-color-grey-700__3iGwa{color:var(--5540cb)}.ExpColor__fSHBe.ExpColor--exp-color-grey-800__on7RX{color:var(--3f9d59)}.ExpColor__fSHBe.ExpColor--exp-color-grey-900__9T1OC{color:var(--0d2c1d)}.ExpColor__fSHBe.ExpColor--exp-color-pink-50__3o0cC{color:var(--696262)}.ExpColor__fSHBe.ExpColor--exp-color-pink-100__yBJxi{color:var(--2a8bdc)}.ExpColor__fSHBe.ExpColor--exp-color-pink-200__Zff-J{color:var(--9c55fe)}.ExpColor__fSHBe.ExpColor--exp-color-pink-300__wWr90{color:var(--55b1b2)}.ExpColor__fSHBe.ExpColor--exp-color-pink-400__-C3Dw{color:var(--e2e617)}.ExpColor__fSHBe.ExpColor--exp-color-pink-500__Kpw6U{color:var(--28075b)}.ExpColor__fSHBe.ExpColor--exp-color-pink-600__g4tqI{color:var(--0d21bc)}.ExpColor__fSHBe.ExpColor--exp-color-pink-700__5lL8W{color:var(--dcc28c)}.ExpColor__fSHBe.ExpColor--exp-color-pink-800__JdCoO{color:var(--e2ccaa)}.ExpColor__fSHBe.ExpColor--exp-color-yellow-50__x4D1V{color:var(--f73f81)}.ExpColor__fSHBe.ExpColor--exp-color-yellow-100__Mp3-h{color:var(--05c737)}.ExpColor__fSHBe.ExpColor--exp-color-yellow-200__dr309{color:var(--32d8a2)}.ExpColor__fSHBe.ExpColor--exp-color-yellow-300__4eqgg{color:var(--92f9a7)}.ExpColor__fSHBe.ExpColor--exp-color-yellow-400__7KEax{color:var(--4db3c1)}.ExpColor__fSHBe.ExpColor--exp-color-yellow-500__YFTaH{color:var(--2d6e08)}.ExpColor__fSHBe.ExpColor--exp-color-yellow-600__uioue{color:var(--2db5c2)}.ExpColor__fSHBe.ExpColor--exp-color-yellow-700__APgN0{color:var(--b31329)}.ExpColor__fSHBe.ExpColor--exp-color-yellow-800__iqZ5l{color:var(--66ebdf)}.ExpColor__fSHBe.ExpColor--exp-color-blue-50__9YSjB{color:var(--6ae6f0)}.ExpColor__fSHBe.ExpColor--exp-color-blue-100__msV5Z{color:var(--b916ba)}.ExpColor__fSHBe.ExpColor--exp-color-blue-200__0-B47{color:var(--c6fc9c)}.ExpColor__fSHBe.ExpColor--exp-color-blue-300__kBuCR{color:var(--b773b2)}.ExpColor__fSHBe.ExpColor--exp-color-blue-400__rug3Y{color:var(--e848c4)}.ExpColor__fSHBe.ExpColor--exp-color-blue-500__1zhad{color:var(--e57766)}.ExpColor__fSHBe.ExpColor--exp-color-blue-600__INDau{color:var(--fdf041)}.ExpColor__fSHBe.ExpColor--exp-color-blue-700__nKtQ-{color:var(--cd5904)}.ExpColor__fSHBe.ExpColor--exp-color-blue-800__AWAr2{color:var(--440fc3)}.ExpColor__fSHBe.ExpColor--exp-color-teal-50__7QmhW{color:var(--9fac3a)}.ExpColor__fSHBe.ExpColor--exp-color-teal-100__YLRdY{color:var(--32b0b3)}.ExpColor__fSHBe.ExpColor--exp-color-teal-200__aUMwT{color:var(--873ad3)}.ExpColor__fSHBe.ExpColor--exp-color-teal-300__wI000{color:var(--202011)}.ExpColor__fSHBe.ExpColor--exp-color-teal-400__uVmEI{color:var(--4f3eb4)}.ExpColor__fSHBe.ExpColor--exp-color-teal-500__HM2LK{color:var(--c47d0d)}.ExpColor__fSHBe.ExpColor--exp-color-teal-600__0PlFD{color:var(--985403)}.ExpColor__fSHBe.ExpColor--exp-color-teal-700__FVY4B{color:var(--2c9147)}.ExpColor__fSHBe.ExpColor--exp-color-teal-800__2dQ3c{color:var(--0d9ea5)}.ExpColor__fSHBe.ExpColor--exp-color-red-50__k0fHb{color:var(--f951e9)}.ExpColor__fSHBe.ExpColor--exp-color-red-100__PuJbY{color:var(--3aa891)}.ExpColor__fSHBe.ExpColor--exp-color-red-200__cumh2{color:var(--ba4c34)}.ExpColor__fSHBe.ExpColor--exp-color-red-300__dUiEM{color:var(--943cfc)}.ExpColor__fSHBe.ExpColor--exp-color-red-400__DBCU8{color:var(--8af651)}.ExpColor__fSHBe.ExpColor--exp-color-red-500__lIF6t{color:var(--f5bfe7)}.ExpColor__fSHBe.ExpColor--exp-color-red-600__NNabI{color:var(--1bd221)}.ExpColor__fSHBe.ExpColor--exp-color-red-700__9Tz3v{color:var(--38cd90)}.ExpColor__fSHBe.ExpColor--exp-color-red-800__HCek3{color:var(--e9fcc6)}

package/dist/assets/Icon-RSC-BpFBpboR.js

@@ -0,0 +1,6 @@
+import{n as e}from"./chunk-BneVvdWh.js";import{t}from"./jsx-runtime-C2wGStra.js";import{l as n,o as r,s as i}from"./iframe-f34VuKy-.js";import{r as a}from"./react-B8jdHdWa.js";import{t as o}from"./mdx-react-shim-Bi0BC7jy.js";import{ServerComponent as s,t as c}from"./Icon.stories-D27wol8h.js";function l(e){let t={code:`code`,h1:`h1`,p:`p`,pre:`pre`,...a(),...e.components};return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(r,{title:`components/Icon/Server Component`}),`
+`,(0,d.jsx)(t.h1,{id:`use-icon-as-react-server-component`,children:`Use Icon as react server component`}),`
+`,(0,d.jsxs)(t.p,{children:[`To use Icon as react server component, provide `,(0,d.jsx)(t.code,{children:`svg`}),` as element:`]}),`
+`,(0,d.jsx)(i,{of:s}),`
+`,(0,d.jsx)(t.pre,{children:(0,d.jsx)(t.code,{className:`language-jsx`,children:`<Icon svg={<TokyoUINotesWithPad />} />
+`})})]})}function u(e={}){let{wrapper:t}={...a(),...e.components};return t?(0,d.jsx)(t,{...e,children:(0,d.jsx)(l,{...e})}):l(e)}var d;e((()=>{d=t(),o(),n(),c()}))();export{u as default};

package/dist/assets/Icon.stories-D27wol8h.js

@@ -0,0 +1,45 @@
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{G as r,w as i}from"./dist-DtfJeYQK.js";import{t as a}from"./jsx-runtime-C2wGStra.js";import{n as o,t as s}from"./Icon-CfZyHxyH.js";import{n as c,t as l}from"./TokyoUINotesWithPad-DM2X7aVA.js";var u,d,f,p,m,h,g,_=t((()=>{i(),c(),e(n(),1),o(),u=a(),d={title:`components/Icon`,component:s,parameters:{docs:{description:{component:`To browse all available icons, visit the [Icon Explorer](/story/guides-assets-icon-explorer--page).`}}}},f=()=>(0,u.jsxs)(`div`,{style:{display:`flex`,alignItems:`end`,gap:`4px`},children:[(0,u.jsx)(s,{svg:l,size:`16`}),(0,u.jsx)(s,{svg:l,size:`24`}),(0,u.jsx)(s,{svg:l,size:`32`}),(0,u.jsx)(s,{svg:l,size:`48`})]}),p=()=>(0,u.jsx)(`div`,{style:{display:`flex`,flexDirection:`column`,gap:`4px`},children:r.map(e=>(0,u.jsxs)(`div`,{style:{display:`flex`,gap:16},children:[(0,u.jsx)(s,{svg:l,expColor:e.id},e.id),(0,u.jsx)(`span`,{children:e.id})]},e.id))}),m=()=>(0,u.jsx)(s,{svg:(0,u.jsx)(l,{})}),m.tags=[`!dev`,`!autodocs`],h={parameters:{chromatic:{disableSnapshot:!0}},args:{svg:l,dataset:{qaid:`icon`}},argTypes:{svg:{control:!1},dataset:{control:`object`},label:{control:`text`}}},f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`() => <div style={{
+  display: 'flex',
+  alignItems: 'end',
+  gap: '4px'
+}}>
+        <Icon svg={TokyoUINotesWithPad} size="16" />
+        <Icon svg={TokyoUINotesWithPad} size="24" />
+        <Icon svg={TokyoUINotesWithPad} size="32" />
+        <Icon svg={TokyoUINotesWithPad} size="48" />
+    </div>`,...f.parameters?.docs?.source}}},p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`() => <div style={{
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '4px'
+}}>
+        {EXP_COLOR_NAME_OPTIONS.map(expColor => <div key={expColor.id} style={{
+    display: 'flex',
+    gap: 16
+  }}>
+                <Icon svg={TokyoUINotesWithPad} key={expColor.id} expColor={expColor.id} />
+                <span>{expColor.id}</span>
+            </div>)}
+    </div>`,...p.parameters?.docs?.source}}},m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`() => <Icon svg={<TokyoUINotesWithPad />} />`,...m.parameters?.docs?.source}}},h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
+  parameters: {
+    chromatic: {
+      disableSnapshot: true
+    }
+  },
+  args: {
+    svg: TokyoUINotesWithPad,
+    dataset: {
+      qaid: 'icon'
+    }
+  },
+  argTypes: {
+    svg: {
+      control: false
+    },
+    dataset: {
+      control: 'object'
+    },
+    label: {
+      control: 'text'
+    }
+  }
+}`,...h.parameters?.docs?.source}}},g=[`Sizes`,`ExpColors`,`ServerComponent`,`Playground`]}));_();export{p as ExpColors,h as Playground,m as ServerComponent,f as Sizes,g as __namedExportsOrder,d as default,_ as t};

package/dist/assets/IconButton-CUt4Aks_.js

@@ -0,0 +1,8 @@
+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,w as a}from"./dist-DtfJeYQK.js";import{t as o}from"./jsx-runtime-C2wGStra.js";import{n as s,t as c}from"./dist-Cc1j9Pjk.js";import{n as l,t as u}from"./render-icon-Dzkg3KVE.js";import{n as d,t as f}from"./ButtonBase-DV0YtoS6.js";var p,m,h,g,_=t((()=>{p=`bubbleCounter__IIv-p`,m=`childTargetOverlay__7xCVK`,h=`cutout__ooHoK`,g={bubbleCounter:p,"size-small":`size-small__eLF8T`,"size-medium":`size-medium__UY-G5`,"size-large":`size-large__qs1m8`,"variant-dark":`variant-dark__OzCSP`,"variant-light":`variant-light__vwrDe`,childTargetOverlay:m,cutout:h}})),v,y,b=t((()=>{v=`IconButton__sj2x5`,y={IconButton:v}})),x,S,C,w=t((()=>{a(),c(),x=e(n(),1),u(),d(),_(),b(),S=o(),C=(0,x.forwardRef)(function({variant:e=r,size:t=i,url:n,a11yLabel:a,svg:o,...c},u){let d=[y.IconButton,g.cutout].join(` `);return(0,S.jsx)(f,{...c,ref:u,className:d,isIconButton:!0,variant:e,size:t,url:n,a11yLabel:a,preplyDsComponent:s.IconButton,children:l(o,{"aria-hidden":`true`,focusable:`false`})})});try{C.displayName=`IconButton`,C.__docgenInfo={description:``,displayName:`IconButton`,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`}]}},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`}]}},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:`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`}]}},svg:{defaultValue:null,description:``,name:`svg`,required:!0,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{_ as i,w as n,g as r,C as t};

package/dist/assets/IconButton-D-myVwPD.css

@@ -0,0 +1 @@
+.bubbleCounter__IIv-p{border-radius:var(--aa6dcb);width:fit-content;font-size:var(--e3a55b);font-weight:var(--8cd94c);line-height:var(--732f40);letter-spacing:var(--03e2b6);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.bubbleCounter__IIv-p.size-small__eLF8T{height:var(--558c4c);min-width:var(--558c4c);padding-inline:var(--590b8d)}.bubbleCounter__IIv-p.size-medium__UY-G5{height:var(--b53873);min-width:var(--b53873);padding-inline:var(--f30851)}.bubbleCounter__IIv-p.size-large__qs1m8{height:var(--1e685c);min-width:var(--1e685c);padding-inline:var(--66b80b)}.bubbleCounter__IIv-p.variant-dark__OzCSP{background:var(--4983fe);color:var(--c2b191)}.bubbleCounter__IIv-p.variant-light__vwrDe{background:var(--a5c761);color:var(--628fb7)}.childTargetOverlay__7xCVK{isolation:isolate;width:fit-content;position:relative}.childTargetOverlay__7xCVK>.bubbleCounter__IIv-p{z-index:1;--offset:var(--ds-bubblecounter-target-offset,50%);translate:var(--offset) calc(-1 * var(--offset));outline:var(--05dd73) solid var(--ds-bubblecounter-outline-color,transparent);position:absolute;top:0;right:0}.childTargetOverlay__7xCVK:has(.cutout__ooHoK)>.bubbleCounter__IIv-p{--ds-bubblecounter-outline-color:var(--3546c3)}.IconButton__sj2x5{flex-shrink:0}

package/dist/assets/IconTile.stories-jvAqK25q.js

@@ -0,0 +1,88 @@
+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{a as i,i as a}from"./AlertBannerAction-BSNrnhbi.js";import{n as o,t as s}from"./TokyoUINotesWithPad-DM2X7aVA.js";var c,l,u,d,f,p;t((()=>{o(),e(n(),1),i(),c=r(),l={title:`components/IconTile`,component:a,parameters:{docs:{description:{component:`To browse all available icons, visit the [Icon Explorer](/story/guides-assets-icon-explorer--page).`}}}},u=()=>(0,c.jsxs)(`table`,{style:{borderCollapse:`separate`,borderSpacing:`16px`},children:[(0,c.jsx)(`thead`,{children:(0,c.jsxs)(`tr`,{children:[(0,c.jsx)(`th`,{children:`small`}),(0,c.jsx)(`th`,{children:`base`}),(0,c.jsx)(`th`,{children:`medium`}),(0,c.jsx)(`th`,{children:`large`})]})}),(0,c.jsx)(`tbody`,{children:(0,c.jsxs)(`tr`,{children:[(0,c.jsx)(`td`,{children:(0,c.jsx)(a,{svg:s,size:`small`})}),(0,c.jsx)(`td`,{children:(0,c.jsx)(a,{svg:s,size:`base`})}),(0,c.jsx)(`td`,{children:(0,c.jsx)(a,{svg:s,size:`medium`})}),(0,c.jsx)(`td`,{children:(0,c.jsx)(a,{svg:s,size:`large`})})]})})]}),d=()=>(0,c.jsxs)(`table`,{style:{borderCollapse:`separate`,borderSpacing:`16px`},children:[(0,c.jsx)(`thead`,{children:(0,c.jsxs)(`tr`,{children:[(0,c.jsx)(`th`,{children:`neutral`}),(0,c.jsx)(`th`,{children:`info`}),(0,c.jsx)(`th`,{children:`ai`}),(0,c.jsx)(`th`,{children:`positive`}),(0,c.jsx)(`th`,{children:`warning`}),(0,c.jsx)(`th`,{children:`critical`})]})}),(0,c.jsx)(`tbody`,{children:(0,c.jsxs)(`tr`,{children:[(0,c.jsx)(`td`,{children:(0,c.jsx)(a,{svg:s,tone:`neutral`})}),(0,c.jsx)(`td`,{children:(0,c.jsx)(a,{svg:s,tone:`info`})}),(0,c.jsx)(`td`,{children:(0,c.jsx)(a,{svg:s,tone:`ai`})}),(0,c.jsx)(`td`,{children:(0,c.jsx)(a,{svg:s,tone:`positive`})}),(0,c.jsx)(`td`,{children:(0,c.jsx)(a,{svg:s,tone:`warning`})}),(0,c.jsx)(`td`,{children:(0,c.jsx)(a,{svg:s,tone:`critical`})})]})})]}),f={parameters:{chromatic:{disableSnapshot:!0}},args:{svg:s,dataset:{qaid:`icon`}},argTypes:{svg:{control:!1},dataset:{control:`object`},label:{control:`text`}}},u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`() => <table style={{
+  borderCollapse: 'separate',
+  borderSpacing: '16px'
+}}>
+        <thead>
+            <tr>
+                <th>small</th>
+                <th>base</th>
+                <th>medium</th>
+                <th>large</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>
+                    <IconTile svg={TokyoUINotesWithPad} size="small" />
+                </td>
+                <td>
+                    <IconTile svg={TokyoUINotesWithPad} size="base" />
+                </td>
+                <td>
+                    <IconTile svg={TokyoUINotesWithPad} size="medium" />
+                </td>
+                <td>
+                    <IconTile svg={TokyoUINotesWithPad} size="large" />
+                </td>
+            </tr>
+        </tbody>
+    </table>`,...u.parameters?.docs?.source}}},d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`() => <table style={{
+  borderCollapse: 'separate',
+  borderSpacing: '16px'
+}}>
+        <thead>
+            <tr>
+                <th>neutral</th>
+                <th>info</th>
+                <th>ai</th>
+                <th>positive</th>
+                <th>warning</th>
+                <th>critical</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>
+                    <IconTile svg={TokyoUINotesWithPad} tone="neutral" />
+                </td>
+                <td>
+                    <IconTile svg={TokyoUINotesWithPad} tone="info" />
+                </td>
+                <td>
+                    <IconTile svg={TokyoUINotesWithPad} tone="ai" />
+                </td>
+                <td>
+                    <IconTile svg={TokyoUINotesWithPad} tone="positive" />
+                </td>
+                <td>
+                    <IconTile svg={TokyoUINotesWithPad} tone="warning" />
+                </td>
+                <td>
+                    <IconTile svg={TokyoUINotesWithPad} tone="critical" />
+                </td>
+            </tr>
+        </tbody>
+    </table>`,...d.parameters?.docs?.source}}},f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`{
+  parameters: {
+    chromatic: {
+      disableSnapshot: true
+    }
+  },
+  args: {
+    svg: TokyoUINotesWithPad,
+    dataset: {
+      qaid: 'icon'
+    }
+  },
+  argTypes: {
+    svg: {
+      control: false
+    },
+    dataset: {
+      control: 'object'
+    },
+    label: {
+      control: 'text'
+    }
+  }
+}`,...f.parameters?.docs?.source}}},p=[`Sizes`,`Tones`,`Playground`]}))();export{f as Playground,u as Sizes,d as Tones,p as __namedExportsOrder,l as default};