@dnanpm/ui-components 0.7.0 → 0.8.0

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

@@ -1,59 +1,59 @@
 import './Footer.css';
-const footer = "_footer_1kfrt_8";
-const footer__inner = "_footer__inner_1kfrt_31";
-const footer__top = "_footer__top_1kfrt_36";
-const footer__bottom = "_footer__bottom_1kfrt_37";
-const footer__container = "_footer__container_1kfrt_122";
-const footer__column = "_footer__column_1kfrt_156";
-const footer__link = "_footer__link_1kfrt_111";
-const footer__action = "_footer__action_1kfrt_191";
-const footer__accordion = "_footer__accordion_1kfrt_222";
-const footer__divider = "_footer__divider_1kfrt_233";
-const footer__meta = "_footer__meta_1kfrt_247";
-const footer__language = "_footer__language_1kfrt_274";
-const footer__organization = "_footer__organization_1kfrt_341";
-const footer__copyright = "_footer__copyright_1kfrt_400";
-const footer__apps = "_footer__apps_1kfrt_406";
-const footer__badges = "_footer__badges_1kfrt_424";
-const footer__badge = "_footer__badge_1kfrt_424";
+const footer = "_footer_1lum3_8";
+const footer__inner = "_footer__inner_1lum3_31";
+const footer__top = "_footer__top_1lum3_36";
+const footer__bottom = "_footer__bottom_1lum3_37";
+const footer__container = "_footer__container_1lum3_122";
+const footer__column = "_footer__column_1lum3_156";
+const footer__link = "_footer__link_1lum3_111";
+const footer__action = "_footer__action_1lum3_191";
+const footer__accordion = "_footer__accordion_1lum3_224";
+const footer__divider = "_footer__divider_1lum3_235";
+const footer__meta = "_footer__meta_1lum3_249";
+const footer__language = "_footer__language_1lum3_276";
+const footer__organization = "_footer__organization_1lum3_346";
+const footer__copyright = "_footer__copyright_1lum3_407";
+const footer__apps = "_footer__apps_1lum3_413";
+const footer__badges = "_footer__badges_1lum3_431";
+const footer__badge = "_footer__badge_1lum3_431";
 const styles = {
   footer,
   footer__inner,
   footer__top,
   footer__bottom,
-  "footer__top-row": "_footer__top-row_1kfrt_61",
-  "footer__top-column": "_footer__top-column_1kfrt_76",
-  "footer__top-heading": "_footer__top-heading_1kfrt_84",
-  "footer__top-icon": "_footer__top-icon_1kfrt_91",
-  "footer__top-title": "_footer__top-title_1kfrt_97",
-  "footer__top-links": "_footer__top-links_1kfrt_102",
-  "footer__link-list": "_footer__link-list_1kfrt_111",
-  "footer__top-link": "_footer__top-link_1kfrt_102",
+  "footer__top-row": "_footer__top-row_1lum3_61",
+  "footer__top-column": "_footer__top-column_1lum3_76",
+  "footer__top-heading": "_footer__top-heading_1lum3_84",
+  "footer__top-icon": "_footer__top-icon_1lum3_91",
+  "footer__top-title": "_footer__top-title_1lum3_97",
+  "footer__top-links": "_footer__top-links_1lum3_102",
+  "footer__link-list": "_footer__link-list_1lum3_111",
+  "footer__top-link": "_footer__top-link_1lum3_102",
   footer__container,
-  "footer__nav-accordions": "_footer__nav-accordions_1kfrt_135",
-  "footer__nav-columns": "_footer__nav-columns_1kfrt_139",
+  "footer__nav-accordions": "_footer__nav-accordions_1lum3_135",
+  "footer__nav-columns": "_footer__nav-columns_1lum3_139",
   footer__column,
-  "footer__column-heading": "_footer__column-heading_1kfrt_164",
+  "footer__column-heading": "_footer__column-heading_1lum3_164",
   footer__link,
   footer__action,
   footer__accordion,
   footer__divider,
-  "footer__divider--after-nav": "_footer__divider--after-nav_1kfrt_240",
+  "footer__divider--after-nav": "_footer__divider--after-nav_1lum3_242",
   footer__meta,
-  "footer__meta-center": "_footer__meta-center_1kfrt_263",
-  "footer__language-list": "_footer__language-list_1kfrt_274",
+  "footer__meta-center": "_footer__meta-center_1lum3_265",
+  "footer__language-list": "_footer__language-list_1lum3_276",
   footer__language,
-  "footer__language--current": "_footer__language--current_1kfrt_300",
-  "footer__social-list": "_footer__social-list_1kfrt_311",
-  "footer__social-link": "_footer__social-link_1kfrt_319",
-  "footer__social-icon": "_footer__social-icon_1kfrt_333",
-  "footer__organization-list": "_footer__organization-list_1kfrt_341",
+  "footer__language--current": "_footer__language--current_1lum3_303",
+  "footer__social-list": "_footer__social-list_1lum3_315",
+  "footer__social-link": "_footer__social-link_1lum3_323",
+  "footer__social-icon": "_footer__social-icon_1lum3_338",
+  "footer__organization-list": "_footer__organization-list_1lum3_346",
   footer__organization,
-  "footer__organization--current": "_footer__organization--current_1kfrt_364",
-  "footer__legal-list": "_footer__legal-list_1kfrt_376",
+  "footer__organization--current": "_footer__organization--current_1lum3_370",
+  "footer__legal-list": "_footer__legal-list_1lum3_383",
   footer__copyright,
   footer__apps,
-  "footer__apps-title": "_footer__apps-title_1kfrt_420",
+  "footer__apps-title": "_footer__apps-title_1lum3_427",
   footer__badges,
   footer__badge
 };

