@preply/ds-docs 11.0.0 → 11.1.0

package/dist/assets/SelectField-_eSdIkCW.js

@@ -0,0 +1,19 @@
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,pt as i,t as a,w as o}from"./dist-DtfJeYQK.js";import{t as s}from"./jsx-runtime-C2wGStra.js";import{A as c,D as l,F as u,I as d,L as f,M as p,N as m,O as h,P as g,R as _,_ as v,g as y,j as b,k as ee,m as x}from"./iframe-f34VuKy-.js";import{n as S,t as te}from"./TokyoUIChevronDown-CS0lTt7n.js";import{n as C,t as w}from"./dist-Cc1j9Pjk.js";import{n as T,t as E}from"./Icon-CfZyHxyH.js";import{n as D,t as O}from"./FormControl-cSvM3XwI.js";import{n as k,t as A}from"./TokyoUICheckmark-6GaMBtS8.js";var j,M,N,P,F,I,L,R,z,B=t((()=>{j=`trigger__XRceG`,M=`chevron__ENwnv`,N=`content__NHVeq`,P=`viewport__aqXUS`,F=`item__7lwGu`,I=`indicator__NkOzD`,L=`group__feJjZ`,R=`groupLabel__VdJlH`,z={trigger:j,chevron:M,content:N,viewport:P,item:F,indicator:I,group:L,groupLabel:R,"mobile-content-show":`mobile-content-show__1QhLc`,"mobile-content-hide":`mobile-content-hide__Rqzas`,"fade-in":`fade-in__Xw3bI`,"fade-out":`fade-out__4u9tF`}}));function V(e){let t=`(min-width: ${i[e]}px)`,[n,r]=(0,H.useState)(!1);return(0,H.useEffect)(()=>{let e=window.matchMedia(t);r(e.matches);let n=e=>{r(e.matches)};return e.addEventListener(`change`,n),()=>{e.removeEventListener(`change`,n)}},[t]),n}var H,U=t((()=>{o(),H=e(n(),1)}));function W({value:e,disabled:t,children:n,leadingIcon:i,dataset:a}){return(0,q.jsxs)(c,{value:e,disabled:t,className:z.item,...r(a,{preplyDsComponent:C.SelectFieldOption}),children:[i,(0,q.jsx)(p,{children:n}),(0,q.jsx)(b,{className:z.indicator,children:(0,q.jsx)(E,{svg:A})})]})}function G({children:e,label:t}){return(0,q.jsxs)(h,{className:z.group,children:[(0,q.jsx)(m,{className:z.groupLabel,children:t}),e]})}var K,q,J,ne=t((()=>{K=e(n(),1),v(),a(),x(),w(),S(),k(),T(),B(),U(),q=s(),J=(0,K.forwardRef)(function({value:e,defaultValue:t,placeholder:n,disabled:i,onValueChange:a,children:o,dataset:s,icon:c,name:p,id:m,required:h,onFocus:v,onBlur:b,onKeyDown:x,onKeyUp:S,"aria-label":w,"aria-labelledby":T,"aria-describedby":D,"aria-invalid":O,"aria-errormessage":k},A){let[j,M]=(0,K.useState)(!1),N=y(),P=r(s,{preplyDsComponent:C.Select}),F=V(`medium-s`);return(0,q.jsxs)(u,{value:e,defaultValue:t,onValueChange:e=>{a?.(e)},disabled:i,name:p,open:j,onOpenChange:M,required:h,children:[(0,q.jsxs)(d,{ref:A,id:m,className:z.trigger,onFocus:v,onBlur:b,onKeyDown:x,onKeyUp:S,"aria-label":w,"aria-labelledby":T,"aria-describedby":D,"aria-invalid":O,"aria-errormessage":k,...P,children:[c,(0,q.jsx)(f,{placeholder:n}),(0,q.jsx)(ee,{className:z.chevron,children:(0,q.jsx)(E,{svg:te})})]}),(0,q.jsx)(g,{container:N,children:(0,q.jsx)(l,{position:F?`popper`:void 0,sideOffset:F?5:void 0,className:z.content,children:(0,q.jsx)(_,{className:z.viewport,role:`group`,tabIndex:0,children:o})})})]})});try{W.displayName=`SelectOption`,W.__docgenInfo={description:``,displayName:`SelectOption`,props:{value:{defaultValue:null,description:``,name:`value`,required:!0,type:{name:`string`}},disabled:{defaultValue:null,description:``,name:`disabled`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},leadingIcon:{defaultValue:null,description:``,name:`leadingIcon`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}try{G.displayName=`SelectGroup`,G.__docgenInfo={description:``,displayName:`SelectGroup`,props:{label:{defaultValue:null,description:``,name:`label`,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`}]}}}}}catch{}try{J.displayName=`Select`,J.__docgenInfo={description:``,displayName:`Select`,props:{id:{defaultValue:null,description:``,name:`id`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},"aria-describedby":{defaultValue:null,description:`Identifies the element (or elements) that describes the object.
+@see aria-labelledby`,name:`aria-describedby`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},"aria-errormessage":{defaultValue:null,description:`Identifies the element that provides an error message for the object.
+@see aria-invalid
+@see aria-describedby.`,name:`aria-errormessage`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},"aria-invalid":{defaultValue:null,description:`Indicates the entered value does not conform to the format expected by the application.
+@see aria-errormessage.`,name:`aria-invalid`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`},{value:`"false"`},{value:`"true"`},{value:`"grammar"`},{value:`"spelling"`}]}},"aria-label":{defaultValue:null,description:`Defines a string value that labels the current element.
+@see aria-labelledby.`,name:`aria-label`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},"aria-labelledby":{defaultValue:null,description:`Identifies the element (or elements) that labels the current element.
+@see aria-describedby.`,name:`aria-labelledby`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},onFocus:{defaultValue:null,description:``,name:`onFocus`,required:!1,type:{name:`enum`,value:[{value:`FocusEventHandler<HTMLButtonElement>`}]}},onBlur:{defaultValue:null,description:``,name:`onBlur`,required:!1,type:{name:`enum`,value:[{value:`FocusEventHandler<HTMLButtonElement>`}]}},onKeyDown:{defaultValue:null,description:``,name:`onKeyDown`,required:!1,type:{name:`enum`,value:[{value:`KeyboardEventHandler<HTMLButtonElement>`}]}},onKeyUp:{defaultValue:null,description:``,name:`onKeyUp`,required:!1,type:{name:`enum`,value:[{value:`KeyboardEventHandler<HTMLButtonElement>`}]}},value:{defaultValue:null,description:`Controlled value of the select`,name:`value`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},defaultValue:{defaultValue:null,description:`Default value when uncontrolled`,name:`defaultValue`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},placeholder:{defaultValue:null,description:`Placeholder text when no value is selected`,name:`placeholder`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},disabled:{defaultValue:null,description:`Whether the select is disabled`,name:`disabled`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},onValueChange:{defaultValue:null,description:`Callback when value changes`,name:`onValueChange`,required:!1,type:{name:`enum`,value:[{value:`(value: string) => void`}]}},children:{defaultValue:null,description:`Items to display in the select`,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`}]}},dataset:{defaultValue:null,description:`Dataset for the trigger element`,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},icon:{defaultValue:null,description:`Icon to display on the left side`,name:`icon`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},name:{defaultValue:null,description:`HTML name attribute`,name:`name`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},required:{defaultValue:null,description:`Whether the select is required`,name:`required`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},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{}})),Y,X,Z,Q,$,re=t((()=>{Y=e(n(),1),w(),D(),ne(),X=s(),Z=(0,Y.forwardRef)(function({id:e,label:t,description:n,error:r,required:i,dataset:a,hideLabel:o,hasError:s,useLegacyRequiredLabel:c,inputDataset:l,...u},d){return(0,X.jsx)(O,{id:e,label:t,description:n,error:r,hasError:s,required:i,dataset:a,hideLabel:o,useLegacyRequiredLabel:c,preplyDsComponent:C.SelectField,children:(0,X.jsx)(J,{ref:d,dataset:l,...u})})}),Q=W,$=G;try{Z.displayName=`SelectField`,Z.__docgenInfo={description:``,displayName:`SelectField`,props:{id:{defaultValue:null,description:`The id to be passed to the input element.
+If not provided, will be generated for accessibility purposes.`,name:`id`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},onClick:{defaultValue:null,description:``,name:`onClick`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler<HTMLDivElement>`}]}},label:{defaultValue:null,description:"The field label. This is needed for accessibility purposes, but can be\nhidden using the `hideLabel` prop.",name:`label`,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`}]}},required:{defaultValue:null,description:`Indicates if the field is required. When false, adds a "Optional"
+indicator next to the label.
+Whether the select is required`,name:`required`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},hideLabel:{defaultValue:null,description:"Use this to hide the `label` visually, but keep it in the accessibility\ntree.",name:`hideLabel`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},description:{defaultValue:null,description:`Additional descriptive text that appears below the input field
+to provide more context or instructions to the user.`,name:`description`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},error:{defaultValue:null,description:`Error message to display when the field has an invalid value.`,name:`error`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},hasError:{defaultValue:null,description:"Whether the field has an error.\n@deprecated Use `error` prop to explicitly describe the error to users",name:`hasError`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},useLegacyRequiredLabel:{defaultValue:null,description:`When true, adds a "Required" indicator next to the label for the required fields.
+When false, adds a "Optional" indicator next to the label for the optional fields instead.
+@deprecated This is a temporary solution for gradual migration to the "Optional" label.`,name:`useLegacyRequiredLabel`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},defaultValue:{defaultValue:null,description:`Default value when uncontrolled`,name:`defaultValue`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},"aria-describedby":{defaultValue:null,description:`Identifies the element (or elements) that describes the object.
+@see aria-labelledby`,name:`aria-describedby`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},"aria-errormessage":{defaultValue:null,description:`Identifies the element that provides an error message for the object.
+@see aria-invalid
+@see aria-describedby.`,name:`aria-errormessage`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},"aria-invalid":{defaultValue:null,description:`Indicates the entered value does not conform to the format expected by the application.
+@see aria-errormessage.`,name:`aria-invalid`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`},{value:`"false"`},{value:`"true"`},{value:`"grammar"`},{value:`"spelling"`}]}},"aria-label":{defaultValue:null,description:`Defines a string value that labels the current element.
+@see aria-labelledby.`,name:`aria-label`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},"aria-labelledby":{defaultValue:null,description:`Identifies the element (or elements) that labels the current element.
+@see aria-describedby.`,name:`aria-labelledby`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},children:{defaultValue:null,description:`Items to display in the select`,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`}]}},onFocus:{defaultValue:null,description:``,name:`onFocus`,required:!1,type:{name:`enum`,value:[{value:`FocusEventHandler<HTMLButtonElement>`}]}},onBlur:{defaultValue:null,description:``,name:`onBlur`,required:!1,type:{name:`enum`,value:[{value:`FocusEventHandler<HTMLButtonElement>`}]}},onKeyDown:{defaultValue:null,description:``,name:`onKeyDown`,required:!1,type:{name:`enum`,value:[{value:`KeyboardEventHandler<HTMLButtonElement>`}]}},onKeyUp:{defaultValue:null,description:``,name:`onKeyUp`,required:!1,type:{name:`enum`,value:[{value:`KeyboardEventHandler<HTMLButtonElement>`}]}},name:{defaultValue:null,description:`HTML name attribute`,name:`name`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},disabled:{defaultValue:null,description:`Whether the select is disabled`,name:`disabled`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},value:{defaultValue:null,description:`Controlled value of the select`,name:`value`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},placeholder:{defaultValue:null,description:`Placeholder text when no value is selected`,name:`placeholder`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},icon:{defaultValue:null,description:`Icon to display on the left side`,name:`icon`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},onValueChange:{defaultValue:null,description:`Callback when value changes`,name:`onValueChange`,required:!1,type:{name:`enum`,value:[{value:`(value: string) => void`}]}},inputDataset:{defaultValue:null,description:`Dataset for the input element`,name:`inputDataset`,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{}try{Q.displayName=`SelectFieldOption`,Q.__docgenInfo={description:``,displayName:`SelectFieldOption`,props:{value:{defaultValue:null,description:``,name:`value`,required:!0,type:{name:`string`}},disabled:{defaultValue:null,description:``,name:`disabled`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},leadingIcon:{defaultValue:null,description:``,name:`leadingIcon`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}try{$.displayName=`SelectFieldGroup`,$.__docgenInfo={description:``,displayName:`SelectFieldGroup`,props:{label:{defaultValue:null,description:``,name:`label`,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`}]}}}}}catch{}}));export{re as i,$ as n,Q as r,Z as t};

