@lidofinance/lido-app-ui 1.12.0 → 1.14.0

package/dist/cjs/breadcrumbs/Breadcrumbs.cjs

@@ -6,79 +6,107 @@ const react = require('react');
 const cn = require('classnames');
 const Breadcrumbs_module = require('./Breadcrumbs.module.css.cjs');
 const jsxRuntime = require('react/jsx-runtime');
+const useEdgeFade = require('../hooks/useEdgeFade.cjs');
+const useIsomorphicLayoutEffect = require('../hooks/useIsomorphicLayoutEffect.cjs');
 const ActionElement = require('../utils/ActionElement.cjs');
 const IconChevronRight = require('../icons/components/base/IconChevronRight.cjs');
 
-const syncFade = list => {
-  list.toggleAttribute('data-fade-start', list.scrollLeft > 0);
-  list.toggleAttribute('data-fade-end', list.scrollLeft < list.scrollWidth - list.clientWidth - 1);
+const ANCHOR_ONLY = ['href', 'onClick', 'disabled', 'external', 'linkProps', 'type', 'target', 'rel', 'download'];
+const spanAttrs = props => {
+  const attrs = {
+    ...props
+  };
+  for (const key of ANCHOR_ONLY) delete attrs[key];
+  return attrs;
 };
 const syncTitle = e => {
   const el = e.target.closest('[data-label]');
   if (!el) return;
   if (el.scrollWidth > el.clientWidth) el.setAttribute('title', el.textContent ?? '');else el.removeAttribute('title');
 };
-const Breadcrumbs = _ref => {
+
+/** Trail of ancestors ending in the current page (`aria-current="page"`); scrolls horizontally with an edge fade when it overflows. */
+const Breadcrumbs = /*#__PURE__*/react.forwardRef((_ref, ref) => {
   let {
     items,
     className,
+    dataTestId,
     ...rest
   } = _ref;
   const listRef = react.useRef(null);
-  react.useLayoutEffect(() => {
+  const {
+    sync,
+    onFocus
+  } = useEdgeFade.useEdgeFade(listRef);
+  const trailRef = react.useRef();
+  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
     const list = listRef.current;
     if (!list) return;
-    list.scrollLeft = list.scrollWidth;
-    syncFade(list);
-  }, [items]);
+    const trail = Array.from(list.children, li => li.textContent).join('\u0000');
+    if (trail !== trailRef.current) {
+      trailRef.current = trail;
+      list.scrollLeft = list.scrollWidth;
+    }
+    sync();
+  });
+
+  // A list mounted hidden (display: none) can't scroll on mount, so scroll once it gets a width.
   react.useEffect(() => {
     const list = listRef.current;
     if (!list || typeof ResizeObserver === 'undefined') return;
-    const observer = new ResizeObserver(() => syncFade(list));
+    let hidden = list.clientWidth === 0;
+    const observer = new ResizeObserver(() => {
+      const wasHidden = hidden;
+      hidden = list.clientWidth === 0;
+      if (!wasHidden || hidden) return;
+      list.scrollLeft = list.scrollWidth;
+      sync();
+    });
     observer.observe(list);
     return () => observer.disconnect();
-  }, []);
+  }, [sync]);
   return /*#__PURE__*/jsxRuntime.jsx("nav", {
+    ref: ref,
     "aria-label": "Breadcrumb",
     className: cn(Breadcrumbs_module.nav, className),
+    "data-testid": dataTestId?.root,
     ...rest,
     children: /*#__PURE__*/jsxRuntime.jsx("ol", {
       ref: listRef,
       className: Breadcrumbs_module.list,
-      onScroll: e => syncFade(e.currentTarget),
+      "data-testid": dataTestId?.list,
+      onScroll: sync,
+      onFocus: onFocus,
       onPointerOver: syncTitle,
       children: items.map((_ref2, index) => {
         let {
           label,
+          dataTestId: itemTestId,
           ...itemProps
         } = _ref2;
+        const current = index === items.length - 1;
         const labelAttrs = itemProps.title === undefined ? {
           'data-label': ''
         } : {};
-        if (index === items.length - 1) {
-          return /*#__PURE__*/jsxRuntime.jsx("li", {
-            className: Breadcrumbs_module.item,
-            children: /*#__PURE__*/jsxRuntime.jsx("span", {
-              "aria-current": "page",
-              className: cn(Breadcrumbs_module.label, Breadcrumbs_module.current),
-              ...labelAttrs,
-              children: label
-            })
-          }, index);
-        }
-        const interactive = itemProps.href !== undefined || itemProps.onClick !== undefined;
+        const interactive = !current && (itemProps.href !== undefined || itemProps.onClick !== undefined) && !itemProps.disabled;
         return /*#__PURE__*/jsxRuntime.jsxs("li", {
           className: Breadcrumbs_module.item,
           children: [interactive ? /*#__PURE__*/jsxRuntime.jsx(ActionElement.ActionElement, {
+            "data-testid": itemTestId?.root,
             ...itemProps,
             ...labelAttrs,
             className: cn(Breadcrumbs_module.label, Breadcrumbs_module.link, itemProps.className),
             children: label
           }) : /*#__PURE__*/jsxRuntime.jsx("span", {
-            className: Breadcrumbs_module.label,
+            "data-testid": itemTestId?.root,
+            ...spanAttrs(itemProps),
             ...labelAttrs,
+            ...(current && {
+              'aria-current': 'page'
+            }),
+            className: cn(Breadcrumbs_module.label, current && Breadcrumbs_module.current, itemProps.className),
             children: label
-          }), /*#__PURE__*/jsxRuntime.jsx(IconChevronRight.IconChevronRight, {
+          }), !current && /*#__PURE__*/jsxRuntime.jsx(IconChevronRight.IconChevronRight, {
             className: Breadcrumbs_module.separator,
             "aria-hidden": "true"
           })]
@@ -86,7 +114,8 @@ const Breadcrumbs = _ref => {
       })
     })
   });
-};
+});
+Breadcrumbs.displayName = 'Breadcrumbs';
 
 exports.Breadcrumbs = Breadcrumbs;
 //# sourceMappingURL=Breadcrumbs.cjs.map