package/dist/components/FunctionButton/FunctionButton.cjs

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const focus_module = require("../../styles/utils/focus.module.css.cjs");
+const FunctionButton_module = require("./FunctionButton.module.css.cjs");
+const cn = require("../../utils/cn/cn.cjs");
+const FunctionButton = ({
+  icon: Icon,
+  variant = "default",
+  size = "default",
+  className,
+  type = "button",
+  ref,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ref,
+      type,
+      className: cn.cn(
+        FunctionButton_module["function-button"],
+        FunctionButton_module[`function-button--${variant}`],
+        { [FunctionButton_module["function-button--large"]]: size === "large" },
+        focus_module.default.focusable,
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { "aria-hidden": "true" })
+    }
+  );
+};
+exports.FunctionButton = FunctionButton;
+//# sourceMappingURL=FunctionButton.cjs.map

package/dist/components/FunctionButton/FunctionButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FunctionButton.cjs","sources":["../../../src/components/FunctionButton/FunctionButton.tsx"],"sourcesContent":["import { cn } from '../../utils/cn';\nimport focusStyles from '../../styles/utils/focus.module.css';\nimport styles from './FunctionButton.module.css';\nimport type { FunctionButtonProps } from './FunctionButton.types';\n\nexport const FunctionButton = ({\n    icon: Icon,\n    variant = 'default',\n    size = 'default',\n    className,\n    type = 'button',\n    ref,\n    ...props\n}: FunctionButtonProps) => {\n    return (\n        <button\n            ref={ref}\n            type={type}\n            className={cn(\n                styles['function-button'],\n                styles[`function-button--${variant}`],\n                { [styles['function-button--large']]: size === 'large' },\n                focusStyles.focusable,\n                className,\n            )}\n            {...props}\n        >\n            <Icon aria-hidden=\"true\" />\n        </button>\n    );\n};\n"],"names":["jsx","cn","styles","focusStyles"],"mappings":";;;;;;AAKO,MAAM,iBAAiB,CAAC;AAAA,EAC3B,MAAM;AAAA,EACN,UAAU;AAAA,EACV,OAAO;AAAA,EACP;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACP,MAA2B;AACvB,SACIA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA;AAAA,MACA,WAAWC,GAAAA;AAAAA,QACPC,sBAAO,iBAAiB;AAAA,QACxBA,sBAAO,oBAAoB,OAAO,EAAE;AAAA,QACpC,EAAE,CAACA,sBAAO,wBAAwB,CAAC,GAAG,SAAS,QAAA;AAAA,QAC/CC,aAAAA,QAAY;AAAA,QACZ;AAAA,MAAA;AAAA,MAEH,GAAG;AAAA,MAEJ,UAAAH,2BAAAA,IAAC,MAAA,EAAK,eAAY,OAAA,CAAO;AAAA,IAAA;AAAA,EAAA;AAGrC;;"}

