@lidofinance/lido-app-ui 1.12.0 → 1.13.0

package/README.md

@@ -28,7 +28,7 @@ function Widget() {
 }
 ```
 
-Theme providers (`ThemeProvider`, `CookieThemeProvider`, `ThemeToggler`) are re-exported from `@lidofinance/lido-shared-ui`. The color tokens follow the `data-lido-theme` attribute they set, so switching to the dark theme restyles these components. `ThemeSwitcher` is the app-ui-styled theme toggle, since the shared `ThemeToggler` relies on `--lido-ui-*` tokens that app-ui doesn't define.
+Theme providers (`ThemeProvider`, `CookieThemeProvider`) are re-exported from `@lidofinance/lido-shared-ui`. The color tokens follow the `data-lido-theme` attribute they set, so switching to the dark theme restyles these components. `ThemeSwitcher` is the app-ui-styled theme toggle, since the shared `ThemeToggler` relies on `--lido-ui-*` tokens that app-ui doesn't define.
 
 ## Router links
 

package/dist/README.md

@@ -28,7 +28,7 @@ function Widget() {
 }
 ```
 
-Theme providers (`ThemeProvider`, `CookieThemeProvider`, `ThemeToggler`) are re-exported from `@lidofinance/lido-shared-ui`. The color tokens follow the `data-lido-theme` attribute they set, so switching to the dark theme restyles these components. `ThemeSwitcher` is the app-ui-styled theme toggle, since the shared `ThemeToggler` relies on `--lido-ui-*` tokens that app-ui doesn't define.
+Theme providers (`ThemeProvider`, `CookieThemeProvider`) are re-exported from `@lidofinance/lido-shared-ui`. The color tokens follow the `data-lido-theme` attribute they set, so switching to the dark theme restyles these components. `ThemeSwitcher` is the app-ui-styled theme toggle, since the shared `ThemeToggler` relies on `--lido-ui-*` tokens that app-ui doesn't define.
 
 ## Router links
 

package/dist/cjs/address/Address.cjs

@@ -0,0 +1,50 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const react = require('react');
+const cn = require('classnames');
+const Address_module = require('./Address.module.css.cjs');
+const jsxRuntime = require('react/jsx-runtime');
+const Identicon = require('../identicon/Identicon.cjs');
+const Tooltip = require('../tooltip/Tooltip.cjs');
+const Copy = require('../copy/Copy.cjs');
+const Hex = require('../hex/Hex.cjs');
+
+const Address = /*#__PURE__*/react.forwardRef((_ref, ref) => {
+  let {
+    address,
+    symbols,
+    identicon,
+    tooltip = false,
+    copy = false,
+    className,
+    children,
+    ...rest
+  } = _ref;
+  const hex = /*#__PURE__*/jsxRuntime.jsx(Hex.Hex, {
+    value: address,
+    symbols: symbols,
+    title: tooltip ? '' : undefined
+  });
+  return /*#__PURE__*/jsxRuntime.jsxs("span", {
+    ref: ref,
+    className: cn(Address_module.root, className),
+    ...rest,
+    children: [identicon != null ? /*#__PURE__*/jsxRuntime.jsx(Identicon.Identicon, {
+      address: address,
+      size: identicon,
+      className: cn(Address_module.identicon, identicon >= 28 && Address_module.identiconLarge)
+    }) : null, tooltip ? /*#__PURE__*/jsxRuntime.jsx(Tooltip.Tooltip, {
+      content: address,
+      tabIndex: 0,
+      children: hex
+    }) : hex, copy ? /*#__PURE__*/jsxRuntime.jsx(Copy.Copy, {
+      text: address
+    }) : null, children]
+  });
+});
+Address.displayName = 'Address';
+
+exports.Address = Address;
+//# sourceMappingURL=Address.cjs.map

package/dist/cjs/address/Address.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Address.cjs","sources":["../../../src/address/Address.tsx"],"sourcesContent":["import { forwardRef, type ComponentPropsWithoutRef } from 'react'\n\nimport cn from 'classnames'\n\nimport { Copy } from '../copy'\nimport { Hex } from '../hex'\nimport { Identicon } from '../identicon'\nimport { Tooltip } from '../tooltip'\nimport styles from './Address.module.css'\n\nexport type AddressProps = ComponentPropsWithoutRef<'span'> & {\n  address: string\n  symbols?: number\n  identicon?: number\n  tooltip?: boolean\n  copy?: boolean\n}\n\nexport const Address = forwardRef<HTMLSpanElement, AddressProps>(\n  (\n    {\n      address,\n      symbols,\n      identicon,\n      tooltip = false,\n      copy = false,\n      className,\n      children,\n      ...rest\n    },\n    ref,\n  ) => {\n    const hex = (\n      <Hex value={address} symbols={symbols} title={tooltip ? '' : undefined} />\n    )\n\n    return (\n      <span ref={ref} className={cn(styles.root, className)} {...rest}>\n        {identicon != null ? (\n          <Identicon\n            address={address}\n            size={identicon}\n            className={cn(\n              styles.identicon,\n              identicon >= 28 && styles.identiconLarge,\n            )}\n          />\n        ) : null}\n        {tooltip ? (\n          <Tooltip content={address} tabIndex={0}>\n            {hex}\n          </Tooltip>\n        ) : (\n          hex\n        )}\n        {copy ? <Copy text={address} /> : null}\n        {children}\n      </span>\n    )\n  },\n)\n\nAddress.displayName = 'Address'\n"],"names":["Address","forwardRef","_ref","ref","address","symbols","identicon","tooltip","copy","className","children","rest","hex","_jsx","Hex","value","title","undefined","_jsxs","cn","styles","root","Identicon","size","identiconLarge","Tooltip","content","tabIndex","Copy","text","displayName"],"mappings":";;;;;;;;;;;;;AAkBO,MAAMA,OAAO,gBAAGC,gBAAU,CAC/B,CAAAC,IAAA,EAWEC,GAAG,KACA;EAAA,IAXH;IACEC,OAAO;IACPC,OAAO;IACPC,SAAS;AACTC,IAAAA,OAAO,GAAG,KAAK;AACfC,IAAAA,IAAI,GAAG,KAAK;IACZC,SAAS;IACTC,QAAQ;IACR,GAAGC,IAAAA;AACL,GAAC,GAAAT,IAAA,CAAA;AAGD,EAAA,MAAMU,GAAG,gBACPC,cAAA,CAACC,OAAG,EAAA;AAACC,IAAAA,KAAK,EAAEX,OAAQ;AAACC,IAAAA,OAAO,EAAEA,OAAQ;AAACW,IAAAA,KAAK,EAAET,OAAO,GAAG,EAAE,GAAGU,SAAAA;AAAU,GAAE,CAC1E,CAAA;AAED,EAAA,oBACEC,eAAA,CAAA,MAAA,EAAA;AAAMf,IAAAA,GAAG,EAAEA,GAAI;IAACM,SAAS,EAAEU,EAAE,CAACC,cAAM,CAACC,IAAI,EAAEZ,SAAS,CAAE;AAAA,IAAA,GAAKE,IAAI;AAAAD,IAAAA,QAAA,GAC5DJ,SAAS,IAAI,IAAI,gBAChBO,cAAA,CAACS,mBAAS,EAAA;AACRlB,MAAAA,OAAO,EAAEA,OAAQ;AACjBmB,MAAAA,IAAI,EAAEjB,SAAU;AAChBG,MAAAA,SAAS,EAAEU,EAAE,CACXC,cAAM,CAACd,SAAS,EAChBA,SAAS,IAAI,EAAE,IAAIc,cAAM,CAACI,cAC5B,CAAA;KACD,CAAC,GACA,IAAI,EACPjB,OAAO,gBACNM,cAAA,CAACY,eAAO,EAAA;AAACC,MAAAA,OAAO,EAAEtB,OAAQ;AAACuB,MAAAA,QAAQ,EAAE,CAAE;AAAAjB,MAAAA,QAAA,EACpCE,GAAAA;KACM,CAAC,GAEVA,GACD,EACAJ,IAAI,gBAAGK,cAAA,CAACe,SAAI,EAAA;AAACC,MAAAA,IAAI,EAAEzB,OAAAA;AAAQ,KAAE,CAAC,GAAG,IAAI,EACrCM,QAAQ,CAAA;AAAA,GACL,CAAC,CAAA;AAEX,CACF,EAAC;AAEDV,OAAO,CAAC8B,WAAW,GAAG,SAAS;;;;"}

package/dist/cjs/address/Address.module.css.cjs

@@ -0,0 +1,6 @@
+'use strict';
+
+const styles = {"root":"Address-module_root__VufXT","identicon":"Address-module_identicon__QBsQ2","identiconLarge":"Address-module_identiconLarge__PljfK"};
+
+module.exports = styles;
+//# sourceMappingURL=Address.module.css.cjs.map

package/dist/cjs/address/Address.module.css.cjs.map

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

package/dist/cjs/address-button/AddressButton.cjs

