@dnanpm/ui-components 0.8.0 → 0.10.0

package/dist/components/ContentCard/index.d.ts

@@ -0,0 +1,3 @@
+export { ContentCard } from './ContentCard';
+export type { ContentCardAppearance, ContentCardArticleProps, ContentCardDivProps, ContentCardElement, ContentCardHeadingLevel, ContentCardLiProps, ContentCardLogoBackground, ContentCardMediaKind, ContentCardMediaPosition, ContentCardMediaWidth, ContentCardProps, ContentCardSectionProps, } from './ContentCard.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ContentCard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ContentCard/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EACR,qBAAqB,EACrB,uBAAuB,EACvB,mBAAmB,EACnB,kBAAkB,EAClB,uBAAuB,EACvB,kBAAkB,EAClB,yBAAyB,EACzB,oBAAoB,EACpB,wBAAwB,EACxB,qBAAqB,EACrB,gBAAgB,EAChB,uBAAuB,GAC1B,MAAM,qBAAqB,CAAC"}

package/dist/components/Drawer/Drawer.cjs

@@ -3,8 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const icons = require("@dnanpm/icons");
-const elevation_module = require("../../styles/utils/elevation.module.css.cjs");
-const focus_module = require("../../styles/utils/focus.module.css.cjs");
+const index = require("../../styles/utils/index.cjs");
 const useDialogDismissal = require("../Modal/useDialogDismissal.cjs");
 const useNativeDialog = require("../Modal/useNativeDialog.cjs");
 const Drawer_module = require("./Drawer.module.css.cjs");
@@ -53,6 +52,7 @@ const Drawer = ({
     "dialog",
     {
       ...props,
+      "data-color-scheme": "light",
       ref: (node) => {
         dialogRef.current = node;
         if (typeof ref === "function") ref(node);
@@ -60,7 +60,7 @@ const Drawer = ({
       },
       className: cn.cn(
         Drawer_module.default.drawer,
-        elevation_module.default.elevationHigh,
+        index.elevationStyles.elevationHigh,
         Drawer_module.default[`drawer--${size}`],
         Drawer_module.default[`drawer--${headerStyle}`],
         Drawer_module.default[`drawer--${side}`],
@@ -79,20 +79,28 @@ const Drawer = ({
             "button",
             {
               type: "button",
-              className: cn.cn(Drawer_module.default.drawer__close, focus_module.default.focusable),
+              className: cn.cn(Drawer_module.default.drawer__close, index.focusStyles.focusable),
               "aria-label": closeLabel,
               "data-dialog-autofocus": "true",
+              "data-color-scheme": headerStyle,
               onClick: close,
               children: /* @__PURE__ */ jsxRuntime.jsx(icons.Close, { "aria-hidden": "true" })
             }
           ),
-          (title || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Drawer_module.default.drawer__title, children: [
+          (title || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Drawer_module.default.drawer__title, "data-color-scheme": headerStyle, children: [
             title && /* @__PURE__ */ jsxRuntime.jsx("h2", { id: titleId, className: Drawer_module.default.drawer__heading, children: title }),
-            description && /* @__PURE__ */ jsxRuntime.jsx("div", { id: descriptionId, className: Drawer_module.default.drawer__description, children: description })
+            description && /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                id: descriptionId,
+                className: cn.cn(Drawer_module.default.drawer__description, "dds-prose"),
+                children: description
+              }
+            )
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: Drawer_module.default.drawer__content, children })
         ] }),
-        footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn.cn(Drawer_module.default["drawer__bottom-bar"], elevation_module.default.elevationMedium), children: footer })
+        footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn.cn(Drawer_module.default["drawer__bottom-bar"], index.elevationStyles.elevationMedium), children: footer })
       ]
     }
   );

