@preply/ds-docs 3.5.1 → 3.6.0

package/dist/assets/CountryFlag.stories-xg8q2tp6.js

@@ -0,0 +1,331 @@
+import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{r as n}from"./index-Cb9e4tly.js";import{e as z}from"./index-Ctq3gFTp.js";import{C as p}from"./CountryFlag-DNvfZC7z.js";import{L as te}from"./LayoutFlex-C3k4b85b.js";import{L as V,a as i}from"./LayoutGridItem-CPteN7Xi.js";import{T as t}from"./Text-CykvSLVe.js";import{L as ie}from"./Link-ppzJSCTf.js";import{F as m}from"./FormControl-BBd1k1n3.js";import{C as g}from"./Checkbox-Bknyi3M6.js";import{T as le}from"./TextField-lnCw6vFm.js";import{A as ne,a as de,b as ce,c as ue}from"./Accordion-DQdO67t-.js";import{c as h,g as u}from"./getCountryFlagUrl-CP-PpZV_.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-DdzHuZ-Y.js";import"./componentNames-NXEPEzbR.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./layout-relative.module-ChaXrVQQ.js";import"./classNames-BUL1Zq7e.js";import"./defaults-Clr6nbGc.js";import"./breakpoints-BfMlrtxE.js";import"./align-self-r3vx00J0.js";import"./constants-DYYVurUY.js";import"./text-accent-DZDDtpIt.js";import"./text-centered-CznToR0o.js";import"./useHostname-Y3PlXofY.js";import"./index-C6wF8VM1.js";import"./index-DSVnVYmz.js";import"./tslib.es6-BntfKcQG.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./message-BqoANQez.js";import"./render-icon-BT0Aq7PA.js";import"./useMergeRefs-SFH7Mw4x.js";import"./Input-MEZGWQfc.js";import"./InputContainer-BZsD6GIE.js";import"./TokyoUIExpand-oMdXmNcg.js";import"./Icon-CsnSNslb.js";const Ye={title:"components/CountryFlag",component:p,args:{code:"ua",alt:h.ua}},j={render:function(){return e.jsxs("div",{style:{maxWidth:"1000px"},children:[e.jsx(t,{variant:"default-semibold",children:"For some countries, simplified flags are automatically used (unless `simplified` is set to `false`)"}),e.jsxs(V,{columns:4,children:[e.jsx(i,{children:e.jsx(t,{variant:"default-semibold",children:"Code"})}),e.jsx(i,{children:e.jsx(t,{variant:"default-semibold",children:"Country name"})}),e.jsx(i,{children:e.jsx(t,{variant:"default-semibold",children:"4x3"})}),e.jsx(i,{children:e.jsx(t,{variant:"default-semibold",children:"4x3 (with `simplified=false`)"})}),["es","mx"].map(r=>e.jsxs(n.Fragment,{children:[e.jsx(i,{children:r}),e.jsx(i,{children:h[r]}),e.jsx(i,{children:e.jsx(p,{code:r,alt:h[r],size:"large"})}),e.jsx(i,{children:e.jsx(p,{code:r,alt:h[r],size:"large",simplified:!1})})]},r))]}),e.jsx("br",{}),e.jsx(t,{variant:"default-semibold",children:"All countries"}),e.jsxs(V,{columns:3,children:[e.jsx(i,{children:e.jsx(t,{variant:"default-semibold",children:"Code"})}),e.jsx(i,{children:e.jsx(t,{variant:"default-semibold",children:"Country name"})}),e.jsx(i,{children:e.jsx(t,{variant:"default-semibold",children:"4x3"})}),Object.keys(h).map(r=>e.jsxs(n.Fragment,{children:[e.jsx(i,{children:r}),e.jsx(i,{children:h[r]}),e.jsx(i,{children:e.jsx(p,{code:r,alt:h[r],size:"large"})})]},r))]})]})}};function l({src:d,alt:r,square:a=!1}){return e.jsxs("div",{children:[e.jsx("img",{src:d,alt:r,style:{width:a?"96px":"128px",height:"96px"}}),e.jsx("img",{src:d,alt:r,style:{width:a?"24px":"32px",height:"24px"}})]})}const G={tags:["!test","!a11y-test"],parameters:{chromatic:{disableSnapshot:!0}},render:function(){const r="https://static.staging.preply.org/groot/country_flags/",a="https://static.preply.com/ds/country-flags/",[y,P]=n.useState(!1),[f,D]=n.useState(!1),[S,q]=n.useState(!0),[C,L]=n.useState(!0),[v,N]=n.useState(!1),[b,A]=n.useState(!0),[w,I]=n.useState(!0),[re,J]=n.useState(!0),[x,oe]=n.useState(a),$=Number(y)+Number(f)+Number(S)+Number(C)+Number(v)+Number(b)+Number(w)+2,se=y&&f&&S&&C&&v&&b&&w;return e.jsxs("div",{style:{maxWidth:"100%"},children:[e.jsx(ne,{children:e.jsxs(de,{children:[e.jsx(ce,{children:"How to read the following table?"}),e.jsxs(ue,{children:[e.jsxs(t,{children:["- All the flags have bee imported from"," ",e.jsx(ie,{href:"https://github.com/lipis/flag-icons",children:"flag-icons"})]}),e.jsx(t,{children:"- Some flags have been manually replaced because they were wrong"}),e.jsx(t,{children:"- The design system contains more flags compared to Groot (the original apollo's application that contained all the static assets)"}),e.jsx(t,{children:"- Some flags have simplified versions (ex. Spain, Mexico) to reduce their size"}),e.jsx(t,{children:"- All the flags are a available in JPG, mainly to reduce the computation on the native application"}),e.jsx(t,{children:"- You are supposed to gather the assets URL through the `getCountryFlagUrl` utility"}),e.jsx(t,{children:"- For local testing, use `npx serve` launched in the `static-assets/country-flags` directory, and replace the path in the below field."}),e.jsx(t,{children:"- For PR testing, look at `deploy-static-assets.sh` to find the PR URL for static assets."})]})]})}),e.jsxs(te,{gap:"16",padding:["32","0","0","0"],children:[e.jsx(m,{label:"Groot 4x3 SVG",required:!0,children:e.jsx(g,{checked:y,onCheckedChange:P})}),e.jsx(m,{label:"Groot 4x3 PNG",required:!0,children:e.jsx(g,{checked:f,onCheckedChange:D})}),e.jsx(m,{label:"DS 4x3 SVG",required:!0,children:e.jsx(g,{checked:S,onCheckedChange:q})}),e.jsx(m,{label:"DS 4x3 JPG",required:!0,children:e.jsx(g,{checked:C,onCheckedChange:L})}),e.jsx(m,{label:"Groot 1x1 SVG",required:!0,children:e.jsx(g,{checked:v,onCheckedChange:N})}),e.jsx(m,{label:"DS 1x1 SVG",required:!0,children:e.jsx(g,{checked:b,onCheckedChange:A})}),e.jsx(m,{label:"DS 1x1 JPG",required:!0,children:e.jsx(g,{checked:w,onCheckedChange:I})}),e.jsx(m,{label:"Product size",required:!0,children:e.jsx(g,{checked:re,onCheckedChange:J})}),e.jsx(m,{label:"All",required:!0,children:e.jsx(g,{checked:se,onCheckedChange:o=>{P(o),D(o),q(o),L(o),N(o),A(o),I(o),J(o)}})}),e.jsx(le,{value:x,onValueChange:oe,label:"Assets path",required:!0})]}),e.jsx("div",{style:{position:"sticky",top:"0px",background:"white"},children:e.jsxs("div",{style:{display:"grid",gridTemplateColumns:`repeat(${$}, 1fr)`,gap:"4px",padding:"16px 0 0 0"},children:[e.jsx("div",{style:{alignSelf:"start"},children:e.jsx(t,{variant:"default-semibold",children:"Code"})}),e.jsx(t,{variant:"default-semibold",children:"Country name"}),y&&e.jsx(t,{variant:"default-semibold",children:"Show Groot 4x3 SVG"}),f&&e.jsx(t,{variant:"default-semibold",children:"Show Groot 4x3 PNG"}),S&&e.jsx(t,{variant:"default-semibold",children:"Show DS 4x3 SVG"}),C&&e.jsx(t,{variant:"default-semibold",children:"Show DS 4x3 JPG"}),v&&e.jsx(t,{variant:"default-semibold",children:"Show Groot 1x1 SVG"}),b&&e.jsx(t,{variant:"default-semibold",children:"Show DS 1x1 SVG"}),w&&e.jsx(t,{variant:"default-semibold",children:"Show DS 1x1 JPG"})]})}),e.jsx("div",{style:{display:"grid",gridTemplateColumns:`repeat(${$}, 1fr)`,gap:"4px",padding:"16px 0 0 0"},children:Object.keys(h).map(o=>{const c=o,s=h[o],ae=u({requester:"",countryCode:c,simplified:!0})!==u({requester:"",countryCode:c,simplified:!1});return e.jsxs(n.Fragment,{children:[e.jsx(t,{children:o}),e.jsx(t,{children:s}),y&&e.jsx(l,{src:`${r}4x3/${o}.svg`,alt:s}),f&&e.jsx(l,{src:`${r}pngs/${o}.png`,alt:s}),S&&e.jsx(l,{src:u({requester:"storybook",countryCode:c,simplified:!1}).replace(a,x),alt:s}),C&&e.jsx(l,{src:u({requester:"storybook",countryCode:c,simplified:!1,graphic:"raster"}).replace(a,x),alt:s}),v&&e.jsx(l,{src:`${r}1x1/${o}.svg`,square:!0,alt:s}),b&&e.jsx(l,{src:u({requester:"storybook",countryCode:c,simplified:!1,square:!0}).replace(a,x),square:!0,alt:s}),w&&e.jsx(l,{src:u({requester:"storybook",countryCode:c,simplified:!1,square:!0,graphic:"raster"}).replace(a,x),square:!0,alt:s}),ae&&e.jsxs(n.Fragment,{children:[e.jsxs(t,{children:[o," (simplified version)"]}),e.jsx(t,{children:h[o]}),y&&e.jsx(l,{src:`${r}4x3/${o}.svg`,alt:s}),f&&e.jsx(l,{src:`${r}pngs/${o}.png`,alt:s}),S&&e.jsx(l,{src:u({requester:"storybook",countryCode:c,simplified:!0}).replace(a,x),alt:s}),C&&e.jsx(l,{src:u({requester:"storybook",countryCode:c,simplified:!0,graphic:"raster"}).replace(a,x),alt:s}),v&&e.jsx(l,{src:`${r}1x1/${o}.svg`,square:!0,alt:s}),b&&e.jsx(l,{src:u({requester:"storybook",countryCode:c,simplified:!0,square:!0}).replace(a,x),square:!0,alt:s}),w&&e.jsx(l,{src:u({requester:"storybook",countryCode:c,simplified:!0,square:!0,graphic:"raster"}).replace(a,x),square:!0,alt:s})]},o+"simplified")]},o)})})]})}},F={render:d=>e.jsxs(te,{gap:"16",children:[e.jsx(p,{...d,size:"small"}),e.jsx(p,{...d,size:"medium"}),e.jsx(p,{...d,size:"large"})]})},T={render:function(){return e.jsxs(e.Fragment,{children:[e.jsx(t,{variant:"default-regular-italic",children:"Invalid country code"}),e.jsx(p,{code:"invalidCountryCode",alt:"Invalid country code"}),e.jsx(t,{variant:"default-regular-italic",children:"`undefined` country code"}),e.jsx(p,{code:void 0,alt:"Undefined country code"})]})},play:async({canvas:d})=>{const r=d.getByAltText("Invalid country code");z(r).toBeVisible();const a=d.getByAltText("Undefined country code");z(a).toBeVisible()}},k={parameters:{chromatic:{disableSnapshot:!0}},args:{dataset:{qaid:"flag"}},argTypes:{dataset:{control:"object"}}};var U,R,B;j.parameters={...j.parameters,docs:{...(U=j.parameters)==null?void 0:U.docs,source:{originalSource:`{
+  render: function Story() {
+    return <div style={{
+      maxWidth: '1000px'
+    }}>
+                <Text variant="default-semibold">
+                    For some countries, simplified flags are automatically used (unless \`simplified\`
+                    is set to \`false\`)
+                </Text>
+                <LayoutGrid columns={4}>
+                    <LayoutGridItem>
+                        <Text variant="default-semibold">Code</Text>
+                    </LayoutGridItem>
+                    <LayoutGridItem>
+                        <Text variant="default-semibold">Country name</Text>
+                    </LayoutGridItem>
+                    <LayoutGridItem>
+                        <Text variant="default-semibold">4x3</Text>
+                    </LayoutGridItem>
+                    <LayoutGridItem>
+                        <Text variant="default-semibold">4x3 (with \`simplified=false\`)</Text>
+                    </LayoutGridItem>
+
+                    {['es', 'mx'].map(code => {
+          return <Fragment key={code}>
+                                <LayoutGridItem>{code}</LayoutGridItem>
+                                <LayoutGridItem>{countryNames[code]}</LayoutGridItem>
+                                <LayoutGridItem>
+                                    <CountryFlag
+              // @ts-expect-error TS doesn't infer .map's type correctly
+              code={code} alt={countryNames[code]} size="large" />
+                                </LayoutGridItem>
+                                <LayoutGridItem>
+                                    <CountryFlag
+              // @ts-expect-error TS doesn't infer .map's type correctly
+              code={code} alt={countryNames[code]} size="large" simplified={false} />
+                                </LayoutGridItem>
+                            </Fragment>;
+        })}
+                </LayoutGrid>
+                <br />
+
+                <Text variant="default-semibold">All countries</Text>
+
+                <LayoutGrid columns={3}>
+                    <LayoutGridItem>
+                        <Text variant="default-semibold">Code</Text>
+                    </LayoutGridItem>
+                    <LayoutGridItem>
+                        <Text variant="default-semibold">Country name</Text>
+                    </LayoutGridItem>
+                    <LayoutGridItem>
+                        <Text variant="default-semibold">4x3</Text>
+                    </LayoutGridItem>
+                    {Object.keys(countryNames).map(code => {
+          return <Fragment key={code}>
+                                <LayoutGridItem>{code}</LayoutGridItem>
+                                <LayoutGridItem>{countryNames[code]}</LayoutGridItem>
+                                <LayoutGridItem>
+                                    <CountryFlag
+              // @ts-expect-error TS doesn't infer .map's type correctly
+              code={code} alt={countryNames[code]} size="large" />
+                                </LayoutGridItem>
+                            </Fragment>;
+        })}
+                </LayoutGrid>
+            </div>;
+  }
+}`,...(B=(R=j.parameters)==null?void 0:R.docs)==null?void 0:B.source}}};var E,O,H;G.parameters={...G.parameters,docs:{...(E=G.parameters)==null?void 0:E.docs,source:{originalSource:`{
+  tags: ['!test', '!a11y-test'],
+  parameters: {
+    chromatic: {
+      disableSnapshot: true
+    }
+  },
+  render: function Story() {
+    const grootPath = 'https://static.staging.preply.org/groot/country_flags/';
+    const dsPath = 'https://static.preply.com/ds/country-flags/';
+    const [showGroot4x3Svg, setShowGroot4x3Svg] = useState(false);
+    const [showGroot4x3Png, setShowGroot4x3Png] = useState(false);
+    const [showDs4x3Svg, setShowDs4x3Svg] = useState(true);
+    const [showDs4x3Jpg, setShowDs4x3Jpg] = useState(true);
+    const [showGroot1x1Svg, setShowGroot1x1Svg] = useState(false);
+    const [showDs1x1Svg, setShowDs1x1Svg] = useState(true);
+    const [showDs1x1Jpg, setShowDs1x1Jpg] = useState(true);
+    const [showProductSize, setShowProductSize] = useState(true);
+    const [dsAssetsPath, setDsAssetsPath] = useState(dsPath);
+    const columns = Number(showGroot4x3Svg) + Number(showGroot4x3Png) + Number(showDs4x3Svg) + Number(showDs4x3Jpg) + Number(showGroot1x1Svg) + Number(showDs1x1Svg) + Number(showDs1x1Jpg) + 2; //the fixed columns
+
+    const showAll = showGroot4x3Svg && showGroot4x3Png && showDs4x3Svg && showDs4x3Jpg && showGroot1x1Svg && showDs1x1Svg && showDs1x1Jpg;
+    return <div style={{
+      maxWidth: '100%'
+    }}>
+                <Accordion>
+                    <AccordionItem>
+                        <AccordionHeader>How to read the following table?</AccordionHeader>
+                        <AccordionContent>
+                            <Text>
+                                - All the flags have bee imported from{' '}
+                                <Link href="https://github.com/lipis/flag-icons">flag-icons</Link>
+                            </Text>
+                            <Text>
+                                - Some flags have been manually replaced because they were wrong
+                            </Text>
+                            <Text>
+                                - The design system contains more flags compared to Groot (the
+                                original apollo&apos;s application that contained all the static
+                                assets)
+                            </Text>
+                            <Text>
+                                - Some flags have simplified versions (ex. Spain, Mexico) to reduce
+                                their size
+                            </Text>
+                            <Text>
+                                - All the flags are a available in JPG, mainly to reduce the
+                                computation on the native application
+                            </Text>
+                            <Text>
+                                - You are supposed to gather the assets URL through the
+                                \`getCountryFlagUrl\` utility
+                            </Text>
+                            <Text>
+                                - For local testing, use \`npx serve\` launched in the
+                                \`static-assets/country-flags\` directory, and replace the path in the
+                                below field.
+                            </Text>
+                            <Text>
+                                - For PR testing, look at \`deploy-static-assets.sh\` to find the PR
+                                URL for static assets.
+                            </Text>
+                        </AccordionContent>
+                    </AccordionItem>
+                </Accordion>
+                <LayoutFlex gap="16" padding={['32', '0', '0', '0']}>
+                    <FormControl label="Groot 4x3 SVG" required>
+                        <Checkbox checked={showGroot4x3Svg} onCheckedChange={setShowGroot4x3Svg} />
+                    </FormControl>
+                    <FormControl label="Groot 4x3 PNG" required>
+                        <Checkbox checked={showGroot4x3Png} onCheckedChange={setShowGroot4x3Png} />
+                    </FormControl>
+                    <FormControl label="DS 4x3 SVG" required>
+                        <Checkbox checked={showDs4x3Svg} onCheckedChange={setShowDs4x3Svg} />
+                    </FormControl>
+                    <FormControl label="DS 4x3 JPG" required>
+                        <Checkbox checked={showDs4x3Jpg} onCheckedChange={setShowDs4x3Jpg} />
+                    </FormControl>
+                    <FormControl label="Groot 1x1 SVG" required>
+                        <Checkbox checked={showGroot1x1Svg} onCheckedChange={setShowGroot1x1Svg} />
+                    </FormControl>
+                    <FormControl label="DS 1x1 SVG" required>
+                        <Checkbox checked={showDs1x1Svg} onCheckedChange={setShowDs1x1Svg} />
+                    </FormControl>
+                    <FormControl label="DS 1x1 JPG" required>
+                        <Checkbox checked={showDs1x1Jpg} onCheckedChange={setShowDs1x1Jpg} />
+                    </FormControl>
+                    <FormControl label="Product size" required>
+                        <Checkbox checked={showProductSize} onCheckedChange={setShowProductSize} />
+                    </FormControl>
+                    <FormControl label="All" required>
+                        <Checkbox checked={showAll} onCheckedChange={checked => {
+            setShowGroot4x3Svg(checked);
+            setShowGroot4x3Png(checked);
+            setShowDs4x3Svg(checked);
+            setShowDs4x3Jpg(checked);
+            setShowGroot1x1Svg(checked);
+            setShowDs1x1Svg(checked);
+            setShowDs1x1Jpg(checked);
+            setShowProductSize(checked);
+          }} />
+                    </FormControl>
+                    <TextField value={dsAssetsPath} onValueChange={setDsAssetsPath} label="Assets path" required />
+                </LayoutFlex>
+                <div style={{
+        position: 'sticky',
+        top: '0px',
+        background: 'white'
+      }}>
+                    <div style={{
+          display: 'grid',
+          gridTemplateColumns: \`repeat(\${columns}, 1fr)\`,
+          gap: '4px',
+          padding: '16px 0 0 0'
+        }}>
+                        <div style={{
+            alignSelf: 'start'
+          }}>
+                            <Text variant="default-semibold">Code</Text>
+                        </div>
+                        <Text variant="default-semibold">Country name</Text>
+
+                        {showGroot4x3Svg && <Text variant="default-semibold">Show Groot 4x3 SVG</Text>}
+                        {showGroot4x3Png && <Text variant="default-semibold">Show Groot 4x3 PNG</Text>}
+                        {showDs4x3Svg && <Text variant="default-semibold">Show DS 4x3 SVG</Text>}
+                        {showDs4x3Jpg && <Text variant="default-semibold">Show DS 4x3 JPG</Text>}
+                        {showGroot1x1Svg && <Text variant="default-semibold">Show Groot 1x1 SVG</Text>}
+                        {showDs1x1Svg && <Text variant="default-semibold">Show DS 1x1 SVG</Text>}
+                        {showDs1x1Jpg && <Text variant="default-semibold">Show DS 1x1 JPG</Text>}
+                    </div>
+                </div>
+                <div style={{
+        display: 'grid',
+        gridTemplateColumns: \`repeat(\${columns}, 1fr)\`,
+        gap: '4px',
+        padding: '16px 0 0 0'
+      }}>
+                    {Object.keys(countryNames).map(code => {
+          const countryCode = code as CountryCode;
+          const countryName = countryNames[code];
+          const simplifiedVersionExists = getCountryFlagUrl({
+            requester: '',
+            countryCode,
+            simplified: true
+          }) !== getCountryFlagUrl({
+            requester: '',
+            countryCode,
+            simplified: false
+          });
+          return <Fragment key={code}>
+                                <Text>{code}</Text>
+                                <Text>{countryName}</Text>
+                                {showGroot4x3Svg && <FlagCell src={\`\${grootPath}4x3/\${code}.svg\`} alt={countryName} />}
+                                {showGroot4x3Png && <FlagCell src={\`\${grootPath}pngs/\${code}.png\`} alt={countryName} />}
+                                {showDs4x3Svg && <FlagCell src={getCountryFlagUrl({
+              requester: 'storybook',
+              countryCode,
+              simplified: false
+            }).replace(dsPath, dsAssetsPath)} alt={countryName} />}
+                                {showDs4x3Jpg && <FlagCell src={getCountryFlagUrl({
+              requester: 'storybook',
+              countryCode,
+              simplified: false,
+              graphic: 'raster'
+            }).replace(dsPath, dsAssetsPath)} alt={countryName} />}
+                                {showGroot1x1Svg && <FlagCell src={\`\${grootPath}1x1/\${code}.svg\`} square alt={countryName} />}
+                                {showDs1x1Svg && <FlagCell src={getCountryFlagUrl({
+              requester: 'storybook',
+              countryCode,
+              simplified: false,
+              square: true
+            }).replace(dsPath, dsAssetsPath)} square alt={countryName} />}
+                                {showDs1x1Jpg && <FlagCell src={getCountryFlagUrl({
+              requester: 'storybook',
+              countryCode,
+              simplified: false,
+              square: true,
+              graphic: 'raster'
+            }).replace(dsPath, dsAssetsPath)} square alt={countryName} />}
+
+                                {simplifiedVersionExists && <Fragment key={code + 'simplified'}>
+                                        <Text>{code} (simplified version)</Text>
+                                        <Text>{countryNames[code]}</Text>
+                                        {showGroot4x3Svg && <FlagCell src={\`\${grootPath}4x3/\${code}.svg\`} alt={countryName} />}
+                                        {showGroot4x3Png && <FlagCell src={\`\${grootPath}pngs/\${code}.png\`} alt={countryName} />}
+                                        {showDs4x3Svg && <FlagCell src={getCountryFlagUrl({
+                requester: 'storybook',
+                countryCode,
+                simplified: true
+              }).replace(dsPath, dsAssetsPath)} alt={countryName} />}
+                                        {showDs4x3Jpg && <FlagCell src={getCountryFlagUrl({
+                requester: 'storybook',
+                countryCode,
+                simplified: true,
+                graphic: 'raster'
+              }).replace(dsPath, dsAssetsPath)} alt={countryName} />}
+                                        {showGroot1x1Svg && <FlagCell src={\`\${grootPath}1x1/\${code}.svg\`} square alt={countryName} />}
+                                        {showDs1x1Svg && <FlagCell src={getCountryFlagUrl({
+                requester: 'storybook',
+                countryCode,
+                simplified: true,
+                square: true
+              }).replace(dsPath, dsAssetsPath)} square alt={countryName} />}
+                                        {showDs1x1Jpg && <FlagCell src={getCountryFlagUrl({
+                requester: 'storybook',
+                countryCode,
+                simplified: true,
+                square: true,
+                graphic: 'raster'
+              }).replace(dsPath, dsAssetsPath)} square alt={countryName} />}
+                                    </Fragment>}
+                            </Fragment>;
+        })}
+                </div>
+            </div>;
+  }
+}`,...(H=(O=G.parameters)==null?void 0:O.docs)==null?void 0:H.source}}};var W,_,M;F.parameters={...F.parameters,docs:{...(W=F.parameters)==null?void 0:W.docs,source:{originalSource:`{
+  render: args => <LayoutFlex gap="16">
+            <CountryFlag {...args} size="small" />
+            <CountryFlag {...args} size="medium" />
+            <CountryFlag {...args} size="large" />
+        </LayoutFlex>
+}`,...(M=(_=F.parameters)==null?void 0:_.docs)==null?void 0:M.source}}};var Q,Y,K;T.parameters={...T.parameters,docs:{...(Q=T.parameters)==null?void 0:Q.docs,source:{originalSource:`{
+  render: function Story() {
+    return <>
+                <Text variant="default-regular-italic">Invalid country code</Text>
+                <CountryFlag
+      // GraphQL types countries as \`string\`, so the Product doesn't have real type safety over the Country
+      // code. If new countries are added and we miss it, the CountryFlag shouldn't throw an error.
+      // @ts-expect-error the wrong country code is intentional for this test
+      code="invalidCountryCode" alt="Invalid country code" />
+                <Text variant="default-regular-italic">\`undefined\` country code</Text>
+                <CountryFlag
+      // GraphQL types could be nullable, and the developer could miss that the
+      // @ts-expect-error the wrong country code is intentional for this test
+      code={undefined} alt="Undefined country code" />
+            </>;
+  },
+  play: async ({
+    canvas
+  }) => {
+    const invalidCountry = canvas.getByAltText('Invalid country code');
+    expect(invalidCountry).toBeVisible();
+    const undefinedCountry = canvas.getByAltText('Undefined country code');
+    expect(undefinedCountry).toBeVisible();
+  }
+}`,...(K=(Y=T.parameters)==null?void 0:Y.docs)==null?void 0:K.source}}};var X,Z,ee;k.parameters={...k.parameters,docs:{...(X=k.parameters)==null?void 0:X.docs,source:{originalSource:`{
+  parameters: {
+    chromatic: {
+      disableSnapshot: true
+    }
+  },
+  args: {
+    dataset: {
+      qaid: 'flag'
+    }
+  },
+  argTypes: {
+    dataset: {
+      control: 'object'
+    }
+  }
+}`,...(ee=(Z=k.parameters)==null?void 0:Z.docs)==null?void 0:ee.source}}};const Ke=["Countries","CountryFlagExplorer","Sizes","ShowPlaceholderOnInvalidCode","Playground"];export{j as Countries,G as CountryFlagExplorer,k as Playground,T as ShowPlaceholderOnInvalidCode,F as Sizes,Ke as __namedExportsOrder,Ye as default};

