@preply/ds-docs 11.0.0 → 11.1.0

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

@@ -0,0 +1,254 @@
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Icon-CfZyHxyH.js";import{n as o,t as s}from"./FieldButton-lc__KGvz.js";import{n as c,t as l}from"./NumberField-BAofx_Ni.js";import{n as u,t as d}from"./TokyoUIPhone-Bw5Vf4vA.js";import{n as f,t as p}from"./TokyoUIAttach-CJ32NKTG.js";var m,h,g,_,v,y,b,x,S,C,w,T,E,D,O,k,A,j,M;t((()=>{m=e(n(),1),u(),f(),i(),c(),o(),h=r(),{action:g}=__STORYBOOK_MODULE_ACTIONS__,{expect:_,userEvent:v,within:y,fn:b}=__STORYBOOK_MODULE_TEST__,x={title:`components/NumberField`,component:l,args:{name:`number`,label:`Number`,defaultValue:void 0,placeholder:`Enter a number`,dataset:{testid:`field`,foo:`bar`},inputDataset:{testid:`input`,foo:`bar`},onChange:b(),onValueChange:b(),onBlur:b(),onFocus:b(),onClick:b(),onCopy:b(),onKeyDown:b(),onKeyUp:b(),onPaste:b()}},S={play:async({canvasElement:e,step:t,args:n})=>{let r=y(e),i=r.getByTestId(`field`),a=r.getByTestId(`input`);await t(`it should render correct label`,async()=>{_(y(i).getByTestId(`label`)).toHaveTextContent(`Number • Optional`),_(a).toHaveAccessibleName(`Number`)}),await t(`it should call onFocus when the input is focused`,async()=>{a.focus(),_(n.onFocus).toHaveBeenCalled()}),await t(`it should call callback when the value changes`,async()=>{await v.type(a,`42`),_(n.onValueChange).toHaveBeenCalledWith(42),_(n.onChange).toHaveBeenCalled()}),await t(`it should call onBlur when the input is blurred`,async()=>{await v.keyboard(`{tab}`),_(n.onBlur).toHaveBeenCalled()}),await t(`it should render the dataset props`,async()=>{_(i).toHaveAttribute(`data-testid`,`field`),_(i).toHaveAttribute(`data-foo`,`bar`),_(a).toHaveAttribute(`data-testid`,`input`),_(a).toHaveAttribute(`data-foo`,`bar`)})}},C={render:function(e){let[t,n]=(0,m.useState)(e.value);return(0,h.jsx)(l,{...e,value:t,onChange:t=>{n(Number(t.target.value)),e.onChange?.(t)}})},args:{label:`Controlled NumberField`,placeholder:`Enter a number...`,value:42},play:async({canvas:e,step:t})=>{await t(`it should render the correct initial value`,async()=>{await _(e.getByTestId(`input`)).toHaveValue(42)}),await t(`it should update the value when the user types`,async()=>{let t=e.getByTestId(`input`);await v.clear(t),await v.type(t,`100`),_(t).toHaveValue(100)})}},w={args:{icon:(0,h.jsx)(a,{svg:d,dataset:{testid:`icon`}})},play:async({canvas:e,step:t})=>{await t(`it should render the icon`,async()=>{_(e.getByTestId(`icon`)).toBeInTheDocument()})}},T={args:{description:`Enter a valid number`},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`),r=e.getByTestId(`description`);await t(`it should render the description`,async()=>{_(n).toHaveAccessibleDescription(`Enter a valid number`),_(r).toHaveTextContent(`Enter a valid number`)})}},E={args:{required:!0},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`),r=e.getByTestId(`label`);await t(`it should render correct label`,async()=>{_(n).toHaveAccessibleName(`Number`),_(r).toHaveTextContent(`Number`)}),await t(`it should render required attribute`,async()=>{_(n).toHaveAttribute(`required`)})}},D={args:{hideLabel:!0},play:async({canvas:e,step:t})=>{await t(`it should render correct a11y label`,async()=>{_(e.getByTestId(`input`)).toHaveAccessibleName(`Number`)})}},O={args:{error:`This is an error message`},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`),r=e.getByTestId(`error`);await t(`it should render the error message`,async()=>{_(n).toHaveAccessibleErrorMessage(`This is an error message`),_(r).toHaveTextContent(`This is an error message`)})}},k={args:{disabled:!0},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`);await t(`it should render the disabled input`,async()=>{_(n).toHaveAttribute(`disabled`)})}},A={args:{readOnly:!0},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`);await t(`it should render the read only input`,async()=>{_(n).toHaveAttribute(`readonly`)})}},j={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":(0,h.jsx)(a,{svg:d})},control:`select`},button:{options:[`None`,`With Button`],mapping:{None:void 0,"With Button":(0,h.jsx)(s,{svg:p,assistiveText:`Do the thing`,onClick:g(`field button clicked`)})},control:`select`},maxLength:{control:`number`},hasError:{table:{disable:!0}}}},S.parameters={...S.parameters,docs:{...S.parameters?.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');
+    });
+  }
+}`,...S.parameters?.docs?.source},description:{story:"An empty field with a `label` and a `placeholder`.",...S.parameters?.docs?.description}}},C.parameters={...C.parameters,docs:{...C.parameters?.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);
+    });
+  }
+}`,...C.parameters?.docs?.source},description:{story:`A controlled component where the value is managed by React state.`,...C.parameters?.docs?.description}}},w.parameters={...w.parameters,docs:{...w.parameters?.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();
+    });
+  }
+}`,...w.parameters?.docs?.source}}},T.parameters={...T.parameters,docs:{...T.parameters?.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');
+    });
+  }
+}`,...T.parameters?.docs?.source}}},E.parameters={...E.parameters,docs:{...E.parameters?.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');
+    });
+  }
+}`,...E.parameters?.docs?.source}}},D.parameters={...D.parameters,docs:{...D.parameters?.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');
+    });
+  }
+}`,...D.parameters?.docs?.source}}},O.parameters={...O.parameters,docs:{...O.parameters?.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');
+    });
+  }
+}`,...O.parameters?.docs?.source}}},k.parameters={...k.parameters,docs:{...k.parameters?.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');
+    });
+  }
+}`,...k.parameters?.docs?.source}}},A.parameters={...A.parameters,docs:{...A.parameters?.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');
+    });
+  }
+}`,...A.parameters?.docs?.source}}},j.parameters={...j.parameters,docs:{...j.parameters?.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
+      }
+    }
+  }
+}`,...j.parameters?.docs?.source}}},M=[`Basic`,`Controlled`,`WithIcon`,`WithDescription`,`Required`,`WithHiddenLabel`,`HasError`,`Disabled`,`ReadOnly`,`Playground`]}))();export{S as Basic,C as Controlled,k as Disabled,O as HasError,j as Playground,A as ReadOnly,E as Required,T as WithDescription,D as WithHiddenLabel,w as WithIcon,M as __namedExportsOrder,x as default};