@@ -0,0 +1,49 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const react = require('react');
+const cn = require('classnames');
+const surface_module = require('../utils/surface.module.css.cjs');
+const AddressButton_module = require('./AddressButton.module.css.cjs');
+const jsxRuntime = require('react/jsx-runtime');
+const IconLoaderCircle = require('../icons/components/base/IconLoaderCircle.cjs');
+const Address = require('../address/Address.cjs');
+
+/** Pill button showing an identicon and the trimmed address. */
+const AddressButton = /*#__PURE__*/react.forwardRef((_ref, ref) => {
+  let {
+    address,
+    symbols,
+    loading = false,
+    disabled = false,
+    className,
+    type = 'button',
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/jsxRuntime.jsx("button", {
+    ref: ref,
+    type: type,
+    disabled: disabled || loading,
+    "aria-busy": loading || undefined,
+    className: cn(surface_module.surface, AddressButton_module.button, loading && !disabled && AddressButton_module.loading, className),
+    ...rest,
+    children: loading ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+        className: AddressButton_module.slot,
+        "aria-hidden": "true",
+        children: /*#__PURE__*/jsxRuntime.jsx(IconLoaderCircle.IconLoaderCircle, {
+          className: AddressButton_module.spinner
+        })
+      }), "Loading"]
+    }) : /*#__PURE__*/jsxRuntime.jsx(Address.Address, {
+      address: address,
+      symbols: symbols,
+      identicon: 28
+    })
+  });
+});
+AddressButton.displayName = 'AddressButton';
+
+exports.AddressButton = AddressButton;
+//# sourceMappingURL=AddressButton.cjs.map

package/dist/cjs/address-button/AddressButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddressButton.cjs","sources":["../../../src/address-button/AddressButton.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes } from 'react'\n\nimport cn from 'classnames'\n\nimport { Address } from '../address'\nimport { IconLoaderCircle } from '../icons'\nimport surfaceStyles from '../utils/surface.module.css'\nimport styles from './AddressButton.module.css'\n\nexport type AddressButtonProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'children'\n> & {\n  address: string\n  symbols?: number\n  loading?: boolean\n}\n\n/** Pill button showing an identicon and the trimmed address. */\nexport const AddressButton = forwardRef<HTMLButtonElement, AddressButtonProps>(\n  (\n    {\n      address,\n      symbols,\n      loading = false,\n      disabled = false,\n      className,\n      type = 'button',\n      ...rest\n    },\n    ref,\n  ) => (\n    <button\n      ref={ref}\n      type={type}\n      disabled={disabled || loading}\n      aria-busy={loading || undefined}\n      className={cn(\n        surfaceStyles.surface,\n        styles.button,\n        loading && !disabled && styles.loading,\n        className,\n      )}\n      {...rest}\n    >\n      {loading ? (\n        <>\n          <span className={styles.slot} aria-hidden='true'>\n            <IconLoaderCircle className={styles.spinner} />\n          </span>\n          Loading\n        </>\n      ) : (\n        <Address address={address} symbols={symbols} identicon={28} />\n      )}\n    </button>\n  ),\n)\n\nAddressButton.displayName = 'AddressButton'\n"],"names":["AddressButton","forwardRef","_ref","ref","address","symbols","loading","disabled","className","type","rest","_jsx","undefined","cn","surfaceStyles","surface","styles","button","children","_jsxs","_Fragment","slot","IconLoaderCircle","spinner","Address","identicon","displayName"],"mappings":";;;;;;;;;;;;AAkBA;AACO,MAAMA,aAAa,gBAAGC,gBAAU,CACrC,CAAAC,IAAA,EAUEC,GAAG,KAAA;EAAA,IATH;IACEC,OAAO;IACPC,OAAO;AACPC,IAAAA,OAAO,GAAG,KAAK;AACfC,IAAAA,QAAQ,GAAG,KAAK;IAChBC,SAAS;AACTC,IAAAA,IAAI,GAAG,QAAQ;IACf,GAAGC,IAAAA;AACL,GAAC,GAAAR,IAAA,CAAA;AAAA,EAAA,oBAGDS,cAAA,CAAA,QAAA,EAAA;AACER,IAAAA,GAAG,EAAEA,GAAI;AACTM,IAAAA,IAAI,EAAEA,IAAK;IACXF,QAAQ,EAAEA,QAAQ,IAAID,OAAQ;IAC9B,WAAWA,EAAAA,OAAO,IAAIM,SAAU;IAChCJ,SAAS,EAAEK,EAAE,CACXC,cAAa,CAACC,OAAO,EACrBC,oBAAM,CAACC,MAAM,EACbX,OAAO,IAAI,CAACC,QAAQ,IAAIS,oBAAM,CAACV,OAAO,EACtCE,SACF,CAAE;AAAA,IAAA,GACEE,IAAI;AAAAQ,IAAAA,QAAA,EAEPZ,OAAO,gBACNa,eAAA,CAAAC,mBAAA,EAAA;AAAAF,MAAAA,QAAA,gBACEP,cAAA,CAAA,MAAA,EAAA;QAAMH,SAAS,EAAEQ,oBAAM,CAACK,IAAK;AAAC,QAAA,aAAA,EAAY,MAAM;QAAAH,QAAA,eAC9CP,cAAA,CAACW,iCAAgB,EAAA;UAACd,SAAS,EAAEQ,oBAAM,CAACO,OAAAA;SAAU,CAAA;AAAC,OAC3C,CAAC,EAET,SAAA,CAAA;AAAA,KAAE,CAAC,gBAEHZ,cAAA,CAACa,eAAO,EAAA;AAACpB,MAAAA,OAAO,EAAEA,OAAQ;AAACC,MAAAA,OAAO,EAAEA,OAAQ;AAACoB,MAAAA,SAAS,EAAE,EAAA;KAAK,CAAA;AAC9D,GACK,CAAC,CAAA;AAAA,CAEb,EAAC;AAEDzB,aAAa,CAAC0B,WAAW,GAAG,eAAe;;;;"}

package/dist/cjs/address-button/AddressButton.module.css.cjs

@@ -0,0 +1,6 @@
+'use strict';
+
+const styles = {"button":"AddressButton-module_button__cNJUm","loading":"AddressButton-module_loading__TmxUZ","slot":"AddressButton-module_slot__A5Xbe","spinner":"AddressButton-module_spinner__JztAP","spin":"AddressButton-module_spin__no7O5"};
+
+module.exports = styles;
+//# sourceMappingURL=AddressButton.module.css.cjs.map

package/dist/cjs/address-button/AddressButton.module.css.cjs.map

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

package/dist/cjs/button/Button.cjs