package/dist/assets/CountryFlag.test.stories-CkUCxnsL.js

@@ -0,0 +1,27 @@
+import{j as d}from"./jsx-runtime-BTJTZTIL.js";import{e as o}from"./index-Ctq3gFTp.js";import{C as s}from"./CountryFlag-DNvfZC7z.js";import"./index-ChsGqxH_.js";import"./index-Cb9e4tly.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-DdzHuZ-Y.js";import"./getCountryFlagUrl-CP-PpZV_.js";import"./componentNames-NXEPEzbR.js";const k={title:"components/CountryFlag/Tests",component:s,args:{},tags:["!autodocs","!a11y-test","test"]},a={render:function(){return d.jsx(s,{code:"ua",alt:"Ukraine",dataset:{foo:1,bar:"2",baz:!1}})},play:async({canvas:t})=>{const e=t.getByAltText("Ukraine");o(e).toHaveAttribute("data-foo","1"),o(e).toHaveAttribute("data-bar","2"),o(e).toHaveAttribute("data-baz","false")}},r={render:function(){return d.jsx(s,{code:"ua",alt:"Ukraine",loading:"lazy"})},play:async({canvas:t})=>{const e=t.getByAltText("Ukraine");o(e).toHaveAttribute("loading","lazy")}};var n,c,i;a.parameters={...a.parameters,docs:{...(n=a.parameters)==null?void 0:n.docs,source:{originalSource:`{
+  render: function Story() {
+    return <CountryFlag code="ua" alt="Ukraine" dataset={{
+      foo: 1,
+      bar: '2',
+      baz: false
+    }} />;
+  },
+  play: async ({
+    canvas
+  }) => {
+    const element = canvas.getByAltText('Ukraine');
+    expect(element).toHaveAttribute('data-foo', '1');
+    expect(element).toHaveAttribute('data-bar', '2');
+    expect(element).toHaveAttribute('data-baz', 'false');
+  }
+}`,...(i=(c=a.parameters)==null?void 0:c.docs)==null?void 0:i.source}}};var l,m,u;r.parameters={...r.parameters,docs:{...(l=r.parameters)==null?void 0:l.docs,source:{originalSource:`{
+  render: function Story() {
+    return <CountryFlag code="ua" alt="Ukraine" loading="lazy" />;
+  },
+  play: async ({
+    canvas
+  }) => {
+    const element = canvas.getByAltText('Ukraine');
+    expect(element).toHaveAttribute('loading', 'lazy');
+  }
+}`,...(u=(m=r.parameters)==null?void 0:m.docs)==null?void 0:u.source}}};const z=["TestDataset","ImgAttributesArePassedToImg"];export{r as ImgAttributesArePassedToImg,a as TestDataset,z as __namedExportsOrder,k as default};

