@preply/ds-docs 9.0.1 → 9.1.0

package/dist/assets/DismissibleChips-CRFGhm8B.js

@@ -0,0 +1 @@
+import{r as k,j as e,g as V}from"./iframe-CpMEswOF.js";import{u as x}from"./useControllableState-ouxkeS_b.js";import{c as j,$ as R,C as I,a as z,b as _,d as E,e as L}from"./createRequiredContext-63KJmEaI.js";import{F as N}from"./TokyoUIClose-C1pVTvLz.js";import{V as A}from"./VisuallyHidden-lSSiGvdb.js";import"./index-DT-MbRPK.js";import{g as S}from"./shared-strings-BChji30Y.js";import{f as w}from"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import{I as T}from"./Icon-BX3I9JNh.js";import{M as F}from"./message-CTdBLxyt.js";import{w as q}from"./componentNames-hc9KR2nX.js";const[M,B]=j("DismissibleChips"),C=k.forwardRef(function({items:l,children:r,orientation:t,"aria-label":o,"aria-controls":m,value:c,onValueChange:d,defaultValue:p,dataset:f,...h},b){const[n,g]=x({value:c,onValueChange:d,defaultValue:p??[]}),u=v=>{g(n.filter(a=>a!==v))},i=l?l.map(({label:v,value:a,...D})=>e.jsx(y,{value:a,...D,children:v},a)):r;return e.jsx(M,{value:{values:n,onRemove:u,ariaControls:m},children:e.jsx(E,{orientation:t,children:e.jsx(L,{...w(h),ref:b,orientation:t,"aria-label":o,...V(f,{preplyDsComponent:q.DismissibleChips}),children:i})})})}),y=k.forwardRef(function({value:l,children:r,icon:t,countryFlagCode:o,disabled:m,counter:c,dataset:d,dsInternalSimulation:p,...f},h){const{values:b,onRemove:n,ariaControls:g}=B(),u=R(),i=()=>{n(l),u==null||u.focusNext({wrap:!0})},v=a=>{switch(a.key){case"Delete":case"Backspace":i();break}};return b.includes(l)?e.jsx(I,{children:e.jsxs(z,{...w(f),ref:h,variant:"dismissible",onClick:i,onKeyDown:v,icon:t,countryFlagCode:o,disabled:m,"aria-controls":g,dsInternalSimulation:p,...V(d,{preplyDsComponent:q.DismissibleChipsItem}),children:[e.jsx(A,{children:e.jsx(F,{...S.remove})}),e.jsx(_,{counter:c,children:r}),e.jsx(T,{svg:N})]})}):null});try{C.displayName="DismissibleChips",C.__docgenInfo={description:"A chips component for displaying dismissible/removable items.",displayName:"DismissibleChips",props:{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:"T[]"}]}},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:"T[]"}]}},"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"}]}},"aria-label":{defaultValue:null,description:"Accessible label for the chips group. Required for screen reader users",name:"aria-label",required:!0,type:{name:"string"}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},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[]) => void"}]}},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, "value" | "children" | "dsInternalSimulation"> & { value: NonNullable<T>; label: ReactNode; })[]'}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}},ref:{defaultValue:null,description:"",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"(instance: HTMLUListElement | null) => void"},{value:"RefObject<HTMLUListElement>"}]}}}}}catch{}try{y.displayName="DismissibleChipsItem",y.__docgenInfo={description:"Individual dismissible chip item for use within DismissibleChips.",displayName:"DismissibleChipsItem",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:'"id"'},{value:'"is"'},{value:'"af"'},{value:'"ax"'},{value:'"al"'},{value:'"dz"'},{value:'"as"'},{value:'"ad"'},{value:'"ao"'},{value:'"ai"'},{value:'"aq"'},{value:'"ag"'},{value:'"ar"'},{value:'"am"'},{value:'"aw"'},{value:'"sh-ac"'},{value:'"asean"'},{value:'"au"'},{value:'"at"'},{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:'"br"'},{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:'"td"'},{value:'"cl"'},{value:'"cn"'},{value:'"cx"'},{value:'"cp"'},{value:'"cc"'},{value:'"co"'},{value:'"km"'},{value:'"ck"'},{value:'"cr"'},{value:'"hr"'},{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:'"li"'},{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:'"th"'},{value:'"tl"'},{value:'"tg"'},{value:'"tk"'},{value:'"to"'},{value:'"tt"'},{value:'"sh-ta"'},{value:'"tn"'},{value:'"tm"'},{value:'"tc"'},{value:'"tv"'},{value:'"tr"'},{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{y as D,C as a};

package/dist/assets/{DismissibleChips.stories-DgeyF-ao.js → DismissibleChips.stories-Bi-ob_1G.js}

