@preply/ds-docs 11.0.0 → 11.1.0

package/dist/assets/NumberField.stories-D740jISy.js

@@ -1,254 +0,0 @@
-import{j as g,r as re}from"./iframe-B_74HtSc.js";import{F as te}from"./TokyoUIPhone-CFykqUer.js";import{F as se}from"./TokyoUIAttach-BsMlsNHQ.js";import{I as ne}from"./Icon-CC0yjdx9.js";import{N as ae}from"./NumberField-klmIiQAi.js";import{F as ie}from"./FieldButton-DpHF49o_.js";import"./preload-helper-Dp1pzeXC.js";import"./text-accent-BQ9POoE5.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-MT6RlyNs.js";import"./componentNames-hc9KR2nX.js";import"./FormControl-Zqf1cIwP.js";import"./index-DIqvfT2b.js";import"./message-DJT5rp5J.js";import"./Input-DuW1_5SG.js";import"./InputContainer-Cmdo_xyq.js";const{action:ce}=__STORYBOOK_MODULE_ACTIONS__,{expect:n,userEvent:w,within:x,fn:r}=__STORYBOOK_MODULE_TEST__,fe={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(ie,{svg:se,assistiveText:"Do the thing",onClick:ce("field button clicked")})},control:"select"},maxLength:{control:"number"},hasError:{table:{disable:!0}}}};var T,B,H,I,f;c.parameters={...c.parameters,docs:{...(T=c.parameters)==null?void 0:T.docs,source:{originalSource:`{
-  play: async ({
-    canvasElement,
-    step,
-    args
-  }) => {
-    const canvas = within(canvasElement);
-    const field = canvas.getByTestId('field');
-    const input = canvas.getByTestId('input');
-    await step('it should render correct label', async () => {
-      const label = within(field).getByTestId('label');
-      expect(label).toHaveTextContent('Number • Optional');
-      expect(input).toHaveAccessibleName('Number');
-    });
-    await step('it should call onFocus when the input is focused', async () => {
-      input.focus();
-      expect(args.onFocus).toHaveBeenCalled();
-    });
-    await step('it should call callback when the value changes', async () => {
-      await userEvent.type(input, '42');
-      expect(args.onValueChange).toHaveBeenCalledWith(42);
-      expect(args.onChange).toHaveBeenCalled();
-    });
-    await step('it should call onBlur when the input is blurred', async () => {
-      await userEvent.keyboard('{tab}');
-      expect(args.onBlur).toHaveBeenCalled();
-    });
-    await step('it should render the dataset props', async () => {
-      expect(field).toHaveAttribute('data-testid', 'field');
-      expect(field).toHaveAttribute('data-foo', 'bar');
-      expect(input).toHaveAttribute('data-testid', 'input');
-      expect(input).toHaveAttribute('data-foo', 'bar');
-    });
-  }
-}`,...(H=(B=c.parameters)==null?void 0:B.docs)==null?void 0:H.source},description:{story:"An empty field with a `label` and a `placeholder`.",...(f=(I=c.parameters)==null?void 0:I.docs)==null?void 0:f.description}}};var N,C,A,E,S;l.parameters={...l.parameters,docs:{...(N=l.parameters)==null?void 0:N.docs,source:{originalSource:`{
-  render: function ControlledNumberField(args) {
-    const [value, setValue] = useState(args.value);
-    return <NumberField {...args} value={value} onChange={e => {
-      setValue(Number(e.target.value));
-      args.onChange?.(e);
-    }} />;
-  },
-  args: {
-    label: 'Controlled NumberField',
-    placeholder: 'Enter a number...',
-    value: 42
-  },
-  play: async ({
-    canvas,
-    step
-  }) => {
-    await step('it should render the correct initial value', async () => {
-      const input = canvas.getByTestId('input');
-      await expect(input).toHaveValue(42);
-    });
-    await step('it should update the value when the user types', async () => {
-      const input = canvas.getByTestId('input');
-      await userEvent.clear(input);
-      await userEvent.type(input, '100');
-      expect(input).toHaveValue(100);
-    });
-  }
-}`,...(A=(C=l.parameters)==null?void 0:C.docs)==null?void 0:A.source},description:{story:"A controlled component where the value is managed by React state.",...(S=(E=l.parameters)==null?void 0:E.docs)==null?void 0:S.description}}};var F,O,D;u.parameters={...u.parameters,docs:{...(F=u.parameters)==null?void 0:F.docs,source:{originalSource:`{
-  args: {
-    icon: <Icon svg={PhoneSvg} dataset={{
-      testid: 'icon'
-    }} />
-  },
-  play: async ({
-    canvas,
-    step
-  }) => {
-    await step('it should render the icon', async () => {
-      const icon = canvas.getByTestId('icon');
-      expect(icon).toBeInTheDocument();
-    });
-  }
-}`,...(D=(O=u.parameters)==null?void 0:O.docs)==null?void 0:D.source}}};var W,_,V;d.parameters={...d.parameters,docs:{...(W=d.parameters)==null?void 0:W.docs,source:{originalSource:`{
-  args: {
-    description: 'Enter a valid number'
-  },
-  play: async ({
-    canvas,
-    step
-  }) => {
-    const input = canvas.getByTestId('input');
-    const description = canvas.getByTestId('description');
-    await step('it should render the description', async () => {
-      expect(input).toHaveAccessibleDescription('Enter a valid number');
-      expect(description).toHaveTextContent('Enter a valid number');
-    });
-  }
-}`,...(V=(_=d.parameters)==null?void 0:_.docs)==null?void 0:V.source}}};var j,q,L;p.parameters={...p.parameters,docs:{...(j=p.parameters)==null?void 0:j.docs,source:{originalSource:`{
-  args: {
-    required: true
-  },
-  play: async ({
-    canvas,
-    step
-  }) => {
-    const input = canvas.getByTestId('input');
-    const label = canvas.getByTestId('label');
-    await step('it should render correct label', async () => {
-      expect(input).toHaveAccessibleName('Number');
-      expect(label).toHaveTextContent('Number');
-    });
-    await step('it should render required attribute', async () => {
-      expect(input).toHaveAttribute('required');
-    });
-  }
-}`,...(L=(q=p.parameters)==null?void 0:q.docs)==null?void 0:L.source}}};var R,k,P;m.parameters={...m.parameters,docs:{...(R=m.parameters)==null?void 0:R.docs,source:{originalSource:`{
-  args: {
-    hideLabel: true
-  },
-  play: async ({
-    canvas,
-    step
-  }) => {
-    await step('it should render correct a11y label', async () => {
-      const input = canvas.getByTestId('input');
-      expect(input).toHaveAccessibleName('Number');
-    });
-  }
-}`,...(P=(k=m.parameters)==null?void 0:k.docs)==null?void 0:P.source}}};var K,M,U;b.parameters={...b.parameters,docs:{...(K=b.parameters)==null?void 0:K.docs,source:{originalSource:`{
-  args: {
-    error: 'This is an error message'
-  },
-  play: async ({
-    canvas,
-    step
-  }) => {
-    const input = canvas.getByTestId('input');
-    const error = canvas.getByTestId('error');
-    await step('it should render the error message', async () => {
-      expect(input).toHaveAccessibleErrorMessage('This is an error message');
-      expect(error).toHaveTextContent('This is an error message');
-    });
-  }
-}`,...(U=(M=b.parameters)==null?void 0:M.docs)==null?void 0:U.source}}};var Y,$,z;h.parameters={...h.parameters,docs:{...(Y=h.parameters)==null?void 0:Y.docs,source:{originalSource:`{
-  args: {
-    disabled: true
-  },
-  play: async ({
-    canvas,
-    step
-  }) => {
-    const input = canvas.getByTestId('input');
-    await step('it should render the disabled input', async () => {
-      expect(input).toHaveAttribute('disabled');
-    });
-  }
-}`,...(z=($=h.parameters)==null?void 0:$.docs)==null?void 0:z.source}}};var G,J,Q;y.parameters={...y.parameters,docs:{...(G=y.parameters)==null?void 0:G.docs,source:{originalSource:`{
-  args: {
-    readOnly: true
-  },
-  play: async ({
-    canvas,
-    step
-  }) => {
-    const input = canvas.getByTestId('input');
-    await step('it should render the read only input', async () => {
-      expect(input).toHaveAttribute('readonly');
-    });
-  }
-}`,...(Q=(J=y.parameters)==null?void 0:J.docs)==null?void 0:Q.source}}};var X,Z,ee;v.parameters={...v.parameters,docs:{...(X=v.parameters)==null?void 0:X.docs,source:{originalSource:`{
-  parameters: {
-    chromatic: {
-      disableSnapshot: true
-    }
-  },
-  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: undefined,
-        'With Icon': <Icon svg={PhoneSvg} />
-      },
-      control: 'select'
-    },
-    button: {
-      options: ['None', 'With Button'],
-      mapping: {
-        None: undefined,
-        'With Button': <FieldButton svg={AttachSvg} assistiveText="Do the thing" onClick={action('field button clicked')} />
-      },
-      control: 'select'
-    },
-    maxLength: {
-      control: 'number'
-    },
-    // Disable deprecated props
-    hasError: {
-      table: {
-        disable: true
-      }
-    }
-  }
-}`,...(ee=(Z=v.parameters)==null?void 0:Z.docs)==null?void 0:ee.source}}};const Ne=["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,Ne as __namedExportsOrder,fe as default};

package/dist/assets/ObserveIntersection-Dx2gD1CU.js

@@ -1,8 +0,0 @@
-import{r as s,g as b,j as g,L as h}from"./iframe-B_74HtSc.js";import{w as y}from"./componentNames-hc9KR2nX.js";const l=({onIntersect:a,once:t,threshold:n,tag:o,dataset:u,children:i})=>{const e=s.useRef(null);s.useEffect(()=>{const p=([m],f)=>{m.isIntersecting&&(a(),t&&e.current&&f.unobserve(e.current))},d={threshold:n},r=new IntersectionObserver(p,d);return e.current&&r.observe(e.current),()=>r.disconnect()},[a,t,n]);const c=o??h,v={ref:e,...b(u,{preplyDsComponent:y.ObserverIntersection})};return g.jsx(c,{...v,children:i})};try{l.displayName="ObserveIntersection",l.__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:'"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{l as O};

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

@@ -1,27 +0,0 @@
-import{r as a,j as t}from"./iframe-B_74HtSc.js";import{O as i}from"./ObserveIntersection-Dx2gD1CU.js";import"./preload-helper-Dp1pzeXC.js";import"./componentNames-hc9KR2nX.js";const x={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 I=["Base"];export{e as Base,I as __namedExportsOrder,x as default};

package/dist/assets/OnboardingTooltip-DzQhJzWc.js

@@ -1,16 +0,0 @@
-import{r as s,a7 as E,a8 as Z,j as a,a9 as Q,aa as Y,ab as ee,ac as j,ad as k,ae as te,af as A,ag as y,ah as ae,ai as N,aj as oe,ak as ne,al as le,I as re,K as ue,g as se}from"./iframe-B_74HtSc.js";import{F as ie}from"./TokyoUIClose-BfMyMrDa.js";import{I as ce}from"./Icon-CC0yjdx9.js";import{T as de}from"./Text-DvShrljd.js";import{B as pe}from"./Button-C0Um_QuO.js";import{H as fe}from"./Heading-Cj8Si45g.js";import{u as ve}from"./index-DIqvfT2b.js";import{g as me}from"./shared-strings-ThL9KyH0.js";import{w as he}from"./componentNames-hc9KR2nX.js";import{M as ge}from"./message-DJT5rp5J.js";import{h as be,R as ye,u as Ce,F as Pe}from"./index-W3BB_3go.js";var P="Popover",[V]=Y(P,[E]),C=E(),[Re,f]=V(P),S=e=>{const{__scopePopover:t,children:l,open:i,defaultOpen:o,onOpenChange:n,modal:u=!1}=e,r=C(t),c=s.useRef(null),[d,v]=s.useState(!1),[m,p]=Z({prop:i,defaultProp:o??!1,onChange:n,caller:P});return a.jsx(Q,{...r,children:a.jsx(Re,{scope:t,contentId:ee(),triggerRef:c,open:m,onOpenChange:p,onOpenToggle:s.useCallback(()=>p(h=>!h),[p]),hasCustomAnchor:d,onCustomAnchorAdd:s.useCallback(()=>v(!0),[]),onCustomAnchorRemove:s.useCallback(()=>v(!1),[]),modal:u,children:l})})};S.displayName=P;var T="PopoverAnchor",D=s.forwardRef((e,t)=>{const{__scopePopover:l,...i}=e,o=f(T,l),n=C(l),{onCustomAnchorAdd:u,onCustomAnchorRemove:r}=o;return s.useEffect(()=>(u(),()=>r()),[u,r]),a.jsx(j,{...n,...i,ref:t})});D.displayName=T;var q="PopoverTrigger",xe=s.forwardRef((e,t)=>{const{__scopePopover:l,...i}=e,o=f(q,l),n=C(l),u=N(t,o.triggerRef),r=a.jsx(A.button,{type:"button","aria-haspopup":"dialog","aria-expanded":o.open,"aria-controls":o.contentId,"data-state":J(o.open),...i,ref:u,onClick:y(e.onClick,o.onOpenToggle)});return o.hasCustomAnchor?r:a.jsx(j,{asChild:!0,...n,children:r})});xe.displayName=q;var O="PopoverPortal",[we,Oe]=V(O,{forceMount:void 0}),M=e=>{const{__scopePopover:t,forceMount:l,children:i,container:o}=e,n=f(O,t);return a.jsx(we,{scope:t,forceMount:l,children:a.jsx(k,{present:l||n.open,children:a.jsx(te,{asChild:!0,container:o,children:i})})})};M.displayName=O;var b="PopoverContent",F=s.forwardRef((e,t)=>{const l=Oe(b,e.__scopePopover),{forceMount:i=l.forceMount,...o}=e,n=f(b,e.__scopePopover);return a.jsx(k,{present:i||n.open,children:n.modal?a.jsx(Ie,{...o,ref:t}):a.jsx(Ee,{...o,ref:t})})});F.displayName=b;var _e=oe("PopoverContent.RemoveScroll"),Ie=s.forwardRef((e,t)=>{const l=f(b,e.__scopePopover),i=s.useRef(null),o=N(t,i),n=s.useRef(!1);return s.useEffect(()=>{const u=i.current;if(u)return be(u)},[]),a.jsx(ye,{as:_e,allowPinchZoom:!0,children:a.jsx(L,{...e,ref:o,trapFocus:l.open,disableOutsidePointerEvents:!0,onCloseAutoFocus:y(e.onCloseAutoFocus,u=>{var r;u.preventDefault(),n.current||(r=l.triggerRef.current)==null||r.focus()}),onPointerDownOutside:y(e.onPointerDownOutside,u=>{const r=u.detail.originalEvent,c=r.button===0&&r.ctrlKey===!0,d=r.button===2||c;n.current=d},{checkForDefaultPrevented:!1}),onFocusOutside:y(e.onFocusOutside,u=>u.preventDefault(),{checkForDefaultPrevented:!1})})})}),Ee=s.forwardRef((e,t)=>{const l=f(b,e.__scopePopover),i=s.useRef(!1),o=s.useRef(!1);return a.jsx(L,{...e,ref:t,trapFocus:!1,disableOutsidePointerEvents:!1,onCloseAutoFocus:n=>{var u,r;(u=e.onCloseAutoFocus)==null||u.call(e,n),n.defaultPrevented||(i.current||(r=l.triggerRef.current)==null||r.focus(),n.preventDefault()),i.current=!1,o.current=!1},onInteractOutside:n=>{var c,d;(c=e.onInteractOutside)==null||c.call(e,n),n.defaultPrevented||(i.current=!0,n.detail.originalEvent.type==="pointerdown"&&(o.current=!0));const u=n.target;((d=l.triggerRef.current)==null?void 0:d.contains(u))&&n.preventDefault(),n.detail.originalEvent.type==="focusin"&&o.current&&n.preventDefault()}})}),L=s.forwardRef((e,t)=>{const{__scopePopover:l,trapFocus:i,onOpenAutoFocus:o,onCloseAutoFocus:n,disableOutsidePointerEvents:u,onEscapeKeyDown:r,onPointerDownOutside:c,onFocusOutside:d,onInteractOutside:v,...m}=e,p=f(b,l),h=C(l);return Ce(),a.jsx(Pe,{asChild:!0,loop:!0,trapped:i,onMountAutoFocus:o,onUnmountAutoFocus:n,children:a.jsx(ne,{asChild:!0,disableOutsidePointerEvents:u,onInteractOutside:v,onEscapeKeyDown:r,onPointerDownOutside:c,onFocusOutside:d,onDismiss:()=>p.onOpenChange(!1),children:a.jsx(le,{"data-state":J(p.open),role:"dialog",id:p.contentId,...h,...m,ref:t,style:{...m.style,"--radix-popover-content-transform-origin":"var(--radix-popper-transform-origin)","--radix-popover-content-available-width":"var(--radix-popper-available-width)","--radix-popover-content-available-height":"var(--radix-popper-available-height)","--radix-popover-trigger-width":"var(--radix-popper-anchor-width)","--radix-popover-trigger-height":"var(--radix-popper-anchor-height)"}})})})}),H="PopoverClose",B=s.forwardRef((e,t)=>{const{__scopePopover:l,...i}=e,o=f(H,l);return a.jsx(A.button,{type:"button",...i,ref:t,onClick:y(e.onClick,()=>o.onOpenChange(!1))})});B.displayName=H;var je="PopoverArrow",X=s.forwardRef((e,t)=>{const{__scopePopover:l,...i}=e,o=C(l);return a.jsx(ae,{...o,...i,ref:t})});X.displayName=je;function J(e){return e?"open":"closed"}var ke=S,Ae=D,Ne=M,Ve=F,Se=B,Te=X;const De="content__KHgp9",qe="header__CaLti",Me="close__3s-VD",Fe="footer__X5qXF",Le="arrow__0pg-s",g={content:De,header:qe,close:Me,footer:Fe,arrow:Le},He=e=>{e.scrollIntoViewIfNeeded?e.scrollIntoViewIfNeeded(!1):e.scrollIntoView({behavior:"auto",block:"nearest",inline:"nearest"})},w=s.forwardRef(function({open:t,onOpenChange:l,disabled:i,title:o,text:n,children:u,side:r,dataset:c,actionLabel:d=a.jsx(ge,{id:"preply-ds.onboardingTooltip.actionLabel",defaultMessage:"Got it",description:"Default onboarding tooltip action label. Used to acknowledge and close the tooltip."}),actionOnClick:v,actionHref:m,counter:p,autoScroll:h=!0,...U},G){const{formatMessage:$}=ve(),K=re(),_=s.useId(),z=s.useId(),R=s.useId(),x=s.useRef(null);return s.useEffect(()=>{t&&x.current&&h&&He(x.current)},[h,t]),i?u:a.jsxs(ke,{open:t,onOpenChange:l,children:[a.jsx(ue,{ref:G,...U,children:a.jsx(Ae,{ref:x,id:R,asChild:!0,children:u})}),a.jsx(Ne,{container:K,children:a.jsxs(Ve,{onInteractOutside:W=>{W.preventDefault()},side:r,className:g.content,"aria-labelledby":_,"aria-describedby":`${R} ${z}`,...se(c,{preplyDsComponent:he.OnboardingTooltip}),children:[a.jsxs("div",{className:g.header,children:[a.jsx(Se,{className:g.close,"aria-label":$(me.close),"data-testid":"close",children:a.jsx(ce,{accent:"inverted",svg:ie})}),a.jsx(fe,{tag:"h1",variant:"small",accent:"inverted",id:_,"aria-describedby":R,children:o})]}),a.jsx(de,{variant:"default-regular",accent:"inverted",className:g.text,children:n}),a.jsxs("div",{className:g.footer,children:[p,a.jsx(pe,{variant:"inverted",size:"small",onClick:v,href:m,dataset:{testid:"action"},wrap:!0,children:d})]}),a.jsx(Te,{"aria-hidden":!0,className:g.arrow,width:18,height:11})]})})]})}),I=s.forwardRef(function(t,l){const[i,o]=s.useState(!0),n=r=>{var c;r||(c=t.onClose)==null||c.call(t),o(r)},u=()=>{var r,c;(r=t.actionOnClick)==null||r.call(t),o(!1),(c=t.onClose)==null||c.call(t)};return a.jsx(w,{...t,open:i,onOpenChange:n,actionOnClick:u,ref:l})});try{w.displayName="InternalOnboardingTooltip",w.__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"
-                description="Default onboarding tooltip action label. Used to acknowledge and close the tooltip."
-            />
-        )`},description:"Label of the action button",name:"actionLabel",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"}]}},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"}]}},actionHref:{defaultValue:null,description:"By default, the action button closes the tooltip.\n\nProvide `actionHref` to also navigate to other page when the button is clicked.",name:"actionHref",required:!1,type:{name:"enum",value:[{value:"string"}]}},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"'}]}},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"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},counter:{defaultValue:null,description:"",name:"counter",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"}]}},open:{defaultValue:null,description:"",name:"open",required:!0,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},onOpenChange:{defaultValue:null,description:"",name:"onOpenChange",required:!0,type:{name:"(open: boolean) => void"}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLButtonElement | null) => void"},{value:"RefObject<HTMLButtonElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}try{I.displayName="OnboardingTooltip",I.__docgenInfo={description:`Informational pop-up that highlights specific UI element, e.g. to introduce new feature.
-
-The direct child of the component should be html element, DS component,
-or a component that forwards ref to the underlying DOM node.`,displayName:"OnboardingTooltip",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"
-                description="Default onboarding tooltip action label. Used to acknowledge and close the tooltip."
-            />
-        )`},description:"Label of the action button",name:"actionLabel",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"}]}},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"}]}},actionHref:{defaultValue:null,description:"By default, the action button closes the tooltip.\n\nProvide `actionHref` to also navigate to other page when the button is clicked.",name:"actionHref",required:!1,type:{name:"enum",value:[{value:"string"}]}},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"'}]}},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"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLButtonElement | null) => void"},{value:"RefObject<HTMLButtonElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}export{w as I,I as O};

