@dnanpm/ui-components 0.9.0 → 0.10.0

package/dist/index.cjs

@@ -3,9 +3,11 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 ;/* empty css                   */
 const Accordion = require("./components/Accordion/Accordion.cjs");
 const AccordionItem = require("./components/AccordionItem/AccordionItem.cjs");
+const Avatar = require("./components/Avatar/Avatar.cjs");
 const Breadcrumb = require("./components/Breadcrumb/Breadcrumb.cjs");
 const Button = require("./components/Button/Button.cjs");
 const ButtonCard = require("./components/ButtonCard/ButtonCard.cjs");
+const Checkbox = require("./components/Checkbox/Checkbox.cjs");
 const ColorScheme = require("./components/ColorScheme/ColorScheme.cjs");
 const ContentCard = require("./components/ContentCard/ContentCard.cjs");
 const Drawer = require("./components/Drawer/Drawer.cjs");
@@ -17,6 +19,7 @@ const Label = require("./components/Label/Label.cjs");
 const MainNavigation = require("./components/MainNavigation/MainNavigation.cjs");
 const Modal = require("./components/Modal/Modal.cjs");
 const Notification = require("./components/Notification/Notification.cjs");
+const Pagination = require("./components/Pagination/Pagination.cjs");
 const Pictograph = require("./components/Pictograph/Pictograph.cjs");
 const PictographItem = require("./components/Pictograph/PictographItem.cjs");
 const Quote = require("./components/Quote/Quote.cjs");
@@ -24,9 +27,11 @@ const Spinner = require("./components/Spinner/Spinner.cjs");
 const cn = require("./utils/cn/cn.cjs");
 exports.Accordion = Accordion.Accordion;
 exports.AccordionItem = AccordionItem.AccordionItem;
+exports.Avatar = Avatar.Avatar;
 exports.Breadcrumb = Breadcrumb.Breadcrumb;
 exports.Button = Button.Button;
 exports.ButtonCard = ButtonCard.ButtonCard;
+exports.Checkbox = Checkbox.Checkbox;
 exports.ColorScheme = ColorScheme.ColorScheme;
 exports.ContentCard = ContentCard.ContentCard;
 exports.Drawer = Drawer.Drawer;
@@ -38,6 +43,7 @@ exports.Label = Label.Label;
 exports.MainNavigation = MainNavigation.MainNavigation;
 exports.Modal = Modal.Modal;
 exports.Notification = Notification.Notification;
+exports.Pagination = Pagination.Pagination;
 exports.Pictograph = Pictograph.Pictograph;
 exports.PictographItem = PictographItem.PictographItem;
 exports.Quote = Quote.Quote;

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export { Accordion } from './components/Accordion';
 export { AccordionItem } from './components/AccordionItem';
+export { Avatar } from './components/Avatar';
 export { Breadcrumb } from './components/Breadcrumb';
 export { Button } from './components/Button';
 export { ButtonCard } from './components/ButtonCard';
@@ -17,10 +18,13 @@ export { Quote } from './components/Quote';
 export { Spinner } from './components/Spinner';
 export { IconButton } from './components/IconButton';
 export { FunctionButton } from './components/FunctionButton';
+export { Pagination } from './components/Pagination';
+export { Checkbox } from './components/Checkbox';
 export type { AccordionProps } from './components/Accordion';
 export type { AccordionItemProps } from './components/AccordionItem';
+export type { AvatarBackground, AvatarIcon, AvatarOrientation, AvatarProps, AvatarSize, AvatarVariant, } from './components/Avatar';
 export type { BreadcrumbItem, BreadcrumbLinkProps, BreadcrumbProps } from './components/Breadcrumb';
-export type { ButtonProps, ButtonLinkProps, ButtonVariant, ButtonSize } from './components/Button';
+export type { ButtonProps, ButtonLinkProps, ButtonVariant, ButtonSize, ButtonIcon, ButtonIconPosition, } from './components/Button';
 export type { ButtonCardIcon, ButtonCardLinkProps, ButtonCardProps, ButtonCardSize, } from './components/ButtonCard';
 export type { ColorSchemeProps, ColorSchemeValue } from './components/ColorScheme';
 export type { ContentCardAppearance, ContentCardArticleProps, ContentCardDivProps, ContentCardElement, ContentCardHeadingLevel, ContentCardLiProps, ContentCardLogoBackground, ContentCardMediaKind, ContentCardMediaPosition, ContentCardMediaWidth, ContentCardProps, ContentCardSectionProps, } from './components/ContentCard';