@@ -1,4 +1,4 @@
-import{j as e,r as j}from"./iframe-rPxPheSO.js";import{D as p,a as m}from"./DismissibleChips-Ban3NVPS.js";import{F as L,a as Qe,b as Xe,c as na}from"./TokyoUIAvailability7LateNight-Bu_wDbHq.js";import{F as ia}from"./TokyoUIEmojiFrowning-DlNteo5p.js";import{F as sa}from"./index-Ch8cwrP-.js";import{L as g}from"./LayoutFlex-8VEpbYm2.js";import{T as E}from"./Text-DadiF3bg.js";import{L as oa}from"./Link-A5JmQWbD.js";import{H as la}from"./Heading-BFtiYfNT.js";import{d as ra}from"./styled-components.browser.esm-Do9--Umw.js";import{B as D}from"./Button-DGeBRRiu.js";import{T as S}from"./Tooltip-RkXcTs0t.js";import"./preload-helper-Dp1pzeXC.js";import"./useControllableState-BGQSGH6e.js";import"./useStableCallback-CM7WIg73.js";import"./createRequiredContext-Co5wTaFA.js";import"./Icon-C5UQdb5e.js";import"./text-accent-DectBi3u.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-CYz0RSbb.js";import"./componentNames-Dts5uwdK.js";import"./CountryFlag-CIdWr2XO.js";import"./useMergeRefs-B0tLxB64.js";import"./TokyoUIClose-CdBZGlA7.js";import"./VisuallyHidden-Ck1Kevby.js";import"./shared-strings-DqJVAlTT.js";import"./message-CVBYHxuJ.js";import"./layout-relative.module-D5jJ_Wjz.js";import"./text-centered-nlNU1AO2.js";import"./useHostname-CSCtqnDM.js";import"./emotion-unitless.esm-BZwEwAnk.js";import"./ButtonBase-DNBAX75l.js";import"./Spinner-DMKptX0-.js";import"./useMergeRefs-D3-2wqPW.js";import"./index-CC6DAVyL.js";const{expect:a,within:u,fn:ca,userEvent:l,resetAllMocks:ea,waitFor:A}=__STORYBOOK_MODULE_TEST__,Ka={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(D,{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 H;const y={render:function({defaultValue:t,...n}){const[s,o]=j.useState(t);H=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(),H(["listening","reading"]),await A(()=>{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(L,{})},{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(L,{}),counter:1247},{value:"counter+flag",label:"Flag + Counter",countryFlagCode:"ua",counter:1247},{value:"icon+flag",label:"Icon + Flag",icon:e.jsx(L,{}),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(D,{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"}],ua=[{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"}],da=[{value:"morning",label:"Morning (6-12)",icon:e.jsx(L,{})},{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(na,{})}],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(E,{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(E,{variant:"large-semibold",children:"Which days work best for you?"}),e.jsx(m,{"aria-label":"Selected days",defaultValue:["monday","wednesday","friday"],items:ua})]}),e.jsxs(g,{direction:"column",alignItems:"stretch",gap:"16",children:[e.jsx(E,{variant:"large-semibold",children:"What times of day work for you?"}),e.jsx(m,{"aria-label":"Selected times",defaultValue:["morning","afternoon"],items:da})]})]})},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()})}},pa=ra.ul`
+import{j as e,r as j}from"./iframe-CpMEswOF.js";import{D as p,a as m}from"./DismissibleChips-CRFGhm8B.js";import{F as L,a as Qe,b as Xe,c as na}from"./TokyoUIAvailability7LateNight-CjHQEFhh.js";import{F as ia}from"./TokyoUIEmojiFrowning-D-sR3DAq.js";import{F as sa}from"./index-DT-MbRPK.js";import{L as g}from"./LayoutFlex-BnIoY5YK.js";import{T as E}from"./Text-cq49jjad.js";import{L as oa}from"./Link-C686zlPi.js";import{H as la}from"./Heading-Bie8QWaf.js";import{d as ra}from"./styled-components.browser.esm-DsMoKq9m.js";import{B as D}from"./Button-KCBOR544.js";import{T as S}from"./Tooltip-Zk6DNyQp.js";import"./preload-helper-Dp1pzeXC.js";import"./useControllableState-ouxkeS_b.js";import"./useStableCallback-DHq1eG2Q.js";import"./createRequiredContext-63KJmEaI.js";import"./Icon-BX3I9JNh.js";import"./text-accent-DZ_ihUdH.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-c7okze1K.js";import"./componentNames-hc9KR2nX.js";import"./CountryFlag-CSGb4nau.js";import"./useMergeRefs-BVh7Ch_S.js";import"./TokyoUIClose-C1pVTvLz.js";import"./VisuallyHidden-lSSiGvdb.js";import"./shared-strings-BChji30Y.js";import"./message-CTdBLxyt.js";import"./layout-relative.module-Bhi7U482.js";import"./text-centered-DiwR-QSx.js";import"./useHostname-BVhrcDgi.js";import"./emotion-unitless.esm-BZwEwAnk.js";import"./ButtonBase-D1x6yeKi.js";import"./Spinner-lj2QA4al.js";import"./useMergeRefs-DkQLsYW4.js";import"./index-CC6DAVyL.js";const{expect:a,within:u,fn:ca,userEvent:l,resetAllMocks:ea,waitFor:A}=__STORYBOOK_MODULE_TEST__,Ka={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(D,{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 H;const y={render:function({defaultValue:t,...n}){const[s,o]=j.useState(t);H=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(),H(["listening","reading"]),await A(()=>{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(L,{})},{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(L,{}),counter:1247},{value:"counter+flag",label:"Flag + Counter",countryFlagCode:"ua",counter:1247},{value:"icon+flag",label:"Icon + Flag",icon:e.jsx(L,{}),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(D,{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"}],ua=[{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"}],da=[{value:"morning",label:"Morning (6-12)",icon:e.jsx(L,{})},{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(na,{})}],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(E,{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(E,{variant:"large-semibold",children:"Which days work best for you?"}),e.jsx(m,{"aria-label":"Selected days",defaultValue:["monday","wednesday","friday"],items:ua})]}),e.jsxs(g,{direction:"column",alignItems:"stretch",gap:"16",children:[e.jsx(E,{variant:"large-semibold",children:"What times of day work for you?"}),e.jsx(m,{"aria-label":"Selected times",defaultValue:["morning","afternoon"],items:da})]})]})},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()})}},pa=ra.ul`
     all: unset;
     list-style: none;
     display: flex;