package/dist/assets/OnboardingTooltip-X4QjsIe6.css

@@ -1 +0,0 @@
-.content__KHgp9{background-color:var(--79dffb);border-radius:var(--fa4b1a);padding:var(--1e685c);box-shadow:var(--df7dbb);width:304px;display:flex;flex-direction:column;gap:var(--66b80b);z-index:var(--ds-onboarding-tooltip-z-index-override, auto);animation-duration:.15s;animation-timing-function:cubic-bezier(.25,0,.5,1.3);transform-origin:var(--radix-popover-content-transform-origin);will-change:transform,opacity}.content__KHgp9[data-state=open]{animation-name:appear__G8agi}.content__KHgp9[data-state=closed]{animation-name:disappear__OWVSJ}.header__CaLti{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:flex-start}.close__3s-VD{background:none;border:none;border-radius:var(--5e8be4);padding:0;margin-top:calc(var(--813599) * -1);margin-right:calc(var(--813599) * -1);cursor:pointer}.close__3s-VD:focus-visible{outline-style:solid;outline-color:var(--603ec6);outline-width:var(--99d31f);outline-offset:var(--c0b12c)}.footer__X5qXF{margin-top:var(--66b80b);display:flex;justify-content:flex-end;gap:var(--813599);align-items:center}.arrow__0pg-s{fill:var(--79dffb)}@keyframes appear__G8agi{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@keyframes disappear__OWVSJ{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0)}}

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

