@preply/ds-docs 3.5.1 → 3.6.0

package/dist/assets/DismissibleChips.stories-DAd1oRPH.js

@@ -0,0 +1,635 @@
+import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{r as j}from"./index-Cb9e4tly.js";import{D as p,a as m}from"./DismissibleChips-D0spWwKB.js";import{F as na,a as A,b as Qe,c as Xe,d as ia}from"./TokyoUIEmojiFrowning-DTIcabpJ.js";import{F as sa}from"./index-DSVnVYmz.js";import{L as g}from"./LayoutFlex-C3k4b85b.js";import{T as L}from"./Text-CykvSLVe.js";import{L as oa}from"./Link-ppzJSCTf.js";import{H as la}from"./Heading-BLxyLk9f.js";import{d as ra}from"./styled-components.browser.esm-BgpGX317.js";import{f as ca,r as ea,w as u,e as a,u as l,a as E}from"./index-Ctq3gFTp.js";import{a as ua}from"./react.esm-BJ_b8t-Z.js";import{B as H}from"./Button-C5gzVt4K.js";import{T as S}from"./Tooltip-UjXQy5k6.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./createRequiredContext-BW3-EdwI.js";import"./Icon-CsnSNslb.js";import"./text-accent-DZDDtpIt.js";import"./classNames-BUL1Zq7e.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-BT0Aq7PA.js";import"./componentNames-NXEPEzbR.js";import"./index-DdzHuZ-Y.js";import"./defaults-Clr6nbGc.js";import"./CountryFlag-DNvfZC7z.js";import"./getCountryFlagUrl-CP-PpZV_.js";import"./useMergeRefs-D_RfOOSs.js";import"./TokyoUIClose-thK8sk63.js";import"./shared-strings-BzaHC9x5.js";import"./message-BqoANQez.js";import"./tslib.es6-BntfKcQG.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./layout-relative.module-ChaXrVQQ.js";import"./text-centered-CznToR0o.js";import"./useHostname-Y3PlXofY.js";import"./test-utils-DCJN9LZk.js";import"./index-C7hTFOIV.js";import"./index-BPrLDK9Y.js";import"./client-C1fTPCwG.js";import"./ButtonBase-D5O3MkG2.js";import"./Spinner-T-vTyHiv.js";import"./useMergeRefs-SFH7Mw4x.js";import"./index-CC6DAVyL.js";import"./index-BrBqb5Q4.js";import"./PortalElementProvider-CgL8vj5o.js";import"./index-C6wF8VM1.js";import"./index-QwIMrChO.js";const rt={title:"components/Chips/DismissibleChips",component:m,subcomponents:{DismissibleChipsItem:p},parameters:{layout:"padded",remountable:!0},args:{"aria-label":"Selected skills",defaultValue:["vocabulary","speaking","listening","reading"],onValueChange:ca(),items:[{value:"vocabulary",label:"Vocabulary"},{value:"speaking",label:"Speaking"},{value:"listening",label:"Listening"},{value:"reading",label:"Reading"}]},decorators:[function(t,{parameters:n}){const[s,o]=j.useState(0),r=()=>o(c=>c+1);return n.remountable?e.jsxs(g,{gap:"12",justifyContent:"space-between",children:[e.jsx(t,{},s),e.jsx(H,{variant:"ghost",size:"small",onClick:r,dataset:{testid:"reset"},children:"Reset story"})]}):e.jsx(t,{})}],beforeEach:()=>()=>{ea()}},b={play:async({canvasElement:i,step:t,args:n})=>{const s=u(i),o=s.getByRole("button",{name:/Remove Vocabulary/}),r=s.getByRole("button",{name:/Remove Speaking/}),c=s.getByRole("button",{name:/Remove Listening/}),d=s.getByRole("button",{name:/Remove Reading/});await t("Render chips with default values",async()=>{a(o).toBeVisible(),a(r).toBeVisible(),a(c).toBeVisible(),a(d).toBeVisible()}),await t("Chip should have accessible name",async()=>{a(o).toHaveAccessibleName("Remove Vocabulary")}),await t("Dismiss chip by clicking dismiss button",async()=>{await l.click(o),a(n.onValueChange).toHaveBeenCalledWith(["speaking","listening","reading"]),a(o).not.toBeVisible(),a(r).toBeVisible(),a(c).toBeVisible(),a(d).toBeVisible()}),await t("Dismiss another chip",async()=>{await l.click(r),a(n.onValueChange).toHaveBeenCalledWith(["listening","reading"]),a(o).not.toBeVisible(),a(r).not.toBeVisible(),a(c).toBeVisible(),a(d).toBeVisible()}),await l.click(s.getByTestId("reset")),await l.click(i)}};let D;const y={render:function({defaultValue:t,...n}){const[s,o]=j.useState(t);D=o;const r=c=>{var d;o(c),(d=n.onValueChange)==null||d.call(n,c)};return e.jsx(m,{...n,value:s,onValueChange:r})},play:async({canvasElement:i,step:t,args:n})=>{const s=u(i),o=s.getByRole("button",{name:/Remove Vocabulary/}),r=s.getByRole("button",{name:/Remove Speaking/}),c=s.getByRole("button",{name:/Remove Listening/}),d=s.getByRole("button",{name:/Remove Reading/});await t("Render chips with default values",async()=>{a(o).toBeVisible(),a(r).toBeVisible(),a(c).toBeVisible(),a(d).toBeVisible()}),await t("Dismiss chip by clicking dismiss button",async()=>{await l.click(o),a(n.onValueChange).toHaveBeenCalledWith(["speaking","listening","reading"]),a(o).not.toBeVisible(),a(r).toBeVisible(),a(c).toBeVisible(),a(d).toBeVisible()}),await t("Change the value externally",async()=>{ea(),await ua(async()=>{D(["listening","reading"])}),a(n.onValueChange).not.toHaveBeenCalled(),a(o).not.toBeVisible(),a(r).not.toBeVisible(),a(c).toBeVisible(),a(d).toBeVisible()}),await l.click(s.getByTestId("reset")),await l.click(i)}},h={args:{items:[{value:"vocabulary",label:"Vocabulary"},{value:"speaking",label:"Speaking",disabled:!0},{value:"listening",label:"Listening",disabled:!0},{value:"reading",label:"Reading"}]},play:async({canvasElement:i,step:t,args:n})=>{const o=u(i).getByRole("button",{name:/Remove Speaking/});await t("Disabled chip must have disabled attribute",async()=>{a(o).toBeDisabled()}),await t("Disabled chip must not be clickable",async()=>{await l.click(o),a(n.onValueChange).not.toHaveBeenCalled(),a(o).toBeVisible()})}},v={args:{"aria-label":"Selected availabilities",defaultValue:["morning","afternoon","evening"],items:[{value:"morning",label:"Morning",icon:e.jsx(A,{})},{value:"afternoon",label:"Afternoon",icon:e.jsx(Qe,{})},{value:"evening",label:"Evening",icon:e.jsx(Xe,{})}]},play:async({canvasElement:i,step:t})=>{const s=u(i).getByRole("button",{name:/Remove Morning/}),o=u(s).getByTestId("chip-icon");await t("Chip should render an icon when `icon` prop is passed",async()=>{a(o).toBeVisible()})}},w={args:{"aria-label":"Selected languages",defaultValue:["english"],items:[{value:"english",label:"English",counter:1247},{value:"spanish",label:"Spanish",counter:892},{value:"french",label:"French",counter:534},{value:"german",label:"German",counter:421},{value:"italian",label:"Italian",counter:287},{value:"portuguese",label:"Portuguese",counter:156}]},play:async({canvasElement:i,step:t})=>{const s=u(i).getByRole("button",{name:/Remove English/}),o=u(s).getByTestId("chip-counter");await t("Chip should render a counter when `counter` prop is passed",async()=>{a(o).toBeVisible(),a(o).toHaveTextContent("1247")})}},f={args:{"aria-label":"Selected countries",defaultValue:["ua","gb","it","es","au","br","eg"],items:[{value:"ua",label:"Ukraine",countryFlagCode:"ua"},{value:"gb",label:"United Kingdom",countryFlagCode:"gb"},{value:"it",label:"Italy",countryFlagCode:"it"},{value:"es",label:"Spain",countryFlagCode:"es"},{value:"au",label:"Australia",countryFlagCode:"au"},{value:"br",label:"Brazil",countryFlagCode:"br"},{value:"eg",label:"Egypt",countryFlagCode:"eg"}]},play:async({canvasElement:i,step:t})=>{const s=u(i).getByRole("button",{name:/Remove Ukraine/}),o=u(s).getByTestId("chip-country-flag");await t("Chip should render a flag when `flagCountryCode` prop is passed",async()=>{a(o).toBeVisible()})}},k={args:{"aria-label":"Fancy chips",defaultValue:["counter+icon","counter+flag","icon+flag"],items:[{value:"counter+icon",label:"Icon + Counter",icon:e.jsx(A,{}),counter:1247},{value:"counter+flag",label:"Flag + Counter",countryFlagCode:"ua",counter:1247},{value:"icon+flag",label:"Icon + Flag",icon:e.jsx(A,{}),countryFlagCode:"ua"}]},play:async({canvasElement:i})=>{const t=u(i),n=u(t.getByRole("button",{name:"Remove Icon + Flag"}));a(n.getByTestId("chip-icon")).toBeVisible(),a(n.queryByTestId("chip-country-flag")).not.toBeInTheDocument()}},x=["2025-08-15T10:00Z","2025-08-16T12:00Z","2025-08-17T14:00Z"],B={args:{orientation:"vertical","aria-label":"Selected time slots",defaultValue:x,items:x.map(i=>({value:i,label:e.jsx(sa,{weekday:"short",day:"numeric",month:"short",hour:"2-digit",minute:"2-digit",value:i}),dataset:{testid:i}}))},decorators:[i=>e.jsx("div",{style:{width:300,margin:"0 auto"},children:e.jsx(i,{})})],play:async({canvasElement:i,step:t})=>{const n=u(i),s=n.getByTestId(x[0]),o=n.getByTestId(x[1]),r=n.getByTestId(x[2]);await t("Focus first chip",async()=>{s.focus()}),await t("Arrow down should focus second chip",async()=>{await l.keyboard("{ArrowDown}"),a(o).toHaveFocus()}),await t("Arrow down should focus third chip",async()=>{await l.keyboard("{ArrowDown}"),a(r).toHaveFocus()}),await t("Arrow down should focus first chip",async()=>{await l.keyboard("{ArrowDown}"),a(s).toHaveFocus()}),await t("Arrow up should focus third chip",async()=>{await l.keyboard("{ArrowUp}"),a(r).toHaveFocus()})}},R={render:i=>e.jsxs(g,{gap:"12",children:[e.jsx(m,{...i}),e.jsx(H,{variant:"tertiary",size:"small",onClick:()=>alert("Show all"),children:"Show all"})]})},aa=[{value:"vocabulary",label:"Vocabulary"},{value:"speaking",label:"Speaking"},{value:"listening",label:"Listening"},{value:"reading",label:"Reading"},{value:"writing",label:"Writing"},{value:"grammar",label:"Grammar"}],da=[{value:"monday",label:"Monday"},{value:"tuesday",label:"Tuesday"},{value:"wednesday",label:"Wednesday"},{value:"thursday",label:"Thursday"},{value:"friday",label:"Friday"},{value:"saturday",label:"Saturday"},{value:"sunday",label:"Sunday"}],pa=[{value:"morning",label:"Morning (6-12)",icon:e.jsx(A,{})},{value:"afternoon",label:"Afternoon (12-18)",icon:e.jsx(Qe,{})},{value:"evening",label:"Evening (18-0)",icon:e.jsx(Xe,{})},{value:"night",label:"Night (0-6)",icon:e.jsx(ia,{})}],C={render:function(t){return e.jsxs(g,{direction:"column",alignItems:"stretch",gap:"64",children:[e.jsxs(g,{direction:"column",alignItems:"stretch",gap:"16",children:[e.jsx(L,{variant:"large-semibold",children:"What skills do you want to focus on?"}),e.jsx(m,{"aria-label":"Selected skills",defaultValue:["vocabulary","speaking","listening"],items:aa})]}),e.jsxs(g,{direction:"column",alignItems:"stretch",gap:"16",children:[e.jsx(L,{variant:"large-semibold",children:"Which days work best for you?"}),e.jsx(m,{"aria-label":"Selected days",defaultValue:["monday","wednesday","friday"],items:da})]}),e.jsxs(g,{direction:"column",alignItems:"stretch",gap:"16",children:[e.jsx(L,{variant:"large-semibold",children:"What times of day work for you?"}),e.jsx(m,{"aria-label":"Selected times",defaultValue:["morning","afternoon"],items:pa})]})]})},play:async({canvasElement:i,step:t})=>{const n=u(i),s=n.getByRole("button",{name:/Remove Vocabulary/}),o=n.getByRole("button",{name:/Remove Speaking/}),r=n.getByRole("button",{name:/Remove Listening/}),c=n.getByRole("button",{name:/Remove Monday/});await t("Tab once to enter the component",async()=>{await l.tab(),a(s).toHaveFocus()}),await t("Next tab should focus second chips group",async()=>{await l.tab(),a(c).toHaveFocus()}),await t("Shift+Tab should focus first chips group again",async()=>{await l.tab({shift:!0}),a(s).toHaveFocus()}),await t("Right arrow should focus next chip in the group",async()=>{await l.keyboard("{ArrowRight}"),a(o).toHaveFocus()}),await t("Left arrow should focus previous chip in the group",async()=>{await l.keyboard("{ArrowLeft}"),a(s).toHaveFocus()}),await t("Left arrow should focus last chip if first chip is focused",async()=>{await l.keyboard("{ArrowLeft}"),a(r).toHaveFocus()}),await t("Right arrow should focus first chip if last chip is focused",async()=>{await l.keyboard("{ArrowRight}"),a(s).toHaveFocus()}),await t("Focus last chip",async()=>{await l.keyboard("{ArrowLeft}")}),await t("Tab to the next group",async()=>{await l.tab()}),await t("Shift+Tab to return to the first group, the last focused chip should be focused",async()=>{await l.tab({shift:!0}),a(r).toHaveFocus()})}},ga=ra.ul`
+    all: unset;
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    > li {
+        display: contents;
+    }
+`,W=[{id:1,title:"Building Your First Vocabulary List",skills:["vocabulary"]},{id:2,title:"Effective Speaking Practice Techniques",skills:["speaking"]},{id:3,title:"Active Listening Strategies",skills:["listening"]},{id:4,title:"Speed Reading Methods",skills:["reading"]},{id:5,title:"Grammar Rules Made Simple",skills:["grammar"]},{id:6,title:"Combining Speaking and Vocabulary",skills:["speaking","vocabulary"]},{id:7,title:"Reading Comprehension and Vocabulary Building",skills:["reading","vocabulary"]},{id:8,title:"Listening and Speaking Integration",skills:["listening","speaking"]}],V={render:function(t){const n=["vocabulary","speaking","listening","reading","grammar"],[s,o]=j.useState(n),r=s.length>0?W.filter(c=>s.some(d=>c.skills.includes(d))):W;return e.jsxs(g,{direction:"column",gap:"24",children:[e.jsxs(g,{direction:"column",gap:"8",children:[e.jsx(la,{tag:"h2",variant:"large",children:"Articles"}),e.jsxs(g,{gap:"16",children:[e.jsx(m,{"aria-label":"Applied skill filters","aria-controls":"results",value:s,onValueChange:o,items:aa}),e.jsx("div",{children:e.jsx(H,{variant:"ghost",onClick:()=>o(n),children:"Reset filters"})})]})]}),e.jsx("section",{id:"results","aria-label":"Filtered articles",children:e.jsx(ga,{children:r.map(c=>e.jsx("li",{children:e.jsx(oa,{href:"#",children:c.title})},c.id))})})]})},play:async({canvasElement:i,step:t})=>{const n=u(i),s=n.getByRole("list",{name:"Applied skill filters"}),o=n.getByRole("button",{name:/Remove Vocabulary/}),r=n.getByRole("button",{name:/Remove Speaking/}),c=n.getByRole("button",{name:/Remove Listening/}),d=n.getByRole("button",{name:/Remove Reading/}),ta=n.getByRole("button",{name:/Remove Grammar/});await t("Chips element should have aria attributes forwarded",async()=>{a(s).toHaveAttribute("aria-label","Applied skill filters"),a(o).toHaveAttribute("aria-controls","results"),a(r).toHaveAttribute("aria-controls","results"),a(c).toHaveAttribute("aria-controls","results"),a(d).toHaveAttribute("aria-controls","results"),a(ta).toHaveAttribute("aria-controls","results")})}},F={parameters:{a11y:{config:{rules:[{id:"color-contrast",enabled:!1}]}}},args:{"aria-label":"Selected skills",value:["vocabulary","speaking","listening","reading"],items:void 0,children:e.jsxs(e.Fragment,{children:[e.jsx(S,{content:"I want to learn vocabulary",dataset:{testid:"vocabulary-tooltip"},children:e.jsx(p,{value:"vocabulary",children:"Vocabulary"})}),e.jsx(S,{content:"I want to improve my speaking skills",dataset:{testid:"speaking-tooltip"},children:e.jsx(p,{value:"speaking",children:"Speaking"})}),e.jsx(S,{content:"I want to improve my listening skills",dataset:{testid:"listening-tooltip"},children:e.jsx(p,{value:"listening",children:"Listening"})}),e.jsx(S,{content:"I want to improve my reading skills",dataset:{testid:"reading-tooltip"},children:e.jsx(p,{value:"reading",children:"Reading"})})]})},play:async({canvasElement:i,step:t})=>{const n=u(i);await t("Tab to the first chip",async()=>{await l.tab(),await E(()=>{a(n.getByTestId("vocabulary-tooltip")).toBeVisible()})}),await t("Arrow right to focus next chip",async()=>{await l.keyboard("{ArrowRight}"),await E(()=>{a(n.getByTestId("speaking-tooltip")).toBeVisible()})}),await t("Hover third chip",async()=>{await l.hover(n.getByRole("button",{name:/Remove Listening/})),await E(()=>{a(n.getByTestId("listening-tooltip")).toBeVisible()})})}},T={tags:["!autodocs"],parameters:{remountable:!1},args:{"aria-label":"Chips states",value:["rest","hover","focus","active","disabled"],items:void 0,children:e.jsxs(e.Fragment,{children:[e.jsx(p,{value:"rest",children:"Rest"}),e.jsx(p,{value:"focus",dsInternalSimulation:"focus",children:"Focus"}),e.jsx(p,{value:"hover",dsInternalSimulation:"hover",children:"Hover"}),e.jsx(p,{value:"active",dsInternalSimulation:"active",children:"Active"}),e.jsx(p,{value:"disabled",disabled:!0,children:"Disabled"})]})}},I={parameters:{remountable:!1},decorators:[i=>e.jsx("div",{style:{maxWidth:150,margin:"0 auto"},children:e.jsx(i,{})})],args:{"aria-label":"Long label",value:["long"],items:[{value:"long",icon:na,label:"I'm way too long to be a chip label, I don't know what to do with myself"}]}};var M,U,q,O,_;b.parameters={...b.parameters,docs:{...(M=b.parameters)==null?void 0:M.docs,source:{originalSource:`{
+  play: async ({
+    canvasElement,
+    step,
+    args
+  }) => {
+    const canvas = within(canvasElement);
+    const vocabulary = canvas.getByRole('button', {
+      name: /Remove Vocabulary/
+    });
+    const speaking = canvas.getByRole('button', {
+      name: /Remove Speaking/
+    });
+    const listening = canvas.getByRole('button', {
+      name: /Remove Listening/
+    });
+    const reading = canvas.getByRole('button', {
+      name: /Remove Reading/
+    });
+    await step('Render chips with default values', async () => {
+      expect(vocabulary).toBeVisible();
+      expect(speaking).toBeVisible();
+      expect(listening).toBeVisible();
+      expect(reading).toBeVisible();
+    });
+    await step('Chip should have accessible name', async () => {
+      expect(vocabulary).toHaveAccessibleName('Remove Vocabulary');
+    });
+    await step('Dismiss chip by clicking dismiss button', async () => {
+      await userEvent.click(vocabulary);
+      expect(args.onValueChange).toHaveBeenCalledWith(['speaking', 'listening', 'reading']);
+      expect(vocabulary).not.toBeVisible();
+      expect(speaking).toBeVisible();
+      expect(listening).toBeVisible();
+      expect(reading).toBeVisible();
+    });
+    await step('Dismiss another chip', async () => {
+      await userEvent.click(speaking);
+      expect(args.onValueChange).toHaveBeenCalledWith(['listening', 'reading']);
+      expect(vocabulary).not.toBeVisible();
+      expect(speaking).not.toBeVisible();
+      expect(listening).toBeVisible();
+      expect(reading).toBeVisible();
+    });
+
+    // Bring story back to the initial state
+    await userEvent.click(canvas.getByTestId('reset'));
+    // Remove focus from reset button
+    await userEvent.click(canvasElement);
+  }
+}`,...(q=(U=b.parameters)==null?void 0:U.docs)==null?void 0:q.source},description:{story:"Basic usage with default values. The component manages its own state internally.",...(_=(O=b.parameters)==null?void 0:O.docs)==null?void 0:_.description}}};var z,P,G,N,$;y.parameters={...y.parameters,docs:{...(z=y.parameters)==null?void 0:z.docs,source:{originalSource:`{
+  render: function StoryRender({
+    defaultValue,
+    ...args
+  }) {
+    const [value, setValue] = useState(defaultValue);
+    setValueFromPlayFunction = setValue;
+    const handleValueChange = (value: string[]) => {
+      setValue(value);
+      args.onValueChange?.(value);
+    };
+    return <DismissibleChips {...args} value={value} onValueChange={handleValueChange} />;
+  },
+  play: async ({
+    canvasElement,
+    step,
+    args
+  }) => {
+    const canvas = within(canvasElement);
+    const vocabulary = canvas.getByRole('button', {
+      name: /Remove Vocabulary/
+    });
+    const speaking = canvas.getByRole('button', {
+      name: /Remove Speaking/
+    });
+    const listening = canvas.getByRole('button', {
+      name: /Remove Listening/
+    });
+    const reading = canvas.getByRole('button', {
+      name: /Remove Reading/
+    });
+    await step('Render chips with default values', async () => {
+      expect(vocabulary).toBeVisible();
+      expect(speaking).toBeVisible();
+      expect(listening).toBeVisible();
+      expect(reading).toBeVisible();
+    });
+    await step('Dismiss chip by clicking dismiss button', async () => {
+      await userEvent.click(vocabulary);
+      expect(args.onValueChange).toHaveBeenCalledWith(['speaking', 'listening', 'reading']);
+      expect(vocabulary).not.toBeVisible();
+      expect(speaking).toBeVisible();
+      expect(listening).toBeVisible();
+      expect(reading).toBeVisible();
+    });
+    await step('Change the value externally', async () => {
+      resetAllMocks();
+      await act(async () => {
+        setValueFromPlayFunction(['listening', 'reading']);
+      });
+      expect(args.onValueChange).not.toHaveBeenCalled();
+
+      // Check that only vocabulary and reading chips are present
+      expect(vocabulary).not.toBeVisible();
+      expect(speaking).not.toBeVisible();
+      expect(listening).toBeVisible();
+      expect(reading).toBeVisible();
+    });
+
+    // Bring story back to the initial state
+    await userEvent.click(canvas.getByTestId('reset'));
+    // Remove focus from reset button
+    await userEvent.click(canvasElement);
+  }
+}`,...(G=(P=y.parameters)==null?void 0:P.docs)==null?void 0:G.source},description:{story:"Controlled usage where you manage the state externally.",...($=(N=y.parameters)==null?void 0:N.docs)==null?void 0:$.description}}};var Z,K,Y,J,Q;h.parameters={...h.parameters,docs:{...(Z=h.parameters)==null?void 0:Z.docs,source:{originalSource:`{
+  args: {
+    items: [{
+      value: 'vocabulary',
+      label: 'Vocabulary'
+    }, {
+      value: 'speaking',
+      label: 'Speaking',
+      disabled: true
+    }, {
+      value: 'listening',
+      label: 'Listening',
+      disabled: true
+    }, {
+      value: 'reading',
+      label: 'Reading'
+    }]
+  },
+  play: async ({
+    canvasElement,
+    step,
+    args
+  }) => {
+    const canvas = within(canvasElement);
+    const speaking = canvas.getByRole('button', {
+      name: /Remove Speaking/
+    });
+    await step('Disabled chip must have disabled attribute', async () => {
+      expect(speaking).toBeDisabled();
+    });
+    await step('Disabled chip must not be clickable', async () => {
+      await userEvent.click(speaking);
+      expect(args.onValueChange).not.toHaveBeenCalled();
+      expect(speaking).toBeVisible();
+    });
+  }
+}`,...(Y=(K=h.parameters)==null?void 0:K.docs)==null?void 0:Y.source},description:{story:"Some chips can be disabled to prevent user interaction.",...(Q=(J=h.parameters)==null?void 0:J.docs)==null?void 0:Q.description}}};var X,ee,ae,te,ne;v.parameters={...v.parameters,docs:{...(X=v.parameters)==null?void 0:X.docs,source:{originalSource:`{
+  args: {
+    'aria-label': 'Selected availabilities',
+    defaultValue: ['morning', 'afternoon', 'evening'],
+    items: [{
+      value: 'morning',
+      label: 'Morning',
+      icon: <TokyoUIAvailability1EarlyMorning />
+    }, {
+      value: 'afternoon',
+      label: 'Afternoon',
+      icon: <TokyoUIAvailability3Day />
+    }, {
+      value: 'evening',
+      label: 'Evening',
+      icon: <TokyoUIAvailability6LateEvening />
+    }]
+  },
+  play: async ({
+    canvasElement,
+    step
+  }) => {
+    const canvas = within(canvasElement);
+    const morning = canvas.getByRole('button', {
+      name: /Remove Morning/
+    });
+    const morningIcon = within(morning).getByTestId('chip-icon');
+    await step('Chip should render an icon when \`icon\` prop is passed', async () => {
+      expect(morningIcon).toBeVisible();
+    });
+  }
+}`,...(ae=(ee=v.parameters)==null?void 0:ee.docs)==null?void 0:ae.source},description:{story:`Chips can include icons to provide visual context and improve scannability.
+Icons appear on the left side of the chip label and help users quickly identify options.`,...(ne=(te=v.parameters)==null?void 0:te.docs)==null?void 0:ne.description}}};var ie,se,oe,le,re;w.parameters={...w.parameters,docs:{...(ie=w.parameters)==null?void 0:ie.docs,source:{originalSource:`{
+  args: {
+    'aria-label': 'Selected languages',
+    defaultValue: ['english'],
+    items: [{
+      value: 'english',
+      label: 'English',
+      counter: 1247
+    }, {
+      value: 'spanish',
+      label: 'Spanish',
+      counter: 892
+    }, {
+      value: 'french',
+      label: 'French',
+      counter: 534
+    }, {
+      value: 'german',
+      label: 'German',
+      counter: 421
+    }, {
+      value: 'italian',
+      label: 'Italian',
+      counter: 287
+    }, {
+      value: 'portuguese',
+      label: 'Portuguese',
+      counter: 156
+    }]
+  },
+  play: async ({
+    canvasElement,
+    step
+  }) => {
+    const canvas = within(canvasElement);
+    const english = canvas.getByRole('button', {
+      name: /Remove English/
+    });
+    const englishCounter = within(english).getByTestId('chip-counter');
+    await step('Chip should render a counter when \`counter\` prop is passed', async () => {
+      expect(englishCounter).toBeVisible();
+      expect(englishCounter).toHaveTextContent('1247');
+    });
+  }
+}`,...(oe=(se=w.parameters)==null?void 0:se.docs)==null?void 0:oe.source},description:{story:`Chips can display numeric counters to show quantities, popularity, or other metrics.
+Counters appear on the right side of the chip label and are useful for
+showing search results count, available tutors, or similar quantitative data.`,...(re=(le=w.parameters)==null?void 0:le.docs)==null?void 0:re.description}}};var ce,ue,de,pe,ge;f.parameters={...f.parameters,docs:{...(ce=f.parameters)==null?void 0:ce.docs,source:{originalSource:`{
+  args: {
+    'aria-label': 'Selected countries',
+    defaultValue: ['ua', 'gb', 'it', 'es', 'au', 'br', 'eg'],
+    items: [{
+      value: 'ua',
+      label: 'Ukraine',
+      countryFlagCode: 'ua'
+    }, {
+      value: 'gb',
+      label: 'United Kingdom',
+      countryFlagCode: 'gb'
+    }, {
+      value: 'it',
+      label: 'Italy',
+      countryFlagCode: 'it'
+    }, {
+      value: 'es',
+      label: 'Spain',
+      countryFlagCode: 'es'
+    }, {
+      value: 'au',
+      label: 'Australia',
+      countryFlagCode: 'au'
+    }, {
+      value: 'br',
+      label: 'Brazil',
+      countryFlagCode: 'br'
+    }, {
+      value: 'eg',
+      label: 'Egypt',
+      countryFlagCode: 'eg'
+    }]
+  },
+  play: async ({
+    canvasElement,
+    step
+  }) => {
+    const canvas = within(canvasElement);
+    const ua = canvas.getByRole('button', {
+      name: /Remove Ukraine/
+    });
+    const uaFlag = within(ua).getByTestId('chip-country-flag');
+    await step('Chip should render a flag when \`flagCountryCode\` prop is passed', async () => {
+      expect(uaFlag).toBeVisible();
+    });
+  }
+}`,...(de=(ue=f.parameters)==null?void 0:ue.docs)==null?void 0:de.source},description:{story:`Chips can display country flags using ISO country codes.
+Flags appear on the left side and provide instant visual recognition
+for country or language selection interfaces.`,...(ge=(pe=f.parameters)==null?void 0:pe.docs)==null?void 0:ge.description}}};var me,be,ye,he,ve;k.parameters={...k.parameters,docs:{...(me=k.parameters)==null?void 0:me.docs,source:{originalSource:`{
+  args: {
+    'aria-label': 'Fancy chips',
+    defaultValue: ['counter+icon', 'counter+flag', 'icon+flag'],
+    items: [{
+      value: 'counter+icon',
+      label: 'Icon + Counter',
+      icon: <TokyoUIAvailability1EarlyMorning />,
+      counter: 1247
+    }, {
+      value: 'counter+flag',
+      label: 'Flag + Counter',
+      countryFlagCode: 'ua',
+      counter: 1247
+    }, {
+      value: 'icon+flag',
+      label: 'Icon + Flag',
+      icon: <TokyoUIAvailability1EarlyMorning />,
+      countryFlagCode: 'ua'
+    }]
+  },
+  play: async ({
+    canvasElement
+  }) => {
+    const canvas = within(canvasElement);
+    const chip = within(canvas.getByRole('button', {
+      name: 'Remove Icon + Flag'
+    }));
+    expect(chip.getByTestId('chip-icon')).toBeVisible();
+    expect(chip.queryByTestId('chip-country-flag')).not.toBeInTheDocument();
+  }
+}`,...(ye=(be=k.parameters)==null?void 0:be.docs)==null?void 0:ye.source},description:{story:`Counter can be combined with icon or flag.
+However, if you pass icon and flag together, only icon will be displayed.`,...(ve=(he=k.parameters)==null?void 0:he.docs)==null?void 0:ve.description}}};var we,fe,ke,xe,Be;B.parameters={...B.parameters,docs:{...(we=B.parameters)==null?void 0:we.docs,source:{originalSource:`{
+  args: {
+    orientation: 'vertical',
+    'aria-label': 'Selected time slots',
+    defaultValue: dates,
+    items: dates.map(date => ({
+      value: date,
+      label: <FormattedDate weekday="short" day="numeric" month="short" hour="2-digit" minute="2-digit" value={date} />,
+      dataset: {
+        testid: date
+      }
+    }))
+  },
+  decorators: [Story => <div style={{
+    width: 300,
+    margin: '0 auto'
+  }}>
+                <Story />
+            </div>],
+  play: async ({
+    canvasElement,
+    step
+  }) => {
+    const canvas = within(canvasElement);
+    const firstChip = canvas.getByTestId(dates[0]);
+    const secondChip = canvas.getByTestId(dates[1]);
+    const thirdChip = canvas.getByTestId(dates[2]);
+    await step('Focus first chip', async () => {
+      firstChip.focus();
+    });
+    await step('Arrow down should focus second chip', async () => {
+      await userEvent.keyboard('{ArrowDown}');
+      expect(secondChip).toHaveFocus();
+    });
+    await step('Arrow down should focus third chip', async () => {
+      await userEvent.keyboard('{ArrowDown}');
+      expect(thirdChip).toHaveFocus();
+    });
+    await step('Arrow down should focus first chip', async () => {
+      await userEvent.keyboard('{ArrowDown}');
+      expect(firstChip).toHaveFocus();
+    });
+    await step('Arrow up should focus third chip', async () => {
+      await userEvent.keyboard('{ArrowUp}');
+      expect(thirdChip).toHaveFocus();
+    });
+  }
+}`,...(ke=(fe=B.parameters)==null?void 0:fe.docs)==null?void 0:ke.source},description:{story:`Chips can be arranged vertically instead of horizontally.
+This layout works well in narrow containers or when you want
+to emphasize a vertical flow in your design.`,...(Be=(xe=B.parameters)==null?void 0:xe.docs)==null?void 0:Be.description}}};var Re,Ce,Ve,Fe,Ie;R.parameters={...R.parameters,docs:{...(Re=R.parameters)==null?void 0:Re.docs,source:{originalSource:`{
+  render: args => <LayoutFlex gap="12">
+            <DismissibleChips {...args} />
+            <Button variant="tertiary" size="small" onClick={() => alert('Show all')}>
+                Show all
+            </Button>
+        </LayoutFlex>
+}`,...(Ve=(Ce=R.parameters)==null?void 0:Ce.docs)==null?void 0:Ve.source},description:{story:"Chips are intended only for selection. To assign secondary actions, combine chips with a button.",...(Ie=(Fe=R.parameters)==null?void 0:Fe.docs)==null?void 0:Ie.description}}};var Se,Te,Ae,Le,Ee;C.parameters={...C.parameters,docs:{...(Se=C.parameters)==null?void 0:Se.docs,source:{originalSource:`{
+  // unused \`args\` makes story source code readable 🤷‍♂️
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  render: function StoryRender(_args) {
+    return <LayoutFlex direction="column" alignItems="stretch" gap="64">
+                <LayoutFlex direction="column" alignItems="stretch" gap="16">
+                    <Text variant="large-semibold">What skills do you want to focus on?</Text>
+                    <DismissibleChips aria-label="Selected skills" defaultValue={['vocabulary', 'speaking', 'listening'] as string[]} items={skillsItems} />
+                </LayoutFlex>
+
+                <LayoutFlex direction="column" alignItems="stretch" gap="16">
+                    <Text variant="large-semibold">Which days work best for you?</Text>
+                    <DismissibleChips aria-label="Selected days" defaultValue={['monday', 'wednesday', 'friday'] as string[]} items={daysOfWeekItems} />
+                </LayoutFlex>
+
+                <LayoutFlex direction="column" alignItems="stretch" gap="16">
+                    <Text variant="large-semibold">What times of day work for you?</Text>
+                    <DismissibleChips aria-label="Selected times" defaultValue={['morning', 'afternoon'] as string[]} items={timeOfDayItems} />
+                </LayoutFlex>
+            </LayoutFlex>;
+  },
+  play: async ({
+    canvasElement,
+    step
+  }) => {
+    const canvas = within(canvasElement);
+    const skillVocabulary = canvas.getByRole('button', {
+      name: /Remove Vocabulary/
+    });
+    const skillSpeaking = canvas.getByRole('button', {
+      name: /Remove Speaking/
+    });
+    const skillListening = canvas.getByRole('button', {
+      name: /Remove Listening/
+    });
+    const dayMonday = canvas.getByRole('button', {
+      name: /Remove Monday/
+    });
+    await step('Tab once to enter the component', async () => {
+      await userEvent.tab();
+      expect(skillVocabulary).toHaveFocus();
+    });
+    await step('Next tab should focus second chips group', async () => {
+      await userEvent.tab();
+      expect(dayMonday).toHaveFocus();
+    });
+    await step('Shift+Tab should focus first chips group again', async () => {
+      await userEvent.tab({
+        shift: true
+      });
+      expect(skillVocabulary).toHaveFocus();
+    });
+    await step('Right arrow should focus next chip in the group', async () => {
+      await userEvent.keyboard('{ArrowRight}');
+      expect(skillSpeaking).toHaveFocus();
+    });
+    await step('Left arrow should focus previous chip in the group', async () => {
+      await userEvent.keyboard('{ArrowLeft}');
+      expect(skillVocabulary).toHaveFocus();
+    });
+    await step('Left arrow should focus last chip if first chip is focused', async () => {
+      await userEvent.keyboard('{ArrowLeft}');
+      expect(skillListening).toHaveFocus();
+    });
+    await step('Right arrow should focus first chip if last chip is focused', async () => {
+      await userEvent.keyboard('{ArrowRight}');
+      expect(skillVocabulary).toHaveFocus();
+    });
+    await step('Focus last chip', async () => {
+      await userEvent.keyboard('{ArrowLeft}');
+    });
+    await step('Tab to the next group', async () => {
+      await userEvent.tab();
+    });
+    await step('Shift+Tab to return to the first group, the last focused chip should be focused', async () => {
+      await userEvent.tab({
+        shift: true
+      });
+      expect(skillListening).toHaveFocus();
+    });
+  }
+}`,...(Ae=(Te=C.parameters)==null?void 0:Te.docs)==null?void 0:Ae.source},description:{story:`The **roving tabindex pattern** is a keyboard navigation technique for grouped interactive elements. Instead of tabbing through each item individually, users:
+
+- **Tab once** to enter the component
+- **Use arrow keys** to navigate between items within the group
+- **Tab again** to exit to the next component
+
+This creates a smooth, efficient navigation experience - especially useful for components like chip groups where you want to browse options quickly without getting stuck in a "tab trap."
+
+{@link https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex Learn more about roving tabindex pattern}`,...(Ee=(Le=C.parameters)==null?void 0:Le.docs)==null?void 0:Ee.description}}};var je,He,De,We,Me;V.parameters={...V.parameters,docs:{...(je=V.parameters)==null?void 0:je.docs,source:{originalSource:`{
+  // unused \`args\` makes story source code readable 🤷‍♂️
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  render: function StoryRender(_args) {
+    const defaultFilters = ['vocabulary', 'speaking', 'listening', 'reading', 'grammar'];
+    const [appliedFilters, setAppliedFilters] = useState<string[]>(defaultFilters);
+    const filteredArticles = appliedFilters.length > 0 ? articles.filter(article => appliedFilters.some(skill => article.skills.includes(skill))) : articles;
+    return <LayoutFlex direction="column" gap="24">
+                <LayoutFlex direction="column" gap="8">
+                    <Heading tag="h2" variant="large">
+                        Articles
+                    </Heading>
+                    <LayoutFlex gap="16">
+                        <DismissibleChips aria-label="Applied skill filters" aria-controls="results" value={appliedFilters} onValueChange={setAppliedFilters} items={skillsItems} />
+                        <div>
+                            <Button variant="ghost" onClick={() => setAppliedFilters(defaultFilters)}>
+                                Reset filters
+                            </Button>
+                        </div>
+                    </LayoutFlex>
+                </LayoutFlex>
+                <section id="results" aria-label="Filtered articles">
+                    <List>
+                        {filteredArticles.map(article => <li key={article.id}>
+                                <Link href="#">{article.title}</Link>
+                            </li>)}
+                    </List>
+                </section>
+            </LayoutFlex>;
+  },
+  play: async ({
+    canvasElement,
+    step
+  }) => {
+    const canvas = within(canvasElement);
+    const chipsList = canvas.getByRole('list', {
+      name: 'Applied skill filters'
+    });
+    const vocabulary = canvas.getByRole('button', {
+      name: /Remove Vocabulary/
+    });
+    const speaking = canvas.getByRole('button', {
+      name: /Remove Speaking/
+    });
+    const listening = canvas.getByRole('button', {
+      name: /Remove Listening/
+    });
+    const reading = canvas.getByRole('button', {
+      name: /Remove Reading/
+    });
+    const grammar = canvas.getByRole('button', {
+      name: /Remove Grammar/
+    });
+    await step('Chips element should have aria attributes forwarded', async () => {
+      expect(chipsList).toHaveAttribute('aria-label', 'Applied skill filters');
+      expect(vocabulary).toHaveAttribute('aria-controls', 'results');
+      expect(speaking).toHaveAttribute('aria-controls', 'results');
+      expect(listening).toHaveAttribute('aria-controls', 'results');
+      expect(reading).toHaveAttribute('aria-controls', 'results');
+      expect(grammar).toHaveAttribute('aria-controls', 'results');
+    });
+  }
+}`,...(De=(He=V.parameters)==null?void 0:He.docs)==null?void 0:De.source},description:{story:"For accessibility, always provide an `aria-label` to describe the chip group's purpose.\nIf the chips control other elements on the page, use `aria-controls` with the target element's ID.",...(Me=(We=V.parameters)==null?void 0:We.docs)==null?void 0:Me.description}}};var Ue,qe,Oe,_e,ze;F.parameters={...F.parameters,docs:{...(Ue=F.parameters)==null?void 0:Ue.docs,source:{originalSource:`{
+  parameters: {
+    a11y: {
+      config: {
+        rules: [{
+          id: 'color-contrast',
+          enabled: false
+        }]
+      }
+    }
+  },
+  args: {
+    'aria-label': 'Selected skills',
+    value: ['vocabulary', 'speaking', 'listening', 'reading'],
+    items: undefined,
+    children: <>
+                <Tooltip content="I want to learn vocabulary" dataset={{
+        testid: 'vocabulary-tooltip'
+      }}>
+                    <DismissibleChipsItem value="vocabulary">Vocabulary</DismissibleChipsItem>
+                </Tooltip>
+                <Tooltip content="I want to improve my speaking skills" dataset={{
+        testid: 'speaking-tooltip'
+      }}>
+                    <DismissibleChipsItem value="speaking">Speaking</DismissibleChipsItem>
+                </Tooltip>
+                <Tooltip content="I want to improve my listening skills" dataset={{
+        testid: 'listening-tooltip'
+      }}>
+                    <DismissibleChipsItem value="listening">Listening</DismissibleChipsItem>
+                </Tooltip>
+                <Tooltip content="I want to improve my reading skills" dataset={{
+        testid: 'reading-tooltip'
+      }}>
+                    <DismissibleChipsItem value="reading">Reading</DismissibleChipsItem>
+                </Tooltip>
+            </>
+  },
+  play: async ({
+    canvasElement,
+    step
+  }) => {
+    const canvas = within(canvasElement);
+    await step('Tab to the first chip', async () => {
+      await userEvent.tab();
+      await waitFor(() => {
+        expect(canvas.getByTestId('vocabulary-tooltip')).toBeVisible();
+      });
+    });
+    await step('Arrow right to focus next chip', async () => {
+      await userEvent.keyboard('{ArrowRight}');
+      await waitFor(() => {
+        expect(canvas.getByTestId('speaking-tooltip')).toBeVisible();
+      });
+    });
+    await step('Hover third chip', async () => {
+      await userEvent.hover(canvas.getByRole('button', {
+        name: /Remove Listening/
+      }));
+      await waitFor(() => {
+        expect(canvas.getByTestId('listening-tooltip')).toBeVisible();
+      });
+    });
+  }
+}`,...(Oe=(qe=F.parameters)==null?void 0:qe.docs)==null?void 0:Oe.source},description:{story:"If you need to wrap individual chips in a component like [\\<Tooltip/>](/docs/components-tooltip--docs),\nyou can use render `<SingleSelectChipsItem/>` as children.",...(ze=(_e=F.parameters)==null?void 0:_e.docs)==null?void 0:ze.description}}};var Pe,Ge,Ne;T.parameters={...T.parameters,docs:{...(Pe=T.parameters)==null?void 0:Pe.docs,source:{originalSource:`{
+  tags: ['!autodocs'],
+  parameters: {
+    remountable: false
+  },
+  args: {
+    'aria-label': 'Chips states',
+    value: ['rest', 'hover', 'focus', 'active', 'disabled'],
+    items: undefined,
+    children: <>
+                <DismissibleChipsItem value="rest">Rest</DismissibleChipsItem>
+                <DismissibleChipsItem value="focus" dsInternalSimulation="focus">
+                    Focus
+                </DismissibleChipsItem>
+                <DismissibleChipsItem value="hover" dsInternalSimulation="hover">
+                    Hover
+                </DismissibleChipsItem>
+                <DismissibleChipsItem value="active" dsInternalSimulation="active">
+                    Active
+                </DismissibleChipsItem>
+                <DismissibleChipsItem value="disabled" disabled>
+                    Disabled
+                </DismissibleChipsItem>
+            </>
+  }
+}`,...(Ne=(Ge=T.parameters)==null?void 0:Ge.docs)==null?void 0:Ne.source}}};var $e,Ze,Ke,Ye,Je;I.parameters={...I.parameters,docs:{...($e=I.parameters)==null?void 0:$e.docs,source:{originalSource:`{
+  parameters: {
+    remountable: false
+  },
+  decorators: [Story => <div style={{
+    maxWidth: 150,
+    margin: '0 auto'
+  }}>
+                <Story />
+            </div>],
+  args: {
+    'aria-label': 'Long label',
+    value: ['long'],
+    items: [{
+      value: 'long',
+      icon: TokyoUIEmojiFrowning,
+      label: "I'm way too long to be a chip label, I don't know what to do with myself"
+    }]
+  }
+}`,...(Ke=(Ze=I.parameters)==null?void 0:Ze.docs)==null?void 0:Ke.source},description:{story:"Please, don't use long labels for chips.",...(Je=(Ye=I.parameters)==null?void 0:Ye.docs)==null?void 0:Je.description}}};const ct=["Uncontrolled","Controlled","Disabled","WithIcons","WithCounter","WithFlags","CombiningCounterWithIconOrFlag","Vertical","CombinationWithButton","RovingTabindex","Accessibility","WithTooltips","States","LongLabel"];export{V as Accessibility,R as CombinationWithButton,k as CombiningCounterWithIconOrFlag,y as Controlled,h as Disabled,I as LongLabel,C as RovingTabindex,T as States,b as Uncontrolled,B as Vertical,w as WithCounter,f as WithFlags,v as WithIcons,F as WithTooltips,ct as __namedExportsOrder,rt as default};

package/dist/assets/Divider-DECo0bYW.css

@@ -0,0 +1 @@
+.Divider__o9--B{all:unset;display:block;border-radius:0}.Divider__o9--B.size-small__QrAgV{height:var(--f3fdd6);background:var(--c03289)}.Divider__o9--B.size-large__agPv9{height:var(--53860b);background:var(--fede46)}