package/dist/assets/{Dialog.stories-ColOPVoz.js → Dialog.stories-C9-6y9u3.js}

@@ -1,10 +1,10 @@
-import{j as e}from"./jsx-runtime-BYouaCF_.js";import{r as a}from"./index-B3evPFBL.js";import{a as F}from"./chunk-D5ZWXAHU-BhFjjRSl.js";import{f as Le,u as f,a as v,e as g}from"./index-DDyIDR-R.js";import{R as We,P as Ne,O as Ve,C as Me,T as qe,D as Ue,a as Je}from"./index-wFyje0se.js";import{B as d}from"./Button-BSyqsKC5.js";import{I as Ze}from"./IconButton-BqwVuKH2.js";import{H as Ke}from"./Heading-ese4_5Hg.js";import{g as Ye}from"./shared-strings-CcWGHelY.js";import{u as Ge}from"./index-BfBdt3zW.js";import{g as Xe}from"./PortalElementProvider-D4ltrA8j.js";import{g as Qe}from"./index-DdzHuZ-Y.js";import{w as R}from"./componentNames-CpCJzpB9.js";import{m as $e,s as et,b as tt}from"./classNames-BUL1Zq7e.js";import{S as m}from"./Steps-CCm9vCgl.js";import{I as ot}from"./Icon-ZIxauYsE.js";import{A as st}from"./Avatar-B2H0W8KL.js";import{F as nt}from"./TokyoUIInfo-nHX2jpp7.js";import{L as at}from"./LayoutFlex-BBGvSVMb.js";import{N as it}from"./NumberField-D6cbX2hK.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./v4-CtRu48qb.js";import"./index-DRKYGVyc.js";import"./Combination-CCYtWL8C.js";import"./tslib.es6-BntfKcQG.js";import"./render-icon-CVTdrNe-.js";import"./ButtonBase-Bdtn25V2.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./Spinner-BCTJunNM.js";import"./defaults-B1rzzf6M.js";import"./useMergeRefs-CeyIhNgY.js";import"./useHostname-CH18gHFj.js";import"./index-CC6DAVyL.js";import"./text-accent-DZDDtpIt.js";import"./text-centered-CznToR0o.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./index-jEDObK_5.js";import"./index-C66nt8TK.js";import"./ProgressSteps-BBrWCYks.js";import"./message-BraTJ16C.js";import"./constants--ewUoBsO.js";import"./layout-relative.module-ed9bC4H4.js";import"./FormControl-CeIJk4_Z.js";import"./Input-C1hZX5_o.js";import"./InputContainer-Bk0tgFnW.js";const rt=({title:s,titleId:o,...t},n)=>a.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",ref:n,"aria-labelledby":o,...t},s?a.createElement("title",{id:o},s):null,a.createElement("path",{fillRule:"evenodd",d:"M7.207 5.793a1 1 0 0 0-1.414 1.414L10.586 12l-4.793 4.793a1 1 0 1 0 1.414 1.414L12 13.414l4.793 4.793a1 1 0 0 0 1.414-1.414L13.414 12l4.793-4.793a1 1 0 0 0-1.414-1.414L12 10.586 7.207 5.793Z",clipRule:"evenodd"})),lt=a.forwardRef(rt),dt="overlay__NM-kk",ct="overlayShow__SQuh9",pt="overlayHide__UA0Uh",ut="Dialog__GqDxV",gt="mobileContentShow__1akQp",mt="mobileContentHide__GXooF",yt="contentShow__RpFHp",ht="contentHide__Y-gr5",ft="header__2EPvy",vt="description__0f9xh",Ct="actions__hIL-J",y={overlay:dt,overlayShow:ct,overlayHide:pt,Dialog:ut,"Dialog--fullheight":"Dialog--fullheight__2W7sp","no-border-radius":"no-border-radius__G2Oo3",mobileContentShow:gt,mobileContentHide:mt,"Dialog--size-xs":"Dialog--size-xs__W0yGm","Dialog--size-sm":"Dialog--size-sm__rE3Y-","Dialog--size-md":"Dialog--size-md__HWxI4","Dialog--size-lg":"Dialog--size-lg__Lis4-",contentShow:yt,contentHide:ht,"Dialog--narrow-l--size-xs":"Dialog--narrow-l--size-xs__ljCvr","Dialog--medium-s--size-xs":"Dialog--medium-s--size-xs__t-4Ow","Dialog--medium-l--size-xs":"Dialog--medium-l--size-xs__yc1ae","Dialog--wide-s--size-xs":"Dialog--wide-s--size-xs__Id0f5","Dialog--wide-l--size-xs":"Dialog--wide-l--size-xs__Pnlyp","Dialog--narrow-l--size-sm":"Dialog--narrow-l--size-sm__M8-BH","Dialog--medium-s--size-sm":"Dialog--medium-s--size-sm__UPlli","Dialog--medium-l--size-sm":"Dialog--medium-l--size-sm__nAW8A","Dialog--wide-s--size-sm":"Dialog--wide-s--size-sm__i0pbj","Dialog--wide-l--size-sm":"Dialog--wide-l--size-sm__PghJ-","Dialog--narrow-l--size-md":"Dialog--narrow-l--size-md__8jZY3","Dialog--medium-s--size-md":"Dialog--medium-s--size-md__dQ1TZ","Dialog--medium-l--size-md":"Dialog--medium-l--size-md__kcNF8","Dialog--wide-s--size-md":"Dialog--wide-s--size-md__KDVax","Dialog--wide-l--size-md":"Dialog--wide-l--size-md__mV57k","Dialog--narrow-l--size-lg":"Dialog--narrow-l--size-lg__h5Tdx","Dialog--medium-s--size-lg":"Dialog--medium-s--size-lg__qci5k","Dialog--medium-l--size-lg":"Dialog--medium-l--size-lg__JCkaM","Dialog--wide-s--size-lg":"Dialog--wide-s--size-lg__eJlxf","Dialog--wide-l--size-lg":"Dialog--wide-l--size-lg__mo796",header:ft,description:vt,actions:Ct},xt=({open:s,title:o,description:t,children:n,size:i="md",hideHeader:u,onClose:p,mobileFullHeight:h,dataset:E})=>{const{formatMessage:Ie}=Ge(),Pe=Xe(),He=St(s),Fe=Qe(E,{preplyDsComponent:R.Dialog}),Ee=$e(y,R.Dialog,[et("size",i),tt("fullheight",void 0,h)]).join(" "),Re=a.useCallback(Ae=>{Ae||p==null||p()},[p]);return e.jsx(We,{open:s,onOpenChange:Re,children:e.jsxs(Ne,{container:Pe,children:[e.jsx(Ve,{className:y.overlay,"data-testid":"dialog-overlay"}),e.jsxs(Me,{...Fe,ref:He,className:Ee,children:[e.jsxs("header",{className:y.header,children:[e.jsxs("hgroup",{hidden:u,children:[e.jsx(qe,{asChild:!0,children:e.jsx(Ke,{tag:"h3",variant:"medium",children:o})}),t&&e.jsx(Ue,{asChild:!0,children:e.jsx("p",{className:y.description,children:t})})]}),e.jsx(Je,{asChild:!0,children:e.jsx(Ze,{variant:"ghost",dataset:{testid:"dialog-close"},assistiveText:Ie(Ye.close),svg:lt})})]}),n]})]})})},Dt=({primaryLabel:s,secondaryLabel:o,onPrimaryClick:t,onSecondaryClick:n})=>e.jsxs("div",{className:y.actions,children:[e.jsx(d,{variant:"secondary",onClick:n,children:o}),e.jsx(d,{variant:"primary",onClick:t,children:s})]}),r=Object.assign(xt,{Actions:Dt});function St(s){const[o,t]=a.useState(null),n=a.useCallback(i=>t(i),[]);return a.useEffect(()=>{if(!s||!o)return;const i=async()=>{const p=o.getAnimations().map(E=>E.finished);await Promise.allSettled(p);const{y:h}=o.getBoundingClientRect();o.classList.toggle(y["no-border-radius"],h===0)};i(),window.addEventListener("resize",i);const u=new ResizeObserver(i);return u.observe(o),()=>{window.removeEventListener("resize",i),u.disconnect()}},[s,o]),n}try{r.displayName="Dialog",r.__docgenInfo={description:`A modal dialog component that can be used to show content in an overlay.
+import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{r as a}from"./index-Cb9e4tly.js";import{a as F}from"./chunk-D5ZWXAHU-BhFjjRSl.js";import{f as Le,u as f,a as v,e as g}from"./index-Ctq3gFTp.js";import{R as We,P as Ne,O as Ve,C as Me,T as qe,D as Ue,a as Je}from"./index-C9SxdfPC.js";import{B as d}from"./Button-C5gzVt4K.js";import{I as Ze}from"./IconButton-NYwQQfnV.js";import{H as Ke}from"./Heading-BLxyLk9f.js";import{g as Ye}from"./shared-strings-BzaHC9x5.js";import{u as Ge}from"./index-DSVnVYmz.js";import{g as Xe}from"./PortalElementProvider-CgL8vj5o.js";import{g as Qe}from"./index-DdzHuZ-Y.js";import{w as R}from"./componentNames-NXEPEzbR.js";import{m as $e,s as et,b as tt}from"./classNames-BUL1Zq7e.js";import{S as m}from"./Steps-ffbOMhEJ.js";import{I as ot}from"./Icon-CsnSNslb.js";import{A as st}from"./Avatar-BPQkrrdS.js";import{F as nt}from"./TokyoUIInfo-DbkQBubr.js";import{L as at}from"./LayoutFlex-C3k4b85b.js";import{N as it}from"./NumberField-RsSQ3jKy.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./v4-CtRu48qb.js";import"./index-C6wF8VM1.js";import"./Combination-Cz1uIyPJ.js";import"./tslib.es6-BntfKcQG.js";import"./render-icon-BT0Aq7PA.js";import"./ButtonBase-D5O3MkG2.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./Spinner-T-vTyHiv.js";import"./defaults-Clr6nbGc.js";import"./useMergeRefs-SFH7Mw4x.js";import"./useHostname-Y3PlXofY.js";import"./index-CC6DAVyL.js";import"./text-accent-DZDDtpIt.js";import"./text-centered-CznToR0o.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./index-BPrLDK9Y.js";import"./index-C7hTFOIV.js";import"./ProgressSteps--PLRO2gB.js";import"./message-BqoANQez.js";import"./constants--ewUoBsO.js";import"./layout-relative.module-ChaXrVQQ.js";import"./FormControl-BBd1k1n3.js";import"./Input-MEZGWQfc.js";import"./InputContainer-BZsD6GIE.js";const rt=({title:s,titleId:o,...t},n)=>a.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",ref:n,"aria-labelledby":o,...t},s?a.createElement("title",{id:o},s):null,a.createElement("path",{fillRule:"evenodd",d:"M7.207 5.793a1 1 0 0 0-1.414 1.414L10.586 12l-4.793 4.793a1 1 0 1 0 1.414 1.414L12 13.414l4.793 4.793a1 1 0 0 0 1.414-1.414L13.414 12l4.793-4.793a1 1 0 0 0-1.414-1.414L12 10.586 7.207 5.793Z",clipRule:"evenodd"})),lt=a.forwardRef(rt),dt="overlay__NM-kk",ct="overlayShow__SQuh9",pt="overlayHide__UA0Uh",ut="Dialog__GqDxV",gt="mobileContentShow__1akQp",mt="mobileContentHide__GXooF",yt="contentShow__RpFHp",ht="contentHide__Y-gr5",ft="header__2EPvy",vt="description__0f9xh",Ct="actions__hIL-J",y={overlay:dt,overlayShow:ct,overlayHide:pt,Dialog:ut,"Dialog--fullheight":"Dialog--fullheight__2W7sp","no-border-radius":"no-border-radius__G2Oo3",mobileContentShow:gt,mobileContentHide:mt,"Dialog--size-xs":"Dialog--size-xs__W0yGm","Dialog--size-sm":"Dialog--size-sm__rE3Y-","Dialog--size-md":"Dialog--size-md__HWxI4","Dialog--size-lg":"Dialog--size-lg__Lis4-",contentShow:yt,contentHide:ht,"Dialog--narrow-l--size-xs":"Dialog--narrow-l--size-xs__ljCvr","Dialog--medium-s--size-xs":"Dialog--medium-s--size-xs__t-4Ow","Dialog--medium-l--size-xs":"Dialog--medium-l--size-xs__yc1ae","Dialog--wide-s--size-xs":"Dialog--wide-s--size-xs__Id0f5","Dialog--wide-l--size-xs":"Dialog--wide-l--size-xs__Pnlyp","Dialog--narrow-l--size-sm":"Dialog--narrow-l--size-sm__M8-BH","Dialog--medium-s--size-sm":"Dialog--medium-s--size-sm__UPlli","Dialog--medium-l--size-sm":"Dialog--medium-l--size-sm__nAW8A","Dialog--wide-s--size-sm":"Dialog--wide-s--size-sm__i0pbj","Dialog--wide-l--size-sm":"Dialog--wide-l--size-sm__PghJ-","Dialog--narrow-l--size-md":"Dialog--narrow-l--size-md__8jZY3","Dialog--medium-s--size-md":"Dialog--medium-s--size-md__dQ1TZ","Dialog--medium-l--size-md":"Dialog--medium-l--size-md__kcNF8","Dialog--wide-s--size-md":"Dialog--wide-s--size-md__KDVax","Dialog--wide-l--size-md":"Dialog--wide-l--size-md__mV57k","Dialog--narrow-l--size-lg":"Dialog--narrow-l--size-lg__h5Tdx","Dialog--medium-s--size-lg":"Dialog--medium-s--size-lg__qci5k","Dialog--medium-l--size-lg":"Dialog--medium-l--size-lg__JCkaM","Dialog--wide-s--size-lg":"Dialog--wide-s--size-lg__eJlxf","Dialog--wide-l--size-lg":"Dialog--wide-l--size-lg__mo796",header:ft,description:vt,actions:Ct},xt=({open:s,title:o,description:t,children:n,size:i="md",hideHeader:u,onClose:p,mobileFullHeight:h,dataset:E})=>{const{formatMessage:Ie}=Ge(),Pe=Xe(),He=St(s),Fe=Qe(E,{preplyDsComponent:R.Dialog}),Ee=$e(y,R.Dialog,[et("size",i),tt("fullheight",void 0,h)]).join(" "),Re=a.useCallback(Ae=>{Ae||p==null||p()},[p]);return e.jsx(We,{open:s,onOpenChange:Re,children:e.jsxs(Ne,{container:Pe,children:[e.jsx(Ve,{className:y.overlay,"data-testid":"dialog-overlay"}),e.jsxs(Me,{...Fe,ref:He,className:Ee,children:[e.jsxs("header",{className:y.header,children:[e.jsxs("hgroup",{hidden:u,children:[e.jsx(qe,{asChild:!0,children:e.jsx(Ke,{tag:"h3",variant:"medium",children:o})}),t&&e.jsx(Ue,{asChild:!0,children:e.jsx("p",{className:y.description,children:t})})]}),e.jsx(Je,{asChild:!0,children:e.jsx(Ze,{variant:"ghost",dataset:{testid:"dialog-close"},assistiveText:Ie(Ye.close),svg:lt})})]}),n]})]})})},Dt=({primaryLabel:s,secondaryLabel:o,onPrimaryClick:t,onSecondaryClick:n})=>e.jsxs("div",{className:y.actions,children:[e.jsx(d,{variant:"secondary",onClick:n,children:o}),e.jsx(d,{variant:"primary",onClick:t,children:s})]}),r=Object.assign(xt,{Actions:Dt});function St(s){const[o,t]=a.useState(null),n=a.useCallback(i=>t(i),[]);return a.useEffect(()=>{if(!s||!o)return;const i=async()=>{const p=o.getAnimations().map(E=>E.finished);await Promise.allSettled(p);const{y:h}=o.getBoundingClientRect();o.classList.toggle(y["no-border-radius"],h===0)};i(),window.addEventListener("resize",i);const u=new ResizeObserver(i);return u.observe(o),()=>{window.removeEventListener("resize",i),u.disconnect()}},[s,o]),n}try{r.displayName="Dialog",r.__docgenInfo={description:`A modal dialog component that can be used to show content in an overlay.
 
 Composed of:
 - Dialog: The main component
 - Dialog.Actions: Footer actions with primary and secondary buttons`,displayName:"Dialog",props:{open:{defaultValue:null,description:"Controls the visibility of the dialog",name:"open",required:!0,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},title:{defaultValue:null,description:"Title displayed in the dialog header",name:"title",required:!0,type:{name:"enum",value:[{value:"undefined"},{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},description:{defaultValue:null,description:"Optional description displayed below the title",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"}]}},children:{defaultValue:null,description:"Content to be rendered inside the dialog",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"}]}},size:{defaultValue:{value:"md"},description:"Controls the width of the dialog on desktop and height on mobile",name:"size",required:!1,type:{name:"enum",value:[{value:'"xs"'},{value:'"md"'},{value:'"sm"'},{value:'"lg"'},{value:'ResponsiveProp<"xs" | "md" | "sm" | "lg">'}]}},hideHeader:{defaultValue:{value:"false"},description:`When true, visually hides the header (title and description) while
 keeping it accessible to screen readers`,name:"hideHeader",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},onClose:{defaultValue:null,description:`Callback fired when the user tries to close the dialog (via escape
-key, overlay click, or close button).`,name:"onClose",required:!1,type:{name:"enum",value:[{value:"() => void"}]}},mobileFullHeight:{defaultValue:null,description:"Makes the Dialog take up the full screen height on mobile screens, i.e.\nscreens under the `medium-l` breakpoint.",name:"mobileFullHeight",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}}}}}catch{}const yo={title:"Components/Dialog",component:r,parameters:{docs:{story:{inline:!1,height:600}},a11y:{config:{rules:[{id:"color-contrast",enabled:!1}]}}},args:{onClose:Le()}},l=e.jsx("div",{style:{width:"100%",height:"200px",background:"linear-gradient(to bottom, color-mix(in srgb, #e0e0e0, transparent), #e0e0e0)"}}),c=async({canvas:s,step:o})=>{let t;return await o("Open dialog",async()=>{const n=s.getByTestId("trigger");return await f.click(n),v(()=>(t=s.getByTestId("dialog"),g(t).toBeVisible()))}),t},C={render:function(){const[o,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(d,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(r,{open:o,onClose:()=>t(!1),size:"xs",title:"Extra Small Dialog",dataset:{testid:"dialog"},children:l})]})},play:c},x={render:function(){const[o,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(d,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(r,{open:o,onClose:()=>t(!1),size:"sm",title:"Small Dialog",dataset:{testid:"dialog"},children:l})]})},play:c},D={render:function(){const[o,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(d,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(r,{open:o,onClose:()=>t(!1),size:"md",title:"Medium Dialog",dataset:{testid:"dialog"},children:l})]})},play:c},S={render:function(){const[o,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(d,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(r,{open:o,onClose:()=>t(!1),size:"lg",title:"Large Dialog",dataset:{testid:"dialog"},children:l})]})},play:c},w={parameters:{docs:{description:{story:`
+key, overlay click, or close button).`,name:"onClose",required:!1,type:{name:"enum",value:[{value:"() => void"}]}},mobileFullHeight:{defaultValue:null,description:"Makes the Dialog take up the full screen height on mobile screens, i.e.\nscreens under the `medium-l` breakpoint.",name:"mobileFullHeight",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}}}}}catch{}const ho={title:"Components/Dialog",component:r,parameters:{docs:{story:{inline:!1,height:600}},a11y:{config:{rules:[{id:"color-contrast",enabled:!1}]}}},args:{onClose:Le()}},l=e.jsx("div",{style:{width:"100%",height:"200px",background:"linear-gradient(to bottom, color-mix(in srgb, #e0e0e0, transparent), #e0e0e0)"}}),c=async({canvas:s,step:o})=>{let t;return await o("Open dialog",async()=>{const n=s.getByTestId("trigger");return await f.click(n),v(()=>(t=s.getByTestId("dialog"),g(t).toBeVisible()))}),t},C={render:function(){const[o,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(d,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(r,{open:o,onClose:()=>t(!1),size:"xs",title:"Extra Small Dialog",dataset:{testid:"dialog"},children:l})]})},play:c},x={render:function(){const[o,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(d,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(r,{open:o,onClose:()=>t(!1),size:"sm",title:"Small Dialog",dataset:{testid:"dialog"},children:l})]})},play:c},D={render:function(){const[o,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(d,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(r,{open:o,onClose:()=>t(!1),size:"md",title:"Medium Dialog",dataset:{testid:"dialog"},children:l})]})},play:c},S={render:function(){const[o,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(d,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(r,{open:o,onClose:()=>t(!1),size:"lg",title:"Large Dialog",dataset:{testid:"dialog"},children:l})]})},play:c},w={parameters:{docs:{description:{story:`
 The Dialog component adapts to different screen sizes through responsive size props.
 Use an object with breakpoints as keys to specify different sizes at different viewport widths:
 
