@preply/ds-docs 11.0.0 → 11.1.0

package/dist/assets/SelectField.stories-BKCyFPQa.js

@@ -1,517 +0,0 @@
-import{j as e,r as z}from"./iframe-B_74HtSc.js";import{F as y}from"./TokyoUILanguage-BcrymOo9.js";import{I as v}from"./Icon-CC0yjdx9.js";import{S as b,a,b as D}from"./SelectField-DU60q2LU.js";import{D as Ye}from"./Dialog-CJQmu6iz.js";import{B as Qe}from"./Button-C0Um_QuO.js";import{C as i}from"./CountryFlag-D40CtNEa.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"./TokyoUIChevronDown-DiBNbDdz.js";import"./TokyoUICheckmark-BHJrELn_.js";import"./breakpoints-BfMlrtxE.js";import"./index-Cnv20V_M.js";import"./index-W3BB_3go.js";import"./DialogCloseButton-D5YliaRd.js";import"./useOpenInteractionType-D3sASQWj.js";import"./store-B0wM9Zg8.js";import"./TokyoUIClose-BfMyMrDa.js";import"./IconButton-BpjNyYgD.js";import"./ButtonBase-HkSfLFbE.js";import"./Spinner-8-RB4YZR.js";import"./useMergeRefs-Caz9hOck.js";import"./useHostname-CbpnzdHv.js";import"./index-CC6DAVyL.js";import"./shared-strings-ThL9KyH0.js";const{expect:s,userEvent:c,within:R,fn:p,waitFor:Xe}=__STORYBOOK_MODULE_TEST__,Ct={title:"components/SelectField",component:D,subcomponents:{SelectFieldOption:a,SelectFieldGroup:b},parameters:{layout:"padded"},decorators:[t=>e.jsx("div",{style:{width:"min(300px, 100%)",height:"300px"},children:e.jsx(t,{})})],args:{name:"language",label:"Language",placeholder:"Select a language",defaultValue:"",dataset:{testid:"field",foo:"bar"},inputDataset:{testid:"input",foo:"bar"},onValueChange:p(),onBlur:p(),onFocus:p(),onClick:p(),onKeyDown:p(),onKeyUp:p(),children:e.jsxs(e.Fragment,{children:[e.jsx(a,{value:"english",children:"English"}),e.jsx(a,{value:"spanish",children:"Spanish"}),e.jsx(a,{value:"french",children:"French"})]})}},r={a11y:{config:{rules:[{id:"aria-hidden-focus",enabled:!1}]}}},h={parameters:r,play:async({canvasElement:t,step:n,args:o})=>{const l=R(t),u=l.getByTestId("field"),d=l.getByTestId("input");await n("it should render correct label",async()=>{const W=R(u).getByTestId("label");s(W).toHaveTextContent("Language • Optional"),s(d).toHaveAccessibleName("Language")}),await n("it should call onFocus when the input is focused",async()=>{d.focus(),s(o.onFocus).toHaveBeenCalled()}),await n("it should open the menu",async()=>{await c.keyboard("{Enter}"),await Xe(async()=>{s(await l.findByRole("listbox")).toBeInTheDocument()})}),await n("it should call callback when the value changes",async()=>{await c.keyboard("{Enter}"),s(o.onValueChange).toHaveBeenCalledWith("english"),s(o.onBlur).toHaveBeenCalledTimes(1)}),await n("it should call onBlur when the input is blurred",async()=>{await c.keyboard("{tab}"),s(o.onBlur).toHaveBeenCalledTimes(2)}),await n("it should render the dataset props",async()=>{s(u).toHaveAttribute("data-testid","field"),s(u).toHaveAttribute("data-foo","bar"),s(d).toHaveAttribute("data-testid","input"),s(d).toHaveAttribute("data-foo","bar")}),await n("it should render all options",async()=>{d.focus(),await c.keyboard("{Enter}");const W=l.getByRole("option",{name:"English"}),Ue=l.getByRole("option",{name:"Spanish"}),Ze=l.getByRole("option",{name:"French"});s(W).toBeInTheDocument(),s(Ue).toBeInTheDocument(),s(Ze).toBeInTheDocument()})}},g={render:function(n){const[o,l]=z.useState(n.value);return e.jsxs(D,{...n,value:o,onValueChange:l,children:[e.jsx(a,{value:"english",children:"English"}),e.jsx(a,{value:"spanish",children:"Spanish"}),e.jsx(a,{value:"french",children:"French"})]})},args:{label:"Language",placeholder:"Select a language...",value:"spanish",defaultValue:void 0},play:async({canvas:t,step:n})=>{await n("it should render the correct initial value",async()=>{const o=t.getByTestId("input");await s(o).toHaveTextContent("Spanish")}),await n("it should update the value when the user selects",async()=>{const o=t.getByTestId("input");o.focus(),await c.keyboard("{Enter}"),await c.keyboard("{ArrowDown}"),await c.keyboard("{Enter}"),s(o).toHaveTextContent("French")})}},S={args:{icon:e.jsx(v,{svg:y,dataset:{testid:"icon"}})},play:async({canvas:t,step:n})=>{await n("it should render the icon",async()=>{const o=t.getByTestId("icon");s(o).toBeInTheDocument()})}},x={args:{description:"We will use this to get a personalized choice of tutors"},play:async({canvas:t,step:n})=>{const o=t.getByTestId("input"),l=t.getByTestId("description");await n("it should render the description",async()=>{s(o).toHaveAccessibleDescription("We will use this to get a personalized choice of tutors"),s(l).toHaveTextContent("We will use this to get a personalized choice of tutors")})}},F={args:{required:!0},play:async({canvas:t,step:n})=>{const o=t.getByTestId("input"),l=t.getByTestId("label");await n("it should render correct label",async()=>{s(o).toHaveAccessibleName("Language"),s(l).toHaveTextContent("Language")}),await n("it should render required attribute",async()=>{s(o).toHaveAttribute("aria-required")})}},f={args:{hideLabel:!0},play:async({canvas:t,step:n})=>{await n("it should render correct a11y label",async()=>{const o=t.getByTestId("input");s(o).toHaveAccessibleName("Language")})}},w={args:{error:"This is an error message"},play:async({canvas:t,step:n})=>{const o=t.getByTestId("input"),l=t.getByTestId("error");await n("it should render the error message",async()=>{s(o).toHaveAccessibleErrorMessage("This is an error message"),s(l).toHaveTextContent("This is an error message")})}},O={args:{disabled:!0},play:async({canvas:t,step:n})=>{const o=t.getByTestId("input");await n("it should render the disabled input",async()=>{s(o).toHaveAttribute("disabled")})}},I={tags:["!autodocs"],parameters:{...r,viewport:{defaultViewport:"narrow-l"}},play:async({canvas:t})=>{t.getByRole("combobox").click()}},j={parameters:{...r,viewport:{defaultViewport:"narrow-l"},chromatic:{modes:{"narrow-l":{viewport:"narrow-l"},"medium-s":{viewport:"medium-s"},"medium-l":{viewport:"medium-l"}}}},render:function(n){const[o,l]=z.useState(!0),u=()=>l(!0),d=()=>l(!1);return e.jsxs(e.Fragment,{children:[e.jsx(Qe,{onClick:u,children:"Open"}),e.jsx(Ye,{title:"Dialog With Select",description:void 0,open:o,onClose:d,children:e.jsx(D,{...n})})]})},play:async({canvas:t})=>{const n=await t.findByRole("combobox");await c.click(n)}},B={parameters:r,args:{label:"Language with icons",placeholder:"Select a language...",children:e.jsxs(e.Fragment,{children:[e.jsx(a,{value:"english",leadingIcon:e.jsx(v,{svg:y}),children:"English"}),e.jsx(a,{value:"spanish",leadingIcon:e.jsx(v,{svg:y}),children:"Spanish"}),e.jsx(a,{value:"french",leadingIcon:e.jsx(v,{svg:y}),children:"French"})]})},play:async({canvas:t})=>{t.getByRole("combobox").click()}},T={parameters:r,args:{label:"Language with country flags",placeholder:"Select a language...",children:e.jsxs(e.Fragment,{children:[e.jsx(a,{value:"english",leadingIcon:e.jsx(i,{code:"gb",alt:"English",size:"medium"}),children:"English"}),e.jsx(a,{value:"spanish",leadingIcon:e.jsx(i,{code:"es",alt:"Spanish",size:"medium"}),children:"Spanish"}),e.jsx(a,{value:"french",leadingIcon:e.jsx(i,{code:"fr",alt:"French",size:"medium"}),children:"French"})]})},play:async({canvas:t})=>{t.getByRole("combobox").click()}},E={parameters:r,args:{label:"Languages by region",placeholder:"Select a language...",children:e.jsxs(e.Fragment,{children:[e.jsxs(b,{label:"European Languages",children:[e.jsx(a,{value:"english",children:"English"}),e.jsx(a,{value:"spanish",children:"Spanish"}),e.jsx(a,{value:"french",children:"French"}),e.jsx(a,{value:"german",children:"German"})]}),e.jsxs(b,{label:"Asian Languages",children:[e.jsx(a,{value:"mandarin",children:"Mandarin"}),e.jsx(a,{value:"japanese",children:"Japanese"}),e.jsx(a,{value:"korean",children:"Korean"}),e.jsx(a,{value:"hindi",children:"Hindi"})]})]})},play:async({canvas:t})=>{t.getByRole("combobox").click()}},C={parameters:r,args:{label:"Languages by region",placeholder:"Select a language...",children:e.jsxs(e.Fragment,{children:[e.jsxs(b,{label:"European Languages",children:[e.jsx(a,{value:"english",leadingIcon:e.jsx(i,{code:"gb",alt:"English",size:"medium"}),children:"English"}),e.jsx(a,{value:"spanish",leadingIcon:e.jsx(i,{code:"es",alt:"Spanish",size:"medium"}),children:"Spanish"}),e.jsx(a,{value:"french",leadingIcon:e.jsx(i,{code:"fr",alt:"French",size:"medium"}),children:"French"}),e.jsx(a,{value:"german",leadingIcon:e.jsx(i,{code:"de",alt:"German",size:"medium"}),children:"German"})]}),e.jsxs(b,{label:"Asian Languages",children:[e.jsx(a,{value:"mandarin",leadingIcon:e.jsx(i,{code:"cn",alt:"Mandarin",size:"medium"}),children:"Mandarin"}),e.jsx(a,{value:"japanese",leadingIcon:e.jsx(i,{code:"jp",alt:"Japanese",size:"medium"}),children:"Japanese"}),e.jsx(a,{value:"korean",leadingIcon:e.jsx(i,{code:"kr",alt:"Korean",size:"medium"}),children:"Korean"}),e.jsx(a,{value:"hindi",leadingIcon:e.jsx(i,{code:"in",alt:"Hindi",size:"medium"}),children:"Hindi"})]})]})},play:async({canvas:t})=>{t.getByRole("combobox").click()}},k={parameters:r,args:{label:"Select from many options",placeholder:"Choose a number...",children:e.jsx(e.Fragment,{children:Array.from({length:100},(t,n)=>e.jsxs(a,{value:String(n+1),children:["Option ",n+1]},n+1))})},play:async({canvas:t})=>{t.getByRole("combobox").click()}},H={parameters:r,args:{label:"Select from long options",placeholder:"Choose an option...",children:e.jsxs(e.Fragment,{children:[e.jsx(a,{value:"one",children:"Path unlocks frontend development"}),e.jsx(a,{value:"two",children:"Path unlocks rapid, high-quality frontend development"}),e.jsx(a,{value:"three",children:"Path unlocks rapid, high-quality frontend development and prototyping"})]})},play:async({canvas:t})=>{t.getByRole("combobox").click()}},L={parameters:r,decorators:[t=>e.jsx("div",{style:{width:"fit-content"},children:e.jsx(t,{})})],args:{label:"Options",placeholder:"Select an option...",defaultValue:"a",children:e.jsxs(e.Fragment,{children:[e.jsx(a,{value:"a",children:"A"}),e.jsx(a,{value:"b",children:"BCDEFGHIJKLMNOPQRSTUVWXYZ"})]})},play:async({canvas:t})=>{t.getByRole("combobox").click()}},m={render:function(){return z.useEffect(()=>(document.body.style.setProperty("--ds-select-z-index-override","20"),()=>{document.body.style.removeProperty("--ds-select-z-index-override")}),[]),e.jsxs(e.Fragment,{children:[e.jsxs(D,{label:"Language",placeholder:"Select a language..",children:[e.jsx(a,{value:"english",children:"English"}),e.jsx(a,{value:"spanish",children:"Spanish"}),e.jsx(a,{value:"french",children:"French"})]}),e.jsx("div",{style:{position:"fixed",zIndex:10,inset:"0",backgroundColor:"lightgray",pointerEvents:"none",opacity:.5}})]})},play:async({canvas:t})=>{t.getByRole("combobox").click()}},A={parameters:{chromatic:{disableSnapshot:!0}},args:{label:"Language",placeholder:"Select a subject",description:"We will use this to get a personalized choice of tutors",children:e.jsxs(e.Fragment,{children:[e.jsx(a,{value:"english",children:"English"}),e.jsx(a,{value:"spanish",children:"Spanish"}),e.jsx(a,{value:"french",children:"French"})]})},argTypes:{label:{control:"text"},placeholder:{control:"text"},description:{control:"text"},error:{control:"text"},value:{control:"text"},defaultValue:{control:"text"},inputDataset:{control:"object"},dataset:{control:"object"},id:{control:"text"},required:{control:"boolean"},hideLabel:{control:"boolean"},name:{control:"text"},disabled:{control:"boolean"},icon:{options:["None","With Icon"],mapping:{None:void 0,"With Icon":e.jsx(v,{svg:y,label:"Student with a hat"})},control:"select"},children:{control:!1},hasError:{table:{disable:!0}}}};var G,V,q,P,N;h.parameters={...h.parameters,docs:{...(G=h.parameters)==null?void 0:G.docs,source:{originalSource:`{
-  parameters: disableA11yFocus,
-  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('Language • Optional');
-      expect(input).toHaveAccessibleName('Language');
-    });
-    await step('it should call onFocus when the input is focused', async () => {
-      input.focus();
-      expect(args.onFocus).toHaveBeenCalled();
-    });
-    await step('it should open the menu', async () => {
-      await userEvent.keyboard('{Enter}');
-      await waitFor(async () => {
-        expect(await canvas.findByRole('listbox')).toBeInTheDocument();
-      });
-    });
-    await step('it should call callback when the value changes', async () => {
-      await userEvent.keyboard('{Enter}');
-      expect(args.onValueChange).toHaveBeenCalledWith('english');
-      expect(args.onBlur).toHaveBeenCalledTimes(1);
-    });
-    await step('it should call onBlur when the input is blurred', async () => {
-      await userEvent.keyboard('{tab}');
-      expect(args.onBlur).toHaveBeenCalledTimes(2);
-    });
-    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');
-    });
-    await step('it should render all options', async () => {
-      input.focus();
-      await userEvent.keyboard('{Enter}');
-      const englishOption = canvas.getByRole('option', {
-        name: 'English'
-      });
-      const spanishOption = canvas.getByRole('option', {
-        name: 'Spanish'
-      });
-      const frenchOption = canvas.getByRole('option', {
-        name: 'French'
-      });
-      expect(englishOption).toBeInTheDocument();
-      expect(spanishOption).toBeInTheDocument();
-      expect(frenchOption).toBeInTheDocument();
-    });
-  }
-}`,...(q=(V=h.parameters)==null?void 0:V.docs)==null?void 0:q.source},description:{story:"An empty field with a `label` and a `placeholder`.",...(N=(P=h.parameters)==null?void 0:P.docs)==null?void 0:N.description}}};var K,M,_,J,U;g.parameters={...g.parameters,docs:{...(K=g.parameters)==null?void 0:K.docs,source:{originalSource:`{
-  render: function ControlledSelectField(args) {
-    const [value, setValue] = useState(args.value);
-    return <SelectField {...args} value={value} onValueChange={setValue}>
-                <SelectFieldOption value="english">English</SelectFieldOption>
-                <SelectFieldOption value="spanish">Spanish</SelectFieldOption>
-                <SelectFieldOption value="french">French</SelectFieldOption>
-            </SelectField>;
-  },
-  args: {
-    label: 'Language',
-    placeholder: 'Select a language...',
-    value: 'spanish',
-    defaultValue: undefined
-  },
-  play: async ({
-    canvas,
-    step
-  }) => {
-    await step('it should render the correct initial value', async () => {
-      const input = canvas.getByTestId('input');
-      await expect(input).toHaveTextContent('Spanish');
-    });
-    await step('it should update the value when the user selects', async () => {
-      const input = canvas.getByTestId('input');
-      input.focus();
-      await userEvent.keyboard('{Enter}');
-      await userEvent.keyboard('{ArrowDown}');
-      await userEvent.keyboard('{Enter}');
-      expect(input).toHaveTextContent('French');
-    });
-  }
-}`,...(_=(M=g.parameters)==null?void 0:M.docs)==null?void 0:_.source},description:{story:"A controlled component where the value is managed by React state.",...(U=(J=g.parameters)==null?void 0:J.docs)==null?void 0:U.description}}};var Z,Y,Q;S.parameters={...S.parameters,docs:{...(Z=S.parameters)==null?void 0:Z.docs,source:{originalSource:`{
-  args: {
-    icon: <Icon svg={LanguageSvg} dataset={{
-      testid: 'icon'
-    }} />
-  },
-  play: async ({
-    canvas,
-    step
-  }) => {
-    await step('it should render the icon', async () => {
-      const icon = canvas.getByTestId('icon');
-      expect(icon).toBeInTheDocument();
-    });
-  }
-}`,...(Q=(Y=S.parameters)==null?void 0:Y.docs)==null?void 0:Q.source}}};var X,$,ee;x.parameters={...x.parameters,docs:{...(X=x.parameters)==null?void 0:X.docs,source:{originalSource:`{
-  args: {
-    description: 'We will use this to get a personalized choice of tutors'
-  },
-  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('We will use this to get a personalized choice of tutors');
-      expect(description).toHaveTextContent('We will use this to get a personalized choice of tutors');
-    });
-  }
-}`,...(ee=($=x.parameters)==null?void 0:$.docs)==null?void 0:ee.source}}};var te,ne,ae;F.parameters={...F.parameters,docs:{...(te=F.parameters)==null?void 0:te.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('Language');
-      expect(label).toHaveTextContent('Language');
-    });
-    await step('it should render required attribute', async () => {
-      expect(input).toHaveAttribute('aria-required');
-    });
-  }
-}`,...(ae=(ne=F.parameters)==null?void 0:ne.docs)==null?void 0:ae.source}}};var oe,se,le;f.parameters={...f.parameters,docs:{...(oe=f.parameters)==null?void 0:oe.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('Language');
-    });
-  }
-}`,...(le=(se=f.parameters)==null?void 0:se.docs)==null?void 0:le.source}}};var ie,re,ce;w.parameters={...w.parameters,docs:{...(ie=w.parameters)==null?void 0:ie.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');
-    });
-  }
-}`,...(ce=(re=w.parameters)==null?void 0:re.docs)==null?void 0:ce.source}}};var de,pe,ue;O.parameters={...O.parameters,docs:{...(de=O.parameters)==null?void 0:de.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');
-    });
-  }
-}`,...(ue=(pe=O.parameters)==null?void 0:pe.docs)==null?void 0:ue.source}}};var he,ge,me;I.parameters={...I.parameters,docs:{...(he=I.parameters)==null?void 0:he.docs,source:{originalSource:`{
-  tags: ['!autodocs'],
-  parameters: {
-    ...disableA11yFocus,
-    viewport: {
-      defaultViewport: 'narrow-l'
-    }
-  },
-  play: async ({
-    canvas
-  }) => {
-    const select = canvas.getByRole('combobox');
-    select.click();
-  }
-}`,...(me=(ge=I.parameters)==null?void 0:ge.docs)==null?void 0:me.source}}};var ye,ve,be;j.parameters={...j.parameters,docs:{...(ye=j.parameters)==null?void 0:ye.docs,source:{originalSource:`{
-  parameters: {
-    ...disableA11yFocus,
-    viewport: {
-      defaultViewport: 'narrow-l'
-    },
-    chromatic: {
-      modes: {
-        'narrow-l': {
-          viewport: 'narrow-l'
-        },
-        'medium-s': {
-          viewport: 'medium-s'
-        },
-        'medium-l': {
-          viewport: 'medium-l'
-        }
-      }
-    }
-  },
-  render: function Story(args) {
-    const [isDialogOpen, setIsDialogOpen] = useState(true);
-    const openDialog = () => setIsDialogOpen(true);
-    const closeDialog = () => setIsDialogOpen(false);
-    return <>
-                <Button onClick={openDialog}>Open</Button>
-                <Dialog title="Dialog With Select" description={undefined} open={isDialogOpen} onClose={closeDialog}>
-                    <SelectField {...args} />
-                </Dialog>
-            </>;
-  },
-  play: async ({
-    canvas
-  }) => {
-    const select = await canvas.findByRole('combobox');
-    await userEvent.click(select);
-  }
-}`,...(be=(ve=j.parameters)==null?void 0:ve.docs)==null?void 0:be.source}}};var Se,xe,Fe;B.parameters={...B.parameters,docs:{...(Se=B.parameters)==null?void 0:Se.docs,source:{originalSource:`{
-  parameters: disableA11yFocus,
-  args: {
-    label: 'Language with icons',
-    placeholder: 'Select a language...',
-    children: <>
-                <SelectFieldOption value="english" leadingIcon={<Icon svg={LanguageSvg} />}>
-                    English
-                </SelectFieldOption>
-                <SelectFieldOption value="spanish" leadingIcon={<Icon svg={LanguageSvg} />}>
-                    Spanish
-                </SelectFieldOption>
-                <SelectFieldOption value="french" leadingIcon={<Icon svg={LanguageSvg} />}>
-                    French
-                </SelectFieldOption>
-            </>
-  },
-  play: async ({
-    canvas
-  }) => {
-    const select = canvas.getByRole('combobox');
-    select.click();
-  }
-}`,...(Fe=(xe=B.parameters)==null?void 0:xe.docs)==null?void 0:Fe.source}}};var fe,we,Oe;T.parameters={...T.parameters,docs:{...(fe=T.parameters)==null?void 0:fe.docs,source:{originalSource:`{
-  parameters: disableA11yFocus,
-  args: {
-    label: 'Language with country flags',
-    placeholder: 'Select a language...',
-    children: <>
-                <SelectFieldOption value="english" leadingIcon={<CountryFlag code="gb" alt="English" size="medium" />}>
-                    English
-                </SelectFieldOption>
-                <SelectFieldOption value="spanish" leadingIcon={<CountryFlag code="es" alt="Spanish" size="medium" />}>
-                    Spanish
-                </SelectFieldOption>
-                <SelectFieldOption value="french" leadingIcon={<CountryFlag code="fr" alt="French" size="medium" />}>
-                    French
-                </SelectFieldOption>
-            </>
-  },
-  play: async ({
-    canvas
-  }) => {
-    const select = canvas.getByRole('combobox');
-    select.click();
-  }
-}`,...(Oe=(we=T.parameters)==null?void 0:we.docs)==null?void 0:Oe.source}}};var Ie,je,Be;E.parameters={...E.parameters,docs:{...(Ie=E.parameters)==null?void 0:Ie.docs,source:{originalSource:`{
-  parameters: disableA11yFocus,
-  args: {
-    label: 'Languages by region',
-    placeholder: 'Select a language...',
-    children: <>
-                <SelectFieldGroup label="European Languages">
-                    <SelectFieldOption value="english">English</SelectFieldOption>
-                    <SelectFieldOption value="spanish">Spanish</SelectFieldOption>
-                    <SelectFieldOption value="french">French</SelectFieldOption>
-                    <SelectFieldOption value="german">German</SelectFieldOption>
-                </SelectFieldGroup>
-                <SelectFieldGroup label="Asian Languages">
-                    <SelectFieldOption value="mandarin">Mandarin</SelectFieldOption>
-                    <SelectFieldOption value="japanese">Japanese</SelectFieldOption>
-                    <SelectFieldOption value="korean">Korean</SelectFieldOption>
-                    <SelectFieldOption value="hindi">Hindi</SelectFieldOption>
-                </SelectFieldGroup>
-            </>
-  },
-  play: async ({
-    canvas
-  }) => {
-    const select = canvas.getByRole('combobox');
-    select.click();
-  }
-}`,...(Be=(je=E.parameters)==null?void 0:je.docs)==null?void 0:Be.source}}};var Te,Ee,Ce;C.parameters={...C.parameters,docs:{...(Te=C.parameters)==null?void 0:Te.docs,source:{originalSource:`{
-  parameters: disableA11yFocus,
-  args: {
-    label: 'Languages by region',
-    placeholder: 'Select a language...',
-    children: <>
-                <SelectFieldGroup label="European Languages">
-                    <SelectFieldOption value="english" leadingIcon={<CountryFlag code="gb" alt="English" size="medium" />}>
-                        English
-                    </SelectFieldOption>
-                    <SelectFieldOption value="spanish" leadingIcon={<CountryFlag code="es" alt="Spanish" size="medium" />}>
-                        Spanish
-                    </SelectFieldOption>
-                    <SelectFieldOption value="french" leadingIcon={<CountryFlag code="fr" alt="French" size="medium" />}>
-                        French
-                    </SelectFieldOption>
-                    <SelectFieldOption value="german" leadingIcon={<CountryFlag code="de" alt="German" size="medium" />}>
-                        German
-                    </SelectFieldOption>
-                </SelectFieldGroup>
-                <SelectFieldGroup label="Asian Languages">
-                    <SelectFieldOption value="mandarin" leadingIcon={<CountryFlag code="cn" alt="Mandarin" size="medium" />}>
-                        Mandarin
-                    </SelectFieldOption>
-                    <SelectFieldOption value="japanese" leadingIcon={<CountryFlag code="jp" alt="Japanese" size="medium" />}>
-                        Japanese
-                    </SelectFieldOption>
-                    <SelectFieldOption value="korean" leadingIcon={<CountryFlag code="kr" alt="Korean" size="medium" />}>
-                        Korean
-                    </SelectFieldOption>
-                    <SelectFieldOption value="hindi" leadingIcon={<CountryFlag code="in" alt="Hindi" size="medium" />}>
-                        Hindi
-                    </SelectFieldOption>
-                </SelectFieldGroup>
-            </>
-  },
-  play: async ({
-    canvas
-  }) => {
-    const select = canvas.getByRole('combobox');
-    select.click();
-  }
-}`,...(Ce=(Ee=C.parameters)==null?void 0:Ee.docs)==null?void 0:Ce.source}}};var ke,He,Le;k.parameters={...k.parameters,docs:{...(ke=k.parameters)==null?void 0:ke.docs,source:{originalSource:`{
-  parameters: disableA11yFocus,
-  args: {
-    label: 'Select from many options',
-    placeholder: 'Choose a number...',
-    children: <>
-                {Array.from({
-        length: 100
-      }, (_, i) => <SelectFieldOption key={i + 1} value={String(i + 1)}>
-                        Option {i + 1}
-                    </SelectFieldOption>)}
-            </>
-  },
-  play: async ({
-    canvas
-  }) => {
-    const select = canvas.getByRole('combobox');
-    select.click();
-  }
-}`,...(Le=(He=k.parameters)==null?void 0:He.docs)==null?void 0:Le.source}}};var Ae,De,We;H.parameters={...H.parameters,docs:{...(Ae=H.parameters)==null?void 0:Ae.docs,source:{originalSource:`{
-  parameters: disableA11yFocus,
-  args: {
-    label: 'Select from long options',
-    placeholder: 'Choose an option...',
-    children: <>
-                <SelectFieldOption value="one">Path unlocks frontend development</SelectFieldOption>
-                <SelectFieldOption value="two">
-                    Path unlocks rapid, high-quality frontend development
-                </SelectFieldOption>
-                <SelectFieldOption value="three">
-                    Path unlocks rapid, high-quality frontend development and prototyping
-                </SelectFieldOption>
-            </>
-  },
-  play: async ({
-    canvas
-  }) => {
-    const select = canvas.getByRole('combobox');
-    select.click();
-  }
-}`,...(We=(De=H.parameters)==null?void 0:De.docs)==null?void 0:We.source}}};var ze,Re,Ge;L.parameters={...L.parameters,docs:{...(ze=L.parameters)==null?void 0:ze.docs,source:{originalSource:`{
-  parameters: disableA11yFocus,
-  decorators: [Story => <div style={{
-    width: 'fit-content'
-  }}>
-                <Story />
-            </div>],
-  args: {
-    label: 'Options',
-    placeholder: 'Select an option...',
-    defaultValue: 'a',
-    children: <>
-                <SelectFieldOption value="a">A</SelectFieldOption>
-                <SelectFieldOption value="b">BCDEFGHIJKLMNOPQRSTUVWXYZ</SelectFieldOption>
-            </>
-  },
-  play: async ({
-    canvas
-  }) => {
-    const select = canvas.getByRole('combobox');
-    select.click();
-  }
-}`,...(Ge=(Re=L.parameters)==null?void 0:Re.docs)==null?void 0:Ge.source}}};var Ve,qe,Pe,Ne,Ke;m.parameters={...m.parameters,docs:{...(Ve=m.parameters)==null?void 0:Ve.docs,source:{originalSource:`{
-  render: function Story() {
-    useEffect(() => {
-      document.body.style.setProperty('--ds-select-z-index-override', '20');
-      return () => {
-        document.body.style.removeProperty('--ds-select-z-index-override');
-      };
-    }, []);
-    return <>
-                <SelectField label="Language" placeholder="Select a language..">
-                    <SelectFieldOption value="english">English</SelectFieldOption>
-                    <SelectFieldOption value="spanish">Spanish</SelectFieldOption>
-                    <SelectFieldOption value="french">French</SelectFieldOption>
-                </SelectField>
-                <div style={{
-        position: 'fixed',
-        zIndex: 10,
-        inset: '0',
-        backgroundColor: 'lightgray',
-        pointerEvents: 'none',
-        opacity: 0.5
-      }} />
-            </>;
-  },
-  play: async ({
-    canvas
-  }) => {
-    const select = canvas.getByRole('combobox');
-    select.click();
-  }
-}`,...(Pe=(qe=m.parameters)==null?void 0:qe.docs)==null?void 0:Pe.source},description:{story:`The SelectField component provides a CSS property escape hatch for controlling the z-index of the content element: \\\`--ds-select-z-index-override\\\`.
-
-This should only be used when necessary, as proper stacking context isolation is preferred.
-
-In the following example, an overlay is placed on top of the Select, but the
-stacking order is reveresed using the above CSS property.
-
-Note: This is done using a \\\`useEffect\\\` just for the sake of the story. In a real-world scenario, this should ideally be done in a global stylesheet or a theme provider.`,...(Ke=(Ne=m.parameters)==null?void 0:Ne.docs)==null?void 0:Ke.description}}};var Me,_e,Je;A.parameters={...A.parameters,docs:{...(Me=A.parameters)==null?void 0:Me.docs,source:{originalSource:`{
-  parameters: {
-    chromatic: {
-      disableSnapshot: true
-    }
-  },
-  args: {
-    label: 'Language',
-    placeholder: 'Select a subject',
-    description: 'We will use this to get a personalized choice of tutors',
-    children: <>
-                <SelectFieldOption value="english">English</SelectFieldOption>
-                <SelectFieldOption value="spanish">Spanish</SelectFieldOption>
-                <SelectFieldOption value="french">French</SelectFieldOption>
-            </>
-  },
-  argTypes: {
-    label: {
-      control: 'text'
-    },
-    placeholder: {
-      control: 'text'
-    },
-    description: {
-      control: 'text'
-    },
-    error: {
-      control: 'text'
-    },
-    value: {
-      control: 'text'
-    },
-    defaultValue: {
-      control: 'text'
-    },
-    inputDataset: {
-      control: 'object'
-    },
-    dataset: {
-      control: 'object'
-    },
-    id: {
-      control: 'text'
-    },
-    required: {
-      control: 'boolean'
-    },
-    hideLabel: {
-      control: 'boolean'
-    },
-    name: {
-      control: 'text'
-    },
-    disabled: {
-      control: 'boolean'
-    },
-    icon: {
-      options: ['None', 'With Icon'],
-      mapping: {
-        None: undefined,
-        'With Icon': <Icon svg={LanguageSvg} label="Student with a hat" />
-      },
-      control: 'select'
-    },
-    children: {
-      control: false
-    },
-    // Disable deprecated props
-    hasError: {
-      table: {
-        disable: true
-      }
-    }
-  }
-}`,...(Je=(_e=A.parameters)==null?void 0:_e.docs)==null?void 0:Je.source}}};const kt=["Basic","Controlled","WithIcon","WithDescription","Required","WithHiddenLabel","WithError","Disabled","ResponsiveBottomSheet","InDialog","WithOptionIcons","WithOptionCountryFlags","WithOptionGroups","WithOptionGroupsAndIcons","WithOverflowingContent","WithOverflowingLabels","WithShortOptionSelected","WithZIndexOverride","Playground"];export{h as Basic,g as Controlled,O as Disabled,j as InDialog,A as Playground,F as Required,I as ResponsiveBottomSheet,x as WithDescription,w as WithError,f as WithHiddenLabel,S as WithIcon,T as WithOptionCountryFlags,E as WithOptionGroups,C as WithOptionGroupsAndIcons,B as WithOptionIcons,k as WithOverflowingContent,H as WithOverflowingLabels,L as WithShortOptionSelected,m as WithZIndexOverride,kt as __namedExportsOrder,Ct as default};

