@dnanpm/ui-components 0.4.0 → 0.6.0

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

@@ -0,0 +1,15 @@
+require('./IconButton.css');
+"use strict";
+const styles = {
+  "icon-button": "_icon-button_1iv9h_1",
+  "icon-button--normal": "_icon-button--normal_1iv9h_23",
+  "icon-button--small": "_icon-button--small_1iv9h_28",
+  "icon-button__label": "_icon-button__label_1iv9h_33",
+  "icon-button__label--wrap": "_icon-button__label--wrap_1iv9h_45",
+  "icon-button__icon": "_icon-button__icon_1iv9h_53",
+  "icon-button--link-coloring": "_icon-button--link-coloring_1iv9h_85",
+  "icon-button--disabled": "_icon-button--disabled_1iv9h_111",
+  "icon-button--loading": "_icon-button--loading_1iv9h_112"
+};
+module.exports = styles;
+//# sourceMappingURL=IconButton.module.css.cjs.map

package/dist/components/IconButton/IconButton.module.css.cjs.map

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

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

@@ -0,0 +1,16 @@
+import './IconButton.css';
+const styles = {
+  "icon-button": "_icon-button_1iv9h_1",
+  "icon-button--normal": "_icon-button--normal_1iv9h_23",
+  "icon-button--small": "_icon-button--small_1iv9h_28",
+  "icon-button__label": "_icon-button__label_1iv9h_33",
+  "icon-button__label--wrap": "_icon-button__label--wrap_1iv9h_45",
+  "icon-button__icon": "_icon-button__icon_1iv9h_53",
+  "icon-button--link-coloring": "_icon-button--link-coloring_1iv9h_85",
+  "icon-button--disabled": "_icon-button--disabled_1iv9h_111",
+  "icon-button--loading": "_icon-button--loading_1iv9h_112"
+};
+export {
+  styles as default
+};
+//# sourceMappingURL=IconButton.module.css.js.map

package/dist/components/IconButton/IconButton.module.css.js.map

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

package/dist/components/IconButton/IconButton.types.d.ts

@@ -0,0 +1,57 @@
+import { ComponentPropsWithRef, ComponentType, ReactNode, SVGProps } from 'react';
+export type IconPosition = 'start' | 'end';
+export type IconButtonSize = 'normal' | 'small';
+export type IconButtonLabelBehavior = 'truncate' | 'wrap';
+export type Icon = ComponentType<SVGProps<SVGSVGElement>>;
+export interface IconButtonLinkProps extends ComponentPropsWithRef<'a'> {
+    readonly href: string;
+    readonly children: ReactNode;
+}
+type IconButtonBaseProps = {
+    /** Visible label content used as the button/link accessible name. */
+    readonly children: ReactNode;
+    /** Icon component (for example, `ChevronRight` from `@dnanpm/icons`). */
+    readonly icon: Icon;
+    /**
+     * Position of the icon relative to label text.
+     * @default 'start'
+     */
+    readonly iconPosition?: IconPosition;
+    /**
+     * Controls how the text label behaves in narrow layouts.
+     * @default 'truncate'
+     */
+    readonly labelBehavior?: IconButtonLabelBehavior;
+    /**
+     * Size variant controlling typography and icon size.
+     * @default 'normal'
+     */
+    readonly size?: IconButtonSize;
+    /**
+     * Whether the button is in a loading state.
+     * Label stays visible while icon slot shows a spinner.
+     * @default false
+     */
+    readonly loading?: boolean;
+    /**
+     * Applies link coloring to text and icon.
+     * @default false
+     */
+    readonly linkColoring?: boolean;
+};
+export type IconButtonAsButton = IconButtonBaseProps & Omit<ComponentPropsWithRef<'button'>, keyof IconButtonBaseProps> & {
+    readonly href?: never;
+    readonly target?: never;
+    readonly rel?: never;
+    readonly renderLink?: never;
+};
+export type IconButtonAsAnchor = IconButtonBaseProps & Omit<ComponentPropsWithRef<'a'>, keyof IconButtonBaseProps> & {
+    readonly href: string;
+    readonly disabled?: never;
+    readonly type?: never;
+    readonly name?: never;
+    readonly renderLink?: (props: IconButtonLinkProps) => ReactNode;
+};
+export type IconButtonProps = IconButtonAsButton | IconButtonAsAnchor;
+export {};
+//# sourceMappingURL=IconButton.types.d.ts.map