package/dist/cjs/breadcrumbs/Breadcrumbs.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.cjs","sources":["../../../src/breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef } from 'react'\nimport type { HTMLAttributes, PointerEvent, ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport { IconChevronRight } from '../icons'\nimport { ActionElement, type ActionElementProps } from '../utils'\nimport styles from './Breadcrumbs.module.css'\n\nexport type BreadcrumbItem = ActionElementProps & {\n  label: ReactNode\n  children?: never\n}\n\nexport type BreadcrumbsProps = HTMLAttributes<HTMLElement> & {\n  items: BreadcrumbItem[]\n}\n\nconst syncFade = (list: HTMLElement) => {\n  list.toggleAttribute('data-fade-start', list.scrollLeft > 0)\n  list.toggleAttribute(\n    'data-fade-end',\n    list.scrollLeft < list.scrollWidth - list.clientWidth - 1,\n  )\n}\n\nconst syncTitle = (e: PointerEvent<HTMLElement>) => {\n  const el = (e.target as Element).closest('[data-label]')\n  if (!el) return\n  if (el.scrollWidth > el.clientWidth)\n    el.setAttribute('title', el.textContent ?? '')\n  else el.removeAttribute('title')\n}\n\nexport const Breadcrumbs = ({\n  items,\n  className,\n  ...rest\n}: BreadcrumbsProps) => {\n  const listRef = useRef<HTMLOListElement>(null)\n\n  useLayoutEffect(() => {\n    const list = listRef.current\n    if (!list) return\n    list.scrollLeft = list.scrollWidth\n    syncFade(list)\n  }, [items])\n\n  useEffect(() => {\n    const list = listRef.current\n    if (!list || typeof ResizeObserver === 'undefined') return\n    const observer = new ResizeObserver(() => syncFade(list))\n    observer.observe(list)\n    return () => observer.disconnect()\n  }, [])\n\n  return (\n    <nav\n      aria-label='Breadcrumb'\n      className={cn(styles.nav, className)}\n      {...rest}\n    >\n      <ol\n        ref={listRef}\n        className={styles.list}\n        onScroll={(e) => syncFade(e.currentTarget)}\n        onPointerOver={syncTitle}\n      >\n        {items.map(({ label, ...itemProps }, index) => {\n          const labelAttrs =\n            itemProps.title === undefined ? { 'data-label': '' } : {}\n          if (index === items.length - 1) {\n            return (\n              <li key={index} className={styles.item}>\n                <span\n                  aria-current='page'\n                  className={cn(styles.label, styles.current)}\n                  {...labelAttrs}\n                >\n                  {label}\n                </span>\n              </li>\n            )\n          }\n          const interactive =\n            itemProps.href !== undefined || itemProps.onClick !== undefined\n          return (\n            <li key={index} className={styles.item}>\n              {interactive ? (\n                <ActionElement\n                  {...itemProps}\n                  {...labelAttrs}\n                  className={cn(styles.label, styles.link, itemProps.className)}\n                >\n                  {label}\n                </ActionElement>\n              ) : (\n                <span className={styles.label} {...labelAttrs}>\n                  {label}\n                </span>\n              )}\n              <IconChevronRight\n                className={styles.separator}\n                aria-hidden='true'\n              />\n            </li>\n          )\n        })}\n      </ol>\n    </nav>\n  )\n}\n"],"names":["syncFade","list","toggleAttribute","scrollLeft","scrollWidth","clientWidth","syncTitle","e","el","target","closest","setAttribute","textContent","removeAttribute","Breadcrumbs","_ref","items","className","rest","listRef","useRef","useLayoutEffect","current","useEffect","ResizeObserver","observer","observe","disconnect","_jsx","cn","styles","nav","children","ref","onScroll","currentTarget","onPointerOver","map","_ref2","index","label","itemProps","labelAttrs","title","undefined","length","item","interactive","href","onClick","_jsxs","ActionElement","link","IconChevronRight","separator"],"mappings":";;;;;;;;;;;AAkBA,MAAMA,QAAQ,GAAIC,IAAiB,IAAK;EACtCA,IAAI,CAACC,eAAe,CAAC,iBAAiB,EAAED,IAAI,CAACE,UAAU,GAAG,CAAC,CAAC,CAAA;AAC5DF,EAAAA,IAAI,CAACC,eAAe,CAClB,eAAe,EACfD,IAAI,CAACE,UAAU,GAAGF,IAAI,CAACG,WAAW,GAAGH,IAAI,CAACI,WAAW,GAAG,CAC1D,CAAC,CAAA;AACH,CAAC,CAAA;AAED,MAAMC,SAAS,GAAIC,CAA4B,IAAK;EAClD,MAAMC,EAAE,GAAID,CAAC,CAACE,MAAM,CAAaC,OAAO,CAAC,cAAc,CAAC,CAAA;EACxD,IAAI,CAACF,EAAE,EAAE,OAAA;EACT,IAAIA,EAAE,CAACJ,WAAW,GAAGI,EAAE,CAACH,WAAW,EACjCG,EAAE,CAACG,YAAY,CAAC,OAAO,EAAEH,EAAE,CAACI,WAAW,IAAI,EAAE,CAAC,CAC3CJ,KAAAA,EAAE,CAACK,eAAe,CAAC,OAAO,CAAC,CAAA;AAClC,CAAC,CAAA;AAEYC,MAAAA,WAAW,GAAGC,IAAA,IAIH;EAAA,IAJI;IAC1BC,KAAK;IACLC,SAAS;IACT,GAAGC,IAAAA;AACa,GAAC,GAAAH,IAAA,CAAA;AACjB,EAAA,MAAMI,OAAO,GAAGC,YAAM,CAAmB,IAAI,CAAC,CAAA;AAE9CC,EAAAA,qBAAe,CAAC,MAAM;AACpB,IAAA,MAAMpB,IAAI,GAAGkB,OAAO,CAACG,OAAO,CAAA;IAC5B,IAAI,CAACrB,IAAI,EAAE,OAAA;AACXA,IAAAA,IAAI,CAACE,UAAU,GAAGF,IAAI,CAACG,WAAW,CAAA;IAClCJ,QAAQ,CAACC,IAAI,CAAC,CAAA;AAChB,GAAC,EAAE,CAACe,KAAK,CAAC,CAAC,CAAA;AAEXO,EAAAA,eAAS,CAAC,MAAM;AACd,IAAA,MAAMtB,IAAI,GAAGkB,OAAO,CAACG,OAAO,CAAA;AAC5B,IAAA,IAAI,CAACrB,IAAI,IAAI,OAAOuB,cAAc,KAAK,WAAW,EAAE,OAAA;IACpD,MAAMC,QAAQ,GAAG,IAAID,cAAc,CAAC,MAAMxB,QAAQ,CAACC,IAAI,CAAC,CAAC,CAAA;AACzDwB,IAAAA,QAAQ,CAACC,OAAO,CAACzB,IAAI,CAAC,CAAA;AACtB,IAAA,OAAO,MAAMwB,QAAQ,CAACE,UAAU,EAAE,CAAA;GACnC,EAAE,EAAE,CAAC,CAAA;AAEN,EAAA,oBACEC,cAAA,CAAA,KAAA,EAAA;AACE,IAAA,YAAA,EAAW,YAAY;IACvBX,SAAS,EAAEY,EAAE,CAACC,kBAAM,CAACC,GAAG,EAAEd,SAAS,CAAE;AAAA,IAAA,GACjCC,IAAI;AAAAc,IAAAA,QAAA,eAERJ,cAAA,CAAA,IAAA,EAAA;AACEK,MAAAA,GAAG,EAAEd,OAAQ;MACbF,SAAS,EAAEa,kBAAM,CAAC7B,IAAK;MACvBiC,QAAQ,EAAG3B,CAAC,IAAKP,QAAQ,CAACO,CAAC,CAAC4B,aAAa,CAAE;AAC3CC,MAAAA,aAAa,EAAE9B,SAAU;MAAA0B,QAAA,EAExBhB,KAAK,CAACqB,GAAG,CAAC,CAAAC,KAAA,EAA0BC,KAAK,KAAK;QAAA,IAAnC;UAAEC,KAAK;UAAE,GAAGC,SAAAA;AAAU,SAAC,GAAAH,KAAA,CAAA;AACjC,QAAA,MAAMI,UAAU,GACdD,SAAS,CAACE,KAAK,KAAKC,SAAS,GAAG;AAAE,UAAA,YAAY,EAAE,EAAA;SAAI,GAAG,EAAE,CAAA;AAC3D,QAAA,IAAIL,KAAK,KAAKvB,KAAK,CAAC6B,MAAM,GAAG,CAAC,EAAE;AAC9B,UAAA,oBACEjB,cAAA,CAAA,IAAA,EAAA;YAAgBX,SAAS,EAAEa,kBAAM,CAACgB,IAAK;AAAAd,YAAAA,QAAA,eACrCJ,cAAA,CAAA,MAAA,EAAA;AACE,cAAA,cAAA,EAAa,MAAM;cACnBX,SAAS,EAAEY,EAAE,CAACC,kBAAM,CAACU,KAAK,EAAEV,kBAAM,CAACR,OAAO,CAAE;AAAA,cAAA,GACxCoB,UAAU;AAAAV,cAAAA,QAAA,EAEbQ,KAAAA;aACG,CAAA;AAAC,WAAA,EAPAD,KAQL,CAAC,CAAA;AAET,SAAA;AACA,QAAA,MAAMQ,WAAW,GACfN,SAAS,CAACO,IAAI,KAAKJ,SAAS,IAAIH,SAAS,CAACQ,OAAO,KAAKL,SAAS,CAAA;AACjE,QAAA,oBACEM,eAAA,CAAA,IAAA,EAAA;UAAgBjC,SAAS,EAAEa,kBAAM,CAACgB,IAAK;AAAAd,UAAAA,QAAA,EACpCe,CAAAA,WAAW,gBACVnB,cAAA,CAACuB,2BAAa,EAAA;AAAA,YAAA,GACRV,SAAS;AAAA,YAAA,GACTC,UAAU;AACdzB,YAAAA,SAAS,EAAEY,EAAE,CAACC,kBAAM,CAACU,KAAK,EAAEV,kBAAM,CAACsB,IAAI,EAAEX,SAAS,CAACxB,SAAS,CAAE;AAAAe,YAAAA,QAAA,EAE7DQ,KAAAA;WACY,CAAC,gBAEhBZ,cAAA,CAAA,MAAA,EAAA;YAAMX,SAAS,EAAEa,kBAAM,CAACU,KAAM;AAAA,YAAA,GAAKE,UAAU;AAAAV,YAAAA,QAAA,EAC1CQ,KAAAA;AAAK,WACF,CACP,eACDZ,cAAA,CAACyB,iCAAgB,EAAA;YACfpC,SAAS,EAAEa,kBAAM,CAACwB,SAAU;YAC5B,aAAY,EAAA,MAAA;AAAM,WACnB,CAAC,CAAA;AAAA,SAAA,EAjBKf,KAkBL,CAAC,CAAA;OAER,CAAA;KACC,CAAA;AAAC,GACF,CAAC,CAAA;AAEV;;;;"}
+{"version":3,"file":"Breadcrumbs.cjs","sources":["../../../src/breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef } from 'react'\nimport type { HTMLAttributes, PointerEvent, ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport { useEdgeFade, useIsomorphicLayoutEffect } from '../hooks'\nimport { IconChevronRight } from '../icons'\nimport { ActionElement, type ActionElementProps } from '../utils'\nimport styles from './Breadcrumbs.module.css'\n\nexport type BreadcrumbItemDataTestId = { root?: string }\n\nexport type BreadcrumbItem = ActionElementProps & {\n  label: ReactNode\n  children?: never\n  /** Test id of the item's label element, for link, plain and current items alike. */\n  dataTestId?: BreadcrumbItemDataTestId\n}\n\nexport type BreadcrumbsDataTestId = { root?: string; list?: string }\n\nexport type BreadcrumbsProps = HTMLAttributes<HTMLElement> & {\n  /** `href` renders a link, only `onClick` a button, anything else (and `disabled`) plain text; the last item is the current page. */\n  items: BreadcrumbItem[]\n  dataTestId?: BreadcrumbsDataTestId\n}\n\nconst ANCHOR_ONLY = [\n  'href',\n  'onClick',\n  'disabled',\n  'external',\n  'linkProps',\n  'type',\n  'target',\n  'rel',\n  'download',\n] as const\n\nconst spanAttrs = (props: Omit<BreadcrumbItem, 'label'>) => {\n  const attrs: Record<string, unknown> = { ...props }\n  for (const key of ANCHOR_ONLY) delete attrs[key]\n  return attrs as HTMLAttributes<HTMLSpanElement>\n}\n\nconst syncTitle = (e: PointerEvent<HTMLElement>) => {\n  const el = (e.target as Element).closest('[data-label]')\n  if (!el) return\n  if (el.scrollWidth > el.clientWidth)\n    el.setAttribute('title', el.textContent ?? '')\n  else el.removeAttribute('title')\n}\n\n/** Trail of ancestors ending in the current page (`aria-current=\"page\"`); scrolls horizontally with an edge fade when it overflows. */\nexport const Breadcrumbs = forwardRef<HTMLElement, BreadcrumbsProps>(\n  ({ items, className, dataTestId, ...rest }, ref) => {\n    const listRef = useRef<HTMLOListElement>(null)\n\n    const { sync, onFocus } = useEdgeFade(listRef)\n    const trailRef = useRef<string>()\n\n    useIsomorphicLayoutEffect(() => {\n      const list = listRef.current\n      if (!list) return\n      const trail = Array.from(list.children, (li) => li.textContent).join(\n        '\\u0000',\n      )\n      if (trail !== trailRef.current) {\n        trailRef.current = trail\n        list.scrollLeft = list.scrollWidth\n      }\n      sync()\n    })\n\n    // A list mounted hidden (display: none) can't scroll on mount, so scroll once it gets a width.\n    useEffect(() => {\n      const list = listRef.current\n      if (!list || typeof ResizeObserver === 'undefined') return\n      let hidden = list.clientWidth === 0\n      const observer = new ResizeObserver(() => {\n        const wasHidden = hidden\n        hidden = list.clientWidth === 0\n        if (!wasHidden || hidden) return\n        list.scrollLeft = list.scrollWidth\n        sync()\n      })\n      observer.observe(list)\n      return () => observer.disconnect()\n    }, [sync])\n\n    return (\n      <nav\n        ref={ref}\n        aria-label='Breadcrumb'\n        className={cn(styles.nav, className)}\n        data-testid={dataTestId?.root}\n        {...rest}\n      >\n        <ol\n          ref={listRef}\n          className={styles.list}\n          data-testid={dataTestId?.list}\n          onScroll={sync}\n          onFocus={onFocus}\n          onPointerOver={syncTitle}\n        >\n          {items.map(\n            ({ label, dataTestId: itemTestId, ...itemProps }, index) => {\n              const current = index === items.length - 1\n              const labelAttrs =\n                itemProps.title === undefined ? { 'data-label': '' } : {}\n              const interactive =\n                !current &&\n                (itemProps.href !== undefined ||\n                  itemProps.onClick !== undefined) &&\n                !itemProps.disabled\n              return (\n                <li key={index} className={styles.item}>\n                  {interactive ? (\n                    <ActionElement\n                      data-testid={itemTestId?.root}\n                      {...itemProps}\n                      {...labelAttrs}\n                      className={cn(\n                        styles.label,\n                        styles.link,\n                        itemProps.className,\n                      )}\n                    >\n                      {label}\n                    </ActionElement>\n                  ) : (\n                    <span\n                      data-testid={itemTestId?.root}\n                      {...spanAttrs(itemProps)}\n                      {...labelAttrs}\n                      {...(current && { 'aria-current': 'page' as const })}\n                      className={cn(\n                        styles.label,\n                        current && styles.current,\n                        itemProps.className,\n                      )}\n                    >\n                      {label}\n                    </span>\n                  )}\n                  {!current && (\n                    <IconChevronRight\n                      className={styles.separator}\n                      aria-hidden='true'\n                    />\n                  )}\n                </li>\n              )\n            },\n          )}\n        </ol>\n      </nav>\n    )\n  },\n)\n\nBreadcrumbs.displayName = 'Breadcrumbs'\n"],"names":["ANCHOR_ONLY","spanAttrs","props","attrs","key","syncTitle","e","el","target","closest","scrollWidth","clientWidth","setAttribute","textContent","removeAttribute","Breadcrumbs","forwardRef","_ref","ref","items","className","dataTestId","rest","listRef","useRef","sync","onFocus","useEdgeFade","trailRef","useIsomorphicLayoutEffect","list","current","trail","Array","from","children","li","join","scrollLeft","useEffect","ResizeObserver","hidden","observer","wasHidden","observe","disconnect","_jsx","cn","styles","nav","root","onScroll","onPointerOver","map","_ref2","index","label","itemTestId","itemProps","length","labelAttrs","title","undefined","interactive","href","onClick","disabled","_jsxs","item","ActionElement","link","IconChevronRight","separator","displayName"],"mappings":"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"}

package/dist/cjs/breadcrumbs/Breadcrumbs.module.css.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const styles = {"nav":"Breadcrumbs-module_nav__cDuA5","list":"Breadcrumbs-module_list__A6dlB","item":"Breadcrumbs-module_item__3t-Zj","label":"Breadcrumbs-module_label__gVU35","link":"Breadcrumbs-module_link__KJ87-","current":"Breadcrumbs-module_current__XK0a2","separator":"Breadcrumbs-module_separator__k-Tmd"};
+const styles = {"nav":"Breadcrumbs-module_nav__cDuA5","list":"Breadcrumbs-module_list__A6dlB ScrollFade-module_scrollFade__bK-Oi","item":"Breadcrumbs-module_item__3t-Zj","label":"Breadcrumbs-module_label__gVU35","link":"Breadcrumbs-module_link__KJ87-","current":"Breadcrumbs-module_current__XK0a2","separator":"Breadcrumbs-module_separator__k-Tmd"};
 
 module.exports = styles;
 //# sourceMappingURL=Breadcrumbs.module.css.cjs.map

package/dist/cjs/button/Button.cjs

@@ -4,11 +4,11 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const react = require('react');
 const cn = require('classnames');
-const CounterSlot = require('../counter/CounterSlot.cjs');
 const Button_module = require('./Button.module.css.cjs');
+const ButtonContent = require('./ButtonContent.cjs');
 const jsxRuntime = require('react/jsx-runtime');
-const IconLoaderCircle = require('../icons/components/base/IconLoaderCircle.cjs');
 
+/** Fully rounded call to action; `size` is big (52px) or small (36px), `loading` swaps the icon slot for a spinner and disables the button. */
 const Button = /*#__PURE__*/react.forwardRef((_ref, ref) => {
   let {
     className,
@@ -21,38 +21,29 @@ const Button = /*#__PURE__*/react.forwardRef((_ref, ref) => {
     iconLeft,
     iconRight,
     counter,
+    counterLabel,
     dataTestId,
+    'aria-label': ariaLabel,
     ...rest
   } = _ref;
-  return /*#__PURE__*/jsxRuntime.jsxs("button", {
+  return /*#__PURE__*/jsxRuntime.jsx("button", {
     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,
+    "aria-label": ButtonContent.joinAriaLabel(ariaLabel, counterLabel),
     ...rest,
-    children: [loading ? /*#__PURE__*/jsxRuntime.jsx(IconLoaderCircle.IconLoaderCircle, {
-      className: Button_module.spinner,
-      "aria-hidden": "true"
-    }) : iconLeft != null && /*#__PURE__*/jsxRuntime.jsx("span", {
-      className: Button_module.icon,
-      "aria-hidden": "true",
-      "data-testid": dataTestId?.iconLeft,
-      children: iconLeft
-    }), /*#__PURE__*/jsxRuntime.jsx("span", {
-      className: Button_module.content,
-      "data-testid": dataTestId?.content,
+    children: /*#__PURE__*/jsxRuntime.jsx(ButtonContent.ButtonContent, {
+      loading: loading,
+      iconLeft: iconLeft,
+      iconRight: iconRight,
+      counter: counter,
+      counterLabel: counterLabel,
+      dataTestId: dataTestId,
       children: children
-    }), !loading && iconRight != null ? /*#__PURE__*/jsxRuntime.jsx("span", {
-      className: Button_module.icon,
-      "aria-hidden": "true",
-      "data-testid": dataTestId?.iconRight,
-      children: iconRight
-    }) : null, /*#__PURE__*/jsxRuntime.jsx(CounterSlot.CounterSlot, {
-      dataTestId: dataTestId?.counter,
-      children: counter
-    })]
+    })
   });
 });
 Button.displayName = 'Button';

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 } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './Button.module.css'\nimport { ButtonContent, joinAriaLabel } from './ButtonContent'\nimport type {\n  ButtonDataTestId,\n  ButtonOwnProps,\n  ButtonSize,\n  ButtonVariant,\n} from './types'\n\nexport type { ButtonDataTestId, ButtonSize, ButtonVariant }\n\nexport type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\n  ButtonOwnProps & {\n    loading?: boolean\n  }\n\n/** Fully rounded call to action; `size` is big (52px) or small (36px), `loading` swaps the icon slot for a spinner and disables the button. */\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      counterLabel,\n      dataTestId,\n      'aria-label': ariaLabel,\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      aria-label={joinAriaLabel(ariaLabel, counterLabel)}\n      {...rest}\n    >\n      <ButtonContent\n        loading={loading}\n        iconLeft={iconLeft}\n        iconRight={iconRight}\n        counter={counter}\n        counterLabel={counterLabel}\n        dataTestId={dataTestId}\n      >\n        {children}\n      </ButtonContent>\n    </button>\n  ),\n)\n\nButton.displayName = 'Button'\n"],"names":["Button","forwardRef","_ref","ref","className","children","type","variant","size","loading","disabled","iconLeft","iconRight","counter","counterLabel","dataTestId","ariaLabel","rest","_jsx","undefined","cn","styles","button","root","joinAriaLabel","ButtonContent","displayName"],"mappings":";;;;;;;;;;AAoBA;AACO,MAAMA,MAAM,gBAAGC,gBAAU,CAC9B,CAAAC,IAAA,EAiBEC,GAAG,KAAA;EAAA,IAhBH;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,YAAY;IACZC,UAAU;AACV,IAAA,YAAY,EAAEC,SAAS;IACvB,GAAGC,IAAAA;AACL,GAAC,GAAAf,IAAA,CAAA;AAAA,EAAA,oBAGDgB,cAAA,CAAA,QAAA,EAAA;AACEf,IAAAA,GAAG,EAAEA,GAAI;AACTG,IAAAA,IAAI,EAAEA,IAAK;IACXI,QAAQ,EAAEA,QAAQ,IAAID,OAAQ;IAC9B,WAAWA,EAAAA,OAAO,IAAIU,SAAU;IAChCf,SAAS,EAAEgB,EAAE,CACXC,aAAM,CAACC,MAAM,EACbD,aAAM,CAACd,OAAO,CAAC,EACfc,aAAM,CAACb,IAAI,CAAC,EACZC,OAAO,IAAI,CAACC,QAAQ,IAAIW,aAAM,CAACZ,OAAO,EACtCL,SACF,CAAE;IACF,aAAaW,EAAAA,UAAU,EAAEQ,IAAK;AAC9B,IAAA,YAAA,EAAYC,2BAAa,CAACR,SAAS,EAAEF,YAAY,CAAE;AAAA,IAAA,GAC/CG,IAAI;IAAAZ,QAAA,eAERa,cAAA,CAACO,2BAAa,EAAA;AACZhB,MAAAA,OAAO,EAAEA,OAAQ;AACjBE,MAAAA,QAAQ,EAAEA,QAAS;AACnBC,MAAAA,SAAS,EAAEA,SAAU;AACrBC,MAAAA,OAAO,EAAEA,OAAQ;AACjBC,MAAAA,YAAY,EAAEA,YAAa;AAC3BC,MAAAA,UAAU,EAAEA,UAAW;AAAAV,MAAAA,QAAA,EAEtBA,QAAAA;KACY,CAAA;AAAC,GACV,CAAC,CAAA;AAAA,CAEb,EAAC;AAEDL,MAAM,CAAC0B,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/button/ButtonContent.cjs

@@ -0,0 +1,50 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const CounterSlot = require('../counter/CounterSlot.cjs');
+const Button_module = require('./Button.module.css.cjs');
+const jsxRuntime = require('react/jsx-runtime');
+const IconLoaderCircle = require('../icons/components/base/IconLoaderCircle.cjs');
+
+const joinAriaLabel = (ariaLabel, counterLabel) => ariaLabel && counterLabel ? `${ariaLabel}, ${counterLabel}` : ariaLabel;
+const ButtonContent = _ref => {
+  let {
+    loading = false,
+    iconLeft,
+    iconRight,
+    counter,
+    counterLabel,
+    dataTestId,
+    children
+  } = _ref;
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [loading ? /*#__PURE__*/jsxRuntime.jsx(IconLoaderCircle.IconLoaderCircle, {
+      className: Button_module.spinner,
+      "aria-hidden": "true"
+    }) : iconLeft != null && /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: Button_module.icon,
+      "aria-hidden": "true",
+      "data-testid": dataTestId?.iconLeft,
+      children: iconLeft
+    }), /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: Button_module.content,
+      "data-testid": dataTestId?.content,
+      children: children
+    }), !loading && iconRight != null ? /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: Button_module.icon,
+      "aria-hidden": "true",
+      "data-testid": dataTestId?.iconRight,
+      children: iconRight
+    }) : null, /*#__PURE__*/jsxRuntime.jsx(CounterSlot.CounterSlot, {
+      dataTestId: dataTestId?.counter,
+      children: counter
+    }), /*#__PURE__*/jsxRuntime.jsx(CounterSlot.CounterLabel, {
+      children: counterLabel
+    })]
+  });
+};
+
+exports.ButtonContent = ButtonContent;
+exports.joinAriaLabel = joinAriaLabel;
+//# sourceMappingURL=ButtonContent.cjs.map