@@ -512,4 +512,4 @@ Note: This is done using a \\\`useEffect\\\` just for the sake of the story. In
       });
     });
   }
-}`,...(Te=(Be=H.parameters)==null?void 0:Be.docs)==null?void 0:Te.source}}};const ho=["ExtraSmall","Small","Medium","Large","WidthResponsiveness","HeightResponsiveness","MobileFullHeight","WithHiddenHeader","WithActions","WithSteps","WithIconInTitle","WithAvatarInTitle","WithZIndexOverride","TestCloseButton","TestCloseOverlay","TestCloseKeyboard"];export{C as ExtraSmall,b as HeightResponsiveness,S as Large,D as Medium,z as MobileFullHeight,x as Small,I as TestCloseButton,H as TestCloseKeyboard,P as TestCloseOverlay,w as WidthResponsiveness,j as WithActions,B as WithAvatarInTitle,O as WithHiddenHeader,_ as WithIconInTitle,k as WithSteps,T as WithZIndexOverride,ho as __namedExportsOrder,yo as default};
+}`,...(Te=(Be=H.parameters)==null?void 0:Be.docs)==null?void 0:Te.source}}};const fo=["ExtraSmall","Small","Medium","Large","WidthResponsiveness","HeightResponsiveness","MobileFullHeight","WithHiddenHeader","WithActions","WithSteps","WithIconInTitle","WithAvatarInTitle","WithZIndexOverride","TestCloseButton","TestCloseOverlay","TestCloseKeyboard"];export{C as ExtraSmall,b as HeightResponsiveness,S as Large,D as Medium,z as MobileFullHeight,x as Small,I as TestCloseButton,H as TestCloseKeyboard,P as TestCloseOverlay,w as WidthResponsiveness,j as WithActions,B as WithAvatarInTitle,O as WithHiddenHeader,_ as WithIconInTitle,k as WithSteps,T as WithZIndexOverride,fo as __namedExportsOrder,ho as default};

package/dist/assets/DismissibleChips-D0spWwKB.js

@@ -0,0 +1 @@
+import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{r as k}from"./index-Cb9e4tly.js";import{c as D,$ as j,C as R,a as I,b as z,u as N,d as E,e as H}from"./createRequiredContext-BW3-EdwI.js";import{F as L}from"./TokyoUIClose-thK8sk63.js";import"./index-DSVnVYmz.js";import{g as S}from"./shared-strings-BzaHC9x5.js";import{f as w}from"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import{I as A}from"./Icon-CsnSNslb.js";import{g as q}from"./index-DdzHuZ-Y.js";import{M as T}from"./message-BqoANQez.js";import{w as _}from"./componentNames-NXEPEzbR.js";const M="visuallyHidden__SMp5o",F={visuallyHidden:M};function y({as:l="span",children:a}){const v=l??"span";return e.jsx(v,{className:F.visuallyHidden,children:a})}try{y.displayName="VisuallyHidden",y.__docgenInfo={description:"Visually hides content while keeping it accessible to screen readers.",displayName:"VisuallyHidden",props:{as:{defaultValue:{value:"span"},description:"",name:"as",required:!1,type:{name:"enum",value:[{value:'"div"'},{value:'"span"'}]}}}}}catch{}const[B,O]=D("DismissibleChips"),V=k.forwardRef(function({items:a,children:v,orientation:s,"aria-label":o,"aria-controls":m,value:c,onValueChange:d,defaultValue:p,dataset:f,...h},g){const[i,b]=N({value:c,onValueChange:d,defaultValue:p??[]}),n=t=>{b(i.filter(u=>u!==t))},r=a?a.map(({label:t,value:u,...x})=>e.jsx(C,{value:u,...x,children:t},u)):v;return e.jsx(B,{value:{values:i,onRemove:n,ariaControls:m},children:e.jsx(E,{orientation:s,children:e.jsx(H,{...w(h),ref:g,orientation:s,"aria-label":o,...q(f,{preplyDsComponent:_.DismissibleChips}),children:r})})})}),C=k.forwardRef(function({value:a,children:v,icon:s,countryFlagCode:o,disabled:m,counter:c,dataset:d,dsInternalSimulation:p,...f},h){const{values:g,onRemove:i,ariaControls:b}=O(),n=j(),r=()=>{i(a),n==null||n.focusNext({wrap:!0})},t=u=>{switch(u.key){case"Delete":case"Backspace":r();break}};return g.includes(a)?e.jsx(R,{children:e.jsxs(I,{...w(f),ref:h,variant:"dismissible",onClick:r,onKeyDown:t,icon:s,countryFlagCode:o,disabled:m,"aria-controls":b,dsInternalSimulation:p,...q(d,{preplyDsComponent:_.DismissibleChipsItem}),children:[e.jsx(y,{children:e.jsx(T,{...S.remove})}),e.jsx(z,{counter:c,children:v}),e.jsx(A,{svg:L})]})}):null});try{V.displayName="DismissibleChips",V.__docgenInfo={description:"A chips component for displaying dismissible/removable items.",displayName:"DismissibleChips",props:{"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"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}},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"}]}},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:null,description:"Layout orientation of the chips group. @default 'horizontal'",name:"orientation",required:!1,type:{name:"enum",value:[{value:'"horizontal"'},{value:'"vertical"'}]}},items:{defaultValue:null,description:"",name:"items",required:!1,type:{name:"enum",value:[{value:'(Omit<ChipsItemProps, "children" | "dsInternalSimulation" | "value"> & { value: NonNullable<T>; label: ReactNode; })[]'}]}},ref:{defaultValue:null,description:"",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"(instance: HTMLUListElement | null) => void"},{value:"RefObject<HTMLUListElement>"}]}}}}}catch{}try{C.displayName="DismissibleChipsItem",C.__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:'"ai"'},{value:'"as"'},{value:'"li"'},{value:'"th"'},{value:'"tr"'},{value:'"td"'},{value:'"is"'},{value:'"af"'},{value:'"ax"'},{value:'"al"'},{value:'"dz"'},{value:'"ad"'},{value:'"ao"'},{value:'"aq"'},{value:'"ag"'},{value:'"ar"'},{value:'"am"'},{value:'"aw"'},{value:'"sh-ac"'},{value:'"asean"'},{value:'"au"'},{value:'"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:'"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:'"lt"'},{value:'"lu"'},{value:'"mo"'},{value:'"mg"'},{value:'"mw"'},{value:'"my"'},{value:'"mv"'},{value:'"ml"'},{value:'"mt"'},{value:'"mh"'},{value:'"mq"'},{value:'"mr"'},{value:'"mu"'},{value:'"yt"'},{value:'"mx"'},{value:'"md"'},{value:'"mc"'},{value:'"mn"'},{value:'"me"'},{value:'"ms"'},{value:'"ma"'},{value:'"mz"'},{value:'"mm"'},{value:'"na"'},{value:'"nr"'},{value:'"np"'},{value:'"nl"'},{value:'"nc"'},{value:'"nz"'},{value:'"ni"'},{value:'"ne"'},{value:'"ng"'},{value:'"nu"'},{value:'"nf"'},{value:'"kp"'},{value:'"mk"'},{value:'"gb-nir"'},{value:'"mp"'},{value:'"no"'},{value:'"om"'},{value:'"pc"'},{value:'"pk"'},{value:'"pw"'},{value:'"pa"'},{value:'"pg"'},{value:'"py"'},{value:'"pe"'},{value:'"ph"'},{value:'"pn"'},{value:'"pl"'},{value:'"pt"'},{value:'"pr"'},{value:'"qa"'},{value:'"cg"'},{value:'"ro"'},{value:'"ru"'},{value:'"rw"'},{value:'"re"'},{value:'"bl"'},{value:'"sh-hl"'},{value:'"sh"'},{value:'"kn"'},{value:'"lc"'},{value:'"mf"'},{value:'"pm"'},{value:'"vc"'},{value:'"ws"'},{value:'"sm"'},{value:'"st"'},{value:'"sa"'},{value:'"gb-sct"'},{value:'"sn"'},{value:'"rs"'},{value:'"sc"'},{value:'"sl"'},{value:'"sg"'},{value:'"sx"'},{value:'"sk"'},{value:'"si"'},{value:'"sb"'},{value:'"so"'},{value:'"za"'},{value:'"gs"'},{value:'"kr"'},{value:'"ss"'},{value:'"es"'},{value:'"lk"'},{value:'"ps"'},{value:'"sd"'},{value:'"sr"'},{value:'"sj"'},{value:'"se"'},{value:'"ch"'},{value:'"sy"'},{value:'"tw"'},{value:'"tj"'},{value:'"tz"'},{value:'"tl"'},{value:'"tg"'},{value:'"tk"'},{value:'"to"'},{value:'"tt"'},{value:'"sh-ta"'},{value:'"tn"'},{value:'"tm"'},{value:'"tc"'},{value:'"tv"'},{value:'"ug"'},{value:'"ua"'},{value:'"ae"'},{value:'"gb"'},{value:'"un"'},{value:'"um"'},{value:'"us"'},{value:'"uy"'},{value:'"uz"'},{value:'"vu"'},{value:'"ve"'},{value:'"vn"'},{value:'"vg"'},{value:'"vi"'},{value:'"gb-wls"'},{value:'"wf"'},{value:'"eh"'},{value:'"ye"'},{value:'"zm"'},{value:'"zw"'}]}},value:{defaultValue:null,description:"Unique identifier for this chip. Used for selection tracking",name:"value",required:!0,type:{name:"string"}},children:{defaultValue:null,description:"Content to display inside the chip",name:"children",required:!0,type:{name:"enum",value:[{value:"undefined"},{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},counter:{defaultValue:null,description:"Optional numeric counter to display alongside the chip label",name:"counter",required:!1,type:{name:"enum",value:[{value:"number"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLButtonElement | null) => void"},{value:"RefObject<HTMLButtonElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}export{C as D,V as a};

package/dist/assets/DismissibleChips-Jfhj9R2Y.css

@@ -0,0 +1 @@
+.visuallyHidden__SMp5o{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}