@@ -29,7 +29,7 @@ const Button = /*#__PURE__*/react.forwardRef((_ref, ref) => {
     type: type,
     disabled: disabled || loading,
     "aria-busy": loading || undefined,
-    className: cn(Button_module.button, Button_module[variant], Button_module[size], loading && Button_module.loading, className),
+    className: cn(Button_module.button, Button_module[variant], Button_module[size], loading && !disabled && Button_module.loading, className),
     "data-testid": dataTestId?.root,
     ...rest,
     children: [loading ? /*#__PURE__*/jsxRuntime.jsx(IconLoaderCircle.IconLoaderCircle, {

package/dist/cjs/button/Button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.cjs","sources":["../../../src/button/Button.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport { CounterSlot } from '../counter/CounterSlot'\nimport { IconLoaderCircle } from '../icons'\nimport styles from './Button.module.css'\n\nexport type ButtonVariant = 'primary' | 'outline' | 'subtle' | 'ghost' | 'error'\n\nexport type ButtonSize = 'big' | 'small'\n\nexport type ButtonDataTestId = {\n  root?: string\n  iconLeft?: string\n  iconRight?: string\n  content?: string\n  counter?: string\n}\n\nexport type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {\n  variant?: ButtonVariant\n  size?: ButtonSize\n  loading?: boolean\n  iconLeft?: ReactNode\n  iconRight?: ReactNode\n  /** Corner slot, aria-hidden: put the count into `aria-label`. */\n  counter?: ReactNode\n  dataTestId?: ButtonDataTestId\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      children,\n      type = 'button',\n      variant = 'primary',\n      size = 'big',\n      loading = false,\n      disabled = false,\n      iconLeft,\n      iconRight,\n      counter,\n      dataTestId,\n      ...rest\n    },\n    ref,\n  ) => (\n    <button\n      ref={ref}\n      type={type}\n      disabled={disabled || loading}\n      aria-busy={loading || undefined}\n      className={cn(\n        styles.button,\n        styles[variant],\n        styles[size],\n        loading && styles.loading,\n        className,\n      )}\n      data-testid={dataTestId?.root}\n      {...rest}\n    >\n      {loading ? (\n        <IconLoaderCircle className={styles.spinner} aria-hidden='true' />\n      ) : (\n        iconLeft != null && (\n          <span\n            className={styles.icon}\n            aria-hidden='true'\n            data-testid={dataTestId?.iconLeft}\n          >\n            {iconLeft}\n          </span>\n        )\n      )}\n      <span className={styles.content} data-testid={dataTestId?.content}>\n        {children}\n      </span>\n      {!loading && iconRight != null ? (\n        <span\n          className={styles.icon}\n          aria-hidden='true'\n          data-testid={dataTestId?.iconRight}\n        >\n          {iconRight}\n        </span>\n      ) : null}\n      <CounterSlot dataTestId={dataTestId?.counter}>{counter}</CounterSlot>\n    </button>\n  ),\n)\n\nButton.displayName = 'Button'\n"],"names":["Button","forwardRef","_ref","ref","className","children","type","variant","size","loading","disabled","iconLeft","iconRight","counter","dataTestId","rest","_jsxs","undefined","cn","styles","button","root","_jsx","IconLoaderCircle","spinner","icon","content","CounterSlot","displayName"],"mappings":";;;;;;;;;;;AA+BO,MAAMA,MAAM,gBAAGC,gBAAU,CAC9B,CAAAC,IAAA,EAeEC,GAAG,KAAA;EAAA,IAdH;IACEC,SAAS;IACTC,QAAQ;AACRC,IAAAA,IAAI,GAAG,QAAQ;AACfC,IAAAA,OAAO,GAAG,SAAS;AACnBC,IAAAA,IAAI,GAAG,KAAK;AACZC,IAAAA,OAAO,GAAG,KAAK;AACfC,IAAAA,QAAQ,GAAG,KAAK;IAChBC,QAAQ;IACRC,SAAS;IACTC,OAAO;IACPC,UAAU;IACV,GAAGC,IAAAA;AACL,GAAC,GAAAb,IAAA,CAAA;AAAA,EAAA,oBAGDc,eAAA,CAAA,QAAA,EAAA;AACEb,IAAAA,GAAG,EAAEA,GAAI;AACTG,IAAAA,IAAI,EAAEA,IAAK;IACXI,QAAQ,EAAEA,QAAQ,IAAID,OAAQ;IAC9B,WAAWA,EAAAA,OAAO,IAAIQ,SAAU;IAChCb,SAAS,EAAEc,EAAE,CACXC,aAAM,CAACC,MAAM,EACbD,aAAM,CAACZ,OAAO,CAAC,EACfY,aAAM,CAACX,IAAI,CAAC,EACZC,OAAO,IAAIU,aAAM,CAACV,OAAO,EACzBL,SACF,CAAE;IACF,aAAaU,EAAAA,UAAU,EAAEO,IAAK;AAAA,IAAA,GAC1BN,IAAI;AAAAV,IAAAA,QAAA,EAEPI,CAAAA,OAAO,gBACNa,cAAA,CAACC,iCAAgB,EAAA;MAACnB,SAAS,EAAEe,aAAM,CAACK,OAAQ;MAAC,aAAY,EAAA,MAAA;AAAM,KAAE,CAAC,GAElEb,QAAQ,IAAI,IAAI,iBACdW,cAAA,CAAA,MAAA,EAAA;MACElB,SAAS,EAAEe,aAAM,CAACM,IAAK;AACvB,MAAA,aAAA,EAAY,MAAM;MAClB,aAAaX,EAAAA,UAAU,EAAEH,QAAS;AAAAN,MAAAA,QAAA,EAEjCM,QAAAA;KACG,CAET,eACDW,cAAA,CAAA,MAAA,EAAA;MAAMlB,SAAS,EAAEe,aAAM,CAACO,OAAQ;MAAC,aAAaZ,EAAAA,UAAU,EAAEY,OAAQ;AAAArB,MAAAA,QAAA,EAC/DA,QAAAA;KACG,CAAC,EACN,CAACI,OAAO,IAAIG,SAAS,IAAI,IAAI,gBAC5BU,cAAA,CAAA,MAAA,EAAA;MACElB,SAAS,EAAEe,aAAM,CAACM,IAAK;AACvB,MAAA,aAAA,EAAY,MAAM;MAClB,aAAaX,EAAAA,UAAU,EAAEF,SAAU;AAAAP,MAAAA,QAAA,EAElCO,SAAAA;AAAS,KACN,CAAC,GACL,IAAI,eACRU,cAAA,CAACK,uBAAW,EAAA;MAACb,UAAU,EAAEA,UAAU,EAAED,OAAQ;AAAAR,MAAAA,QAAA,EAAEQ,OAAAA;AAAO,KAAc,CAAC,CAAA;AAAA,GAC/D,CAAC,CAAA;AAAA,CAEb,EAAC;AAEDb,MAAM,CAAC4B,WAAW,GAAG,QAAQ;;;;"}
+{"version":3,"file":"Button.cjs","sources":["../../../src/button/Button.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport { CounterSlot } from '../counter/CounterSlot'\nimport { IconLoaderCircle } from '../icons'\nimport styles from './Button.module.css'\n\nexport type ButtonVariant = 'primary' | 'outline' | 'subtle' | 'ghost' | 'error'\n\nexport type ButtonSize = 'big' | 'small'\n\nexport type ButtonDataTestId = {\n  root?: string\n  iconLeft?: string\n  iconRight?: string\n  content?: string\n  counter?: string\n}\n\nexport type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {\n  variant?: ButtonVariant\n  size?: ButtonSize\n  loading?: boolean\n  iconLeft?: ReactNode\n  iconRight?: ReactNode\n  /** Corner slot, aria-hidden: put the count into `aria-label`. */\n  counter?: ReactNode\n  dataTestId?: ButtonDataTestId\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      children,\n      type = 'button',\n      variant = 'primary',\n      size = 'big',\n      loading = false,\n      disabled = false,\n      iconLeft,\n      iconRight,\n      counter,\n      dataTestId,\n      ...rest\n    },\n    ref,\n  ) => (\n    <button\n      ref={ref}\n      type={type}\n      disabled={disabled || loading}\n      aria-busy={loading || undefined}\n      className={cn(\n        styles.button,\n        styles[variant],\n        styles[size],\n        loading && !disabled && styles.loading,\n        className,\n      )}\n      data-testid={dataTestId?.root}\n      {...rest}\n    >\n      {loading ? (\n        <IconLoaderCircle className={styles.spinner} aria-hidden='true' />\n      ) : (\n        iconLeft != null && (\n          <span\n            className={styles.icon}\n            aria-hidden='true'\n            data-testid={dataTestId?.iconLeft}\n          >\n            {iconLeft}\n          </span>\n        )\n      )}\n      <span className={styles.content} data-testid={dataTestId?.content}>\n        {children}\n      </span>\n      {!loading && iconRight != null ? (\n        <span\n          className={styles.icon}\n          aria-hidden='true'\n          data-testid={dataTestId?.iconRight}\n        >\n          {iconRight}\n        </span>\n      ) : null}\n      <CounterSlot dataTestId={dataTestId?.counter}>{counter}</CounterSlot>\n    </button>\n  ),\n)\n\nButton.displayName = 'Button'\n"],"names":["Button","forwardRef","_ref","ref","className","children","type","variant","size","loading","disabled","iconLeft","iconRight","counter","dataTestId","rest","_jsxs","undefined","cn","styles","button","root","_jsx","IconLoaderCircle","spinner","icon","content","CounterSlot","displayName"],"mappings":";;;;;;;;;;;AA+BO,MAAMA,MAAM,gBAAGC,gBAAU,CAC9B,CAAAC,IAAA,EAeEC,GAAG,KAAA;EAAA,IAdH;IACEC,SAAS;IACTC,QAAQ;AACRC,IAAAA,IAAI,GAAG,QAAQ;AACfC,IAAAA,OAAO,GAAG,SAAS;AACnBC,IAAAA,IAAI,GAAG,KAAK;AACZC,IAAAA,OAAO,GAAG,KAAK;AACfC,IAAAA,QAAQ,GAAG,KAAK;IAChBC,QAAQ;IACRC,SAAS;IACTC,OAAO;IACPC,UAAU;IACV,GAAGC,IAAAA;AACL,GAAC,GAAAb,IAAA,CAAA;AAAA,EAAA,oBAGDc,eAAA,CAAA,QAAA,EAAA;AACEb,IAAAA,GAAG,EAAEA,GAAI;AACTG,IAAAA,IAAI,EAAEA,IAAK;IACXI,QAAQ,EAAEA,QAAQ,IAAID,OAAQ;IAC9B,WAAWA,EAAAA,OAAO,IAAIQ,SAAU;IAChCb,SAAS,EAAEc,EAAE,CACXC,aAAM,CAACC,MAAM,EACbD,aAAM,CAACZ,OAAO,CAAC,EACfY,aAAM,CAACX,IAAI,CAAC,EACZC,OAAO,IAAI,CAACC,QAAQ,IAAIS,aAAM,CAACV,OAAO,EACtCL,SACF,CAAE;IACF,aAAaU,EAAAA,UAAU,EAAEO,IAAK;AAAA,IAAA,GAC1BN,IAAI;AAAAV,IAAAA,QAAA,EAEPI,CAAAA,OAAO,gBACNa,cAAA,CAACC,iCAAgB,EAAA;MAACnB,SAAS,EAAEe,aAAM,CAACK,OAAQ;MAAC,aAAY,EAAA,MAAA;AAAM,KAAE,CAAC,GAElEb,QAAQ,IAAI,IAAI,iBACdW,cAAA,CAAA,MAAA,EAAA;MACElB,SAAS,EAAEe,aAAM,CAACM,IAAK;AACvB,MAAA,aAAA,EAAY,MAAM;MAClB,aAAaX,EAAAA,UAAU,EAAEH,QAAS;AAAAN,MAAAA,QAAA,EAEjCM,QAAAA;KACG,CAET,eACDW,cAAA,CAAA,MAAA,EAAA;MAAMlB,SAAS,EAAEe,aAAM,CAACO,OAAQ;MAAC,aAAaZ,EAAAA,UAAU,EAAEY,OAAQ;AAAArB,MAAAA,QAAA,EAC/DA,QAAAA;KACG,CAAC,EACN,CAACI,OAAO,IAAIG,SAAS,IAAI,IAAI,gBAC5BU,cAAA,CAAA,MAAA,EAAA;MACElB,SAAS,EAAEe,aAAM,CAACM,IAAK;AACvB,MAAA,aAAA,EAAY,MAAM;MAClB,aAAaX,EAAAA,UAAU,EAAEF,SAAU;AAAAP,MAAAA,QAAA,EAElCO,SAAAA;AAAS,KACN,CAAC,GACL,IAAI,eACRU,cAAA,CAACK,uBAAW,EAAA;MAACb,UAAU,EAAEA,UAAU,EAAED,OAAQ;AAAAR,MAAAA,QAAA,EAAEQ,OAAAA;AAAO,KAAc,CAAC,CAAA;AAAA,GAC/D,CAAC,CAAA;AAAA,CAEb,EAAC;AAEDb,MAAM,CAAC4B,WAAW,GAAG,QAAQ;;;;"}

package/dist/cjs/button/Button.module.css.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const styles = {"button":"Button-module_button__eiKKZ","content":"Button-module_content__SVjwi","icon":"Button-module_icon__Ojq-e","spinner":"Button-module_spinner__QToZm","spin":"Button-module_spin__Q6mex","big":"Button-module_big__-gJao","small":"Button-module_small__U2Zqq","primary":"Button-module_primary__EU45Z","outline":"Button-module_outline__Jx-Hc","subtle":"Button-module_subtle__2DyRK","ghost":"Button-module_ghost__OX4Ks","error":"Button-module_error__qp2tu","loading":"Button-module_loading__wZ1IR"};
+const styles = {"button":"Button-module_button__eiKKZ","loading":"Button-module_loading__wZ1IR","content":"Button-module_content__SVjwi","icon":"Button-module_icon__Ojq-e","spinner":"Button-module_spinner__QToZm","spin":"Button-module_spin__Q6mex","big":"Button-module_big__-gJao","small":"Button-module_small__U2Zqq","primary":"Button-module_primary__EU45Z","outline":"Button-module_outline__Jx-Hc","subtle":"Button-module_subtle__2DyRK","ghost":"Button-module_ghost__OX4Ks","error":"Button-module_error__qp2tu"};
 
 module.exports = styles;
 //# sourceMappingURL=Button.module.css.cjs.map

package/dist/cjs/copy/Copy.cjs

@@ -0,0 +1,55 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const react = require('react');
+const cn = require('classnames');
+const Copy_module = require('./Copy.module.css.cjs');
+const useCopy = require('./useCopy.cjs');
+const jsxRuntime = require('react/jsx-runtime');
+const IconCopy = require('../icons/components/base/IconCopy.cjs');
+const IconCheck = require('../icons/components/base/IconCheck.cjs');
+
+const Copy = /*#__PURE__*/react.forwardRef((_ref, ref) => {
+  let {
+    text,
+    onCopy,
+    onClick,
+    className,
+    ...rest
+  } = _ref;
+  const {
+    copy,
+    copied
+  } = useCopy.useCopy(text, {
+    onCopy
+  });
+  const handleClick = event => {
+    onClick?.(event);
+    void copy();
+  };
+  return /*#__PURE__*/jsxRuntime.jsx("button", {
+    ref: ref,
+    type: "button",
+    "aria-label": copied ? 'Copied' : 'Copy',
+    "data-copied": copied || undefined,
+    className: cn(Copy_module.root, className),
+    onClick: handleClick,
+    ...rest,
+    children: /*#__PURE__*/jsxRuntime.jsxs("span", {
+      className: Copy_module.icon,
+      "aria-hidden": "true",
+      children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+        className: cn(Copy_module.glyph, Copy_module.idle),
+        children: /*#__PURE__*/jsxRuntime.jsx(IconCopy.IconCopy, {})
+      }), /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: cn(Copy_module.glyph, Copy_module.done),
+        children: /*#__PURE__*/jsxRuntime.jsx(IconCheck.IconCheck, {})
+      })]
+    })
+  });
+});
+Copy.displayName = 'Copy';
+
+exports.Copy = Copy;
+//# sourceMappingURL=Copy.cjs.map