package/dist/assets/ShowOnIntersection.stories-BdO_3n9P.js

@@ -1,17 +0,0 @@
-import{r as o,j as t}from"./iframe-B_74HtSc.js";import{O as f}from"./ObserveIntersection-Dx2gD1CU.js";import"./preload-helper-Dp1pzeXC.js";import"./componentNames-hc9KR2nX.js";const a=({onIntersect:e,once:u,threshold:c,tag:d,dataset:p,children:v})=>{const[l,h]=o.useState(!1),m=o.useCallback(()=>{l||h(!0),e==null||e()},[l,e]);return t.jsx(f,{onIntersect:m,once:e?u:!0,threshold:c,tag:d,dataset:p,children:l&&v})};try{a.displayName="ShowOnIntersection",a.__docgenInfo={description:"Only renders the wrapped components once it intersects with the viewport.\n\nNote that elements will not be detached from the DOM if the component is\nscrolled out of view again.\n\nYou can use `React.lazy` to lazy-load the wrapped components.\n\nAdditionally, an `onIntersect` callback can be provided. As with\n`ObserveIntersection`, this callback will be called every time the component\nintersects with the viewport, or only the first time if `once` is set to\n`true`.",displayName:"ShowOnIntersection",props:{onIntersect:{defaultValue:null,description:"",name:"onIntersect",required:!1,type:{name:"enum",value:[{value:"() => 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{}const b={title:"components/ShowOnIntersection",component:a,parameters:{tags:["!test"],chromatic:{disableSnapshot:!0}}},n=()=>t.jsx("div",{style:{height:"200px",overflowY:"scroll",position:"relative"},children:t.jsx("div",{style:{height:"400px",display:"flex",alignItems:"end"},children:t.jsx(a,{children:t.jsx("p",{children:"Intersected"})})})});n.storyName="ShowOnIntersection";var r,s,i;n.parameters={...n.parameters,docs:{...(r=n.parameters)==null?void 0:r.docs,source:{originalSource:`() => {
-  return <div style={{
-    height: '200px',
-    overflowY: 'scroll',
-    position: 'relative'
-  }}>
-            <div style={{
-      height: '400px',
-      display: 'flex',
-      alignItems: 'end'
-    }}>
-                <ShowOnIntersection>
-                    <p>Intersected</p>
-                </ShowOnIntersection>
-            </div>
-        </div>;
-}`,...(i=(s=n.parameters)==null?void 0:s.docs)==null?void 0:i.source}}};const O=["Base"];export{n as Base,O as __namedExportsOrder,b as default};

package/dist/assets/SingleSelectChips-CDtny-H7.js

@@ -1,2 +0,0 @@
-import{r as b,j as e,g as y}from"./iframe-B_74HtSc.js";import{u as w}from"./useControllableState-BB4EHwEp.js";import{c as x,C as j,a as R,b as I,d as _,D as z,e as E}from"./createRequiredContext-B3Arn9-D.js";import{f as C}from"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import{w as S}from"./componentNames-hc9KR2nX.js";const[N,L]=x("SingleSelectChips"),h=b.forwardRef(function({items:a,children:n,orientation:l=z,"aria-label":t,"aria-controls":i,value:r,onValueChange:s,defaultValue:o,dataset:c,...m},d){const[p,u]=w({value:r,onValueChange:s,defaultValue:o??null}),V=a?a.map(({label:k,value:g,...q})=>e.jsx(f,{value:g,...q,children:k},g)):n;return e.jsx(N,{value:{value:p,onValueChange:u},children:e.jsx(_,{orientation:l,children:e.jsx(E,{...C(m),ref:d,orientation:l,"aria-orientation":l,"aria-label":t,"aria-controls":i,role:"listbox","aria-multiselectable":"false",...y(c,{preplyDsComponent:S.SingleSelectChips}),children:V})})})}),f=b.forwardRef(function({value:a,children:n,icon:l,countryFlagCode:t,disabled:i,counter:r,dataset:s,dsInternalSimulation:o,...c},m){const{value:d,onValueChange:p}=L(),u=d===a;return e.jsx(j,{role:"presentation",children:e.jsx(R,{...C(c),ref:m,role:"option","aria-selected":u,onClick:()=>p(u?null:a),icon:l,countryFlagCode:t,disabled:i,dsInternalSimulation:o,...y(s,{preplyDsComponent:S.SingleSelectChipsItem}),children:e.jsx(I,{counter:r,children:n})})})});try{h.displayName="SingleSelectChips",h.__docgenInfo={description:`A chips component that allows selection of a single option from a group.
-Users can select one chip at a time, and clicking a selected chip will deselect it.`,displayName:"SingleSelectChips",props:{dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}},"aria-label":{defaultValue:null,description:"Accessible label for the chips group. Required for screen reader users",name:"aria-label",required:!0,type:{name:"string"}},defaultValue:{defaultValue:null,description:"Default value for uncontrolled usage. Will be ignored if `value` is provided",name:"defaultValue",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"}]}},"aria-controls":{defaultValue:null,description:"If the chips control other elements on the page, use `aria-controls` with the target element's ID.",name:"aria-controls",required:!1,type:{name:"enum",value:[{value:"string"}]}},onValueChange:{defaultValue:null,description:"Callback fired when the value changes. Receives the new value as an argument",name:"onValueChange",required:!1,type:{name:"enum",value:[{value:"(value: T | null) => void"}]}},value:{defaultValue:null,description:"Current value of the chips. When provided, the component operates in controlled mode",name:"value",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"}]}},orientation:{defaultValue:{value:"'horizontal'"},description:"Layout orientation of the chips group.",name:"orientation",required:!1,type:{name:"enum",value:[{value:'"horizontal"'},{value:'"vertical"'}]}},items:{defaultValue:null,description:"",name:"items",required:!1,type:{name:"enum",value:[{value:'(Omit<ChipsItemProps, "children" | "dsInternalSimulation" | "value"> & { value: T extends unknown[] ? NonNullable<T[number]> : NonNullable<T>; label: ReactNode; })[]'}]}},ref:{defaultValue:null,description:"",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"(instance: HTMLUListElement | null) => void"},{value:"RefObject<HTMLUListElement>"}]}}}}}catch{}try{f.displayName="SingleSelectChipsItem",f.__docgenInfo={description:"Individual chip item for use within SingleSelectChips.",displayName:"SingleSelectChipsItem",props:{disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},icon:{defaultValue:null,description:"",name:"icon",required:!1,type:{name:"enum",value:[{value:"ComponentClass<SVGAttributes<SVGElement>, any>"},{value:"FunctionComponent<SVGAttributes<SVGElement>>"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},countryFlagCode:{defaultValue:null,description:"",name:"countryFlagCode",required:!1,type:{name:"enum",value:[{value:'"li"'},{value:'"th"'},{value:'"tr"'},{value:'"td"'},{value:'"id"'},{value:'"ai"'},{value:'"as"'},{value:'"br"'},{value:'"hr"'},{value:'"is"'},{value:'"at"'},{value:'"af"'},{value:'"ax"'},{value:'"al"'},{value:'"dz"'},{value:'"ad"'},{value:'"ao"'},{value:'"aq"'},{value:'"ag"'},{value:'"ar"'},{value:'"am"'},{value:'"aw"'},{value:'"sh-ac"'},{value:'"asean"'},{value:'"au"'},{value:'"az"'},{value:'"bs"'},{value:'"bh"'},{value:'"bd"'},{value:'"bb"'},{value:'"es-pv"'},{value:'"by"'},{value:'"be"'},{value:'"bz"'},{value:'"bj"'},{value:'"bm"'},{value:'"bt"'},{value:'"bo"'},{value:'"bq"'},{value:'"ba"'},{value:'"bw"'},{value:'"bv"'},{value:'"io"'},{value:'"bn"'},{value:'"bg"'},{value:'"bf"'},{value:'"bi"'},{value:'"cv"'},{value:'"kh"'},{value:'"cm"'},{value:'"ca"'},{value:'"ic"'},{value:'"es-ct"'},{value:'"ky"'},{value:'"cf"'},{value:'"cefta"'},{value:'"cl"'},{value:'"cn"'},{value:'"cx"'},{value:'"cp"'},{value:'"cc"'},{value:'"co"'},{value:'"km"'},{value:'"ck"'},{value:'"cr"'},{value:'"cu"'},{value:'"cw"'},{value:'"cy"'},{value:'"cz"'},{value:'"ci"'},{value:'"cd"'},{value:'"dk"'},{value:'"dg"'},{value:'"dj"'},{value:'"dm"'},{value:'"do"'},{value:'"eac"'},{value:'"ec"'},{value:'"eg"'},{value:'"sv"'},{value:'"gb-eng"'},{value:'"gq"'},{value:'"er"'},{value:'"ee"'},{value:'"sz"'},{value:'"et"'},{value:'"eu"'},{value:'"fk"'},{value:'"fo"'},{value:'"fm"'},{value:'"fj"'},{value:'"fi"'},{value:'"fr"'},{value:'"gf"'},{value:'"pf"'},{value:'"tf"'},{value:'"ga"'},{value:'"es-ga"'},{value:'"gm"'},{value:'"ge"'},{value:'"de"'},{value:'"gh"'},{value:'"gi"'},{value:'"gr"'},{value:'"gl"'},{value:'"gd"'},{value:'"gp"'},{value:'"gu"'},{value:'"gt"'},{value:'"gg"'},{value:'"gn"'},{value:'"gw"'},{value:'"gy"'},{value:'"ht"'},{value:'"hm"'},{value:'"va"'},{value:'"hn"'},{value:'"hk"'},{value:'"hu"'},{value:'"in"'},{value:'"ir"'},{value:'"iq"'},{value:'"ie"'},{value:'"im"'},{value:'"il"'},{value:'"it"'},{value:'"jm"'},{value:'"jp"'},{value:'"je"'},{value:'"jo"'},{value:'"kz"'},{value:'"ke"'},{value:'"ki"'},{value:'"xk"'},{value:'"kw"'},{value:'"kg"'},{value:'"la"'},{value:'"lv"'},{value:'"arab"'},{value:'"lb"'},{value:'"ls"'},{value:'"lr"'},{value:'"ly"'},{value:'"lt"'},{value:'"lu"'},{value:'"mo"'},{value:'"mg"'},{value:'"mw"'},{value:'"my"'},{value:'"mv"'},{value:'"ml"'},{value:'"mt"'},{value:'"mh"'},{value:'"mq"'},{value:'"mr"'},{value:'"mu"'},{value:'"yt"'},{value:'"mx"'},{value:'"md"'},{value:'"mc"'},{value:'"mn"'},{value:'"me"'},{value:'"ms"'},{value:'"ma"'},{value:'"mz"'},{value:'"mm"'},{value:'"na"'},{value:'"nr"'},{value:'"np"'},{value:'"nl"'},{value:'"nc"'},{value:'"nz"'},{value:'"ni"'},{value:'"ne"'},{value:'"ng"'},{value:'"nu"'},{value:'"nf"'},{value:'"kp"'},{value:'"mk"'},{value:'"gb-nir"'},{value:'"mp"'},{value:'"no"'},{value:'"om"'},{value:'"pc"'},{value:'"pk"'},{value:'"pw"'},{value:'"pa"'},{value:'"pg"'},{value:'"py"'},{value:'"pe"'},{value:'"ph"'},{value:'"pn"'},{value:'"pl"'},{value:'"pt"'},{value:'"pr"'},{value:'"qa"'},{value:'"cg"'},{value:'"ro"'},{value:'"ru"'},{value:'"rw"'},{value:'"re"'},{value:'"bl"'},{value:'"sh-hl"'},{value:'"sh"'},{value:'"kn"'},{value:'"lc"'},{value:'"mf"'},{value:'"pm"'},{value:'"vc"'},{value:'"ws"'},{value:'"sm"'},{value:'"st"'},{value:'"sa"'},{value:'"gb-sct"'},{value:'"sn"'},{value:'"rs"'},{value:'"sc"'},{value:'"sl"'},{value:'"sg"'},{value:'"sx"'},{value:'"sk"'},{value:'"si"'},{value:'"sb"'},{value:'"so"'},{value:'"za"'},{value:'"gs"'},{value:'"kr"'},{value:'"ss"'},{value:'"es"'},{value:'"lk"'},{value:'"ps"'},{value:'"sd"'},{value:'"sr"'},{value:'"sj"'},{value:'"se"'},{value:'"ch"'},{value:'"sy"'},{value:'"tw"'},{value:'"tj"'},{value:'"tz"'},{value:'"tl"'},{value:'"tg"'},{value:'"tk"'},{value:'"to"'},{value:'"tt"'},{value:'"sh-ta"'},{value:'"tn"'},{value:'"tm"'},{value:'"tc"'},{value:'"tv"'},{value:'"ug"'},{value:'"ua"'},{value:'"ae"'},{value:'"gb"'},{value:'"un"'},{value:'"um"'},{value:'"us"'},{value:'"uy"'},{value:'"uz"'},{value:'"vu"'},{value:'"ve"'},{value:'"vn"'},{value:'"vg"'},{value:'"vi"'},{value:'"gb-wls"'},{value:'"wf"'},{value:'"eh"'},{value:'"ye"'},{value:'"zm"'},{value:'"zw"'}]}},value:{defaultValue:null,description:"Unique identifier for this chip. Used for selection tracking",name:"value",required:!0,type:{name:"string"}},children:{defaultValue:null,description:"Content to display inside the chip",name:"children",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"}]}},counter:{defaultValue:null,description:"Optional numeric counter to display alongside the chip label",name:"counter",required:!1,type:{name:"enum",value:[{value:"number"}]}},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{f as S,h as a};

package/dist/assets/Slider-B8ndK7PX.js

@@ -1,2 +0,0 @@
-import{r as d,a8 as de,j as m,aa as me,ag as E,af as A,ai as C,aq as fe,g as pe}from"./iframe-B_74HtSc.js";import{w as he}from"./componentNames-hc9KR2nX.js";import{c as ve,u as ge,a as W,b as be}from"./index-Cnv20V_M.js";var X=["PageUp","PageDown"],G=["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"],J={"from-left":["Home","PageDown","ArrowDown","ArrowLeft"],"from-right":["Home","PageDown","ArrowDown","ArrowRight"],"from-bottom":["Home","PageDown","ArrowDown","ArrowLeft"],"from-top":["Home","PageDown","ArrowUp","ArrowLeft"]},T="Slider",[H,Se,ye]=ve(T),[Q]=me(T,[ye]),[we,N]=Q(T),Z=d.forwardRef((e,t)=>{const{name:n,min:r=0,max:s=100,step:l=1,orientation:a="horizontal",disabled:i=!1,minStepsBetweenThumbs:u=0,defaultValue:p=[r],value:h,onValueChange:o=()=>{},onValueCommit:c=()=>{},inverted:S=!1,form:x,...b}=e,v=d.useRef(new Set),f=d.useRef(0),y=a==="horizontal"?xe:_e,[g=[],I]=de({prop:h,defaultProp:p,onChange:w=>{var V;(V=[...v.current][f.current])==null||V.focus(),o(w)}}),B=d.useRef(g);function K(w){const _=Ee(g,w);M(w,_)}function ue(w){M(w,f.current)}function ce(){const w=B.current[f.current];g[f.current]!==w&&c(g)}function M(w,_,{commit:V}={commit:!1}){const F=Me(l),q=je(Math.round((w-r)/l)*l+r,F),j=W(q,[r,s]);I((D=[])=>{const R=Ve(D,j,_);if(Ie(R,u*l)){f.current=R.indexOf(j);const Y=String(R)!==String(D);return Y&&V&&c(R),Y?R:D}else return D})}return m.jsx(we,{scope:e.__scopeSlider,name:n,disabled:i,min:r,max:s,valueIndexToChangeRef:f,thumbs:v.current,values:g,orientation:a,form:x,children:m.jsx(H.Provider,{scope:e.__scopeSlider,children:m.jsx(H.Slot,{scope:e.__scopeSlider,children:m.jsx(y,{"aria-disabled":i,"data-disabled":i?"":void 0,...b,ref:t,onPointerDown:E(b.onPointerDown,()=>{i||(B.current=g)}),min:r,max:s,inverted:S,onSlideStart:i?void 0:K,onSlideMove:i?void 0:ue,onSlideEnd:i?void 0:ce,onHomeKeyDown:()=>!i&&M(r,0,{commit:!0}),onEndKeyDown:()=>!i&&M(s,g.length-1,{commit:!0}),onStepKeyDown:({event:w,direction:_})=>{if(!i){const q=X.includes(w.key)||w.shiftKey&&G.includes(w.key)?10:1,j=f.current,D=g[j],R=l*q*_;M(D+R,j,{commit:!0})}}})})})})});Z.displayName=T;var[ee,te]=Q(T,{startEdge:"left",endEdge:"right",size:"width",direction:1}),xe=d.forwardRef((e,t)=>{const{min:n,max:r,dir:s,inverted:l,onSlideStart:a,onSlideMove:i,onSlideEnd:u,onStepKeyDown:p,...h}=e,[o,c]=d.useState(null),S=C(t,y=>c(y)),x=d.useRef(void 0),b=ge(s),v=b==="ltr",f=v&&!l||!v&&l;function P(y){const g=x.current||o.getBoundingClientRect(),I=[0,g.width],K=U(I,f?[n,r]:[r,n]);return x.current=g,K(y-g.left)}return m.jsx(ee,{scope:e.__scopeSlider,startEdge:f?"left":"right",endEdge:f?"right":"left",direction:f?1:-1,size:"width",children:m.jsx(ne,{dir:b,"data-orientation":"horizontal",...h,ref:S,style:{...h.style,"--radix-slider-thumb-transform":"translateX(-50%)"},onSlideStart:y=>{const g=P(y.clientX);a==null||a(g)},onSlideMove:y=>{const g=P(y.clientX);i==null||i(g)},onSlideEnd:()=>{x.current=void 0,u==null||u()},onStepKeyDown:y=>{const I=J[f?"from-left":"from-right"].includes(y.key);p==null||p({event:y,direction:I?-1:1})}})})}),_e=d.forwardRef((e,t)=>{const{min:n,max:r,inverted:s,onSlideStart:l,onSlideMove:a,onSlideEnd:i,onStepKeyDown:u,...p}=e,h=d.useRef(null),o=C(t,h),c=d.useRef(void 0),S=!s;function x(b){const v=c.current||h.current.getBoundingClientRect(),f=[0,v.height],y=U(f,S?[r,n]:[n,r]);return c.current=v,y(b-v.top)}return m.jsx(ee,{scope:e.__scopeSlider,startEdge:S?"bottom":"top",endEdge:S?"top":"bottom",size:"height",direction:S?1:-1,children:m.jsx(ne,{"data-orientation":"vertical",...p,ref:o,style:{...p.style,"--radix-slider-thumb-transform":"translateY(50%)"},onSlideStart:b=>{const v=x(b.clientY);l==null||l(v)},onSlideMove:b=>{const v=x(b.clientY);a==null||a(v)},onSlideEnd:()=>{c.current=void 0,i==null||i()},onStepKeyDown:b=>{const f=J[S?"from-bottom":"from-top"].includes(b.key);u==null||u({event:b,direction:f?-1:1})}})})}),ne=d.forwardRef((e,t)=>{const{__scopeSlider:n,onSlideStart:r,onSlideMove:s,onSlideEnd:l,onHomeKeyDown:a,onEndKeyDown:i,onStepKeyDown:u,...p}=e,h=N(T,n);return m.jsx(A.span,{...p,ref:t,onKeyDown:E(e.onKeyDown,o=>{o.key==="Home"?(a(o),o.preventDefault()):o.key==="End"?(i(o),o.preventDefault()):X.concat(G).includes(o.key)&&(u(o),o.preventDefault())}),onPointerDown:E(e.onPointerDown,o=>{const c=o.target;c.setPointerCapture(o.pointerId),o.preventDefault(),h.thumbs.has(c)?c.focus():r(o)}),onPointerMove:E(e.onPointerMove,o=>{o.target.hasPointerCapture(o.pointerId)&&s(o)}),onPointerUp:E(e.onPointerUp,o=>{const c=o.target;c.hasPointerCapture(o.pointerId)&&(c.releasePointerCapture(o.pointerId),l(o))})})}),re="SliderTrack",ae=d.forwardRef((e,t)=>{const{__scopeSlider:n,...r}=e,s=N(re,n);return m.jsx(A.span,{"data-disabled":s.disabled?"":void 0,"data-orientation":s.orientation,...r,ref:t})});ae.displayName=re;var O="SliderRange",oe=d.forwardRef((e,t)=>{const{__scopeSlider:n,...r}=e,s=N(O,n),l=te(O,n),a=d.useRef(null),i=C(t,a),u=s.values.length,p=s.values.map(c=>le(c,s.min,s.max)),h=u>1?Math.min(...p):0,o=100-Math.max(...p);return m.jsx(A.span,{"data-orientation":s.orientation,"data-disabled":s.disabled?"":void 0,...r,ref:i,style:{...e.style,[l.startEdge]:h+"%",[l.endEdge]:o+"%"}})});oe.displayName=O;var z="SliderThumb",ie=d.forwardRef((e,t)=>{const n=Se(e.__scopeSlider),[r,s]=d.useState(null),l=C(t,i=>s(i)),a=d.useMemo(()=>r?n().findIndex(i=>i.ref.current===r):-1,[n,r]);return m.jsx(Re,{...e,ref:l,index:a})}),Re=d.forwardRef((e,t)=>{const{__scopeSlider:n,index:r,name:s,...l}=e,a=N(z,n),i=te(z,n),[u,p]=d.useState(null),h=C(t,P=>p(P)),o=u?a.form||!!u.closest("form"):!0,c=fe(u),S=a.values[r],x=S===void 0?0:le(S,a.min,a.max),b=De(r,a.values.length),v=c==null?void 0:c[i.size],f=v?Ce(v,x,i.direction):0;return d.useEffect(()=>{if(u)return a.thumbs.add(u),()=>{a.thumbs.delete(u)}},[u,a.thumbs]),m.jsxs("span",{style:{transform:"var(--radix-slider-thumb-transform)",position:"absolute",[i.startEdge]:`calc(${x}% + ${f}px)`},children:[m.jsx(H.ItemSlot,{scope:e.__scopeSlider,children:m.jsx(A.span,{role:"slider","aria-label":e["aria-label"]||b,"aria-valuemin":a.min,"aria-valuenow":S,"aria-valuemax":a.max,"aria-orientation":a.orientation,"data-orientation":a.orientation,"data-disabled":a.disabled?"":void 0,tabIndex:a.disabled?void 0:0,...l,ref:h,style:S===void 0?{display:"none"}:e.style,onFocus:E(e.onFocus,()=>{a.valueIndexToChangeRef.current=r})})}),o&&m.jsx(se,{name:s??(a.name?a.name+(a.values.length>1?"[]":""):void 0),form:a.form,value:S},r)]})});ie.displayName=z;var Pe="RadioBubbleInput",se=d.forwardRef(({__scopeSlider:e,value:t,...n},r)=>{const s=d.useRef(null),l=C(s,r),a=be(t);return d.useEffect(()=>{const i=s.current;if(!i)return;const u=window.HTMLInputElement.prototype,h=Object.getOwnPropertyDescriptor(u,"value").set;if(a!==t&&h){const o=new Event("input",{bubbles:!0});h.call(i,t),i.dispatchEvent(o)}},[a,t]),m.jsx(A.input,{style:{display:"none"},...n,ref:l,defaultValue:t})});se.displayName=Pe;function Ve(e=[],t,n){const r=[...e];return r[n]=t,r.sort((s,l)=>s-l)}function le(e,t,n){const l=100/(n-t)*(e-t);return W(l,[0,100])}function De(e,t){return t>2?`Value ${e+1} of ${t}`:t===2?["Minimum","Maximum"][e]:void 0}function Ee(e,t){if(e.length===1)return 0;const n=e.map(s=>Math.abs(s-t)),r=Math.min(...n);return n.indexOf(r)}function Ce(e,t,n){const r=e/2,l=U([0,50],[0,r]);return(r-l(t)*n)*n}function Te(e){return e.slice(0,-1).map((t,n)=>e[n+1]-t)}function Ie(e,t){if(t>0){const n=Te(e);return Math.min(...n)>=t}return!0}function U(e,t){return n=>{if(e[0]===e[1]||t[0]===t[1])return t[0];const r=(t[1]-t[0])/(e[1]-e[0]);return t[0]+r*(n-e[0])}}function Me(e){return(String(e).split(".")[1]||"").length}function je(e,t){const n=Math.pow(10,t);return Math.round(e*n)/n}var Ae=Z,ke=ae,Ne=oe,Be=ie;const Ke="root__Eki38",qe="track__zosW2",He="range__Awc-3",Oe="thumb__IV11l",k={root:Ke,track:qe,range:He,thumb:Oe};function L(e){const t={};return Object.entries(e).forEach(([n,r])=>{switch(n){case"id":case"aria-label":case"aria-labelledby":case"aria-describedby":case"aria-invalid":case"aria-errormessage":t[n]=r}}),t}const $=d.forwardRef(function({value:t,defaultValue:n=0,onValueChange:r,min:s=0,max:l=100,step:a=1,dataset:i,...u},p){const h=pe(i,{preplyDsComponent:he.Slider}),o=r?c=>r(c[0]):void 0;return m.jsxs(Ae,{ref:p,...h,className:k.root,value:t!==void 0?[t]:void 0,defaultValue:n!==void 0?[n]:void 0,onValueChange:o,min:s,max:l,step:a,children:[m.jsx(ke,{className:k.track,children:m.jsx(Ne,{className:k.range})}),m.jsx(Be,{...L(u),className:k.thumb})]})});try{L.displayName="filterThumbProps",L.__docgenInfo={description:"",displayName:"filterThumbProps",props:{}}}catch{}try{$.displayName="Slider",$.__docgenInfo={description:"A slider input that allows users to select a single value from a range.",displayName:"Slider",props:{id:{defaultValue:null,description:"The unique identifier for the range slider element.",name:"id",required:!1,type:{name:"enum",value:[{value:"string"}]}},"aria-label":{defaultValue:null,description:"Accessible label for the range slider.",name:"aria-label",required:!1,type:{name:"enum",value:[{value:"string"}]}},"aria-labelledby":{defaultValue:null,description:"ID of the element that labels the range slider.",name:"aria-labelledby",required:!1,type:{name:"enum",value:[{value:"string"}]}},"aria-describedby":{defaultValue:null,description:"ID of the element that describes the range slider.",name:"aria-describedby",required:!1,type:{name:"enum",value:[{value:"string"}]}},"aria-invalid":{defaultValue:null,description:"Indicates whether the range slider value is invalid.",name:"aria-invalid",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},"aria-errormessage":{defaultValue:null,description:"ID of the element that describes the error, if any.",name:"aria-errormessage",required:!1,type:{name:"enum",value:[{value:"string"}]}},value:{defaultValue:null,description:"The controlled value of the slider.\nMust be used in conjunction with `onValueChange`.",name:"value",required:!1,type:{name:"enum",value:[{value:"number"}]}},defaultValue:{defaultValue:{value:"0"},description:`The value of the slider when initially rendered.
-Use when you do not need to control the state of the slider.`,name:"defaultValue",required:!1,type:{name:"enum",value:[{value:"number"}]}},onValueChange:{defaultValue:null,description:"Event handler called when the value changes.",name:"onValueChange",required:!1,type:{name:"enum",value:[{value:"(value: number) => void"}]}},name:{defaultValue:null,description:"The name of the slider. Submitted with its owning form as part of a name/value pair.",name:"name",required:!1,type:{name:"enum",value:[{value:"string"}]}},min:{defaultValue:{value:"0"},description:"The minimum value for the slider.",name:"min",required:!1,type:{name:"enum",value:[{value:"number"}]}},max:{defaultValue:{value:"100"},description:"The maximum value for the slider.",name:"max",required:!1,type:{name:"enum",value:[{value:"number"}]}},step:{defaultValue:{value:"1"},description:"The slider stepping interval.",name:"step",required:!1,type:{name:"enum",value:[{value:"number"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLSpanElement | null) => void"},{value:"RefObject<HTMLSpanElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}export{Ae as R,$ as S,ke as T,Ne as a,Be as b,L as f,k as s};

package/dist/assets/Slider-B_IRLClB.css

@@ -1 +0,0 @@
-.root__Eki38{height:var(--7789ee);position:relative;display:flex;align-items:center;-webkit-user-select:none;user-select:none;touch-action:none;cursor:grab}.track__zosW2{background-color:var(--c03289);position:relative;flex-grow:1;height:var(--53860b)}.range__Awc-3{position:absolute;background-color:var(--95b129);height:var(--53860b)}.thumb__IV11l{display:block;width:var(--7789ee);height:var(--7789ee);background-color:var(--3546c3);border:var(--05dd73) solid var(--95b129);border-radius:var(--fa4b1a)}.thumb__IV11l:active{cursor:grabbing;cursor:-moz-grabbing;cursor:-webkit-grabbing}.thumb__IV11l:focus-visible{outline-style:solid;outline-color:var(--603ec6);outline-width:var(--99d31f);outline-offset:var(--c0b12c)}