@dnanpm/ui-components 0.5.0 → 0.6.0

package/dist/components/IconButton/IconButton.js

@@ -1,14 +1,16 @@
-import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import focusStyles from "../../styles/utils/focus.module.css.js";
+import textDecorationStyles from "../../styles/utils/text-decoration.module.css.js";
 import styles from "./IconButton.module.css.js";
 import { cn } from "../../utils/cn/cn.js";
 import { Spinner } from "../Spinner/Spinner.js";
 const IconButton = ({
-  variant = "default",
   icon,
   iconPosition = "start",
+  labelBehavior = "truncate",
   size = "normal",
   loading = false,
+  linkColoring = false,
   className,
   children,
   ref,
@@ -18,15 +20,15 @@ const IconButton = ({
   const isAnchor = "href" in props && props.href != null;
   const classes = cn(
     styles["icon-button"],
-    styles[`icon-button--${variant}`],
     styles[`icon-button--${size}`],
     focusStyles.focusable,
     { [styles["icon-button--disabled"]]: isDisabled },
     { [styles["icon-button--loading"]]: loading },
+    { [styles["icon-button--link-coloring"]]: linkColoring },
     className
   );
   const Icon = icon;
-  const iconSlot = loading ? /* @__PURE__ */ jsx("span", { className: styles["icon-button__spinner"], "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+  const iconSlot = loading ? /* @__PURE__ */ jsx("span", { className: styles["icon-button__icon"], "aria-hidden": "true", children: /* @__PURE__ */ jsx(
     Spinner,
     {
       size: size === "small" ? "xs" : "s",
@@ -37,7 +39,15 @@ const IconButton = ({
   ) }) : /* @__PURE__ */ jsx("span", { className: styles["icon-button__icon"], "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true" }) });
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
     iconPosition === "start" && iconSlot,
-    /* @__PURE__ */ jsx("span", { className: styles["icon-button__label"], children }),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(styles["icon-button__label"], textDecorationStyles.underlineLink, {
+          [styles["icon-button__label--wrap"]]: labelBehavior === "wrap"
+        }),
+        children
+      }
+    ),
     iconPosition === "end" && iconSlot
   ] });
   if (isAnchor) {
@@ -67,7 +77,7 @@ const IconButton = ({
       className: classes,
       "aria-busy": loading || void 0,
       "aria-disabled": loading || void 0,
-      tabIndex: loading ? -1 : void 0,
+      tabIndex: loading ? -1 : safeAnchorProps.tabIndex,
       onClick: loading ? (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -82,6 +92,7 @@ const IconButton = ({
   const {
     type = "button",
     disabled,
+    onClick,
     href: _href,
     target: _target,
     rel: _rel,
@@ -95,7 +106,12 @@ const IconButton = ({
       type,
       disabled: disabled || loading,
       className: classes,
+      "aria-disabled": loading || void 0,
       "aria-busy": loading || void 0,
+      onClick: loading ? (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      } : onClick,
       ...buttonProps,
       children: content
     }

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

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sources":["../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, MouseEvent, ReactNode, Ref } from 'react';\nimport { cn } from '../../utils/cn';\nimport focusStyles from '../../styles/utils/focus.module.css';\nimport { Spinner } from '../Spinner';\nimport styles from './IconButton.module.css';\nimport type { IconButtonProps } from './IconButton.types';\n\nexport const IconButton = ({\n    variant = 'default',\n    icon,\n    iconPosition = 'start',\n    size = 'normal',\n    loading = false,\n    className,\n    children,\n    ref,\n    ...props\n}: IconButtonProps) => {\n    const isDisabled = 'disabled' in props && props.disabled;\n    const isAnchor = 'href' in props && props.href != null;\n\n    const classes = cn(\n        styles['icon-button'],\n        styles[`icon-button--${variant}`],\n        styles[`icon-button--${size}`],\n        focusStyles.focusable,\n        { [styles['icon-button--disabled']]: isDisabled },\n        { [styles['icon-button--loading']]: loading },\n        className,\n    );\n\n    const Icon = icon;\n\n    const iconSlot = loading ? (\n        <span className={styles['icon-button__spinner']} aria-hidden=\"true\">\n            <Spinner\n                size={size === 'small' ? 'xs' : 's'}\n                color=\"inherit\"\n                aria-hidden=\"true\"\n                role=\"presentation\"\n            />\n        </span>\n    ) : (\n        <span className={styles['icon-button__icon']} aria-hidden=\"true\">\n            <Icon aria-hidden=\"true\" />\n        </span>\n    );\n\n    const content = (\n        <>\n            {iconPosition === 'start' && iconSlot}\n            <span className={styles['icon-button__label']}>{children}</span>\n            {iconPosition === 'end' && iconSlot}\n        </>\n    );\n\n    if (isAnchor) {\n        const { href, renderLink, ...anchorProps } = props as Omit<\n            typeof props,\n            'variant' | 'icon' | 'iconPosition' | 'size' | 'loading'\n        > & {\n            href: string;\n            renderLink?: (\n                props: AnchorHTMLAttributes<HTMLAnchorElement> & {\n                    href: string;\n                    children: ReactNode;\n                },\n            ) => ReactNode;\n        };\n\n        const {\n            disabled: _disabled,\n            type: _type,\n            name: _name,\n            ...safeAnchorProps\n        } = anchorProps as typeof anchorProps & {\n            disabled?: boolean;\n            type?: 'button' | 'submit' | 'reset';\n            name?: string;\n        };\n\n        const target = safeAnchorProps.target;\n        const rel = safeAnchorProps.rel;\n        const shouldHardenRel = target?.toLowerCase() === '_blank';\n        const relTokens = new Set(\n            (rel ?? '')\n                .split(/\\s+/)\n                .filter(Boolean)\n                .map((token) => token.toLowerCase()),\n        );\n\n        if (shouldHardenRel) {\n            relTokens.add('noopener');\n            relTokens.add('noreferrer');\n        }\n\n        const hardenedRel = relTokens.size > 0 ? Array.from(relTokens).join(' ') : undefined;\n\n        const linkProps = {\n            ...safeAnchorProps,\n            ref: ref as Ref<HTMLAnchorElement>,\n            href,\n            rel: hardenedRel,\n            className: classes,\n            'aria-busy': loading || undefined,\n            'aria-disabled': loading || undefined,\n            tabIndex: loading ? -1 : undefined,\n            onClick: loading\n                ? (e: MouseEvent<HTMLAnchorElement>) => {\n                      e.preventDefault();\n                      e.stopPropagation();\n                  }\n                : safeAnchorProps.onClick,\n            children: content,\n        };\n\n        if (renderLink) {\n            return <>{renderLink(linkProps)}</>;\n        }\n\n        return <a {...linkProps} />;\n    }\n\n    const {\n        type = 'button',\n        disabled,\n        href: _href,\n        target: _target,\n        rel: _rel,\n        renderLink: _renderLink,\n        ...buttonProps\n    } = props as Omit<\n        typeof props,\n        'variant' | 'icon' | 'iconPosition' | 'size' | 'loading' | 'href'\n    > & {\n        type?: 'button' | 'submit' | 'reset';\n        disabled?: boolean;\n        href?: string;\n        target?: string;\n        rel?: string;\n        renderLink?: unknown;\n    };\n\n    return (\n        <button\n            ref={ref as Ref<HTMLButtonElement>}\n            type={type}\n            disabled={disabled || loading}\n            className={classes}\n            aria-busy={loading || undefined}\n            {...buttonProps}\n        >\n            {content}\n        </button>\n    );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"IconButton.js","sources":["../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, MouseEvent, ReactNode, Ref } from 'react';\nimport { cn } from '../../utils/cn';\nimport focusStyles from '../../styles/utils/focus.module.css';\nimport textDecorationStyles from '../../styles/utils/text-decoration.module.css';\nimport { Spinner } from '../Spinner';\nimport styles from './IconButton.module.css';\nimport type { IconButtonProps } from './IconButton.types';\n\nexport const IconButton = ({\n    icon,\n    iconPosition = 'start',\n    labelBehavior = 'truncate',\n    size = 'normal',\n    loading = false,\n    linkColoring = false,\n    className,\n    children,\n    ref,\n    ...props\n}: IconButtonProps) => {\n    const isDisabled = 'disabled' in props && props.disabled;\n    const isAnchor = 'href' in props && props.href != null;\n\n    const classes = cn(\n        styles['icon-button'],\n        styles[`icon-button--${size}`],\n        focusStyles.focusable,\n        { [styles['icon-button--disabled']]: isDisabled },\n        { [styles['icon-button--loading']]: loading },\n        { [styles['icon-button--link-coloring']]: linkColoring },\n        className,\n    );\n\n    const Icon = icon;\n\n    const iconSlot = loading ? (\n        <span className={styles['icon-button__icon']} aria-hidden=\"true\">\n            <Spinner\n                size={size === 'small' ? 'xs' : 's'}\n                color=\"inherit\"\n                aria-hidden=\"true\"\n                role=\"presentation\"\n            />\n        </span>\n    ) : (\n        <span className={styles['icon-button__icon']} aria-hidden=\"true\">\n            <Icon aria-hidden=\"true\" />\n        </span>\n    );\n\n    const content = (\n        <>\n            {iconPosition === 'start' && iconSlot}\n            <span\n                className={cn(styles['icon-button__label'], textDecorationStyles.underlineLink, {\n                    [styles['icon-button__label--wrap']]: labelBehavior === 'wrap',\n                })}\n            >\n                {children}\n            </span>\n            {iconPosition === 'end' && iconSlot}\n        </>\n    );\n\n    if (isAnchor) {\n        const { href, renderLink, ...anchorProps } = props as Omit<\n            typeof props,\n            'icon' | 'iconPosition' | 'size' | 'loading' | 'linkColoring'\n        > & {\n            href: string;\n            renderLink?: (\n                props: AnchorHTMLAttributes<HTMLAnchorElement> & {\n                    href: string;\n                    children: ReactNode;\n                },\n            ) => ReactNode;\n        };\n\n        const {\n            disabled: _disabled,\n            type: _type,\n            name: _name,\n            ...safeAnchorProps\n        } = anchorProps as typeof anchorProps & {\n            disabled?: boolean;\n            type?: 'button' | 'submit' | 'reset';\n            name?: string;\n        };\n\n        const target = safeAnchorProps.target;\n        const rel = safeAnchorProps.rel;\n        const shouldHardenRel = target?.toLowerCase() === '_blank';\n        const relTokens = new Set(\n            (rel ?? '')\n                .split(/\\s+/)\n                .filter(Boolean)\n                .map((token) => token.toLowerCase()),\n        );\n\n        if (shouldHardenRel) {\n            relTokens.add('noopener');\n            relTokens.add('noreferrer');\n        }\n\n        const hardenedRel = relTokens.size > 0 ? Array.from(relTokens).join(' ') : undefined;\n\n        const linkProps = {\n            ...safeAnchorProps,\n            ref: ref as Ref<HTMLAnchorElement>,\n            href,\n            rel: hardenedRel,\n            className: classes,\n            'aria-busy': loading || undefined,\n            'aria-disabled': loading || undefined,\n            tabIndex: loading ? -1 : safeAnchorProps.tabIndex,\n            onClick: loading\n                ? (e: MouseEvent<HTMLAnchorElement>) => {\n                      e.preventDefault();\n                      e.stopPropagation();\n                  }\n                : safeAnchorProps.onClick,\n            children: content,\n        };\n\n        if (renderLink) {\n            return <>{renderLink(linkProps)}</>;\n        }\n\n        return <a {...linkProps} />;\n    }\n\n    const {\n        type = 'button',\n        disabled,\n        onClick,\n        href: _href,\n        target: _target,\n        rel: _rel,\n        renderLink: _renderLink,\n        ...buttonProps\n    } = props as Omit<\n        typeof props,\n        'icon' | 'iconPosition' | 'size' | 'loading' | 'href' | 'linkColoring'\n    > & {\n        type?: 'button' | 'submit' | 'reset';\n        disabled?: boolean;\n        href?: string;\n        target?: string;\n        rel?: string;\n        renderLink?: unknown;\n    };\n\n    return (\n        <button\n            ref={ref as Ref<HTMLButtonElement>}\n            type={type}\n            disabled={disabled || loading}\n            className={classes}\n            aria-disabled={loading || undefined}\n            aria-busy={loading || undefined}\n            onClick={\n                loading\n                    ? (e) => {\n                          e.preventDefault();\n                          e.stopPropagation();\n                      }\n                    : onClick\n            }\n            {...buttonProps}\n        >\n            {content}\n        </button>\n    );\n};\n"],"names":[],"mappings":"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"}

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

@@ -1,16 +1,15 @@
 require('./IconButton.css');
 "use strict";
 const styles = {
-  "icon-button": "_icon-button_1dpxf_1",
-  "icon-button--normal": "_icon-button--normal_1dpxf_23",
-  "icon-button--small": "_icon-button--small_1dpxf_28",
-  "icon-button__label": "_icon-button__label_1dpxf_33",
-  "icon-button__icon": "_icon-button__icon_1dpxf_41",
-  "icon-button__spinner": "_icon-button__spinner_1dpxf_42",
-  "icon-button--default": "_icon-button--default_1dpxf_74",
-  "icon-button--link": "_icon-button--link_1dpxf_78",
-  "icon-button--disabled": "_icon-button--disabled_1dpxf_104",
-  "icon-button--loading": "_icon-button--loading_1dpxf_105"
+  "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

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

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

@@ -1,15 +1,14 @@
 import './IconButton.css';
 const styles = {
-  "icon-button": "_icon-button_1dpxf_1",
-  "icon-button--normal": "_icon-button--normal_1dpxf_23",
-  "icon-button--small": "_icon-button--small_1dpxf_28",
-  "icon-button__label": "_icon-button__label_1dpxf_33",
-  "icon-button__icon": "_icon-button__icon_1dpxf_41",
-  "icon-button__spinner": "_icon-button__spinner_1dpxf_42",
-  "icon-button--default": "_icon-button--default_1dpxf_74",
-  "icon-button--link": "_icon-button--link_1dpxf_78",
-  "icon-button--disabled": "_icon-button--disabled_1dpxf_104",
-  "icon-button--loading": "_icon-button--loading_1dpxf_105"
+  "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

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

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

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

@@ -1,27 +1,27 @@
 import { ComponentPropsWithRef, ComponentType, ReactNode, SVGProps } from 'react';
-export type IconButtonVariant = 'default' | 'link';
 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;
 }
-interface IconButtonBaseProps {
-    /**
-     * Visual variant for text/icon coloring.
-     * @default 'default'
-     */
-    readonly variant?: IconButtonVariant;
-    /** Icon component (for example, `ChevronRight` from `@dnanpm/icons`). */
-    readonly icon: Icon;
+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'
@@ -33,7 +33,12 @@ interface IconButtonBaseProps {
      * @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;

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

@@ -1 +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,iBAAiB,GAAG,SAAS,GAAG,MAAM,CAAC;AACnD,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,KAAK,CAAC;AAC3C,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,OAAO,CAAC;AAChD,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,UAAU,mBAAmB;IACzB;;;OAGG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,iBAAiB,CAAC;IACrC,yEAAyE;IACzE,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC;IACpB,qEAAqE;IACrE,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC7B;;;OAGG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,YAAY,CAAC;IACrC;;;OAGG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,cAAc,CAAC;IAC/B;;;;OAIG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,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"}
+{"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

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

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

@@ -1 +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,EACd,iBAAiB,GACpB,MAAM,oBAAoB,CAAC"}
+{"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.d.ts

@@ -19,7 +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, IconButtonVariant, } from './components/IconButton';
+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;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,EACd,iBAAiB,GACpB,MAAM,yBAAyB,CAAC;AAEjC,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/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