package/dist/assets/ObserveIntersection-DPsyMqP-.js

@@ -0,0 +1,8 @@
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,t as i,w as a}from"./dist-DtfJeYQK.js";import{t as o}from"./jsx-runtime-C2wGStra.js";import{n as s,t as c}from"./dist-Cc1j9Pjk.js";var l,u,d,f=t((()=>{a(),c(),i(),l=e(n(),1),u=o(),d=({onIntersect:e,once:t,threshold:n,tag:i,dataset:a,children:o})=>{let c=(0,l.useRef)(null);return(0,l.useEffect)(()=>{let r=([n],r)=>{n.isIntersecting&&(e(),t&&c.current&&r.unobserve(c.current))},i={threshold:n},a=new IntersectionObserver(r,i);return c.current&&a.observe(c.current),()=>a.disconnect()},[e,t,n]),(0,u.jsx)(i??`div`,{ref:c,...r(a,{preplyDsComponent:s.ObserverIntersection}),children:o})};try{d.displayName=`ObserveIntersection`,d.__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:`"div"`},{value:`"table"`},{value:`"th"`},{value:`"td"`},{value:`"article"`},{value:`"caption"`},{value:`"fieldset"`},{value:`"figcaption"`},{value:`"figure"`},{value:`"footer"`},{value:`"header"`},{value:`"li"`},{value:`"main"`},{value:`"ol"`},{value:`"p"`},{value:`"section"`},{value:`"span"`},{value:`"tbody"`},{value:`"tfoot"`},{value:`"thead"`},{value:`"tr"`},{value:`"ul"`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}}));export{f as n,d as t};

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