@@ -36,6 +40,8 @@ export type { QuoteProps } from './components/Quote';
 export type { SpinnerColor, SpinnerProps, SpinnerSize } from './components/Spinner';
 export type { Icon, IconPosition, IconButtonLinkProps, IconButtonProps, IconButtonSize, } from './components/IconButton';
 export type { FunctionButtonIcon, FunctionButtonProps, FunctionButtonSize, FunctionButtonVariant, } from './components/FunctionButton';
+export type { PaginationProps } from './components/Pagination';
+export type { CheckboxProps } from './components/Checkbox';
 export { cn } from './utils';
 export type { CnDictionary, CnInput } from './utils';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -1,9 +1,11 @@
 /* empty css                 */
 import { Accordion } from "./components/Accordion/Accordion.js";
 import { AccordionItem } from "./components/AccordionItem/AccordionItem.js";
+import { Avatar } from "./components/Avatar/Avatar.js";
 import { Breadcrumb } from "./components/Breadcrumb/Breadcrumb.js";
 import { Button } from "./components/Button/Button.js";
 import { ButtonCard } from "./components/ButtonCard/ButtonCard.js";
+import { Checkbox } from "./components/Checkbox/Checkbox.js";
 import { ColorScheme } from "./components/ColorScheme/ColorScheme.js";
 import { ContentCard } from "./components/ContentCard/ContentCard.js";
 import { Drawer } from "./components/Drawer/Drawer.js";
@@ -15,6 +17,7 @@ import { Label } from "./components/Label/Label.js";
 import { MainNavigation } from "./components/MainNavigation/MainNavigation.js";
 import { Modal } from "./components/Modal/Modal.js";
 import { Notification } from "./components/Notification/Notification.js";
+import { Pagination } from "./components/Pagination/Pagination.js";
 import { Pictograph } from "./components/Pictograph/Pictograph.js";
 import { PictographItem } from "./components/Pictograph/PictographItem.js";
 import { Quote } from "./components/Quote/Quote.js";