package/dist/cjs/copy/Copy.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Copy.cjs","sources":["../../../src/copy/Copy.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type ComponentPropsWithoutRef,\n  type MouseEvent,\n} from 'react'\n\nimport cn from 'classnames'\n\nimport { IconCheck, IconCopy } from '../icons'\nimport styles from './Copy.module.css'\nimport { useCopy } from './useCopy'\n\nexport type CopyProps = Omit<ComponentPropsWithoutRef<'button'>, 'children'> & {\n  text: string\n  onCopy?: () => void\n}\n\nexport const Copy = forwardRef<HTMLButtonElement, CopyProps>(\n  ({ text, onCopy, onClick, className, ...rest }, ref) => {\n    const { copy, copied } = useCopy(text, { onCopy })\n\n    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n      onClick?.(event)\n      void copy()\n    }\n\n    return (\n      <button\n        ref={ref}\n        type='button'\n        aria-label={copied ? 'Copied' : 'Copy'}\n        data-copied={copied || undefined}\n        className={cn(styles.root, className)}\n        onClick={handleClick}\n        {...rest}\n      >\n        <span className={styles.icon} aria-hidden='true'>\n          <span className={cn(styles.glyph, styles.idle)}>\n            <IconCopy />\n          </span>\n          <span className={cn(styles.glyph, styles.done)}>\n            <IconCheck />\n          </span>\n        </span>\n      </button>\n    )\n  },\n)\n\nCopy.displayName = 'Copy'\n"],"names":["Copy","forwardRef","_ref","ref","text","onCopy","onClick","className","rest","copy","copied","useCopy","handleClick","event","_jsx","type","undefined","cn","styles","root","children","_jsxs","icon","glyph","idle","IconCopy","done","IconCheck","displayName"],"mappings":";;;;;;;;;;;;AAiBO,MAAMA,IAAI,gBAAGC,gBAAU,CAC5B,CAAAC,IAAA,EAAgDC,GAAG,KAAK;EAAA,IAAvD;IAAEC,IAAI;IAAEC,MAAM;IAAEC,OAAO;IAAEC,SAAS;IAAE,GAAGC,IAAAA;AAAK,GAAC,GAAAN,IAAA,CAAA;EAC5C,MAAM;IAAEO,IAAI;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAGC,eAAO,CAACP,IAAI,EAAE;AAAEC,IAAAA,MAAAA;AAAO,GAAC,CAAC,CAAA;EAElD,MAAMO,WAAW,GAAIC,KAAoC,IAAK;IAC5DP,OAAO,GAAGO,KAAK,CAAC,CAAA;IAChB,KAAKJ,IAAI,EAAE,CAAA;GACZ,CAAA;AAED,EAAA,oBACEK,cAAA,CAAA,QAAA,EAAA;AACEX,IAAAA,GAAG,EAAEA,GAAI;AACTY,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,YAAA,EAAYL,MAAM,GAAG,QAAQ,GAAG,MAAO;IACvC,aAAaA,EAAAA,MAAM,IAAIM,SAAU;IACjCT,SAAS,EAAEU,EAAE,CAACC,WAAM,CAACC,IAAI,EAAEZ,SAAS,CAAE;AACtCD,IAAAA,OAAO,EAAEM,WAAY;AAAA,IAAA,GACjBJ,IAAI;AAAAY,IAAAA,QAAA,eAERC,eAAA,CAAA,MAAA,EAAA;MAAMd,SAAS,EAAEW,WAAM,CAACI,IAAK;AAAC,MAAA,aAAA,EAAY,MAAM;AAAAF,MAAAA,QAAA,gBAC9CN,cAAA,CAAA,MAAA,EAAA;QAAMP,SAAS,EAAEU,EAAE,CAACC,WAAM,CAACK,KAAK,EAAEL,WAAM,CAACM,IAAI,CAAE;AAAAJ,QAAAA,QAAA,eAC7CN,cAAA,CAACW,iBAAQ,EAAE,EAAA,CAAA;OACP,CAAC,eACPX,cAAA,CAAA,MAAA,EAAA;QAAMP,SAAS,EAAEU,EAAE,CAACC,WAAM,CAACK,KAAK,EAAEL,WAAM,CAACQ,IAAI,CAAE;AAAAN,QAAAA,QAAA,eAC7CN,cAAA,CAACa,mBAAS,EAAE,EAAA,CAAA;AAAC,OACT,CAAC,CAAA;KACH,CAAA;AAAC,GACD,CAAC,CAAA;AAEb,CACF,EAAC;AAED3B,IAAI,CAAC4B,WAAW,GAAG,MAAM;;;;"}

package/dist/cjs/copy/Copy.module.css.cjs

@@ -0,0 +1,6 @@
+'use strict';
+
+const styles = {"root":"Copy-module_root__LWKJ9","icon":"Copy-module_icon__MjYMv","glyph":"Copy-module_glyph__MJNUb","done":"Copy-module_done__wizRt","idle":"Copy-module_idle__MQyyS"};
+
+module.exports = styles;
+//# sourceMappingURL=Copy.module.css.cjs.map

package/dist/cjs/copy/Copy.module.css.cjs.map

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