package/dist/components/Drawer/Drawer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.cjs","sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import { useId } from 'react';\nimport { Close } from '@dnanpm/icons';\nimport { cn } from '../../utils/cn';\nimport elevationStyles from '../../styles/utils/elevation.module.css';\nimport focusStyles from '../../styles/utils/focus.module.css';\nimport { useDialogDismissal } from '../Modal/useDialogDismissal';\nimport { useNativeDialog } from '../Modal/useNativeDialog';\nimport styles from './Drawer.module.css';\nimport type { DrawerProps } from './Drawer.types';\n\nexport const Drawer = ({\n    open,\n    onOpenChange,\n    title,\n    description,\n    children,\n    footer,\n    size = 'small',\n    headerStyle = 'light',\n    side = 'right',\n    fixedTitle = false,\n    disableCloseOptions = false,\n    closeLabel = 'Sulje dialogi',\n    keepMounted = false,\n    className,\n    ref,\n    onKeyDown,\n    onClick,\n    onPointerDown,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    ...props\n}: DrawerProps) => {\n    const titleId = useId();\n    const descriptionId = useId();\n    const { dialogRef, close, phase, isPresent } = useNativeDialog({\n        open: open ?? false,\n        keepMounted,\n        onOpenChange,\n    });\n    const describedBy =\n        [description ? descriptionId : undefined, ariaDescribedBy].filter(Boolean).join(' ') ||\n        undefined;\n    const dialogDismissalProps = useDialogDismissal({\n        close,\n        disableCloseOptions,\n        onClick,\n        onKeyDown,\n        onPointerDown,\n    });\n\n    if (!isPresent) return null;\n\n    return (\n        <dialog\n            {...props}\n            ref={(node) => {\n                dialogRef.current = node;\n                if (typeof ref === 'function') ref(node);\n                else if (ref) ref.current = node;\n            }}\n            className={cn(\n                styles.drawer,\n                elevationStyles.elevationHigh,\n                styles[`drawer--${size}`],\n                styles[`drawer--${headerStyle}`],\n                styles[`drawer--${side}`],\n                { [styles['drawer--fixed-title']]: fixedTitle },\n                { [styles['drawer--opening']]: phase !== 'closing' },\n                { [styles['drawer--closing']]: phase === 'closing' },\n                className,\n            )}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy ?? (!ariaLabel && title ? titleId : undefined)}\n            aria-describedby={describedBy}\n            {...dialogDismissalProps}\n        >\n            <div className={styles.drawer__container}>\n                {!disableCloseOptions && (\n                    <button\n                        type=\"button\"\n                        className={cn(styles.drawer__close, focusStyles.focusable)}\n                        aria-label={closeLabel}\n                        data-dialog-autofocus=\"true\"\n                        onClick={close}\n                    >\n                        <Close aria-hidden=\"true\" />\n                    </button>\n                )}\n                {(title || description) && (\n                    <div className={styles.drawer__title}>\n                        {title && (\n                            <h2 id={titleId} className={styles.drawer__heading}>\n                                {title}\n                            </h2>\n                        )}\n                        {description && (\n                            <div id={descriptionId} className={styles.drawer__description}>\n                                {description}\n                            </div>\n                        )}\n                    </div>\n                )}\n                <div className={styles.drawer__content}>{children}</div>\n            </div>\n            {footer && (\n                <div className={cn(styles['drawer__bottom-bar'], elevationStyles.elevationMedium)}>\n                    {footer}\n                </div>\n            )}\n        </dialog>\n    );\n};\n"],"names":["useId","useNativeDialog","useDialogDismissal","jsxs","cn","styles","elevationStyles","jsx","focusStyles","Close"],"mappings":";;;;;;;;;;;AAUO,MAAM,SAAS,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,cAAc;AAAA,EACd,OAAO;AAAA,EACP,aAAa;AAAA,EACb,sBAAsB;AAAA,EACtB,aAAa;AAAA,EACb,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,GAAG;AACP,MAAmB;AACf,QAAM,UAAUA,MAAAA,MAAA;AAChB,QAAM,gBAAgBA,MAAAA,MAAA;AACtB,QAAM,EAAE,WAAW,OAAO,OAAO,UAAA,IAAcC,gBAAAA,gBAAgB;AAAA,IAC3D,MAAM,QAAQ;AAAA,IACd;AAAA,IACA;AAAA,EAAA,CACH;AACD,QAAM,cACF,CAAC,cAAc,gBAAgB,QAAW,eAAe,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,KACnF;AACJ,QAAM,uBAAuBC,mBAAAA,mBAAmB;AAAA,IAC5C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACH;AAED,MAAI,CAAC,UAAW,QAAO;AAEvB,SACIC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,KAAK,CAAC,SAAS;AACX,kBAAU,UAAU;AACpB,YAAI,OAAO,QAAQ,WAAY,KAAI,IAAI;AAAA,iBAC9B,SAAS,UAAU;AAAA,MAChC;AAAA,MACA,WAAWC,GAAAA;AAAAA,QACPC,cAAAA,QAAO;AAAA,QACPC,iBAAAA,QAAgB;AAAA,QAChBD,cAAAA,QAAO,WAAW,IAAI,EAAE;AAAA,QACxBA,cAAAA,QAAO,WAAW,WAAW,EAAE;AAAA,QAC/BA,cAAAA,QAAO,WAAW,IAAI,EAAE;AAAA,QACxB,EAAE,CAACA,cAAAA,QAAO,qBAAqB,CAAC,GAAG,WAAA;AAAA,QACnC,EAAE,CAACA,cAAAA,QAAO,iBAAiB,CAAC,GAAG,UAAU,UAAA;AAAA,QACzC,EAAE,CAACA,cAAAA,QAAO,iBAAiB,CAAC,GAAG,UAAU,UAAA;AAAA,QACzC;AAAA,MAAA;AAAA,MAEJ,cAAY;AAAA,MACZ,mBAAiB,mBAAmB,CAAC,aAAa,QAAQ,UAAU;AAAA,MACpE,oBAAkB;AAAA,MACjB,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAAF,2BAAAA,KAAC,OAAA,EAAI,WAAWE,cAAAA,QAAO,mBAClB,UAAA;AAAA,UAAA,CAAC,uBACEE,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACG,MAAK;AAAA,cACL,WAAWH,GAAAA,GAAGC,cAAAA,QAAO,eAAeG,aAAAA,QAAY,SAAS;AAAA,cACzD,cAAY;AAAA,cACZ,yBAAsB;AAAA,cACtB,SAAS;AAAA,cAET,UAAAD,2BAAAA,IAACE,MAAAA,OAAA,EAAM,eAAY,OAAA,CAAO;AAAA,YAAA;AAAA,UAAA;AAAA,WAGhC,SAAS,gBACPN,gCAAC,OAAA,EAAI,WAAWE,cAAAA,QAAO,eAClB,UAAA;AAAA,YAAA,wCACI,MAAA,EAAG,IAAI,SAAS,WAAWA,sBAAO,iBAC9B,UAAA,MAAA,CACL;AAAA,YAEH,8CACI,OAAA,EAAI,IAAI,eAAe,WAAWA,sBAAO,qBACrC,UAAA,YAAA,CACL;AAAA,UAAA,GAER;AAAA,UAEJE,2BAAAA,IAAC,OAAA,EAAI,WAAWF,cAAAA,QAAO,iBAAkB,SAAA,CAAS;AAAA,QAAA,GACtD;AAAA,QACC,UACGE,2BAAAA,IAAC,OAAA,EAAI,WAAWH,GAAAA,GAAGC,cAAAA,QAAO,oBAAoB,GAAGC,iBAAAA,QAAgB,eAAe,GAC3E,UAAA,OAAA,CACL;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIhB;;"}
+{"version":3,"file":"Drawer.cjs","sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import { useId } from 'react';\nimport { Close } from '@dnanpm/icons';\nimport { cn } from '../../utils/cn';\nimport { elevationStyles, focusStyles } from '../../styles/utils';\nimport { useDialogDismissal } from '../Modal/useDialogDismissal';\nimport { useNativeDialog } from '../Modal/useNativeDialog';\nimport styles from './Drawer.module.css';\nimport type { DrawerProps } from './Drawer.types';\n\nexport const Drawer = ({\n    open,\n    onOpenChange,\n    title,\n    description,\n    children,\n    footer,\n    size = 'small',\n    headerStyle = 'light',\n    side = 'right',\n    fixedTitle = false,\n    disableCloseOptions = false,\n    closeLabel = 'Sulje dialogi',\n    keepMounted = false,\n    className,\n    ref,\n    onKeyDown,\n    onClick,\n    onPointerDown,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    ...props\n}: DrawerProps) => {\n    const titleId = useId();\n    const descriptionId = useId();\n    const { dialogRef, close, phase, isPresent } = useNativeDialog({\n        open: open ?? false,\n        keepMounted,\n        onOpenChange,\n    });\n    const describedBy =\n        [description ? descriptionId : undefined, ariaDescribedBy].filter(Boolean).join(' ') ||\n        undefined;\n    const dialogDismissalProps = useDialogDismissal({\n        close,\n        disableCloseOptions,\n        onClick,\n        onKeyDown,\n        onPointerDown,\n    });\n\n    if (!isPresent) return null;\n\n    return (\n        <dialog\n            {...props}\n            data-color-scheme=\"light\"\n            ref={(node) => {\n                dialogRef.current = node;\n                if (typeof ref === 'function') ref(node);\n                else if (ref) ref.current = node;\n            }}\n            className={cn(\n                styles.drawer,\n                elevationStyles.elevationHigh,\n                styles[`drawer--${size}`],\n                styles[`drawer--${headerStyle}`],\n                styles[`drawer--${side}`],\n                { [styles['drawer--fixed-title']]: fixedTitle },\n                { [styles['drawer--opening']]: phase !== 'closing' },\n                { [styles['drawer--closing']]: phase === 'closing' },\n                className,\n            )}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy ?? (!ariaLabel && title ? titleId : undefined)}\n            aria-describedby={describedBy}\n            {...dialogDismissalProps}\n        >\n            <div className={styles.drawer__container}>\n                {!disableCloseOptions && (\n                    <button\n                        type=\"button\"\n                        className={cn(styles.drawer__close, focusStyles.focusable)}\n                        aria-label={closeLabel}\n                        data-dialog-autofocus=\"true\"\n                        data-color-scheme={headerStyle}\n                        onClick={close}\n                    >\n                        <Close aria-hidden=\"true\" />\n                    </button>\n                )}\n                {(title || description) && (\n                    <div className={styles.drawer__title} data-color-scheme={headerStyle}>\n                        {title && (\n                            <h2 id={titleId} className={styles.drawer__heading}>\n                                {title}\n                            </h2>\n                        )}\n                        {description && (\n                            <div\n                                id={descriptionId}\n                                className={cn(styles.drawer__description, 'dds-prose')}\n                            >\n                                {description}\n                            </div>\n                        )}\n                    </div>\n                )}\n                <div className={styles.drawer__content}>{children}</div>\n            </div>\n            {footer && (\n                <div className={cn(styles['drawer__bottom-bar'], elevationStyles.elevationMedium)}>\n                    {footer}\n                </div>\n            )}\n        </dialog>\n    );\n};\n"],"names":["useId","useNativeDialog","useDialogDismissal","jsxs","cn","styles","elevationStyles","jsx","focusStyles","Close"],"mappings":"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"}