@@ -0,0 +1,27 @@
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./ObserveIntersection-DPsyMqP-.js";var o,s,c,l,u;t((()=>{o=e(n(),1),i(),s=r(),c={title:`components/ObserveIntersection`,component:a,parameters:{tags:[`!test`],chromatic:{disableSnapshot:!0}}},l=()=>{let[e,t]=(0,o.useState)(!1);return(0,s.jsxs)(`div`,{tabIndex:0,style:{height:`200px`,overflowY:`scroll`,position:`relative`},children:[(0,s.jsx)(`div`,{style:{position:`sticky`,top:`2px`},children:e?`Intersected`:`Scroll down to intersect`}),(0,s.jsx)(`div`,{style:{height:`400px`,display:`flex`,alignItems:`end`},children:(0,s.jsx)(a,{onIntersect:()=>t(!0),children:`Observer`})})]})},l.storyName=`ObserveIntersection`,l.parameters={...l.parameters,docs:{...l.parameters?.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>
+  );
+}`,...l.parameters?.docs?.source}}},u=[`Base`]}))();export{l as Base,u as __namedExportsOrder,c as default};

package/dist/assets/OnboardingTooltip-By90tTWJ.css

@@ -0,0 +1 @@
+.content__KHgp9{background-color:var(--79dffb);border-radius:var(--fa4b1a);padding:var(--1e685c);box-shadow:var(--df7dbb);gap:var(--66b80b);width:304px;z-index:var(--ds-onboarding-tooltip-z-index-override,auto);transform-origin:var(--radix-popover-content-transform-origin);will-change:transform, opacity;flex-direction:column;animation-duration:.15s;animation-timing-function:cubic-bezier(.25,0,.5,1.3);display:flex}.content__KHgp9[data-state=open]{animation-name:appear__G8agi}.content__KHgp9[data-state=closed]{animation-name:disappear__OWVSJ}.header__CaLti{flex-direction:row-reverse;justify-content:space-between;align-items:flex-start;display:flex}.close__3s-VD{border-radius:var(--5e8be4);margin-top:calc(var(--813599) * -1);margin-right:calc(var(--813599) * -1);cursor:pointer;background:0 0;border:none;padding:0}.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);justify-content:flex-end;gap:var(--813599);align-items:center;display:flex}.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-D8NhfEzc.js

@@ -0,0 +1,24 @@
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,t as i}from"./dist-DtfJeYQK.js";import{t as a}from"./jsx-runtime-C2wGStra.js";import{B as o,H as s,St as c,U as l,V as u,W as d,_ as f,g as p,m,z as h}from"./iframe-f34VuKy-.js";import{n as g,t as _}from"./dist-Cc1j9Pjk.js";import{n as v,t as y}from"./Icon-CfZyHxyH.js";import{n as b,t as x}from"./Text-bm2vnOS2.js";import{n as S,t as C}from"./Heading-CEZfMm-F.js";import{n as w,t as T}from"./Button-DnVrHohm.js";import{n as E,t as D}from"./TokyoUIClose-cJyNy-kq.js";import{i as O,o as k,r as A}from"./lib-CXCPi5ID.js";import{n as j,t as M}from"./shared-strings-DrlpFtg5.js";var N,P,F,I,L,R,z,B,V=t((()=>{N=`content__KHgp9`,P=`appear__G8agi`,F=`disappear__OWVSJ`,I=`header__CaLti`,L=`close__3s-VD`,R=`footer__X5qXF`,z=`arrow__0pg-s`,B={content:N,appear:P,disappear:F,header:I,close:L,footer:R,arrow:z}})),H,U,W,G,K,q=t((()=>{H=e(n(),1),f(),E(),V(),m(),v(),b(),w(),S(),i(),_(),A(),j(),U=a(),W=e=>{e.scrollIntoViewIfNeeded?e.scrollIntoViewIfNeeded(!1):e.scrollIntoView({behavior:`auto`,block:`nearest`,inline:`nearest`})},G=(0,H.forwardRef)(function({open:e,onOpenChange:t,disabled:n,title:i,text:a,children:f,side:m,dataset:_,actionLabel:v=(0,U.jsx)(O,{id:`preply-ds.onboardingTooltip.actionLabel`,defaultMessage:`Got it`,description:`Default onboarding tooltip action label. Used to acknowledge and close the tooltip.`}),actionOnClick:b,actionHref:S,counter:w,autoScroll:E=!0,...A},j){let{formatMessage:N}=k(),P=p(),F=(0,H.useId)(),I=(0,H.useId)(),L=(0,H.useId)(),R=(0,H.useRef)(null);return(0,H.useEffect)(()=>{e&&R.current&&E&&W(R.current)},[E,e]),n?f:(0,U.jsxs)(d,{open:e,onOpenChange:t,children:[(0,U.jsx)(c,{ref:j,...A,children:(0,U.jsx)(h,{ref:R,id:L,asChild:!0,children:f})}),(0,U.jsx)(l,{container:P,children:(0,U.jsxs)(s,{onInteractOutside:e=>{e.preventDefault()},side:m,className:B.content,"aria-labelledby":F,"aria-describedby":`${L} ${I}`,...r(_,{preplyDsComponent:g.OnboardingTooltip}),children:[(0,U.jsxs)(`div`,{className:B.header,children:[(0,U.jsx)(u,{className:B.close,"aria-label":N(M.close),"data-testid":`close`,children:(0,U.jsx)(y,{accent:`inverted`,svg:D})}),(0,U.jsx)(C,{tag:`h1`,variant:`small`,accent:`inverted`,id:F,"aria-describedby":L,children:i})]}),(0,U.jsx)(x,{variant:`default-regular`,accent:`inverted`,className:B.text,children:a}),(0,U.jsxs)(`div`,{className:B.footer,children:[w,(0,U.jsx)(T,{variant:`inverted`,size:`small`,onClick:b,href:S,dataset:{testid:`action`},wrap:!0,children:v})]}),(0,U.jsx)(o,{"aria-hidden":!0,className:B.arrow,width:18,height:11})]})})]})}),K=(0,H.forwardRef)(function(e,t){let[n,r]=(0,H.useState)(!0),i=t=>{t||e.onClose?.(),r(t)},a=()=>{e.actionOnClick?.(),r(!1),e.onClose?.()};return(0,U.jsx)(G,{...e,open:n,onOpenChange:i,actionOnClick:a,ref:t})});try{G.displayName=`InternalOnboardingTooltip`,G.__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.
+
+Provide \`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.
+
+Provide \`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:`"bottom"`},{value:`"left"`},{value:`"right"`}]}},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{K.displayName=`OnboardingTooltip`,K.__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.
+
+Provide \`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.
+
+Provide \`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:`"bottom"`},{value:`"left"`},{value:`"right"`}]}},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{K as n,q as r,G as t};

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

@@ -0,0 +1,107 @@
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,r as a}from"./OnboardingTooltip-D8NhfEzc.js";import{n as o,t as s}from"./IconButton-CUt4Aks_.js";import{n as c,t as l}from"./TokyoUIFav-D3EBPocg.js";var u,d,f,p,m,h,g,_,v;t((()=>{u=e(n(),1),a(),o(),c(),d=r(),f={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:[e=>(0,d.jsx)(`div`,{style:{margin:`auto`,width:`max-content`},children:e()})]},p=e=>[!1,!1],m=e=>e=>{},h=()=>{let[e,t]=p(`new-feature`),n=m(`new-feature`);return(0,d.jsx)(i,{title:`New Feature Available!`,text:`We've added an exciting new feature to enhance your experience.`,disabled:t||e,onClose:()=>n(!0),children:(0,d.jsx)(s,{variant:`ghost`,svg:(0,d.jsx)(l,{}),assistiveText:`Favorite`})})},h.storyName=`OnboardingTooltip`,g={parameters:{chromatic:{disableSnapshot:!0},docs:{source:{type:`dynamic`}}},render:()=>(0,d.jsx)(i,{title:`New Feature Available!`,text:`We've added an exciting new feature to enhance your experience.`,children:(0,d.jsx)((0,u.forwardRef)(function(e,t){return(0,d.jsx)(`button`,{...e,ref:t})}),{children:`Custom child`})})},_={tags:[`!autodocs`],args:{title:`New Feature Available!`,text:`We've added an exciting new feature to enhance your experience.`,disabled:!1,onClose:()=>{},children:(0,d.jsx)(s,{variant:`ghost`,svg:(0,d.jsx)(l,{}),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:[e=>(0,d.jsx)(`div`,{style:{minHeight:`100vh`,display:`flex`},children:(0,d.jsx)(`div`,{style:{margin:`auto`,width:`max-content`},children:e()})})]},h.parameters={...h.parameters,docs:{...h.parameters?.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>;
+}`,...h.parameters?.docs?.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)",...h.parameters?.docs?.description}}},g.parameters={...g.parameters,docs:{...g.parameters?.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>;
+  }
+}`,...g.parameters?.docs?.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>
+\`\`\``,...g.parameters?.docs?.description}}},_.parameters={..._.parameters,docs:{..._.parameters?.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>]
+}`,..._.parameters?.docs?.source}}},v=[`Default`,`CustomChildComponent`,`Playground`]}))();export{g as CustomChildComponent,h as Default,_ as Playground,v as __namedExportsOrder,f as default};

package/dist/assets/OnboardingTooltip.tests.stories-Chu-efpG.js

@@ -0,0 +1,79 @@
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Button-DnVrHohm.js";import{n as o,r as s}from"./OnboardingTooltip-D8NhfEzc.js";import{n as c,t as l}from"./IconButton-CUt4Aks_.js";import{n as u,t as d}from"./LayoutFlex-DdWp4cl3.js";import{n as f,t as p}from"./TokyoUIFav-D3EBPocg.js";function m(e){return new Promise(t=>setTimeout(t,e))}var h,g,_,v,y,b,x,S,C,w;t((()=>{e(n(),1),s(),c(),f(),i(),u(),h=r(),{within:g,userEvent:_,waitFor:v,expect:y}=__STORYBOOK_MODULE_TEST__,b={title:`Components/OnboardingTooltip/Tests`,component:o,parameters:{layout:`centered`,controls:{disable:!0},chromatic:{disableSnapshot:!0}},tags:[`!autodocs`,`!a11y-test`,`test`],decorators:[e=>(0,h.jsx)(`div`,{style:{margin:`100px 0`},children:e()})],args:{title:`Title`,text:`Body text`,actionLabel:`Action label`,disabled:!1,onClose:()=>{},dataset:{testid:`tooltip`},children:(0,h.jsx)(l,{svg:(0,h.jsx)(p,{}),assistiveText:`Favorite`})}},x={play:async({canvasElement:e,step:t})=>{let n=g(e);await t(`wait for tooltip to be visible`,async()=>{await v(()=>y(n.getByTestId(`tooltip`)).toBeVisible())}),await t(`close the tooltip`,()=>{let e=g(n.getByTestId(`tooltip`)).getByTestId(`close`);return _.click(e)}),await t(`wait for tooltip to be hidden`,async()=>{await v(()=>y(n.queryByTestId(`tooltip`)).toBeNull())})}},S={play:async({canvasElement:e,step:t})=>{let n=g(e);await t(`wait for tooltip to be visible`,async()=>{await v(()=>y(n.getByTestId(`tooltip`)).toBeVisible())}),await t(`close the tooltip`,()=>{let e=g(n.getByTestId(`tooltip`)).getByTestId(`action`);return _.click(e)}),await t(`wait for tooltip to be hidden`,async()=>{await v(()=>y(n.queryByTestId(`tooltip`)).toBeNull())})}},C={render:e=>(0,h.jsxs)(d,{gap:`24`,direction:`column`,children:[(0,h.jsx)(a,{children:`Click outside the tooltip`}),(0,h.jsx)(o,{...e,children:(0,h.jsx)(l,{svg:(0,h.jsx)(p,{}),assistiveText:`Favorite`})})]}),play:async({canvasElement:e,step:t})=>{let n=g(e);await t(`wait for tooltip to be visible`,async()=>{await v(()=>y(n.getByTestId(`tooltip`)).toBeVisible())}),await t(`click outside the tooltip`,()=>{let e=n.getByText(`Click outside the tooltip`);return _.click(e)}),await t(`check the tooltip remain open`,async()=>{await m(1e3),await y(n.getByTestId(`tooltip`)).toBeVisible()})}},x.parameters={...x.parameters,docs:{...x.parameters?.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();
+      });
+    });
+  }
+}`,...x.parameters?.docs?.source}}},S.parameters={...S.parameters,docs:{...S.parameters?.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();
+      });
+    });
+  }
+}`,...S.parameters?.docs?.source}}},C.parameters={...C.parameters,docs:{...C.parameters?.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();
+    });
+  }
+}`,...C.parameters?.docs?.source}}},w=[`Default`,`CloseWithActionButton`,`DoNotCloseOnInteractionOutside`]}))();export{S as CloseWithActionButton,x as Default,C as DoNotCloseOnInteractionOutside,w as __namedExportsOrder,b as default};