package/dist/components/FunctionButton/FunctionButton.css

@@ -0,0 +1,125 @@
+@layer dds-components {._function-button_kp4nc_1 {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    flex: 0 0 auto;
+    padding: 0;
+    appearance: none;
+    border: var(--borderwidth-semantic-xs) solid transparent;
+    border-radius: var(--radius-semantic-sm);
+    color: var(--color-semantic-foreground-default);
+    cursor: pointer;
+    transition:
+        background-color 0.2s ease-in-out,
+        border-color 0.2s ease-in-out,
+        color 0.2s ease-in-out;
+
+    & > svg {
+        width: 16px;
+        height: 16px;
+    }
+}
+
+._function-button--large_kp4nc_25 {
+    width: 40px;
+    height: 40px;
+
+    & > svg {
+        width: 24px;
+        height: 24px;
+    }
+}
+
+._function-button--default_kp4nc_35 {
+    background-color: var(--color-semantic-surface-neutral-strong);
+    border-color: var(--color-semantic-border-neutral-mid);
+
+    &:hover,
+    &:focus-visible {
+        background-color: var(--color-semantic-interactive-neutral-hover);
+    }
+
+    &:active {
+        background-color: var(--color-semantic-interactive-neutral-active);
+    }
+}
+
+._function-button--circle_kp4nc_49 {
+    border-color: transparent;
+    border-radius: var(--radius-semantic-full);
+    background-color: var(--color-semantic-interactive-primary-default);
+    color: var(--color-semantic-foreground-inverse);
+
+    &:hover,
+    &:focus-visible {
+        background-color: var(--color-semantic-interactive-primary-hover);
+    }
+
+    &:active {
+        background-color: var(--color-semantic-interactive-primary-active);
+    }
+}
+
+._function-button--ghost_kp4nc_65 {
+    border: none;
+    background-color: transparent;
+
+    &:hover,
+    &:focus-visible,
+    &:active {
+        background-color: transparent;
+    }
+}
+
+._function-button_kp4nc_1:disabled {
+    pointer-events: none;
+
+    &._function-button--default_kp4nc_35 {
+        background-color: var(--color-semantic-interactive-neutral-disabled);
+        color: var(--color-semantic-foreground-muted);
+    }
+
+    &._function-button--circle_kp4nc_49 {
+        background-color: var(--color-semantic-interactive-primary-disabled);
+        color: var(--color-semantic-foreground-muted);
+    }
+
+    &._function-button--ghost_kp4nc_65 {
+        opacity: 0.3;
+    }
+}
+
+/* Styles apply from [data-color-scheme="dark"] down to (but not into) [data-color-scheme="light"]. */
+@scope ([data-color-scheme='dark']) to ([data-color-scheme='light']) {
+    ._function-button_kp4nc_1:disabled._function-button--default_kp4nc_35 {
+        border-color: var(--color-semantic-interactive-inverse-disabled);
+        color: var(--color-semantic-foreground-inverse-muted);
+    }
+
+    ._function-button_kp4nc_1:disabled._function-button--circle_kp4nc_49 {
+        color: var(--color-semantic-foreground-inverse-muted);
+    }
+
+    ._function-button--ghost_kp4nc_65 {
+        color: var(--color-semantic-interactive-inverse-default);
+
+        &:hover,
+        &:focus-visible {
+            color: var(--color-semantic-interactive-inverse-hover);
+        }
+
+        &:active {
+            color: var(--color-semantic-interactive-inverse-active);
+        }
+    }
+}
+
+@media (forced-colors: active) {
+    ._function-button_kp4nc_1:disabled {
+        border-color: GrayText;
+        color: GrayText;
+    }
+}
+}