package/dist/cjs/copy/useCopy.cjs

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const react = require('react');
+
+const useCopy = function (text) {
+  let {
+    onCopy,
+    timeout = 1000
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const [copied, setCopied] = react.useState(false);
+  const timerRef = react.useRef();
+  react.useEffect(() => () => clearTimeout(timerRef.current), []);
+  const copy = react.useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+    } catch {
+      return;
+    }
+    clearTimeout(timerRef.current);
+    setCopied(true);
+    onCopy?.();
+    timerRef.current = setTimeout(() => setCopied(false), timeout);
+  }, [text, onCopy, timeout]);
+  return {
+    copy,
+    copied
+  };
+};
+
+exports.useCopy = useCopy;
+//# sourceMappingURL=useCopy.cjs.map

package/dist/cjs/copy/useCopy.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCopy.cjs","sources":["../../../src/copy/useCopy.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react'\n\nexport type UseCopyOptions = {\n  onCopy?: () => void\n  timeout?: number\n}\n\nexport const useCopy = (\n  text: string,\n  { onCopy, timeout = 1000 }: UseCopyOptions = {},\n) => {\n  const [copied, setCopied] = useState(false)\n  const timerRef = useRef<ReturnType<typeof setTimeout>>()\n\n  useEffect(() => () => clearTimeout(timerRef.current), [])\n\n  const copy = useCallback(async () => {\n    try {\n      await navigator.clipboard.writeText(text)\n    } catch {\n      return\n    }\n\n    clearTimeout(timerRef.current)\n    setCopied(true)\n    onCopy?.()\n    timerRef.current = setTimeout(() => setCopied(false), timeout)\n  }, [text, onCopy, timeout])\n\n  return { copy, copied }\n}\n"],"names":["useCopy","text","onCopy","timeout","arguments","length","undefined","copied","setCopied","useState","timerRef","useRef","useEffect","clearTimeout","current","copy","useCallback","navigator","clipboard","writeText","setTimeout"],"mappings":";;;;;;MAOaA,OAAO,GAAG,UACrBC,IAAY,EAET;EAAA,IADH;IAAEC,MAAM;AAAEC,IAAAA,OAAO,GAAG,IAAA;AAAqB,GAAC,GAAAC,SAAA,CAAAC,MAAA,GAAAD,CAAAA,IAAAA,SAAA,CAAAE,CAAAA,CAAAA,KAAAA,SAAA,GAAAF,SAAA,CAAG,CAAA,CAAA,GAAA,EAAE,CAAA;EAE/C,MAAM,CAACG,MAAM,EAAEC,SAAS,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC,CAAA;AAC3C,EAAA,MAAMC,QAAQ,GAAGC,YAAM,EAAiC,CAAA;EAExDC,eAAS,CAAC,MAAM,MAAMC,YAAY,CAACH,QAAQ,CAACI,OAAO,CAAC,EAAE,EAAE,CAAC,CAAA;AAEzD,EAAA,MAAMC,IAAI,GAAGC,iBAAW,CAAC,YAAY;IACnC,IAAI;AACF,MAAA,MAAMC,SAAS,CAACC,SAAS,CAACC,SAAS,CAAClB,IAAI,CAAC,CAAA;AAC3C,KAAC,CAAC,MAAM;AACN,MAAA,OAAA;AACF,KAAA;AAEAY,IAAAA,YAAY,CAACH,QAAQ,CAACI,OAAO,CAAC,CAAA;IAC9BN,SAAS,CAAC,IAAI,CAAC,CAAA;AACfN,IAAAA,MAAM,IAAI,CAAA;AACVQ,IAAAA,QAAQ,CAACI,OAAO,GAAGM,UAAU,CAAC,MAAMZ,SAAS,CAAC,KAAK,CAAC,EAAEL,OAAO,CAAC,CAAA;GAC/D,EAAE,CAACF,IAAI,EAAEC,MAAM,EAAEC,OAAO,CAAC,CAAC,CAAA;EAE3B,OAAO;IAAEY,IAAI;AAAER,IAAAA,MAAAA;GAAQ,CAAA;AACzB;;;;"}

package/dist/cjs/data-list/DataList.module.css.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const styles = {"card":"DataList-module_card__k21RE","divided":"DataList-module_divided__y48ZD","row":"DataList-module_row__d5UUl","mainRow":"DataList-module_mainRow__eAAA3","labelGroup":"DataList-module_labelGroup__-vCWZ","leadingIcon":"DataList-module_leadingIcon__6L9A9","label":"DataList-module_label__xl6By","info":"DataList-module_info__TF2HU","infoIcon":"DataList-module_infoIcon__czTXh","infoFaint":"DataList-module_infoFaint__lq3WZ","value":"DataList-module_value__oGp7D","valueOld":"DataList-module_valueOld__FuEV2","valueArrow":"DataList-module_valueArrow__7RRSA","descriptionRow":"DataList-module_descriptionRow__oZCWf","description":"DataList-module_description__biMHO","descriptionIcon":"DataList-module_descriptionIcon__pS1MU"};
+const styles = {"card":"DataList-module_card__k21RE","divided":"DataList-module_divided__y48ZD","row":"DataList-module_row__d5UUl","mainRow":"DataList-module_mainRow__eAAA3","labelGroup":"DataList-module_labelGroup__-vCWZ","leadingIcon":"DataList-module_leadingIcon__6L9A9","label":"DataList-module_label__xl6By","infoFaint":"DataList-module_infoFaint__lq3WZ","value":"DataList-module_value__oGp7D","valueOld":"DataList-module_valueOld__FuEV2","valueArrow":"DataList-module_valueArrow__7RRSA","descriptionRow":"DataList-module_descriptionRow__oZCWf","description":"DataList-module_description__biMHO"};
 
 module.exports = styles;
 //# sourceMappingURL=DataList.module.css.cjs.map

package/dist/cjs/data-list/DataListRow.cjs

@@ -5,8 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const cn = require('classnames');
 const DataList_module = require('./DataList.module.css.cjs');
 const jsxRuntime = require('react/jsx-runtime');
-const Tooltip = require('../tooltip/Tooltip.cjs');
-const IconInfo = require('../icons/components/base/IconInfo.cjs');
+const InfoTooltip = require('../info-tooltip/InfoTooltip.cjs');
 
 const isChangeValue = value => typeof value === 'object' && value !== null && 'from' in value && 'to' in value;
 const DataListRow = _ref => {
@@ -38,12 +37,9 @@ const DataListRow = _ref => {
           className: DataList_module.label,
           "data-testid": dataTestId?.label,
           children: label
-        }), info ? /*#__PURE__*/jsxRuntime.jsx(Tooltip.Tooltip, {
+        }), info ? /*#__PURE__*/jsxRuntime.jsx(InfoTooltip.InfoTooltip, {
           content: info,
-          className: cn(DataList_module.info, infoFaint && DataList_module.infoFaint),
-          children: /*#__PURE__*/jsxRuntime.jsx(IconInfo.IconInfo, {
-            className: DataList_module.infoIcon
-          })
+          className: cn(infoFaint && DataList_module.infoFaint)
         }) : null]
       }), isChangeValue(value) ? /*#__PURE__*/jsxRuntime.jsxs("span", {
         className: DataList_module.value,
@@ -69,12 +65,9 @@ const DataListRow = _ref => {
         className: DataList_module.description,
         "data-testid": dataTestId?.description,
         children: description
-      }), descriptionInfo ? /*#__PURE__*/jsxRuntime.jsx(Tooltip.Tooltip, {
+      }), descriptionInfo ? /*#__PURE__*/jsxRuntime.jsx(InfoTooltip.InfoTooltip, {
         content: descriptionInfo,
-        className: DataList_module.info,
-        children: /*#__PURE__*/jsxRuntime.jsx(IconInfo.IconInfo, {
-          className: DataList_module.descriptionIcon
-        })
+        tone: "tertiary"
       }) : null]
     }) : null]
   });