package/dist/components/IconButton/IconButton.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.types.d.ts","sourceRoot":"","sources":["../../../src/components/IconButton/IconButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,aAAa,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEvF,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,KAAK,CAAC;AAC3C,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,OAAO,CAAC;AAChD,MAAM,MAAM,uBAAuB,GAAG,UAAU,GAAG,MAAM,CAAC;AAC1D,MAAM,MAAM,IAAI,GAAG,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAE1D,MAAM,WAAW,mBAAoB,SAAQ,qBAAqB,CAAC,GAAG,CAAC;IACnE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;CAChC;AAED,KAAK,mBAAmB,GAAG;IACvB,qEAAqE;IACrE,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC7B,yEAAyE;IACzE,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,YAAY,CAAC;IACrC;;;OAGG;IACH,QAAQ,CAAC,aAAa,CAAC,EAAE,uBAAuB,CAAC;IACjD;;;OAGG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,cAAc,CAAC;IAC/B;;;;OAIG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC;CACnC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,GAChD,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,MAAM,mBAAmB,CAAC,GAAG;IAC/D,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC;IACtB,QAAQ,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC;IACxB,QAAQ,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC;IACrB,QAAQ,CAAC,UAAU,CAAC,EAAE,KAAK,CAAC;CAC/B,CAAC;AAEN,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,GAChD,IAAI,CAAC,qBAAqB,CAAC,GAAG,CAAC,EAAE,MAAM,mBAAmB,CAAC,GAAG;IAC1D,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC;IAC1B,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC;IACtB,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC;IACtB,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,SAAS,CAAC;CACnE,CAAC;AAEN,MAAM,MAAM,eAAe,GAAG,kBAAkB,GAAG,kBAAkB,CAAC"}

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

@@ -0,0 +1,3 @@
+export { IconButton } from './IconButton';
+export type { Icon, IconPosition, IconButtonLinkProps, IconButtonProps, IconButtonSize, } from './IconButton.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/IconButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EACR,IAAI,EACJ,YAAY,EACZ,mBAAmB,EACnB,eAAe,EACf,cAAc,GACjB,MAAM,oBAAoB,CAAC"}

package/dist/components/Label/Label.css