package/dist/assets/OnboardingTour-90hHg-Pp.css

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

package/dist/assets/OnboardingTour-DGI3bTQy.js

@@ -0,0 +1,4 @@
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{r as i,t as a}from"./OnboardingTooltip-D8NhfEzc.js";import{i as o,r as s}from"./lib-CXCPi5ID.js";var c,l,u=t((()=>{c=`counter__ArBS-`,l={counter:c}})),d,f,p,m,h,g=t((()=>{d=e(n(),1),i(),u(),s(),f=r(),p=({totalSteps:e,nextActionLabel:t=(0,f.jsx)(o,{id:`preply-ds.onboardingTour.nextActionLabel`,defaultMessage:`Next`,description:`Onboarding tour next action label`}),completeActionLabel:n=(0,f.jsx)(o,{id:`preply-ds.onboardingTour.completeActionLabel`,defaultMessage:`Got it`,description:`Onboarding tour complete action label`}),onClose:r,onComplete:i,onStepChange:a,disabled:s,children:c,ctx:l})=>{let[u,p]=(0,d.useState)(!0),[m,h]=(0,d.useState)(0),g={totalSteps:e,nextActionLabel:t,completeActionLabel:n,onClose:()=>{p(!1),r?.()},active:!s&&u,currentStep:m,onActionClick:()=>{if(m===e-1)i?.(),p(!1);else{let e=m+1;h(e),a?.(e)}}};return(0,f.jsx)(l.Provider,{value:g,children:c})},m=(0,d.forwardRef)(function({ctx:e,...t},n){let r=(0,d.useContext)(e);if(!r)throw Error(`OnboardingTourContext not found`);let{currentStep:i,totalSteps:s,onActionClick:c,onClose:u,active:p,nextActionLabel:m,completeActionLabel:h}=r,g=t.step===s-1,_=t.step===i,v=g?h:m,y=()=>{t.actionOnClick?.(),c()},b=e=>{e||u?.()};return(0,f.jsx)(a,{...t,counter:(0,f.jsx)(`p`,{className:l.counter,children:(0,f.jsx)(o,{id:`preply-ds.onboardingTour.counter`,defaultMessage:`{currentStep} of {totalSteps}`,description:`Onboarding tour step counter, e.g. '1 of 3'`,values:{currentStep:i+1,totalSteps:s}})}),open:p&&_,onOpenChange:b,actionLabel:v,actionOnClick:y,ref:n})}),h=()=>{let e=(0,d.createContext)(null);return{Provider:t=>(0,f.jsx)(p,{...t,ctx:e}),Step:(0,d.forwardRef)(function(t,n){return(0,f.jsx)(m,{...t,ctx:e,ref:n})})}};try{h.displayName=`createOnboardingTour`,h.__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{g as n,h as t};

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

@@ -0,0 +1,50 @@
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Text-bm2vnOS2.js";import{n as o,t as s}from"./OnboardingTour-DGI3bTQy.js";import{n as c,t as l}from"./LayoutFlex-DdWp4cl3.js";var u,d,f=t((()=>{u=e=>null,d=e=>null;try{u.displayName=`OnboardingTourProvider`,u.__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{d.displayName=`OnboardingTourStep`,d.__docgenInfo={description:``,displayName:`OnboardingTourStep`,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`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},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:`"bottom"`},{value:`"left"`},{value:`"right"`}]}},actionOnClick:{defaultValue:null,description:`By default, the action button closes the tooltip.
+
+Provide \`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{}})),p,m,h,g,_,v,y,b,x;t((()=>{p=e(n(),1),o(),i(),f(),c(),m=r(),h=s(),g={title:`Components/OnboardingTour`,component:u,subcomponents:{OnboardingTourStep:d},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:[e=>(0,m.jsx)(`div`,{style:{margin:`auto`,width:`max-content`},children:e()})]},_=e=>[!1,!1],v=e=>e=>{},y=()=>{let[e,t]=_(`my-tour`),n=v(`my-tour`);return(0,m.jsxs)(h.Provider,{totalSteps:3,disabled:t||e,onComplete:()=>n(!0),children:[(0,m.jsx)(`div`,{style:{height:250},children:(0,m.jsx)(h.Step,{step:0,title:`Step 1`,text:`This is the first step of the onboarding tour.`,children:(0,m.jsx)(a,{children:`Step 1`})})}),(0,m.jsx)(`div`,{style:{height:250},children:(0,m.jsx)(h.Step,{step:1,title:`Step 2`,text:`This is the second step of the onboarding tour.`,children:(0,m.jsx)(a,{children:`Step 2`})})}),(0,m.jsx)(`div`,{style:{height:250},children:(0,m.jsx)(h.Step,{step:2,title:`Step 3`,text:`This is the final step of the onboarding tour.`,children:(0,m.jsx)(a,{children:`Step 3`})})})]})},y.storyName=`OnboardingTour`,b=()=>{let[e,t]=(0,p.useState)(!0);return(0,m.jsx)(h.Provider,{totalSteps:3,children:(0,m.jsxs)(l,{gap:`12`,children:[(0,m.jsx)(h.Step,{step:0,title:`First step`,text:`This is the first step of the onboarding tour.`,children:(0,m.jsx)(a,{children:`Step 1`})}),(0,m.jsx)(h.Step,{step:1,title:`Second step`,text:`This is the second step of the onboarding tour.`,actionOnClick:()=>t(!1),children:(0,m.jsx)(a,{children:`Step 2`})}),!e&&(0,m.jsx)(h.Step,{step:2,title:`Final step`,text:`This is the final step of the onboarding tour.`,children:(0,m.jsx)(a,{children:`Step 3 (I was hidden)`})})]})})},y.parameters={...y.parameters,docs:{...y.parameters?.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>;
+}`,...y.parameters?.docs?.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",...y.parameters?.docs?.description}}},b.parameters={...b.parameters,docs:{...b.parameters?.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>;
+}`,...b.parameters?.docs?.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.)
+
+You can do this by using \`actionOnClick\` prop on the Tour.Step component.`,...b.parameters?.docs?.description}}},x=[`Default`,`WithIntermediateAction`]}))();export{y as Default,b as WithIntermediateAction,x as __namedExportsOrder,g as default};