package/dist/assets/{Divider-CBYEIgmI.js → Divider-CPpmQZmq.js}

@@ -1 +1 @@
-import{j as a}from"./iframe-rPxPheSO.js";import{w as r}from"./componentNames-Dts5uwdK.js";const l="Divider__o9--B",i={Divider:l,"size-small":"size-small__QrAgV","size-large":"size-large__agPv9"},s=({size:e="small"})=>a.jsx("hr",{className:`${i.Divider} ${i[`size-${e}`]}`,"data-preply-ds-component":r.Divider});try{s.displayName="Divider",s.__docgenInfo={description:"",displayName:"Divider",props:{size:{defaultValue:{value:"small"},description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"large"'},{value:'"small"'}]}}}}}catch{}export{s as D};
+import{j as a}from"./iframe-CpMEswOF.js";import{w as r}from"./componentNames-hc9KR2nX.js";const l="Divider__o9--B",i={Divider:l,"size-small":"size-small__QrAgV","size-large":"size-large__agPv9"},s=({size:e="small"})=>a.jsx("hr",{className:`${i.Divider} ${i[`size-${e}`]}`,"data-preply-ds-component":r.Divider});try{s.displayName="Divider",s.__docgenInfo={description:"",displayName:"Divider",props:{size:{defaultValue:{value:"small"},description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"small"'},{value:'"large"'}]}}}}}catch{}export{s as D};

package/dist/assets/{Divider.stories-C12psIEV.js → Divider.stories-CfHb5qbc.js}

@@ -1,4 +1,4 @@
-import{j as s}from"./iframe-rPxPheSO.js";import{D as p}from"./Divider-CBYEIgmI.js";import"./preload-helper-Dp1pzeXC.js";import"./componentNames-Dts5uwdK.js";const u={title:"Components/Divider",component:p,decorators:[n=>s.jsx("div",{style:{padding:"24px 12px 48px"},children:s.jsx(n,{})})],argTypes:{size:{control:{type:"select",labels:["small","large"]}}}},r={args:{size:"small"}},e={args:{size:"large"}};var a,o,t;r.parameters={...r.parameters,docs:{...(a=r.parameters)==null?void 0:a.docs,source:{originalSource:`{
+import{j as s}from"./iframe-CpMEswOF.js";import{D as p}from"./Divider-CPpmQZmq.js";import"./preload-helper-Dp1pzeXC.js";import"./componentNames-hc9KR2nX.js";const u={title:"Components/Divider",component:p,decorators:[n=>s.jsx("div",{style:{padding:"24px 12px 48px"},children:s.jsx(n,{})})],argTypes:{size:{control:{type:"select",labels:["small","large"]}}}},r={args:{size:"small"}},e={args:{size:"large"}};var a,o,t;r.parameters={...r.parameters,docs:{...(a=r.parameters)==null?void 0:a.docs,source:{originalSource:`{
   args: {
     size: 'small'
   }

package/dist/assets/{DocsRenderer-GHJI37HO-CG8Y-g_n.js → DocsRenderer-GHJI37HO-DtP4EKUP.js}

@@ -1,2 +1,2 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./index-Bzd5dlB9.js","./iframe-rPxPheSO.js","./preload-helper-Dp1pzeXC.js","./iframe-u_WKqRSx.css"])))=>i.map(i=>d[i]);
-import{_ as m}from"./preload-helper-Dp1pzeXC.js";import{r as s,R as n,Y as p,Z as h,$ as E,a0 as d}from"./iframe-rPxPheSO.js";import{c as R}from"./client-BT9FXva8.js";var a=new Map;function v(){return globalThis.IS_REACT_ACT_ENVIRONMENT}var f=({callback:e,children:t})=>{let r=s.useRef();return s.useLayoutEffect(()=>{r.current!==e&&(r.current=e,e())},[e]),t};typeof Promise.withResolvers>"u"&&(Promise.withResolvers=()=>{let e=null,t=null;return{promise:new Promise((r,o)=>{e=r,t=o}),resolve:e,reject:t}});var w=async(e,t,r)=>{let o=await x(t,r);if(v()){o.render(e);return}let{promise:i,resolve:u}=Promise.withResolvers();return o.render(s.createElement(f,{callback:u},e)),i},_=(e,t)=>{let r=a.get(e);r&&(r.unmount(),a.delete(e))},x=async(e,t)=>{let r=a.get(e);return r||(r=R.createRoot(e,t),a.set(e,r)),r},g={code:E,a:h,...p},y=class extends s.Component{constructor(){super(...arguments),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(e){let{showException:t}=this.props;t(e)}render(){let{hasError:e}=this.state,{children:t}=this.props;return e?null:n.createElement(n.Fragment,null,t)}},A=class{constructor(){this.render=async(e,t,r)=>{let o={...g,...t==null?void 0:t.components},i=d;return new Promise((u,l)=>{m(async()=>{const{MDXProvider:c}=await import("./index-Bzd5dlB9.js");return{MDXProvider:c}},__vite__mapDeps([0,1,2,3]),import.meta.url).then(({MDXProvider:c})=>w(n.createElement(y,{showException:l,key:Math.random()},n.createElement(c,{components:o},n.createElement(i,{context:e,docsParameter:t}))),r)).then(()=>u())})},this.unmount=e=>{_(e)}}};export{A as DocsRenderer,g as defaultComponents};
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./index-Cc28ZUNU.js","./iframe-CpMEswOF.js","./preload-helper-Dp1pzeXC.js","./iframe-DR4kltvM.css"])))=>i.map(i=>d[i]);
+import{_ as m}from"./preload-helper-Dp1pzeXC.js";import{r as s,R as n,Y as p,Z as h,$ as E,a0 as d}from"./iframe-CpMEswOF.js";import{c as R}from"./client-DvDoBCIp.js";var a=new Map;function v(){return globalThis.IS_REACT_ACT_ENVIRONMENT}var f=({callback:e,children:t})=>{let r=s.useRef();return s.useLayoutEffect(()=>{r.current!==e&&(r.current=e,e())},[e]),t};typeof Promise.withResolvers>"u"&&(Promise.withResolvers=()=>{let e=null,t=null;return{promise:new Promise((r,o)=>{e=r,t=o}),resolve:e,reject:t}});var w=async(e,t,r)=>{let o=await x(t,r);if(v()){o.render(e);return}let{promise:i,resolve:u}=Promise.withResolvers();return o.render(s.createElement(f,{callback:u},e)),i},_=(e,t)=>{let r=a.get(e);r&&(r.unmount(),a.delete(e))},x=async(e,t)=>{let r=a.get(e);return r||(r=R.createRoot(e,t),a.set(e,r)),r},g={code:E,a:h,...p},y=class extends s.Component{constructor(){super(...arguments),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(e){let{showException:t}=this.props;t(e)}render(){let{hasError:e}=this.state,{children:t}=this.props;return e?null:n.createElement(n.Fragment,null,t)}},A=class{constructor(){this.render=async(e,t,r)=>{let o={...g,...t==null?void 0:t.components},i=d;return new Promise((u,l)=>{m(async()=>{const{MDXProvider:c}=await import("./index-Cc28ZUNU.js");return{MDXProvider:c}},__vite__mapDeps([0,1,2,3]),import.meta.url).then(({MDXProvider:c})=>w(n.createElement(y,{showException:l,key:Math.random()},n.createElement(c,{components:o},n.createElement(i,{context:e,docsParameter:t}))),r)).then(()=>u())})},this.unmount=e=>{_(e)}}};export{A as DocsRenderer,g as defaultComponents};