@preply/ds-docs 3.5.1 → 3.6.0

package/dist/assets/{NumberField-D6cbX2hK.js → NumberField-RsSQ3jKy.js}

@@ -1,6 +1,6 @@
-import{j as u}from"./jsx-runtime-BYouaCF_.js";import{r as V}from"./index-B3evPFBL.js";import{F as g}from"./FormControl-CeIJk4_Z.js";import{w as H}from"./componentNames-CpCJzpB9.js";import{I as L}from"./Input-C1hZX5_o.js";const t=V.forwardRef(function({id:i,label:d,description:s,error:o,required:m,inputDataset:p,dataset:v,hideLabel:f,onClick:c,onValueChange:e,onChange:a,hasError:y,useLegacyRequiredLabel:b,className:I,style:R,...h},q){const E=l=>{a==null||a(l);const n=l.target.value;e==null||e(n?Number(n):void 0)};return u.jsx(g,{id:i,label:d,description:s,error:o,hasError:y,required:m,dataset:v,hideLabel:f,onClick:c,useLegacyRequiredLabel:b,preplyDsComponent:H.NumberField,children:u.jsx(L,{...h,type:"number",ref:q,dataset:p,onChange:E})})});try{t.displayName="NumberField",t.__docgenInfo={description:"",displayName:"NumberField",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"}]}},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> & MouseEventHandler<HTMLInputElement>"}]}},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"}]}},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"}]}},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"}]}},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"}]}},hasError:{defaultValue:null,description:"Whether the field has an error.\n@deprecated Use `error` prop to exlicitly 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"}]}},useLegacyRequiredLabel:{defaultValue:null,description:`When true, adds a "Required" indicator next to the label for the required fields.
+import{j as u}from"./jsx-runtime-BTJTZTIL.js";import{r as V}from"./index-Cb9e4tly.js";import{F as g}from"./FormControl-BBd1k1n3.js";import{w as H}from"./componentNames-NXEPEzbR.js";import{I as L}from"./Input-MEZGWQfc.js";const t=V.forwardRef(function({id:i,label:d,description:s,error:o,required:m,inputDataset:p,dataset:v,hideLabel:f,onClick:c,onValueChange:e,onChange:a,hasError:y,useLegacyRequiredLabel:b,className:I,style:R,...h},q){const E=l=>{a==null||a(l);const n=l.target.value;e==null||e(n?Number(n):void 0)};return u.jsx(g,{id:i,label:d,description:s,error:o,hasError:y,required:m,dataset:v,hideLabel:f,onClick:c,useLegacyRequiredLabel:b,preplyDsComponent:H.NumberField,children:u.jsx(L,{...h,type:"number",ref:q,dataset:p,onChange:E})})});try{t.displayName="NumberField",t.__docgenInfo={description:"",displayName:"NumberField",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"}]}},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> & MouseEventHandler<HTMLInputElement>"}]}},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"}]}},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"}]}},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"}]}},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"}]}},hasError:{defaultValue:null,description:"Whether the field has an error.\n@deprecated Use `error` prop to exlicitly describe the error to users",name:"hasError",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},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"}]}},useLegacyRequiredLabel:{defaultValue:null,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"}]}},name:{defaultValue:null,description:"",name:"name",required:!1,type:{name:"enum",value:[{value:"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"}]}},button:{defaultValue:null,description:"",name:"button",required:!1,type:{name:"enum",value:[{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},onCopy:{defaultValue:null,description:"",name:"onCopy",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLInputElement>"}]}},onCut:{defaultValue:null,description:"",name:"onCut",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLInputElement>"}]}},onPaste:{defaultValue:null,description:"",name:"onPaste",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLInputElement>"}]}},onFocus:{defaultValue:null,description:"",name:"onFocus",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<HTMLInputElement>"}]}},onBlur:{defaultValue:null,description:"",name:"onBlur",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<HTMLInputElement>"}]}},onChange:{defaultValue:null,description:"",name:"onChange",required:!1,type:{name:"enum",value:[{value:"ChangeEventHandler<HTMLInputElement>"}]}},onKeyDown:{defaultValue:null,description:"",name:"onKeyDown",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<HTMLInputElement>"}]}},onKeyUp:{defaultValue:null,description:"",name:"onKeyUp",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<HTMLInputElement>"}]}},icon:{defaultValue:null,description:"",name:"icon",required:!1,type:{name:"enum",value:[{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},readOnly:{defaultValue:null,description:"",name:"readOnly",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},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:"number"}]}},defaultValue:{defaultValue:null,description:"",name:"defaultValue",required:!1,type:{name:"enum",value:[{value:"number"}]}},onValueChange:{defaultValue:null,description:"",name:"onValueChange",required:!1,type:{name:"enum",value:[{value:"(value: number | undefined) => void"}]}},min:{defaultValue:null,description:"",name:"min",required:!1,type:{name:"enum",value:[{value:"number"}]}},max:{defaultValue:null,description:"",name:"max",required:!1,type:{name:"enum",value:[{value:"number"}]}},step:{defaultValue:null,description:"",name:"step",required:!1,type:{name:"enum",value:[{value:"number"}]}},inputDataset:{defaultValue:null,description:"",name:"inputDataset",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: HTMLInputElement | null) => void"},{value:"RefObject<HTMLInputElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}export{t as N};
+@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"}]}},name:{defaultValue:null,description:"",name:"name",required:!1,type:{name:"enum",value:[{value:"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"}]}},onCopy:{defaultValue:null,description:"",name:"onCopy",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLInputElement>"}]}},onCut:{defaultValue:null,description:"",name:"onCut",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLInputElement>"}]}},onPaste:{defaultValue:null,description:"",name:"onPaste",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLInputElement>"}]}},onFocus:{defaultValue:null,description:"",name:"onFocus",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<HTMLInputElement>"}]}},onBlur:{defaultValue:null,description:"",name:"onBlur",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<HTMLInputElement>"}]}},onChange:{defaultValue:null,description:"",name:"onChange",required:!1,type:{name:"enum",value:[{value:"ChangeEventHandler<HTMLInputElement>"}]}},onKeyDown:{defaultValue:null,description:"",name:"onKeyDown",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<HTMLInputElement>"}]}},onKeyUp:{defaultValue:null,description:"",name:"onKeyUp",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<HTMLInputElement>"}]}},icon:{defaultValue:null,description:"",name:"icon",required:!1,type:{name:"enum",value:[{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},button:{defaultValue:null,description:"",name:"button",required:!1,type:{name:"enum",value:[{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},readOnly:{defaultValue:null,description:"",name:"readOnly",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},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:"number"}]}},defaultValue:{defaultValue:null,description:"",name:"defaultValue",required:!1,type:{name:"enum",value:[{value:"number"}]}},onValueChange:{defaultValue:null,description:"",name:"onValueChange",required:!1,type:{name:"enum",value:[{value:"(value: number | undefined) => void"}]}},min:{defaultValue:null,description:"",name:"min",required:!1,type:{name:"enum",value:[{value:"number"}]}},max:{defaultValue:null,description:"",name:"max",required:!1,type:{name:"enum",value:[{value:"number"}]}},step:{defaultValue:null,description:"",name:"step",required:!1,type:{name:"enum",value:[{value:"number"}]}},inputDataset:{defaultValue:null,description:"",name:"inputDataset",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: HTMLInputElement | null) => void"},{value:"RefObject<HTMLInputElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}export{t as N};

package/dist/assets/{NumberField.stories-BHt2ErAX.js → NumberField.stories-D7ZfStPF.js}

@@ -1,4 +1,4 @@
-import{j as g}from"./jsx-runtime-BYouaCF_.js";import{r as re}from"./index-B3evPFBL.js";import{a as se}from"./chunk-D5ZWXAHU-BhFjjRSl.js";import{f as r,w as x,e as n,u as w}from"./index-DDyIDR-R.js";import{F as te}from"./TokyoUIPhone-BHLDT6dz.js";import{F as ie}from"./TokyoUIAttach-BvBvQVx_.js";import{I as ne}from"./Icon-ZIxauYsE.js";import{N as ae}from"./NumberField-D6cbX2hK.js";import{F as ce}from"./FieldButton-Bsa9_rJB.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./v4-CtRu48qb.js";import"./text-accent-DZDDtpIt.js";import"./classNames-BUL1Zq7e.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-CVTdrNe-.js";import"./componentNames-CpCJzpB9.js";import"./index-DdzHuZ-Y.js";import"./defaults-B1rzzf6M.js";import"./FormControl-CeIJk4_Z.js";import"./index-DRKYGVyc.js";import"./index-BfBdt3zW.js";import"./tslib.es6-BntfKcQG.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./message-BraTJ16C.js";import"./Input-C1hZX5_o.js";import"./InputContainer-Bk0tgFnW.js";const je={title:"components/NumberField",component:ae,args:{name:"number",label:"Number",defaultValue:void 0,placeholder:"Enter a number",dataset:{testid:"field",foo:"bar"},inputDataset:{testid:"input",foo:"bar"},onChange:r(),onValueChange:r(),onBlur:r(),onFocus:r(),onClick:r(),onCopy:r(),onKeyDown:r(),onKeyUp:r(),onPaste:r()}},c={play:async({canvasElement:a,step:e,args:t})=>{const o=x(a),i=o.getByTestId("field"),s=o.getByTestId("input");await e("it should render correct label",async()=>{const oe=x(i).getByTestId("label");n(oe).toHaveTextContent("Number • Optional"),n(s).toHaveAccessibleName("Number")}),await e("it should call onFocus when the input is focused",async()=>{s.focus(),n(t.onFocus).toHaveBeenCalled()}),await e("it should call callback when the value changes",async()=>{await w.type(s,"42"),n(t.onValueChange).toHaveBeenCalledWith(42),n(t.onChange).toHaveBeenCalled()}),await e("it should call onBlur when the input is blurred",async()=>{await w.keyboard("{tab}"),n(t.onBlur).toHaveBeenCalled()}),await e("it should render the dataset props",async()=>{n(i).toHaveAttribute("data-testid","field"),n(i).toHaveAttribute("data-foo","bar"),n(s).toHaveAttribute("data-testid","input"),n(s).toHaveAttribute("data-foo","bar")})}},l={render:function(e){const[t,o]=re.useState(e.value);return g.jsx(ae,{...e,value:t,onChange:i=>{var s;o(Number(i.target.value)),(s=e.onChange)==null||s.call(e,i)}})},args:{label:"Controlled NumberField",placeholder:"Enter a number...",value:42},play:async({canvas:a,step:e})=>{await e("it should render the correct initial value",async()=>{const t=a.getByTestId("input");await n(t).toHaveValue(42)}),await e("it should update the value when the user types",async()=>{const t=a.getByTestId("input");await w.clear(t),await w.type(t,"100"),n(t).toHaveValue(100)})}},u={args:{icon:g.jsx(ne,{svg:te,dataset:{testid:"icon"}})},play:async({canvas:a,step:e})=>{await e("it should render the icon",async()=>{const t=a.getByTestId("icon");n(t).toBeInTheDocument()})}},d={args:{description:"Enter a valid number"},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input"),o=a.getByTestId("description");await e("it should render the description",async()=>{n(t).toHaveAccessibleDescription("Enter a valid number"),n(o).toHaveTextContent("Enter a valid number")})}},p={args:{required:!0},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input"),o=a.getByTestId("label");await e("it should render correct label",async()=>{n(t).toHaveAccessibleName("Number"),n(o).toHaveTextContent("Number")}),await e("it should render required attribute",async()=>{n(t).toHaveAttribute("required")})}},m={args:{hideLabel:!0},play:async({canvas:a,step:e})=>{await e("it should render correct a11y label",async()=>{const t=a.getByTestId("input");n(t).toHaveAccessibleName("Number")})}},b={args:{error:"This is an error message"},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input"),o=a.getByTestId("error");await e("it should render the error message",async()=>{n(t).toHaveAccessibleErrorMessage("This is an error message"),n(o).toHaveTextContent("This is an error message")})}},h={args:{disabled:!0},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input");await e("it should render the disabled input",async()=>{n(t).toHaveAttribute("disabled")})}},y={args:{readOnly:!0},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input");await e("it should render the read only input",async()=>{n(t).toHaveAttribute("readonly")})}},v={parameters:{chromatic:{disableSnapshot:!0}},args:{label:"Number of lessons",placeholder:"How about 3?",description:"These lessons will be scheduled automatically"},argTypes:{label:{control:"text"},placeholder:{control:"text"},description:{control:"text"},error:{control:"text"},value:{control:"number"},defaultValue:{control:"number"},inputDataset:{control:"object"},dataset:{control:"object"},id:{control:"text"},required:{control:"boolean"},hideLabel:{control:"boolean"},name:{control:"text"},disabled:{control:"boolean"},readOnly:{control:"boolean"},min:{control:"number"},max:{control:"number"},step:{control:"number"},icon:{options:["None","With Icon"],mapping:{None:void 0,"With Icon":g.jsx(ne,{svg:te})},control:"select"},button:{options:["None","With Button"],mapping:{None:void 0,"With Button":g.jsx(ce,{svg:ie,assistiveText:"Do the thing",onClick:se("field button clicked")})},control:"select"},maxLength:{control:"number"},hasError:{table:{disable:!0}}}};var B,T,H,f,I;c.parameters={...c.parameters,docs:{...(B=c.parameters)==null?void 0:B.docs,source:{originalSource:`{
+import{j as g}from"./jsx-runtime-BTJTZTIL.js";import{r as re}from"./index-Cb9e4tly.js";import{a as se}from"./chunk-D5ZWXAHU-BhFjjRSl.js";import{f as r,w as x,e as n,u as w}from"./index-Ctq3gFTp.js";import{F as te}from"./TokyoUIPhone-CvuBM6jb.js";import{F as ie}from"./TokyoUIAttach-BWl7Jkq1.js";import{I as ne}from"./Icon-CsnSNslb.js";import{N as ae}from"./NumberField-RsSQ3jKy.js";import{F as ce}from"./FieldButton-DkkntNzT.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./v4-CtRu48qb.js";import"./text-accent-DZDDtpIt.js";import"./classNames-BUL1Zq7e.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-BT0Aq7PA.js";import"./componentNames-NXEPEzbR.js";import"./index-DdzHuZ-Y.js";import"./defaults-Clr6nbGc.js";import"./FormControl-BBd1k1n3.js";import"./index-C6wF8VM1.js";import"./index-DSVnVYmz.js";import"./tslib.es6-BntfKcQG.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./message-BqoANQez.js";import"./Input-MEZGWQfc.js";import"./InputContainer-BZsD6GIE.js";const qe={title:"components/NumberField",component:ae,args:{name:"number",label:"Number",defaultValue:void 0,placeholder:"Enter a number",dataset:{testid:"field",foo:"bar"},inputDataset:{testid:"input",foo:"bar"},onChange:r(),onValueChange:r(),onBlur:r(),onFocus:r(),onClick:r(),onCopy:r(),onKeyDown:r(),onKeyUp:r(),onPaste:r()}},c={play:async({canvasElement:a,step:e,args:t})=>{const o=x(a),i=o.getByTestId("field"),s=o.getByTestId("input");await e("it should render correct label",async()=>{const oe=x(i).getByTestId("label");n(oe).toHaveTextContent("Number • Optional"),n(s).toHaveAccessibleName("Number")}),await e("it should call onFocus when the input is focused",async()=>{s.focus(),n(t.onFocus).toHaveBeenCalled()}),await e("it should call callback when the value changes",async()=>{await w.type(s,"42"),n(t.onValueChange).toHaveBeenCalledWith(42),n(t.onChange).toHaveBeenCalled()}),await e("it should call onBlur when the input is blurred",async()=>{await w.keyboard("{tab}"),n(t.onBlur).toHaveBeenCalled()}),await e("it should render the dataset props",async()=>{n(i).toHaveAttribute("data-testid","field"),n(i).toHaveAttribute("data-foo","bar"),n(s).toHaveAttribute("data-testid","input"),n(s).toHaveAttribute("data-foo","bar")})}},l={render:function(e){const[t,o]=re.useState(e.value);return g.jsx(ae,{...e,value:t,onChange:i=>{var s;o(Number(i.target.value)),(s=e.onChange)==null||s.call(e,i)}})},args:{label:"Controlled NumberField",placeholder:"Enter a number...",value:42},play:async({canvas:a,step:e})=>{await e("it should render the correct initial value",async()=>{const t=a.getByTestId("input");await n(t).toHaveValue(42)}),await e("it should update the value when the user types",async()=>{const t=a.getByTestId("input");await w.clear(t),await w.type(t,"100"),n(t).toHaveValue(100)})}},u={args:{icon:g.jsx(ne,{svg:te,dataset:{testid:"icon"}})},play:async({canvas:a,step:e})=>{await e("it should render the icon",async()=>{const t=a.getByTestId("icon");n(t).toBeInTheDocument()})}},d={args:{description:"Enter a valid number"},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input"),o=a.getByTestId("description");await e("it should render the description",async()=>{n(t).toHaveAccessibleDescription("Enter a valid number"),n(o).toHaveTextContent("Enter a valid number")})}},p={args:{required:!0},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input"),o=a.getByTestId("label");await e("it should render correct label",async()=>{n(t).toHaveAccessibleName("Number"),n(o).toHaveTextContent("Number")}),await e("it should render required attribute",async()=>{n(t).toHaveAttribute("required")})}},m={args:{hideLabel:!0},play:async({canvas:a,step:e})=>{await e("it should render correct a11y label",async()=>{const t=a.getByTestId("input");n(t).toHaveAccessibleName("Number")})}},b={args:{error:"This is an error message"},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input"),o=a.getByTestId("error");await e("it should render the error message",async()=>{n(t).toHaveAccessibleErrorMessage("This is an error message"),n(o).toHaveTextContent("This is an error message")})}},h={args:{disabled:!0},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input");await e("it should render the disabled input",async()=>{n(t).toHaveAttribute("disabled")})}},y={args:{readOnly:!0},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input");await e("it should render the read only input",async()=>{n(t).toHaveAttribute("readonly")})}},v={parameters:{chromatic:{disableSnapshot:!0}},args:{label:"Number of lessons",placeholder:"How about 3?",description:"These lessons will be scheduled automatically"},argTypes:{label:{control:"text"},placeholder:{control:"text"},description:{control:"text"},error:{control:"text"},value:{control:"number"},defaultValue:{control:"number"},inputDataset:{control:"object"},dataset:{control:"object"},id:{control:"text"},required:{control:"boolean"},hideLabel:{control:"boolean"},name:{control:"text"},disabled:{control:"boolean"},readOnly:{control:"boolean"},min:{control:"number"},max:{control:"number"},step:{control:"number"},icon:{options:["None","With Icon"],mapping:{None:void 0,"With Icon":g.jsx(ne,{svg:te})},control:"select"},button:{options:["None","With Button"],mapping:{None:void 0,"With Button":g.jsx(ce,{svg:ie,assistiveText:"Do the thing",onClick:se("field button clicked")})},control:"select"},maxLength:{control:"number"},hasError:{table:{disable:!0}}}};var B,T,H,f,I;c.parameters={...c.parameters,docs:{...(B=c.parameters)==null?void 0:B.docs,source:{originalSource:`{
   play: async ({
     canvasElement,
     step,
@@ -251,4 +251,4 @@ import{j as g}from"./jsx-runtime-BYouaCF_.js";import{r as re}from"./index-B3evPF
       }
     }
   }