@@ -1,9 +1,14 @@
-@layer dds-components {._label_1bsev_1 {
+@layer dds-components {._label_7ugso_1 {
+    --_label-height: 22px;
+
     display: inline-block;
+    height: var(--_label-height);
     max-width: 100%;
-    padding: var(--spacing-ui-xxs) var(--spacing-ui-lg);
+    padding: 0 var(--spacing-space-20);
     border-radius: var(--radius-semantic-full);
     font: var(--typography-label-md-bold);
+    /* exception: override line-height from font shorthand to lock height (22px) — prevents element height drift when text truncates */
+    line-height: var(--_label-height);
     text-align: center;
     text-transform: uppercase;
     white-space: nowrap;
@@ -12,27 +17,27 @@
     color: var(--color-semantic-foreground-default);
 }
 
-._label--default_1bsev_15 {
+._label--default_7ugso_20 {
     background-color: var(--color-semantic-surface-base);
 }
 
-._label--campaign_1bsev_19 {
+._label--campaign_7ugso_24 {
     background-color: var(--color-semantic-surface-primary-mid);
 }
 
-._label--new_1bsev_23 {
+._label--new_7ugso_28 {
     background-color: var(--color-semantic-accent-lemon-strong);
 }
 
-._label--presale_1bsev_27 {
+._label--presale_7ugso_32 {
     background-color: var(--color-semantic-accent-orange-strong);
 }
 
-._label--soldout_1bsev_31 {
+._label--soldout_7ugso_36 {
     background-color: var(--color-semantic-surface-neutral-strong);
 }
 
-._label--other_1bsev_35 {
+._label--other_7ugso_40 {
     background-color: var(--color-semantic-accent-sky-strong);
 }
 }

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

@@ -1,15 +1,15 @@
 require('./Label.css');
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const label = "_label_1bsev_1";
+const label = "_label_7ugso_1";
 const styles = {
   label,
-  "label--default": "_label--default_1bsev_15",
-  "label--campaign": "_label--campaign_1bsev_19",
-  "label--new": "_label--new_1bsev_23",
-  "label--presale": "_label--presale_1bsev_27",
-  "label--soldout": "_label--soldout_1bsev_31",
-  "label--other": "_label--other_1bsev_35"
+  "label--default": "_label--default_7ugso_20",
+  "label--campaign": "_label--campaign_7ugso_24",
+  "label--new": "_label--new_7ugso_28",
+  "label--presale": "_label--presale_7ugso_32",
+  "label--soldout": "_label--soldout_7ugso_36",
+  "label--other": "_label--other_7ugso_40"
 };
 exports.default = styles;
 exports.label = label;

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

@@ -1,13 +1,13 @@
 import './Label.css';
-const label = "_label_1bsev_1";
+const label = "_label_7ugso_1";
 const styles = {
   label,
-  "label--default": "_label--default_1bsev_15",
-  "label--campaign": "_label--campaign_1bsev_19",
-  "label--new": "_label--new_1bsev_23",
-  "label--presale": "_label--presale_1bsev_27",
-  "label--soldout": "_label--soldout_1bsev_31",
-  "label--other": "_label--other_1bsev_35"
+  "label--default": "_label--default_7ugso_20",
+  "label--campaign": "_label--campaign_7ugso_24",
+  "label--new": "_label--new_7ugso_28",
+  "label--presale": "_label--presale_7ugso_32",
+  "label--soldout": "_label--soldout_7ugso_36",
+  "label--other": "_label--other_7ugso_40"
 };
 export {
   styles as default,

package/dist/components/Notification/Notification.css

@@ -5,35 +5,35 @@
  * These variables come from @dnanpm/design-tokens package.
  */
 
-._notification_5h3rs_8 {
+._notification_m746g_8 {
     display: flex;
     align-items: center;
-    gap: var(--spacing-ui-md);
-    padding-right: var(--spacing-ui-lg);
+    gap: var(--spacing-space-16);
+    padding-right: var(--spacing-space-20);
     border: 2px solid var(--notification-color);
     border-radius: var(--radius-semantic-sm);
     overflow: clip;
 }
 
 /* Variant colors */
-._notification--info_5h3rs_19 {
+._notification--info_m746g_19 {
     --notification-color: var(--color-semantic-status-info);
 }
 
-._notification--success_5h3rs_23 {
+._notification--success_m746g_23 {
     --notification-color: var(--color-semantic-status-success);
 }
 
-._notification--warning_5h3rs_27 {
+._notification--warning_m746g_27 {
     --notification-color: var(--color-semantic-status-warning);
 }
 
-._notification--error_5h3rs_31 {
+._notification--error_m746g_31 {
     --notification-color: var(--color-semantic-status-error);
 }
 
 /* Icon container */
-._notification__icon-container_5h3rs_36 {
+._notification__icon-container_m746g_36 {
     /* The colored area size should be 48x48px on one line content, so we adjust padding based on whether the border is present or not */
     --_icon-padding-with-border: 10px;
     --_icon-padding-without-border: 12px;
@@ -49,24 +49,24 @@
     color: var(--color-semantic-foreground-inverse);
 }
 
-._notification__icon_5h3rs_36 {
+._notification__icon_m746g_36 {
     width: 24px;
     height: 24px;
     flex: 0 0 auto;
 }
 
 /* Content */
-._notification__content_5h3rs_59 {
+._notification__content_m746g_59 {
     flex: 1 1 auto;
     min-width: 0;
-    padding: var(--spacing-ui-xs) 0;
+    padding: var(--spacing-space-8) 0;
     font: var(--typography-body-md);
     color: var(--color-semantic-foreground-default);
     text-wrap: pretty;
 }
 
 /* Close button */
-._notification__close_5h3rs_69 {
+._notification__close_m746g_69 {
     flex: 0 0 auto;
     display: flex;
     align-items: center;
@@ -75,7 +75,7 @@
     height: 32px;
     padding: 0;
     /* Negative margin to offset the button's size and maintain consistent spacing with the content */
-    margin: 0 calc(var(--spacing-ui-xxs) * -1);
+    margin: 0 calc(var(--spacing-space-4) * -1);
     border: none;
     border-radius: var(--radius-semantic-sm);
     background: none;
@@ -83,7 +83,7 @@
     cursor: pointer;
 }
 
-._notification__close_5h3rs_69 svg {
+._notification__close_m746g_69 svg {
     width: 24px;
     height: 24px;
 }

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

@@ -1,17 +1,17 @@
 require('./Notification.css');
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const notification = "_notification_5h3rs_8";
-const notification__icon = "_notification__icon_5h3rs_36";
-const notification__content = "_notification__content_5h3rs_59";
-const notification__close = "_notification__close_5h3rs_69";
+const notification = "_notification_m746g_8";
+const notification__icon = "_notification__icon_m746g_36";
+const notification__content = "_notification__content_m746g_59";
+const notification__close = "_notification__close_m746g_69";
 const styles = {
   notification,
-  "notification--info": "_notification--info_5h3rs_19",
-  "notification--success": "_notification--success_5h3rs_23",
-  "notification--warning": "_notification--warning_5h3rs_27",
-  "notification--error": "_notification--error_5h3rs_31",
-  "notification__icon-container": "_notification__icon-container_5h3rs_36",
+  "notification--info": "_notification--info_m746g_19",
+  "notification--success": "_notification--success_m746g_23",
+  "notification--warning": "_notification--warning_m746g_27",
+  "notification--error": "_notification--error_m746g_31",
+  "notification__icon-container": "_notification__icon-container_m746g_36",
   notification__icon,
   notification__content,
   notification__close

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

@@ -1,15 +1,15 @@
 import './Notification.css';
-const notification = "_notification_5h3rs_8";
-const notification__icon = "_notification__icon_5h3rs_36";
-const notification__content = "_notification__content_5h3rs_59";
-const notification__close = "_notification__close_5h3rs_69";
+const notification = "_notification_m746g_8";
+const notification__icon = "_notification__icon_m746g_36";
+const notification__content = "_notification__content_m746g_59";
+const notification__close = "_notification__close_m746g_69";
 const styles = {
   notification,
-  "notification--info": "_notification--info_5h3rs_19",
-  "notification--success": "_notification--success_5h3rs_23",
-  "notification--warning": "_notification--warning_5h3rs_27",
-  "notification--error": "_notification--error_5h3rs_31",
-  "notification__icon-container": "_notification__icon-container_5h3rs_36",
+  "notification--info": "_notification--info_m746g_19",
+  "notification--success": "_notification--success_m746g_23",
+  "notification--warning": "_notification--warning_m746g_27",
+  "notification--error": "_notification--error_m746g_31",
+  "notification__icon-container": "_notification__icon-container_m746g_36",
   notification__icon,
   notification__content,
   notification__close

package/dist/index.cjs

@@ -7,6 +7,7 @@ const Breadcrumb = require("./components/Breadcrumb/Breadcrumb.cjs");
 const Button = require("./components/Button/Button.cjs");
 const ColorScheme = require("./components/ColorScheme/ColorScheme.cjs");
 const Hero = require("./components/Hero/Hero.cjs");
+const IconButton = require("./components/IconButton/IconButton.cjs");
 const Label = require("./components/Label/Label.cjs");
 const Notification = require("./components/Notification/Notification.cjs");
 const Pictograph = require("./components/Pictograph/Pictograph.cjs");
@@ -19,6 +20,7 @@ exports.Breadcrumb = Breadcrumb.Breadcrumb;
 exports.Button = Button.Button;
 exports.ColorScheme = ColorScheme.ColorScheme;
 exports.Hero = Hero.Hero;
+exports.IconButton = IconButton.IconButton;
 exports.Label = Label.Label;
 exports.Notification = Notification.Notification;
 exports.Pictograph = Pictograph.Pictograph;

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

@@ -8,6 +8,7 @@ export { Notification } from './components/Notification';
 export { Label } from './components/Label';
 export { Pictograph, PictographItem } from './components/Pictograph';
 export { Spinner } from './components/Spinner';
+export { IconButton } from './components/IconButton';
 export type { AccordionProps } from './components/Accordion';
 export type { AccordionItemProps } from './components/AccordionItem';
 export type { BreadcrumbItem, BreadcrumbLinkProps, BreadcrumbProps } from './components/Breadcrumb';
@@ -18,6 +19,7 @@ export type { NotificationProps, NotificationVariant } from './components/Notifi
 export type { LabelProps, LabelVariant } from './components/Label';
 export type { PictographItemProps, PictographProps } from './components/Pictograph';
 export type { SpinnerColor, SpinnerProps, SpinnerSize } from './components/Spinner';
+export type { Icon, IconPosition, IconButtonLinkProps, IconButtonProps, IconButtonSize, } from './components/IconButton';
 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":"AAAA,OAAO,oBAAoB,CAAC;AAG5B,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,YAAY,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAC7D,YAAY,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AACrE,YAAY,EAAE,cAAc,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AACpG,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACnG,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AACnF,YAAY,EACR,SAAS,EACT,gBAAgB,EAChB,oBAAoB,EACpB,kBAAkB,GACrB,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AACxF,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACnE,YAAY,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AACpF,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEpF,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC;AAC7B,YAAY,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAG5B,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErD,YAAY,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAC7D,YAAY,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AACrE,YAAY,EAAE,cAAc,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AACpG,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACnG,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AACnF,YAAY,EACR,SAAS,EACT,gBAAgB,EAChB,oBAAoB,EACpB,kBAAkB,GACrB,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AACxF,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACnE,YAAY,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AACpF,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACpF,YAAY,EACR,IAAI,EACJ,YAAY,EACZ,mBAAmB,EACnB,eAAe,EACf,cAAc,GACjB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC;AAC7B,YAAY,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -5,6 +5,7 @@ import { Breadcrumb } from "./components/Breadcrumb/Breadcrumb.js";
 import { Button } from "./components/Button/Button.js";
 import { ColorScheme } from "./components/ColorScheme/ColorScheme.js";
 import { Hero } from "./components/Hero/Hero.js";
+import { IconButton } from "./components/IconButton/IconButton.js";
 import { Label } from "./components/Label/Label.js";
 import { Notification } from "./components/Notification/Notification.js";
 import { Pictograph } from "./components/Pictograph/Pictograph.js";
@@ -18,6 +19,7 @@ export {
   Button,
   ColorScheme,
   Hero,
+  IconButton,
   Label,
   Notification,
   Pictograph,

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/utils/elevation.css

@@ -1,26 +1,29 @@
-@layer dds-components {/* 
- * TODO: Replace local variables (_elevation-semantic-low, high and extra-high) 
- * with official design tokens once elevation tokens are added to the design token set
- */
-
-._elevationLow_4gnft_6 {
-    --_elevation-semantic-low: 0px 2px 16px 0px rgba(18, 18, 18, 0.06);
-    --_elevation-style: var(--_elevation-semantic-low);
+@layer dds-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);
 }
 
-._elevationHigh_4gnft_11 {
-    --_elevation-semantic-high: 0px 4px 24px 0px rgba(18, 18, 18, 0.08);
-    --_elevation-style: var(--_elevation-semantic-high);
+._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);
 }
 
-._elevationExtraHigh_4gnft_16 {
-    --_elevation-semantic-extra-high: 0px 8px 64px 0px rgba(18, 18, 18, 0.16);
-    --_elevation-style: var(--_elevation-semantic-extra-high);
+._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);
 }
 
-._elevationLow_4gnft_6,
-._elevationHigh_4gnft_11,
-._elevationExtraHigh_4gnft_16 {
+._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);

package/dist/styles/utils/elevation.module.css.cjs

@@ -1,13 +1,13 @@
 require('./elevation.css');
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const elevationLow = "_elevationLow_4gnft_6";
-const elevationExtraHigh = "_elevationExtraHigh_4gnft_16";
+const elevationLow = "_elevationLow_dspr0_1";
+const elevationHigh = "_elevationHigh_dspr0_16";
 const elevationStyles = {
   elevationLow,
-  elevationExtraHigh
+  elevationHigh
 };
 exports.default = elevationStyles;
-exports.elevationExtraHigh = elevationExtraHigh;
+exports.elevationHigh = elevationHigh;
 exports.elevationLow = elevationLow;
 //# sourceMappingURL=elevation.module.css.cjs.map

package/dist/styles/utils/elevation.module.css.js

@@ -1,13 +1,13 @@
 import './elevation.css';
-const elevationLow = "_elevationLow_4gnft_6";
-const elevationExtraHigh = "_elevationExtraHigh_4gnft_16";
+const elevationLow = "_elevationLow_dspr0_1";
+const elevationHigh = "_elevationHigh_dspr0_16";
 const elevationStyles = {
   elevationLow,
-  elevationExtraHigh
+  elevationHigh
 };
 export {
   elevationStyles as default,
-  elevationExtraHigh,
+  elevationHigh,
   elevationLow
 };
 //# sourceMappingURL=elevation.module.css.js.map

package/dist/styles/utils/focus.css

@@ -1,12 +1,12 @@
-@layer dds-components {._focusable_ikczm_1 {
+@layer dds-components {._focusable_azt70_1 {
     /* Marker class for shared focus treatment */
 }
 
-._focusable_ikczm_1:focus {
+._focusable_azt70_1:focus {
     outline-color: transparent;
 }
 
-._focusable_ikczm_1:focus-visible {
+._focusable_azt70_1:focus-visible {
     /* Transparent outline ensures a visible ring fallback in forced colors. */
     outline: 2px solid transparent;
     outline-offset: 2px;
@@ -16,21 +16,21 @@
 }
 
 @media (forced-colors: active) {
-    ._focusable_ikczm_1:focus-visible {
+    ._focusable_azt70_1:focus-visible {
         outline-color: Highlight;
         box-shadow: none;
     }
 }
 
-._focusableInset_ikczm_25 {
+._focusableInset_azt70_25 {
     /* Marker class for inset focus treatment (ring stays inside the element boundary) */
 }
 
-._focusableInset_ikczm_25:focus {
+._focusableInset_azt70_25:focus {
     outline-color: transparent;
 }
 
-._focusableInset_ikczm_25:focus-visible {
+._focusableInset_azt70_25:focus-visible {
     outline: 2px solid transparent;
     box-shadow:
         inset 0 0 0 2px var(--color-semantic-utility-focus-strong),
@@ -38,34 +38,34 @@
 }
 
 @media (forced-colors: active) {
-    ._focusableInset_ikczm_25:focus-visible {
+    ._focusableInset_azt70_25:focus-visible {
         outline-color: Highlight;
         box-shadow: none;
     }
 }
 
 @scope ([data-color-scheme='dark']) to ([data-color-scheme='light']) {
-    ._focusable_ikczm_1:focus-visible {
+    ._focusable_azt70_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);
     }
 
-    ._focusableInset_ikczm_25:focus-visible {
+    ._focusableInset_azt70_25: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) {
-        ._focusable_ikczm_1:focus-visible,
-        ._focusableInset_ikczm_25:focus-visible {
+        ._focusable_azt70_1:focus-visible,
+        ._focusableInset_azt70_25:focus-visible {
             box-shadow: none;
         }
     }
 }
 
-._focusClipGuard_ikczm_68 {
+._focusClipGuard_azt70_68 {
     /*
      * Prevents focus rings from being clipped when the container uses overflow: hidden.
      *
@@ -73,7 +73,7 @@
      * - 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-ui-xxs);
+    --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/focus.module.css.cjs

@@ -1,9 +1,9 @@
 require('./focus.css');
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const focusable = "_focusable_ikczm_1";
-const focusableInset = "_focusableInset_ikczm_25";
-const focusClipGuard = "_focusClipGuard_ikczm_68";
+const focusable = "_focusable_azt70_1";
+const focusableInset = "_focusableInset_azt70_25";
+const focusClipGuard = "_focusClipGuard_azt70_68";
 const focusStyles = {
   focusable,
   focusableInset,

package/dist/styles/utils/focus.module.css.js

@@ -1,7 +1,7 @@
 import './focus.css';
-const focusable = "_focusable_ikczm_1";
-const focusableInset = "_focusableInset_ikczm_25";
-const focusClipGuard = "_focusClipGuard_ikczm_68";
+const focusable = "_focusable_azt70_1";
+const focusableInset = "_focusableInset_azt70_25";
+const focusClipGuard = "_focusClipGuard_azt70_68";
 const focusStyles = {
   focusable,
   focusableInset,