package/dist/cjs/button/ButtonContent.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonContent.cjs","sources":["../../../src/button/ButtonContent.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\nimport { CounterLabel, CounterSlot } from '../counter/CounterSlot'\nimport { IconLoaderCircle } from '../icons'\nimport styles from './Button.module.css'\nimport type { ButtonOwnProps } from './types'\n\nexport const joinAriaLabel = (\n  ariaLabel: string | undefined,\n  counterLabel: string | undefined,\n) => (ariaLabel && counterLabel ? `${ariaLabel}, ${counterLabel}` : ariaLabel)\n\ntype ButtonContentProps = Pick<\n  ButtonOwnProps,\n  'iconLeft' | 'iconRight' | 'counter' | 'counterLabel' | 'dataTestId'\n> & {\n  loading?: boolean\n  children?: ReactNode\n}\n\nexport const ButtonContent = ({\n  loading = false,\n  iconLeft,\n  iconRight,\n  counter,\n  counterLabel,\n  dataTestId,\n  children,\n}: ButtonContentProps) => (\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    <CounterLabel>{counterLabel}</CounterLabel>\n  </>\n)\n"],"names":["joinAriaLabel","ariaLabel","counterLabel","ButtonContent","_ref","loading","iconLeft","iconRight","counter","dataTestId","children","_jsxs","_Fragment","_jsx","IconLoaderCircle","className","styles","spinner","icon","content","CounterSlot","CounterLabel"],"mappings":";;;;;;;;;MAOaA,aAAa,GAAGA,CAC3BC,SAA6B,EAC7BC,YAAgC,KAC5BD,SAAS,IAAIC,YAAY,GAAG,CAAGD,EAAAA,SAAS,KAAKC,YAAY,CAAA,CAAE,GAAGD,UAAU;AAUvE,MAAME,aAAa,GAAGC,IAAA,IAAA;EAAA,IAAC;AAC5BC,IAAAA,OAAO,GAAG,KAAK;IACfC,QAAQ;IACRC,SAAS;IACTC,OAAO;IACPN,YAAY;IACZO,UAAU;AACVC,IAAAA,QAAAA;AACkB,GAAC,GAAAN,IAAA,CAAA;EAAA,oBACnBO,eAAA,CAAAC,mBAAA,EAAA;AAAAF,IAAAA,QAAA,EACGL,CAAAA,OAAO,gBACNQ,cAAA,CAACC,iCAAgB,EAAA;MAACC,SAAS,EAAEC,aAAM,CAACC,OAAQ;MAAC,aAAY,EAAA,MAAA;AAAM,KAAE,CAAC,GAElEX,QAAQ,IAAI,IAAI,iBACdO,cAAA,CAAA,MAAA,EAAA;MACEE,SAAS,EAAEC,aAAM,CAACE,IAAK;AACvB,MAAA,aAAA,EAAY,MAAM;MAClB,aAAaT,EAAAA,UAAU,EAAEH,QAAS;AAAAI,MAAAA,QAAA,EAEjCJ,QAAAA;KACG,CAET,eACDO,cAAA,CAAA,MAAA,EAAA;MAAME,SAAS,EAAEC,aAAM,CAACG,OAAQ;MAAC,aAAaV,EAAAA,UAAU,EAAEU,OAAQ;AAAAT,MAAAA,QAAA,EAC/DA,QAAAA;KACG,CAAC,EACN,CAACL,OAAO,IAAIE,SAAS,IAAI,IAAI,gBAC5BM,cAAA,CAAA,MAAA,EAAA;MACEE,SAAS,EAAEC,aAAM,CAACE,IAAK;AACvB,MAAA,aAAA,EAAY,MAAM;MAClB,aAAaT,EAAAA,UAAU,EAAEF,SAAU;AAAAG,MAAAA,QAAA,EAElCH,SAAAA;AAAS,KACN,CAAC,GACL,IAAI,eACRM,cAAA,CAACO,uBAAW,EAAA;MAACX,UAAU,EAAEA,UAAU,EAAED,OAAQ;AAAAE,MAAAA,QAAA,EAAEF,OAAAA;AAAO,KAAc,CAAC,eACrEK,cAAA,CAACQ,wBAAY,EAAA;AAAAX,MAAAA,QAAA,EAAER,YAAAA;AAAY,KAAe,CAAC,CAAA;AAAA,GAC3C,CAAC,CAAA;AAAA;;;;;"}