-}`,...(ee=(Z=v.parameters)==null?void 0:Z.docs)==null?void 0:ee.source}}};const qe=["Basic","Controlled","WithIcon","WithDescription","Required","WithHiddenLabel","HasError","Disabled","ReadOnly","Playground"];export{c as Basic,l as Controlled,h as Disabled,b as HasError,v as Playground,y as ReadOnly,p as Required,d as WithDescription,m as WithHiddenLabel,u as WithIcon,qe as __namedExportsOrder,je as default};
+}`,...(ee=(Z=v.parameters)==null?void 0:Z.docs)==null?void 0:ee.source}}};const ke=["Basic","Controlled","WithIcon","WithDescription","Required","WithHiddenLabel","HasError","Disabled","ReadOnly","Playground"];export{c as Basic,l as Controlled,h as Disabled,b as HasError,v as Playground,y as ReadOnly,p as Required,d as WithDescription,m as WithHiddenLabel,u as WithIcon,ke as __namedExportsOrder,qe as default};

package/dist/assets/{ObserveIntersection-DsqqXq5n.js → ObserveIntersection-B-K9BpyT.js}

@@ -1,8 +1,8 @@
-import{j as b}from"./jsx-runtime-BYouaCF_.js";import{r as s}from"./index-B3evPFBL.js";import{g}from"./index-DdzHuZ-Y.js";import{L as h}from"./defaults-B1rzzf6M.js";import{w as y}from"./componentNames-CpCJzpB9.js";const o=({onIntersect:t,once:a,threshold:r,tag:l,dataset:u,children:i})=>{const e=s.useRef(null);s.useEffect(()=>{const v=([d],f)=>{d.isIntersecting&&(t(),a&&e.current&&f.unobserve(e.current))},m={threshold:r},n=new IntersectionObserver(v,m);return e.current&&n.observe(e.current),()=>n.disconnect()},[t,a,r]);const c=l??h,p={ref:e,...g(u,{preplyDsComponent:y.ObserverIntersection})};return b.jsx(c,{...p,children:i})};try{o.displayName="ObserveIntersection",o.__docgenInfo={description:`An [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) wrapper.
+import{j as b}from"./jsx-runtime-BTJTZTIL.js";import{r as s}from"./index-Cb9e4tly.js";import{g}from"./index-DdzHuZ-Y.js";import{L as h}from"./defaults-Clr6nbGc.js";import{w as y}from"./componentNames-NXEPEzbR.js";const o=({onIntersect:t,once:a,threshold:r,tag:l,dataset:u,children:i})=>{const e=s.useRef(null);s.useEffect(()=>{const v=([d],f)=>{d.isIntersecting&&(t(),a&&e.current&&f.unobserve(e.current))},m={threshold:r},n=new IntersectionObserver(v,m);return e.current&&n.observe(e.current),()=>n.disconnect()},[t,a,r]);const c=l??h,p={ref:e,...g(u,{preplyDsComponent:y.ObserverIntersection})};return b.jsx(c,{...p,children:i})};try{o.displayName="ObserveIntersection",o.__docgenInfo={description:`An [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) wrapper.
 
 Triggers a callback when the wrapped component intersects with the viewport.
 
 This can be useful in several use cases. Examples:
 
 - Track an experiment, once a certain component scrolls into view.
-- Trigger an animation, or a feature (e.g.: onboarding instructions).`,displayName:"ObserveIntersection",props:{onIntersect:{defaultValue:null,description:"",name:"onIntersect",required:!0,type:{name:"() => void"}},once:{defaultValue:null,description:"",name:"once",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},threshold:{defaultValue:null,description:"",name:"threshold",required:!1,type:{name:"enum",value:[{value:"number"}]}},tag:{defaultValue:null,description:"",name:"tag",required:!1,type:{name:"enum",value:[{value:'"p"'},{value:'"div"'},{value:'"span"'},{value:'"article"'},{value:'"caption"'},{value:'"fieldset"'},{value:'"figcaption"'},{value:'"figure"'},{value:'"footer"'},{value:'"header"'},{value:'"li"'},{value:'"main"'},{value:'"ol"'},{value:'"section"'},{value:'"table"'},{value:'"tbody"'},{value:'"td"'},{value:'"tfoot"'},{value:'"th"'},{value:'"thead"'},{value:'"tr"'},{value:'"ul"'}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}}}}}catch{}export{o as O};
+- Trigger an animation, or a feature (e.g.: onboarding instructions).`,displayName:"ObserveIntersection",props:{onIntersect:{defaultValue:null,description:"",name:"onIntersect",required:!0,type:{name:"() => void"}},once:{defaultValue:null,description:"",name:"once",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},threshold:{defaultValue:null,description:"",name:"threshold",required:!1,type:{name:"enum",value:[{value:"number"}]}},tag:{defaultValue:null,description:"",name:"tag",required:!1,type:{name:"enum",value:[{value:'"p"'},{value:'"div"'},{value:'"span"'},{value:'"main"'},{value:'"header"'},{value:'"footer"'},{value:'"article"'},{value:'"section"'},{value:'"ul"'},{value:'"ol"'},{value:'"li"'},{value:'"fieldset"'},{value:'"table"'},{value:'"th"'},{value:'"tr"'},{value:'"td"'},{value:'"thead"'},{value:'"tfoot"'},{value:'"tbody"'},{value:'"caption"'},{value:'"figure"'},{value:'"figcaption"'}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}}}}}catch{}export{o as O};

package/dist/assets/ObserveIntersection.stories-CsECVFcG.js

@@ -0,0 +1,27 @@
+import{j as t}from"./jsx-runtime-BTJTZTIL.js";import{r as a}from"./index-Cb9e4tly.js";import{O as i}from"./ObserveIntersection-B-K9BpyT.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-DdzHuZ-Y.js";import"./defaults-Clr6nbGc.js";import"./componentNames-NXEPEzbR.js";const g={title:"components/ObserveIntersection",component:i,parameters:{tags:["!test"],chromatic:{disableSnapshot:!0}}},e=()=>{const[o,c]=a.useState(!1);return t.jsxs("div",{tabIndex:0,style:{height:"200px",overflowY:"scroll",position:"relative"},children:[t.jsx("div",{style:{position:"sticky",top:"2px"},children:o?"Intersected":"Scroll down to intersect"}),t.jsx("div",{style:{height:"400px",display:"flex",alignItems:"end"},children:t.jsx(i,{onIntersect:()=>c(!0),children:"Observer"})})]})};e.storyName="ObserveIntersection";var s,n,r;e.parameters={...e.parameters,docs:{...(s=e.parameters)==null?void 0:s.docs,source:{originalSource:`() => {
+  const [isIntersecting, setIsIntersecting] = useState(false);
+  return (
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- This element is interactive; it's scrollable.
+    <div tabIndex={0} style={{
+      height: '200px',
+      overflowY: 'scroll',
+      position: 'relative'
+    }}>
+            <div style={{
+        position: 'sticky',
+        top: '2px'
+      }}>
+                {isIntersecting ? 'Intersected' : 'Scroll down to intersect'}
+            </div>
+            <div style={{
+        height: '400px',
+        display: 'flex',
+        alignItems: 'end'
+      }}>
+                <ObserveIntersection onIntersect={() => setIsIntersecting(true)}>
+                    Observer
+                </ObserveIntersection>
+            </div>
+        </div>
+  );
+}`,...(r=(n=e.parameters)==null?void 0:n.docs)==null?void 0:r.source}}};const b=["Base"];export{e as Base,b as __namedExportsOrder,g as default};

package/dist/assets/{OnboardingTooltip-DVNAQjDc.js → OnboardingTooltip-S86JAVp1.js}

@@ -1,4 +1,4 @@
-import{j as t}from"./jsx-runtime-BYouaCF_.js";import{r as n}from"./index-B3evPFBL.js";import{R as _,A as q,P as x,C as O,a as N,b as E}from"./index-jPlWeKki.js";import{F as k}from"./TokyoUIClose-DFIfVIfy.js";import{I as P}from"./Icon-ZIxauYsE.js";import{T as j}from"./Text-BmdJVr9v.js";import{B as D}from"./Button-BSyqsKC5.js";import{H as T}from"./Heading-ese4_5Hg.js";import{u as S}from"./index-BfBdt3zW.js";import{g as L}from"./shared-strings-CcWGHelY.js";import{g as M}from"./PortalElementProvider-D4ltrA8j.js";import{g as H}from"./index-DdzHuZ-Y.js";import{w as X}from"./componentNames-CpCJzpB9.js";import{M as J}from"./message-BraTJ16C.js";const B="content__KHgp9",F="header__CaLti",U="close__3s-VD",A="footer__X5qXF",G="arrow__0pg-s",o={content:B,header:F,close:U,footer:A,arrow:G},z=e=>{e.scrollIntoViewIfNeeded?e.scrollIntoViewIfNeeded(!1):e.scrollIntoView({behavior:"auto",block:"nearest",inline:"nearest"})},m=({open:e,onOpenChange:i,disabled:r,title:u,text:s,children:a,side:l,dataset:h,actionLabel:g=t.jsx(J,{id:"preply-ds.onboardingTooltip.actionLabel",defaultMessage:"Got it",description:"Default onboarding tooltip action label. Used to acknowledge and close the tooltip."}),actionOnClick:b,actionHref:y,counter:C,autoScroll:v=!0})=>{const{formatMessage:I}=S(),w=M(),f=n.useId(),V=n.useId(),d=n.useId(),c=n.useRef(null);return n.useEffect(()=>{e&&c.current&&v&&z(c.current)},[v,e]),r?a:t.jsxs(_,{open:e,onOpenChange:i,children:[t.jsx(q,{ref:c,id:d,asChild:!0,children:a}),t.jsx(x,{container:w,children:t.jsxs(O,{onInteractOutside:R=>{R.preventDefault()},side:l,className:o.content,"aria-labelledby":f,"aria-describedby":`${d} ${V}`,...H(h,{preplyDsComponent:X.OnboardingTooltip}),children:[t.jsxs("div",{className:o.header,children:[t.jsx(N,{className:o.close,"aria-label":I(L.close),"data-testid":"close",children:t.jsx(P,{accent:"inverted",svg:k})}),t.jsx(T,{tag:"h1",variant:"small",accent:"inverted",id:f,"aria-describedby":d,children:u})]}),t.jsx(j,{variant:"default-regular",accent:"inverted",children:s}),t.jsxs("div",{className:o.footer,children:[C,t.jsx(D,{variant:"inverted",size:"small",onClick:b,href:y,dataset:{testid:"action"},wrap:!0,children:g})]}),t.jsx(E,{"aria-hidden":!0,className:o.arrow,width:18,height:11})]})})]})},p=e=>{const[i,r]=n.useState(!0),u=a=>{var l;a||(l=e.onClose)==null||l.call(e),r(a)},s=()=>{var a,l;(a=e.actionOnClick)==null||a.call(e),r(!1),(l=e.onClose)==null||l.call(e)};return t.jsx(m,{...e,open:i,onOpenChange:u,actionOnClick:s})};try{m.displayName="InternalOnboardingTooltip",m.__docgenInfo={description:"",displayName:"InternalOnboardingTooltip",props:{title:{defaultValue:null,description:"",name:"title",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"}]}},text:{defaultValue:null,description:"",name:"text",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"}]}},disabled:{defaultValue:null,description:"Disables tooltip completely",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},onClose:{defaultValue:null,description:"Called when the tooltip is closed",name:"onClose",required:!1,type:{name:"enum",value:[{value:"() => void"}]}},actionLabel:{defaultValue:{value:`(
+import{j as t}from"./jsx-runtime-BTJTZTIL.js";import{r as n}from"./index-Cb9e4tly.js";import{R as _,A as q,P as x,C as O,a as N,b as E}from"./index-DHRyQyAr.js";import{F as k}from"./TokyoUIClose-thK8sk63.js";import{I as P}from"./Icon-CsnSNslb.js";import{T as j}from"./Text-CykvSLVe.js";import{B as D}from"./Button-C5gzVt4K.js";import{H as T}from"./Heading-BLxyLk9f.js";import{u as S}from"./index-DSVnVYmz.js";import{g as L}from"./shared-strings-BzaHC9x5.js";import{g as M}from"./PortalElementProvider-CgL8vj5o.js";import{g as H}from"./index-DdzHuZ-Y.js";import{w as X}from"./componentNames-NXEPEzbR.js";import{M as J}from"./message-BqoANQez.js";const B="content__KHgp9",F="header__CaLti",U="close__3s-VD",A="footer__X5qXF",G="arrow__0pg-s",o={content:B,header:F,close:U,footer:A,arrow:G},z=e=>{e.scrollIntoViewIfNeeded?e.scrollIntoViewIfNeeded(!1):e.scrollIntoView({behavior:"auto",block:"nearest",inline:"nearest"})},m=({open:e,onOpenChange:i,disabled:r,title:u,text:s,children:a,side:l,dataset:h,actionLabel:g=t.jsx(J,{id:"preply-ds.onboardingTooltip.actionLabel",defaultMessage:"Got it",description:"Default onboarding tooltip action label. Used to acknowledge and close the tooltip."}),actionOnClick:b,actionHref:y,counter:C,autoScroll:v=!0})=>{const{formatMessage:I}=S(),w=M(),f=n.useId(),V=n.useId(),d=n.useId(),c=n.useRef(null);return n.useEffect(()=>{e&&c.current&&v&&z(c.current)},[v,e]),r?a:t.jsxs(_,{open:e,onOpenChange:i,children:[t.jsx(q,{ref:c,id:d,asChild:!0,children:a}),t.jsx(x,{container:w,children:t.jsxs(O,{onInteractOutside:R=>{R.preventDefault()},side:l,className:o.content,"aria-labelledby":f,"aria-describedby":`${d} ${V}`,...H(h,{preplyDsComponent:X.OnboardingTooltip}),children:[t.jsxs("div",{className:o.header,children:[t.jsx(N,{className:o.close,"aria-label":I(L.close),"data-testid":"close",children:t.jsx(P,{accent:"inverted",svg:k})}),t.jsx(T,{tag:"h1",variant:"small",accent:"inverted",id:f,"aria-describedby":d,children:u})]}),t.jsx(j,{variant:"default-regular",accent:"inverted",children:s}),t.jsxs("div",{className:o.footer,children:[C,t.jsx(D,{variant:"inverted",size:"small",onClick:b,href:y,dataset:{testid:"action"},wrap:!0,children:g})]}),t.jsx(E,{"aria-hidden":!0,className:o.arrow,width:18,height:11})]})})]})},p=e=>{const[i,r]=n.useState(!0),u=a=>{var l;a||(l=e.onClose)==null||l.call(e),r(a)},s=()=>{var a,l;(a=e.actionOnClick)==null||a.call(e),r(!1),(l=e.onClose)==null||l.call(e)};return t.jsx(m,{...e,open:i,onOpenChange:u,actionOnClick:s})};try{m.displayName="InternalOnboardingTooltip",m.__docgenInfo={description:"",displayName:"InternalOnboardingTooltip",props:{title:{defaultValue:null,description:"",name:"title",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"}]}},text:{defaultValue:null,description:"",name:"text",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"}]}},disabled:{defaultValue:null,description:"Disables tooltip completely",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},onClose:{defaultValue:null,description:"Called when the tooltip is closed",name:"onClose",required:!1,type:{name:"enum",value:[{value:"() => void"}]}},actionLabel:{defaultValue:{value:`(
         <FormattedMessage
             id="preply-ds.onboardingTooltip.actionLabel"
             defaultMessage="Got it"

package/dist/assets/OnboardingTooltip.stories-yysftpQx.js

@@ -0,0 +1,66 @@
+import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{O as u}from"./OnboardingTooltip-S86JAVp1.js";import{I as g}from"./IconButton-NYwQQfnV.js";import{F as x}from"./TokyoUIFav-DOVerCtW.js";import"./index-ChsGqxH_.js";import"./index-Cb9e4tly.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-DHRyQyAr.js";import"./PortalElementProvider-CgL8vj5o.js";import"./index-C6wF8VM1.js";import"./index-BPrLDK9Y.js";import"./index-C7hTFOIV.js";import"./Combination-Cz1uIyPJ.js";import"./tslib.es6-BntfKcQG.js";import"./index-QwIMrChO.js";import"./TokyoUIClose-thK8sk63.js";import"./Icon-CsnSNslb.js";import"./text-accent-DZDDtpIt.js";import"./classNames-BUL1Zq7e.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-BT0Aq7PA.js";import"./componentNames-NXEPEzbR.js";import"./index-DdzHuZ-Y.js";import"./defaults-Clr6nbGc.js";import"./Text-CykvSLVe.js";import"./text-centered-CznToR0o.js";import"./Button-C5gzVt4K.js";import"./ButtonBase-D5O3MkG2.js";import"./Spinner-T-vTyHiv.js";import"./useMergeRefs-SFH7Mw4x.js";import"./useHostname-Y3PlXofY.js";import"./index-CC6DAVyL.js";import"./Heading-BLxyLk9f.js";import"./index-DSVnVYmz.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./shared-strings-BzaHC9x5.js";import"./message-BqoANQez.js";const oe={title:"Components/OnboardingTooltip",component:u,parameters:{docs:{story:{inline:!1,height:250},description:{component:"Are you looking for a step-by-step tour? Check out [OnboardingTour](/docs/components-onboardingtour--docs)"}},a11y:{config:{rules:[{id:"color-contrast",enabled:!1}]}}},decorators:[t=>e.jsx("div",{style:{margin:"auto",width:"max-content"},children:t()})]},f=t=>[!1,!1],h=t=>a=>{},o=()=>{const[t,a]=f(),v=h();return e.jsx(u,{title:"New Feature Available!",text:"We've added an exciting new feature to enhance your experience.",disabled:a||t,onClose:()=>v(!0),children:e.jsx(g,{variant:"ghost",svg:e.jsx(x,{}),assistiveText:"Favorite"})})};o.storyName="OnboardingTooltip";const r={tags:["!autodocs"],args:{title:"New Feature Available!",text:"We've added an exciting new feature to enhance your experience.",disabled:!1,onClose:()=>{},children:e.jsx(g,{variant:"ghost",svg:e.jsx(x,{}),assistiveText:"Favorite"})},argTypes:{title:{control:"text"},text:{control:"text"},actionLabel:{control:"text"},actionOnClick:{control:!1},actionHref:{control:"text"},disabled:{control:"boolean"},dataset:{control:"object"},onClose:{control:!1},children:{control:!1}},parameters:{docs:{story:{height:450}},chromatic:{disableSnapshot:!0}},decorators:[t=>e.jsx("div",{style:{minHeight:"100vh",display:"flex"},children:e.jsx("div",{style:{margin:"auto",width:"max-content"},children:t()})})]};var i,n,s,l,c;o.parameters={...o.parameters,docs:{...(i=o.parameters)==null?void 0:i.docs,source:{originalSource:`() => {
+  const [wasTooltipSeen, loading] = useIsFeatureActive('new-feature');
+  const setTooltipSeen = useToggleFeature('new-feature');
+  return <OnboardingTooltip title="New Feature Available!" text="We've added an exciting new feature to enhance your experience." disabled={loading || wasTooltipSeen} onClose={() => setTooltipSeen(true)}>
+            <IconButton variant="ghost" svg={<TokyoUIFav />} assistiveText="Favorite" />
+        </OnboardingTooltip>;
+}`,...(s=(n=o.parameters)==null?void 0:n.docs)==null?void 0:s.source},description:{story:"Basic usage of the onboarding tooltip.\n\nUse `disabled` and `onClose` (or `actionOnClick`) props to control tooltip's visibility (We recommend using FeatureToggles for this)",...(c=(l=o.parameters)==null?void 0:l.docs)==null?void 0:c.description}}};var d,p,m;r.parameters={...r.parameters,docs:{...(d=r.parameters)==null?void 0:d.docs,source:{originalSource:`{
+  tags: ['!autodocs'],
+  args: {
+    title: 'New Feature Available!',
+    text: "We've added an exciting new feature to enhance your experience.",
+    disabled: false,
+    onClose: () => {},
+    children: <IconButton variant="ghost" svg={<TokyoUIFav />} assistiveText="Favorite" />
+  },
+  argTypes: {
+    title: {
+      control: 'text'
+    },
+    text: {
+      control: 'text'
+    },
+    actionLabel: {
+      control: 'text'
+    },
+    actionOnClick: {
+      control: false
+    },
+    actionHref: {
+      control: 'text'
+    },
+    disabled: {
+      control: 'boolean'
+    },
+    dataset: {
+      control: 'object'
+    },
+    onClose: {
+      control: false
+    },
+    children: {
+      control: false
+    }
+  },
+  parameters: {
+    docs: {
+      story: {
+        height: 450
+      }
+    },
+    chromatic: {
+      disableSnapshot: true
+    }
+  },
+  decorators: [story => <div style={{
+    minHeight: '100vh',
+    display: 'flex'
+  }}>
+                <div style={{
+      margin: 'auto',
+      width: 'max-content'
+    }}>
+                    {story()}
+                </div>
+            </div>]
+}`,...(m=(p=r.parameters)==null?void 0:p.docs)==null?void 0:m.source}}};const re=["Default","Playground"];export{o as Default,r as Playground,re as __namedExportsOrder,oe as default};

package/dist/assets/OnboardingTooltip.tests.stories-BGYD6ZgF.js

@@ -0,0 +1,79 @@
+import{j as a}from"./jsx-runtime-BTJTZTIL.js";import{O as x}from"./OnboardingTooltip-S86JAVp1.js";import{I}from"./IconButton-NYwQQfnV.js";import{F as f}from"./TokyoUIFav-DOVerCtW.js";import{w as s,a as r,e as n,u as m}from"./index-Ctq3gFTp.js";import{B as k}from"./Button-C5gzVt4K.js";import{L as F}from"./LayoutFlex-C3k4b85b.js";import"./index-ChsGqxH_.js";import"./index-Cb9e4tly.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-DHRyQyAr.js";import"./PortalElementProvider-CgL8vj5o.js";import"./index-C6wF8VM1.js";import"./index-BPrLDK9Y.js";import"./index-C7hTFOIV.js";import"./Combination-Cz1uIyPJ.js";import"./tslib.es6-BntfKcQG.js";import"./index-QwIMrChO.js";import"./TokyoUIClose-thK8sk63.js";import"./Icon-CsnSNslb.js";import"./text-accent-DZDDtpIt.js";import"./classNames-BUL1Zq7e.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-BT0Aq7PA.js";import"./componentNames-NXEPEzbR.js";import"./index-DdzHuZ-Y.js";import"./defaults-Clr6nbGc.js";import"./Text-CykvSLVe.js";import"./text-centered-CznToR0o.js";import"./Heading-BLxyLk9f.js";import"./index-DSVnVYmz.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./shared-strings-BzaHC9x5.js";import"./message-BqoANQez.js";import"./ButtonBase-D5O3MkG2.js";import"./Spinner-T-vTyHiv.js";import"./useMergeRefs-SFH7Mw4x.js";import"./useHostname-Y3PlXofY.js";import"./index-CC6DAVyL.js";import"./layout-relative.module-ChaXrVQQ.js";const yt={title:"Components/OnboardingTooltip/Tests",component:x,parameters:{layout:"centered",controls:{disable:!0},chromatic:{disableSnapshot:!0}},tags:["!autodocs","!a11y-test","test"],decorators:[e=>a.jsx("div",{style:{margin:"100px 0"},children:e()})],args:{title:"Title",text:"Body text",actionLabel:"Action label",disabled:!1,onClose:()=>{},dataset:{testid:"tooltip"},children:a.jsx(I,{svg:a.jsx(f,{}),assistiveText:"Favorite"})}},c={play:async({canvasElement:e,step:o})=>{const i=s(e);await o("wait for tooltip to be visible",async()=>{await r(()=>{const t=i.getByTestId("tooltip");return n(t).toBeVisible()})}),await o("close the tooltip",()=>{const u=s(i.getByTestId("tooltip")).getByTestId("close");return m.click(u)}),await o("wait for tooltip to be hidden",async()=>{await r(()=>{const t=i.queryByTestId("tooltip");return n(t).toBeNull()})})}},l={play:async({canvasElement:e,step:o})=>{const i=s(e);await o("wait for tooltip to be visible",async()=>{await r(()=>{const t=i.getByTestId("tooltip");return n(t).toBeVisible()})}),await o("close the tooltip",()=>{const u=s(i.getByTestId("tooltip")).getByTestId("action");return m.click(u)}),await o("wait for tooltip to be hidden",async()=>{await r(()=>{const t=i.queryByTestId("tooltip");return n(t).toBeNull()})})}};function E(e){return new Promise(o=>setTimeout(o,e))}const p={render:e=>a.jsxs(F,{gap:"24",direction:"column",children:[a.jsx(k,{children:"Click outside the tooltip"}),a.jsx(x,{...e,children:a.jsx(I,{svg:a.jsx(f,{}),assistiveText:"Favorite"})})]}),play:async({canvasElement:e,step:o})=>{const i=s(e);await o("wait for tooltip to be visible",async()=>{await r(()=>{const t=i.getByTestId("tooltip");return n(t).toBeVisible()})}),await o("click outside the tooltip",()=>{const t=i.getByText("Click outside the tooltip");return m.click(t)}),await o("check the tooltip remain open",async()=>{await E(1e3);const t=i.getByTestId("tooltip");return n(t).toBeVisible()})}};var d,y,w;c.parameters={...c.parameters,docs:{...(d=c.parameters)==null?void 0:d.docs,source:{originalSource:`{
+  play: async ({
+    canvasElement,
+    step
+  }) => {
+    const canvas = within(canvasElement);
+    await step('wait for tooltip to be visible', async () => {
+      await waitFor(() => {
+        const tooltip = canvas.getByTestId('tooltip');
+        return expect(tooltip).toBeVisible();
+      });
+    });
+    await step('close the tooltip', () => {
+      const tooltip = within(canvas.getByTestId('tooltip'));
+      const closeButton = tooltip.getByTestId('close');
+      return userEvent.click(closeButton);
+    });
+    await step('wait for tooltip to be hidden', async () => {
+      await waitFor(() => {
+        const tooltip = canvas.queryByTestId('tooltip');
+        return expect(tooltip).toBeNull();
+      });
+    });
+  }
+}`,...(w=(y=c.parameters)==null?void 0:y.docs)==null?void 0:w.source}}};var B,v,g;l.parameters={...l.parameters,docs:{...(B=l.parameters)==null?void 0:B.docs,source:{originalSource:`{
+  play: async ({
+    canvasElement,
+    step
+  }) => {
+    const canvas = within(canvasElement);
+    await step('wait for tooltip to be visible', async () => {
+      await waitFor(() => {
+        const tooltip = canvas.getByTestId('tooltip');
+        return expect(tooltip).toBeVisible();
+      });
+    });
+    await step('close the tooltip', () => {
+      const tooltip = within(canvas.getByTestId('tooltip'));
+      const actionButton = tooltip.getByTestId('action');
+      return userEvent.click(actionButton);
+    });
+    await step('wait for tooltip to be hidden', async () => {
+      await waitFor(() => {
+        const tooltip = canvas.queryByTestId('tooltip');
+        return expect(tooltip).toBeNull();
+      });
+    });
+  }
+}`,...(g=(v=l.parameters)==null?void 0:v.docs)==null?void 0:g.source}}};var b,h,T;p.parameters={...p.parameters,docs:{...(b=p.parameters)==null?void 0:b.docs,source:{originalSource:`{
+  render: args => {
+    return <LayoutFlex gap="24" direction="column">
+                <Button>Click outside the tooltip</Button>
+                <OnboardingTooltip {...args}>
+                    <IconButton svg={<TokyoUIFav />} assistiveText="Favorite" />
+                </OnboardingTooltip>
+            </LayoutFlex>;
+  },
+  play: async ({
+    canvasElement,
+    step
+  }) => {
+    const canvas = within(canvasElement);
+    await step('wait for tooltip to be visible', async () => {
+      await waitFor(() => {
+        const tooltip = canvas.getByTestId('tooltip');
+        return expect(tooltip).toBeVisible();
+      });
+    });
+    await step('click outside the tooltip', () => {
+      const outsideButton = canvas.getByText('Click outside the tooltip');
+      return userEvent.click(outsideButton);
+    });
+    await step('check the tooltip remain open', async () => {
+      await delay(1000);
+      const tooltip = canvas.getByTestId('tooltip');
+      return expect(tooltip).toBeVisible();
+    });
+  }
+}`,...(T=(h=p.parameters)==null?void 0:h.docs)==null?void 0:T.source}}};const wt=["Default","CloseWithActionButton","DoNotCloseOnInteractionOutside"];export{l as CloseWithActionButton,c as Default,p as DoNotCloseOnInteractionOutside,wt as __namedExportsOrder,yt as default};

package/dist/assets/{OnboardingTour-DdV7TN6M.js → OnboardingTour-DdoL-ALr.js}

@@ -1,4 +1,4 @@
-import{j as o}from"./jsx-runtime-BYouaCF_.js";import{r as l}from"./index-B3evPFBL.js";import{I as A}from"./OnboardingTooltip-DVNAQjDc.js";import"./index-BfBdt3zW.js";import{M as f}from"./message-BraTJ16C.js";const T="counter__ArBS-",j={counter:T},v=({totalSteps:n,nextActionLabel:e=o.jsx(f,{id:"preply-ds.onboardingTour.nextActionLabel",defaultMessage:"Next",description:"Onboarding tour next action label"}),completeActionLabel:a=o.jsx(f,{id:"preply-ds.onboardingTour.completeActionLabel",defaultMessage:"Got it",description:"Onboarding tour complete action label"}),onClose:t,onComplete:r,onStepChange:i,disabled:s,children:p,ctx:x})=>{const[b,u]=l.useState(!0),[d,g]=l.useState(0),c={totalSteps:n,nextActionLabel:e,completeActionLabel:a,onClose:()=>{u(!1),t==null||t()},active:!s&&b,currentStep:d,onActionClick:()=>{if(d===n-1)r==null||r(),u(!1);else{const h=d+1;g(h),i==null||i(h)}}};return o.jsx(x.Provider,{value:c,children:p})},_=({ctx:n,...e})=>{const a=l.useContext(n);if(!a)throw new Error("OnboardingTourContext not found");const{currentStep:t,totalSteps:r,onActionClick:i,onClose:s,active:p,nextActionLabel:x,completeActionLabel:b}=a,u=e.step===r-1,d=e.step===t,g=u?b:x,m=()=>{var c;(c=e.actionOnClick)==null||c.call(e),i()},O=c=>{c||s==null||s()};return o.jsx(A,{...e,counter:o.jsx("p",{className:j.counter,children:o.jsx(f,{id:"preply-ds.onboardingTour.counter",defaultMessage:"{currentStep} of {totalSteps}",description:"Onboarding tour step counter, e.g. '1 of 3'",values:{currentStep:t+1,totalSteps:r}})}),open:p&&d,onOpenChange:O,actionLabel:g,actionOnClick:m})},S=()=>{const n=l.createContext(null);return{Provider:t=>o.jsx(v,{...t,ctx:n}),Step:t=>o.jsx(_,{...t,ctx:n})}};try{S.displayName="createOnboardingTour",S.__docgenInfo={description:`Creates a new onboarding tour.
+import{j as o}from"./jsx-runtime-BTJTZTIL.js";import{r as l}from"./index-Cb9e4tly.js";import{I as A}from"./OnboardingTooltip-S86JAVp1.js";import"./index-DSVnVYmz.js";import{M as f}from"./message-BqoANQez.js";const T="counter__ArBS-",j={counter:T},v=({totalSteps:n,nextActionLabel:e=o.jsx(f,{id:"preply-ds.onboardingTour.nextActionLabel",defaultMessage:"Next",description:"Onboarding tour next action label"}),completeActionLabel:a=o.jsx(f,{id:"preply-ds.onboardingTour.completeActionLabel",defaultMessage:"Got it",description:"Onboarding tour complete action label"}),onClose:t,onComplete:r,onStepChange:i,disabled:s,children:p,ctx:x})=>{const[b,u]=l.useState(!0),[d,g]=l.useState(0),c={totalSteps:n,nextActionLabel:e,completeActionLabel:a,onClose:()=>{u(!1),t==null||t()},active:!s&&b,currentStep:d,onActionClick:()=>{if(d===n-1)r==null||r(),u(!1);else{const h=d+1;g(h),i==null||i(h)}}};return o.jsx(x.Provider,{value:c,children:p})},_=({ctx:n,...e})=>{const a=l.useContext(n);if(!a)throw new Error("OnboardingTourContext not found");const{currentStep:t,totalSteps:r,onActionClick:i,onClose:s,active:p,nextActionLabel:x,completeActionLabel:b}=a,u=e.step===r-1,d=e.step===t,g=u?b:x,m=()=>{var c;(c=e.actionOnClick)==null||c.call(e),i()},O=c=>{c||s==null||s()};return o.jsx(A,{...e,counter:o.jsx("p",{className:j.counter,children:o.jsx(f,{id:"preply-ds.onboardingTour.counter",defaultMessage:"{currentStep} of {totalSteps}",description:"Onboarding tour step counter, e.g. '1 of 3'",values:{currentStep:t+1,totalSteps:r}})}),open:p&&d,onOpenChange:O,actionLabel:g,actionOnClick:m})},S=()=>{const n=l.createContext(null);return{Provider:t=>o.jsx(v,{...t,ctx:n}),Step:t=>o.jsx(_,{...t,ctx:n})}};try{S.displayName="createOnboardingTour",S.__docgenInfo={description:`Creates a new onboarding tour.
 
 This factory pattern allows multiple independent tours to be nested within each other
 without context conflicts, as each tour maintains its own separate context and state.`,displayName:"createOnboardingTour",props:{}}}catch{}export{S as c};

package/dist/assets/{OnboardingTour.stories-D0ScuFD6.js → OnboardingTour.stories-CFHFqnUP.js}

@@ -1,8 +1,8 @@
-import{j as e}from"./jsx-runtime-BYouaCF_.js";import{r as b}from"./index-B3evPFBL.js";import{c as x}from"./OnboardingTour-DdV7TN6M.js";import{T as n}from"./Text-BmdJVr9v.js";import{L as y}from"./LayoutFlex-BBGvSVMb.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./OnboardingTooltip-DVNAQjDc.js";import"./index-jPlWeKki.js";import"./PortalElementProvider-D4ltrA8j.js";import"./index-DRKYGVyc.js";import"./index-jEDObK_5.js";import"./index-C66nt8TK.js";import"./Combination-CCYtWL8C.js";import"./tslib.es6-BntfKcQG.js";import"./index-DbgDZDus.js";import"./TokyoUIClose-DFIfVIfy.js";import"./Icon-ZIxauYsE.js";import"./text-accent-DZDDtpIt.js";import"./classNames-BUL1Zq7e.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-CVTdrNe-.js";import"./componentNames-CpCJzpB9.js";import"./index-DdzHuZ-Y.js";import"./defaults-B1rzzf6M.js";import"./Button-BSyqsKC5.js";import"./ButtonBase-Bdtn25V2.js";import"./Spinner-BCTJunNM.js";import"./useMergeRefs-CeyIhNgY.js";import"./useHostname-CH18gHFj.js";import"./index-CC6DAVyL.js";import"./Heading-ese4_5Hg.js";import"./text-centered-CznToR0o.js";import"./index-BfBdt3zW.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./shared-strings-CcWGHelY.js";import"./message-BraTJ16C.js";import"./layout-relative.module-ed9bC4H4.js";const l=t=>null,s=t=>null;try{l.displayName="OnboardingTourProvider",l.__docgenInfo={description:`For some reason, storybook fails to render arg tables for the components
+import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{r as b}from"./index-Cb9e4tly.js";import{c as x}from"./OnboardingTour-DdoL-ALr.js";import{T as n}from"./Text-CykvSLVe.js";import{L as y}from"./LayoutFlex-C3k4b85b.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./OnboardingTooltip-S86JAVp1.js";import"./index-DHRyQyAr.js";import"./PortalElementProvider-CgL8vj5o.js";import"./index-C6wF8VM1.js";import"./index-BPrLDK9Y.js";import"./index-C7hTFOIV.js";import"./Combination-Cz1uIyPJ.js";import"./tslib.es6-BntfKcQG.js";import"./index-QwIMrChO.js";import"./TokyoUIClose-thK8sk63.js";import"./Icon-CsnSNslb.js";import"./text-accent-DZDDtpIt.js";import"./classNames-BUL1Zq7e.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-BT0Aq7PA.js";import"./componentNames-NXEPEzbR.js";import"./index-DdzHuZ-Y.js";import"./defaults-Clr6nbGc.js";import"./Button-C5gzVt4K.js";import"./ButtonBase-D5O3MkG2.js";import"./Spinner-T-vTyHiv.js";import"./useMergeRefs-SFH7Mw4x.js";import"./useHostname-Y3PlXofY.js";import"./index-CC6DAVyL.js";import"./Heading-BLxyLk9f.js";import"./text-centered-CznToR0o.js";import"./index-DSVnVYmz.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./shared-strings-BzaHC9x5.js";import"./message-BqoANQez.js";import"./layout-relative.module-ChaXrVQQ.js";const l=t=>null,s=t=>null;try{l.displayName="OnboardingTourProvider",l.__docgenInfo={description:`For some reason, storybook fails to render arg tables for the components
 when they're created with the \`createOnboardingTour\` function.
 
 As a workaround, we're manually defining fake components with the same
-props as originals just for props parsing ¯\\_(ツ)_/¯`,displayName:"OnboardingTourProvider",props:{totalSteps:{defaultValue:null,description:"Total number of steps in the tour",name:"totalSteps",required:!0,type:{name:"number"}},nextActionLabel:{defaultValue:{value:'"Next"'},description:'Label for the "Next" action button',name:"nextActionLabel",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"}]}},completeActionLabel:{defaultValue:{value:'"Got it"'},description:'Label for the "Complete" action button',name:"completeActionLabel",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"}]}},disabled:{defaultValue:null,description:"Whether the tour is disabled",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},onClose:{defaultValue:null,description:"Called when the tour is closed",name:"onClose",required:!1,type:{name:"enum",value:[{value:"() => void"}]}},onComplete:{defaultValue:null,description:"Called when the tour is completed",name:"onComplete",required:!1,type:{name:"enum",value:[{value:"() => void"}]}},onStepChange:{defaultValue:null,description:"Called when the current step index changes",name:"onStepChange",required:!1,type:{name:"enum",value:[{value:"(step: number) => void"}]}}}}}catch{}try{s.displayName="OnboardingTourStep",s.__docgenInfo={description:"",displayName:"OnboardingTourStep",props:{dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},title:{defaultValue:null,description:"",name:"title",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"}]}},text:{defaultValue:null,description:"",name:"text",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"}]}},side:{defaultValue:null,description:"Preferred side of the tooltip to appear from. Use if default side might block important content.",name:"side",required:!1,type:{name:"enum",value:[{value:'"top"'},{value:'"right"'},{value:'"bottom"'},{value:'"left"'}]}},actionOnClick:{defaultValue:null,description:"By default, the action button closes the tooltip.\n\nProvide `actionOnClick` to also perform other action.",name:"actionOnClick",required:!1,type:{name:"enum",value:[{value:"() => void"}]}},autoScroll:{defaultValue:{value:"true"},description:"If true, the tooltip will automatically scroll into view when it is opened.",name:"autoScroll",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},step:{defaultValue:null,description:"Zero-based step index",name:"step",required:!0,type:{name:"number"}}}}}catch{}const o=x(),se={title:"Components/OnboardingTour",component:l,subcomponents:{OnboardingTourStep:s},parameters:{docs:{story:{inline:!1,height:250},description:{component:"Are you looking for a tooltip to highlight single element? Check out [OnboardingTooltip](/docs/components-onboardingtooltip--docs)"}},a11y:{config:{rules:[{id:"color-contrast",enabled:!1}]}}},decorators:[t=>e.jsx("div",{style:{margin:"auto",width:"max-content"},children:t()})]},C=t=>[!1,!1],j=t=>i=>{},r=()=>{const[t,i]=C(),T=j();return e.jsxs(o.Provider,{totalSteps:3,disabled:i||t,onComplete:()=>T(!0),children:[e.jsx("div",{style:{height:250},children:e.jsx(o.Step,{step:0,title:"Step 1",text:"This is the first step of the onboarding tour.",children:e.jsx(n,{children:"Step 1"})})}),e.jsx("div",{style:{height:250},children:e.jsx(o.Step,{step:1,title:"Step 2",text:"This is the second step of the onboarding tour.",children:e.jsx(n,{children:"Step 2"})})}),e.jsx("div",{style:{height:250},children:e.jsx(o.Step,{step:2,title:"Step 3",text:"This is the final step of the onboarding tour.",children:e.jsx(n,{children:"Step 3"})})})]})};r.storyName="OnboardingTour";const a=()=>{const[t,i]=b.useState(!0);return e.jsx(o.Provider,{totalSteps:3,children:e.jsxs(y,{gap:"12",children:[e.jsx(o.Step,{step:0,title:"First step",text:"This is the first step of the onboarding tour.",children:e.jsx(n,{children:"Step 1"})}),e.jsx(o.Step,{step:1,title:"Second step",text:"This is the second step of the onboarding tour.",actionOnClick:()=>i(!1),children:e.jsx(n,{children:"Step 2"})}),!t&&e.jsx(o.Step,{step:2,title:"Final step",text:"This is the final step of the onboarding tour.",children:e.jsx(n,{children:"Step 3 (I was hidden)"})})]})})};var u,p,d,c,m;r.parameters={...r.parameters,docs:{...(u=r.parameters)==null?void 0:u.docs,source:{originalSource:`() => {
+props as originals just for props parsing ¯\\_(ツ)_/¯`,displayName:"OnboardingTourProvider",props:{totalSteps:{defaultValue:null,description:"Total number of steps in the tour",name:"totalSteps",required:!0,type:{name:"number"}},nextActionLabel:{defaultValue:{value:'"Next"'},description:'Label for the "Next" action button',name:"nextActionLabel",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"}]}},completeActionLabel:{defaultValue:{value:'"Got it"'},description:'Label for the "Complete" action button',name:"completeActionLabel",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"}]}},disabled:{defaultValue:null,description:"Whether the tour is disabled",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},onClose:{defaultValue:null,description:"Called when the tour is closed",name:"onClose",required:!1,type:{name:"enum",value:[{value:"() => void"}]}},onComplete:{defaultValue:null,description:"Called when the tour is completed",name:"onComplete",required:!1,type:{name:"enum",value:[{value:"() => void"}]}},onStepChange:{defaultValue:null,description:"Called when the current step index changes",name:"onStepChange",required:!1,type:{name:"enum",value:[{value:"(step: number) => void"}]}}}}}catch{}try{s.displayName="OnboardingTourStep",s.__docgenInfo={description:"",displayName:"OnboardingTourStep",props:{dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},title:{defaultValue:null,description:"",name:"title",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"}]}},side:{defaultValue:null,description:"Preferred side of the tooltip to appear from. Use if default side might block important content.",name:"side",required:!1,type:{name:"enum",value:[{value:'"top"'},{value:'"right"'},{value:'"bottom"'},{value:'"left"'}]}},text:{defaultValue:null,description:"",name:"text",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"}]}},actionOnClick:{defaultValue:null,description:"By default, the action button closes the tooltip.\n\nProvide `actionOnClick` to also perform other action.",name:"actionOnClick",required:!1,type:{name:"enum",value:[{value:"() => void"}]}},autoScroll:{defaultValue:{value:"true"},description:"If true, the tooltip will automatically scroll into view when it is opened.",name:"autoScroll",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},step:{defaultValue:null,description:"Zero-based step index",name:"step",required:!0,type:{name:"number"}}}}}catch{}const o=x(),ue={title:"Components/OnboardingTour",component:l,subcomponents:{OnboardingTourStep:s},parameters:{docs:{story:{inline:!1,height:250},description:{component:"Are you looking for a tooltip to highlight single element? Check out [OnboardingTooltip](/docs/components-onboardingtooltip--docs)"}},a11y:{config:{rules:[{id:"color-contrast",enabled:!1}]}}},decorators:[t=>e.jsx("div",{style:{margin:"auto",width:"max-content"},children:t()})]},C=t=>[!1,!1],j=t=>i=>{},r=()=>{const[t,i]=C(),T=j();return e.jsxs(o.Provider,{totalSteps:3,disabled:i||t,onComplete:()=>T(!0),children:[e.jsx("div",{style:{height:250},children:e.jsx(o.Step,{step:0,title:"Step 1",text:"This is the first step of the onboarding tour.",children:e.jsx(n,{children:"Step 1"})})}),e.jsx("div",{style:{height:250},children:e.jsx(o.Step,{step:1,title:"Step 2",text:"This is the second step of the onboarding tour.",children:e.jsx(n,{children:"Step 2"})})}),e.jsx("div",{style:{height:250},children:e.jsx(o.Step,{step:2,title:"Step 3",text:"This is the final step of the onboarding tour.",children:e.jsx(n,{children:"Step 3"})})})]})};r.storyName="OnboardingTour";const a=()=>{const[t,i]=b.useState(!0);return e.jsx(o.Provider,{totalSteps:3,children:e.jsxs(y,{gap:"12",children:[e.jsx(o.Step,{step:0,title:"First step",text:"This is the first step of the onboarding tour.",children:e.jsx(n,{children:"Step 1"})}),e.jsx(o.Step,{step:1,title:"Second step",text:"This is the second step of the onboarding tour.",actionOnClick:()=>i(!1),children:e.jsx(n,{children:"Step 2"})}),!t&&e.jsx(o.Step,{step:2,title:"Final step",text:"This is the final step of the onboarding tour.",children:e.jsx(n,{children:"Step 3 (I was hidden)"})})]})})};var u,p,d,c,m;r.parameters={...r.parameters,docs:{...(u=r.parameters)==null?void 0:u.docs,source:{originalSource:`() => {
   const [wasTourCompleted, loading] = useIsFeatureActive('my-tour');
   const setTourCompleted = useToggleFeature('my-tour');
   return <Tour.Provider totalSteps={3} disabled={loading || wasTourCompleted} onComplete={() => setTourCompleted(true)}>
@@ -43,4 +43,4 @@ props as originals just for props parsing ¯\\_(ツ)_/¯`,displayName:"Onboardin
                     </Tour.Step>}
             </LayoutFlex>
         </Tour.Provider>;
-}`,...(v=(f=a.parameters)==null?void 0:f.docs)==null?void 0:v.source},description:{story:"Sometimes you need to perform an intermediate action before the tour can continue (e.g. show a modal, switch a tab, etc.)\n\nYou can do this by using `actionOnClick` prop on the Tour.Step component.",...(S=(g=a.parameters)==null?void 0:g.docs)==null?void 0:S.description}}};const ue=["Default","WithIntermediateAction"];export{r as Default,a as WithIntermediateAction,ue as __namedExportsOrder,se as default};
+}`,...(v=(f=a.parameters)==null?void 0:f.docs)==null?void 0:v.source},description:{story:"Sometimes you need to perform an intermediate action before the tour can continue (e.g. show a modal, switch a tab, etc.)\n\nYou can do this by using `actionOnClick` prop on the Tour.Step component.",...(S=(g=a.parameters)==null?void 0:g.docs)==null?void 0:S.description}}};const pe=["Default","WithIntermediateAction"];export{r as Default,a as WithIntermediateAction,pe as __namedExportsOrder,ue as default};

