@preply/ds-docs 9.0.0 → 9.1.0

package/dist/project.json

@@ -1 +1 @@
-{"generatedAt":1769602345450,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":true,"refCount":0,"testPackages":{"@chromatic-com/storybook":"4.1.3","@storybook/addon-vitest":"10.1.4","@types/sinonjs__fake-timers":null},"hasRouterPackage":false,"monorepo":"Lerna","packageManager":{"type":"yarn","version":"berry","agent":"yarn@berry","nodeLinker":"node-modules"},"typescriptOptions":{"reactDocgen":"react-docgen-typescript","reactDocgenTypescriptOptions":{"shouldExtractLiteralValuesFromEnum":true,"shouldExtractValuesFromUnion":true,"shouldRemoveUndefinedFromOptional":true,"propFilter":{"skipPropsWithName":"dsInternalSimulation"},"include":["/home/runner/work/design-system/design-system/packages/web-lib/src/components/**/*.tsx"]}},"preview":{"usesGlobals":true},"framework":{"name":"@storybook/react-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/react","portableStoriesFileCount":0,"applicationFileCount":78,"storybookVersion":"10.1.10","storybookVersionSpecifier":"10.1.10","language":"typescript","storybookPackages":{"@chromatic-com/storybook":{"version":"4.1.3"},"@storybook/addon-a11y":{"version":"10.1.4"},"@storybook/addon-docs":{"version":"10.1.4"},"@storybook/addon-links":{},"@storybook/addon-vitest":{"version":"10.1.4"},"@storybook/react-vite":{"version":"10.1.4"},"@storybook/test":{"version":"9.0.0-alpha.2"},"eslint-plugin-storybook":{"version":"10.1.4"},"storybook":{},"storybook-multilevel-sort":{"version":"2.1.0"}},"addons":{"$SNIP/node_modules/@storybook/addon-a11y":{},"$SNIP/node_modules/@storybook/addon-links":{},"$SNIP/node_modules/@storybook/addon-vitest":{},"$SNIP/node_modules/@storybook/addon-docs":{}}}
+{"generatedAt":1771253278711,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":true,"refCount":0,"testPackages":{"@chromatic-com/storybook":"4.1.3","@storybook/addon-vitest":"10.1.4","@types/sinonjs__fake-timers":null},"hasRouterPackage":false,"monorepo":"Lerna","packageManager":{"type":"yarn","version":"berry","agent":"yarn@berry","nodeLinker":"node-modules"},"typescriptOptions":{"reactDocgen":"react-docgen-typescript","reactDocgenTypescriptOptions":{"shouldExtractLiteralValuesFromEnum":true,"shouldExtractValuesFromUnion":true,"shouldRemoveUndefinedFromOptional":true,"propFilter":{"skipPropsWithName":"dsInternalSimulation"},"include":["/home/runner/work/design-system/design-system/packages/web-lib/src/components/**/*.tsx"]}},"preview":{"usesGlobals":true},"framework":{"name":"@storybook/react-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/react","portableStoriesFileCount":0,"applicationFileCount":79,"storybookVersion":"10.1.10","storybookVersionSpecifier":"10.1.10","language":"typescript","storybookPackages":{"@chromatic-com/storybook":{"version":"4.1.3"},"@storybook/addon-a11y":{"version":"10.1.4"},"@storybook/addon-docs":{"version":"10.1.4"},"@storybook/addon-links":{},"@storybook/addon-vitest":{"version":"10.1.4"},"@storybook/react-vite":{"version":"10.1.4"},"@storybook/test":{"version":"9.0.0-alpha.2"},"eslint-plugin-storybook":{"version":"10.1.4"},"storybook":{},"storybook-multilevel-sort":{"version":"2.1.0"}},"addons":{"$SNIP/node_modules/@storybook/addon-a11y":{},"$SNIP/node_modules/@storybook/addon-links":{},"$SNIP/node_modules/@storybook/addon-vitest":{},"$SNIP/node_modules/@storybook/addon-docs":{}}}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@preply/ds-docs",
-    "version": "9.0.0",
+    "version": "9.1.0",
     "publishConfig": {
         "access": "public"
     },
@@ -17,9 +17,9 @@
     },
     "devDependencies": {
         "@chromatic-com/storybook": "^4.1.3",
-        "@preply/ds-i18n": "9.0.0",
-        "@preply/ds-media-icons": "9.0.0",
-        "@preply/ds-static-assets": "9.0.0",
+        "@preply/ds-i18n": "9.1.0",
+        "@preply/ds-media-icons": "9.1.0",
+        "@preply/ds-static-assets": "9.1.0",
         "@storybook/addon-a11y": "10.1.4",
         "@storybook/addon-docs": "10.1.4",
         "@storybook/addon-links": "10.1.4",
@@ -42,5 +42,5 @@
         "vite": "6.4.1",
         "vite-plugin-svgr": "4.5.0"
     },
-    "gitHead": "a0b46c59704c7529f5fc2d2af6b8a41dba73ec8e"
+    "gitHead": "89047c8c022b9c864f5ab6bdb0d61199caa27137"
 }

package/pages/30.guides/70.assets/11.fonts.explorer.mdx

@@ -1,10 +1,6 @@
-import { Meta, Unstyled } from '@storybook/addon-docs/blocks';
-import { FontsExplorer } from './components/FontsExplorer/FontsExplorer';
+import { Meta, Story } from '@storybook/addon-docs/blocks';
+import * as FontsExplorerStories from './fonts-explorer.stories';
 
-<Meta title="Guides/Assets/Fonts Explorer" />
+<Meta of={FontsExplorerStories} />
 
