@dnanpm/ui-components 0.5.0 → 0.6.0

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

@@ -1,20 +1,20 @@
 require('./Hero.css');
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const hero = "_hero_905ff_1";
-const hero__background = "_hero__background_905ff_11";
-const hero__backgroundImageComponent = "_hero__backgroundImageComponent_905ff_20";
-const hero__logoImage = "_hero__logoImage_905ff_42";
-const hero__overlay = "_hero__overlay_905ff_63";
-const hero__content = "_hero__content_905ff_75";
-const hero__card = "_hero__card_905ff_90";
-const hero__main = "_hero__main_905ff_101";
-const hero__text = "_hero__text_905ff_107";
-const hero__header = "_hero__header_905ff_113";
-const hero__label = "_hero__label_905ff_119";
-const hero__heading = "_hero__heading_905ff_123";
-const hero__description = "_hero__description_905ff_149";
-const hero__actions = "_hero__actions_905ff_164";
+const hero = "_hero_c98qx_1";
+const hero__background = "_hero__background_c98qx_11";
+const hero__backgroundImageComponent = "_hero__backgroundImageComponent_c98qx_20";
+const hero__logoImage = "_hero__logoImage_c98qx_42";
+const hero__overlay = "_hero__overlay_c98qx_63";
+const hero__content = "_hero__content_c98qx_75";
+const hero__card = "_hero__card_c98qx_90";
+const hero__main = "_hero__main_c98qx_101";
+const hero__text = "_hero__text_c98qx_107";
+const hero__header = "_hero__header_c98qx_113";
+const hero__label = "_hero__label_c98qx_119";
+const hero__heading = "_hero__heading_c98qx_123";
+const hero__description = "_hero__description_c98qx_153";
+const hero__actions = "_hero__actions_c98qx_168";
 const styles = {
   hero,
   hero__background,
@@ -28,11 +28,12 @@ const styles = {
   hero__header,
   hero__label,
   hero__heading,
-  "hero__heading--xl": "_hero__heading--xl_905ff_129",
-  "hero__heading--lg": "_hero__heading--lg_905ff_133",
-  "hero__heading--md": "_hero__heading--md_905ff_137",
-  "hero__heading--sm": "_hero__heading--sm_905ff_141",
-  "hero__heading--xs": "_hero__heading--xs_905ff_145",
+  "hero__heading--xl": "_hero__heading--xl_c98qx_129",
+  "hero__heading--lg": "_hero__heading--lg_c98qx_133",
+  "hero__heading--md": "_hero__heading--md_c98qx_137",
+  "hero__heading--sm": "_hero__heading--sm_c98qx_141",
+  "hero__heading--xs": "_hero__heading--xs_c98qx_145",
+  "hero__heading--xxs": "_hero__heading--xxs_c98qx_149",
   hero__description,
   hero__actions
 };

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

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

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

@@ -1,18 +1,18 @@
 import './Hero.css';
-const hero = "_hero_905ff_1";
-const hero__background = "_hero__background_905ff_11";
-const hero__backgroundImageComponent = "_hero__backgroundImageComponent_905ff_20";
-const hero__logoImage = "_hero__logoImage_905ff_42";
-const hero__overlay = "_hero__overlay_905ff_63";
-const hero__content = "_hero__content_905ff_75";
-const hero__card = "_hero__card_905ff_90";
-const hero__main = "_hero__main_905ff_101";
-const hero__text = "_hero__text_905ff_107";
-const hero__header = "_hero__header_905ff_113";
-const hero__label = "_hero__label_905ff_119";
-const hero__heading = "_hero__heading_905ff_123";
-const hero__description = "_hero__description_905ff_149";
-const hero__actions = "_hero__actions_905ff_164";
+const hero = "_hero_c98qx_1";
+const hero__background = "_hero__background_c98qx_11";
+const hero__backgroundImageComponent = "_hero__backgroundImageComponent_c98qx_20";
+const hero__logoImage = "_hero__logoImage_c98qx_42";
+const hero__overlay = "_hero__overlay_c98qx_63";
+const hero__content = "_hero__content_c98qx_75";
+const hero__card = "_hero__card_c98qx_90";
+const hero__main = "_hero__main_c98qx_101";
+const hero__text = "_hero__text_c98qx_107";
+const hero__header = "_hero__header_c98qx_113";
+const hero__label = "_hero__label_c98qx_119";
+const hero__heading = "_hero__heading_c98qx_123";
+const hero__description = "_hero__description_c98qx_153";
+const hero__actions = "_hero__actions_c98qx_168";
 const styles = {
   hero,
   hero__background,
@@ -26,11 +26,12 @@ const styles = {
   hero__header,
   hero__label,
   hero__heading,
-  "hero__heading--xl": "_hero__heading--xl_905ff_129",
-  "hero__heading--lg": "_hero__heading--lg_905ff_133",
-  "hero__heading--md": "_hero__heading--md_905ff_137",
-  "hero__heading--sm": "_hero__heading--sm_905ff_141",
-  "hero__heading--xs": "_hero__heading--xs_905ff_145",
+  "hero__heading--xl": "_hero__heading--xl_c98qx_129",
+  "hero__heading--lg": "_hero__heading--lg_c98qx_133",
+  "hero__heading--md": "_hero__heading--md_c98qx_137",
+  "hero__heading--sm": "_hero__heading--sm_c98qx_141",
+  "hero__heading--xs": "_hero__heading--xs_c98qx_145",
+  "hero__heading--xxs": "_hero__heading--xxs_c98qx_149",
   hero__description,
   hero__actions
 };

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

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

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

@@ -1,5 +1,5 @@
 import { ComponentPropsWithRef, CSSProperties, ElementType, ReactElement, ReactNode } from 'react';
-export type HeroHeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5';
+export type HeroHeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 export type HeroCommonImageProps = Omit<ComponentPropsWithRef<'img'>, 'ref'>;
 export type HeroImageComponent = ElementType<HeroCommonImageProps>;
 export interface HeroProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {
@@ -47,9 +47,5 @@ export interface HeroProps extends Omit<ComponentPropsWithRef<'div'>, 'children'
      * Secondary call-to-action element.
      */
     readonly secondaryCta?: ReactElement;
-    /**
-     * Allows passing a `data-testid` string for testing purposes.
-     */
-    readonly 'data-testid'?: string;
 }
 //# sourceMappingURL=Hero.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Hero.types.d.ts","sourceRoot":"","sources":["../../../src/components/Hero/Hero.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACR,qBAAqB,EACrB,aAAa,EACb,WAAW,EACX,YAAY,EACZ,SAAS,EACZ,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAChE,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7E,MAAM,MAAM,kBAAkB,GAAG,WAAW,CAAC,oBAAoB,CAAC,CAAC;AAEnE,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC7E;;OAEG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,YAAY,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC;IACjC;;OAEG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,gBAAgB,CAAC;IACzC;;OAEG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,kBAAkB,CAAC;IACpC;;OAEG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,oBAAoB,CAAC;IAC3C;;OAEG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,kBAAkB,CAAC;IACxC;;OAEG;IACH,QAAQ,CAAC,cAAc,CAAC,EAAE,oBAAoB,CAAC;IAC/C;;OAEG;IACH,QAAQ,CAAC,eAAe,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAC5D;;OAEG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,YAAY,CAAC;IACnC;;OAEG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,YAAY,CAAC;IACrC;;OAEG;IACH,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC;CACnC"}
+{"version":3,"file":"Hero.types.d.ts","sourceRoot":"","sources":["../../../src/components/Hero/Hero.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACR,qBAAqB,EACrB,aAAa,EACb,WAAW,EACX,YAAY,EACZ,SAAS,EACZ,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACvE,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7E,MAAM,MAAM,kBAAkB,GAAG,WAAW,CAAC,oBAAoB,CAAC,CAAC;AAEnE,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC7E;;OAEG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,YAAY,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC;IACjC;;OAEG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,gBAAgB,CAAC;IACzC;;OAEG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,kBAAkB,CAAC;IACpC;;OAEG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,oBAAoB,CAAC;IAC3C;;OAEG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,kBAAkB,CAAC;IACxC;;OAEG;IACH,QAAQ,CAAC,cAAc,CAAC,EAAE,oBAAoB,CAAC;IAC/C;;OAEG;IACH,QAAQ,CAAC,eAAe,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAC5D;;OAEG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,YAAY,CAAC;IACnC;;OAEG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,YAAY,CAAC;CACxC"}

package/dist/components/Hero/Hero.utils.cjs

@@ -6,7 +6,8 @@ const headingClassByLevel = {
   h2: Hero_module.default["hero__heading--lg"],
   h3: Hero_module.default["hero__heading--md"],
   h4: Hero_module.default["hero__heading--sm"],
-  h5: Hero_module.default["hero__heading--xs"]
+  h5: Hero_module.default["hero__heading--xs"],
+  h6: Hero_module.default["hero__heading--xxs"]
 };
 exports.headingClassByLevel = headingClassByLevel;
 //# sourceMappingURL=Hero.utils.cjs.map

package/dist/components/Hero/Hero.utils.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Hero.utils.cjs","sources":["../../../src/components/Hero/Hero.utils.ts"],"sourcesContent":["import styles from './Hero.module.css';\nimport type { HeroHeadingLevel } from './Hero.types';\n\nexport const headingClassByLevel: Record<HeroHeadingLevel, string> = {\n    h1: styles['hero__heading--xl'],\n    h2: styles['hero__heading--lg'],\n    h3: styles['hero__heading--md'],\n    h4: styles['hero__heading--sm'],\n    h5: styles['hero__heading--xs'],\n};\n"],"names":["styles"],"mappings":";;;AAGO,MAAM,sBAAwD;AAAA,EACjE,IAAIA,YAAAA,QAAO,mBAAmB;AAAA,EAC9B,IAAIA,YAAAA,QAAO,mBAAmB;AAAA,EAC9B,IAAIA,YAAAA,QAAO,mBAAmB;AAAA,EAC9B,IAAIA,YAAAA,QAAO,mBAAmB;AAAA,EAC9B,IAAIA,YAAAA,QAAO,mBAAmB;AAClC;;"}
+{"version":3,"file":"Hero.utils.cjs","sources":["../../../src/components/Hero/Hero.utils.ts"],"sourcesContent":["import styles from './Hero.module.css';\nimport type { HeroHeadingLevel } from './Hero.types';\n\nexport const headingClassByLevel: Record<HeroHeadingLevel, string> = {\n    h1: styles['hero__heading--xl'],\n    h2: styles['hero__heading--lg'],\n    h3: styles['hero__heading--md'],\n    h4: styles['hero__heading--sm'],\n    h5: styles['hero__heading--xs'],\n    h6: styles['hero__heading--xxs'],\n};\n"],"names":["styles"],"mappings":";;;AAGO,MAAM,sBAAwD;AAAA,EACjE,IAAIA,YAAAA,QAAO,mBAAmB;AAAA,EAC9B,IAAIA,YAAAA,QAAO,mBAAmB;AAAA,EAC9B,IAAIA,YAAAA,QAAO,mBAAmB;AAAA,EAC9B,IAAIA,YAAAA,QAAO,mBAAmB;AAAA,EAC9B,IAAIA,YAAAA,QAAO,mBAAmB;AAAA,EAC9B,IAAIA,YAAAA,QAAO,oBAAoB;AACnC;;"}

package/dist/components/Hero/Hero.utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Hero.utils.d.ts","sourceRoot":"","sources":["../../../src/components/Hero/Hero.utils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAErD,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAMhE,CAAC"}
+{"version":3,"file":"Hero.utils.d.ts","sourceRoot":"","sources":["../../../src/components/Hero/Hero.utils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAErD,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAOhE,CAAC"}

package/dist/components/Hero/Hero.utils.js

@@ -4,7 +4,8 @@ const headingClassByLevel = {
   h2: styles["hero__heading--lg"],
   h3: styles["hero__heading--md"],
   h4: styles["hero__heading--sm"],
-  h5: styles["hero__heading--xs"]
+  h5: styles["hero__heading--xs"],
+  h6: styles["hero__heading--xxs"]
 };
 export {
   headingClassByLevel

package/dist/components/Hero/Hero.utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"Hero.utils.js","sources":["../../../src/components/Hero/Hero.utils.ts"],"sourcesContent":["import styles from './Hero.module.css';\nimport type { HeroHeadingLevel } from './Hero.types';\n\nexport const headingClassByLevel: Record<HeroHeadingLevel, string> = {\n    h1: styles['hero__heading--xl'],\n    h2: styles['hero__heading--lg'],\n    h3: styles['hero__heading--md'],\n    h4: styles['hero__heading--sm'],\n    h5: styles['hero__heading--xs'],\n};\n"],"names":[],"mappings":";AAGO,MAAM,sBAAwD;AAAA,EACjE,IAAI,OAAO,mBAAmB;AAAA,EAC9B,IAAI,OAAO,mBAAmB;AAAA,EAC9B,IAAI,OAAO,mBAAmB;AAAA,EAC9B,IAAI,OAAO,mBAAmB;AAAA,EAC9B,IAAI,OAAO,mBAAmB;AAClC;"}
+{"version":3,"file":"Hero.utils.js","sources":["../../../src/components/Hero/Hero.utils.ts"],"sourcesContent":["import styles from './Hero.module.css';\nimport type { HeroHeadingLevel } from './Hero.types';\n\nexport const headingClassByLevel: Record<HeroHeadingLevel, string> = {\n    h1: styles['hero__heading--xl'],\n    h2: styles['hero__heading--lg'],\n    h3: styles['hero__heading--md'],\n    h4: styles['hero__heading--sm'],\n    h5: styles['hero__heading--xs'],\n    h6: styles['hero__heading--xxs'],\n};\n"],"names":[],"mappings":";AAGO,MAAM,sBAAwD;AAAA,EACjE,IAAI,OAAO,mBAAmB;AAAA,EAC9B,IAAI,OAAO,mBAAmB;AAAA,EAC9B,IAAI,OAAO,mBAAmB;AAAA,EAC9B,IAAI,OAAO,mBAAmB;AAAA,EAC9B,IAAI,OAAO,mBAAmB;AAAA,EAC9B,IAAI,OAAO,oBAAoB;AACnC;"}

package/dist/components/IconButton/IconButton.cjs

@@ -2,15 +2,17 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const focus_module = require("../../styles/utils/focus.module.css.cjs");
+const textDecoration_module = require("../../styles/utils/text-decoration.module.css.cjs");
 const IconButton_module = require("./IconButton.module.css.cjs");
 const cn = require("../../utils/cn/cn.cjs");
 const Spinner = require("../Spinner/Spinner.cjs");
 const IconButton = ({
-  variant = "default",
   icon,
   iconPosition = "start",
+  labelBehavior = "truncate",
   size = "normal",
   loading = false,
+  linkColoring = false,
   className,
   children,
   ref,
@@ -20,15 +22,15 @@ const IconButton = ({
   const isAnchor = "href" in props && props.href != null;
   const classes = cn.cn(
     IconButton_module["icon-button"],
-    IconButton_module[`icon-button--${variant}`],
     IconButton_module[`icon-button--${size}`],
     focus_module.default.focusable,
     { [IconButton_module["icon-button--disabled"]]: isDisabled },
     { [IconButton_module["icon-button--loading"]]: loading },
+    { [IconButton_module["icon-button--link-coloring"]]: linkColoring },
     className
   );
   const Icon = icon;
-  const iconSlot = loading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: IconButton_module["icon-button__spinner"], "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(
+  const iconSlot = loading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: IconButton_module["icon-button__icon"], "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(
     Spinner.Spinner,
     {
       size: size === "small" ? "xs" : "s",
@@ -39,7 +41,15 @@ const IconButton = ({
   ) }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: IconButton_module["icon-button__icon"], "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { "aria-hidden": "true" }) });
   const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     iconPosition === "start" && iconSlot,
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: IconButton_module["icon-button__label"], children }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: cn.cn(IconButton_module["icon-button__label"], textDecoration_module.default.underlineLink, {
+          [IconButton_module["icon-button__label--wrap"]]: labelBehavior === "wrap"
+        }),
+        children
+      }
+    ),
     iconPosition === "end" && iconSlot
   ] });
   if (isAnchor) {
@@ -69,7 +79,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();
@@ -84,6 +94,7 @@ const IconButton = ({
   const {
     type = "button",
     disabled,
+    onClick,
     href: _href,
     target: _target,
     rel: _rel,
@@ -97,7 +108,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.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.cjs","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":["cn","styles","focusStyles","jsx","Spinner","jsxs","Fragment"],"mappings":"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"}
+{"version":3,"file":"IconButton.cjs","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":["cn","styles","focusStyles","jsx","Spinner","jsxs","Fragment","textDecorationStyles"],"mappings":"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"}

package/dist/components/IconButton/IconButton.css

@@ -1,10 +1,10 @@
-@layer dds-components {._icon-button_1dpxf_1 {
+@layer dds-components {._icon-button_1iv9h_1 {
     --_button-icon-size: 24px;
 
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: var(--spacing-ui-xs);
+    gap: var(--spacing-space-8);
     max-width: 100%;
     min-width: 0;
     border: none;
@@ -20,26 +20,37 @@
         text-decoration-color 0.2s ease-in-out;
 }
 
-._icon-button--normal_1dpxf_23 {
+._icon-button--normal_1iv9h_23 {
     font: var(--typography-label-lg-bold);
     --_button-icon-size: 24px;
 }
 
-._icon-button--small_1dpxf_28 {
+._icon-button--small_1iv9h_28 {
     font: var(--typography-label-md-bold);
     --_button-icon-size: 20px;
 }
 
-._icon-button__label_1dpxf_33 {
+._icon-button__label_1iv9h_33 {
     flex: 0 1 auto;
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    text-decoration-color: transparent;
+    transition: text-decoration-color 0.2s ease-in-out;
+    /* exception: override line-height from font shorthand to prevent underline/descender clipping */
+    line-height: var(--typography-line-height-md);
 }
 
-._icon-button__icon_1dpxf_41,
-._icon-button__spinner_1dpxf_42 {
+._icon-button__label--wrap_1iv9h_45 {
+    overflow: visible;
+    text-overflow: clip;
+    white-space: normal;
+    overflow-wrap: anywhere;
+    text-align: left;
+}
+
+._icon-button__icon_1iv9h_53 {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -47,129 +58,122 @@
     width: var(--_button-icon-size);
     height: var(--_button-icon-size);
     color: var(--color-semantic-interactive-primary-default);
-}
 
-._icon-button__icon_1dpxf_41 > svg {
-    width: var(--_button-icon-size);
-    height: var(--_button-icon-size);
+    & > svg {
+        width: var(--_button-icon-size);
+        height: var(--_button-icon-size);
+    }
 }
 
-._icon-button_1dpxf_1:hover ._icon-button__label_1dpxf_33,
-._icon-button_1dpxf_1:focus-visible ._icon-button__label_1dpxf_33 {
-    text-decoration: underline;
-}
+/* Shared interaction states */
+._icon-button_1iv9h_1:hover,
+._icon-button_1iv9h_1:focus-visible {
+    ._icon-button__label_1iv9h_33 {
+        text-decoration-color: currentColor;
+    }
 
-._icon-button_1dpxf_1:hover ._icon-button__icon_1dpxf_41,
-._icon-button_1dpxf_1:hover ._icon-button__spinner_1dpxf_42,
-._icon-button_1dpxf_1:focus-visible ._icon-button__icon_1dpxf_41,
-._icon-button_1dpxf_1:focus-visible ._icon-button__spinner_1dpxf_42 {
-    color: var(--color-semantic-interactive-primary-hover);
+    ._icon-button__icon_1iv9h_53 {
+        color: var(--color-semantic-interactive-primary-hover);
+    }
 }
 
-._icon-button_1dpxf_1:active ._icon-button__icon_1dpxf_41,
-._icon-button_1dpxf_1:active ._icon-button__spinner_1dpxf_42 {
+._icon-button_1iv9h_1:active ._icon-button__icon_1iv9h_53 {
     color: var(--color-semantic-interactive-primary-active);
 }
 
-._icon-button--default_1dpxf_74 {
-    color: var(--color-semantic-foreground-default);
-}
-
-._icon-button--link_1dpxf_78 {
+/* Optional link coloring */
+._icon-button--link-coloring_1iv9h_85 {
     color: var(--color-semantic-foreground-link);
-}
 
-._icon-button--link_1dpxf_78 ._icon-button__icon_1dpxf_41,
-._icon-button--link_1dpxf_78 ._icon-button__spinner_1dpxf_42 {
-    color: var(--color-semantic-foreground-link);
-}
+    ._icon-button__icon_1iv9h_53 {
+        color: var(--color-semantic-foreground-link);
+    }
 
-._icon-button--link_1dpxf_78:hover,
-._icon-button--link_1dpxf_78:focus-visible {
-    color: var(--color-semantic-foreground-link-hover);
-}
+    &:hover,
+    &:focus-visible {
+        color: var(--color-semantic-foreground-link-hover);
 
-._icon-button--link_1dpxf_78:hover ._icon-button__icon_1dpxf_41,
-._icon-button--link_1dpxf_78:hover ._icon-button__spinner_1dpxf_42,
-._icon-button--link_1dpxf_78:focus-visible ._icon-button__icon_1dpxf_41,
-._icon-button--link_1dpxf_78:focus-visible ._icon-button__spinner_1dpxf_42 {
-    color: var(--color-semantic-foreground-link-hover);
-}
+        ._icon-button__icon_1iv9h_53 {
+            color: var(--color-semantic-foreground-link-hover);
+        }
+    }
 
-._icon-button--link_1dpxf_78:active ._icon-button__icon_1dpxf_41,
-._icon-button--link_1dpxf_78:active ._icon-button__spinner_1dpxf_42 {
-    color: var(--color-semantic-interactive-primary-active);
+    &:active {
+        color: var(--color-semantic-interactive-primary-active);
+
+        ._icon-button__icon_1iv9h_53 {
+            color: var(--color-semantic-interactive-primary-active);
+        }
+    }
 }
 
-._icon-button--disabled_1dpxf_104,
-._icon-button--loading_1dpxf_105 {
+/* Disabled/loading states */
+._icon-button--disabled_1iv9h_111,
+._icon-button--loading_1iv9h_112 {
     pointer-events: none;
 }
 
-._icon-button--disabled_1dpxf_104 {
+._icon-button--disabled_1iv9h_111 {
     color: var(--color-semantic-foreground-muted);
-}
 
-._icon-button--disabled_1dpxf_104 ._icon-button__icon_1dpxf_41,
-._icon-button--disabled_1dpxf_104 ._icon-button__spinner_1dpxf_42 {
-    color: var(--color-semantic-interactive-primary-disabled);
+    ._icon-button__icon_1iv9h_53 {
+        color: var(--color-semantic-interactive-primary-disabled);
+    }
 }
 
+/* Dark scheme overrides */
 @scope ([data-color-scheme='dark']) to ([data-color-scheme='light']) {
-    ._icon-button_1dpxf_1 {
+    ._icon-button_1iv9h_1 {
         color: var(--color-semantic-foreground-inverse);
     }
 
-    ._icon-button__icon_1dpxf_41,
-    ._icon-button__spinner_1dpxf_42 {
+    ._icon-button_1iv9h_1 ._icon-button__icon_1iv9h_53 {
         color: var(--color-semantic-interactive-inverse-default);
     }
 
-    ._icon-button_1dpxf_1:hover ._icon-button__icon_1dpxf_41,
-    ._icon-button_1dpxf_1:hover ._icon-button__spinner_1dpxf_42,
-    ._icon-button_1dpxf_1:focus-visible ._icon-button__icon_1dpxf_41,
-    ._icon-button_1dpxf_1:focus-visible ._icon-button__spinner_1dpxf_42 {
+    ._icon-button_1iv9h_1:hover ._icon-button__icon_1iv9h_53,
+    ._icon-button_1iv9h_1:focus-visible ._icon-button__icon_1iv9h_53 {
         color: var(--color-semantic-interactive-inverse-hover);
     }
 
-    ._icon-button_1dpxf_1:active ._icon-button__icon_1dpxf_41,
-    ._icon-button_1dpxf_1:active ._icon-button__spinner_1dpxf_42 {
+    ._icon-button_1iv9h_1:active ._icon-button__icon_1iv9h_53 {
         color: var(--color-semantic-interactive-inverse-active);
     }
 
-    ._icon-button--default_1dpxf_74 {
+    ._icon-button--link-coloring_1iv9h_85 {
         color: var(--color-semantic-foreground-inverse);
-    }
 
-    ._icon-button--link_1dpxf_78 {
-        color: var(--color-semantic-foreground-inverse);
-    }
+        ._icon-button__icon_1iv9h_53 {
+            color: var(--color-semantic-foreground-inverse);
+        }
 
-    ._icon-button--link_1dpxf_78 ._icon-button__icon_1dpxf_41,
-    ._icon-button--link_1dpxf_78 ._icon-button__spinner_1dpxf_42 {
-        color: var(--color-semantic-interactive-inverse-default);
-    }
+        &:hover,
+        &:focus-visible {
+            color: var(--color-semantic-foreground-inverse);
 
-    ._icon-button--link_1dpxf_78:hover,
-    ._icon-button--link_1dpxf_78:focus-visible {
-        color: var(--color-semantic-foreground-inverse);
-    }
+            ._icon-button__icon_1iv9h_53 {
+                color: var(--color-semantic-foreground-inverse);
+            }
+        }
 
-    ._icon-button--link_1dpxf_78:hover ._icon-button__icon_1dpxf_41,
-    ._icon-button--link_1dpxf_78:hover ._icon-button__spinner_1dpxf_42,
-    ._icon-button--link_1dpxf_78:focus-visible ._icon-button__icon_1dpxf_41,
-    ._icon-button--link_1dpxf_78:focus-visible ._icon-button__spinner_1dpxf_42 {
-        color: var(--color-semantic-interactive-inverse-hover);
+        &:active {
+            color: var(--color-semantic-foreground-inverse);
+
+            ._icon-button__icon_1iv9h_53 {
+                color: var(--color-semantic-foreground-inverse);
+            }
+        }
     }
 
-    ._icon-button--disabled_1dpxf_104 ._icon-button__icon_1dpxf_41,
-    ._icon-button--disabled_1dpxf_104 ._icon-button__spinner_1dpxf_42 {
-        color: var(--color-semantic-interactive-inverse-disabled);
+    ._icon-button--disabled_1iv9h_111 {
+        ._icon-button__icon_1iv9h_53 {
+            color: var(--color-semantic-interactive-inverse-disabled);
+        }
     }
 }
 
 @media (forced-colors: active) {
-    ._icon-button--small_1dpxf_28:focus-visible {
+    ._icon-button--small_1iv9h_28:focus-visible {
         outline-color: Highlight;
         box-shadow: none;
     }

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

@@ -1,3 +1,3 @@
 import { IconButtonProps } from './IconButton.types';
-export declare const IconButton: ({ variant, icon, iconPosition, size, loading, className, children, ref, ...props }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IconButton: ({ icon, iconPosition, labelBehavior, size, loading, linkColoring, className, children, ref, ...props }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=IconButton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../src/components/IconButton/IconButton.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D,eAAO,MAAM,UAAU,GAAI,oFAUxB,eAAe,4CA0IjB,CAAC"}
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../src/components/IconButton/IconButton.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D,eAAO,MAAM,UAAU,GAAI,wGAWxB,eAAe,4CA0JjB,CAAC"}