package/dist/assets/{OnboardingTour.tests.stories-DAxdPYEp.js → OnboardingTour.tests.stories-Zth6eLU9.js}

@@ -1,4 +1,4 @@
-import{j as e}from"./jsx-runtime-BYouaCF_.js";import{r as h}from"./index-B3evPFBL.js";import{c as I}from"./OnboardingTour-DdV7TN6M.js";import{T as u}from"./Text-BmdJVr9v.js";import{B as m}from"./Button-BSyqsKC5.js";import{f as v,w as p,a as c,e as n,u as l}from"./index-DDyIDR-R.js";import{L as C}from"./LayoutFlex-BBGvSVMb.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./OnboardingTooltip-DVNAQjDc.js";import"./index-jPlWeKki.js";import"./PortalElementProvider-D4ltrA8j.js";import"./index-DRKYGVyc.js";import"./index-jEDObK_5.js";import"./index-C66nt8TK.js";import"./Combination-CCYtWL8C.js";import"./tslib.es6-BntfKcQG.js";import"./index-DbgDZDus.js";import"./TokyoUIClose-DFIfVIfy.js";import"./Icon-ZIxauYsE.js";import"./text-accent-DZDDtpIt.js";import"./classNames-BUL1Zq7e.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-CVTdrNe-.js";import"./componentNames-CpCJzpB9.js";import"./index-DdzHuZ-Y.js";import"./defaults-B1rzzf6M.js";import"./Heading-ese4_5Hg.js";import"./text-centered-CznToR0o.js";import"./index-BfBdt3zW.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./shared-strings-CcWGHelY.js";import"./message-BraTJ16C.js";import"./ButtonBase-Bdtn25V2.js";import"./Spinner-BCTJunNM.js";import"./useMergeRefs-CeyIhNgY.js";import"./useHostname-CH18gHFj.js";import"./index-CC6DAVyL.js";import"./layout-relative.module-ed9bC4H4.js";const d=I(),kt={title:"Components/OnboardingTour/Tests",parameters:{layout:"centered",controls:{disable:!0},chromatic:{disableSnapshot:!0}},tags:["!autodocs","!a11y-test","test"],decorators:[i=>e.jsx("div",{style:{margin:"100px 0"},children:i()})],args:{onComplete:v(),onClose:v(),onStepChange:v()}},y={render:({onComplete:i,onStepChange:s})=>e.jsx(d.Provider,{totalSteps:3,nextActionLabel:"Next",completeActionLabel:"Got it",onComplete:i,onStepChange:s,children:e.jsxs(C,{gap:"24",direction:"column",children:[e.jsx(d.Step,{step:0,title:"Title",text:"Text",dataset:{testid:"step-1"},children:e.jsx(u,{children:"Step 1 Content"})}),e.jsx(d.Step,{step:1,title:"Title",text:"Text",dataset:{testid:"step-2"},children:e.jsx(u,{children:"Step 2 Content"})}),e.jsx(d.Step,{step:2,title:"Title",text:"Text",dataset:{testid:"step-3"},children:e.jsx(u,{children:"Step 3 Content"})})]})}),play:async({canvasElement:i,step:s,args:t})=>{const a=p(i);await s("First step should be visible initially",async()=>{await c(()=>{const o=a.getByTestId("step-1");n(o).toBeVisible()})}),await s("Click Next to advance to second step",async()=>{const r=p(a.getByTestId("step-1")).getByTestId("action");await l.click(r),await c(()=>{const T=a.getByTestId("step-2");n(T).toBeVisible(),n(t.onStepChange).toHaveBeenCalledWith(1)})}),await s("Click Next to advance to final step",async()=>{const r=p(a.getByTestId("step-2")).getByTestId("action");await l.click(r),await c(()=>{const T=a.getByTestId("step-3");n(T).toBeVisible(),n(t.onStepChange).toHaveBeenCalledWith(2)})}),await s("Complete tour",async()=>{const r=p(a.getByTestId("step-3")).getByTestId("action");await l.click(r),await c(()=>{const T=a.queryByTestId("step",{exact:!1});n(T).toBeNull(),n(t.onComplete).toHaveBeenCalled()})})}},x={render:({onClose:i})=>e.jsx(d.Provider,{totalSteps:2,nextActionLabel:"Next",completeActionLabel:"Got it",onClose:i,children:e.jsx(d.Step,{step:0,title:"First step",text:"Try closing this step",dataset:{testid:"step-1"},children:e.jsx(u,{children:"Step 1 Content"})})}),play:async({canvasElement:i,step:s})=>{const t=p(i);await s("Step should be initially visible",async()=>{await c(()=>{const a=t.getByTestId("step-1");n(a).toBeVisible()})}),await s("Click close button to close tour",async({args:a})=>{const r=p(t.getByTestId("step-1")).getByTestId("close");await l.click(r),await c(()=>{const T=t.queryByTestId("step",{exact:!1});n(T).toBeNull(),n(a.onClose).toHaveBeenCalled()})})}},B={render:function(){const[s,t]=h.useState(!0);return e.jsxs(C,{gap:"24",direction:"column",children:[e.jsx(m,{onClick:()=>t(!s),dataset:{testid:"toggle-button"},children:s?"Enable Tour":"Disable Tour"}),e.jsx(d.Provider,{totalSteps:2,nextActionLabel:"Next",completeActionLabel:"Got it",disabled:s,children:e.jsx(d.Step,{step:0,title:"First step",text:"This step should be hidden when disabled",dataset:{testid:"step-1"},children:e.jsx(u,{children:"Step 1 Content"})})})]})},play:async({canvasElement:i,step:s})=>{const t=p(i);await s("Tour should be initially disabled",async()=>{const a=t.queryByTestId("step-1");n(a).toBeNull()}),await s("Click enable button to show tour",async()=>{const a=t.getByTestId("toggle-button");await l.click(a),await c(()=>{const o=t.getByTestId("step-1");n(o).toBeVisible()})})}},g=I(),S=I(),w={render:function(){const[s,t]=h.useState(!1),[a,o]=h.useState(!1);return e.jsxs(g.Provider,{totalSteps:2,disabled:!s,nextActionLabel:"Next",completeActionLabel:"Got it",children:[e.jsx(g.Step,{step:0,title:"Title",text:"Text",dataset:{testid:"outer-step-1"},children:e.jsx(m,{onClick:()=>t(!0),dataset:{testid:"start-outer-tour"},children:"Start outer tour"})}),e.jsxs(S.Provider,{totalSteps:2,disabled:!a,nextActionLabel:"Next",completeActionLabel:"Done",children:[e.jsx(g.Step,{step:1,title:"Title",text:"Text",dataset:{testid:"outer-step-2"},children:e.jsx(u,{children:"Outer Tour Step"})}),e.jsx(S.Step,{step:0,title:"Title",text:"Text",dataset:{testid:"inner-step-1"},children:e.jsx(m,{onClick:()=>o(!0),dataset:{testid:"start-inner-tour"},children:"Start inner tour"})}),e.jsx(S.Step,{step:1,title:"Title",text:"Text",dataset:{testid:"inner-step-2"},children:e.jsx(u,{children:"Inner Tour Step"})})]})]})},play:async({canvasElement:i,step:s})=>{const t=p(i);await s("Start inner tour, step 1 should be visible",async()=>{const a=t.getByTestId("start-inner-tour");await l.click(a),await c(async()=>{const o=t.queryByTestId("inner-step-1");n(o).toBeVisible()})}),await s("Advance inner tour, step 2 should be visible",async()=>{const o=p(t.getByTestId("inner-step-1")).getByTestId("action");await l.click(o),await c(async()=>{const r=t.queryByTestId("inner-step-2");n(r).toBeVisible()})}),await s("Complete inner tour",async()=>{const o=p(t.getByTestId("inner-step-2")).getByTestId("action");await l.click(o),await c(async()=>{const r=t.queryByTestId("inner-step-1",{exact:!1});n(r).toBeNull()})}),await s("Start outer tour, step 1 should be visible",async()=>{const a=t.getByTestId("start-outer-tour");await l.click(a),await c(async()=>{const o=t.queryByTestId("outer-step-1");n(o).toBeVisible()})}),await s("Advance outer tour, step 2 should be visible",async()=>{const o=p(t.getByTestId("outer-step-1")).getByTestId("action");await l.click(o),await c(async()=>{const r=t.queryByTestId("outer-step-2");n(r).toBeVisible()})}),await s("Complete outer tour",async()=>{const o=p(t.getByTestId("outer-step-2")).getByTestId("action");await l.click(o),await c(async()=>{const r=t.queryByTestId("-step-",{exact:!1});n(r).toBeNull()})})}};function W(i){return new Promise(s=>setTimeout(s,i))}const b={render:()=>e.jsxs(C,{gap:"24",direction:"column",children:[e.jsx(m,{children:"Click outside the tooltip"}),e.jsx(d.Provider,{totalSteps:1,nextActionLabel:"Next",completeActionLabel:"Got it",children:e.jsx(d.Step,{step:0,title:"Title",text:"Text",dataset:{testid:"step-1"},children:e.jsx(u,{children:"Step 1 Content"})})})]}),play:async({canvasElement:i,step:s})=>{const t=p(i);await s("Step should be initially visible",async()=>{await c(()=>{const a=t.getByTestId("step-1");n(a).toBeVisible()})}),await s("Click outside the tooltip",()=>{const a=t.getByText("Click outside the tooltip");return l.click(a)}),await s("Wait for tooltip to be hidden",async()=>{await W(1e3);const a=t.getByTestId("step-1");n(a).toBeVisible()})}};var k,j,L;y.parameters={...y.parameters,docs:{...(k=y.parameters)==null?void 0:k.docs,source:{originalSource:`{
+import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{r as h}from"./index-Cb9e4tly.js";import{c as I}from"./OnboardingTour-DdoL-ALr.js";import{T as u}from"./Text-CykvSLVe.js";import{B as b}from"./Button-C5gzVt4K.js";import{f as v,w as p,a as c,e as n,u as l}from"./index-Ctq3gFTp.js";import{L as C}from"./LayoutFlex-C3k4b85b.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./OnboardingTooltip-S86JAVp1.js";import"./index-DHRyQyAr.js";import"./PortalElementProvider-CgL8vj5o.js";import"./index-C6wF8VM1.js";import"./index-BPrLDK9Y.js";import"./index-C7hTFOIV.js";import"./Combination-Cz1uIyPJ.js";import"./tslib.es6-BntfKcQG.js";import"./index-QwIMrChO.js";import"./TokyoUIClose-thK8sk63.js";import"./Icon-CsnSNslb.js";import"./text-accent-DZDDtpIt.js";import"./classNames-BUL1Zq7e.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-BT0Aq7PA.js";import"./componentNames-NXEPEzbR.js";import"./index-DdzHuZ-Y.js";import"./defaults-Clr6nbGc.js";import"./Heading-BLxyLk9f.js";import"./text-centered-CznToR0o.js";import"./index-DSVnVYmz.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./shared-strings-BzaHC9x5.js";import"./message-BqoANQez.js";import"./ButtonBase-D5O3MkG2.js";import"./Spinner-T-vTyHiv.js";import"./useMergeRefs-SFH7Mw4x.js";import"./useHostname-Y3PlXofY.js";import"./index-CC6DAVyL.js";import"./layout-relative.module-ChaXrVQQ.js";const d=I(),jt={title:"Components/OnboardingTour/Tests",parameters:{layout:"centered",controls:{disable:!0},chromatic:{disableSnapshot:!0}},tags:["!autodocs","!a11y-test","test"],decorators:[i=>e.jsx("div",{style:{margin:"100px 0"},children:i()})],args:{onComplete:v(),onClose:v(),onStepChange:v()}},y={render:({onComplete:i,onStepChange:s})=>e.jsx(d.Provider,{totalSteps:3,nextActionLabel:"Next",completeActionLabel:"Got it",onComplete:i,onStepChange:s,children:e.jsxs(C,{gap:"24",direction:"column",children:[e.jsx(d.Step,{step:0,title:"Title",text:"Text",dataset:{testid:"step-1"},children:e.jsx(u,{children:"Step 1 Content"})}),e.jsx(d.Step,{step:1,title:"Title",text:"Text",dataset:{testid:"step-2"},children:e.jsx(u,{children:"Step 2 Content"})}),e.jsx(d.Step,{step:2,title:"Title",text:"Text",dataset:{testid:"step-3"},children:e.jsx(u,{children:"Step 3 Content"})})]})}),play:async({canvasElement:i,step:s,args:t})=>{const a=p(i);await s("First step should be visible initially",async()=>{await c(()=>{const o=a.getByTestId("step-1");n(o).toBeVisible()})}),await s("Click Next to advance to second step",async()=>{const r=p(a.getByTestId("step-1")).getByTestId("action");await l.click(r),await c(()=>{const T=a.getByTestId("step-2");n(T).toBeVisible(),n(t.onStepChange).toHaveBeenCalledWith(1)})}),await s("Click Next to advance to final step",async()=>{const r=p(a.getByTestId("step-2")).getByTestId("action");await l.click(r),await c(()=>{const T=a.getByTestId("step-3");n(T).toBeVisible(),n(t.onStepChange).toHaveBeenCalledWith(2)})}),await s("Complete tour",async()=>{const r=p(a.getByTestId("step-3")).getByTestId("action");await l.click(r),await c(()=>{const T=a.queryByTestId("step",{exact:!1});n(T).toBeNull(),n(t.onComplete).toHaveBeenCalled()})})}},x={render:({onClose:i})=>e.jsx(d.Provider,{totalSteps:2,nextActionLabel:"Next",completeActionLabel:"Got it",onClose:i,children:e.jsx(d.Step,{step:0,title:"First step",text:"Try closing this step",dataset:{testid:"step-1"},children:e.jsx(u,{children:"Step 1 Content"})})}),play:async({canvasElement:i,step:s})=>{const t=p(i);await s("Step should be initially visible",async()=>{await c(()=>{const a=t.getByTestId("step-1");n(a).toBeVisible()})}),await s("Click close button to close tour",async({args:a})=>{const r=p(t.getByTestId("step-1")).getByTestId("close");await l.click(r),await c(()=>{const T=t.queryByTestId("step",{exact:!1});n(T).toBeNull(),n(a.onClose).toHaveBeenCalled()})})}},B={render:function(){const[s,t]=h.useState(!0);return e.jsxs(C,{gap:"24",direction:"column",children:[e.jsx(b,{onClick:()=>t(!s),dataset:{testid:"toggle-button"},children:s?"Enable Tour":"Disable Tour"}),e.jsx(d.Provider,{totalSteps:2,nextActionLabel:"Next",completeActionLabel:"Got it",disabled:s,children:e.jsx(d.Step,{step:0,title:"First step",text:"This step should be hidden when disabled",dataset:{testid:"step-1"},children:e.jsx(u,{children:"Step 1 Content"})})})]})},play:async({canvasElement:i,step:s})=>{const t=p(i);await s("Tour should be initially disabled",async()=>{const a=t.queryByTestId("step-1");n(a).toBeNull()}),await s("Click enable button to show tour",async()=>{const a=t.getByTestId("toggle-button");await l.click(a),await c(()=>{const o=t.getByTestId("step-1");n(o).toBeVisible()})})}},g=I(),S=I(),w={render:function(){const[s,t]=h.useState(!1),[a,o]=h.useState(!1);return e.jsxs(g.Provider,{totalSteps:2,disabled:!s,nextActionLabel:"Next",completeActionLabel:"Got it",children:[e.jsx(g.Step,{step:0,title:"Title",text:"Text",dataset:{testid:"outer-step-1"},children:e.jsx(b,{onClick:()=>t(!0),dataset:{testid:"start-outer-tour"},children:"Start outer tour"})}),e.jsxs(S.Provider,{totalSteps:2,disabled:!a,nextActionLabel:"Next",completeActionLabel:"Done",children:[e.jsx(g.Step,{step:1,title:"Title",text:"Text",dataset:{testid:"outer-step-2"},children:e.jsx(u,{children:"Outer Tour Step"})}),e.jsx(S.Step,{step:0,title:"Title",text:"Text",dataset:{testid:"inner-step-1"},children:e.jsx(b,{onClick:()=>o(!0),dataset:{testid:"start-inner-tour"},children:"Start inner tour"})}),e.jsx(S.Step,{step:1,title:"Title",text:"Text",dataset:{testid:"inner-step-2"},children:e.jsx(u,{children:"Inner Tour Step"})})]})]})},play:async({canvasElement:i,step:s})=>{const t=p(i);await s("Start inner tour, step 1 should be visible",async()=>{const a=t.getByTestId("start-inner-tour");await l.click(a),await c(async()=>{const o=t.queryByTestId("inner-step-1");n(o).toBeVisible()})}),await s("Advance inner tour, step 2 should be visible",async()=>{const o=p(t.getByTestId("inner-step-1")).getByTestId("action");await l.click(o),await c(async()=>{const r=t.queryByTestId("inner-step-2");n(r).toBeVisible()})}),await s("Complete inner tour",async()=>{const o=p(t.getByTestId("inner-step-2")).getByTestId("action");await l.click(o),await c(async()=>{const r=t.queryByTestId("inner-step-1",{exact:!1});n(r).toBeNull()})}),await s("Start outer tour, step 1 should be visible",async()=>{const a=t.getByTestId("start-outer-tour");await l.click(a),await c(async()=>{const o=t.queryByTestId("outer-step-1");n(o).toBeVisible()})}),await s("Advance outer tour, step 2 should be visible",async()=>{const o=p(t.getByTestId("outer-step-1")).getByTestId("action");await l.click(o),await c(async()=>{const r=t.queryByTestId("outer-step-2");n(r).toBeVisible()})}),await s("Complete outer tour",async()=>{const o=p(t.getByTestId("outer-step-2")).getByTestId("action");await l.click(o),await c(async()=>{const r=t.queryByTestId("-step-",{exact:!1});n(r).toBeNull()})})}};function W(i){return new Promise(s=>setTimeout(s,i))}const m={render:()=>e.jsxs(C,{gap:"24",direction:"column",children:[e.jsx(b,{children:"Click outside the tooltip"}),e.jsx(d.Provider,{totalSteps:1,nextActionLabel:"Next",completeActionLabel:"Got it",children:e.jsx(d.Step,{step:0,title:"Title",text:"Text",dataset:{testid:"step-1"},children:e.jsx(u,{children:"Step 1 Content"})})})]}),play:async({canvasElement:i,step:s})=>{const t=p(i);await s("Step should be initially visible",async()=>{await c(()=>{const a=t.getByTestId("step-1");n(a).toBeVisible()})}),await s("Click outside the tooltip",()=>{const a=t.getByText("Click outside the tooltip");return l.click(a)}),await s("Wait for tooltip to be hidden",async()=>{await W(1e3);const a=t.getByTestId("step-1");n(a).toBeVisible()})}};var k,j,L;y.parameters={...y.parameters,docs:{...(k=y.parameters)==null?void 0:k.docs,source:{originalSource:`{
   render: ({
     onComplete,
     onStepChange
@@ -243,7 +243,7 @@ import{j as e}from"./jsx-runtime-BYouaCF_.js";import{r as h}from"./index-B3evPFB
       });
     });
   }
-}`,...(q=(P=w.parameters)==null?void 0:P.docs)==null?void 0:q.source}}};var D,G,H;b.parameters={...b.parameters,docs:{...(D=b.parameters)==null?void 0:D.docs,source:{originalSource:`{
+}`,...(q=(P=w.parameters)==null?void 0:P.docs)==null?void 0:q.source}}};var D,G,H;m.parameters={...m.parameters,docs:{...(D=m.parameters)==null?void 0:D.docs,source:{originalSource:`{
   render: () => {
     return <LayoutFlex gap="24" direction="column">
                 <Button>Click outside the tooltip</Button>
@@ -277,4 +277,4 @@ import{j as e}from"./jsx-runtime-BYouaCF_.js";import{r as h}from"./index-B3evPFB
       expect(step1).toBeVisible();
     });
   }