package/dist/cjs/data-list/DataListRow.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DataListRow.cjs","sources":["../../../src/data-list/DataListRow.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react'\n\nimport { IconInfo } from '../icons'\nimport cn from 'classnames'\nimport { Tooltip } from '../tooltip'\n\nimport styles from './DataList.module.css'\n\nexport type DetailRowValue = ReactNode | { from: ReactNode; to: ReactNode }\n\nexport type DataListRowDataTestId = {\n  root?: string\n  label?: string\n  value?: string\n  icon?: string\n  description?: string\n}\n\nexport type DetailRowProps = ComponentPropsWithoutRef<'div'> & {\n  label: ReactNode\n  value: DetailRowValue\n  icon?: ReactNode\n  info?: ReactNode\n  infoFaint?: boolean\n  description?: ReactNode\n  descriptionInfo?: ReactNode\n  dataTestId?: DataListRowDataTestId\n}\n\nconst isChangeValue = (\n  value: DetailRowValue,\n): value is { from: ReactNode; to: ReactNode } =>\n  typeof value === 'object' &&\n  value !== null &&\n  'from' in value &&\n  'to' in value\n\nexport const DataListRow = ({\n  label,\n  value,\n  icon,\n  info,\n  infoFaint = false,\n  description,\n  descriptionInfo,\n  className,\n  dataTestId,\n  ...rest\n}: DetailRowProps) => (\n  <div\n    className={cn(styles.row, className)}\n    data-testid={dataTestId?.root}\n    {...rest}\n  >\n    <span className={styles.mainRow}>\n      <span className={styles.labelGroup}>\n        {icon ? (\n          <span className={styles.leadingIcon} data-testid={dataTestId?.icon}>\n            {icon}\n          </span>\n        ) : null}\n        <span className={styles.label} data-testid={dataTestId?.label}>\n          {label}\n        </span>\n        {info ? (\n          <Tooltip\n            content={info}\n            className={cn(styles.info, infoFaint && styles.infoFaint)}\n          >\n            <IconInfo className={styles.infoIcon} />\n          </Tooltip>\n        ) : null}\n      </span>\n      {isChangeValue(value) ? (\n        <span className={styles.value} data-testid={dataTestId?.value}>\n          <span className={styles.valueOld}>{value.from}</span>\n          <span className={styles.valueArrow} aria-hidden='true'>\n            →\n          </span>\n          <span>{value.to}</span>\n        </span>\n      ) : (\n        <span className={styles.value} data-testid={dataTestId?.value}>\n          {value}\n        </span>\n      )}\n    </span>\n    {description ? (\n      <span className={styles.descriptionRow}>\n        <span\n          className={styles.description}\n          data-testid={dataTestId?.description}\n        >\n          {description}\n        </span>\n        {descriptionInfo ? (\n          <Tooltip content={descriptionInfo} className={styles.info}>\n            <IconInfo className={styles.descriptionIcon} />\n          </Tooltip>\n        ) : null}\n      </span>\n    ) : null}\n  </div>\n)\n"],"names":["isChangeValue","value","DataListRow","_ref","label","icon","info","infoFaint","description","descriptionInfo","className","dataTestId","rest","_jsxs","cn","styles","row","root","children","mainRow","labelGroup","_jsx","leadingIcon","Tooltip","content","IconInfo","infoIcon","valueOld","from","valueArrow","to","descriptionRow","descriptionIcon"],"mappings":"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"}
+{"version":3,"file":"DataListRow.cjs","sources":["../../../src/data-list/DataListRow.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react'\n\nimport cn from 'classnames'\nimport { InfoTooltip } from '../info-tooltip'\n\nimport styles from './DataList.module.css'\n\nexport type DetailRowValue = ReactNode | { from: ReactNode; to: ReactNode }\n\nexport type DataListRowDataTestId = {\n  root?: string\n  label?: string\n  value?: string\n  icon?: string\n  description?: string\n}\n\nexport type DetailRowProps = ComponentPropsWithoutRef<'div'> & {\n  label: ReactNode\n  value: DetailRowValue\n  icon?: ReactNode\n  info?: ReactNode\n  infoFaint?: boolean\n  description?: ReactNode\n  descriptionInfo?: ReactNode\n  dataTestId?: DataListRowDataTestId\n}\n\nconst isChangeValue = (\n  value: DetailRowValue,\n): value is { from: ReactNode; to: ReactNode } =>\n  typeof value === 'object' &&\n  value !== null &&\n  'from' in value &&\n  'to' in value\n\nexport const DataListRow = ({\n  label,\n  value,\n  icon,\n  info,\n  infoFaint = false,\n  description,\n  descriptionInfo,\n  className,\n  dataTestId,\n  ...rest\n}: DetailRowProps) => (\n  <div\n    className={cn(styles.row, className)}\n    data-testid={dataTestId?.root}\n    {...rest}\n  >\n    <span className={styles.mainRow}>\n      <span className={styles.labelGroup}>\n        {icon ? (\n          <span className={styles.leadingIcon} data-testid={dataTestId?.icon}>\n            {icon}\n          </span>\n        ) : null}\n        <span className={styles.label} data-testid={dataTestId?.label}>\n          {label}\n        </span>\n        {info ? (\n          <InfoTooltip\n            content={info}\n            className={cn(infoFaint && styles.infoFaint)}\n          />\n        ) : null}\n      </span>\n      {isChangeValue(value) ? (\n        <span className={styles.value} data-testid={dataTestId?.value}>\n          <span className={styles.valueOld}>{value.from}</span>\n          <span className={styles.valueArrow} aria-hidden='true'>\n            →\n          </span>\n          <span>{value.to}</span>\n        </span>\n      ) : (\n        <span className={styles.value} data-testid={dataTestId?.value}>\n          {value}\n        </span>\n      )}\n    </span>\n    {description ? (\n      <span className={styles.descriptionRow}>\n        <span\n          className={styles.description}\n          data-testid={dataTestId?.description}\n        >\n          {description}\n        </span>\n        {descriptionInfo ? (\n          <InfoTooltip content={descriptionInfo} tone='tertiary' />\n        ) : null}\n      </span>\n    ) : null}\n  </div>\n)\n"],"names":["isChangeValue","value","DataListRow","_ref","label","icon","info","infoFaint","description","descriptionInfo","className","dataTestId","rest","_jsxs","cn","styles","row","root","children","mainRow","labelGroup","_jsx","leadingIcon","InfoTooltip","content","valueOld","from","valueArrow","to","descriptionRow","tone"],"mappings":"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"}

package/dist/cjs/hex/Hex.cjs

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const react = require('react');
+const cn = require('classnames');
+const Hex_module = require('./Hex.module.css.cjs');
+const trimHex = require('./trimHex.cjs');
+const jsxRuntime = require('react/jsx-runtime');
+
+const Hex = /*#__PURE__*/react.forwardRef((_ref, ref) => {
+  let {
+    value,
+    symbols = 4,
+    title,
+    className,
+    ...rest
+  } = _ref;
+  const text = trimHex.trimHex(value, symbols);
+  const trimmed = text !== value;
+  return /*#__PURE__*/jsxRuntime.jsx("span", {
+    ref: ref,
+    title: (title ?? (trimmed ? value : undefined)) || undefined,
+    className: cn(trimmed ? Hex_module.root : Hex_module.full, className),
+    ...rest,
+    children: trimmed ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+        "aria-hidden": "true",
+        className: Hex_module.overlay,
+        children: value
+      }), /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: Hex_module.text,
+        children: text
+      })]
+    }) : text
+  });
+});
+Hex.displayName = 'Hex';
+
+exports.Hex = Hex;
+//# sourceMappingURL=Hex.cjs.map

package/dist/cjs/hex/Hex.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Hex.cjs","sources":["../../../src/hex/Hex.tsx"],"sourcesContent":["import { forwardRef, type ComponentPropsWithoutRef } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './Hex.module.css'\nimport { trimHex } from './trimHex'\n\n// Title defaults to the full value only when trimmed; an empty title opts out.\nexport type HexProps = Omit<ComponentPropsWithoutRef<'span'>, 'children'> & {\n  value: string\n  symbols?: number\n}\n\nexport const Hex = forwardRef<HTMLSpanElement, HexProps>(\n  ({ value, symbols = 4, title, className, ...rest }, ref) => {\n    const text = trimHex(value, symbols)\n    const trimmed = text !== value\n\n    return (\n      <span\n        ref={ref}\n        title={(title ?? (trimmed ? value : undefined)) || undefined}\n        className={cn(trimmed ? styles.root : styles.full, className)}\n        {...rest}\n      >\n        {trimmed ? (\n          <>\n            <span aria-hidden='true' className={styles.overlay}>\n              {value}\n            </span>\n            <span className={styles.text}>{text}</span>\n          </>\n        ) : (\n          text\n        )}\n      </span>\n    )\n  },\n)\n\nHex.displayName = 'Hex'\n"],"names":["Hex","forwardRef","_ref","ref","value","symbols","title","className","rest","text","trimHex","trimmed","_jsx","undefined","cn","styles","root","full","children","_jsxs","_Fragment","overlay","displayName"],"mappings":";;;;;;;;;;AAaO,MAAMA,GAAG,gBAAGC,gBAAU,CAC3B,CAAAC,IAAA,EAAoDC,GAAG,KAAK;EAAA,IAA3D;IAAEC,KAAK;AAAEC,IAAAA,OAAO,GAAG,CAAC;IAAEC,KAAK;IAAEC,SAAS;IAAE,GAAGC,IAAAA;AAAK,GAAC,GAAAN,IAAA,CAAA;AAChD,EAAA,MAAMO,IAAI,GAAGC,eAAO,CAACN,KAAK,EAAEC,OAAO,CAAC,CAAA;AACpC,EAAA,MAAMM,OAAO,GAAGF,IAAI,KAAKL,KAAK,CAAA;AAE9B,EAAA,oBACEQ,cAAA,CAAA,MAAA,EAAA;AACET,IAAAA,GAAG,EAAEA,GAAI;IACTG,KAAK,EAAE,CAACA,KAAK,KAAKK,OAAO,GAAGP,KAAK,GAAGS,SAAS,CAAC,KAAKA,SAAU;AAC7DN,IAAAA,SAAS,EAAEO,EAAE,CAACH,OAAO,GAAGI,UAAM,CAACC,IAAI,GAAGD,UAAM,CAACE,IAAI,EAAEV,SAAS,CAAE;AAAA,IAAA,GAC1DC,IAAI;AAAAU,IAAAA,QAAA,EAEPP,OAAO,gBACNQ,eAAA,CAAAC,mBAAA,EAAA;AAAAF,MAAAA,QAAA,gBACEN,cAAA,CAAA,MAAA,EAAA;AAAM,QAAA,aAAA,EAAY,MAAM;QAACL,SAAS,EAAEQ,UAAM,CAACM,OAAQ;AAAAH,QAAAA,QAAA,EAChDd,KAAAA;OACG,CAAC,eACPQ,cAAA,CAAA,MAAA,EAAA;QAAML,SAAS,EAAEQ,UAAM,CAACN,IAAK;AAAAS,QAAAA,QAAA,EAAET,IAAAA;AAAI,OAAO,CAAC,CAAA;AAAA,KAC3C,CAAC,GAEHA,IAAAA;AACD,GACG,CAAC,CAAA;AAEX,CACF,EAAC;AAEDT,GAAG,CAACsB,WAAW,GAAG,KAAK;;;;"}