package/dist/cjs/button/LinkButton.cjs

@@ -0,0 +1,46 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const react = require('react');
+const cn = require('classnames');
+const Anchor = require('../link-provider/Anchor.cjs');
+const Button_module = require('./Button.module.css.cjs');
+const ButtonContent = require('./ButtonContent.cjs');
+const jsxRuntime = require('react/jsx-runtime');
+
+/** Button-styled `<a>` that routes through `LinkProvider`; `disabled` drops the `href`. */
+const LinkButton = /*#__PURE__*/react.forwardRef((_ref, ref) => {
+  let {
+    className,
+    children,
+    variant = 'primary',
+    size = 'big',
+    iconLeft,
+    iconRight,
+    counter,
+    counterLabel,
+    dataTestId,
+    'aria-label': ariaLabel,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/jsxRuntime.jsx(Anchor.Anchor, {
+    ref: ref,
+    className: cn(Button_module.button, Button_module[variant], Button_module[size], className),
+    "data-testid": dataTestId?.root,
+    "aria-label": ButtonContent.joinAriaLabel(ariaLabel, counterLabel),
+    ...rest,
+    children: /*#__PURE__*/jsxRuntime.jsx(ButtonContent.ButtonContent, {
+      iconLeft: iconLeft,
+      iconRight: iconRight,
+      counter: counter,
+      counterLabel: counterLabel,
+      dataTestId: dataTestId,
+      children: children
+    })
+  });
+});
+LinkButton.displayName = 'LinkButton';
+
+exports.LinkButton = LinkButton;
+//# sourceMappingURL=LinkButton.cjs.map

package/dist/cjs/button/LinkButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkButton.cjs","sources":["../../../src/button/LinkButton.tsx"],"sourcesContent":["import { forwardRef } from 'react'\n\nimport cn from 'classnames'\n\nimport { Anchor, type AnchorProps } from '../link-provider/Anchor'\nimport styles from './Button.module.css'\nimport { ButtonContent, joinAriaLabel } from './ButtonContent'\nimport type { ButtonOwnProps } from './types'\n\nexport type LinkButtonProps = Omit<AnchorProps, 'href'> &\n  ButtonOwnProps & {\n    href: string\n  }\n\n/** Button-styled `<a>` that routes through `LinkProvider`; `disabled` drops the `href`. */\nexport const LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(\n  (\n    {\n      className,\n      children,\n      variant = 'primary',\n      size = 'big',\n      iconLeft,\n      iconRight,\n      counter,\n      counterLabel,\n      dataTestId,\n      'aria-label': ariaLabel,\n      ...rest\n    },\n    ref,\n  ) => (\n    <Anchor\n      ref={ref}\n      className={cn(styles.button, styles[variant], styles[size], className)}\n      data-testid={dataTestId?.root}\n      aria-label={joinAriaLabel(ariaLabel, counterLabel)}\n      {...rest}\n    >\n      <ButtonContent\n        iconLeft={iconLeft}\n        iconRight={iconRight}\n        counter={counter}\n        counterLabel={counterLabel}\n        dataTestId={dataTestId}\n      >\n        {children}\n      </ButtonContent>\n    </Anchor>\n  ),\n)\n\nLinkButton.displayName = 'LinkButton'\n"],"names":["LinkButton","forwardRef","_ref","ref","className","children","variant","size","iconLeft","iconRight","counter","counterLabel","dataTestId","ariaLabel","rest","_jsx","Anchor","cn","styles","button","root","joinAriaLabel","ButtonContent","displayName"],"mappings":";;;;;;;;;;;AAcA;AACO,MAAMA,UAAU,gBAAGC,gBAAU,CAClC,CAAAC,IAAA,EAcEC,GAAG,KAAA;EAAA,IAbH;IACEC,SAAS;IACTC,QAAQ;AACRC,IAAAA,OAAO,GAAG,SAAS;AACnBC,IAAAA,IAAI,GAAG,KAAK;IACZC,QAAQ;IACRC,SAAS;IACTC,OAAO;IACPC,YAAY;IACZC,UAAU;AACV,IAAA,YAAY,EAAEC,SAAS;IACvB,GAAGC,IAAAA;AACL,GAAC,GAAAZ,IAAA,CAAA;EAAA,oBAGDa,cAAA,CAACC,aAAM,EAAA;AACLb,IAAAA,GAAG,EAAEA,GAAI;AACTC,IAAAA,SAAS,EAAEa,EAAE,CAACC,aAAM,CAACC,MAAM,EAAED,aAAM,CAACZ,OAAO,CAAC,EAAEY,aAAM,CAACX,IAAI,CAAC,EAAEH,SAAS,CAAE;IACvE,aAAaQ,EAAAA,UAAU,EAAEQ,IAAK;AAC9B,IAAA,YAAA,EAAYC,2BAAa,CAACR,SAAS,EAAEF,YAAY,CAAE;AAAA,IAAA,GAC/CG,IAAI;IAAAT,QAAA,eAERU,cAAA,CAACO,2BAAa,EAAA;AACZd,MAAAA,QAAQ,EAAEA,QAAS;AACnBC,MAAAA,SAAS,EAAEA,SAAU;AACrBC,MAAAA,OAAO,EAAEA,OAAQ;AACjBC,MAAAA,YAAY,EAAEA,YAAa;AAC3BC,MAAAA,UAAU,EAAEA,UAAW;AAAAP,MAAAA,QAAA,EAEtBA,QAAAA;KACY,CAAA;AAAC,GACV,CAAC,CAAA;AAAA,CAEb,EAAC;AAEDL,UAAU,CAACuB,WAAW,GAAG,YAAY;;;;"}

package/dist/cjs/card/Card.cjs

@@ -6,6 +6,7 @@ const cn = require('classnames');
 const Card_module = require('./Card.module.css.cjs');
 const jsxRuntime = require('react/jsx-runtime');
 
+/** Rounded, bordered surface that fills the width its parent gives it. */
 const Card = _ref => {
   let {
     className,

package/dist/cjs/card/Card.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Card.cjs","sources":["../../../src/card/Card.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './Card.module.css'\n\nexport type CardDataTestId = {\n  root?: string\n}\n\nexport type CardProps = HTMLAttributes<HTMLDivElement> & {\n  dataTestId?: CardDataTestId\n}\n\nexport const Card = ({\n  className,\n  children,\n  dataTestId,\n  ...rest\n}: CardProps) => (\n  <div\n    className={cn(styles.card, className)}\n    data-testid={dataTestId?.root}\n    {...rest}\n  >\n    {children}\n  </div>\n)\n"],"names":["Card","_ref","className","children","dataTestId","rest","_jsx","cn","styles","card","root"],"mappings":";;;;;;;;AAcO,MAAMA,IAAI,GAAGC,IAAA,IAAA;EAAA,IAAC;IACnBC,SAAS;IACTC,QAAQ;IACRC,UAAU;IACV,GAAGC,IAAAA;AACM,GAAC,GAAAJ,IAAA,CAAA;AAAA,EAAA,oBACVK,cAAA,CAAA,KAAA,EAAA;IACEJ,SAAS,EAAEK,EAAE,CAACC,WAAM,CAACC,IAAI,EAAEP,SAAS,CAAE;IACtC,aAAaE,EAAAA,UAAU,EAAEM,IAAK;AAAA,IAAA,GAC1BL,IAAI;AAAAF,IAAAA,QAAA,EAEPA,QAAAA;AAAQ,GACN,CAAC,CAAA;AAAA;;;;"}
+{"version":3,"file":"Card.cjs","sources":["../../../src/card/Card.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './Card.module.css'\n\nexport type CardDataTestId = {\n  root?: string\n}\n\nexport type CardProps = HTMLAttributes<HTMLDivElement> & {\n  dataTestId?: CardDataTestId\n}\n\n/** Rounded, bordered surface that fills the width its parent gives it. */\nexport const Card = ({\n  className,\n  children,\n  dataTestId,\n  ...rest\n}: CardProps) => (\n  <div\n    className={cn(styles.card, className)}\n    data-testid={dataTestId?.root}\n    {...rest}\n  >\n    {children}\n  </div>\n)\n"],"names":["Card","_ref","className","children","dataTestId","rest","_jsx","cn","styles","card","root"],"mappings":";;;;;;;;AAcA;AACO,MAAMA,IAAI,GAAGC,IAAA,IAAA;EAAA,IAAC;IACnBC,SAAS;IACTC,QAAQ;IACRC,UAAU;IACV,GAAGC,IAAAA;AACM,GAAC,GAAAJ,IAAA,CAAA;AAAA,EAAA,oBACVK,cAAA,CAAA,KAAA,EAAA;IACEJ,SAAS,EAAEK,EAAE,CAACC,WAAM,CAACC,IAAI,EAAEP,SAAS,CAAE;IACtC,aAAaE,EAAAA,UAAU,EAAEM,IAAK;AAAA,IAAA,GAC1BL,IAAI;AAAAF,IAAAA,QAAA,EAEPA,QAAAA;AAAQ,GACN,CAAC,CAAA;AAAA;;;;"}

package/dist/cjs/checkbox/Checkbox.cjs

@@ -8,6 +8,7 @@ const Checkbox_module = require('./Checkbox.module.css.cjs');
 const jsxRuntime = require('react/jsx-runtime');
 const IconCheck = require('../icons/components/base/IconCheck.cjs');
 
+/** 24px box wrapped in a `<label>` so the text is clickable; forwards every native input prop. */
 const Checkbox = /*#__PURE__*/react.forwardRef((_ref, ref) => {
   let {
     label,

package/dist/cjs/checkbox/Checkbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.cjs","sources":["../../../src/checkbox/Checkbox.tsx"],"sourcesContent":["import { forwardRef, type InputHTMLAttributes, type ReactNode } from 'react'\n\nimport { IconCheck } from '../icons'\nimport cn from 'classnames'\n\nimport styles from './Checkbox.module.css'\n\nexport type CheckboxDataTestId = {\n  root?: string\n  input?: string\n  label?: string\n}\n\nexport type CheckboxProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'type'\n> & {\n  label?: ReactNode\n  dataTestId?: CheckboxDataTestId\n}\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n  ({ label, className, disabled, dataTestId, ...rest }, ref) => (\n    <label\n      className={cn(styles.container, className, {\n        [styles.containerDisabled]: disabled,\n      })}\n      data-testid={dataTestId?.root}\n    >\n      <span className={styles.control}>\n        <input\n          ref={ref}\n          type='checkbox'\n          className={styles.input}\n          disabled={disabled}\n          data-testid={dataTestId?.input}\n          {...rest}\n        />\n        <IconCheck className={styles.tick} />\n      </span>\n      {label ? (\n        <span\n          className={cn(styles.label, { [styles.labelDisabled]: disabled })}\n          data-testid={dataTestId?.label}\n        >\n          {label}\n        </span>\n      ) : null}\n    </label>\n  ),\n)\n\nCheckbox.displayName = 'Checkbox'\n"],"names":["Checkbox","forwardRef","_ref","ref","label","className","disabled","dataTestId","rest","_jsxs","cn","styles","container","containerDisabled","root","children","control","_jsx","type","input","IconCheck","tick","labelDisabled","displayName"],"mappings":";;;;;;;;;;AAqBO,MAAMA,QAAQ,gBAAGC,gBAAU,CAChC,CAAAC,IAAA,EAAsDC,GAAG,KAAA;EAAA,IAAxD;IAAEC,KAAK;IAAEC,SAAS;IAAEC,QAAQ;IAAEC,UAAU;IAAE,GAAGC,IAAAA;AAAK,GAAC,GAAAN,IAAA,CAAA;AAAA,EAAA,oBAClDO,eAAA,CAAA,OAAA,EAAA;IACEJ,SAAS,EAAEK,EAAE,CAACC,eAAM,CAACC,SAAS,EAAEP,SAAS,EAAE;MACzC,CAACM,eAAM,CAACE,iBAAiB,GAAGP,QAAAA;AAC9B,KAAC,CAAE;IACH,aAAaC,EAAAA,UAAU,EAAEO,IAAK;AAAAC,IAAAA,QAAA,gBAE9BN,eAAA,CAAA,MAAA,EAAA;MAAMJ,SAAS,EAAEM,eAAM,CAACK,OAAQ;AAAAD,MAAAA,QAAA,gBAC9BE,cAAA,CAAA,OAAA,EAAA;AACEd,QAAAA,GAAG,EAAEA,GAAI;AACTe,QAAAA,IAAI,EAAC,UAAU;QACfb,SAAS,EAAEM,eAAM,CAACQ,KAAM;AACxBb,QAAAA,QAAQ,EAAEA,QAAS;QACnB,aAAaC,EAAAA,UAAU,EAAEY,KAAM;QAAA,GAC3BX,IAAAA;AAAI,OACT,CAAC,eACFS,cAAA,CAACG,mBAAS,EAAA;QAACf,SAAS,EAAEM,eAAM,CAACU,IAAAA;AAAK,OAAE,CAAC,CAAA;AAAA,KACjC,CAAC,EACNjB,KAAK,gBACJa,cAAA,CAAA,MAAA,EAAA;AACEZ,MAAAA,SAAS,EAAEK,EAAE,CAACC,eAAM,CAACP,KAAK,EAAE;QAAE,CAACO,eAAM,CAACW,aAAa,GAAGhB,QAAAA;AAAS,OAAC,CAAE;MAClE,aAAaC,EAAAA,UAAU,EAAEH,KAAM;AAAAW,MAAAA,QAAA,EAE9BX,KAAAA;KACG,CAAC,GACL,IAAI,CAAA;AAAA,GACH,CAAC,CAAA;AAAA,CAEZ,EAAC;AAEDJ,QAAQ,CAACuB,WAAW,GAAG,UAAU;;;;"}
+{"version":3,"file":"Checkbox.cjs","sources":["../../../src/checkbox/Checkbox.tsx"],"sourcesContent":["import { forwardRef, type InputHTMLAttributes, type ReactNode } from 'react'\n\nimport { IconCheck } from '../icons'\nimport cn from 'classnames'\n\nimport styles from './Checkbox.module.css'\n\nexport type CheckboxDataTestId = {\n  root?: string\n  input?: string\n  label?: string\n}\n\nexport type CheckboxProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'type'\n> & {\n  /** Text next to the box; omit for a bare checkbox. */\n  label?: ReactNode\n  dataTestId?: CheckboxDataTestId\n}\n\n/** 24px box wrapped in a `<label>` so the text is clickable; forwards every native input prop. */\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n  ({ label, className, disabled, dataTestId, ...rest }, ref) => (\n    <label\n      className={cn(styles.container, className, {\n        [styles.containerDisabled]: disabled,\n      })}\n      data-testid={dataTestId?.root}\n    >\n      <span className={styles.control}>\n        <input\n          ref={ref}\n          type='checkbox'\n          className={styles.input}\n          disabled={disabled}\n          data-testid={dataTestId?.input}\n          {...rest}\n        />\n        <IconCheck className={styles.tick} />\n      </span>\n      {label ? (\n        <span\n          className={cn(styles.label, { [styles.labelDisabled]: disabled })}\n          data-testid={dataTestId?.label}\n        >\n          {label}\n        </span>\n      ) : null}\n    </label>\n  ),\n)\n\nCheckbox.displayName = 'Checkbox'\n"],"names":["Checkbox","forwardRef","_ref","ref","label","className","disabled","dataTestId","rest","_jsxs","cn","styles","container","containerDisabled","root","children","control","_jsx","type","input","IconCheck","tick","labelDisabled","displayName"],"mappings":";;;;;;;;;;AAsBA;AACO,MAAMA,QAAQ,gBAAGC,gBAAU,CAChC,CAAAC,IAAA,EAAsDC,GAAG,KAAA;EAAA,IAAxD;IAAEC,KAAK;IAAEC,SAAS;IAAEC,QAAQ;IAAEC,UAAU;IAAE,GAAGC,IAAAA;AAAK,GAAC,GAAAN,IAAA,CAAA;AAAA,EAAA,oBAClDO,eAAA,CAAA,OAAA,EAAA;IACEJ,SAAS,EAAEK,EAAE,CAACC,eAAM,CAACC,SAAS,EAAEP,SAAS,EAAE;MACzC,CAACM,eAAM,CAACE,iBAAiB,GAAGP,QAAAA;AAC9B,KAAC,CAAE;IACH,aAAaC,EAAAA,UAAU,EAAEO,IAAK;AAAAC,IAAAA,QAAA,gBAE9BN,eAAA,CAAA,MAAA,EAAA;MAAMJ,SAAS,EAAEM,eAAM,CAACK,OAAQ;AAAAD,MAAAA,QAAA,gBAC9BE,cAAA,CAAA,OAAA,EAAA;AACEd,QAAAA,GAAG,EAAEA,GAAI;AACTe,QAAAA,IAAI,EAAC,UAAU;QACfb,SAAS,EAAEM,eAAM,CAACQ,KAAM;AACxBb,QAAAA,QAAQ,EAAEA,QAAS;QACnB,aAAaC,EAAAA,UAAU,EAAEY,KAAM;QAAA,GAC3BX,IAAAA;AAAI,OACT,CAAC,eACFS,cAAA,CAACG,mBAAS,EAAA;QAACf,SAAS,EAAEM,eAAM,CAACU,IAAAA;AAAK,OAAE,CAAC,CAAA;AAAA,KACjC,CAAC,EACNjB,KAAK,gBACJa,cAAA,CAAA,MAAA,EAAA;AACEZ,MAAAA,SAAS,EAAEK,EAAE,CAACC,eAAM,CAACP,KAAK,EAAE;QAAE,CAACO,eAAM,CAACW,aAAa,GAAGhB,QAAAA;AAAS,OAAC,CAAE;MAClE,aAAaC,EAAAA,UAAU,EAAEH,KAAM;AAAAW,MAAAA,QAAA,EAE9BX,KAAAA;KACG,CAAC,GACL,IAAI,CAAA;AAAA,GACH,CAAC,CAAA;AAAA,CAEZ,EAAC;AAEDJ,QAAQ,CAACuB,WAAW,GAAG,UAAU;;;;"}

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/counter/Counter.cjs

@@ -2,11 +2,13 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
+const react = require('react');
 const cn = require('classnames');
 const Counter_module = require('./Counter.module.css.cjs');
 const jsxRuntime = require('react/jsx-runtime');
 
-const Counter = _ref => {
+/** 20px pill for notification/unread counts; grows horizontally for multi-digit values. */
+const Counter = /*#__PURE__*/react.forwardRef((_ref, ref) => {
   let {
     variant = 'default',
     className,
@@ -15,12 +17,14 @@ const Counter = _ref => {
     ...rest
   } = _ref;
   return /*#__PURE__*/jsxRuntime.jsx("span", {
+    ref: ref,
     className: cn(Counter_module.counter, Counter_module[variant], className),
     "data-testid": dataTestId?.root,
     ...rest,
     children: children
   });
-};
+});
+Counter.displayName = 'Counter';
 
 exports.Counter = Counter;
 //# sourceMappingURL=Counter.cjs.map