@preply/ds-docs 2.5.0 → 2.5.1

package/dist/assets/TextareaField.stories-BcSqzGGD.js

@@ -0,0 +1,221 @@
+import{j as n}from"./jsx-runtime-BTJTZTIL.js";import{r as s}from"./index-Cb9e4tly.js";import{a as r}from"./chunk-D5ZWXAHU-BhFjjRSl.js";import{e as i,u as Fe,a as Re}from"./index-DDyIDR-R.js";import{B as j}from"./Button-BnZPebye.js";import{F as Be}from"./FieldLayout-DYZlWQ1D.js";import{s as ke,u as je,I as _e}from"./FieldLayoutBase-DbLlwrS7.js";import{m as ze,s as De}from"./classNames-BUL1Zq7e.js";import{w as p}from"./componentNames-s6s-Nnrd.js";import{u as Le}from"./useForcedRef--iGFM41p.js";import{u as We}from"./useTextareaField-BP4f3uTe.js";import{T as Ke}from"./Text-BnXfkCNb.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./v4-CtRu48qb.js";import"./render-icon-BT0Aq7PA.js";import"./ButtonBase-Cl5EzY6D.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./Spinner-B2C3RkCF.js";import"./defaults-B1rzzf6M.js";import"./useMergeRefs-SFH7Mw4x.js";import"./useHostname-Y3PlXofY.js";import"./index-DdzHuZ-Y.js";import"./index-CC6DAVyL.js";import"./FieldAdditionalText-DfpPfG3b.js";import"./constants-DL6gdbsq.js";import"./index-D1pfvbUR.js";import"./tslib.es6-BntfKcQG.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./message-B1DLZQ1U.js";import"./constants-BaXVdZRV.js";import"./text-accent-DZDDtpIt.js";import"./text-centered-CznToR0o.js";const z=({onChange:e,onValueChange:a,resize:t="vertical",...l},o)=>{const d=ze(ke,p.Textarea,[De("resize",t)]),u=je(c=>c.target.value,e,a);return n.jsx(_e,{...l,ref:o,type:"textarea",className:d.join(" "),onChange:u,preplyDsComponent:p.Textarea})},B=s.forwardRef(z);try{z.displayName="TextareaLocal",z.__docgenInfo={description:"",displayName:"TextareaLocal",props:{dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},id:{defaultValue:null,description:"",name:"id",required:!0,type:{name:"string"}},placeholder:{defaultValue:null,description:"",name:"placeholder",required:!1,type:{name:"enum",value:[{value:"string"}]}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},"aria-describedby":{defaultValue:null,description:`Identifies the element (or elements) that describes the object.
+@see aria-labelledby`,name:"aria-describedby",required:!1,type:{name:"enum",value:[{value:"string"}]}},name:{defaultValue:null,description:"",name:"name",required:!1,type:{name:"enum",value:[{value:"string"}]}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<Element>"}]}},defaultValue:{defaultValue:null,description:"",name:"defaultValue",required:!1,type:{name:"enum",value:[{value:"string"}]}},"aria-disabled":{defaultValue:null,description:`Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
+@see aria-hidden
+@see aria-readonly.`,name:"aria-disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"true"'},{value:'"false"'}]}},"aria-invalid":{defaultValue:null,description:`Indicates the entered value does not conform to the format expected by the application.
+@see aria-errormessage.`,name:"aria-invalid",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"true"'},{value:'"false"'},{value:'"grammar"'},{value:'"spelling"'}]}},"aria-required":{defaultValue:null,description:"Indicates that user input is required on the element before a form may be submitted.",name:"aria-required",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"true"'},{value:'"false"'}]}},onCopy:{defaultValue:null,description:"",name:"onCopy",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<Element>"}]}},onPaste:{defaultValue:null,description:"",name:"onPaste",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<Element>"}]}},onFocus:{defaultValue:null,description:"",name:"onFocus",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<Element>"}]}},onBlur:{defaultValue:null,description:"",name:"onBlur",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<Element>"}]}},onChange:{defaultValue:null,description:"",name:"onChange",required:!1,type:{name:"enum",value:[{value:"ChangeEventHandler<Element>"}]}},onKeyDown:{defaultValue:null,description:"",name:"onKeyDown",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<Element>"}]}},onKeyUp:{defaultValue:null,description:"",name:"onKeyUp",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<Element>"}]}},required:{defaultValue:null,description:"",name:"required",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},hasError:{defaultValue:null,description:"",name:"hasError",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},autoComplete:{defaultValue:null,description:"",name:"autoComplete",required:!1,type:{name:"enum",value:[{value:'"off"'},{value:'"on"'}]}},maxLength:{defaultValue:null,description:"",name:"maxLength",required:!1,type:{name:"enum",value:[{value:"number"}]}},value:{defaultValue:null,description:"",name:"value",required:!1,type:{name:"enum",value:[{value:"string"}]}},readOnly:{defaultValue:null,description:"",name:"readOnly",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},rows:{defaultValue:null,description:"",name:"rows",required:!1,type:{name:"enum",value:[{value:"number"}]}},resize:{defaultValue:{value:"vertical"},description:"",name:"resize",required:!1,type:{name:"enum",value:[{value:'"none"'},{value:'"vertical"'},{value:'"horizontal"'},{value:'"both"'}]}},onValueChange:{defaultValue:null,description:"",name:"onValueChange",required:!1,type:{name:"enum",value:[{value:"ValueChangeEventHandler<string>"}]}}}}}catch{}try{B.displayName="Textarea",B.__docgenInfo={description:"",displayName:"Textarea",props:{dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},id:{defaultValue:null,description:"",name:"id",required:!0,type:{name:"string"}},placeholder:{defaultValue:null,description:"",name:"placeholder",required:!1,type:{name:"enum",value:[{value:"string"}]}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},"aria-describedby":{defaultValue:null,description:`Identifies the element (or elements) that describes the object.
+@see aria-labelledby`,name:"aria-describedby",required:!1,type:{name:"enum",value:[{value:"string"}]}},name:{defaultValue:null,description:"",name:"name",required:!1,type:{name:"enum",value:[{value:"string"}]}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<Element>"}]}},defaultValue:{defaultValue:null,description:"",name:"defaultValue",required:!1,type:{name:"enum",value:[{value:"string"}]}},"aria-disabled":{defaultValue:null,description:`Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
+@see aria-hidden
+@see aria-readonly.`,name:"aria-disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"true"'},{value:'"false"'}]}},"aria-invalid":{defaultValue:null,description:`Indicates the entered value does not conform to the format expected by the application.
+@see aria-errormessage.`,name:"aria-invalid",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"true"'},{value:'"false"'},{value:'"grammar"'},{value:'"spelling"'}]}},"aria-required":{defaultValue:null,description:"Indicates that user input is required on the element before a form may be submitted.",name:"aria-required",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"true"'},{value:'"false"'}]}},onCopy:{defaultValue:null,description:"",name:"onCopy",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<Element>"}]}},onPaste:{defaultValue:null,description:"",name:"onPaste",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<Element>"}]}},onFocus:{defaultValue:null,description:"",name:"onFocus",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<Element>"}]}},onBlur:{defaultValue:null,description:"",name:"onBlur",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<Element>"}]}},onChange:{defaultValue:null,description:"",name:"onChange",required:!1,type:{name:"enum",value:[{value:"ChangeEventHandler<Element>"}]}},onKeyDown:{defaultValue:null,description:"",name:"onKeyDown",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<Element>"}]}},onKeyUp:{defaultValue:null,description:"",name:"onKeyUp",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<Element>"}]}},required:{defaultValue:null,description:"",name:"required",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},hasError:{defaultValue:null,description:"",name:"hasError",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},autoComplete:{defaultValue:null,description:"",name:"autoComplete",required:!1,type:{name:"enum",value:[{value:'"off"'},{value:'"on"'}]}},maxLength:{defaultValue:null,description:"",name:"maxLength",required:!1,type:{name:"enum",value:[{value:"number"}]}},value:{defaultValue:null,description:"",name:"value",required:!1,type:{name:"enum",value:[{value:"string"}]}},readOnly:{defaultValue:null,description:"",name:"readOnly",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},rows:{defaultValue:null,description:"",name:"rows",required:!1,type:{name:"enum",value:[{value:"number"}]}},resize:{defaultValue:{value:"vertical"},description:"",name:"resize",required:!1,type:{name:"enum",value:[{value:'"none"'},{value:'"vertical"'},{value:'"horizontal"'},{value:'"both"'}]}},onValueChange:{defaultValue:null,description:"",name:"onValueChange",required:!1,type:{name:"enum",value:[{value:"ValueChangeEventHandler<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: InputImperativeHandle | null) => void"},{value:"RefObject<InputImperativeHandle>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}const Ne="TextareaField__Wpx9P",Me={TextareaField:Ne},Pe=({id:e,...a},t)=>{const l=s.useRef(null),o=Le();s.useImperativeHandle(t,()=>({setFocus:()=>{var m;return(m=l==null?void 0:l.current)==null?void 0:m.setFocus()},scrollIntoView:()=>{var m;return(m=l==null?void 0:l.current)==null?void 0:m.scrollIntoView()}}));const{layoutProps:d,inputProps:u}=We({id:e,...a},p.TextareaField),c=ze(Me,p.TextareaField),f=n.jsx(B,{...u,ref:o});return n.jsx(Be,{...d,className:c.join(" "),input:f,inputHandle:o.current,ref:l,preplyDsComponent:p.TextareaField})},v=s.forwardRef(Pe);try{v.displayName="TextareaField",v.__docgenInfo={description:"",displayName:"TextareaField",props:{id:{defaultValue:null,description:"",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"}]}},requiredLabel:{defaultValue:null,description:"",name:"requiredLabel",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"}]}},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"}]}},wrapLabel:{defaultValue:null,description:"",name:"wrapLabel",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},additionalText:{defaultValue:null,description:"",name:"additionalText",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"}]}},preserveSpace:{defaultValue:null,description:"",name:"preserveSpace",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},hasError:{defaultValue:null,description:"",name:"hasError",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},errorMessage:{defaultValue:null,description:"",name:"errorMessage",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"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},inputDataset:{defaultValue:null,description:"",name:"inputDataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},placeholder:{defaultValue:null,description:"",name:"placeholder",required:!1,type:{name:"enum",value:[{value:"string"}]}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},name:{defaultValue:null,description:"",name:"name",required:!1,type:{name:"enum",value:[{value:"string"}]}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<Element>"}]}},defaultValue:{defaultValue:null,description:"",name:"defaultValue",required:!1,type:{name:"enum",value:[{value:"string"}]}},onCopy:{defaultValue:null,description:"",name:"onCopy",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<Element>"}]}},onPaste:{defaultValue:null,description:"",name:"onPaste",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<Element>"}]}},onFocus:{defaultValue:null,description:"",name:"onFocus",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<Element>"}]}},onBlur:{defaultValue:null,description:"",name:"onBlur",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<Element>"}]}},onChange:{defaultValue:null,description:"",name:"onChange",required:!1,type:{name:"enum",value:[{value:"ChangeEventHandler<Element>"}]}},onKeyDown:{defaultValue:null,description:"",name:"onKeyDown",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<Element>"}]}},onKeyUp:{defaultValue:null,description:"",name:"onKeyUp",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<Element>"}]}},required:{defaultValue:null,description:"",name:"required",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},autoComplete:{defaultValue:null,description:"",name:"autoComplete",required:!1,type:{name:"enum",value:[{value:'"off"'},{value:'"on"'}]}},maxLength:{defaultValue:null,description:"",name:"maxLength",required:!1,type:{name:"enum",value:[{value:"number"}]}},value:{defaultValue:null,description:"",name:"value",required:!1,type:{name:"enum",value:[{value:"string"}]}},readOnly:{defaultValue:null,description:"",name:"readOnly",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},onValueChange:{defaultValue:null,description:"",name:"onValueChange",required:!1,type:{name:"enum",value:[{value:"ValueChangeEventHandler<string>"}]}},rows:{defaultValue:null,description:"",name:"rows",required:!1,type:{name:"enum",value:[{value:"number"}]}},resize:{defaultValue:null,description:"",name:"resize",required:!1,type:{name:"enum",value:[{value:'"none"'},{value:'"vertical"'},{value:'"horizontal"'},{value:'"both"'}]}},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: InputImperativeHandle | null) => void"},{value:"RefObject<InputImperativeHandle>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}const Ea={title:"components/TextareaField",component:v,args:{label:"Textarea",defaultValue:"",placeholder:"Enter text here",inputDataset:{testid:"input"},onChange:r("onChange"),onBlur:r("onBlur"),onFocus:r("onFocus"),onClick:r("onClick"),onCopy:r("onCopy"),onKeyDown:r("onKeyDown"),onKeyUp:r("onKeyUp"),onPaste:r("onPaste"),onValueChange:r("onValueChange")},render:function(a){const t=s.useRef(null);return a.ref=t,n.jsx(v,{...a})}},y={parameters:{docs:{description:{story:"An empty field with a `label` and a `placeholder`."}}}},h={args:{defaultValue:"Hey, you!"},play:async({canvas:e})=>{const a=e.getByTestId("input");return await i(a).toHaveValue("Hey, you!"),await Fe.type(a," How's it going?"),i(a).toHaveValue("Hey, you! How's it going?")}},g={args:{defaultValue:"Hey, you!",resize:"both"},play:({canvas:e})=>{const a=e.getByTestId("input");i(a).toHaveStyle({resize:"both"})}},b={args:{defaultValue:"Hey, you!",resize:"vertical"},play:({canvas:e})=>{const a=e.getByTestId("input");i(a).toHaveStyle({resize:"vertical"})}},V={args:{defaultValue:"Hey, you!",resize:"horizontal"},play:({canvas:e})=>{const a=e.getByTestId("input");i(a).toHaveStyle({resize:"horizontal"})}},x={args:{additionalText:"This is additional text"}},q={args:{required:!0}},E={args:{required:!0,requiredLabel:n.jsx(Ke,{accent:"critical",variant:"m-bold",children:"Needed"})}},H={args:{hideLabel:!0}},w={args:{hasError:!0}},C={args:{hasError:!0,errorMessage:"This is an error message"}},I={args:{disabled:!0}},T={args:{readOnly:!0}},S={decorators:[(e,{args:a})=>n.jsxs("div",{style:{padding:"8px",margin:"8px"},children:[n.jsxs("p",{children:["You can"," ",n.jsx(j,{variant:"secondary",dataset:{testid:"focus-button"},onClick:()=>{var t,l;return(l=(t=a.ref)==null?void 0:t.current)==null?void 0:l.setFocus()},children:"Focus"})," ","the input imperatively."]}),n.jsx(e,{})]})],play:async({args:e,canvas:a})=>{if(!k(e.ref))throw new Error("Expected ref.current to be an InputImperativeHandle");const t=a.getByTestId("input");await Fe.click(a.getByTestId("focus-button")),await Re(()=>i(t).toHaveFocus())}},F={decorators:[(e,{args:a})=>n.jsxs("div",{style:{height:"300px",overflow:"scroll",padding:"8px",margin:"8px"},children:[n.jsxs("p",{children:["You can"," ",n.jsx(j,{variant:"secondary",dataset:{testid:"scroll-button"},onClick:()=>{if(!k(a.ref))throw new Error("Expected ref.current to be an InputImperativeHandle");a.ref.current.scrollIntoView()},children:"Scroll"})," ","the input into view imperatively."]}),n.jsx("div",{style:{height:"1000px",display:"flex",flexDirection:"column",justifyContent:"end",border:"2px dashed lightgray",padding:"16px"},children:n.jsx(e,{})})]})],play:async({args:e,canvas:a})=>{if(!k(e.ref))throw new Error("Expected ref.current to be an InputImperativeHandle");const t=a.getByTestId("input");e.ref.current.scrollIntoView(),await Re(()=>i(t).toBeVisible())}};function k(e){return typeof e=="object"&&e!==null&&"current"in e&&e.current!==null&&typeof e.current=="object"&&"setFocus"in e.current}const R={tags:["!test"],parameters:{docs:{description:{story:'\nThe following code renders a `TextareaField` with the `required` flag, a\n`button`, `placeholder` and some `additionalText`.\n\nWhen you click the "Submit" button, and the input `value` is empty:\n\n- Displays feedback via the `errorMessage` prop;\n- Brings the focus back to the field.\n'}},chromatic:{disableSnapshot:!0}},render:function(){const[a,t]=s.useState(""),[l,o]=s.useState(!1),d=l&&!a&&"Please provide your full name",u=s.useRef(null),c=()=>{var f;o(!0),a||(f=u==null?void 0:u.current)==null||f.setFocus()};return n.jsxs("div",{style:{maxWidth:"500px",display:"flex",flexDirection:"column"},children:[n.jsx(v,{value:a,label:"Full name",required:!0,placeholder:"e.g.: Mary Williams",additionalText:"Will be shown in your profile",onValueChange:t,errorMessage:d,ref:u,resize:"horizontal"}),n.jsx(j,{onClick:c,children:"Submit"})]})}};var _,D,L;y.parameters={...y.parameters,docs:{...(_=y.parameters)==null?void 0:_.docs,source:{originalSource:`{
+  parameters: {
+    docs: {
+      description: {
+        story: \`An empty field with a \\\`label\\\` and a \\\`placeholder\\\`.\`
+      }
+    }
+  }
+}`,...(L=(D=y.parameters)==null?void 0:D.docs)==null?void 0:L.source}}};var W,K,N;h.parameters={...h.parameters,docs:{...(W=h.parameters)==null?void 0:W.docs,source:{originalSource:`{
+  args: {
+    defaultValue: 'Hey, you!'
+  },
+  play: async ({
+    canvas
+  }) => {
+    const input = canvas.getByTestId('input');
+    await expect(input).toHaveValue('Hey, you!');
+    await userEvent.type(input, " How's it going?");
+    return expect(input).toHaveValue("Hey, you! How's it going?");
+  }
+}`,...(N=(K=h.parameters)==null?void 0:K.docs)==null?void 0:N.source}}};var M,P,O;g.parameters={...g.parameters,docs:{...(M=g.parameters)==null?void 0:M.docs,source:{originalSource:`{
+  args: {
+    defaultValue: 'Hey, you!',
+    resize: 'both'
+  },
+  play: ({
+    canvas
+  }) => {
+    const textarea = canvas.getByTestId('input');
+    expect(textarea).toHaveStyle({
+      resize: 'both'
+    });
+  }
+}`,...(O=(P=g.parameters)==null?void 0:P.docs)==null?void 0:O.source}}};var U,A,J;b.parameters={...b.parameters,docs:{...(U=b.parameters)==null?void 0:U.docs,source:{originalSource:`{
+  args: {
+    defaultValue: 'Hey, you!',
+    resize: 'vertical'
+  },
+  play: ({
+    canvas
+  }) => {
+    const textarea = canvas.getByTestId('input');
+    expect(textarea).toHaveStyle({
+      resize: 'vertical'
+    });
+  }
+}`,...(J=(A=b.parameters)==null?void 0:A.docs)==null?void 0:J.source}}};var X,Y,$;V.parameters={...V.parameters,docs:{...(X=V.parameters)==null?void 0:X.docs,source:{originalSource:`{
+  args: {
+    defaultValue: 'Hey, you!',
+    resize: 'horizontal'
+  },
+  play: ({
+    canvas
+  }) => {
+    const textarea = canvas.getByTestId('input');
+    expect(textarea).toHaveStyle({
+      resize: 'horizontal'
+    });
+  }
+}`,...($=(Y=V.parameters)==null?void 0:Y.docs)==null?void 0:$.source}}};var G,Q,Z;x.parameters={...x.parameters,docs:{...(G=x.parameters)==null?void 0:G.docs,source:{originalSource:`{
+  args: {
+    additionalText: 'This is additional text'
+  }
+}`,...(Z=(Q=x.parameters)==null?void 0:Q.docs)==null?void 0:Z.source}}};var ee,ae,ne;q.parameters={...q.parameters,docs:{...(ee=q.parameters)==null?void 0:ee.docs,source:{originalSource:`{
+  args: {
+    required: true
+  }
+}`,...(ne=(ae=q.parameters)==null?void 0:ae.docs)==null?void 0:ne.source}}};var te,le,re;E.parameters={...E.parameters,docs:{...(te=E.parameters)==null?void 0:te.docs,source:{originalSource:`{
+  args: {
+    required: true,
+    requiredLabel: <Text accent="critical" variant="m-bold">
+                Needed
+            </Text>
+  }
+}`,...(re=(le=E.parameters)==null?void 0:le.docs)==null?void 0:re.source}}};var ue,se,ie;H.parameters={...H.parameters,docs:{...(ue=H.parameters)==null?void 0:ue.docs,source:{originalSource:`{
+  args: {
+    hideLabel: true
+  }
+}`,...(ie=(se=H.parameters)==null?void 0:se.docs)==null?void 0:ie.source}}};var oe,de,ce;w.parameters={...w.parameters,docs:{...(oe=w.parameters)==null?void 0:oe.docs,source:{originalSource:`{
+  args: {
+    hasError: true
+  }
+}`,...(ce=(de=w.parameters)==null?void 0:de.docs)==null?void 0:ce.source}}};var me,pe,ve;C.parameters={...C.parameters,docs:{...(me=C.parameters)==null?void 0:me.docs,source:{originalSource:`{
+  args: {
+    hasError: true,
+    errorMessage: 'This is an error message'
+  }
+}`,...(ve=(pe=C.parameters)==null?void 0:pe.docs)==null?void 0:ve.source}}};var fe,ye,he;I.parameters={...I.parameters,docs:{...(fe=I.parameters)==null?void 0:fe.docs,source:{originalSource:`{
+  args: {
+    disabled: true
+  }
+}`,...(he=(ye=I.parameters)==null?void 0:ye.docs)==null?void 0:he.source}}};var ge,be,Ve;T.parameters={...T.parameters,docs:{...(ge=T.parameters)==null?void 0:ge.docs,source:{originalSource:`{
+  args: {
+    readOnly: true
+  }
+}`,...(Ve=(be=T.parameters)==null?void 0:be.docs)==null?void 0:Ve.source}}};var xe,qe,Ee;S.parameters={...S.parameters,docs:{...(xe=S.parameters)==null?void 0:xe.docs,source:{originalSource:`{
+  decorators: [(Story, {
+    args
+  }) => <div style={{
+    padding: '8px',
+    margin: '8px'
+  }}>
+                <p>
+                    You can{' '}
+                    <Button variant="secondary" dataset={{
+        testid: 'focus-button'
+      }} onClick={() =>
+      // @ts-expect-error - This will fail gracefully,
+      // and the \`play\` function will assert it properly
+      args.ref?.current?.setFocus()}>
+                        Focus
+                    </Button>{' '}
+                    the input imperatively.
+                </p>
+                <Story />
+            </div>],
+  play: async ({
+    args,
+    canvas
+  }) => {
+    if (!isImperativeHandleRef(args.ref)) {
+      throw new Error('Expected ref.current to be an InputImperativeHandle');
+    }
+    const input = canvas.getByTestId('input');
+    await userEvent.click(canvas.getByTestId('focus-button'));
+    await waitFor(() => expect(input).toHaveFocus());
+  }
+}`,...(Ee=(qe=S.parameters)==null?void 0:qe.docs)==null?void 0:Ee.source}}};var He,we,Ce;F.parameters={...F.parameters,docs:{...(He=F.parameters)==null?void 0:He.docs,source:{originalSource:`{
+  decorators: [(Story, {
+    args
+  }) => <div style={{
+    height: '300px',
+    overflow: 'scroll',
+    padding: '8px',
+    margin: '8px'
+  }}>
+                <p>
+                    You can{' '}
+                    <Button variant="secondary" dataset={{
+        testid: 'scroll-button'
+      }} onClick={() => {
+        if (!isImperativeHandleRef(args.ref)) {
+          throw new Error('Expected ref.current to be an InputImperativeHandle');
+        }
+        args.ref.current.scrollIntoView();
+      }}>
+                        Scroll
+                    </Button>{' '}
+                    the input into view imperatively.
+                </p>
+                <div style={{
+      height: '1000px',
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'end',
+      border: '2px dashed lightgray',
+      padding: '16px'
+    }}>
+                    <Story />
+                </div>
+            </div>],
+  play: async ({
+    args,
+    canvas
+  }) => {
+    if (!isImperativeHandleRef(args.ref)) {
+      throw new Error('Expected ref.current to be an InputImperativeHandle');
+    }
+    const input = canvas.getByTestId('input');
+    args.ref.current.scrollIntoView();
+    await waitFor(() => expect(input).toBeVisible());
+  }
+}`,...(Ce=(we=F.parameters)==null?void 0:we.docs)==null?void 0:Ce.source}}};var Ie,Te,Se;R.parameters={...R.parameters,docs:{...(Ie=R.parameters)==null?void 0:Ie.docs,source:{originalSource:`{
+  tags: ['!test'],
+  parameters: {
+    docs: {
+      description: {
+        story: \`
+The following code renders a \\\`TextareaField\\\` with the \\\`required\\\` flag, a
+\\\`button\\\`, \\\`placeholder\\\` and some \\\`additionalText\\\`.
+
+When you click the "Submit" button, and the input \\\`value\\\` is empty:
+
+- Displays feedback via the \\\`errorMessage\\\` prop;
+- Brings the focus back to the field.
+\`
+      }
+    },
+    chromatic: {
+      disableSnapshot: true
+    }
+  },
+  render: function Story() {
+    const [value, setValue] = useState('');
+    const [submited, setSubmitted] = useState(false);
+    const errorMessage = submited && !value && 'Please provide your full name';
+    const fieldRef = useRef<InputImperativeHandle>(null);
+    const handleClick = () => {
+      setSubmitted(true);
+      if (!value) {
+        fieldRef?.current?.setFocus();
+      }
+    };
+    return <div style={{
+      maxWidth: '500px',
+      display: 'flex',
+      flexDirection: 'column'
+    }}>
+                <TextareaField value={value} label="Full name" required placeholder="e.g.: Mary Williams" additionalText="Will be shown in your profile" onValueChange={setValue} errorMessage={errorMessage} ref={fieldRef} resize="horizontal" />
+                <Button onClick={handleClick}>Submit</Button>
+            </div>;
+  }
+}`,...(Se=(Te=R.parameters)==null?void 0:Te.docs)==null?void 0:Se.source}}};const Ha=["Basic","WithValue","WithResize","WithVerticalResize","WithHorizontalResize","WithAdditionalText","Required","RequiredWithCustomLabel","WithHiddenLabel","HasError","HasErrorWithMessage","Disabled","ReadOnly","ImperativeSetFocus","ImperativeScrollIntoView","Example"];export{y as Basic,I as Disabled,R as Example,w as HasError,C as HasErrorWithMessage,F as ImperativeScrollIntoView,S as ImperativeSetFocus,T as ReadOnly,q as Required,E as RequiredWithCustomLabel,x as WithAdditionalText,H as WithHiddenLabel,V as WithHorizontalResize,g as WithResize,h as WithValue,b as WithVerticalResize,Ha as __namedExportsOrder,Ea as default};

package/dist/assets/{Tooltip.stories-BWHNjUgP.js → Tooltip.stories-BhOFaVTm.js}

@@ -1,4 +1,4 @@
-import{j as t}from"./jsx-runtime-BTJTZTIL.js";import{T as o}from"./Tooltip-Cb2NoIFe.js";import{r as M}from"./index-Cb9e4tly.js";import{L as $}from"./LayoutFlex-B2vuN2pP.js";import{I as e}from"./IconButton-CWZrAfFB.js";import{F as p}from"./TokyoUIFav-DOVerCtW.js";import{F as N}from"./TokyoUIClose-thK8sk63.js";import{F as P}from"./TokyoUINotebook-kt8pWj_a.js";import{F as _}from"./TokyoUIInfo-DbkQBubr.js";import"./index-ChsGqxH_.js";import"./index-D2bCaIQ8.js";import"./PortalElementProvider-Db7d5OlT.js";import"./index-BPrLDK9Y.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-C7hTFOIV.js";import"./index-vHvQSpLZ.js";import"./index-DdzHuZ-Y.js";import"./componentNames-s6s-Nnrd.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./layout-relative.module-ed9bC4H4.js";import"./classNames-BUL1Zq7e.js";import"./defaults-B1rzzf6M.js";import"./render-icon-BT0Aq7PA.js";import"./ButtonBase-BAooW9wV.js";import"./Spinner-B2C3RkCF.js";import"./useMergeRefs-SFH7Mw4x.js";import"./useHostname-Y3PlXofY.js";import"./index-CC6DAVyL.js";const vt={title:"Components/Tooltip",component:o,parameters:{layout:"centered",a11y:{config:{rules:[{id:"color-contrast",enabled:!1}]}}},decorators:[l=>t.jsx("div",{style:{margin:"100px 0"},children:l()})]},i={render:()=>t.jsx(o,{content:"This is a tooltip",dsInternalSimulation:"open",children:t.jsx(e,{variant:"ghost",svg:t.jsx(p,{}),assistiveText:"Favorite"})}),name:"Tooltip"},a={render:()=>t.jsx(o,{content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",dsInternalSimulation:"open",children:t.jsx(e,{variant:"ghost",svg:t.jsx(p,{}),assistiveText:"Favorite"})})},r={parameters:{chromatic:{disableSnapshot:!0}},render:()=>t.jsxs($,{gap:"4",children:[t.jsx(o,{content:"This is a tooltip",children:t.jsx(e,{variant:"ghost",svg:t.jsx(p,{}),assistiveText:"Icon button"})}),t.jsx(o,{content:"This is a tooltip",children:t.jsx(e,{variant:"ghost",svg:t.jsx(N,{}),assistiveText:"Icon button"})}),t.jsx(o,{content:"This is a tooltip",children:t.jsx(e,{variant:"ghost",svg:t.jsx(P,{}),assistiveText:"Icon button"})})]})},s={parameters:{chromatic:{disableSnapshot:!0}},render:()=>t.jsx(o,{content:"This is a tooltip",trigger:"hover-and-touch",children:t.jsx(e,{variant:"ghost",svg:t.jsx(_,{}),assistiveText:"Icon button"})})},n={parameters:{chromatic:{disableSnapshot:!0}},render:()=>{const l=M.forwardRef((D,E)=>t.jsx("button",{...D,ref:E}));return t.jsx(o,{content:"This is a tooltip",children:t.jsx(l,{children:"Custom child"})})}},c={parameters:{chromatic:{disableSnapshot:!0}},args:{content:"Tooltip content",children:t.jsx(e,{svg:t.jsx(p,{}),assistiveText:"Icon button"}),trigger:"hover",side:"top"},argTypes:{content:{control:"text"},children:{control:!1},dataset:{control:"object"}}};var d,m,u;i.parameters={...i.parameters,docs:{...(d=i.parameters)==null?void 0:d.docs,source:{originalSource:`{
+import{j as t}from"./jsx-runtime-BTJTZTIL.js";import{T as o}from"./Tooltip-Cb2NoIFe.js";import{r as M}from"./index-Cb9e4tly.js";import{L as $}from"./LayoutFlex-D1qTNI1T.js";import{I as e}from"./IconButton-ldp0ofLZ.js";import{F as p}from"./TokyoUIFav-DOVerCtW.js";import{F as N}from"./TokyoUIClose-thK8sk63.js";import{F as P}from"./TokyoUINotebook-kt8pWj_a.js";import{F as _}from"./TokyoUIInfo-DbkQBubr.js";import"./index-ChsGqxH_.js";import"./index-D2bCaIQ8.js";import"./PortalElementProvider-Db7d5OlT.js";import"./index-BPrLDK9Y.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-C7hTFOIV.js";import"./index-vHvQSpLZ.js";import"./index-DdzHuZ-Y.js";import"./componentNames-s6s-Nnrd.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./layout-relative.module-ed9bC4H4.js";import"./classNames-BUL1Zq7e.js";import"./defaults-B1rzzf6M.js";import"./render-icon-BT0Aq7PA.js";import"./ButtonBase-Cl5EzY6D.js";import"./Spinner-B2C3RkCF.js";import"./useMergeRefs-SFH7Mw4x.js";import"./useHostname-Y3PlXofY.js";import"./index-CC6DAVyL.js";const vt={title:"Components/Tooltip",component:o,parameters:{layout:"centered",a11y:{config:{rules:[{id:"color-contrast",enabled:!1}]}}},decorators:[l=>t.jsx("div",{style:{margin:"100px 0"},children:l()})]},i={render:()=>t.jsx(o,{content:"This is a tooltip",dsInternalSimulation:"open",children:t.jsx(e,{variant:"ghost",svg:t.jsx(p,{}),assistiveText:"Favorite"})}),name:"Tooltip"},a={render:()=>t.jsx(o,{content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",dsInternalSimulation:"open",children:t.jsx(e,{variant:"ghost",svg:t.jsx(p,{}),assistiveText:"Favorite"})})},r={parameters:{chromatic:{disableSnapshot:!0}},render:()=>t.jsxs($,{gap:"4",children:[t.jsx(o,{content:"This is a tooltip",children:t.jsx(e,{variant:"ghost",svg:t.jsx(p,{}),assistiveText:"Icon button"})}),t.jsx(o,{content:"This is a tooltip",children:t.jsx(e,{variant:"ghost",svg:t.jsx(N,{}),assistiveText:"Icon button"})}),t.jsx(o,{content:"This is a tooltip",children:t.jsx(e,{variant:"ghost",svg:t.jsx(P,{}),assistiveText:"Icon button"})})]})},s={parameters:{chromatic:{disableSnapshot:!0}},render:()=>t.jsx(o,{content:"This is a tooltip",trigger:"hover-and-touch",children:t.jsx(e,{variant:"ghost",svg:t.jsx(_,{}),assistiveText:"Icon button"})})},n={parameters:{chromatic:{disableSnapshot:!0}},render:()=>{const l=M.forwardRef((D,E)=>t.jsx("button",{...D,ref:E}));return t.jsx(o,{content:"This is a tooltip",children:t.jsx(l,{children:"Custom child"})})}},c={parameters:{chromatic:{disableSnapshot:!0}},args:{content:"Tooltip content",children:t.jsx(e,{svg:t.jsx(p,{}),assistiveText:"Icon button"}),trigger:"hover",side:"top"},argTypes:{content:{control:"text"},children:{control:!1},dataset:{control:"object"}}};var d,m,u;i.parameters={...i.parameters,docs:{...(d=i.parameters)==null?void 0:d.docs,source:{originalSource:`{
   render: () => <Tooltip content="This is a tooltip" dsInternalSimulation="open">
             <IconButton variant="ghost" svg={<TokyoUIFav />} assistiveText="Favorite" />
         </Tooltip>,

package/dist/assets/{Tooltip.tests.stories-p-BQ7qru.js → Tooltip.tests.stories-DTA0esjb.js}

@@ -1,4 +1,4 @@
-import{j as l}from"./jsx-runtime-BTJTZTIL.js";import{T as b}from"./Tooltip-Cb2NoIFe.js";import{I as B}from"./IconButton-CWZrAfFB.js";import{F as T}from"./TokyoUIFav-DOVerCtW.js";import{w as g,u as p,a as i,e as s,b as u}from"./index-DDyIDR-R.js";import"./index-ChsGqxH_.js";import"./index-Cb9e4tly.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-D2bCaIQ8.js";import"./PortalElementProvider-Db7d5OlT.js";import"./index-BPrLDK9Y.js";import"./index-C7hTFOIV.js";import"./index-vHvQSpLZ.js";import"./index-DdzHuZ-Y.js";import"./componentNames-s6s-Nnrd.js";import"./render-icon-BT0Aq7PA.js";import"./ButtonBase-BAooW9wV.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./Spinner-B2C3RkCF.js";import"./classNames-BUL1Zq7e.js";import"./defaults-B1rzzf6M.js";import"./useMergeRefs-SFH7Mw4x.js";import"./useHostname-Y3PlXofY.js";import"./index-CC6DAVyL.js";const P={title:"Components/Tooltip/Tests",component:b,parameters:{layout:"centered",controls:{disable:!0},chromatic:{disableSnapshot:!0}},tags:["!autodocs","!a11y-test","test"],decorators:[n=>l.jsx("div",{style:{margin:"100px 0"},children:n()})],args:{content:"Tooltip content",dataset:{testid:"tooltip"},children:l.jsx(B,{svg:l.jsx(T,{}),assistiveText:"Favorite"})}},r={play:async({canvasElement:n,step:t})=>{const e=g(n),a=e.getByRole("button");await t("hover trigger element",async()=>{await p.hover(a)}),await t("tooltip should be shown",async()=>{await i(()=>{const o=e.getByTestId("tooltip");return s(o).toBeVisible()})}),await t("unhover trigger element",async()=>{await p.unhover(a)}),await t("tooltip should be hidden",async()=>{await i(()=>{const o=e.queryByTestId("tooltip");return s(o).toBeNull()})})}},c={args:{trigger:"hover-and-touch"},play:async({canvasElement:n,step:t})=>{const e=g(n),a=e.getByRole("button");await t("press trigger element",async()=>{await u.touchStart(a)}),await t("tooltip should be shown",async()=>{await i(()=>{const o=e.getByTestId("tooltip");s(o).toBeInTheDocument()})}),await t("release trigger element",async()=>{await u.touchEnd(a)}),await t("tooltip should be still visible",async()=>{await i(()=>{const o=e.getByTestId("tooltip");s(o).toBeInTheDocument()})}),await t("click outside of tooltip",async()=>{await p.click(document.body)}),await t("tooltip should be hidden",async()=>{await i(()=>{const o=e.queryByTestId("tooltip");s(o).toBeNull()})})}};var m,d,w;r.parameters={...r.parameters,docs:{...(m=r.parameters)==null?void 0:m.docs,source:{originalSource:`{
+import{j as l}from"./jsx-runtime-BTJTZTIL.js";import{T as b}from"./Tooltip-Cb2NoIFe.js";import{I as B}from"./IconButton-ldp0ofLZ.js";import{F as T}from"./TokyoUIFav-DOVerCtW.js";import{w as g,u as p,a as i,e as s,b as u}from"./index-DDyIDR-R.js";import"./index-ChsGqxH_.js";import"./index-Cb9e4tly.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-D2bCaIQ8.js";import"./PortalElementProvider-Db7d5OlT.js";import"./index-BPrLDK9Y.js";import"./index-C7hTFOIV.js";import"./index-vHvQSpLZ.js";import"./index-DdzHuZ-Y.js";import"./componentNames-s6s-Nnrd.js";import"./render-icon-BT0Aq7PA.js";import"./ButtonBase-Cl5EzY6D.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./Spinner-B2C3RkCF.js";import"./classNames-BUL1Zq7e.js";import"./defaults-B1rzzf6M.js";import"./useMergeRefs-SFH7Mw4x.js";import"./useHostname-Y3PlXofY.js";import"./index-CC6DAVyL.js";const P={title:"Components/Tooltip/Tests",component:b,parameters:{layout:"centered",controls:{disable:!0},chromatic:{disableSnapshot:!0}},tags:["!autodocs","!a11y-test","test"],decorators:[n=>l.jsx("div",{style:{margin:"100px 0"},children:n()})],args:{content:"Tooltip content",dataset:{testid:"tooltip"},children:l.jsx(B,{svg:l.jsx(T,{}),assistiveText:"Favorite"})}},r={play:async({canvasElement:n,step:t})=>{const e=g(n),a=e.getByRole("button");await t("hover trigger element",async()=>{await p.hover(a)}),await t("tooltip should be shown",async()=>{await i(()=>{const o=e.getByTestId("tooltip");return s(o).toBeVisible()})}),await t("unhover trigger element",async()=>{await p.unhover(a)}),await t("tooltip should be hidden",async()=>{await i(()=>{const o=e.queryByTestId("tooltip");return s(o).toBeNull()})})}},c={args:{trigger:"hover-and-touch"},play:async({canvasElement:n,step:t})=>{const e=g(n),a=e.getByRole("button");await t("press trigger element",async()=>{await u.touchStart(a)}),await t("tooltip should be shown",async()=>{await i(()=>{const o=e.getByTestId("tooltip");s(o).toBeInTheDocument()})}),await t("release trigger element",async()=>{await u.touchEnd(a)}),await t("tooltip should be still visible",async()=>{await i(()=>{const o=e.getByTestId("tooltip");s(o).toBeInTheDocument()})}),await t("click outside of tooltip",async()=>{await p.click(document.body)}),await t("tooltip should be hidden",async()=>{await i(()=>{const o=e.queryByTestId("tooltip");s(o).toBeNull()})})}};var m,d,w;r.parameters={...r.parameters,docs:{...(m=r.parameters)==null?void 0:m.docs,source:{originalSource:`{
   play: async ({
     canvasElement,
     step

package/dist/assets/{breakpoints-DtHlYZxT.js → breakpoints-Bx88UvDJ.js}

@@ -1,4 +1,4 @@
-import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{useMDXComponents as t}from"./index-BN6VMYqa.js";import{M as o}from"./index-Dg07ICzV.js";import"./index-ChsGqxH_.js";import"./index-Cb9e4tly.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./iframe-CMkYi43z.js";import"./index-BPrLDK9Y.js";import"./index-C7hTFOIV.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";function r(i){const n={a:"a",code:"code",h1:"h1",hr:"hr",p:"p",pre:"pre",strong:"strong",...t(),...i.components};return e.jsxs(e.Fragment,{children:[e.jsx(o,{title:"Guides/Custom Components/Less.js/Breakpoints"}),`
+import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{useMDXComponents as t}from"./index-BN6VMYqa.js";import{M as o}from"./index-DCiFp8xr.js";import"./index-ChsGqxH_.js";import"./index-Cb9e4tly.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./iframe-Cq1_BgP4.js";import"./index-BPrLDK9Y.js";import"./index-C7hTFOIV.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";function r(i){const n={a:"a",code:"code",h1:"h1",hr:"hr",p:"p",pre:"pre",strong:"strong",...t(),...i.components};return e.jsxs(e.Fragment,{children:[e.jsx(o,{title:"Guides/Custom Components/Less.js/Breakpoints"}),`
 `,e.jsx(n.h1,{id:"lessjs-breakpoints",children:"Less.js: Breakpoints"}),`
 `,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"Note:"})," Storybook renders this page inside of an ",e.jsx(n.code,{children:"iframe"}),"! The width taken into account by the media query is that of the ",e.jsx(n.code,{children:"iframe"})," and not the full viewport window. Hide Storybook's navigation sidebar (or pop out this page) to preview the media query against the full browser width."]}),`
 `,e.jsx(n.hr,{}),`

package/dist/assets/{breakpoints-DcgKC_qA.js → breakpoints-DapDGNJK.js}

@@ -1,4 +1,4 @@
-import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{useMDXComponents as s}from"./index-BN6VMYqa.js";import{M as t}from"./index-Dg07ICzV.js";import"./index-ChsGqxH_.js";import"./index-Cb9e4tly.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./iframe-CMkYi43z.js";import"./index-BPrLDK9Y.js";import"./index-C7hTFOIV.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";function i(r){const n={a:"a",code:"code",h1:"h1",hr:"hr",p:"p",pre:"pre",strong:"strong",...s(),...r.components};return e.jsxs(e.Fragment,{children:[e.jsx(t,{title:"Guides/Custom Components/SCSS/Breakpoints"}),`
+import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{useMDXComponents as s}from"./index-BN6VMYqa.js";import{M as t}from"./index-DCiFp8xr.js";import"./index-ChsGqxH_.js";import"./index-Cb9e4tly.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./iframe-Cq1_BgP4.js";import"./index-BPrLDK9Y.js";import"./index-C7hTFOIV.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";function i(r){const n={a:"a",code:"code",h1:"h1",hr:"hr",p:"p",pre:"pre",strong:"strong",...s(),...r.components};return e.jsxs(e.Fragment,{children:[e.jsx(t,{title:"Guides/Custom Components/SCSS/Breakpoints"}),`
 `,e.jsx(n.h1,{id:"scss-breakpoints",children:"SCSS: Breakpoints"}),`
 `,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"Note:"})," Storybook renders this page inside of an ",e.jsx(n.code,{children:"iframe"}),"! The width taken into account by the media query is that of the ",e.jsx(n.code,{children:"iframe"})," and not the full viewport window. Hide Storybook's navigation sidebar (or pop out this page) to preview the media query against the full browser width."]}),`
 `,e.jsx(n.hr,{}),`

package/dist/assets/{breakpoints-ENSF4vnz.js → breakpoints-q3Q7wLjI.js}

@@ -1,4 +1,4 @@
-import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{useMDXComponents as i}from"./index-BN6VMYqa.js";import{M as r}from"./index-Dg07ICzV.js";import"./index-ChsGqxH_.js";import"./index-Cb9e4tly.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./iframe-CMkYi43z.js";import"./index-BPrLDK9Y.js";import"./index-C7hTFOIV.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";function t(o){const n={a:"a",code:"code",h1:"h1",hr:"hr",p:"p",pre:"pre",strong:"strong",...i(),...o.components};return e.jsxs(e.Fragment,{children:[e.jsx(r,{title:"Guides/Custom Components/StyledComponents/Breakpoints"}),`
+import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{useMDXComponents as i}from"./index-BN6VMYqa.js";import{M as r}from"./index-DCiFp8xr.js";import"./index-ChsGqxH_.js";import"./index-Cb9e4tly.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./iframe-Cq1_BgP4.js";import"./index-BPrLDK9Y.js";import"./index-C7hTFOIV.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";function t(o){const n={a:"a",code:"code",h1:"h1",hr:"hr",p:"p",pre:"pre",strong:"strong",...i(),...o.components};return e.jsxs(e.Fragment,{children:[e.jsx(r,{title:"Guides/Custom Components/StyledComponents/Breakpoints"}),`
 `,e.jsx(n.h1,{id:"styledcomponents-breakpoints",children:"StyledComponents: Breakpoints"}),`
 `,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"Note:"})," Storybook renders this page inside of an ",e.jsx(n.code,{children:"iframe"}),"! The width taken into account by the media query is that of the ",e.jsx(n.code,{children:"iframe"})," and not the full viewport window. Hide Storybook's navigation sidebar (or pop out this page) to preview the media query against the full browser width."]}),`
 `,e.jsx(n.hr,{}),`

package/dist/assets/{changelog-DCVVPIKj.js → changelog-yhmOvKQt.js}

@@ -1,4 +1,4 @@
-import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{useMDXComponents as i}from"./index-BN6VMYqa.js";import{M as d}from"./index-Dg07ICzV.js";import"./index-ChsGqxH_.js";import"./index-Cb9e4tly.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./iframe-CMkYi43z.js";import"./index-BPrLDK9Y.js";import"./index-C7hTFOIV.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";function l(n){const s={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",li:"li",p:"p",ul:"ul",...i(),...n.components};return e.jsxs(e.Fragment,{children:[e.jsx(d,{title:"Changelog"}),`
+import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{useMDXComponents as i}from"./index-BN6VMYqa.js";import{M as d}from"./index-DCiFp8xr.js";import"./index-ChsGqxH_.js";import"./index-Cb9e4tly.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./iframe-Cq1_BgP4.js";import"./index-BPrLDK9Y.js";import"./index-C7hTFOIV.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";function l(n){const s={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",li:"li",p:"p",ul:"ul",...i(),...n.components};return e.jsxs(e.Fragment,{children:[e.jsx(d,{title:"Changelog"}),`
 `,e.jsx(s.h1,{id:"changelog",children:"Changelog"}),`
 `,e.jsx(s.h2,{id:"250",children:e.jsx(s.a,{href:"https://github.com/preply/design-system/compare/v2.4.0...v2.5.0",rel:"nofollow",children:"2.5.0"})}),`
 `,e.jsx(s.h3,{id:"features",children:"Features"}),`

package/dist/assets/{entry-preview-BKM_XNDK.js → entry-preview-Bc7rmtO2.js}

@@ -1,5 +1,5 @@
 const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./react-18-DfUnyR7e.js","./index-Cb9e4tly.js","./_commonjsHelpers-Cpj98o6Y.js","./index-ChsGqxH_.js","./client-C1fTPCwG.js","./index-C7hTFOIV.js"])))=>i.map(i=>d[i]);
-import{_ as Be}from"./iframe-CMkYi43z.js";import{_ as ur,a as O,d as pr}from"./chunk-XP5HYGXS-D5tuasO7.js";import{r as se,e as pe}from"./index-Cb9e4tly.js";import{r as cr}from"./index-ChsGqxH_.js";import{r as mr}from"./index-C7hTFOIV.js";import"./_commonjsHelpers-Cpj98o6Y.js";var _e={exports:{}},V={};/**
+import{_ as Be}from"./iframe-Cq1_BgP4.js";import{_ as ur,a as O,d as pr}from"./chunk-XP5HYGXS-D5tuasO7.js";import{r as se,e as pe}from"./index-Cb9e4tly.js";import{r as cr}from"./index-ChsGqxH_.js";import{r as mr}from"./index-C7hTFOIV.js";import"./_commonjsHelpers-Cpj98o6Y.js";var _e={exports:{}},V={};/**
  * @license React
  * react-dom-test-utils.production.min.js
  *

package/dist/assets/{getTokenVar-C-aLLuRH.js → getTokenVar-B8rehe17.js}

@@ -1,4 +1,4 @@
-import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{useMDXComponents as n}from"./index-BN6VMYqa.js";import{M as s}from"./index-Dg07ICzV.js";import"./index-ChsGqxH_.js";import"./index-Cb9e4tly.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./iframe-CMkYi43z.js";import"./index-BPrLDK9Y.js";import"./index-C7hTFOIV.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";function o(t){const r={a:"a",code:"code",h1:"h1",p:"p",pre:"pre",...n(),...t.components};return e.jsxs(e.Fragment,{children:[e.jsx(s,{title:"Utilities/getTokenVar"}),`
+import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{useMDXComponents as n}from"./index-BN6VMYqa.js";import{M as s}from"./index-DCiFp8xr.js";import"./index-ChsGqxH_.js";import"./index-Cb9e4tly.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./iframe-Cq1_BgP4.js";import"./index-BPrLDK9Y.js";import"./index-C7hTFOIV.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";function o(t){const r={a:"a",code:"code",h1:"h1",p:"p",pre:"pre",...n(),...t.components};return e.jsxs(e.Fragment,{children:[e.jsx(s,{title:"Utilities/getTokenVar"}),`
 `,e.jsx(r.h1,{id:"gettokenvartoken",children:"getTokenVar(token)"}),`
 `,e.jsxs(r.p,{children:["This utility allows you to retrieve a token's CSS variable as a string, eg. ",e.jsx(r.code,{children:"var(--abc123)"}),";"]}),`
 `,e.jsx(r.pre,{children:e.jsx(r.code,{className:"language-ts",children:`import { color } from '@preply/ds-core';

package/dist/assets/{hover-CVqLaEzN.js → hover-EENK1oZ2.js}

@@ -1,4 +1,4 @@
-import{j as o}from"./jsx-runtime-BTJTZTIL.js";import{useMDXComponents as r}from"./index-BN6VMYqa.js";import{M as s}from"./index-Dg07ICzV.js";import"./index-ChsGqxH_.js";import"./index-Cb9e4tly.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./iframe-CMkYi43z.js";import"./index-BPrLDK9Y.js";import"./index-C7hTFOIV.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";function t(e){const n={code:"code",h1:"h1",p:"p",pre:"pre",strong:"strong",...r(),...e.components};return o.jsxs(o.Fragment,{children:[o.jsx(s,{title:"Guides/Custom Components/StyledComponents/Hover"}),`
+import{j as o}from"./jsx-runtime-BTJTZTIL.js";import{useMDXComponents as r}from"./index-BN6VMYqa.js";import{M as s}from"./index-DCiFp8xr.js";import"./index-ChsGqxH_.js";import"./index-Cb9e4tly.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./iframe-Cq1_BgP4.js";import"./index-BPrLDK9Y.js";import"./index-C7hTFOIV.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";function t(e){const n={code:"code",h1:"h1",p:"p",pre:"pre",strong:"strong",...r(),...e.components};return o.jsxs(o.Fragment,{children:[o.jsx(s,{title:"Guides/Custom Components/StyledComponents/Hover"}),`
 `,o.jsx(n.h1,{id:"styledcomponents-hover",children:"StyledComponents: Hover"}),`
 `,o.jsxs(n.p,{children:["Import ",o.jsx(n.code,{children:"onHover(content: string)"})," from ",o.jsx(n.code,{children:"@preply/ds-web-core"})," and use the mixin to show hover only for ",o.jsx(n.strong,{children:"Desktops with mouse"}),":"]}),`
 `,o.jsx(n.pre,{children:o.jsx(n.code,{className:"language-ts",children:`import styled from 'styled-components';

package/dist/assets/{hover-BCR2bzfC.js → hover-JspyvNai.js}

@@ -1,4 +1,4 @@
-import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{useMDXComponents as r}from"./index-BN6VMYqa.js";import{M as t}from"./index-Dg07ICzV.js";import"./index-ChsGqxH_.js";import"./index-Cb9e4tly.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./iframe-CMkYi43z.js";import"./index-BPrLDK9Y.js";import"./index-C7hTFOIV.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";function s(n){const o={code:"code",h1:"h1",p:"p",pre:"pre",strong:"strong",...r(),...n.components};return e.jsxs(e.Fragment,{children:[e.jsx(t,{title:"Guides/Custom Components/Less.js/Hover"}),`
+import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{useMDXComponents as r}from"./index-BN6VMYqa.js";import{M as t}from"./index-DCiFp8xr.js";import"./index-ChsGqxH_.js";import"./index-Cb9e4tly.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./iframe-Cq1_BgP4.js";import"./index-BPrLDK9Y.js";import"./index-C7hTFOIV.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";function s(n){const o={code:"code",h1:"h1",p:"p",pre:"pre",strong:"strong",...r(),...n.components};return e.jsxs(e.Fragment,{children:[e.jsx(t,{title:"Guides/Custom Components/Less.js/Hover"}),`
 `,e.jsx(o.h1,{id:"lessjs-hover",children:"Less.js: Hover"}),`
 `,e.jsxs(o.p,{children:["Import ",e.jsx(o.code,{children:"hover.less"})," from ",e.jsx(o.code,{children:"@preply/ds-web-core"})," and use the ",e.jsx(o.code,{children:"onHover"})," mixin to show hover only for ",e.jsx(o.strong,{children:"Desktops with mouse"}),":"]}),`
 `,e.jsx(o.pre,{children:e.jsx(o.code,{className:"language-css",children:`@import '@preply/ds-web-core/dist/generated/hover.less';

package/dist/assets/{hover-D2auHQjx.js → hover-rQzkcwzB.js}

@@ -1,4 +1,4 @@
-import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{useMDXComponents as s}from"./index-BN6VMYqa.js";import{M as t}from"./index-Dg07ICzV.js";import"./index-ChsGqxH_.js";import"./index-Cb9e4tly.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./iframe-CMkYi43z.js";import"./index-BPrLDK9Y.js";import"./index-C7hTFOIV.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";function r(n){const o={code:"code",h1:"h1",p:"p",pre:"pre",strong:"strong",...s(),...n.components};return e.jsxs(e.Fragment,{children:[e.jsx(t,{title:"Guides/Custom Components/Scss/Hover"}),`
+import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{useMDXComponents as s}from"./index-BN6VMYqa.js";import{M as t}from"./index-DCiFp8xr.js";import"./index-ChsGqxH_.js";import"./index-Cb9e4tly.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./iframe-Cq1_BgP4.js";import"./index-BPrLDK9Y.js";import"./index-C7hTFOIV.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";function r(n){const o={code:"code",h1:"h1",p:"p",pre:"pre",strong:"strong",...s(),...n.components};return e.jsxs(e.Fragment,{children:[e.jsx(t,{title:"Guides/Custom Components/Scss/Hover"}),`
 `,e.jsx(o.h1,{id:"scss-hover",children:"SCSS: Hover"}),`
 `,e.jsxs("details",{style:{marginBlock:"24px"},children:[e.jsx("summary",{children:"🚧 SCSS Support is experimental 🚧"}),e.jsx(o.p,{children:"SCSS support was introduced due to the lack of support for LESS in the Next.js app router."}),e.jsx(o.p,{children:"Please avoid using it for other purposes, as the API may change or be removed in the future."})]}),`
 `,e.jsxs(o.p,{children:["Import ",e.jsx(o.code,{children:"hover.scss"})," from ",e.jsx(o.code,{children:"@preply/ds-web-core"})," and use the ",e.jsx(o.code,{children:"onHover"})," mixin to show hover only for ",e.jsx(o.strong,{children:"Desktops with mouse"}),":"]}),`