package/dist/cjs/hex/Hex.module.css.cjs

@@ -0,0 +1,6 @@
+'use strict';
+
+const styles = {"root":"Hex-module_root__HswaZ","overlay":"Hex-module_overlay__ut9QP","text":"Hex-module_text__cQirb","full":"Hex-module_full__8Nr7J"};
+
+module.exports = styles;
+//# sourceMappingURL=Hex.module.css.cjs.map

package/dist/cjs/hex/Hex.module.css.cjs.map

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

package/dist/cjs/hex/trimHex.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const ELLIPSIS = '...';
+const trimHex = (value, symbols) => {
+  if (symbols <= 0) return value;
+  const prefix = value.startsWith('0x') ? '0x' : '';
+  const body = value.slice(prefix.length);
+  if (body.length - symbols * 2 <= ELLIPSIS.length) return value;
+  return `${prefix}${body.slice(0, symbols)}${ELLIPSIS}${body.slice(-symbols)}`;
+};
+
+exports.trimHex = trimHex;
+//# sourceMappingURL=trimHex.cjs.map

package/dist/cjs/hex/trimHex.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"trimHex.cjs","sources":["../../../src/hex/trimHex.ts"],"sourcesContent":["const ELLIPSIS = '...'\n\nexport const trimHex = (value: string, symbols: number): string => {\n  if (symbols <= 0) return value\n\n  const prefix = value.startsWith('0x') ? '0x' : ''\n  const body = value.slice(prefix.length)\n  if (body.length - symbols * 2 <= ELLIPSIS.length) return value\n\n  return `${prefix}${body.slice(0, symbols)}${ELLIPSIS}${body.slice(-symbols)}`\n}\n"],"names":["ELLIPSIS","trimHex","value","symbols","prefix","startsWith","body","slice","length"],"mappings":";;;;AAAA,MAAMA,QAAQ,GAAG,KAAK,CAAA;MAETC,OAAO,GAAGA,CAACC,KAAa,EAAEC,OAAe,KAAa;AACjE,EAAA,IAAIA,OAAO,IAAI,CAAC,EAAE,OAAOD,KAAK,CAAA;EAE9B,MAAME,MAAM,GAAGF,KAAK,CAACG,UAAU,CAAC,IAAI,CAAC,GAAG,IAAI,GAAG,EAAE,CAAA;EACjD,MAAMC,IAAI,GAAGJ,KAAK,CAACK,KAAK,CAACH,MAAM,CAACI,MAAM,CAAC,CAAA;AACvC,EAAA,IAAIF,IAAI,CAACE,MAAM,GAAGL,OAAO,GAAG,CAAC,IAAIH,QAAQ,CAACQ,MAAM,EAAE,OAAON,KAAK,CAAA;EAE9D,OAAO,CAAA,EAAGE,MAAM,CAAGE,EAAAA,IAAI,CAACC,KAAK,CAAC,CAAC,EAAEJ,OAAO,CAAC,CAAGH,EAAAA,QAAQ,GAAGM,IAAI,CAACC,KAAK,CAAC,CAACJ,OAAO,CAAC,CAAE,CAAA,CAAA;AAC/E;;;;"}