-}`,...(H=(G=b.parameters)==null?void 0:G.docs)==null?void 0:H.source}}};const jt=["StepNavigation","Closing","Disabling","NestedTours","DoNotCloseOnInteractionOutside"];export{x as Closing,B as Disabling,b as DoNotCloseOnInteractionOutside,w as NestedTours,y as StepNavigation,jt as __namedExportsOrder,kt as default};
+}`,...(H=(G=m.parameters)==null?void 0:G.docs)==null?void 0:H.source}}};const Lt=["StepNavigation","Closing","Disabling","NestedTours","DoNotCloseOnInteractionOutside"];export{x as Closing,B as Disabling,m as DoNotCloseOnInteractionOutside,w as NestedTours,y as StepNavigation,Lt as __namedExportsOrder,jt as default};

package/dist/assets/{PasswordField-C_KRyf9k.js → PasswordField-Dxf_bax6.js}

@@ -1,6 +1,6 @@
-import{j as a}from"./jsx-runtime-BYouaCF_.js";import{r as l}from"./index-B3evPFBL.js";import{F as H}from"./FormControl-CeIJk4_Z.js";import{F as L,a as I}from"./TokyoUIEye-BsOt8ZdC.js";import{F as M}from"./FieldButton-Bsa9_rJB.js";import{u as x,d as T}from"./index-BfBdt3zW.js";import{u as F}from"./useMergeRefs-BKVZOB6R.js";import{w as P}from"./componentNames-CpCJzpB9.js";import{I as k}from"./Input-C1hZX5_o.js";const r=T({reveal:{id:"preply-ds.password-field.reveal.button",defaultMessage:"Reveal password",description:'A11y label for the "reveal password" button. Will be announced by screen reader.'},conceal:{id:"preply-ds.password-field.conceal.button",defaultMessage:"Conceal password",description:'A11y label for the "conceal password" button. Will be announced by screen reader.'}}),s=l.forwardRef(function({id:o,label:d,description:m,error:p,required:c,inputDataset:f,dataset:v,hideLabel:y,onClick:h,hasError:b,useLegacyRequiredLabel:g,className:D,style:_,...q},E){const{formatMessage:n}=x(),[e,V]=l.useState(!1),t=l.useRef(null),w=F(t,E),C=e?"text":"password",R=()=>{var u;V(!e),(u=t.current)==null||u.focus()};return a.jsx(H,{id:o,label:d,description:m,error:p,hasError:b,required:c,dataset:v,hideLabel:y,onClick:h,useLegacyRequiredLabel:g,preplyDsComponent:P.PasswordField,children:a.jsx(k,{...q,type:C,ref:w,dataset:f,button:a.jsx(M,{onClick:R,svg:e?L:I,assistiveText:n(e?r.conceal:r.reveal),dataset:{testid:"toggle-password-button"}})})})});try{s.displayName="PasswordField",s.__docgenInfo={description:"",displayName:"PasswordField",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"}]}},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> & MouseEventHandler<HTMLInputElement>"}]}},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"}]}},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"}]}},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"}]}},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"}]}},hasError:{defaultValue:null,description:"Whether the field has an error.\n@deprecated Use `error` prop to exlicitly 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"}]}},useLegacyRequiredLabel:{defaultValue:null,description:`When true, adds a "Required" indicator next to the label for the required fields.
+import{j as a}from"./jsx-runtime-BTJTZTIL.js";import{r as l}from"./index-Cb9e4tly.js";import{F as H}from"./FormControl-BBd1k1n3.js";import{F as L,a as I}from"./TokyoUIEye-CteyS9_g.js";import{F as M}from"./FieldButton-DkkntNzT.js";import{u as x,d as T}from"./index-DSVnVYmz.js";import{u as F}from"./useMergeRefs-D_RfOOSs.js";import{w as P}from"./componentNames-NXEPEzbR.js";import{I as k}from"./Input-MEZGWQfc.js";const r=T({reveal:{id:"preply-ds.password-field.reveal.button",defaultMessage:"Reveal password",description:'A11y label for the "reveal password" button. Will be announced by screen reader.'},conceal:{id:"preply-ds.password-field.conceal.button",defaultMessage:"Conceal password",description:'A11y label for the "conceal password" button. Will be announced by screen reader.'}}),s=l.forwardRef(function({id:o,label:d,description:m,error:p,required:c,inputDataset:f,dataset:v,hideLabel:y,onClick:h,hasError:b,useLegacyRequiredLabel:g,className:D,style:_,...q},E){const{formatMessage:n}=x(),[e,V]=l.useState(!1),t=l.useRef(null),w=F(t,E),C=e?"text":"password",R=()=>{var u;V(!e),(u=t.current)==null||u.focus()};return a.jsx(H,{id:o,label:d,description:m,error:p,hasError:b,required:c,dataset:v,hideLabel:y,onClick:h,useLegacyRequiredLabel:g,preplyDsComponent:P.PasswordField,children:a.jsx(k,{...q,type:C,ref:w,dataset:f,button:a.jsx(M,{onClick:R,svg:e?L:I,assistiveText:n(e?r.conceal:r.reveal),dataset:{testid:"toggle-password-button"}})})})});try{s.displayName="PasswordField",s.__docgenInfo={description:"",displayName:"PasswordField",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"}]}},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> & MouseEventHandler<HTMLInputElement>"}]}},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"}]}},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"}]}},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"}]}},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"}]}},hasError:{defaultValue:null,description:"Whether the field has an error.\n@deprecated Use `error` prop to exlicitly describe the error to users",name:"hasError",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},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"}]}},useLegacyRequiredLabel:{defaultValue:null,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"}]}},name:{defaultValue:null,description:"",name:"name",required:!1,type:{name:"enum",value:[{value:"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"}]}},onCopy:{defaultValue:null,description:"",name:"onCopy",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLInputElement>"}]}},onCut:{defaultValue:null,description:"",name:"onCut",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLInputElement>"}]}},onPaste:{defaultValue:null,description:"",name:"onPaste",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLInputElement>"}]}},onFocus:{defaultValue:null,description:"",name:"onFocus",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<HTMLInputElement>"}]}},onBlur:{defaultValue:null,description:"",name:"onBlur",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<HTMLInputElement>"}]}},onChange:{defaultValue:null,description:"",name:"onChange",required:!1,type:{name:"enum",value:[{value:"ChangeEventHandler<HTMLInputElement>"}]}},onKeyDown:{defaultValue:null,description:"",name:"onKeyDown",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<HTMLInputElement>"}]}},onKeyUp:{defaultValue:null,description:"",name:"onKeyUp",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<HTMLInputElement>"}]}},icon:{defaultValue:null,description:"",name:"icon",required:!1,type:{name:"enum",value:[{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},readOnly:{defaultValue:null,description:"",name:"readOnly",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},maxLength:{defaultValue:null,description:"",name:"maxLength",required:!1,type:{name:"enum",value:[{value:"number"}]}},onValueChange:{defaultValue:null,description:"",name:"onValueChange",required:!1,type:{name:"enum",value:[{value:"(value: string) => void"}]}},value:{defaultValue:null,description:"",name:"value",required:!1,type:{name:"enum",value:[{value:"string"}]}},defaultValue:{defaultValue:null,description:"",name:"defaultValue",required:!1,type:{name:"enum",value:[{value:"string"}]}},autoComplete:{defaultValue:null,description:"",name:"autoComplete",required:!1,type:{name:"enum",value:[{value:'"off"'},{value:'"new-password"'},{value:'"current-password"'}]}},inputDataset:{defaultValue:null,description:"",name:"inputDataset",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: HTMLInputElement | null) => void"},{value:"RefObject<HTMLInputElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}export{s as P};
+@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"}]}},name:{defaultValue:null,description:"",name:"name",required:!1,type:{name:"enum",value:[{value:"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"}]}},onCopy:{defaultValue:null,description:"",name:"onCopy",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLInputElement>"}]}},onCut:{defaultValue:null,description:"",name:"onCut",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLInputElement>"}]}},onPaste:{defaultValue:null,description:"",name:"onPaste",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLInputElement>"}]}},onFocus:{defaultValue:null,description:"",name:"onFocus",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<HTMLInputElement>"}]}},onBlur:{defaultValue:null,description:"",name:"onBlur",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<HTMLInputElement>"}]}},onChange:{defaultValue:null,description:"",name:"onChange",required:!1,type:{name:"enum",value:[{value:"ChangeEventHandler<HTMLInputElement>"}]}},onKeyDown:{defaultValue:null,description:"",name:"onKeyDown",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<HTMLInputElement>"}]}},onKeyUp:{defaultValue:null,description:"",name:"onKeyUp",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<HTMLInputElement>"}]}},icon:{defaultValue:null,description:"",name:"icon",required:!1,type:{name:"enum",value:[{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},onValueChange:{defaultValue:null,description:"",name:"onValueChange",required:!1,type:{name:"enum",value:[{value:"(value: string) => void"}]}},readOnly:{defaultValue:null,description:"",name:"readOnly",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},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"}]}},defaultValue:{defaultValue:null,description:"",name:"defaultValue",required:!1,type:{name:"enum",value:[{value:"string"}]}},autoComplete:{defaultValue:null,description:"",name:"autoComplete",required:!1,type:{name:"enum",value:[{value:'"off"'},{value:'"new-password"'},{value:'"current-password"'}]}},inputDataset:{defaultValue:null,description:"",name:"inputDataset",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: HTMLInputElement | null) => void"},{value:"RefObject<HTMLInputElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}export{s as P};