@@ -1,107 +0,0 @@
-import{j as e,r as F}from"./iframe-B_74HtSc.js";import{O as i}from"./OnboardingTooltip-DzQhJzWc.js";import{I as w}from"./IconButton-BpjNyYgD.js";import{F as C}from"./TokyoUIFav-C-stY9U_.js";import"./preload-helper-Dp1pzeXC.js";import"./TokyoUIClose-BfMyMrDa.js";import"./Icon-CC0yjdx9.js";import"./text-accent-BQ9POoE5.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-MT6RlyNs.js";import"./componentNames-hc9KR2nX.js";import"./Text-DvShrljd.js";import"./text-centered-BEaaxMgl.js";import"./Button-C0Um_QuO.js";import"./ButtonBase-HkSfLFbE.js";import"./Spinner-8-RB4YZR.js";import"./useMergeRefs-Caz9hOck.js";import"./useHostname-CbpnzdHv.js";import"./index-CC6DAVyL.js";import"./Heading-Cj8Si45g.js";import"./index-DIqvfT2b.js";import"./shared-strings-ThL9KyH0.js";import"./message-DJT5rp5J.js";import"./index-W3BB_3go.js";const Y={title:"Components/OnboardingTooltip",component:i,parameters:{preventIframeFromScrollingParent:!0,docs:{story:{inline:!1,height:250},description:{component:`Are you looking for a step-by-step tour? Check out [OnboardingTour](/docs/components-onboardingtour--docs).
-
-Also see [Composing Popovers](/docs/guides-composing-popovers--docs) for usage with other popovers.`}}},decorators:[t=>e.jsx("div",{style:{margin:"auto",width:"max-content"},children:t()})]},O=t=>[!1,!1],j=t=>a=>{},o=()=>{const[t,a]=O(),s=j();return e.jsx(i,{title:"New Feature Available!",text:"We've added an exciting new feature to enhance your experience.",disabled:a||t,onClose:()=>s(!0),children:e.jsx(w,{variant:"ghost",svg:e.jsx(C,{}),assistiveText:"Favorite"})})};o.storyName="OnboardingTooltip";const r={parameters:{chromatic:{disableSnapshot:!0},docs:{source:{type:"dynamic"}}},render:()=>{const t=F.forwardRef(function(s,T){return e.jsx("button",{...s,ref:T})});return e.jsx(i,{title:"New Feature Available!",text:"We've added an exciting new feature to enhance your experience.",children:e.jsx(t,{children:"Custom child"})})}},n={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(w,{variant:"ghost",svg:e.jsx(C,{}),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 c,l,d,p,u;o.parameters={...o.parameters,docs:{...(c=o.parameters)==null?void 0:c.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>;
-}`,...(d=(l=o.parameters)==null?void 0:l.docs)==null?void 0:d.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)",...(u=(p=o.parameters)==null?void 0:p.docs)==null?void 0:u.description}}};var m,g,h,x,f;r.parameters={...r.parameters,docs:{...(m=r.parameters)==null?void 0:m.docs,source:{originalSource:`{
-  parameters: {
-    chromatic: {
-      disableSnapshot: true
-    },
-    docs: {
-      source: {
-        type: 'dynamic'
-      }
-    }
-  },
-  render: () => {
-    const CustomButton = forwardRef<HTMLButtonElement, {
-      children: ReactNode;
-    }>(function CustomButton(props, ref) {
-      return <button {...props} ref={ref} />;
-    });
-    return <OnboardingTooltip title="New Feature Available!" text="We've added an exciting new feature to enhance your experience.">
-                <CustomButton>Custom child</CustomButton>
-            </OnboardingTooltip>;
-  }
-}`,...(h=(g=r.parameters)==null?void 0:g.docs)==null?void 0:h.source},description:{story:`The onboarding tooltip works out of the box with html elements and DS components as children.
-
-If you need to wrap a custom component with the onboarding tooltip, component should forward
-the ref and spread props to the underlying DOM node:
-
-\`\`\`tsx
-const CustomButton = forwardRef<HTMLButtonElement, { children: ReactNode }>(
-    (props, ref) => {
-        return <button {...props} ref={ref} />;
-    },
-);
-
-<OnboardingTooltip
-    title="New Feature Available!"
-    text="We've added an exciting new feature to enhance your experience."
->
-    <CustomButton>Custom child</CustomButton>
-</OnboardingTooltip>
-\`\`\``,...(f=(x=r.parameters)==null?void 0:x.docs)==null?void 0:f.description}}};var v,b,y;n.parameters={...n.parameters,docs:{...(v=n.parameters)==null?void 0:v.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>]
-}`,...(y=(b=n.parameters)==null?void 0:b.docs)==null?void 0:y.source}}};const Z=["Default","CustomChildComponent","Playground"];export{r as CustomChildComponent,o as Default,n as Playground,Z as __namedExportsOrder,Y as default};

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

@@ -1,79 +0,0 @@
-import{j as a}from"./iframe-B_74HtSc.js";import{O as x}from"./OnboardingTooltip-DzQhJzWc.js";import{I}from"./IconButton-BpjNyYgD.js";import{F as f}from"./TokyoUIFav-C-stY9U_.js";import{B as k}from"./Button-C0Um_QuO.js";import{L as F}from"./LayoutFlex-DXRMJ9FH.js";import"./preload-helper-Dp1pzeXC.js";import"./TokyoUIClose-BfMyMrDa.js";import"./Icon-CC0yjdx9.js";import"./text-accent-BQ9POoE5.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-MT6RlyNs.js";import"./componentNames-hc9KR2nX.js";import"./Text-DvShrljd.js";import"./text-centered-BEaaxMgl.js";import"./Heading-Cj8Si45g.js";import"./index-DIqvfT2b.js";import"./shared-strings-ThL9KyH0.js";import"./message-DJT5rp5J.js";import"./index-W3BB_3go.js";import"./ButtonBase-HkSfLFbE.js";import"./Spinner-8-RB4YZR.js";import"./useMergeRefs-Caz9hOck.js";import"./useHostname-CbpnzdHv.js";import"./index-CC6DAVyL.js";import"./layout-relative.module-BIZVul8q.js";const{within:s,userEvent:d,waitFor:r,expect:n}=__STORYBOOK_MODULE_TEST__,tt={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 d.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 d.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 d.click(t)}),await o("check the tooltip remain open",async()=>{await E(1e3);const t=i.getByTestId("tooltip");await n(t).toBeVisible()})}};var m,y,w;c.parameters={...c.parameters,docs:{...(m=c.parameters)==null?void 0:m.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,T;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();
-      });
-    });
-  }
-}`,...(T=(v=l.parameters)==null?void 0:v.docs)==null?void 0:T.source}}};var g,b,h;p.parameters={...p.parameters,docs:{...(g=p.parameters)==null?void 0:g.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');
-      await expect(tooltip).toBeVisible();
-    });
-  }
-}`,...(h=(b=p.parameters)==null?void 0:b.docs)==null?void 0:h.source}}};const ot=["Default","CloseWithActionButton","DoNotCloseOnInteractionOutside"];export{l as CloseWithActionButton,c as Default,p as DoNotCloseOnInteractionOutside,ot as __namedExportsOrder,tt as default};

package/dist/assets/OnboardingTour-B5gEod5H.js

@@ -1,4 +0,0 @@
-import{r as i,j as r}from"./iframe-B_74HtSc.js";import{I as A}from"./OnboardingTooltip-DzQhJzWc.js";import"./index-DIqvfT2b.js";import{M as O}from"./message-DJT5rp5J.js";const j="counter__ArBS-",_={counter:j},v=({totalSteps:c,nextActionLabel:s=r.jsx(O,{id:"preply-ds.onboardingTour.nextActionLabel",defaultMessage:"Next",description:"Onboarding tour next action label"}),completeActionLabel:t=r.jsx(O,{id:"preply-ds.onboardingTour.completeActionLabel",defaultMessage:"Got it",description:"Onboarding tour complete action label"}),onClose:e,onComplete:n,onStepChange:o,disabled:l,children:x,ctx:d})=>{const[b,p]=i.useState(!0),[u,f]=i.useState(0),g={totalSteps:c,nextActionLabel:s,completeActionLabel:t,onClose:()=>{p(!1),e==null||e()},active:!l&&b,currentStep:u,onActionClick:()=>{if(u===c-1)n==null||n(),p(!1);else{const a=u+1;f(a),o==null||o(a)}}};return r.jsx(d.Provider,{value:g,children:x})},w=i.forwardRef(function({ctx:s,...t},e){const n=i.useContext(s);if(!n)throw new Error("OnboardingTourContext not found");const{currentStep:o,totalSteps:l,onActionClick:x,onClose:d,active:b,nextActionLabel:p,completeActionLabel:u}=n,f=t.step===l-1,m=t.step===o,S=f?u:p,g=()=>{var a;(a=t.actionOnClick)==null||a.call(t),x()},h=a=>{a||d==null||d()};return r.jsx(A,{...t,counter:r.jsx("p",{className:_.counter,children:r.jsx(O,{id:"preply-ds.onboardingTour.counter",defaultMessage:"{currentStep} of {totalSteps}",description:"Onboarding tour step counter, e.g. '1 of 3'",values:{currentStep:o+1,totalSteps:l}})}),open:b&&m,onOpenChange:h,actionLabel:S,actionOnClick:g,ref:e})}),T=()=>{const c=i.createContext(null),s=e=>r.jsx(v,{...e,ctx:c}),t=i.forwardRef(function(n,o){return r.jsx(w,{...n,ctx:c,ref:o})});return{Provider:s,Step:t}};try{T.displayName="createOnboardingTour",T.__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{T as c};

package/dist/assets/OnboardingTour-DoEbirUE.css

@@ -1 +0,0 @@
-.counter__ArBS-{flex:1;min-width:max-content;color:var(--c2b191);font-size:var(--f7d879);font-weight:var(--87a7e3);line-height:var(--1cb31f);margin:0}

package/dist/assets/OnboardingTour.stories-BzHBS52z.js

@@ -1,46 +0,0 @@
-import{j as e,r as b}from"./iframe-B_74HtSc.js";import{c as x}from"./OnboardingTour-B5gEod5H.js";import{T as n}from"./Text-DvShrljd.js";import{L as y}from"./LayoutFlex-DXRMJ9FH.js";import"./preload-helper-Dp1pzeXC.js";import"./OnboardingTooltip-DzQhJzWc.js";import"./TokyoUIClose-BfMyMrDa.js";import"./Icon-CC0yjdx9.js";import"./text-accent-BQ9POoE5.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-MT6RlyNs.js";import"./componentNames-hc9KR2nX.js";import"./Button-C0Um_QuO.js";import"./ButtonBase-HkSfLFbE.js";import"./Spinner-8-RB4YZR.js";import"./useMergeRefs-Caz9hOck.js";import"./useHostname-CbpnzdHv.js";import"./index-CC6DAVyL.js";import"./Heading-Cj8Si45g.js";import"./text-centered-BEaaxMgl.js";import"./index-DIqvfT2b.js";import"./shared-strings-ThL9KyH0.js";import"./message-DJT5rp5J.js";import"./index-W3BB_3go.js";import"./layout-relative.module-BIZVul8q.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(),K={title:"Components/OnboardingTour",component:l,subcomponents:{OnboardingTourStep:s},parameters:{preventIframeFromScrollingParent:!0,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)"}}},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)}>
-            <div style={{
-      height: 250
-    }}>
-                <Tour.Step step={0} title="Step 1" text="This is the first step of the onboarding tour.">
-                    <Text>Step 1</Text>
-                </Tour.Step>
-            </div>
-            <div style={{
-      height: 250
-    }}>
-                <Tour.Step step={1} title="Step 2" text="This is the second step of the onboarding tour.">
-                    <Text>Step 2</Text>
-                </Tour.Step>
-            </div>
-            <div style={{
-      height: 250
-    }}>
-                <Tour.Step step={2} title="Step 3" text="This is the final step of the onboarding tour.">
-                    <Text>Step 3</Text>
-                </Tour.Step>
-            </div>
-        </Tour.Provider>;
-}`,...(d=(p=r.parameters)==null?void 0:p.docs)==null?void 0:d.source},description:{story:"Basic usage of the onboarding tour.\n\n- Use `disabled` and `onComplete` (or `onClose`) props to control tour's visibility (We recommend using FeatureToggles for this)\n- Wrap each step element into `Tour.Step` component",...(m=(c=r.parameters)==null?void 0:c.docs)==null?void 0:m.description}}};var h,f,v,g,S;a.parameters={...a.parameters,docs:{...(h=a.parameters)==null?void 0:h.docs,source:{originalSource:`() => {
-  const [isStep3Hidden, setIsStep3Hidden] = useState(true);
-  return <Tour.Provider totalSteps={3}>
-            <LayoutFlex gap="12">
-                <Tour.Step step={0} title="First step" text="This is the first step of the onboarding tour.">
-                    <Text>Step 1</Text>
-                </Tour.Step>
-                <Tour.Step step={1} title="Second step" text="This is the second step of the onboarding tour." actionOnClick={() => setIsStep3Hidden(false)}>
-                    <Text>Step 2</Text>
-                </Tour.Step>
-                {!isStep3Hidden && <Tour.Step step={2} title="Final step" text="This is the final step of the onboarding tour.">
-                        <Text>Step 3 (I was hidden)</Text>
-                    </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 M=["Default","WithIntermediateAction"];export{r as Default,a as WithIntermediateAction,M as __namedExportsOrder,K as default};