package/dist/cjs/icon-button/CloseButton.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const react = require('react');
+const IconButton = require('./IconButton.cjs');
+const jsxRuntime = require('react/jsx-runtime');
+const IconCross = require('../icons/components/base/IconCross.cjs');
+
+/** Ghost `IconButton` with a cross icon; `aria-label` defaults to "Close". */
+const CloseButton = /*#__PURE__*/react.forwardRef((_ref, ref) => {
+  let {
+    'aria-label': ariaLabel = 'Close',
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/jsxRuntime.jsx(IconButton.IconButton, {
+    ref: ref,
+    variant: "ghost",
+    icon: /*#__PURE__*/jsxRuntime.jsx(IconCross.IconCross, {}),
+    "aria-label": ariaLabel,
+    ...rest
+  });
+});
+CloseButton.displayName = 'CloseButton';
+
+exports.CloseButton = CloseButton;
+//# sourceMappingURL=CloseButton.cjs.map

package/dist/cjs/icon-button/CloseButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CloseButton.cjs","sources":["../../../src/icon-button/CloseButton.tsx"],"sourcesContent":["import { forwardRef } from 'react'\n\nimport { IconCross } from '../icons'\nimport { IconButton, type IconButtonProps } from './IconButton'\n\nexport type CloseButtonProps = Omit<\n  IconButtonProps,\n  'icon' | 'variant' | 'aria-label'\n> & { 'aria-label'?: string }\n\n/** Ghost `IconButton` with a cross icon; `aria-label` defaults to \"Close\". */\nexport const CloseButton = forwardRef<HTMLButtonElement, CloseButtonProps>(\n  ({ 'aria-label': ariaLabel = 'Close', ...rest }, ref) => (\n    <IconButton\n      ref={ref}\n      variant='ghost'\n      icon={<IconCross />}\n      aria-label={ariaLabel}\n      {...rest}\n    />\n  ),\n)\n\nCloseButton.displayName = 'CloseButton'\n"],"names":["CloseButton","forwardRef","_ref","ref","ariaLabel","rest","_jsx","IconButton","variant","icon","IconCross","displayName"],"mappings":";;;;;;;;;AAUA;AACO,MAAMA,WAAW,gBAAGC,gBAAU,CACnC,CAAAC,IAAA,EAAiDC,GAAG,KAAA;EAAA,IAAnD;IAAE,YAAY,EAAEC,SAAS,GAAG,OAAO;IAAE,GAAGC,IAAAA;AAAK,GAAC,GAAAH,IAAA,CAAA;EAAA,oBAC7CI,cAAA,CAACC,qBAAU,EAAA;AACTJ,IAAAA,GAAG,EAAEA,GAAI;AACTK,IAAAA,OAAO,EAAC,OAAO;AACfC,IAAAA,IAAI,eAAEH,cAAA,CAACI,mBAAS,IAAE,CAAE;AACpB,IAAA,YAAA,EAAYN,SAAU;IAAA,GAClBC,IAAAA;AAAI,GACT,CAAC,CAAA;AAAA,CAEN,EAAC;AAEDL,WAAW,CAACW,WAAW,GAAG,aAAa;;;;"}

package/dist/cjs/icon-button/IconButton.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const react = require('react');
 const cn = require('classnames');
 const CounterSlot = require('../counter/CounterSlot.cjs');
+const surface_module = require('../utils/surface.module.css.cjs');
 const IconButton_module = require('./IconButton.module.css.cjs');
 const jsxRuntime = require('react/jsx-runtime');
 const IconLoaderCircle = require('../icons/components/base/IconLoaderCircle.cjs');
@@ -26,7 +27,7 @@ const IconButton = /*#__PURE__*/react.forwardRef((_ref, ref) => {
     type: type,
     disabled: disabled || loading,
     "aria-busy": loading || undefined,
-    className: cn(IconButton_module.button, IconButton_module[variant], loading && IconButton_module.loading, className),
+    className: cn(IconButton_module.button, IconButton_module[variant], variant === 'surface' && surface_module.surface, loading && !disabled && IconButton_module.loading, className),
     "data-testid": dataTestId?.root,
     ...rest,
     children: [loading ? /*#__PURE__*/jsxRuntime.jsx(IconLoaderCircle.IconLoaderCircle, {

package/dist/cjs/icon-button/IconButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.cjs","sources":["../../../src/icon-button/IconButton.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport { CounterSlot } from '../counter/CounterSlot'\nimport { IconLoaderCircle } from '../icons'\nimport styles from './IconButton.module.css'\n\nexport type IconButtonVariant = 'outline' | 'ghost' | 'surface'\n\nexport type IconButtonDataTestId = {\n  root?: string\n  icon?: string\n  counter?: string\n}\n\nexport type IconButtonProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'aria-label'\n> & {\n  'aria-label': string\n  icon: ReactNode\n  variant?: IconButtonVariant\n  loading?: boolean\n  /** Corner slot, aria-hidden: put the count into `aria-label`. */\n  counter?: ReactNode\n  dataTestId?: IconButtonDataTestId\n}\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    {\n      className,\n      type = 'button',\n      variant = 'outline',\n      loading = false,\n      disabled = false,\n      icon,\n      counter,\n      dataTestId,\n      ...rest\n    },\n    ref,\n  ) => (\n    <button\n      ref={ref}\n      type={type}\n      disabled={disabled || loading}\n      aria-busy={loading || undefined}\n      className={cn(\n        styles.button,\n        styles[variant],\n        loading && styles.loading,\n        className,\n      )}\n      data-testid={dataTestId?.root}\n      {...rest}\n    >\n      {loading ? (\n        <IconLoaderCircle className={styles.spinner} aria-hidden='true' />\n      ) : (\n        <span\n          className={styles.icon}\n          aria-hidden='true'\n          data-testid={dataTestId?.icon}\n        >\n          {icon}\n        </span>\n      )}\n      <CounterSlot dataTestId={dataTestId?.counter}>{counter}</CounterSlot>\n    </button>\n  ),\n)\n\nIconButton.displayName = 'IconButton'\n"],"names":["IconButton","forwardRef","_ref","ref","className","type","variant","loading","disabled","icon","counter","dataTestId","rest","_jsxs","undefined","cn","styles","button","root","children","_jsx","IconLoaderCircle","spinner","CounterSlot","displayName"],"mappings":";;;;;;;;;;;AA6BO,MAAMA,UAAU,gBAAGC,gBAAU,CAClC,CAAAC,IAAA,EAYEC,GAAG,KAAA;EAAA,IAXH;IACEC,SAAS;AACTC,IAAAA,IAAI,GAAG,QAAQ;AACfC,IAAAA,OAAO,GAAG,SAAS;AACnBC,IAAAA,OAAO,GAAG,KAAK;AACfC,IAAAA,QAAQ,GAAG,KAAK;IAChBC,IAAI;IACJC,OAAO;IACPC,UAAU;IACV,GAAGC,IAAAA;AACL,GAAC,GAAAV,IAAA,CAAA;AAAA,EAAA,oBAGDW,eAAA,CAAA,QAAA,EAAA;AACEV,IAAAA,GAAG,EAAEA,GAAI;AACTE,IAAAA,IAAI,EAAEA,IAAK;IACXG,QAAQ,EAAEA,QAAQ,IAAID,OAAQ;IAC9B,WAAWA,EAAAA,OAAO,IAAIO,SAAU;AAChCV,IAAAA,SAAS,EAAEW,EAAE,CACXC,iBAAM,CAACC,MAAM,EACbD,iBAAM,CAACV,OAAO,CAAC,EACfC,OAAO,IAAIS,iBAAM,CAACT,OAAO,EACzBH,SACF,CAAE;IACF,aAAaO,EAAAA,UAAU,EAAEO,IAAK;AAAA,IAAA,GAC1BN,IAAI;AAAAO,IAAAA,QAAA,EAEPZ,CAAAA,OAAO,gBACNa,cAAA,CAACC,iCAAgB,EAAA;MAACjB,SAAS,EAAEY,iBAAM,CAACM,OAAQ;MAAC,aAAY,EAAA,MAAA;KAAQ,CAAC,gBAElEF,cAAA,CAAA,MAAA,EAAA;MACEhB,SAAS,EAAEY,iBAAM,CAACP,IAAK;AACvB,MAAA,aAAA,EAAY,MAAM;MAClB,aAAaE,EAAAA,UAAU,EAAEF,IAAK;AAAAU,MAAAA,QAAA,EAE7BV,IAAAA;AAAI,KACD,CACP,eACDW,cAAA,CAACG,uBAAW,EAAA;MAACZ,UAAU,EAAEA,UAAU,EAAED,OAAQ;AAAAS,MAAAA,QAAA,EAAET,OAAAA;AAAO,KAAc,CAAC,CAAA;AAAA,GAC/D,CAAC,CAAA;AAAA,CAEb,EAAC;AAEDV,UAAU,CAACwB,WAAW,GAAG,YAAY;;;;"}
+{"version":3,"file":"IconButton.cjs","sources":["../../../src/icon-button/IconButton.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport { CounterSlot } from '../counter/CounterSlot'\nimport { IconLoaderCircle } from '../icons'\nimport surfaceStyles from '../utils/surface.module.css'\nimport styles from './IconButton.module.css'\n\nexport type IconButtonVariant = 'outline' | 'ghost' | 'surface'\n\nexport type IconButtonDataTestId = {\n  root?: string\n  icon?: string\n  counter?: string\n}\n\nexport type IconButtonProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'aria-label'\n> & {\n  'aria-label': string\n  icon: ReactNode\n  variant?: IconButtonVariant\n  loading?: boolean\n  /** Corner slot, aria-hidden: put the count into `aria-label`. */\n  counter?: ReactNode\n  dataTestId?: IconButtonDataTestId\n}\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    {\n      className,\n      type = 'button',\n      variant = 'outline',\n      loading = false,\n      disabled = false,\n      icon,\n      counter,\n      dataTestId,\n      ...rest\n    },\n    ref,\n  ) => (\n    <button\n      ref={ref}\n      type={type}\n      disabled={disabled || loading}\n      aria-busy={loading || undefined}\n      className={cn(\n        styles.button,\n        styles[variant],\n        variant === 'surface' && surfaceStyles.surface,\n        loading && !disabled && styles.loading,\n        className,\n      )}\n      data-testid={dataTestId?.root}\n      {...rest}\n    >\n      {loading ? (\n        <IconLoaderCircle className={styles.spinner} aria-hidden='true' />\n      ) : (\n        <span\n          className={styles.icon}\n          aria-hidden='true'\n          data-testid={dataTestId?.icon}\n        >\n          {icon}\n        </span>\n      )}\n      <CounterSlot dataTestId={dataTestId?.counter}>{counter}</CounterSlot>\n    </button>\n  ),\n)\n\nIconButton.displayName = 'IconButton'\n"],"names":["IconButton","forwardRef","_ref","ref","className","type","variant","loading","disabled","icon","counter","dataTestId","rest","_jsxs","undefined","cn","styles","button","surfaceStyles","surface","root","children","_jsx","IconLoaderCircle","spinner","CounterSlot","displayName"],"mappings":";;;;;;;;;;;;AA8BO,MAAMA,UAAU,gBAAGC,gBAAU,CAClC,CAAAC,IAAA,EAYEC,GAAG,KAAA;EAAA,IAXH;IACEC,SAAS;AACTC,IAAAA,IAAI,GAAG,QAAQ;AACfC,IAAAA,OAAO,GAAG,SAAS;AACnBC,IAAAA,OAAO,GAAG,KAAK;AACfC,IAAAA,QAAQ,GAAG,KAAK;IAChBC,IAAI;IACJC,OAAO;IACPC,UAAU;IACV,GAAGC,IAAAA;AACL,GAAC,GAAAV,IAAA,CAAA;AAAA,EAAA,oBAGDW,eAAA,CAAA,QAAA,EAAA;AACEV,IAAAA,GAAG,EAAEA,GAAI;AACTE,IAAAA,IAAI,EAAEA,IAAK;IACXG,QAAQ,EAAEA,QAAQ,IAAID,OAAQ;IAC9B,WAAWA,EAAAA,OAAO,IAAIO,SAAU;AAChCV,IAAAA,SAAS,EAAEW,EAAE,CACXC,iBAAM,CAACC,MAAM,EACbD,iBAAM,CAACV,OAAO,CAAC,EACfA,OAAO,KAAK,SAAS,IAAIY,cAAa,CAACC,OAAO,EAC9CZ,OAAO,IAAI,CAACC,QAAQ,IAAIQ,iBAAM,CAACT,OAAO,EACtCH,SACF,CAAE;IACF,aAAaO,EAAAA,UAAU,EAAES,IAAK;AAAA,IAAA,GAC1BR,IAAI;AAAAS,IAAAA,QAAA,EAEPd,CAAAA,OAAO,gBACNe,cAAA,CAACC,iCAAgB,EAAA;MAACnB,SAAS,EAAEY,iBAAM,CAACQ,OAAQ;MAAC,aAAY,EAAA,MAAA;KAAQ,CAAC,gBAElEF,cAAA,CAAA,MAAA,EAAA;MACElB,SAAS,EAAEY,iBAAM,CAACP,IAAK;AACvB,MAAA,aAAA,EAAY,MAAM;MAClB,aAAaE,EAAAA,UAAU,EAAEF,IAAK;AAAAY,MAAAA,QAAA,EAE7BZ,IAAAA;AAAI,KACD,CACP,eACDa,cAAA,CAACG,uBAAW,EAAA;MAACd,UAAU,EAAEA,UAAU,EAAED,OAAQ;AAAAW,MAAAA,QAAA,EAAEX,OAAAA;AAAO,KAAc,CAAC,CAAA;AAAA,GAC/D,CAAC,CAAA;AAAA,CAEb,EAAC;AAEDV,UAAU,CAAC0B,WAAW,GAAG,YAAY;;;;"}

package/dist/cjs/icon-button/IconButton.module.css.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const styles = {"button":"IconButton-module_button__5QpG9","icon":"IconButton-module_icon__1WMNC","spinner":"IconButton-module_spinner__-fwrf","spin":"IconButton-module_spin__eNilo","outline":"IconButton-module_outline__91r6g","surface":"IconButton-module_surface__GQ6lQ","ghost":"IconButton-module_ghost__WYnGy","loading":"IconButton-module_loading__v67XX"};
+const styles = {"button":"IconButton-module_button__5QpG9","loading":"IconButton-module_loading__v67XX","icon":"IconButton-module_icon__1WMNC","spinner":"IconButton-module_spinner__-fwrf","spin":"IconButton-module_spin__eNilo","outline":"IconButton-module_outline__91r6g","surface":"IconButton-module_surface__GQ6lQ","ghost":"IconButton-module_ghost__WYnGy"};
 
 module.exports = styles;
 //# sourceMappingURL=IconButton.module.css.cjs.map