-# Fonts Explorer
-
-<Unstyled>
-    <FontsExplorer />
-</Unstyled>
+<Story of={FontsExplorerStories.Default} />

package/pages/30.guides/70.assets/components/FontsExplorer/LanguageCard.tsx

@@ -43,27 +43,103 @@ const Variants = styled.div`
     }
 `;
 
-function HeadingRow({ variant, children }: { variant: HeadingVariant; children: React.ReactNode }) {
+function HeadingRow({
+    variant,
+    data,
+    showWhenCollapsed = false,
+}: {
+    variant: HeadingVariant;
+    data: LanguageData;
+    showWhenCollapsed?: boolean;
+}) {
+    const [state] = useFontsExplorerState();
+    const { code } = data;
+
+    const isExpanded = state.expanded.includes(code);
+    const text = state.text || data.text;
+    const showEn = code !== 'en' && !state.text;
+
+    if (!isExpanded && !showWhenCollapsed) {
+        return null;
+    }
+
+    if (showEn && isExpanded) {
+        return (
+            <>
+                <Text variant="caption-regular" accent="secondary">
+                    {variant}
+                </Text>
+                <Heading tag="div" variant={variant} dataset={{ value: true }}>
+                    {text}
+                </Heading>
+                <Text variant="caption-regular" accent="secondary">
+                    {variant}
+                </Text>
+                <Heading tag="div" variant={variant} dataset={{ value: true }}>
+                    {englishData.text}
+                </Heading>
+            </>
+        );
+    }
+
     return (
         <>
             <Text variant="caption-regular" accent="secondary">
                 {variant}
             </Text>
             <Heading tag="div" variant={variant} dataset={{ value: true }}>
-                {children}
+                {text}
             </Heading>
         </>
     );
 }
 
-function TextRow({ variant, children }: { variant: TextVariant; children: React.ReactNode }) {
+function TextRow({
+    variant,
+    data,
+    showWhenCollapsed = false,
+}: {
+    variant: TextVariant;
+    data: LanguageData;
+    showWhenCollapsed?: boolean;
+}) {
+    const [state] = useFontsExplorerState();
+    const { code } = data;
+
+    const isExpanded = state.expanded.includes(code);
+    const text = state.text || data.text;
+    const showEn = code !== 'en' && !state.text;
+
+    if (!isExpanded && !showWhenCollapsed) {
+        return null;
+    }
+
+    if (showEn && isExpanded) {
+        return (
+            <>
+                <Text variant="caption-regular" accent="secondary">
+                    {variant}
+                </Text>
+                <Text variant={variant} dataset={{ value: true }}>
+                    {text}
+                </Text>
+                <Text variant="caption-regular" accent="secondary">
+                    {variant}
+                </Text>
+                <Text variant={variant} dataset={{ value: true }}>
+                    {englishData.text}
+                </Text>
+            </>
+        );
+    }
+
     return (
         <>
             <Text variant="caption-regular" accent="secondary">
                 {variant}
             </Text>
             <Text variant={variant} dataset={{ value: true }}>
-                {children}
+                {text}
             </Text>
         </>
     );
@@ -77,10 +153,6 @@ export function LanguageCard({ data }: Props) {
     const [state, dispatch] = useFontsExplorerState();
     const { code, name } = data;
 
-    const isExpanded = state.expanded.includes(code);
-    const text = state.text || data.text;
-    const showEn = code !== 'en' && !state.text;
-
     if (!state.visible.includes(code)) {
         return null;
     }
@@ -101,75 +173,27 @@ export function LanguageCard({ data }: Props) {
             </Badges>
 
             <Variants data-transform={state.textTransform}>
-                {isExpanded && (
-                    <>
-                        <HeadingRow variant="massive">{text}</HeadingRow>
-                        {showEn && <HeadingRow variant="massive">{englishData.text}</HeadingRow>}
-                        <HeadingRow variant="huge">{text}</HeadingRow>
-                        {showEn && <HeadingRow variant="huge">{englishData.text}</HeadingRow>}
-                        <HeadingRow variant="extraLarge">{text}</HeadingRow>
-                        {showEn && <HeadingRow variant="extraLarge">{englishData.text}</HeadingRow>}
-                    </>
-                )}
-                <HeadingRow variant="large">{text}</HeadingRow>
-                {isExpanded && (
-                    <>
-                        {showEn && <HeadingRow variant="large">{englishData.text}</HeadingRow>}
-                        <HeadingRow variant="medium">{text}</HeadingRow>
-                        {showEn && <HeadingRow variant="medium">{englishData.text}</HeadingRow>}
-                        <HeadingRow variant="small">{text}</HeadingRow>
-                        {showEn && <HeadingRow variant="small">{englishData.text}</HeadingRow>}
-                    </>
-                )}
-
-                {isExpanded && (
-                    <>
-                        <TextRow variant="caption-regular">{text}</TextRow>
-                        {showEn && <TextRow variant="caption-regular">{englishData.text}</TextRow>}
-                        <TextRow variant="caption-semibold">{text}</TextRow>
-                        {showEn && <TextRow variant="caption-semibold">{englishData.text}</TextRow>}
-                        <TextRow variant="small-regular">{text}</TextRow>
-                        {showEn && <TextRow variant="small-regular">{englishData.text}</TextRow>}
-                        <TextRow variant="small-regular-italic">{text}</TextRow>
-                        {showEn && (
-                            <TextRow variant="small-regular-italic">{englishData.text}</TextRow>
-                        )}
-                        <TextRow variant="small-semibold">{text}</TextRow>
-                        {showEn && <TextRow variant="small-semibold">{englishData.text}</TextRow>}
-                        <TextRow variant="small-semibold-italic">{text}</TextRow>
-                        {showEn && (
-                            <TextRow variant="small-semibold-italic">{englishData.text}</TextRow>
-                        )}
-                    </>
-                )}
-                <TextRow variant="default-regular">{text}</TextRow>
-                {isExpanded && (
-                    <>
-                        {showEn && <TextRow variant="default-regular">{englishData.text}</TextRow>}
-                        <TextRow variant="default-regular-italic">{text}</TextRow>
-                        {showEn && (
-                            <TextRow variant="default-regular-italic">{englishData.text}</TextRow>
-                        )}
-                        <TextRow variant="default-semibold">{text}</TextRow>
-                        {showEn && <TextRow variant="default-semibold">{englishData.text}</TextRow>}
-                        <TextRow variant="default-semibold-italic">{text}</TextRow>
-                        {showEn && (
-                            <TextRow variant="default-semibold-italic">{englishData.text}</TextRow>
-                        )}
-                        <TextRow variant="large-regular">{text}</TextRow>
-                        {showEn && <TextRow variant="large-regular">{englishData.text}</TextRow>}
-                        <TextRow variant="large-regular-italic">{text}</TextRow>
-                        {showEn && (
-                            <TextRow variant="large-regular-italic">{englishData.text}</TextRow>
-                        )}
-                        <TextRow variant="large-semibold">{text}</TextRow>
-                        {showEn && <TextRow variant="large-semibold">{englishData.text}</TextRow>}
-                        <TextRow variant="large-semibold-italic">{text}</TextRow>
-                        {showEn && (
-                            <TextRow variant="large-semibold-italic">{englishData.text}</TextRow>
-                        )}
-                    </>
-                )}
+                <HeadingRow variant="massive" data={data} />
+                <HeadingRow variant="huge" data={data} />
+                <HeadingRow variant="extraLarge" data={data} />
+                <HeadingRow variant="large" data={data} showWhenCollapsed />
+                <HeadingRow variant="medium" data={data} />
+                <HeadingRow variant="small" data={data} />
+
+                <TextRow variant="caption-regular" data={data} />
+                <TextRow variant="caption-semibold" data={data} />
+                <TextRow variant="small-regular" data={data} />
+                <TextRow variant="small-regular-italic" data={data} />
+                <TextRow variant="small-semibold" data={data} />
+                <TextRow variant="small-semibold-italic" data={data} />
+                <TextRow variant="default-regular" data={data} showWhenCollapsed />
+                <TextRow variant="default-regular-italic" data={data} />
+                <TextRow variant="default-semibold" data={data} />
+                <TextRow variant="default-semibold-italic" data={data} />
+                <TextRow variant="large-regular" data={data} />
+                <TextRow variant="large-regular-italic" data={data} />
+                <TextRow variant="large-semibold" data={data} />
+                <TextRow variant="large-semibold-italic" data={data} />
             </Variants>
         </Container>
     );

package/pages/30.guides/70.assets/components/IllustrationsList.tsx

@@ -93,6 +93,7 @@ const svgUrls = [
     'https://static.preply.com/ds/illustrations/tokyo-ui/you-did-great-today.svg',
     'https://static.preply.com/ds/illustrations/tokyo-ui/warning.svg',
     'https://static.preply.com/ds/illustrations/tokyo-ui/flashcards.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/abc-dice.svg',
 ];
 
 const HighlightTransparency = styled.div`

package/pages/30.guides/70.assets/fonts-explorer.stories.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Meta } from '@storybook/react-vite';
+import { FontsExplorer } from './components/FontsExplorer/FontsExplorer';
+
+const meta: Meta = {
+    title: 'Guides/Assets/Fonts Explorer',
+    tags: ['!autodocs', '!dev'],
+};
+
+export default meta;
+
+export const Default = () => {
+    return <FontsExplorer />;
+};

package/dist/assets/11.fonts-DNWYfYg9.css

@@ -1 +0,0 @@
-.badge__Aj95L{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:var(--5e8be4);padding-left:var(--05dd73);padding-right:var(--05dd73);color:var(--628fb7);max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}.badge__Aj95L>[data-preply-ds-component=Icon]{-ms-flex-negative:0;flex-shrink:0}.badge__Aj95L .label__F86ML{padding:var(--05dd73)}.badge__Aj95L .label__F86ML[data-hidden=true]{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.badge__Aj95L[data-size=small]{min-height:var(--76ac8f)}.badge__Aj95L[data-size=small] .label__F86ML{font-size:var(--e3a55b);font-weight:var(--8cd94c);line-height:var(--732f40)}.badge__Aj95L[data-size=medium]{min-height:var(--f316e1);padding-left:var(--590b8d);padding-right:var(--590b8d)}.badge__Aj95L[data-size=medium] .label__F86ML{font-size:var(--fdb733);font-weight:var(--9643c1);line-height:var(--754361)}.badge__Aj95L[data-size=large]{min-height:var(--7789ee);padding-left:var(--590b8d);padding-right:var(--590b8d)}.badge__Aj95L[data-size=large] .label__F86ML{padding:var(--590b8d);font-size:var(--475c79);font-weight:var(--a3f251);line-height:var(--e33d9e)}.badge__Aj95L[data-type=neutral]{background:var(--319b29)}.badge__Aj95L[data-type=positive]{background:var(--1836a4)}.badge__Aj95L[data-type=warning]{background:var(--b503b8)}.badge__Aj95L[data-type=info]{background:var(--94a45e)}.badge__Aj95L[data-type=critical]{background:var(--f15644)}.badge__Aj95L[data-type=ai]{background:var(--decc79)}.badge__Aj95L[data-accent=unset]{color:var(--628fb7);background-color:var(--a5c761)}.badge__Aj95L[data-accent=unset][data-inverted=true]{color:var(--a6a9d5);background-color:var(--d5f871)}.badge__Aj95L[data-accent=accent]{color:var(--dede3f);background-color:var(--eba8f8)}.badge__Aj95L[data-accent=accent][data-inverted=true]{color:var(--732eb5);background-color:var(--54c075)}.badge__Aj95L[data-accent=info]{color:var(--f3be0c);background-color:var(--7a1a33)}.badge__Aj95L[data-accent=info][data-inverted=true]{color:var(--506df4);background-color:var(--fa3428)}.badge__Aj95L[data-accent=positive]{color:var(--2a2719);background-color:var(--694afa)}.badge__Aj95L[data-accent=positive][data-inverted=true]{color:var(--30c365);background-color:var(--47c404)}.badge__Aj95L[data-accent=warning]{color:var(--84e571);background-color:var(--02372a)}.badge__Aj95L[data-accent=warning][data-inverted=true]{color:var(--363237);background-color:var(--08fa29)}.badge__Aj95L[data-accent=critical]{color:var(--036159);background-color:var(--22f022)}.badge__Aj95L[data-accent=critical][data-inverted=true]{color:var(--90eeff);background-color:var(--cdb1f6)}.badge__Aj95L[data-accent=tertiary]{color:var(--d7e14c);background-color:var(--a453d7)}.badge__Aj95L[data-accent=tertiary][data-inverted=true]{color:var(--ab5158);background-color:var(--50e919)}.bubbleCounter__ARQXM{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;border-radius:var(--aa6dcb);font-size:var(--e3a55b);font-weight:var(--8cd94c);line-height:var(--732f40);letter-spacing:var(--03e2b6);-ms-flex-negative:0;flex-shrink:0}.bubbleCounter__ARQXM.size-small__vThJY{height:var(--558c4c);min-width:var(--558c4c);padding-left:var(--590b8d);padding-right:var(--590b8d)}.bubbleCounter__ARQXM.size-medium__7sdZb{height:var(--b53873);min-width:var(--b53873);padding-left:var(--f30851);padding-right:var(--f30851)}.bubbleCounter__ARQXM.size-large__NFhHi{height:var(--1e685c);min-width:var(--1e685c);padding-left:var(--66b80b);padding-right:var(--66b80b)}.bubbleCounter__ARQXM.variant-dark__wAdfT{background:var(--4983fe);color:var(--c2b191)}.bubbleCounter__ARQXM.variant-light__Jje-9{background:var(--a5c761);color:var(--628fb7)}.childTargetOverlay__xypD-{position:relative;isolation:isolate;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.childTargetOverlay__xypD->.bubbleCounter__ARQXM{position:absolute;z-index:1;top:0;right:0;--offset: var(--ds-bubblecounter-target-offset, 50%);translate:50% -50%;translate:var(--offset) calc(-1 * var(--offset));outline:var(--05dd73) solid transparent;outline:var(--05dd73) solid var(--ds-bubblecounter-outline-color, transparent)}.childTargetOverlay__xypD-:has(.cutout__1sEQk)>.bubbleCounter__ARQXM{--ds-bubblecounter-outline-color: var(--3546c3)}.IconButton__FZTVy{-ms-flex-negative:0;flex-shrink:0}.visuallyHidden__u7xQ9{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.ProgressSteps__FoPeH{display:-webkit-box;display:-ms-flexbox;display:flex;gap:var(--590b8d);-ms-flex-wrap:wrap;flex-wrap:wrap}.ProgressSteps__FoPeH>.step__iXjRm{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;width:var(--7789ee);height:var(--c484d1);border-style:solid;border-color:var(--11d206);border-width:var(--26b8e3)}.ProgressSteps__FoPeH>.step__iXjRm:first-of-type{border-top-left-radius:var(--aa6dcb);border-bottom-left-radius:var(--aa6dcb)}.ProgressSteps__FoPeH>.step__iXjRm:last-of-type{border-top-right-radius:var(--aa6dcb);border-bottom-right-radius:var(--aa6dcb)}.ProgressSteps__FoPeH>.step__iXjRm:after{position:absolute;content:"";top:0;right:0;bottom:0;left:0;-webkit-transform-origin:left;transform-origin:left;-webkit-transform:scaleX(0);transform:scaleX(0);background-color:var(--11d206)}.ProgressSteps__FoPeH>.step__iXjRm[aria-current=step]:after,.ProgressSteps__FoPeH>.step__iXjRm[aria-current=step]+.step__iXjRm[data-active=false]:after{-webkit-transition:-webkit-transform var(--018058);transition:-webkit-transform var(--018058);transition:transform var(--018058);transition:transform var(--018058),-webkit-transform var(--018058)}.ProgressSteps__FoPeH>.step__iXjRm[data-active=true]:after{-webkit-transform:scaleX(1);transform:scaleX(1)}.steps__BxrkC{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:var(--558c4c)}.steps__BxrkC[aria-busy=true]{cursor:wait}@media (min-width: 880px){.steps__BxrkC{gap:var(--b53873)}}.header__HFxfM{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:var(--590b8d);margin-top:var(--590b8d);margin-bottom:var(--b53873)}.header__HFxfM[hidden]{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}@media (min-width: 880px){.header__HFxfM{gap:var(--66b80b);margin-top:var(--66b80b);margin-bottom:var(--1e685c)}}.dialog__80F7X{--dialog-padding: var(--1e685c);--slide-animation-distance: 100%;--show-animation-name: slideInUp__Ni5JT;--hide-animation-name: slideOutDown__g4ZMG;--content-padding-adjustment-for-close-button: calc(calc(var(--5eca09) + var(--813599) + var(--590b8d)) - var(--dialog-padding));-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--3546c3);position:fixed;right:0;bottom:0;left:0;top:auto;margin:auto;width:100%;max-height:100%;overflow-y:auto;overflow-x:hidden;border-top-left-radius:var(--fa4b1a);border-top-right-radius:var(--fa4b1a);-webkit-box-shadow:var(--df7dbb);box-shadow:var(--df7dbb);padding:var(--dialog-padding);z-index:auto;z-index:var(--ds-dialog-content-z-index-override, auto)}.dialog--fullheight__9hYfm{height:100%}.dialog__80F7X.no-border-radius__sLZ8A{border-radius:0}.dialog__80F7X:has(.footer__xkM-4){padding-bottom:0}@media (prefers-reduced-motion: no-preference){.dialog__80F7X{-webkit-animation-duration:var(--970975);animation-duration:var(--970975);-webkit-animation-timing-function:var(--1f4492);animation-timing-function:var(--1f4492);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.dialog__80F7X[data-open]{-webkit-animation-name:var(--show-animation-name);animation-name:var(--show-animation-name)}.dialog__80F7X[data-closed]{-webkit-animation-name:var(--hide-animation-name);animation-name:var(--hide-animation-name)}}@media (min-width: 880px){.dialog__80F7X{--dialog-padding: var(--f1b498);--slide-animation-distance: 40px;--show-animation-name: slideInUp__Ni5JT, opacityIn__p29KJ;--hide-animation-name: slideOutDown__g4ZMG, opacityOut__4QmKk;top:0;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;border-radius:var(--fa4b1a);max-height:calc(100% - var(--42fccf))}.dialog__80F7X.slidesUp__P7Bjm{--hide-animation-name: slideOutUp__FRb6L, opacityOut__4QmKk}.dialog--size-xs__86lDW{width:440px}.dialog--size-sm__zlBiL{width:520px}.dialog--size-md__O2zSS{width:640px}.dialog--size-lg__E9kM0{width:840px}}@media (min-width: 880px) and (min-width: 400px){.dialog--narrow-l--size-xs__CCtfn{width:440px}}@media (min-width: 880px) and (min-width: 700px){.dialog--medium-s--size-xs__uw7Ob{width:440px}}@media (min-width: 880px) and (min-width: 880px){.dialog--medium-l--size-xs__lmMcL{width:440px}}@media (min-width: 880px) and (min-width: 1200px){.dialog--wide-s--size-xs__AzI8n{width:440px}}@media (min-width: 880px) and (min-width: 1900px){.dialog--wide-l--size-xs__jhPFX{width:440px}}@media (min-width: 880px) and (min-width: 400px){.dialog--narrow-l--size-sm__DYeNC{width:520px}}@media (min-width: 880px) and (min-width: 700px){.dialog--medium-s--size-sm__baCNa{width:520px}}@media (min-width: 880px) and (min-width: 880px){.dialog--medium-l--size-sm__Oy6nP{width:520px}}@media (min-width: 880px) and (min-width: 1200px){.dialog--wide-s--size-sm__g8GpB{width:520px}}@media (min-width: 880px) and (min-width: 1900px){.dialog--wide-l--size-sm__h0xzy{width:520px}}@media (min-width: 880px) and (min-width: 400px){.dialog--narrow-l--size-md__0rLFg{width:640px}}@media (min-width: 880px) and (min-width: 700px){.dialog--medium-s--size-md__f64sr{width:640px}}@media (min-width: 880px) and (min-width: 880px){.dialog--medium-l--size-md__ga4RE{width:640px}}@media (min-width: 880px) and (min-width: 1200px){.dialog--wide-s--size-md__sLaM7{width:640px}}@media (min-width: 880px) and (min-width: 1900px){.dialog--wide-l--size-md__clTT7{width:640px}}@media (min-width: 880px) and (min-width: 400px){.dialog--narrow-l--size-lg__iZQJw{width:840px}}@media (min-width: 880px) and (min-width: 700px){.dialog--medium-s--size-lg__nx1H1{width:840px}}@media (min-width: 880px) and (min-width: 880px){.dialog--medium-l--size-lg__qxGb-{width:840px}}@media (min-width: 880px) and (min-width: 1200px){.dialog--wide-s--size-lg__q5Nvs{width:840px}}@media (min-width: 880px) and (min-width: 1900px){.dialog--wide-l--size-lg__fgQ7x{width:840px}}.overlay__otkvG{background-color:var(--02a0d5);position:fixed;top:0;right:0;bottom:0;left:0;z-index:auto;z-index:var(--ds-dialog-overlay-z-index-override, auto)}@media (prefers-reduced-motion: no-preference){.overlay__otkvG{-webkit-animation-duration:var(--970975);animation-duration:var(--970975);-webkit-animation-timing-function:var(--1f4492);animation-timing-function:var(--1f4492);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.overlay__otkvG[data-open]{-webkit-animation-name:opacityIn__p29KJ;animation-name:opacityIn__p29KJ}.overlay__otkvG[data-closed]{-webkit-animation-name:opacityOut__4QmKk;animation-name:opacityOut__4QmKk}}.close__-TGOq{position:absolute;top:var(--813599);right:var(--813599);z-index:1}.title__tGVp1{color:var(--628fb7);margin:0;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-size:var(--d4d05b);font-weight:var(--6b93f9);line-height:var(--a7e8c0);letter-spacing:var(--3e1763)}@media (min-width: 880px){.title__tGVp1{font-size:var(--5d91ee);font-weight:var(--be9403);line-height:var(--ba6c7f);letter-spacing:var(--6408ce)}}.description__84a0F{color:var(--a2f1c8);margin:0;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-size:var(--7f027e);font-weight:var(--59913e);line-height:var(--11f5c9);letter-spacing:var(--b2e406);font-style:var(--61e1de)}.header__ADm9A{padding-right:0;padding-right:initial;padding-right:var(--content-padding-adjustment-for-close-button, unset);margin-bottom:var(--b53873);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:var(--558c4c)}.header__ADm9A>hgroup{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:var(--590b8d);-webkit-box-flex:1;-ms-flex:1;flex:1}@media (min-width: 880px){.header__ADm9A>hgroup{gap:var(--66b80b)}}.header__ADm9A[hidden]{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}@media (min-width: 880px){.header__ADm9A{margin-bottom:var(--1e685c);gap:var(--b53873)}}.scrollEndDetector__Zrfqq{height:1px;margin-top:calc(var(--99d31f) + var(--c0b12c))}.footer__xkM-4{--footer-sticky-border-color: var(--c03289);padding:var(--dialog-padding);margin-left:calc(-1 * var(--dialog-padding));margin-right:calc(-1 * var(--dialog-padding));background-color:var(--3546c3);position:sticky;bottom:0;border-top:1px solid transparent;-webkit-transition:border-color var(--970975) var(--1f4492);transition:border-color var(--970975) var(--1f4492)}.footer__xkM-4.sticky__fB3an{border-color:var(--footer-sticky-border-color)}.buttonStack__KhEjj{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;gap:var(--813599)}@media (min-width: 400px){.buttonStack__KhEjj{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}}.stepControls__FoOIr{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap-reverse;flex-wrap:wrap-reverse;gap:var(--813599)}.stepControls__FoOIr .previous__q2IlS{-webkit-box-flex:1;-ms-flex:1;flex:1}.stepControls__FoOIr .previous__q2IlS [data-preply-ds-component=Button]{padding-left:var(--558c4c);padding-right:var(--558c4c)}@media (min-width: 700px){.stepControls__FoOIr .previous__q2IlS{margin-left:calc(-1 * (var(--0b1b71) + var(--558c4c)))}}.stepControls__FoOIr .next__h6v4X{-webkit-box-flex:666;-ms-flex:666;flex:666}.stepControls__FoOIr .next__h6v4X:only-child{margin-left:auto}@media (min-width: 700px){.stepControls__FoOIr{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.stepControls__FoOIr .previous__q2IlS,.stepControls__FoOIr .next__h6v4X{-webkit-box-flex:initial;-ms-flex:initial;flex:initial}}@-webkit-keyframes opacityIn__p29KJ{0%{opacity:0}to{opacity:1}}@keyframes opacityIn__p29KJ{0%{opacity:0}to{opacity:1}}@-webkit-keyframes opacityOut__4QmKk{0%{opacity:1}to{opacity:0}}@keyframes opacityOut__4QmKk{0%{opacity:1}to{opacity:0}}@-webkit-keyframes slideInUp__Ni5JT{0%{-webkit-transform:translateY(var(--slide-animation-distance));transform:translateY(var(--slide-animation-distance))}to{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slideInUp__Ni5JT{0%{-webkit-transform:translateY(var(--slide-animation-distance));transform:translateY(var(--slide-animation-distance))}to{-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes slideOutDown__g4ZMG{0%{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(var(--slide-animation-distance));transform:translateY(var(--slide-animation-distance))}}@keyframes slideOutDown__g4ZMG{0%{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(var(--slide-animation-distance));transform:translateY(var(--slide-animation-distance))}}@-webkit-keyframes slideOutUp__FRb6L{0%{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(calc(-1 * var(--slide-animation-distance)));transform:translateY(calc(-1 * var(--slide-animation-distance)))}}@keyframes slideOutUp__FRb6L{0%{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(calc(-1 * var(--slide-animation-distance)));transform:translateY(calc(-1 * var(--slide-animation-distance)))}}.positioner__eWf4l{z-index:auto;z-index:var(--ds-dropdown-menu-content-z-index-override, auto)}.fixedPositioner__ASeFt{position:fixed;bottom:0;left:0;right:0;z-index:auto;z-index:var(--ds-dropdown-menu-content-z-index-override, auto)}[data-base-ui-portal]:has(.popup__UucRm[data-open]):has(~[data-base-ui-portal] .popup__UucRm[data-open]) .fixedPositioner__ASeFt.fixedPositioner__ASeFt{pointer-events:none}[data-base-ui-portal]:has(.popup__UucRm[data-open]):has(~[data-base-ui-portal] .popup__UucRm[data-open]) .fixedPositioner__ASeFt.fixedPositioner__ASeFt .popup__UucRm{-webkit-animation:var(--closing-animation-name) var(--018058) forwards;animation:var(--closing-animation-name) var(--018058) forwards}.backdrop__bBmVf{background:var(--02a0d5);position:fixed;top:0;right:0;bottom:0;left:0;z-index:auto;z-index:var(--ds-sropdown-menu-overlay-z-index-override, auto);opacity:1;-webkit-transition:opacity var(--018058);transition:opacity var(--018058)}.backdrop__bBmVf[data-starting-style],.backdrop__bBmVf[data-ending-style],.backdrop__bBmVf[data-backdrop=submenu]{opacity:0}@media (min-width: 700px){.backdrop__bBmVf{opacity:0}}.popup__UucRm{--opening-animation-name: slide-in__GPz7e;--closing-animation-name: slide-out__02zSh;background-color:var(--3546c3);padding:var(--813599);border-radius:var(--fa4b1a) var(--fa4b1a) 0 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:var(--590b8d);-webkit-box-shadow:var(--ecd97a);box-shadow:var(--ecd97a);outline:none;overflow-y:auto;width:100vw;max-height:80vh}.popup__UucRm[data-open]{-webkit-animation:var(--opening-animation-name) var(--018058) forwards;animation:var(--opening-animation-name) var(--018058) forwards}.popup__UucRm[data-closed]{-webkit-animation:var(--closing-animation-name) var(--018058) forwards;animation:var(--closing-animation-name) var(--018058) forwards}@media (min-width: 700px){.popup__UucRm{--opening-animation-name: opacity-in__056Lb;--closing-animation-name: opacity-out__COIpb;padding:var(--590b8d);border-radius:var(--fa4b1a);min-width:min(240px,var(--available-width));max-width:var(--available-width);max-height:min(500px,var(--available-height));width:auto}}.item__5a484{-webkit-tap-highlight-color:transparent;outline:none;-ms-touch-action:manipulation;touch-action:manipulation;--rest-background-color: var(--3546c3);--hover-background-color: var(--302ecf);display:grid;grid-template-columns:auto 1fr fit-content(50%);grid-template-areas:"leadingElements label trailingElements" ". description .";-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:var(--rest-background-color);padding:var(--813599);border-radius:var(--5e8be4);cursor:pointer;-webkit-transition:background var(--018058);transition:background var(--018058)}.item__5a484:hover{background:var(--hover-background-color)}.item__5a484[aria-disabled]{--hover-background-color: var(--3546c3);cursor:not-allowed}.item__5a484:focus-visible{outline:var(--99d31f) solid var(--603ec6)}.item__5a484[role=menuitemradio][aria-checked=true]{--rest-background-color: var(--ff9376)}a.item__5a484{-webkit-text-decoration:none;text-decoration:none}.itemLabel__z75Xr{grid-area:label;color:var(--628fb7);font-weight:var(--59913e);font-size:var(--7f027e);line-height:var(--11f5c9);letter-spacing:var(--b2e406)}[aria-disabled] .itemLabel__z75Xr.itemLabel__z75Xr{color:var(--0a84f6)}.itemDescription__oxy7a{grid-area:description;color:var(--c07ea8);font-weight:var(--c2057a);font-size:var(--d4ea3f);line-height:var(--ff8dfa);letter-spacing:var(--cdd9f4)}.itemDescription__oxy7a:empty{display:none}.itemValue__VOv0R{color:var(--c07ea8);font-weight:var(--c2057a);font-size:var(--d4ea3f);line-height:var(--ff8dfa);letter-spacing:var(--cdd9f4)}.itemLeadingElements__5ARFl{display:-webkit-box;display:-ms-flexbox;display:flex;gap:var(--66b80b);-webkit-box-align:center;-ms-flex-align:center;align-items:center;grid-area:leadingElements;margin-right:var(--66b80b)}.item__5a484[aria-disabled] .itemLeadingElements__5ARFl.itemLeadingElements__5ARFl{color:var(--0a84f6)}.item__5a484[aria-disabled] .itemLeadingElements__5ARFl.itemLeadingElements__5ARFl [data-preply-ds-component=CountryFlag],.item__5a484[aria-disabled] .itemLeadingElements__5ARFl.itemLeadingElements__5ARFl [data-preply-ds-component=Avatar]{opacity:.56}.itemLeadingElements__5ARFl:empty{display:none}.itemTrailingElements__rx0FW{display:-webkit-box;display:-ms-flexbox;display:flex;gap:var(--66b80b);-webkit-box-align:center;-ms-flex-align:center;align-items:center;grid-area:trailingElements;margin-left:var(--66b80b);color:var(--628fb7)}.item__5a484[aria-disabled] .itemTrailingElements__rx0FW.itemTrailingElements__rx0FW{color:var(--0a84f6)}.itemTrailingElements__rx0FW>[data-preply-ds-component=Icon]{-ms-flex-negative:0;flex-shrink:0}.itemTrailingElements__rx0FW:empty{display:none}.group__-plPv{padding-top:var(--590b8d);padding-bottom:var(--590b8d);border-top:1px solid var(--c03289);border-bottom:1px solid var(--c03289);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:var(--590b8d)}.group__-plPv:first-child,.group__-plPv+.group__-plPv{border-top:none;padding-top:0}.group__-plPv:last-child{border-bottom:none;padding-bottom:0}.groupLabel__OisFc{padding:var(--813599);padding-bottom:var(--590b8d);font-weight:var(--a4fde7);font-size:var(--8098ff);line-height:var(--2285fa);letter-spacing:var(--95d383)}.radioGroup__cjmci{display:contents}.checkboxItemIndicator__6wmLt{--background-color: var(--a5c761);--thumb-background-color: var(--3546c3);--checked-background-color: var(--4983fe);--thumb-checked-background-color: var(--3546c3);position:relative;width:38px;height:var(--f316e1);border-radius:var(--aa6dcb);background-color:var(--background-color);-webkit-transition:background-color var(--018058);transition:background-color var(--018058)}.checkboxItemIndicator__6wmLt:before{content:"";position:absolute;margin:3px;top:0;bottom:0;aspect-ratio:1 / 1;border-radius:var(--aa6dcb);background-color:var(--thumb-background-color);-webkit-transition:background-color var(--018058),translate var(--018058);transition:background-color var(--018058),translate var(--018058)}.checkboxItemIndicator__6wmLt[data-checked]{background-color:var(--checked-background-color)}.checkboxItemIndicator__6wmLt[data-checked]:before{translate:calc(38px - 3px * 2 - (var(--f316e1) - 3px * 2));translate:calc(38px - 3px * 2 - calc(var(--f316e1) - 3px * 2));background-color:var(--thumb-checked-background-color)}[aria-disabled] .checkboxItemIndicator__6wmLt.checkboxItemIndicator__6wmLt{--background-color: var(--319b29);--checked-background-color: var(--12f66e);--thumb-background-color: var(--302ecf);--thumb-checked-background-color: var(--319b29)}@-webkit-keyframes opacity-in__056Lb{0%{opacity:0}to{opacity:1}}@keyframes opacity-in__056Lb{0%{opacity:0}to{opacity:1}}@-webkit-keyframes opacity-out__COIpb{0%{opacity:1}to{opacity:0}}@keyframes opacity-out__COIpb{0%{opacity:1}to{opacity:0}}@-webkit-keyframes slide-in__GPz7e{0%{-webkit-transform:translateY(100%);transform:translateY(100%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slide-in__GPz7e{0%{-webkit-transform:translateY(100%);transform:translateY(100%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes slide-out__02zSh{0%{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes slide-out__02zSh{0%{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}.container__dtKps{--ds-input-scroll-margin-top: var(--d434fb);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:var(--590b8d);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.container__dtKps:has(.label__S0tQE:not([data-hidden=true])){--ds-input-scroll-margin-top: calc(var(--590b8d) + var(--360264))}.label__S0tQE{color:var(--628fb7);font-size:var(--343d89);font-weight:var(--b44390);line-height:var(--360264);letter-spacing:var(--b8c41f)}.label__S0tQE[data-hidden=true]{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.label__S0tQE .required__GVzWg{white-space:nowrap;color:var(--a2f1c8)}.description__h6Gw1,.error__MGvA2{margin:var(--d434fb);font-weight:var(--c2057a);font-size:var(--d4ea3f);line-height:var(--ff8dfa);letter-spacing:var(--cdd9f4);color:var(--a2f1c8)}.error__MGvA2{color:var(--8ec9e5)}.container__B-gQ9{width:100%;position:relative}.container__B-gQ9 .input__WZN7y{-webkit-transition:border-color var(--018058);transition:border-color var(--018058)}@media (hover: hover) and (pointer: fine){.container__B-gQ9:hover .input__WZN7y{border-color:var(--11d206)}}.container__B-gQ9 .icon__6Xfum{position:absolute;left:calc(var(--558c4c) - var(--d9baa3));top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);color:var(--cbc724);pointer-events:none}.container__B-gQ9 .trailingIcon__Bgnv4{position:absolute;right:calc(var(--558c4c) - var(--d9baa3));top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);color:var(--cbc724);pointer-events:none}.container__B-gQ9 .button__auAU0{position:absolute;right:var(--590b8d);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.container__B-gQ9:has(>.icon__6Xfum) .input__WZN7y{padding-left:calc((var(--558c4c) - var(--d9baa3)) + var(--1e685c) + var(--66b80b));padding-left:calc(calc(var(--558c4c) - var(--d9baa3)) + var(--1e685c) + var(--66b80b))}.container__B-gQ9:has(>.button__auAU0) .input__WZN7y{padding-right:58px}.container__B-gQ9:has(>.trailingIcon__Bgnv4) .input__WZN7y{padding-right:calc((var(--558c4c) - var(--d9baa3)) + var(--1e685c) + var(--66b80b));padding-right:calc(calc(var(--558c4c) - var(--d9baa3)) + var(--1e685c) + var(--66b80b))}.container__B-gQ9:has(>.input__WZN7y[aria-invalid=true]) .icon__6Xfum{color:var(--7b0f41)}.input__WZN7y{display:block;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;padding:calc(var(--d9baa3) + var(--66b80b)) calc(var(--558c4c) - var(--d9baa3));border:var(--d9baa3) solid var(--c03289);border-radius:var(--fa4b1a);font-size:var(--7f027e);line-height:var(--11f5c9);font-weight:var(--59913e);letter-spacing:var(--b2e406);scroll-margin-top:var(--ds-input-scroll-margin-top)}.input__WZN7y::-webkit-input-placeholder{color:var(--d9209f)}.input__WZN7y::-moz-placeholder{color:var(--d9209f)}.input__WZN7y:-ms-input-placeholder{color:var(--d9209f)}.input__WZN7y::-ms-input-placeholder{color:var(--d9209f)}.input__WZN7y::placeholder{color:var(--d9209f)}.input__WZN7y:focus{outline:var(--5b4fe9) auto var(--d9baa3)}.input__WZN7y:disabled,.input__WZN7y:disabled:hover{border-color:transparent;background-color:var(--04daeb)}.input__WZN7y[aria-invalid=true]{border-color:var(--7b0f41);background-color:var(--95df5b);color:var(--7b0f41)}input.input__WZN7y[type=number]{-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}input.input__WZN7y[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:var(--d434fb)}input.input__WZN7y[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:var(--d434fb)}select.input__WZN7y{-webkit-appearance:none;-moz-appearance:none;appearance:none}select.input__WZN7y[data-empty=true]{color:var(--d9209f)}.Divider__kU514{all:unset;display:block;border-radius:0}.Divider__kU514.size-small__OdB2p{height:var(--f3fdd6);background:var(--c03289)}.Divider__kU514.size-large__4iJ0a{height:var(--53860b);background:var(--fede46)}