package/dist/components/FunctionButton/FunctionButton.d.ts

@@ -0,0 +1,3 @@
+import { FunctionButtonProps } from './FunctionButton.types';
+export declare const FunctionButton: ({ icon: Icon, variant, size, className, type, ref, ...props }: FunctionButtonProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FunctionButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FunctionButton.d.ts","sourceRoot":"","sources":["../../../src/components/FunctionButton/FunctionButton.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAElE,eAAO,MAAM,cAAc,GAAI,+DAQ5B,mBAAmB,4CAiBrB,CAAC"}

package/dist/components/FunctionButton/FunctionButton.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import focusStyles from "../../styles/utils/focus.module.css.js";
+import styles from "./FunctionButton.module.css.js";
+import { cn } from "../../utils/cn/cn.js";
+const FunctionButton = ({
+  icon: Icon,
+  variant = "default",
+  size = "default",
+  className,
+  type = "button",
+  ref,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type,
+      className: cn(
+        styles["function-button"],
+        styles[`function-button--${variant}`],
+        { [styles["function-button--large"]]: size === "large" },
+        focusStyles.focusable,
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true" })
+    }
+  );
+};
+export {
+  FunctionButton
+};
+//# sourceMappingURL=FunctionButton.js.map

package/dist/components/FunctionButton/FunctionButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FunctionButton.js","sources":["../../../src/components/FunctionButton/FunctionButton.tsx"],"sourcesContent":["import { cn } from '../../utils/cn';\nimport focusStyles from '../../styles/utils/focus.module.css';\nimport styles from './FunctionButton.module.css';\nimport type { FunctionButtonProps } from './FunctionButton.types';\n\nexport const FunctionButton = ({\n    icon: Icon,\n    variant = 'default',\n    size = 'default',\n    className,\n    type = 'button',\n    ref,\n    ...props\n}: FunctionButtonProps) => {\n    return (\n        <button\n            ref={ref}\n            type={type}\n            className={cn(\n                styles['function-button'],\n                styles[`function-button--${variant}`],\n                { [styles['function-button--large']]: size === 'large' },\n                focusStyles.focusable,\n                className,\n            )}\n            {...props}\n        >\n            <Icon aria-hidden=\"true\" />\n        </button>\n    );\n};\n"],"names":[],"mappings":";;;;AAKO,MAAM,iBAAiB,CAAC;AAAA,EAC3B,MAAM;AAAA,EACN,UAAU;AAAA,EACV,OAAO;AAAA,EACP;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACP,MAA2B;AACvB,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACP,OAAO,iBAAiB;AAAA,QACxB,OAAO,oBAAoB,OAAO,EAAE;AAAA,QACpC,EAAE,CAAC,OAAO,wBAAwB,CAAC,GAAG,SAAS,QAAA;AAAA,QAC/C,YAAY;AAAA,QACZ;AAAA,MAAA;AAAA,MAEH,GAAG;AAAA,MAEJ,UAAA,oBAAC,MAAA,EAAK,eAAY,OAAA,CAAO;AAAA,IAAA;AAAA,EAAA;AAGrC;"}

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

@@ -0,0 +1,11 @@
+require('./FunctionButton.css');
+"use strict";
+const styles = {
+  "function-button": "_function-button_kp4nc_1",
+  "function-button--large": "_function-button--large_kp4nc_25",
+  "function-button--default": "_function-button--default_kp4nc_35",
+  "function-button--circle": "_function-button--circle_kp4nc_49",
+  "function-button--ghost": "_function-button--ghost_kp4nc_65"
+};
+module.exports = styles;
+//# sourceMappingURL=FunctionButton.module.css.cjs.map

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

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

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

@@ -0,0 +1,12 @@
+import './FunctionButton.css';
+const styles = {
+  "function-button": "_function-button_kp4nc_1",
+  "function-button--large": "_function-button--large_kp4nc_25",
+  "function-button--default": "_function-button--default_kp4nc_35",
+  "function-button--circle": "_function-button--circle_kp4nc_49",
+  "function-button--ghost": "_function-button--ghost_kp4nc_65"
+};
+export {
+  styles as default
+};
+//# sourceMappingURL=FunctionButton.module.css.js.map

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

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

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

@@ -0,0 +1,21 @@
+import { ComponentPropsWithRef, ComponentType, SVGProps } from 'react';
+export type FunctionButtonVariant = 'default' | 'circle' | 'ghost';
+export type FunctionButtonSize = 'default' | 'large';
+export type FunctionButtonIcon = ComponentType<SVGProps<SVGSVGElement>>;
+type FunctionButtonAccessibleName = {
+    readonly 'aria-label': string;
+    readonly 'aria-labelledby'?: never;
+} | {
+    readonly 'aria-label'?: never;
+    readonly 'aria-labelledby': string;
+};
+export type FunctionButtonProps = Omit<ComponentPropsWithRef<'button'>, 'aria-label' | 'aria-labelledby' | 'children'> & FunctionButtonAccessibleName & {
+    /** Icon component rendered as decorative content. */
+    readonly icon: FunctionButtonIcon;
+    /** Visual button style. @default 'default' */
+    readonly variant?: FunctionButtonVariant;
+    /** Control size. @default 'default' */
+    readonly size?: FunctionButtonSize;
+};
+export {};
+//# sourceMappingURL=FunctionButton.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FunctionButton.types.d.ts","sourceRoot":"","sources":["../../../src/components/FunctionButton/FunctionButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5E,MAAM,MAAM,qBAAqB,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;AACnE,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,OAAO,CAAC;AACrD,MAAM,MAAM,kBAAkB,GAAG,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAExE,KAAK,4BAA4B,GAC3B;IACI,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,iBAAiB,CAAC,EAAE,KAAK,CAAC;CACtC,GACD;IACI,QAAQ,CAAC,YAAY,CAAC,EAAE,KAAK,CAAC;IAC9B,QAAQ,CAAC,iBAAiB,EAAE,MAAM,CAAC;CACtC,CAAC;AAER,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAClC,qBAAqB,CAAC,QAAQ,CAAC,EAC/B,YAAY,GAAG,iBAAiB,GAAG,UAAU,CAChD,GACG,4BAA4B,GAAG;IAC3B,qDAAqD;IACrD,QAAQ,CAAC,IAAI,EAAE,kBAAkB,CAAC;IAClC,8CAA8C;IAC9C,QAAQ,CAAC,OAAO,CAAC,EAAE,qBAAqB,CAAC;IACzC,uCAAuC;IACvC,QAAQ,CAAC,IAAI,CAAC,EAAE,kBAAkB,CAAC;CACtC,CAAC"}

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

@@ -0,0 +1,3 @@
+export { FunctionButton } from './FunctionButton';
+export type { FunctionButtonIcon, FunctionButtonProps, FunctionButtonSize, FunctionButtonVariant, } from './FunctionButton.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FunctionButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EACR,kBAAkB,EAClB,mBAAmB,EACnB,kBAAkB,EAClB,qBAAqB,GACxB,MAAM,wBAAwB,CAAC"}

package/dist/components/IconButton/IconButton.css

@@ -1,4 +1,4 @@
-@layer dds-components {._icon-button_1iv9h_1 {
+@layer dds-components {._icon-button_mhilb_1 {
     --_button-icon-size: 24px;
 
     display: inline-flex;
@@ -8,7 +8,6 @@
     max-width: 100%;
     min-width: 0;
     border: none;
-    border-radius: var(--radius-semantic-sm);
     padding: 0;
     background: transparent;
     font: var(--typography-label-lg-bold);
@@ -20,17 +19,17 @@
         text-decoration-color 0.2s ease-in-out;
 }
 
-._icon-button--normal_1iv9h_23 {
+._icon-button--normal_mhilb_22 {
     font: var(--typography-label-lg-bold);
     --_button-icon-size: 24px;
 }
 
-._icon-button--small_1iv9h_28 {
+._icon-button--small_mhilb_27 {
     font: var(--typography-label-md-bold);
     --_button-icon-size: 20px;
 }
 
-._icon-button__label_1iv9h_33 {
+._icon-button__label_mhilb_32 {
     flex: 0 1 auto;
     min-width: 0;
     overflow: hidden;
@@ -42,7 +41,7 @@
     line-height: var(--typography-line-height-md);
 }
 
-._icon-button__label--wrap_1iv9h_45 {
+._icon-button__label--wrap_mhilb_44 {
     overflow: visible;
     text-overflow: clip;
     white-space: normal;
@@ -50,7 +49,7 @@
     text-align: left;
 }
 
-._icon-button__icon_1iv9h_53 {
+._icon-button__icon_mhilb_52 {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -66,26 +65,26 @@
 }
 
 /* Shared interaction states */
-._icon-button_1iv9h_1:hover,
-._icon-button_1iv9h_1:focus-visible {
-    ._icon-button__label_1iv9h_33 {
+._icon-button_mhilb_1:hover,
+._icon-button_mhilb_1:focus-visible {
+    ._icon-button__label_mhilb_32 {
         text-decoration-color: currentColor;
     }
 
-    ._icon-button__icon_1iv9h_53 {
+    ._icon-button__icon_mhilb_52 {
         color: var(--color-semantic-interactive-primary-hover);
     }
 }
 
-._icon-button_1iv9h_1:active ._icon-button__icon_1iv9h_53 {
+._icon-button_mhilb_1:active ._icon-button__icon_mhilb_52 {
     color: var(--color-semantic-interactive-primary-active);
 }
 
 /* Optional link coloring */
-._icon-button--link-coloring_1iv9h_85 {
+._icon-button--link-coloring_mhilb_84 {
     color: var(--color-semantic-foreground-link);
 
-    ._icon-button__icon_1iv9h_53 {
+    ._icon-button__icon_mhilb_52 {
         color: var(--color-semantic-foreground-link);
     }
 
@@ -93,7 +92,7 @@
     &:focus-visible {
         color: var(--color-semantic-foreground-link-hover);
 
-        ._icon-button__icon_1iv9h_53 {
+        ._icon-button__icon_mhilb_52 {
             color: var(--color-semantic-foreground-link-hover);
         }
     }
@@ -101,49 +100,49 @@
     &:active {
         color: var(--color-semantic-interactive-primary-active);
 
-        ._icon-button__icon_1iv9h_53 {
+        ._icon-button__icon_mhilb_52 {
             color: var(--color-semantic-interactive-primary-active);
         }
     }
 }
 
 /* Disabled/loading states */
-._icon-button--disabled_1iv9h_111,
-._icon-button--loading_1iv9h_112 {
+._icon-button--disabled_mhilb_110,
+._icon-button--loading_mhilb_111 {
     pointer-events: none;
 }
 
-._icon-button--disabled_1iv9h_111 {
+._icon-button--disabled_mhilb_110 {
     color: var(--color-semantic-foreground-muted);
 
-    ._icon-button__icon_1iv9h_53 {
+    ._icon-button__icon_mhilb_52 {
         color: var(--color-semantic-interactive-primary-disabled);
     }
 }
 
 /* Dark scheme overrides */
 @scope ([data-color-scheme='dark']) to ([data-color-scheme='light']) {
-    ._icon-button_1iv9h_1 {
+    ._icon-button_mhilb_1 {
         color: var(--color-semantic-foreground-inverse);
     }
 
-    ._icon-button_1iv9h_1 ._icon-button__icon_1iv9h_53 {
+    ._icon-button_mhilb_1 ._icon-button__icon_mhilb_52 {
         color: var(--color-semantic-interactive-inverse-default);
     }
 
-    ._icon-button_1iv9h_1:hover ._icon-button__icon_1iv9h_53,
-    ._icon-button_1iv9h_1:focus-visible ._icon-button__icon_1iv9h_53 {
+    ._icon-button_mhilb_1:hover ._icon-button__icon_mhilb_52,
+    ._icon-button_mhilb_1:focus-visible ._icon-button__icon_mhilb_52 {
         color: var(--color-semantic-interactive-inverse-hover);
     }
 
-    ._icon-button_1iv9h_1:active ._icon-button__icon_1iv9h_53 {
+    ._icon-button_mhilb_1:active ._icon-button__icon_mhilb_52 {
         color: var(--color-semantic-interactive-inverse-active);
     }
 
-    ._icon-button--link-coloring_1iv9h_85 {
+    ._icon-button--link-coloring_mhilb_84 {
         color: var(--color-semantic-foreground-inverse);
 
-        ._icon-button__icon_1iv9h_53 {
+        ._icon-button__icon_mhilb_52 {
             color: var(--color-semantic-foreground-inverse);
         }
 
@@ -151,7 +150,7 @@
         &:focus-visible {
             color: var(--color-semantic-foreground-inverse);
 
-            ._icon-button__icon_1iv9h_53 {
+            ._icon-button__icon_mhilb_52 {
                 color: var(--color-semantic-foreground-inverse);
             }
         }
@@ -159,21 +158,21 @@
         &:active {
             color: var(--color-semantic-foreground-inverse);
 
-            ._icon-button__icon_1iv9h_53 {
+            ._icon-button__icon_mhilb_52 {
                 color: var(--color-semantic-foreground-inverse);
             }
         }
     }
 
-    ._icon-button--disabled_1iv9h_111 {
-        ._icon-button__icon_1iv9h_53 {
+    ._icon-button--disabled_mhilb_110 {
+        ._icon-button__icon_mhilb_52 {
             color: var(--color-semantic-interactive-inverse-disabled);
         }
     }
 }
 
 @media (forced-colors: active) {
-    ._icon-button--small_1iv9h_28:focus-visible {
+    ._icon-button--small_mhilb_27:focus-visible {
         outline-color: Highlight;
         box-shadow: none;
     }

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

@@ -1,15 +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"
+  "icon-button": "_icon-button_mhilb_1",
+  "icon-button--normal": "_icon-button--normal_mhilb_22",
+  "icon-button--small": "_icon-button--small_mhilb_27",
+  "icon-button__label": "_icon-button__label_mhilb_32",
+  "icon-button__label--wrap": "_icon-button__label--wrap_mhilb_44",
+  "icon-button__icon": "_icon-button__icon_mhilb_52",
+  "icon-button--link-coloring": "_icon-button--link-coloring_mhilb_84",
+  "icon-button--disabled": "_icon-button--disabled_mhilb_110",
+  "icon-button--loading": "_icon-button--loading_mhilb_111"
 };
 module.exports = styles;
 //# sourceMappingURL=IconButton.module.css.cjs.map

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

@@ -1,14 +1,14 @@
 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"
+  "icon-button": "_icon-button_mhilb_1",
+  "icon-button--normal": "_icon-button--normal_mhilb_22",
+  "icon-button--small": "_icon-button--small_mhilb_27",
+  "icon-button__label": "_icon-button__label_mhilb_32",
+  "icon-button__label--wrap": "_icon-button__label--wrap_mhilb_44",
+  "icon-button__icon": "_icon-button__icon_mhilb_52",
+  "icon-button--link-coloring": "_icon-button--link-coloring_mhilb_84",
+  "icon-button--disabled": "_icon-button--disabled_mhilb_110",
+  "icon-button--loading": "_icon-button--loading_mhilb_111"
 };
 export {
   styles as default