@@ -23,9 +26,11 @@ import { cn } from "./utils/cn/cn.js";
 export {
   Accordion,
   AccordionItem,
+  Avatar,
   Breadcrumb,
   Button,
   ButtonCard,
+  Checkbox,
   ColorScheme,
   ContentCard,
   Drawer,
@@ -37,6 +42,7 @@ export {
   MainNavigation,
   Modal,
   Notification,
+  Pagination,
   Pictograph,
   PictographItem,
   Quote,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/styles/utilities.css

@@ -0,0 +1,6 @@
+@layer dds-base, dds-components;
+
+@import './utils/elevation.css';
+@import './utils/focus.css';
+@import './utils/overlay.css';
+@import './utils/text-decoration.css';

package/dist/styles/utils/elevation.css

@@ -1,30 +1,39 @@
-@layer dds-base, dds-components;@layer dds-components { @layer fallback, components; }@layer dds-components.components{._elevationLow_dspr0_1 {
-    --_elevation-style: var(--elevation-semantic-elevation-low-offset-x)
-        var(--elevation-semantic-elevation-low-offset-y)
-        var(--elevation-semantic-elevation-low-blur) var(--elevation-semantic-elevation-low-spread)
-        var(--elevation-semantic-elevation-low-color);
-}
+@layer dds-base, dds-components;
 
-._elevationMedium_dspr0_8 {
-    --_elevation-style: var(--elevation-semantic-elevation-medium-offset-x)
-        var(--elevation-semantic-elevation-medium-offset-y)
-        var(--elevation-semantic-elevation-medium-blur)
-        var(--elevation-semantic-elevation-medium-spread)
-        var(--elevation-semantic-elevation-medium-color);
+@layer dds-components {
+    @layer fallback, components;
 }
 
-._elevationHigh_dspr0_16 {
-    --_elevation-style: var(--elevation-semantic-elevation-high-offset-x)
-        var(--elevation-semantic-elevation-high-offset-y)
-        var(--elevation-semantic-elevation-high-blur)
-        var(--elevation-semantic-elevation-high-spread)
-        var(--elevation-semantic-elevation-high-color);
-}
+@layer dds-components.components {
+    .dds-elevation-low {
+        --_elevation-style: var(--elevation-semantic-elevation-low-offset-x)
+            var(--elevation-semantic-elevation-low-offset-y)
+            var(--elevation-semantic-elevation-low-blur)
+            var(--elevation-semantic-elevation-low-spread)
+            var(--elevation-semantic-elevation-low-color);
+    }
+
+    .dds-elevation-medium {
+        --_elevation-style: var(--elevation-semantic-elevation-medium-offset-x)
+            var(--elevation-semantic-elevation-medium-offset-y)
+            var(--elevation-semantic-elevation-medium-blur)
+            var(--elevation-semantic-elevation-medium-spread)
+            var(--elevation-semantic-elevation-medium-color);
+    }
 
-._elevationLow_dspr0_1,
-._elevationMedium_dspr0_8,
-._elevationHigh_dspr0_16 {
-    border: var(--borderwidth-semantic-xs) solid var(--color-semantic-border-neutral-base);
-    box-shadow: var(--_elevation-style);
-    border-radius: var(--radius-semantic-md);
-} }
+    .dds-elevation-high {
+        --_elevation-style: var(--elevation-semantic-elevation-high-offset-x)
+            var(--elevation-semantic-elevation-high-offset-y)
+            var(--elevation-semantic-elevation-high-blur)
+            var(--elevation-semantic-elevation-high-spread)
+            var(--elevation-semantic-elevation-high-color);
+    }
+
+    .dds-elevation-low,
+    .dds-elevation-medium,
+    .dds-elevation-high {
+        border: var(--borderwidth-semantic-xs) solid var(--color-semantic-border-neutral-base);
+        box-shadow: var(--_elevation-style);
+        border-radius: var(--radius-semantic-md);
+    }
+}

package/dist/styles/utils/focus.css

@@ -1,91 +1,86 @@
 @layer dds-base, dds-components;
-@layer dds-components { @layer fallback, components; }
-@layer dds-components.fallback{
-    ._focusable_1be87_1:where(:focus, :focus-visible) {
-        border-radius: var(--radius-semantic-sm);
-    }
-    ._focusableInset_1be87_33:where(:focus, :focus-visible) {
-        border-radius: var(--radius-semantic-sm);
-    } }
-@layer dds-components.components{._focusable_1be87_1 {
-    /* Marker class for shared focus treatment */
-}
 
-/* Fallback radius: components that set their own border-radius always win.
-   The postcss layer-wrap plugin hoists @layer fallback below dds-components.components. */
-
-._focusable_1be87_1:focus {
-    outline-color: transparent;
+@layer dds-components {
+    @layer fallback, components;
 }
 
-._focusable_1be87_1:focus-visible {
-    /* Transparent outline ensures a visible ring fallback in forced colors. */
-    outline: 2px solid transparent;
-    outline-offset: 2px;
-    box-shadow:
-        0 0 0 2px var(--color-semantic-utility-focus-soft),
-        0 0 0 4px var(--color-semantic-utility-focus-strong);
+@layer dds-components.fallback {
+    .dds-focusable:where(:focus, :focus-visible),
+    .dds-focusable-inset:where(:focus, :focus-visible) {
+        border-radius: var(--radius-semantic-sm);
+    }
 }
 
-@media (forced-colors: active) {
-    ._focusable_1be87_1:focus-visible {
-        outline-color: Highlight;
-        box-shadow: none;
+@layer dds-components.components {
+    .dds-focusable {
+        /* Marker class for shared focus treatment */
     }
-}
 
-._focusableInset_1be87_33 {
-    /* Marker class for inset focus treatment (ring stays inside the element boundary) */
-}
+    .dds-focusable:focus {
+        outline-color: transparent;
+    }
 
-._focusableInset_1be87_33:focus {
-    outline-color: transparent;
-}
+    .dds-focusable:focus-visible {
+        outline: 2px solid transparent;
+        outline-offset: 2px;
+        box-shadow:
+            0 0 0 2px var(--color-semantic-utility-focus-soft),
+            0 0 0 4px var(--color-semantic-utility-focus-strong);
+    }
 
-._focusableInset_1be87_33:focus-visible {
-    outline: 2px solid transparent;
-    box-shadow:
-        inset 0 0 0 2px var(--color-semantic-utility-focus-strong),
-        inset 0 0 0 4px var(--color-semantic-utility-focus-soft);
-}
+    @media (forced-colors: active) {
+        .dds-focusable:focus-visible {
+            outline-color: Highlight;
+            box-shadow: none;
+        }
+    }
 
-@media (forced-colors: active) {
-    ._focusableInset_1be87_33:focus-visible {
-        outline-color: Highlight;
-        box-shadow: none;
+    .dds-focusable-inset {
+        /* Marker class for inset focus treatment (ring stays inside the element boundary) */
     }
-}
 
-@scope ([data-color-scheme='dark']) to ([data-color-scheme='light']) {
-    ._focusable_1be87_1:focus-visible {
-        box-shadow:
-            0 0 0 2px var(--color-semantic-utility-focus-strong),
-            0 0 0 4px var(--color-semantic-utility-focus-soft);
+    .dds-focusable-inset:focus {
+        outline-color: transparent;
     }
 
-    ._focusableInset_1be87_33:focus-visible {
+    .dds-focusable-inset:focus-visible {
+        outline: 2px solid transparent;
         box-shadow:
-            inset 0 0 0 2px var(--color-semantic-utility-focus-soft),
-            inset 0 0 0 4px var(--color-semantic-utility-focus-strong);
+            inset 0 0 0 2px var(--color-semantic-utility-focus-strong),
+            inset 0 0 0 4px var(--color-semantic-utility-focus-soft);
     }
 
     @media (forced-colors: active) {
-        ._focusable_1be87_1:focus-visible,
-        ._focusableInset_1be87_33:focus-visible {
+        .dds-focusable-inset:focus-visible {
+            outline-color: Highlight;
             box-shadow: none;
         }
     }
-}
 
-._focusClipGuard_1be87_82 {
-    /*
-     * Prevents focus rings from being clipped when the container uses overflow: hidden.
-     *
-     * Usage:
-     * - Apply this class to the clipping container.
-     * - Override --focus-clip-guard-bleed-inline when a component needs a custom bleed amount.
-     */
-    --focus-clip-guard-bleed-inline: var(--spacing-space-4);
-    margin-inline: calc(var(--focus-clip-guard-bleed-inline) * -1);
-    padding-inline: var(--focus-clip-guard-bleed-inline);
-} }
+    @scope ([data-color-scheme='dark']) to ([data-color-scheme='light']) {
+        .dds-focusable:focus-visible {
+            box-shadow:
+                0 0 0 2px var(--color-semantic-utility-focus-strong),
+                0 0 0 4px var(--color-semantic-utility-focus-soft);
+        }
+
+        .dds-focusable-inset:focus-visible {
+            box-shadow:
+                inset 0 0 0 2px var(--color-semantic-utility-focus-soft),
+                inset 0 0 0 4px var(--color-semantic-utility-focus-strong);
+        }
+
+        @media (forced-colors: active) {
+            .dds-focusable:focus-visible,
+            .dds-focusable-inset:focus-visible {
+                box-shadow: none;
+            }
+        }
+    }
+
+    .dds-focus-clip-guard {
+        --focus-clip-guard-bleed-inline: var(--spacing-space-4);
+        margin-inline: calc(var(--focus-clip-guard-bleed-inline) * -1);
+        padding-inline: var(--focus-clip-guard-bleed-inline);
+    }
+}

package/dist/styles/utils/index.cjs

@@ -0,0 +1,33 @@
+require('./elevation.css');
+require('./focus.css');
+require('./overlay.css');
+require('./text-decoration.css');
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+;/* empty css                */
+;/* empty css            */
+;/* empty css              */
+;/* empty css                      */
+const elevationStyles = {
+  elevationLow: "dds-elevation-low",
+  elevationMedium: "dds-elevation-medium",
+  elevationHigh: "dds-elevation-high"
+};
+const focusStyles = {
+  focusable: "dds-focusable",
+  focusableInset: "dds-focusable-inset",
+  focusClipGuard: "dds-focus-clip-guard"
+};
+const overlayStyles = {
+  overlayStrong: "dds-overlay-strong",
+  overlayClosing: "dds-overlay-closing"
+};
+const textDecorationStyles = {
+  underlineLink: "dds-underline-link",
+  underlineLinkOnHover: "dds-underline-link-on-hover"
+};
+exports.elevationStyles = elevationStyles;
+exports.focusStyles = focusStyles;
+exports.overlayStyles = overlayStyles;
+exports.textDecorationStyles = textDecorationStyles;
+//# sourceMappingURL=index.cjs.map

package/dist/styles/utils/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../src/styles/utils/index.ts"],"sourcesContent":["import './elevation.css';\nimport './focus.css';\nimport './overlay.css';\nimport './text-decoration.css';\n\nexport const elevationStyles = {\n    elevationLow: 'dds-elevation-low',\n    elevationMedium: 'dds-elevation-medium',\n    elevationHigh: 'dds-elevation-high',\n} as const;\n\nexport const focusStyles = {\n    focusable: 'dds-focusable',\n    focusableInset: 'dds-focusable-inset',\n    focusClipGuard: 'dds-focus-clip-guard',\n} as const;\n\nexport const overlayStyles = {\n    overlayStrong: 'dds-overlay-strong',\n    overlaySoft: 'dds-overlay-soft',\n    overlayClosing: 'dds-overlay-closing',\n} as const;\n\nexport const textDecorationStyles = {\n    underlineLink: 'dds-underline-link',\n    underlineLinkOnHover: 'dds-underline-link-on-hover',\n} as const;\n"],"names":[],"mappings":";;;;;;AAKO,MAAM,kBAAkB;AAAA,EAC3B,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,eAAe;AACnB;AAEO,MAAM,cAAc;AAAA,EACvB,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,gBAAgB;AACpB;AAEO,MAAM,gBAAgB;AAAA,EACzB,eAAe;AAAA,EAEf,gBAAgB;AACpB;AAEO,MAAM,uBAAuB;AAAA,EAChC,eAAe;AAAA,EACf,sBAAsB;AAC1B;;;;;"}

package/dist/styles/utils/index.d.ts

@@ -0,0 +1,20 @@
+export declare const elevationStyles: {
+    readonly elevationLow: "dds-elevation-low";
+    readonly elevationMedium: "dds-elevation-medium";
+    readonly elevationHigh: "dds-elevation-high";
+};
+export declare const focusStyles: {
+    readonly focusable: "dds-focusable";
+    readonly focusableInset: "dds-focusable-inset";
+    readonly focusClipGuard: "dds-focus-clip-guard";
+};
+export declare const overlayStyles: {
+    readonly overlayStrong: "dds-overlay-strong";
+    readonly overlaySoft: "dds-overlay-soft";
+    readonly overlayClosing: "dds-overlay-closing";
+};
+export declare const textDecorationStyles: {
+    readonly underlineLink: "dds-underline-link";
+    readonly underlineLinkOnHover: "dds-underline-link-on-hover";
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/styles/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/styles/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,CAAC;AACzB,OAAO,aAAa,CAAC;AACrB,OAAO,eAAe,CAAC;AACvB,OAAO,uBAAuB,CAAC;AAE/B,eAAO,MAAM,eAAe;;;;CAIlB,CAAC;AAEX,eAAO,MAAM,WAAW;;;;CAId,CAAC;AAEX,eAAO,MAAM,aAAa;;;;CAIhB,CAAC;AAEX,eAAO,MAAM,oBAAoB;;;CAGvB,CAAC"}

package/dist/styles/utils/index.js

@@ -0,0 +1,33 @@
+import './elevation.css';
+import './focus.css';
+import './overlay.css';
+import './text-decoration.css';
+/* empty css              */
+/* empty css          */
+/* empty css            */
+/* empty css                    */
+const elevationStyles = {
+  elevationLow: "dds-elevation-low",
+  elevationMedium: "dds-elevation-medium",
+  elevationHigh: "dds-elevation-high"
+};
+const focusStyles = {
+  focusable: "dds-focusable",
+  focusableInset: "dds-focusable-inset",
+  focusClipGuard: "dds-focus-clip-guard"
+};
+const overlayStyles = {
+  overlayStrong: "dds-overlay-strong",
+  overlayClosing: "dds-overlay-closing"
+};
+const textDecorationStyles = {
+  underlineLink: "dds-underline-link",
+  underlineLinkOnHover: "dds-underline-link-on-hover"
+};
+export {
+  elevationStyles,
+  focusStyles,
+  overlayStyles,
+  textDecorationStyles
+};
+//# sourceMappingURL=index.js.map

package/dist/styles/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/styles/utils/index.ts"],"sourcesContent":["import './elevation.css';\nimport './focus.css';\nimport './overlay.css';\nimport './text-decoration.css';\n\nexport const elevationStyles = {\n    elevationLow: 'dds-elevation-low',\n    elevationMedium: 'dds-elevation-medium',\n    elevationHigh: 'dds-elevation-high',\n} as const;\n\nexport const focusStyles = {\n    focusable: 'dds-focusable',\n    focusableInset: 'dds-focusable-inset',\n    focusClipGuard: 'dds-focus-clip-guard',\n} as const;\n\nexport const overlayStyles = {\n    overlayStrong: 'dds-overlay-strong',\n    overlaySoft: 'dds-overlay-soft',\n    overlayClosing: 'dds-overlay-closing',\n} as const;\n\nexport const textDecorationStyles = {\n    underlineLink: 'dds-underline-link',\n    underlineLinkOnHover: 'dds-underline-link-on-hover',\n} as const;\n"],"names":[],"mappings":";;;;AAKO,MAAM,kBAAkB;AAAA,EAC3B,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,eAAe;AACnB;AAEO,MAAM,cAAc;AAAA,EACvB,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,gBAAgB;AACpB;AAEO,MAAM,gBAAgB;AAAA,EACzB,eAAe;AAAA,EAEf,gBAAgB;AACpB;AAEO,MAAM,uBAAuB;AAAA,EAChC,eAAe;AAAA,EACf,sBAAsB;AAC1B;"}

package/dist/styles/utils/overlay.css

@@ -1,36 +1,44 @@
-@layer dds-base, dds-components;@layer dds-components { @layer fallback, components; }@layer dds-components.components{._overlayStrong_1w2h3_1::before,
-._overlaySoft_1w2h3_2::before {
-    content: '';
-    position: fixed;
-    inset: 0;
-    pointer-events: none;
-    z-index: 5;
-    opacity: 1;
-    transition: opacity 0.2s ease;
+@layer dds-base, dds-components;
+
+@layer dds-components {
+    @layer fallback, components;
 }
 
-@starting-style {
-    ._overlayStrong_1w2h3_1::before,
-    ._overlaySoft_1w2h3_2::before {
+@layer dds-components.components {
+    .dds-overlay-strong::before,
+    .dds-overlay-soft::before {
+        content: '';
+        position: fixed;
+        inset: 0;
+        pointer-events: none;
+        z-index: var(--zindex-semantic-overlay);
+        opacity: 1;
+        transition: opacity 0.2s ease;
+    }
+
+    @starting-style {
+        .dds-overlay-strong::before,
+        .dds-overlay-soft::before {
+            opacity: 0;
+        }
+    }
+
+    .dds-overlay-closing::before {
         opacity: 0;
     }
-}
 
-._overlayClosing_1w2h3_19::before {
-    opacity: 0;
-}
+    @media (prefers-reduced-motion: reduce) {
+        .dds-overlay-strong::before,
+        .dds-overlay-soft::before {
+            transition: none;
+        }
+    }
 
-@media (prefers-reduced-motion: reduce) {
-    ._overlayStrong_1w2h3_1::before,
-    ._overlaySoft_1w2h3_2::before {
-        transition: none;
+    .dds-overlay-strong::before {
+        background: var(--color-semantic-utility-overlay-strong);
     }
-}
 
-._overlayStrong_1w2h3_1::before {
-    background: var(--color-semantic-utility-overlay-strong);
+    .dds-overlay-soft::before {
+        background: var(--color-semantic-utility-overlay-soft);
+    }
 }
-
-._overlaySoft_1w2h3_2::before {
-    background: var(--color-semantic-utility-overlay-soft);
-} }

package/dist/styles/utils/text-decoration.css

@@ -1,14 +1,22 @@
-@layer dds-base, dds-components;@layer dds-components { @layer fallback, components; }@layer dds-components.components{._underlineLink_15fbp_1 {
-    text-decoration: underline;
-    text-underline-offset: 0.2em;
-    text-decoration-skip-ink: auto;
-    text-decoration-thickness: from-font;
+@layer dds-base, dds-components;
+
+@layer dds-components {
+    @layer fallback, components;
 }
 
-._underlineLinkOnHover_15fbp_8:hover,
-._underlineLinkOnHover_15fbp_8:focus-visible {
-    text-decoration: underline;
-    text-underline-offset: 0.2em;
-    text-decoration-skip-ink: auto;
-    text-decoration-thickness: from-font;
-} }
+@layer dds-components.components {
+    .dds-underline-link {
+        text-decoration: underline;
+        text-underline-offset: 0.2em;
+        text-decoration-skip-ink: auto;
+        text-decoration-thickness: from-font;
+    }
+
+    .dds-underline-link-on-hover:hover,
+    .dds-underline-link-on-hover:focus-visible {
+        text-decoration: underline;
+        text-underline-offset: 0.2em;
+        text-decoration-skip-ink: auto;
+        text-decoration-thickness: from-font;
+    }
+}

package/dist/styles.css

@@ -137,6 +137,10 @@
   --typography-font-size-text-md: 16px;
   --typography-font-size-text-sm: 14px;
   --typography-font-size-text-xs: 12px;
+  --typography-font-size-pricing-lg: 34px;
+  --typography-font-size-pricing-md: 30px;
+  --typography-font-size-pricing-sm: 24px;
+  --typography-font-size-pricing-xs: 20px;
   --typography-font-weight-regular: 400;
   --typography-font-weight-medium: 500;
   --typography-font-weight-bold: 700;
@@ -166,6 +170,26 @@
   --elevation-semantic-elevation-high-offset-y: 8px;
   --elevation-semantic-elevation-high-blur: 64px;
   --elevation-semantic-elevation-high-spread: 0px;
+  --zindex-semantic-below: -1;
+  --zindex-semantic-base: 0;
+  --zindex-semantic-raised: 200;
+  --zindex-semantic-sticky: 400;
+  --zindex-semantic-popup: 600;
+  --zindex-semantic-navigation: 1000;
+  --zindex-semantic-widget: 1040;
+  --zindex-semantic-overlay: 1100;
+  --zindex-semantic-dialog: 1200;
+  --zindex-semantic-system: 1300;
+  --layout-semantic-breakpoint-small-mobile: 360px;
+  --layout-semantic-breakpoint-large-mobile: 480px;
+  --layout-semantic-breakpoint-tablet: 768px;
+  --layout-semantic-breakpoint-desktop: 1024px;
+  --layout-semantic-breakpoint-large-desktop: 1344px;
+  --layout-semantic-page-min-width: 320px;
+  --layout-semantic-page-max-width: 2560px;
+  --layout-semantic-container-narrow: 628px;
+  --layout-semantic-container-default: 845px;
+  --layout-semantic-container-wide: 1280px;
 }
 }
 @layer dds-base{
@@ -294,7 +318,7 @@ body.dds-un-scrollable {
     overflow: hidden;
 }
 
-@media screen and (min-width: 1024px) {
+@media screen and (width >= 1024px) {
     body.dds-un-scrollable {
         overflow: initial;
     }
@@ -395,7 +419,7 @@ small {
     cursor: pointer;
     transition: color 0.2s ease-in-out;
 }
-:where(a:hover) {
+:where(a:hover, a:focus-visible) {
     color: var(--color-semantic-foreground-link-hover);
     text-decoration: none;
 }
@@ -479,7 +503,7 @@ ol {
         color: var(--color-semantic-foreground-link-inverse);
     }
 
-    :where(a:hover) {
+    :where(a:hover, a:focus-visible) {
         color: var(--color-semantic-foreground-link-inverse-hover);
     }
 }

package/dist/utils/index.d.ts

@@ -1,3 +1,4 @@
 export { cn } from './cn';
 export type { CnDictionary, CnInput } from './cn/index';
+export { isRenderable } from './isRenderable';
 //# sourceMappingURL=index.d.ts.map