package/dist/components/Drawer/Drawer.css

@@ -1,4 +1,4 @@
-@layer dds-components {._drawer_zzxde_1 {
+@layer dds-base, dds-components;@layer dds-components { @layer fallback, components; }@layer dds-components.components{._drawer_t9y6s_1 {
     --_drawer-transition-duration-open: 400ms;
     --_drawer-transition-duration-close: 200ms;
     position: fixed;
@@ -23,43 +23,43 @@
     transition-behavior: allow-discrete;
 }
 
-._drawer_zzxde_1:not([open]) {
+._drawer_t9y6s_1:not([open]) {
     display: none;
 }
-._drawer--small_zzxde_29 {
+._drawer--small_t9y6s_29 {
     width: 375px;
 }
-._drawer--medium_zzxde_32 {
+._drawer--medium_t9y6s_32 {
     width: 768px;
 }
-._drawer--large_zzxde_35 {
+._drawer--large_t9y6s_35 {
     width: 1080px;
 }
-._drawer--opening_zzxde_38,
-._drawer--closing_zzxde_39 {
+._drawer--opening_t9y6s_38,
+._drawer--closing_t9y6s_39 {
     display: flex;
     flex-direction: column;
 }
-._drawer--opening_zzxde_38 {
+._drawer--opening_t9y6s_38 {
     transition-duration: var(--_drawer-transition-duration-open);
     transform: translateX(-100%);
 }
-._drawer--closing_zzxde_39 {
+._drawer--closing_t9y6s_39 {
     transform: translateX(0);
 }
-._drawer--left_zzxde_50 {
+._drawer--left_t9y6s_50 {
     right: auto;
     left: 0;
     transform: translateX(-100%);
 }
-._drawer--left_zzxde_50._drawer--opening_zzxde_38 {
+._drawer--left_t9y6s_50._drawer--opening_t9y6s_38 {
     transform: translateX(0);
 }
-._drawer--left_zzxde_50._drawer--closing_zzxde_39 {
+._drawer--left_t9y6s_50._drawer--closing_t9y6s_39 {
     transform: translateX(-100%);
 }
 
-._drawer_zzxde_1::backdrop {
+._drawer_t9y6s_1::backdrop {
     background: var(--color-semantic-utility-overlay-strong);
     opacity: 0;
     transition-property: opacity, overlay;
@@ -67,25 +67,25 @@
     transition-timing-function: ease;
     transition-behavior: allow-discrete;
 }
-._drawer--opening_zzxde_38::backdrop {
+._drawer--opening_t9y6s_38::backdrop {
     opacity: 1;
     transition-duration: var(--_drawer-transition-duration-open);
 }
-._drawer--closing_zzxde_39::backdrop {
+._drawer--closing_t9y6s_39::backdrop {
     opacity: 0;
     transition-duration: var(--_drawer-transition-duration-close);
 }
-._drawer__container_zzxde_78 {
+._drawer__container_t9y6s_78 {
     display: flex;
     min-height: 0;
     flex: 1 1 auto;
     flex-direction: column;
     overflow: auto;
 }
-._drawer--fixed-title_zzxde_85 ._drawer__container_zzxde_78 {
+._drawer--fixed-title_t9y6s_85 ._drawer__container_t9y6s_78 {
     overflow: hidden;
 }
-._drawer__title_zzxde_88 {
+._drawer__title_t9y6s_88 {
     display: flex;
     flex: 0 0 auto;
     flex-direction: column;
@@ -95,22 +95,22 @@
     border-bottom: var(--borderwidth-semantic-xs) solid var(--color-semantic-border-neutral-base);
     background: var(--color-semantic-surface-base);
 }
-._drawer__heading_zzxde_98 {
+._drawer__heading_t9y6s_98 {
     margin: 0;
     font: var(--typography-heading-md);
 }
-._drawer__description_zzxde_102 {
+._drawer__description_t9y6s_102 {
     margin: 0;
 }
-._drawer__content_zzxde_105 {
+._drawer__content_t9y6s_105 {
     flex: 1 1 auto;
     padding: var(--spacing-space-20);
     overflow-wrap: anywhere;
 }
-._drawer--fixed-title_zzxde_85 ._drawer__content_zzxde_105 {
+._drawer--fixed-title_t9y6s_85 ._drawer__content_t9y6s_105 {
     overflow: auto;
 }
-._drawer__close_zzxde_113 {
+._drawer__close_t9y6s_113 {
     position: absolute;
     z-index: 1;
     top: 0;
@@ -126,94 +126,96 @@
     color: var(--color-semantic-foreground-secondary-strong);
     cursor: pointer;
 }
-._drawer__close_zzxde_113 svg {
+._drawer__close_t9y6s_113 svg {
     width: 24px;
     height: 24px;
 }
-._drawer__bottom-bar_zzxde_133 {
+._drawer__bottom-bar_t9y6s_133 {
     flex: 0 0 auto;
     padding: var(--spacing-space-20) var(--spacing-space-20) var(--spacing-space-24);
     border: none;
     border-radius: 0;
     border-top: var(--borderwidth-semantic-xs) solid var(--color-semantic-border-neutral-base);
 }
-._drawer--dark_zzxde_140 ._drawer__title_zzxde_88 {
+._drawer--dark_t9y6s_140 ._drawer__title_t9y6s_88 {
     border-bottom-color: var(--color-semantic-border-secondary);
     background: var(--color-semantic-surface-secondary-strong);
     color: var(--color-semantic-foreground-inverse);
 }
-._drawer--dark_zzxde_140 ._drawer__close_zzxde_113 {
+._drawer--dark_t9y6s_140 ._drawer__close_t9y6s_113 {
     background: var(--color-semantic-surface-secondary-mid);
     color: var(--color-semantic-foreground-inverse);
 }
 
-@media (min-width: 768px) {
-    ._drawer--medium_zzxde_32 {
+@media (width >= 768px) {
+    ._drawer--medium_t9y6s_32 {
         --_drawer-transition-duration-open: 500ms;
         --_drawer-transition-duration-close: 300ms;
     }
-    ._drawer--large_zzxde_35 {
+    ._drawer--large_t9y6s_35 {
         --_drawer-transition-duration-open: 500ms;
         --_drawer-transition-duration-close: 300ms;
     }
 }
-@media (min-width: 1024px) {
-    ._drawer--large_zzxde_35 {
+@media (width >= 1024px) {
+    ._drawer--large_t9y6s_35 {
         --_drawer-transition-duration-open: 600ms;
         --_drawer-transition-duration-close: 400ms;
     }
 }
-@media (max-width: 359px) {
-    ._drawer_zzxde_1 {
+@media (width < 360px) {
+    ._drawer_t9y6s_1 {
         width: 100vw;
         max-width: 100vw;
     }
 }
 @media (prefers-reduced-motion: reduce) {
-    ._drawer_zzxde_1,
-    ._drawer_zzxde_1::backdrop {
+    ._drawer_t9y6s_1,
+    ._drawer_t9y6s_1::backdrop {
         transition: none;
     }
 }
 @media (forced-colors: active) {
-    ._drawer_zzxde_1 {
+    ._drawer_t9y6s_1 {
         border: 2px solid CanvasText;
         box-shadow: none;
     }
-    ._drawer_zzxde_1::backdrop {
+    ._drawer_t9y6s_1::backdrop {
         background: Canvas;
         opacity: 0.7;
     }
-    ._drawer__close_zzxde_113 {
+    ._drawer__close_t9y6s_113 {
         border: 1px solid ButtonBorder;
         background: ButtonFace;
         color: ButtonText;
     }
 }
 
-._drawer--opening_zzxde_38 {
+._drawer--opening_t9y6s_38 {
     @starting-style {
         transform: translateX(0);
     }
 }
-._drawer--opening_zzxde_38::backdrop {
+._drawer--opening_t9y6s_38::backdrop {
     @starting-style {
         opacity: 0;
     }
 }
-._drawer--closing_zzxde_39 {
+._drawer--closing_t9y6s_39 {
     @starting-style {
         transform: translateX(-100%);
     }
 }
-._drawer--left_zzxde_50._drawer--opening_zzxde_38 {
+._drawer--left_t9y6s_50._drawer--opening_t9y6s_38 {
     @starting-style {
         transform: translateX(-100%);
     }
 }
-._drawer--left_zzxde_50._drawer--closing_zzxde_39 {
+._drawer--left_t9y6s_50._drawer--closing_t9y6s_39 {
     @starting-style {
         transform: translateX(0);
     }
 }
-}
+/**
+ * Do not edit directly, this file was auto-generated.
+ */ }

package/dist/components/Drawer/Drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,eAAO,MAAM,MAAM,GAAI,+SAuBpB,WAAW,mDAgFb,CAAC"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,eAAO,MAAM,MAAM,GAAI,+SAuBpB,WAAW,mDAqFb,CAAC"}

package/dist/components/Drawer/Drawer.js

@@ -1,8 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useId } from "react";
 import { Close } from "@dnanpm/icons";
-import elevationStyles from "../../styles/utils/elevation.module.css.js";
-import focusStyles from "../../styles/utils/focus.module.css.js";
+import { focusStyles, elevationStyles } from "../../styles/utils/index.js";
 import { useDialogDismissal } from "../Modal/useDialogDismissal.js";
 import { useNativeDialog } from "../Modal/useNativeDialog.js";
 import styles from "./Drawer.module.css.js";
@@ -51,6 +50,7 @@ const Drawer = ({
     "dialog",
     {
       ...props,
+      "data-color-scheme": "light",
       ref: (node) => {
         dialogRef.current = node;
         if (typeof ref === "function") ref(node);
@@ -80,13 +80,21 @@ const Drawer = ({
               className: cn(styles.drawer__close, focusStyles.focusable),
               "aria-label": closeLabel,
               "data-dialog-autofocus": "true",
+              "data-color-scheme": headerStyle,
               onClick: close,
               children: /* @__PURE__ */ jsx(Close, { "aria-hidden": "true" })
             }
           ),
-          (title || description) && /* @__PURE__ */ jsxs("div", { className: styles.drawer__title, children: [
+          (title || description) && /* @__PURE__ */ jsxs("div", { className: styles.drawer__title, "data-color-scheme": headerStyle, children: [
             title && /* @__PURE__ */ jsx("h2", { id: titleId, className: styles.drawer__heading, children: title }),
-            description && /* @__PURE__ */ jsx("div", { id: descriptionId, className: styles.drawer__description, children: description })
+            description && /* @__PURE__ */ jsx(
+              "div",
+              {
+                id: descriptionId,
+                className: cn(styles.drawer__description, "dds-prose"),
+                children: description
+              }
+            )
           ] }),
           /* @__PURE__ */ jsx("div", { className: styles.drawer__content, children })
         ] }),

package/dist/components/Drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import { useId } from 'react';\nimport { Close } from '@dnanpm/icons';\nimport { cn } from '../../utils/cn';\nimport elevationStyles from '../../styles/utils/elevation.module.css';\nimport focusStyles from '../../styles/utils/focus.module.css';\nimport { useDialogDismissal } from '../Modal/useDialogDismissal';\nimport { useNativeDialog } from '../Modal/useNativeDialog';\nimport styles from './Drawer.module.css';\nimport type { DrawerProps } from './Drawer.types';\n\nexport const Drawer = ({\n    open,\n    onOpenChange,\n    title,\n    description,\n    children,\n    footer,\n    size = 'small',\n    headerStyle = 'light',\n    side = 'right',\n    fixedTitle = false,\n    disableCloseOptions = false,\n    closeLabel = 'Sulje dialogi',\n    keepMounted = false,\n    className,\n    ref,\n    onKeyDown,\n    onClick,\n    onPointerDown,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    ...props\n}: DrawerProps) => {\n    const titleId = useId();\n    const descriptionId = useId();\n    const { dialogRef, close, phase, isPresent } = useNativeDialog({\n        open: open ?? false,\n        keepMounted,\n        onOpenChange,\n    });\n    const describedBy =\n        [description ? descriptionId : undefined, ariaDescribedBy].filter(Boolean).join(' ') ||\n        undefined;\n    const dialogDismissalProps = useDialogDismissal({\n        close,\n        disableCloseOptions,\n        onClick,\n        onKeyDown,\n        onPointerDown,\n    });\n\n    if (!isPresent) return null;\n\n    return (\n        <dialog\n            {...props}\n            ref={(node) => {\n                dialogRef.current = node;\n                if (typeof ref === 'function') ref(node);\n                else if (ref) ref.current = node;\n            }}\n            className={cn(\n                styles.drawer,\n                elevationStyles.elevationHigh,\n                styles[`drawer--${size}`],\n                styles[`drawer--${headerStyle}`],\n                styles[`drawer--${side}`],\n                { [styles['drawer--fixed-title']]: fixedTitle },\n                { [styles['drawer--opening']]: phase !== 'closing' },\n                { [styles['drawer--closing']]: phase === 'closing' },\n                className,\n            )}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy ?? (!ariaLabel && title ? titleId : undefined)}\n            aria-describedby={describedBy}\n            {...dialogDismissalProps}\n        >\n            <div className={styles.drawer__container}>\n                {!disableCloseOptions && (\n                    <button\n                        type=\"button\"\n                        className={cn(styles.drawer__close, focusStyles.focusable)}\n                        aria-label={closeLabel}\n                        data-dialog-autofocus=\"true\"\n                        onClick={close}\n                    >\n                        <Close aria-hidden=\"true\" />\n                    </button>\n                )}\n                {(title || description) && (\n                    <div className={styles.drawer__title}>\n                        {title && (\n                            <h2 id={titleId} className={styles.drawer__heading}>\n                                {title}\n                            </h2>\n                        )}\n                        {description && (\n                            <div id={descriptionId} className={styles.drawer__description}>\n                                {description}\n                            </div>\n                        )}\n                    </div>\n                )}\n                <div className={styles.drawer__content}>{children}</div>\n            </div>\n            {footer && (\n                <div className={cn(styles['drawer__bottom-bar'], elevationStyles.elevationMedium)}>\n                    {footer}\n                </div>\n            )}\n        </dialog>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;AAUO,MAAM,SAAS,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,cAAc;AAAA,EACd,OAAO;AAAA,EACP,aAAa;AAAA,EACb,sBAAsB;AAAA,EACtB,aAAa;AAAA,EACb,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,GAAG;AACP,MAAmB;AACf,QAAM,UAAU,MAAA;AAChB,QAAM,gBAAgB,MAAA;AACtB,QAAM,EAAE,WAAW,OAAO,OAAO,UAAA,IAAc,gBAAgB;AAAA,IAC3D,MAAM,QAAQ;AAAA,IACd;AAAA,IACA;AAAA,EAAA,CACH;AACD,QAAM,cACF,CAAC,cAAc,gBAAgB,QAAW,eAAe,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,KACnF;AACJ,QAAM,uBAAuB,mBAAmB;AAAA,IAC5C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACH;AAED,MAAI,CAAC,UAAW,QAAO;AAEvB,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,KAAK,CAAC,SAAS;AACX,kBAAU,UAAU;AACpB,YAAI,OAAO,QAAQ,WAAY,KAAI,IAAI;AAAA,iBAC9B,SAAS,UAAU;AAAA,MAChC;AAAA,MACA,WAAW;AAAA,QACP,OAAO;AAAA,QACP,gBAAgB;AAAA,QAChB,OAAO,WAAW,IAAI,EAAE;AAAA,QACxB,OAAO,WAAW,WAAW,EAAE;AAAA,QAC/B,OAAO,WAAW,IAAI,EAAE;AAAA,QACxB,EAAE,CAAC,OAAO,qBAAqB,CAAC,GAAG,WAAA;AAAA,QACnC,EAAE,CAAC,OAAO,iBAAiB,CAAC,GAAG,UAAU,UAAA;AAAA,QACzC,EAAE,CAAC,OAAO,iBAAiB,CAAC,GAAG,UAAU,UAAA;AAAA,QACzC;AAAA,MAAA;AAAA,MAEJ,cAAY;AAAA,MACZ,mBAAiB,mBAAmB,CAAC,aAAa,QAAQ,UAAU;AAAA,MACpE,oBAAkB;AAAA,MACjB,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,mBAClB,UAAA;AAAA,UAAA,CAAC,uBACE;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,MAAK;AAAA,cACL,WAAW,GAAG,OAAO,eAAe,YAAY,SAAS;AAAA,cACzD,cAAY;AAAA,cACZ,yBAAsB;AAAA,cACtB,SAAS;AAAA,cAET,UAAA,oBAAC,OAAA,EAAM,eAAY,OAAA,CAAO;AAAA,YAAA;AAAA,UAAA;AAAA,WAGhC,SAAS,gBACP,qBAAC,OAAA,EAAI,WAAW,OAAO,eAClB,UAAA;AAAA,YAAA,6BACI,MAAA,EAAG,IAAI,SAAS,WAAW,OAAO,iBAC9B,UAAA,MAAA,CACL;AAAA,YAEH,mCACI,OAAA,EAAI,IAAI,eAAe,WAAW,OAAO,qBACrC,UAAA,YAAA,CACL;AAAA,UAAA,GAER;AAAA,UAEJ,oBAAC,OAAA,EAAI,WAAW,OAAO,iBAAkB,SAAA,CAAS;AAAA,QAAA,GACtD;AAAA,QACC,UACG,oBAAC,OAAA,EAAI,WAAW,GAAG,OAAO,oBAAoB,GAAG,gBAAgB,eAAe,GAC3E,UAAA,OAAA,CACL;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIhB;"}
+{"version":3,"file":"Drawer.js","sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import { useId } from 'react';\nimport { Close } from '@dnanpm/icons';\nimport { cn } from '../../utils/cn';\nimport { elevationStyles, focusStyles } from '../../styles/utils';\nimport { useDialogDismissal } from '../Modal/useDialogDismissal';\nimport { useNativeDialog } from '../Modal/useNativeDialog';\nimport styles from './Drawer.module.css';\nimport type { DrawerProps } from './Drawer.types';\n\nexport const Drawer = ({\n    open,\n    onOpenChange,\n    title,\n    description,\n    children,\n    footer,\n    size = 'small',\n    headerStyle = 'light',\n    side = 'right',\n    fixedTitle = false,\n    disableCloseOptions = false,\n    closeLabel = 'Sulje dialogi',\n    keepMounted = false,\n    className,\n    ref,\n    onKeyDown,\n    onClick,\n    onPointerDown,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    ...props\n}: DrawerProps) => {\n    const titleId = useId();\n    const descriptionId = useId();\n    const { dialogRef, close, phase, isPresent } = useNativeDialog({\n        open: open ?? false,\n        keepMounted,\n        onOpenChange,\n    });\n    const describedBy =\n        [description ? descriptionId : undefined, ariaDescribedBy].filter(Boolean).join(' ') ||\n        undefined;\n    const dialogDismissalProps = useDialogDismissal({\n        close,\n        disableCloseOptions,\n        onClick,\n        onKeyDown,\n        onPointerDown,\n    });\n\n    if (!isPresent) return null;\n\n    return (\n        <dialog\n            {...props}\n            data-color-scheme=\"light\"\n            ref={(node) => {\n                dialogRef.current = node;\n                if (typeof ref === 'function') ref(node);\n                else if (ref) ref.current = node;\n            }}\n            className={cn(\n                styles.drawer,\n                elevationStyles.elevationHigh,\n                styles[`drawer--${size}`],\n                styles[`drawer--${headerStyle}`],\n                styles[`drawer--${side}`],\n                { [styles['drawer--fixed-title']]: fixedTitle },\n                { [styles['drawer--opening']]: phase !== 'closing' },\n                { [styles['drawer--closing']]: phase === 'closing' },\n                className,\n            )}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy ?? (!ariaLabel && title ? titleId : undefined)}\n            aria-describedby={describedBy}\n            {...dialogDismissalProps}\n        >\n            <div className={styles.drawer__container}>\n                {!disableCloseOptions && (\n                    <button\n                        type=\"button\"\n                        className={cn(styles.drawer__close, focusStyles.focusable)}\n                        aria-label={closeLabel}\n                        data-dialog-autofocus=\"true\"\n                        data-color-scheme={headerStyle}\n                        onClick={close}\n                    >\n                        <Close aria-hidden=\"true\" />\n                    </button>\n                )}\n                {(title || description) && (\n                    <div className={styles.drawer__title} data-color-scheme={headerStyle}>\n                        {title && (\n                            <h2 id={titleId} className={styles.drawer__heading}>\n                                {title}\n                            </h2>\n                        )}\n                        {description && (\n                            <div\n                                id={descriptionId}\n                                className={cn(styles.drawer__description, 'dds-prose')}\n                            >\n                                {description}\n                            </div>\n                        )}\n                    </div>\n                )}\n                <div className={styles.drawer__content}>{children}</div>\n            </div>\n            {footer && (\n                <div className={cn(styles['drawer__bottom-bar'], elevationStyles.elevationMedium)}>\n                    {footer}\n                </div>\n            )}\n        </dialog>\n    );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/Drawer/Drawer.module.css.cjs

@@ -1,30 +1,30 @@
 require('./Drawer.css');
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const drawer = "_drawer_zzxde_1";
-const drawer__container = "_drawer__container_zzxde_78";
-const drawer__title = "_drawer__title_zzxde_88";
-const drawer__heading = "_drawer__heading_zzxde_98";
-const drawer__description = "_drawer__description_zzxde_102";
-const drawer__content = "_drawer__content_zzxde_105";
-const drawer__close = "_drawer__close_zzxde_113";
+const drawer = "_drawer_t9y6s_1";
+const drawer__container = "_drawer__container_t9y6s_78";
+const drawer__title = "_drawer__title_t9y6s_88";
+const drawer__heading = "_drawer__heading_t9y6s_98";
+const drawer__description = "_drawer__description_t9y6s_102";
+const drawer__content = "_drawer__content_t9y6s_105";
+const drawer__close = "_drawer__close_t9y6s_113";
 const styles = {
   drawer,
-  "drawer--small": "_drawer--small_zzxde_29",
-  "drawer--medium": "_drawer--medium_zzxde_32",
-  "drawer--large": "_drawer--large_zzxde_35",
-  "drawer--opening": "_drawer--opening_zzxde_38",
-  "drawer--closing": "_drawer--closing_zzxde_39",
-  "drawer--left": "_drawer--left_zzxde_50",
+  "drawer--small": "_drawer--small_t9y6s_29",
+  "drawer--medium": "_drawer--medium_t9y6s_32",
+  "drawer--large": "_drawer--large_t9y6s_35",
+  "drawer--opening": "_drawer--opening_t9y6s_38",
+  "drawer--closing": "_drawer--closing_t9y6s_39",
+  "drawer--left": "_drawer--left_t9y6s_50",
   drawer__container,
-  "drawer--fixed-title": "_drawer--fixed-title_zzxde_85",
+  "drawer--fixed-title": "_drawer--fixed-title_t9y6s_85",
   drawer__title,
   drawer__heading,
   drawer__description,
   drawer__content,
   drawer__close,
-  "drawer__bottom-bar": "_drawer__bottom-bar_zzxde_133",
-  "drawer--dark": "_drawer--dark_zzxde_140"
+  "drawer__bottom-bar": "_drawer__bottom-bar_t9y6s_133",
+  "drawer--dark": "_drawer--dark_t9y6s_140"
 };
 exports.default = styles;
 exports.drawer = drawer;

package/dist/components/Drawer/Drawer.module.css.js

@@ -1,28 +1,28 @@
 import './Drawer.css';
-const drawer = "_drawer_zzxde_1";
-const drawer__container = "_drawer__container_zzxde_78";
-const drawer__title = "_drawer__title_zzxde_88";
-const drawer__heading = "_drawer__heading_zzxde_98";
-const drawer__description = "_drawer__description_zzxde_102";
-const drawer__content = "_drawer__content_zzxde_105";
-const drawer__close = "_drawer__close_zzxde_113";
+const drawer = "_drawer_t9y6s_1";
+const drawer__container = "_drawer__container_t9y6s_78";
+const drawer__title = "_drawer__title_t9y6s_88";
+const drawer__heading = "_drawer__heading_t9y6s_98";
+const drawer__description = "_drawer__description_t9y6s_102";
+const drawer__content = "_drawer__content_t9y6s_105";
+const drawer__close = "_drawer__close_t9y6s_113";
 const styles = {
   drawer,
-  "drawer--small": "_drawer--small_zzxde_29",
-  "drawer--medium": "_drawer--medium_zzxde_32",
-  "drawer--large": "_drawer--large_zzxde_35",
-  "drawer--opening": "_drawer--opening_zzxde_38",
-  "drawer--closing": "_drawer--closing_zzxde_39",
-  "drawer--left": "_drawer--left_zzxde_50",
+  "drawer--small": "_drawer--small_t9y6s_29",
+  "drawer--medium": "_drawer--medium_t9y6s_32",
+  "drawer--large": "_drawer--large_t9y6s_35",
+  "drawer--opening": "_drawer--opening_t9y6s_38",
+  "drawer--closing": "_drawer--closing_t9y6s_39",
+  "drawer--left": "_drawer--left_t9y6s_50",
   drawer__container,
-  "drawer--fixed-title": "_drawer--fixed-title_zzxde_85",
+  "drawer--fixed-title": "_drawer--fixed-title_t9y6s_85",
   drawer__title,
   drawer__heading,
   drawer__description,
   drawer__content,
   drawer__close,
-  "drawer__bottom-bar": "_drawer__bottom-bar_zzxde_133",
-  "drawer--dark": "_drawer--dark_zzxde_140"
+  "drawer__bottom-bar": "_drawer__bottom-bar_t9y6s_133",
+  "drawer--dark": "_drawer--dark_t9y6s_140"
 };
 export {
   styles as default,

package/dist/components/Footer/Footer.cjs

@@ -3,8 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const icons = require("@dnanpm/icons");
-const focus_module = require("../../styles/utils/focus.module.css.cjs");
-const textDecoration_module = require("../../styles/utils/text-decoration.module.css.cjs");
+const index = require("../../styles/utils/index.cjs");
 const appStoreBadge = require("./assets/app-store-badge.svg.cjs");
 const googlePlayBadge = require("./assets/google-play-badge.svg.cjs");
 const Footer_module = require("./Footer.module.css.cjs");
@@ -12,7 +11,7 @@ const Footer_utils = require("./Footer.utils.cjs");
 const IconButton = require("../IconButton/IconButton.cjs");
 const cn = require("../../utils/cn/cn.cjs");
 const AccordionItem = require("../AccordionItem/AccordionItem.cjs");
-const linkClasses = (extra) => cn.cn(Footer_module.default.footer__link, textDecoration_module.default.underlineLink, focus_module.default.focusable, extra);
+const linkClasses = (extra) => cn.cn(Footer_module.default.footer__link, index.textDecorationStyles.underlineLink, index.focusStyles.focusable, extra);
 const renderNavLink = (link, renderLink) => renderLink(
   {
     href: link.href,
@@ -25,7 +24,7 @@ const renderNavLink = (link, renderLink) => renderLink(
 const renderBadge = (link, src, renderLink, fallbackAriaLabel) => renderLink(
   {
     href: link.href,
-    className: cn.cn(Footer_module.default.footer__badge, focus_module.default.focusable),
+    className: cn.cn(Footer_module.default.footer__badge, index.focusStyles.focusable),
     "aria-label": link.ariaLabel ?? fallbackAriaLabel,
     children: /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt: "", "aria-hidden": "true" })
   },
@@ -67,12 +66,12 @@ const Footer = ({
       className: cn.cn(Footer_module.default.footer, className),
       ...props,
       children: [
-        topSection && topSection.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: Footer_module.default.footer__top, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn.cn(Footer_module.default.footer__inner, Footer_module.default["footer__top-row"]), children: topSection.map((group, index) => {
+        topSection && topSection.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: Footer_module.default.footer__top, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn.cn(Footer_module.default.footer__inner, Footer_module.default["footer__top-row"]), children: topSection.map((group, index2) => {
           const Icon = Footer_utils.resolveTopSectionIcon(group.icon);
           const links = group.links.filter(
             (link) => !link.opensChat || onChatOpen
           );
-          const headingId = `${topSectionHeadingId}-${index}`;
+          const headingId = `${topSectionHeadingId}-${index2}`;
           return /* @__PURE__ */ jsxRuntime.jsxs(
             "section",
             {
@@ -160,7 +159,7 @@ const Footer = ({
                       className: cn.cn(
                         Footer_module.default.footer__language,
                         isCurrent && Footer_module.default["footer__language--current"],
-                        focus_module.default.focusable
+                        index.focusStyles.focusable
                       ),
                       "aria-label": language.ariaLabel,
                       "aria-current": isCurrent ? "true" : void 0,
@@ -184,7 +183,7 @@ const Footer = ({
                         href: social.href,
                         className: cn.cn(
                           Footer_module.default["footer__social-link"],
-                          focus_module.default.focusable
+                          index.focusStyles.focusable
                         ),
                         "aria-label": social.ariaLabel ?? Footer_utils.defaultSocialAriaLabel(social.platform),
                         children: Icon ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -213,7 +212,7 @@ const Footer = ({
                         className: cn.cn(
                           Footer_module.default.footer__organization,
                           isCurrent && Footer_module.default["footer__organization--current"],
-                          focus_module.default.focusable
+                          index.focusStyles.focusable
                         ),
                         "aria-current": isCurrent ? "true" : void 0,
                         children: organization.label