package/dist/assets/SelectField-jvir0s5w.css

@@ -0,0 +1 @@
+@keyframes fade-in__Xw3bI{0%{opacity:0}to{opacity:1}}@keyframes fade-out__4u9tF{0%{opacity:1}to{opacity:0}}@keyframes mobile-content-show__1QhLc{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes mobile-content-hide__Rqzas{0%{transform:translateY(0)}to{transform:translateY(100%)}}.trigger__XRceG{all:unset;cursor:pointer;background-color:var(--3546c3);color:var(--628fb7);font-weight:var(--1bc44d);font-size:var(--9c8f04);line-height:var(--3dd5bc);--border-size:var(--26b8e3);border:var(--border-size) solid var(--c03289);border-radius:var(--fa4b1a);height:var(--51a539);width:100%;padding-inline:calc(var(--558c4c) - var(--border-size)) calc(var(--66b80b) - var(--border-size));align-items:center;gap:var(--66b80b);box-sizing:border-box;transition:background-color .22s cubic-bezier(.22,1,.36,1),border-color .22s cubic-bezier(.22,1,.36,1);display:flex}.trigger__XRceG>.chevron__ENwnv{margin-inline-start:auto}.trigger__XRceG:focus-visible{outline-style:solid;outline-color:var(--603ec6);outline-width:var(--99d31f);outline-offset:var(--c0b12c)}.trigger__XRceG[data-placeholder]{color:var(--0bad98)}.trigger__XRceG[data-state=open]{border-color:var(--5b4fe9)}.trigger__XRceG[data-state=open]>.chevron__ENwnv{rotate:180deg}.trigger__XRceG[disabled]{cursor:not-allowed;background-color:var(--319b29)}.trigger__XRceG[aria-invalid=true]{border-color:var(--7b0f41);background-color:var(--95df5b);color:var(--7b0f41)}.trigger__XRceG:hover:not([disabled]):not([aria-invalid=true]){background-color:var(--302ecf);border-color:var(--11d206)}.content__NHVeq{border-radius:var(--fa4b1a) var(--fa4b1a) 0 0;width:100%;padding:var(--813599);z-index:var(--ds-select-z-index-override,auto);background-color:var(--3546c3);box-shadow:var(--ecd97a);margin:auto;position:fixed;inset:auto 0 0}.content__NHVeq .viewport__aqXUS{gap:var(--590b8d);flex-direction:column;max-height:80vh;display:flex}@media (width>=700px){.content__NHVeq .viewport__aqXUS{max-height:min(500px, var(--radix-select-content-available-height))}}.content__NHVeq .item__7lwGu{cursor:pointer;width:100%;height:var(--51a539);color:var(--628fb7);font-weight:var(--1bc44d);font-size:var(--9c8f04);line-height:var(--3dd5bc);padding:var(--813599);border-radius:var(--5e8be4);align-items:center;gap:var(--66b80b);transition:background-color .22s cubic-bezier(.22,1,.36,1);display:flex}.content__NHVeq .item__7lwGu>.indicator__NkOzD{margin-inline-start:auto}.content__NHVeq .item__7lwGu[data-highlighted]:focus-visible{outline-style:solid;outline-color:var(--603ec6);outline-width:var(--99d31f);outline-offset:var(--c0b12c);outline-offset:-2px}.content__NHVeq .item__7lwGu[data-highlighted]:hover{background-color:var(--302ecf);outline:none}.content__NHVeq .item__7lwGu[data-state=checked]{background-color:var(--a5c761);outline:none}.content__NHVeq .group__feJjZ{gap:var(--590b8d);flex-direction:column;display:flex}.content__NHVeq .group__feJjZ .groupLabel__VdJlH{color:var(--628fb7);font-weight:var(--a3f251);font-size:var(--475c79);line-height:var(--e33d9e);padding-block:var(--813599) var(--590b8d);padding-inline:var(--813599)}.content__NHVeq .group__feJjZ:not(:first-child){border-top:var(--f3fdd6) solid var(--c03289);padding-top:var(--53860b)}@media (prefers-reduced-motion:no-preference){.content__NHVeq[data-state=open]{animation:.22s cubic-bezier(.22,1,.36,1) mobile-content-show__1QhLc}.content__NHVeq[data-state=closed]{animation:.22s cubic-bezier(.22,1,.36,1) mobile-content-hide__Rqzas}}@media (width>=700px){.content__NHVeq{min-width:var(--radix-select-trigger-width);border-radius:var(--fa4b1a);padding:var(--590b8d);margin:0;position:relative;inset:auto}.content__NHVeq[data-state=open]{animation:.22s cubic-bezier(.22,1,.36,1) forwards fade-in__Xw3bI}.content__NHVeq[data-state=closed]{animation:.22s cubic-bezier(.22,1,.36,1) forwards fade-out__4u9tF}}

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

@@ -0,0 +1,517 @@
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Icon-CfZyHxyH.js";import{n as o,t as s}from"./Button-DnVrHohm.js";import{n as c,t as l}from"./CountryFlag-DMEPQuIc.js";import{n as u,t as d}from"./Dialog-DCPUOQU4.js";import{i as f,n as p,r as m,t as h}from"./SelectField-_eSdIkCW.js";import{n as g,t as _}from"./TokyoUILanguage-B0kNm-zw.js";var v,y,b,x,S,C,w,T,E,D,O,k,A,j,M,N,P,F,I,L,R,z,B,V,H,U,W,G,K;t((()=>{v=e(n(),1),g(),i(),f(),u(),o(),c(),y=r(),{expect:b,userEvent:x,within:S,fn:C,waitFor:w}=__STORYBOOK_MODULE_TEST__,T={title:`components/SelectField`,component:h,subcomponents:{SelectFieldOption:m,SelectFieldGroup:p},parameters:{layout:`padded`},decorators:[e=>(0,y.jsx)(`div`,{style:{width:`min(300px, 100%)`,height:`300px`},children:(0,y.jsx)(e,{})})],args:{name:`language`,label:`Language`,placeholder:`Select a language`,defaultValue:``,dataset:{testid:`field`,foo:`bar`},inputDataset:{testid:`input`,foo:`bar`},onValueChange:C(),onBlur:C(),onFocus:C(),onClick:C(),onKeyDown:C(),onKeyUp:C(),children:(0,y.jsxs)(y.Fragment,{children:[(0,y.jsx)(m,{value:`english`,children:`English`}),(0,y.jsx)(m,{value:`spanish`,children:`Spanish`}),(0,y.jsx)(m,{value:`french`,children:`French`})]})}},E={a11y:{config:{rules:[{id:`aria-hidden-focus`,enabled:!1}]}}},D={parameters:E,play:async({canvasElement:e,step:t,args:n})=>{let r=S(e),i=r.getByTestId(`field`),a=r.getByTestId(`input`);await t(`it should render correct label`,async()=>{b(S(i).getByTestId(`label`)).toHaveTextContent(`Language • Optional`),b(a).toHaveAccessibleName(`Language`)}),await t(`it should call onFocus when the input is focused`,async()=>{a.focus(),b(n.onFocus).toHaveBeenCalled()}),await t(`it should open the menu`,async()=>{await x.keyboard(`{Enter}`),await w(async()=>{b(await r.findByRole(`listbox`)).toBeInTheDocument()})}),await t(`it should call callback when the value changes`,async()=>{await x.keyboard(`{Enter}`),b(n.onValueChange).toHaveBeenCalledWith(`english`),b(n.onBlur).toHaveBeenCalledTimes(1)}),await t(`it should call onBlur when the input is blurred`,async()=>{await x.keyboard(`{tab}`),b(n.onBlur).toHaveBeenCalledTimes(2)}),await t(`it should render the dataset props`,async()=>{b(i).toHaveAttribute(`data-testid`,`field`),b(i).toHaveAttribute(`data-foo`,`bar`),b(a).toHaveAttribute(`data-testid`,`input`),b(a).toHaveAttribute(`data-foo`,`bar`)}),await t(`it should render all options`,async()=>{a.focus(),await x.keyboard(`{Enter}`);let e=r.getByRole(`option`,{name:`English`}),t=r.getByRole(`option`,{name:`Spanish`}),n=r.getByRole(`option`,{name:`French`});b(e).toBeInTheDocument(),b(t).toBeInTheDocument(),b(n).toBeInTheDocument()})}},O={render:function(e){let[t,n]=(0,v.useState)(e.value);return(0,y.jsxs)(h,{...e,value:t,onValueChange:n,children:[(0,y.jsx)(m,{value:`english`,children:`English`}),(0,y.jsx)(m,{value:`spanish`,children:`Spanish`}),(0,y.jsx)(m,{value:`french`,children:`French`})]})},args:{label:`Language`,placeholder:`Select a language...`,value:`spanish`,defaultValue:void 0},play:async({canvas:e,step:t})=>{await t(`it should render the correct initial value`,async()=>{await b(e.getByTestId(`input`)).toHaveTextContent(`Spanish`)}),await t(`it should update the value when the user selects`,async()=>{let t=e.getByTestId(`input`);t.focus(),await x.keyboard(`{Enter}`),await x.keyboard(`{ArrowDown}`),await x.keyboard(`{Enter}`),b(t).toHaveTextContent(`French`)})}},k={args:{icon:(0,y.jsx)(a,{svg:_,dataset:{testid:`icon`}})},play:async({canvas:e,step:t})=>{await t(`it should render the icon`,async()=>{b(e.getByTestId(`icon`)).toBeInTheDocument()})}},A={args:{description:`We will use this to get a personalized choice of tutors`},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`),r=e.getByTestId(`description`);await t(`it should render the description`,async()=>{b(n).toHaveAccessibleDescription(`We will use this to get a personalized choice of tutors`),b(r).toHaveTextContent(`We will use this to get a personalized choice of tutors`)})}},j={args:{required:!0},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`),r=e.getByTestId(`label`);await t(`it should render correct label`,async()=>{b(n).toHaveAccessibleName(`Language`),b(r).toHaveTextContent(`Language`)}),await t(`it should render required attribute`,async()=>{b(n).toHaveAttribute(`aria-required`)})}},M={args:{hideLabel:!0},play:async({canvas:e,step:t})=>{await t(`it should render correct a11y label`,async()=>{b(e.getByTestId(`input`)).toHaveAccessibleName(`Language`)})}},N={args:{error:`This is an error message`},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`),r=e.getByTestId(`error`);await t(`it should render the error message`,async()=>{b(n).toHaveAccessibleErrorMessage(`This is an error message`),b(r).toHaveTextContent(`This is an error message`)})}},P={args:{disabled:!0},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`);await t(`it should render the disabled input`,async()=>{b(n).toHaveAttribute(`disabled`)})}},F={tags:[`!autodocs`],parameters:{...E,viewport:{defaultViewport:`narrow-l`}},play:async({canvas:e})=>{e.getByRole(`combobox`).click()}},I={parameters:{...E,viewport:{defaultViewport:`narrow-l`},chromatic:{modes:{"narrow-l":{viewport:`narrow-l`},"medium-s":{viewport:`medium-s`},"medium-l":{viewport:`medium-l`}}}},render:function(e){let[t,n]=(0,v.useState)(!0);return(0,y.jsxs)(y.Fragment,{children:[(0,y.jsx)(s,{onClick:()=>n(!0),children:`Open`}),(0,y.jsx)(d,{title:`Dialog With Select`,description:void 0,open:t,onClose:()=>n(!1),children:(0,y.jsx)(h,{...e})})]})},play:async({canvas:e})=>{let t=await e.findByRole(`combobox`);await x.click(t)}},L={parameters:E,args:{label:`Language with icons`,placeholder:`Select a language...`,children:(0,y.jsxs)(y.Fragment,{children:[(0,y.jsx)(m,{value:`english`,leadingIcon:(0,y.jsx)(a,{svg:_}),children:`English`}),(0,y.jsx)(m,{value:`spanish`,leadingIcon:(0,y.jsx)(a,{svg:_}),children:`Spanish`}),(0,y.jsx)(m,{value:`french`,leadingIcon:(0,y.jsx)(a,{svg:_}),children:`French`})]})},play:async({canvas:e})=>{e.getByRole(`combobox`).click()}},R={parameters:E,args:{label:`Language with country flags`,placeholder:`Select a language...`,children:(0,y.jsxs)(y.Fragment,{children:[(0,y.jsx)(m,{value:`english`,leadingIcon:(0,y.jsx)(l,{code:`gb`,alt:`English`,size:`medium`}),children:`English`}),(0,y.jsx)(m,{value:`spanish`,leadingIcon:(0,y.jsx)(l,{code:`es`,alt:`Spanish`,size:`medium`}),children:`Spanish`}),(0,y.jsx)(m,{value:`french`,leadingIcon:(0,y.jsx)(l,{code:`fr`,alt:`French`,size:`medium`}),children:`French`})]})},play:async({canvas:e})=>{e.getByRole(`combobox`).click()}},z={parameters:E,args:{label:`Languages by region`,placeholder:`Select a language...`,children:(0,y.jsxs)(y.Fragment,{children:[(0,y.jsxs)(p,{label:`European Languages`,children:[(0,y.jsx)(m,{value:`english`,children:`English`}),(0,y.jsx)(m,{value:`spanish`,children:`Spanish`}),(0,y.jsx)(m,{value:`french`,children:`French`}),(0,y.jsx)(m,{value:`german`,children:`German`})]}),(0,y.jsxs)(p,{label:`Asian Languages`,children:[(0,y.jsx)(m,{value:`mandarin`,children:`Mandarin`}),(0,y.jsx)(m,{value:`japanese`,children:`Japanese`}),(0,y.jsx)(m,{value:`korean`,children:`Korean`}),(0,y.jsx)(m,{value:`hindi`,children:`Hindi`})]})]})},play:async({canvas:e})=>{e.getByRole(`combobox`).click()}},B={parameters:E,args:{label:`Languages by region`,placeholder:`Select a language...`,children:(0,y.jsxs)(y.Fragment,{children:[(0,y.jsxs)(p,{label:`European Languages`,children:[(0,y.jsx)(m,{value:`english`,leadingIcon:(0,y.jsx)(l,{code:`gb`,alt:`English`,size:`medium`}),children:`English`}),(0,y.jsx)(m,{value:`spanish`,leadingIcon:(0,y.jsx)(l,{code:`es`,alt:`Spanish`,size:`medium`}),children:`Spanish`}),(0,y.jsx)(m,{value:`french`,leadingIcon:(0,y.jsx)(l,{code:`fr`,alt:`French`,size:`medium`}),children:`French`}),(0,y.jsx)(m,{value:`german`,leadingIcon:(0,y.jsx)(l,{code:`de`,alt:`German`,size:`medium`}),children:`German`})]}),(0,y.jsxs)(p,{label:`Asian Languages`,children:[(0,y.jsx)(m,{value:`mandarin`,leadingIcon:(0,y.jsx)(l,{code:`cn`,alt:`Mandarin`,size:`medium`}),children:`Mandarin`}),(0,y.jsx)(m,{value:`japanese`,leadingIcon:(0,y.jsx)(l,{code:`jp`,alt:`Japanese`,size:`medium`}),children:`Japanese`}),(0,y.jsx)(m,{value:`korean`,leadingIcon:(0,y.jsx)(l,{code:`kr`,alt:`Korean`,size:`medium`}),children:`Korean`}),(0,y.jsx)(m,{value:`hindi`,leadingIcon:(0,y.jsx)(l,{code:`in`,alt:`Hindi`,size:`medium`}),children:`Hindi`})]})]})},play:async({canvas:e})=>{e.getByRole(`combobox`).click()}},V={parameters:E,args:{label:`Select from many options`,placeholder:`Choose a number...`,children:(0,y.jsx)(y.Fragment,{children:Array.from({length:100},(e,t)=>(0,y.jsxs)(m,{value:String(t+1),children:[`Option `,t+1]},t+1))})},play:async({canvas:e})=>{e.getByRole(`combobox`).click()}},H={parameters:E,args:{label:`Select from long options`,placeholder:`Choose an option...`,children:(0,y.jsxs)(y.Fragment,{children:[(0,y.jsx)(m,{value:`one`,children:`Path unlocks frontend development`}),(0,y.jsx)(m,{value:`two`,children:`Path unlocks rapid, high-quality frontend development`}),(0,y.jsx)(m,{value:`three`,children:`Path unlocks rapid, high-quality frontend development and prototyping`})]})},play:async({canvas:e})=>{e.getByRole(`combobox`).click()}},U={parameters:E,decorators:[e=>(0,y.jsx)(`div`,{style:{width:`fit-content`},children:(0,y.jsx)(e,{})})],args:{label:`Options`,placeholder:`Select an option...`,defaultValue:`a`,children:(0,y.jsxs)(y.Fragment,{children:[(0,y.jsx)(m,{value:`a`,children:`A`}),(0,y.jsx)(m,{value:`b`,children:`BCDEFGHIJKLMNOPQRSTUVWXYZ`})]})},play:async({canvas:e})=>{e.getByRole(`combobox`).click()}},W={render:function(){return(0,v.useEffect)(()=>(document.body.style.setProperty(`--ds-select-z-index-override`,`20`),()=>{document.body.style.removeProperty(`--ds-select-z-index-override`)}),[]),(0,y.jsxs)(y.Fragment,{children:[(0,y.jsxs)(h,{label:`Language`,placeholder:`Select a language..`,children:[(0,y.jsx)(m,{value:`english`,children:`English`}),(0,y.jsx)(m,{value:`spanish`,children:`Spanish`}),(0,y.jsx)(m,{value:`french`,children:`French`})]}),(0,y.jsx)(`div`,{style:{position:`fixed`,zIndex:10,inset:`0`,backgroundColor:`lightgray`,pointerEvents:`none`,opacity:.5}})]})},play:async({canvas:e})=>{e.getByRole(`combobox`).click()}},G={parameters:{chromatic:{disableSnapshot:!0}},args:{label:`Language`,placeholder:`Select a subject`,description:`We will use this to get a personalized choice of tutors`,children:(0,y.jsxs)(y.Fragment,{children:[(0,y.jsx)(m,{value:`english`,children:`English`}),(0,y.jsx)(m,{value:`spanish`,children:`Spanish`}),(0,y.jsx)(m,{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":(0,y.jsx)(a,{svg:_,label:`Student with a hat`})},control:`select`},children:{control:!1},hasError:{table:{disable:!0}}}},D.parameters={...D.parameters,docs:{...D.parameters?.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();
+    });
+  }
+}`,...D.parameters?.docs?.source},description:{story:"An empty field with a `label` and a `placeholder`.",...D.parameters?.docs?.description}}},O.parameters={...O.parameters,docs:{...O.parameters?.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');
+    });
+  }
+}`,...O.parameters?.docs?.source},description:{story:`A controlled component where the value is managed by React state.`,...O.parameters?.docs?.description}}},k.parameters={...k.parameters,docs:{...k.parameters?.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();
+    });
+  }
+}`,...k.parameters?.docs?.source}}},A.parameters={...A.parameters,docs:{...A.parameters?.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');
+    });
+  }
+}`,...A.parameters?.docs?.source}}},j.parameters={...j.parameters,docs:{...j.parameters?.docs,source:{originalSource:`{
+  args: {
+    required: true
+  },
+  play: async ({
+    canvas,
+    step
+  }) => {
+    const input = canvas.getByTestId('input');
+    const label = canvas.getByTestId('label');
+    await step('it should render correct label', async () => {
+      expect(input).toHaveAccessibleName('Language');
+      expect(label).toHaveTextContent('Language');
+    });
+    await step('it should render required attribute', async () => {
+      expect(input).toHaveAttribute('aria-required');
+    });
+  }
+}`,...j.parameters?.docs?.source}}},M.parameters={...M.parameters,docs:{...M.parameters?.docs,source:{originalSource:`{
+  args: {
+    hideLabel: true
+  },
+  play: async ({
+    canvas,
+    step
+  }) => {
+    await step('it should render correct a11y label', async () => {
+      const input = canvas.getByTestId('input');
+      expect(input).toHaveAccessibleName('Language');
+    });
+  }
+}`,...M.parameters?.docs?.source}}},N.parameters={...N.parameters,docs:{...N.parameters?.docs,source:{originalSource:`{
+  args: {
+    error: 'This is an error message'
+  },
+  play: async ({
+    canvas,
+    step
+  }) => {
+    const input = canvas.getByTestId('input');
+    const error = canvas.getByTestId('error');
+    await step('it should render the error message', async () => {
+      expect(input).toHaveAccessibleErrorMessage('This is an error message');
+      expect(error).toHaveTextContent('This is an error message');
+    });
+  }
+}`,...N.parameters?.docs?.source}}},P.parameters={...P.parameters,docs:{...P.parameters?.docs,source:{originalSource:`{
+  args: {
+    disabled: true
+  },
+  play: async ({
+    canvas,
+    step
+  }) => {
+    const input = canvas.getByTestId('input');
+    await step('it should render the disabled input', async () => {
+      expect(input).toHaveAttribute('disabled');
+    });
+  }
+}`,...P.parameters?.docs?.source}}},F.parameters={...F.parameters,docs:{...F.parameters?.docs,source:{originalSource:`{
+  tags: ['!autodocs'],
+  parameters: {
+    ...disableA11yFocus,
+    viewport: {
+      defaultViewport: 'narrow-l'
+    }
+  },
+  play: async ({
+    canvas
+  }) => {
+    const select = canvas.getByRole('combobox');
+    select.click();
+  }
+}`,...F.parameters?.docs?.source}}},I.parameters={...I.parameters,docs:{...I.parameters?.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);
+  }
+}`,...I.parameters?.docs?.source}}},L.parameters={...L.parameters,docs:{...L.parameters?.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();
+  }
+}`,...L.parameters?.docs?.source}}},R.parameters={...R.parameters,docs:{...R.parameters?.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();
+  }
+}`,...R.parameters?.docs?.source}}},z.parameters={...z.parameters,docs:{...z.parameters?.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();
+  }
+}`,...z.parameters?.docs?.source}}},B.parameters={...B.parameters,docs:{...B.parameters?.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();
+  }
+}`,...B.parameters?.docs?.source}}},V.parameters={...V.parameters,docs:{...V.parameters?.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();
+  }
+}`,...V.parameters?.docs?.source}}},H.parameters={...H.parameters,docs:{...H.parameters?.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();
+  }
+}`,...H.parameters?.docs?.source}}},U.parameters={...U.parameters,docs:{...U.parameters?.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();
+  }
+}`,...U.parameters?.docs?.source}}},W.parameters={...W.parameters,docs:{...W.parameters?.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();
+  }
+}`,...W.parameters?.docs?.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.`,...W.parameters?.docs?.description}}},G.parameters={...G.parameters,docs:{...G.parameters?.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
+      }
+    }
+  }
+}`,...G.parameters?.docs?.source}}},K=[`Basic`,`Controlled`,`WithIcon`,`WithDescription`,`Required`,`WithHiddenLabel`,`WithError`,`Disabled`,`ResponsiveBottomSheet`,`InDialog`,`WithOptionIcons`,`WithOptionCountryFlags`,`WithOptionGroups`,`WithOptionGroupsAndIcons`,`WithOverflowingContent`,`WithOverflowingLabels`,`WithShortOptionSelected`,`WithZIndexOverride`,`Playground`]}))();export{D as Basic,O as Controlled,P as Disabled,I as InDialog,G as Playground,j as Required,F as ResponsiveBottomSheet,A as WithDescription,N as WithError,M as WithHiddenLabel,k as WithIcon,R as WithOptionCountryFlags,z as WithOptionGroups,B as WithOptionGroupsAndIcons,L as WithOptionIcons,V as WithOverflowingContent,H as WithOverflowingLabels,U as WithShortOptionSelected,W as WithZIndexOverride,K as __namedExportsOrder,T as default};

package/dist/assets/ShowOnIntersection-sdAtBMhN.js

@@ -0,0 +1,11 @@
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./ObserveIntersection-DPsyMqP-.js";var o,s,c,l=t((()=>{o=e(n(),1),i(),s=r(),c=({onIntersect:e,once:t,threshold:n,tag:r,dataset:i,children:c})=>{let[l,u]=(0,o.useState)(!1);return(0,s.jsx)(a,{onIntersect:(0,o.useCallback)(()=>{l||u(!0),e?.()},[l,e]),once:e?t:!0,threshold:n,tag:r,dataset:i,children:l&&c})};try{c.displayName=`ShowOnIntersection`,c.__docgenInfo={description:`Only renders the wrapped components once it intersects with the viewport.
+
+Note that elements will not be detached from the DOM if the component is
+scrolled out of view again.
+
+You can use \`React.lazy\` to lazy-load the wrapped components.
+
+Additionally, an \`onIntersect\` callback can be provided. As with
+\`ObserveIntersection\`, this callback will be called every time the component
+intersects with the viewport, or only the first time if \`once\` is set to
+\`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:`"div"`},{value:`"table"`},{value:`"th"`},{value:`"td"`},{value:`"article"`},{value:`"caption"`},{value:`"fieldset"`},{value:`"figcaption"`},{value:`"figure"`},{value:`"footer"`},{value:`"header"`},{value:`"li"`},{value:`"main"`},{value:`"ol"`},{value:`"p"`},{value:`"section"`},{value:`"span"`},{value:`"tbody"`},{value:`"tfoot"`},{value:`"thead"`},{value:`"tr"`},{value:`"ul"`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}}));export{l as n,c as t};

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

@@ -0,0 +1,17 @@
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./ShowOnIntersection-sdAtBMhN.js";var o,s,c,l;t((()=>{e(n(),1),i(),o=r(),s={title:`components/ShowOnIntersection`,component:a,parameters:{tags:[`!test`],chromatic:{disableSnapshot:!0}}},c=()=>(0,o.jsx)(`div`,{style:{height:`200px`,overflowY:`scroll`,position:`relative`},children:(0,o.jsx)(`div`,{style:{height:`400px`,display:`flex`,alignItems:`end`},children:(0,o.jsx)(a,{children:(0,o.jsx)(`p`,{children:`Intersected`})})})}),c.storyName=`ShowOnIntersection`,c.parameters={...c.parameters,docs:{...c.parameters?.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>;
+}`,...c.parameters?.docs?.source}}},l=[`Base`]}))();export{c as Base,l as __namedExportsOrder,s as default};