@exromany/lido-app-ui 0.0.1-pre.4 → 0.0.1-pre.5

package/README.md

@@ -30,6 +30,10 @@ function Widget() {
 
 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. `ThemeSwitcher` needs `CookieThemeProvider`; the static `ThemeProvider` has no toggle, so the switcher renders but clicking does nothing. In SSR apps pass the request cookie as `initialThemeName` so the label is right on first paint (the icon already follows `data-lido-theme` in CSS).
 
+Set `color: var(--lido-app-ui-color-text-default)` and `font-family: var(--lido-app-ui-font-family)` on `body`: app-ui sets no default text color.
+
+Optional mono font: `--lido-app-ui-font-family-mono` (system stack by default) is for keys and hashes (the Operators design renders them in Manrope, so this is opt-in). To use a webfont, load it yourself and override the token on `:root`. See the Foundations/Setup story for the full setup.
+
 ## Router links
 
 Every app-ui link (`TextLink`, `NavLink`, `Button` and `IconButton` with `href`, `SmallCard`, `Tag` with `href`, `Breadcrumbs` items with `href`, `Logo` with `href`) renders a plain `<a>` by default. Wrap the app in `LinkProvider` to route in-app hrefs through your router's link component; `externalComponent` does the same for absolute URLs. In-app hash links, `download` links and links with a non-`_self` `target` stay a plain `<a>`; absolute URLs always go to `externalComponent` when one is set. Absolute `http(s)` URLs open in a new tab (`target="_blank"`, `rel="noopener noreferrer"`) unless `target` is passed. Adapters must be `forwardRef` components: under React 18 `ref` is never passed as a prop.
@@ -133,7 +137,7 @@ Override any token after importing the stylesheet. Non-color tokens (radii, typo
 }
 ```
 
-The typography mixins and breakpoint definitions are published too, for products running `postcss-mixins` / `postcss-custom-media`:
+The typography and motion mixins (`typography-mixins.css`, `motion-mixins.css`) and breakpoint definitions are published too under `@lidofinance/lido-app-ui/styles/*`, for products running `postcss-mixins` / `postcss-custom-media`. `mixinsDir` picks up both mixin files. The motion mixins use nested rules, so keep `postcss-nested` (or target browsers with native CSS nesting):
 
 ```js
 // postcss.config.mjs
@@ -151,11 +155,18 @@ export default {
       files: [path.join(stylesDir, 'breakpoints.css')],
     },
     'postcss-mixins': { mixinsDir: stylesDir },
+    'postcss-nested': {},
     'postcss-custom-media': { preserve: false },
   },
 }
 ```
 
+## Motion
+
+Durations, easings and amplitudes are tokens: enter `--lido-app-ui-duration-{fast,base,slow}`, exit `-exit` variants (shorter), `--lido-app-ui-easing-*`, `--lido-app-ui-motion-{shift,shift-lg,scale}`, `--lido-app-ui-transition-colors`. Override them on `:root` to retune.
+
+Custom components can reuse the mixins (`motion-fade`, `motion-pop`, `motion-slide`, `motion-scrim`, `motion-collapse`, `motion-press`; see the `postcss-mixins` setup above) together with the `usePresence` hook. It keeps an element mounted through its exit and returns `{ mounted, status, ref, motionProps }`; spread `motionProps` (`data-state`, `data-motion`) on the element the CSS keys on. Mixins respect `prefers-reduced-motion`.
+
 ## Layout
 
 Breakpoints are desktop-first: `-down` is `(width <= N)`, `-up` is `(width > N)`. The queries use range syntax (Safari 16.4+, Chrome 104+, Firefox 63+).
@@ -176,9 +187,13 @@ In CSS use `@media (--lido-app-ui-breakpoint-md-down)`. Responsive props such as
 <Stack gap={{ base: 24, smDown: 12 }}>{children}</Stack>
 ```
 
+For `@container`, which `postcss-custom-media` doesn't resolve, use raw values such as `@container (width <= 400px)`.
+
+`Banner`, `Callout`, `EmptyState` and `StatCard` size their layout to their own width via container queries, so give them a definite-width parent; in a shrink-to-fit parent they collapse.
+
 Page shells align to the page gutter, which shrinks on narrow screens: `padding-inline: var(--lido-app-ui-page-gutter)`.
 
-Popovers, tooltips and modals with `withOverlay` portal to `<body>` and stack by `--lido-app-ui-z-index-*`: header 250, popover and modal 1000, toast 1050, tooltip 1100. Keep your own app chrome below 1000. `Modal` `inertOthers` makes the rest of `<body>` inert; mark body-level toast or live-region roots with `data-lido-overlay-keep` to keep them live.
+Popovers, tooltips, drawers and modals with `withOverlay` portal to `<body>` and stack by `--lido-app-ui-z-index-*`: header 250, drawer, popover and modal 1000, toast 1050, tooltip 1100. Keep your own app chrome below 1000. `Modal` `inertOthers` makes the rest of `<body>` inert; mark body-level toast or live-region roots with `data-lido-overlay-keep` to keep them live.
 
 ## More
 

package/dist/README.md

@@ -30,6 +30,10 @@ function Widget() {
 
 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. `ThemeSwitcher` needs `CookieThemeProvider`; the static `ThemeProvider` has no toggle, so the switcher renders but clicking does nothing. In SSR apps pass the request cookie as `initialThemeName` so the label is right on first paint (the icon already follows `data-lido-theme` in CSS).
 
+Set `color: var(--lido-app-ui-color-text-default)` and `font-family: var(--lido-app-ui-font-family)` on `body`: app-ui sets no default text color.
+
+Optional mono font: `--lido-app-ui-font-family-mono` (system stack by default) is for keys and hashes (the Operators design renders them in Manrope, so this is opt-in). To use a webfont, load it yourself and override the token on `:root`. See the Foundations/Setup story for the full setup.
+
 ## Router links
 
 Every app-ui link (`TextLink`, `NavLink`, `Button` and `IconButton` with `href`, `SmallCard`, `Tag` with `href`, `Breadcrumbs` items with `href`, `Logo` with `href`) renders a plain `<a>` by default. Wrap the app in `LinkProvider` to route in-app hrefs through your router's link component; `externalComponent` does the same for absolute URLs. In-app hash links, `download` links and links with a non-`_self` `target` stay a plain `<a>`; absolute URLs always go to `externalComponent` when one is set. Absolute `http(s)` URLs open in a new tab (`target="_blank"`, `rel="noopener noreferrer"`) unless `target` is passed. Adapters must be `forwardRef` components: under React 18 `ref` is never passed as a prop.
@@ -133,7 +137,7 @@ Override any token after importing the stylesheet. Non-color tokens (radii, typo
 }
 ```
 
-The typography mixins and breakpoint definitions are published too, for products running `postcss-mixins` / `postcss-custom-media`:
+The typography and motion mixins (`typography-mixins.css`, `motion-mixins.css`) and breakpoint definitions are published too under `@lidofinance/lido-app-ui/styles/*`, for products running `postcss-mixins` / `postcss-custom-media`. `mixinsDir` picks up both mixin files. The motion mixins use nested rules, so keep `postcss-nested` (or target browsers with native CSS nesting):
 
 ```js
 // postcss.config.mjs
@@ -151,11 +155,18 @@ export default {
       files: [path.join(stylesDir, 'breakpoints.css')],
     },
     'postcss-mixins': { mixinsDir: stylesDir },
+    'postcss-nested': {},
     'postcss-custom-media': { preserve: false },
   },
 }
 ```
 
+## Motion
+
+Durations, easings and amplitudes are tokens: enter `--lido-app-ui-duration-{fast,base,slow}`, exit `-exit` variants (shorter), `--lido-app-ui-easing-*`, `--lido-app-ui-motion-{shift,shift-lg,scale}`, `--lido-app-ui-transition-colors`. Override them on `:root` to retune.
+
+Custom components can reuse the mixins (`motion-fade`, `motion-pop`, `motion-slide`, `motion-scrim`, `motion-collapse`, `motion-press`; see the `postcss-mixins` setup above) together with the `usePresence` hook. It keeps an element mounted through its exit and returns `{ mounted, status, ref, motionProps }`; spread `motionProps` (`data-state`, `data-motion`) on the element the CSS keys on. Mixins respect `prefers-reduced-motion`.
+
 ## Layout
 
 Breakpoints are desktop-first: `-down` is `(width <= N)`, `-up` is `(width > N)`. The queries use range syntax (Safari 16.4+, Chrome 104+, Firefox 63+).
@@ -176,9 +187,13 @@ In CSS use `@media (--lido-app-ui-breakpoint-md-down)`. Responsive props such as
 <Stack gap={{ base: 24, smDown: 12 }}>{children}</Stack>
 ```
 
+For `@container`, which `postcss-custom-media` doesn't resolve, use raw values such as `@container (width <= 400px)`.
+
+`Banner`, `Callout`, `EmptyState` and `StatCard` size their layout to their own width via container queries, so give them a definite-width parent; in a shrink-to-fit parent they collapse.
+
 Page shells align to the page gutter, which shrinks on narrow screens: `padding-inline: var(--lido-app-ui-page-gutter)`.
 
-Popovers, tooltips and modals with `withOverlay` portal to `<body>` and stack by `--lido-app-ui-z-index-*`: header 250, popover and modal 1000, toast 1050, tooltip 1100. Keep your own app chrome below 1000. `Modal` `inertOthers` makes the rest of `<body>` inert; mark body-level toast or live-region roots with `data-lido-overlay-keep` to keep them live.
+Popovers, tooltips, drawers and modals with `withOverlay` portal to `<body>` and stack by `--lido-app-ui-z-index-*`: header 250, drawer, popover and modal 1000, toast 1050, tooltip 1100. Keep your own app chrome below 1000. `Modal` `inertOthers` makes the rest of `<body>` inert; mark body-level toast or live-region roots with `data-lido-overlay-keep` to keep them live.
 
 ## More
 

package/dist/cjs/accordion/Accordion.cjs

@@ -6,7 +6,7 @@ const react = require('react');
 const cn = require('classnames');
 const Accordion_module = require('./Accordion.module.css.cjs');
 const jsxRuntime = require('react/jsx-runtime');
-const IconChevronUp = require('../icons/components/base/IconChevronUp.cjs');
+const usePresence = require('../hooks/usePresence.cjs');
 const IconChevronDown = require('../icons/components/base/IconChevronDown.cjs');
 
 /** Collapsible section, uncontrolled by default; pass `expanded` + `onExpandedChange` to drive it from your own state. */
@@ -25,6 +25,12 @@ const Accordion = _ref => {
   const [uncontrolledExpanded, setUncontrolledExpanded] = react.useState(defaultExpanded);
   const isExpanded = expanded ?? uncontrolledExpanded;
   const contentId = react.useId();
+  const {
+    ref: presenceRef,
+    motionProps
+  } = usePresence.usePresence(isExpanded, {
+    keepMounted: true
+  });
   const handleToggle = () => {
     const next = !isExpanded;
     if (expanded == null) setUncontrolledExpanded(next);
@@ -48,17 +54,16 @@ const Accordion = _ref => {
         "data-testid": dataTestId?.title,
         children: title
       }), /*#__PURE__*/jsxRuntime.jsx("span", {
-        className: Accordion_module.chevron,
+        className: cn(Accordion_module.chevron, isExpanded && Accordion_module.chevronOpen),
         "aria-hidden": "true",
-        children: isExpanded ? /*#__PURE__*/jsxRuntime.jsx(IconChevronUp.IconChevronUp, {}) : /*#__PURE__*/jsxRuntime.jsx(IconChevronDown.IconChevronDown, {})
+        children: /*#__PURE__*/jsxRuntime.jsx(IconChevronDown.IconChevronDown, {})
       })]
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
       id: contentId,
-      className: cn(Accordion_module.contentWrapper, {
-        [Accordion_module.expanded]: isExpanded
-      }),
+      ref: presenceRef,
+      className: Accordion_module.contentWrapper,
+      ...motionProps,
       children: /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: Accordion_module.content,
         children: /*#__PURE__*/jsxRuntime.jsx("div", {
           className: Accordion_module.contentInner,
           "data-testid": dataTestId?.content,

package/dist/cjs/accordion/Accordion.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.cjs","sources":["../../../src/accordion/Accordion.tsx"],"sourcesContent":["import {\n  useId,\n  useState,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n} from 'react'\n\nimport { IconChevronDown, IconChevronUp } from '../icons'\nimport cn from 'classnames'\n\nimport styles from './Accordion.module.css'\n\nexport type AccordionDataTestId = {\n  root?: string\n  header?: string\n  title?: string\n  content?: string\n}\n\nexport type AccordionProps = Omit<ComponentPropsWithoutRef<'div'>, 'title'> & {\n  title: ReactNode\n  /** Bottom divider; turn it off on the last item of a list. */\n  border?: boolean\n  defaultExpanded?: boolean\n  /** Controlled mode, pair with `onExpandedChange`. */\n  expanded?: boolean\n  onExpandedChange?: (expanded: boolean) => void\n  dataTestId?: AccordionDataTestId\n}\n\n/** Collapsible section, uncontrolled by default; pass `expanded` + `onExpandedChange` to drive it from your own state. */\nexport const Accordion = ({\n  title,\n  border = true,\n  defaultExpanded = false,\n  expanded,\n  onExpandedChange,\n  children,\n  className,\n  dataTestId,\n  ...rest\n}: AccordionProps) => {\n  const [uncontrolledExpanded, setUncontrolledExpanded] =\n    useState(defaultExpanded)\n  const isExpanded = expanded ?? uncontrolledExpanded\n  const contentId = useId()\n\n  const handleToggle = () => {\n    const next = !isExpanded\n    if (expanded == null) setUncontrolledExpanded(next)\n    onExpandedChange?.(next)\n  }\n\n  return (\n    <div\n      className={cn(styles.accordion, className, {\n        [styles.borderless]: !border,\n      })}\n      data-testid={dataTestId?.root}\n      {...rest}\n    >\n      <button\n        type='button'\n        className={styles.header}\n        aria-expanded={isExpanded}\n        aria-controls={contentId}\n        onClick={handleToggle}\n        data-testid={dataTestId?.header}\n      >\n        <span className={styles.title} data-testid={dataTestId?.title}>\n          {title}\n        </span>\n        <span className={styles.chevron} aria-hidden='true'>\n          {isExpanded ? <IconChevronUp /> : <IconChevronDown />}\n        </span>\n      </button>\n      <div\n        id={contentId}\n        className={cn(styles.contentWrapper, {\n          [styles.expanded]: isExpanded,\n        })}\n      >\n        <div className={styles.content}>\n          <div\n            className={styles.contentInner}\n            data-testid={dataTestId?.content}\n          >\n            {children}\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nAccordion.displayName = 'Accordion'\n"],"names":["Accordion","_ref","title","border","defaultExpanded","expanded","onExpandedChange","children","className","dataTestId","rest","uncontrolledExpanded","setUncontrolledExpanded","useState","isExpanded","contentId","useId","handleToggle","next","_jsxs","cn","styles","accordion","borderless","root","type","header","onClick","_jsx","chevron","IconChevronUp","IconChevronDown","id","contentWrapper","content","contentInner","displayName"],"mappings":";;;;;;;;;;;AA8BA;AACaA,MAAAA,SAAS,GAAGC,IAAA,IAUH;EAAA,IAVI;IACxBC,KAAK;AACLC,IAAAA,MAAM,GAAG,IAAI;AACbC,IAAAA,eAAe,GAAG,KAAK;IACvBC,QAAQ;IACRC,gBAAgB;IAChBC,QAAQ;IACRC,SAAS;IACTC,UAAU;IACV,GAAGC,IAAAA;AACW,GAAC,GAAAT,IAAA,CAAA;EACf,MAAM,CAACU,oBAAoB,EAAEC,uBAAuB,CAAC,GACnDC,cAAQ,CAACT,eAAe,CAAC,CAAA;AAC3B,EAAA,MAAMU,UAAU,GAAGT,QAAQ,IAAIM,oBAAoB,CAAA;AACnD,EAAA,MAAMI,SAAS,GAAGC,WAAK,EAAE,CAAA;EAEzB,MAAMC,YAAY,GAAGA,MAAM;IACzB,MAAMC,IAAI,GAAG,CAACJ,UAAU,CAAA;AACxB,IAAA,IAAIT,QAAQ,IAAI,IAAI,EAAEO,uBAAuB,CAACM,IAAI,CAAC,CAAA;IACnDZ,gBAAgB,GAAGY,IAAI,CAAC,CAAA;GACzB,CAAA;AAED,EAAA,oBACEC,eAAA,CAAA,KAAA,EAAA;IACEX,SAAS,EAAEY,EAAE,CAACC,gBAAM,CAACC,SAAS,EAAEd,SAAS,EAAE;AACzC,MAAA,CAACa,gBAAM,CAACE,UAAU,GAAG,CAACpB,MAAAA;AACxB,KAAC,CAAE;IACH,aAAaM,EAAAA,UAAU,EAAEe,IAAK;AAAA,IAAA,GAC1Bd,IAAI;AAAAH,IAAAA,QAAA,gBAERY,eAAA,CAAA,QAAA,EAAA;AACEM,MAAAA,IAAI,EAAC,QAAQ;MACbjB,SAAS,EAAEa,gBAAM,CAACK,MAAO;AACzB,MAAA,eAAA,EAAeZ,UAAW;AAC1B,MAAA,eAAA,EAAeC,SAAU;AACzBY,MAAAA,OAAO,EAAEV,YAAa;MACtB,aAAaR,EAAAA,UAAU,EAAEiB,MAAO;AAAAnB,MAAAA,QAAA,gBAEhCqB,cAAA,CAAA,MAAA,EAAA;QAAMpB,SAAS,EAAEa,gBAAM,CAACnB,KAAM;QAAC,aAAaO,EAAAA,UAAU,EAAEP,KAAM;AAAAK,QAAAA,QAAA,EAC3DL,KAAAA;OACG,CAAC,eACP0B,cAAA,CAAA,MAAA,EAAA;QAAMpB,SAAS,EAAEa,gBAAM,CAACQ,OAAQ;AAAC,QAAA,aAAA,EAAY,MAAM;AAAAtB,QAAAA,QAAA,EAChDO,UAAU,gBAAGc,cAAA,CAACE,2BAAa,EAAE,EAAA,CAAC,gBAAGF,cAAA,CAACG,+BAAe,EAAE,EAAA,CAAA;AAAC,OACjD,CAAC,CAAA;KACD,CAAC,eACTH,cAAA,CAAA,KAAA,EAAA;AACEI,MAAAA,EAAE,EAAEjB,SAAU;AACdP,MAAAA,SAAS,EAAEY,EAAE,CAACC,gBAAM,CAACY,cAAc,EAAE;QACnC,CAACZ,gBAAM,CAAChB,QAAQ,GAAGS,UAAAA;AACrB,OAAC,CAAE;AAAAP,MAAAA,QAAA,eAEHqB,cAAA,CAAA,KAAA,EAAA;QAAKpB,SAAS,EAAEa,gBAAM,CAACa,OAAQ;AAAA3B,QAAAA,QAAA,eAC7BqB,cAAA,CAAA,KAAA,EAAA;UACEpB,SAAS,EAAEa,gBAAM,CAACc,YAAa;UAC/B,aAAa1B,EAAAA,UAAU,EAAEyB,OAAQ;AAAA3B,UAAAA,QAAA,EAEhCA,QAAAA;SACE,CAAA;OACF,CAAA;AAAC,KACH,CAAC,CAAA;AAAA,GACH,CAAC,CAAA;AAEV,EAAC;AAEDP,SAAS,CAACoC,WAAW,GAAG,WAAW;;;;"}
+{"version":3,"file":"Accordion.cjs","sources":["../../../src/accordion/Accordion.tsx"],"sourcesContent":["import {\n  useId,\n  useState,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n} from 'react'\n\nimport { usePresence } from '../hooks'\nimport { IconChevronDown } from '../icons'\nimport cn from 'classnames'\n\nimport styles from './Accordion.module.css'\n\nexport type AccordionDataTestId = {\n  root?: string\n  header?: string\n  title?: string\n  content?: string\n}\n\nexport type AccordionProps = Omit<ComponentPropsWithoutRef<'div'>, 'title'> & {\n  title: ReactNode\n  /** Bottom divider; turn it off on the last item of a list. */\n  border?: boolean\n  defaultExpanded?: boolean\n  /** Controlled mode, pair with `onExpandedChange`. */\n  expanded?: boolean\n  onExpandedChange?: (expanded: boolean) => void\n  dataTestId?: AccordionDataTestId\n}\n\n/** Collapsible section, uncontrolled by default; pass `expanded` + `onExpandedChange` to drive it from your own state. */\nexport const Accordion = ({\n  title,\n  border = true,\n  defaultExpanded = false,\n  expanded,\n  onExpandedChange,\n  children,\n  className,\n  dataTestId,\n  ...rest\n}: AccordionProps) => {\n  const [uncontrolledExpanded, setUncontrolledExpanded] =\n    useState(defaultExpanded)\n  const isExpanded = expanded ?? uncontrolledExpanded\n  const contentId = useId()\n  const { ref: presenceRef, motionProps } = usePresence<HTMLDivElement>(\n    isExpanded,\n    { keepMounted: true },\n  )\n\n  const handleToggle = () => {\n    const next = !isExpanded\n    if (expanded == null) setUncontrolledExpanded(next)\n    onExpandedChange?.(next)\n  }\n\n  return (\n    <div\n      className={cn(styles.accordion, className, {\n        [styles.borderless]: !border,\n      })}\n      data-testid={dataTestId?.root}\n      {...rest}\n    >\n      <button\n        type='button'\n        className={styles.header}\n        aria-expanded={isExpanded}\n        aria-controls={contentId}\n        onClick={handleToggle}\n        data-testid={dataTestId?.header}\n      >\n        <span className={styles.title} data-testid={dataTestId?.title}>\n          {title}\n        </span>\n        <span\n          className={cn(styles.chevron, isExpanded && styles.chevronOpen)}\n          aria-hidden='true'\n        >\n          <IconChevronDown />\n        </span>\n      </button>\n      <div\n        id={contentId}\n        ref={presenceRef}\n        className={styles.contentWrapper}\n        {...motionProps}\n      >\n        <div>\n          <div\n            className={styles.contentInner}\n            data-testid={dataTestId?.content}\n          >\n            {children}\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nAccordion.displayName = 'Accordion'\n"],"names":["Accordion","_ref","title","border","defaultExpanded","expanded","onExpandedChange","children","className","dataTestId","rest","uncontrolledExpanded","setUncontrolledExpanded","useState","isExpanded","contentId","useId","ref","presenceRef","motionProps","usePresence","keepMounted","handleToggle","next","_jsxs","cn","styles","accordion","borderless","root","type","header","onClick","_jsx","chevron","chevronOpen","IconChevronDown","id","contentWrapper","contentInner","content","displayName"],"mappings":"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"}

package/dist/cjs/accordion/Accordion.module.css.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const styles = {"accordion":"Accordion-module_accordion__Wzyid","borderless":"Accordion-module_borderless__AX3pr","header":"Accordion-module_header__xrik8","title":"Accordion-module_title__n-YUT","chevron":"Accordion-module_chevron__oFGVg","contentWrapper":"Accordion-module_contentWrapper__UEl1o","expanded":"Accordion-module_expanded__NRyM0","content":"Accordion-module_content__V9Ftc","contentInner":"Accordion-module_contentInner__9z222"};
+const styles = {"accordion":"Accordion-module_accordion__Wzyid","borderless":"Accordion-module_borderless__AX3pr","header":"Accordion-module_header__xrik8","title":"Accordion-module_title__n-YUT","chevron":"Accordion-module_chevron__oFGVg","chevronOpen":"Accordion-module_chevronOpen__Lq6B4","contentWrapper":"Accordion-module_contentWrapper__UEl1o","contentInner":"Accordion-module_contentInner__9z222"};
 
 module.exports = styles;
 //# sourceMappingURL=Accordion.module.css.cjs.map

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

@@ -7,7 +7,7 @@ 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 Spinner = require('../spinner/Spinner.cjs');
 const Address = require('../address/Address.cjs');
 
 /** Pill button showing an identicon and the trimmed address. */
@@ -32,8 +32,9 @@ const AddressButton = /*#__PURE__*/react.forwardRef((_ref, ref) => {
       children: [/*#__PURE__*/jsxRuntime.jsx("span", {
         className: AddressButton_module.slot,
         "aria-hidden": "true",
-        children: /*#__PURE__*/jsxRuntime.jsx(IconLoaderCircle.IconLoaderCircle, {
-          className: AddressButton_module.spinner
+        children: /*#__PURE__*/jsxRuntime.jsx(Spinner.Spinner, {
+          size: "sm",
+          decorative: true
         })
       }), "Loading"]
     }) : /*#__PURE__*/jsxRuntime.jsx(Address.Address, {

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

@@ -1 +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;;;;"}
+{"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 { Spinner } from '../spinner'\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            <Spinner size='sm' decorative />\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","Spinner","size","decorative","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,eAAO,EAAA;AAACC,UAAAA,IAAI,EAAC,IAAI;UAACC,UAAU,EAAA,IAAA;SAAE,CAAA;AAAC,OAC5B,CAAC,EAET,SAAA,CAAA;AAAA,KAAE,CAAC,gBAEHb,cAAA,CAACc,eAAO,EAAA;AAACrB,MAAAA,OAAO,EAAEA,OAAQ;AAACC,MAAAA,OAAO,EAAEA,OAAQ;AAACqB,MAAAA,SAAS,EAAE,EAAA;KAAK,CAAA;AAC9D,GACK,CAAC,CAAA;AAAA,CAEb,EAAC;AAED1B,aAAa,CAAC2B,WAAW,GAAG,eAAe;;;;"}

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

@@ -1,6 +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"};
+const styles = {"button":"AddressButton-module_button__cNJUm","loading":"AddressButton-module_loading__TmxUZ","slot":"AddressButton-module_slot__A5Xbe"};
 
 module.exports = styles;
 //# sourceMappingURL=AddressButton.module.css.cjs.map

package/dist/cjs/badge/Badge.cjs

@@ -24,7 +24,10 @@ const Badge = _ref => {
       "aria-hidden": "true",
       "data-testid": dataTestId?.icon,
       children: icon
-    }), children]
+    }), /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: Badge_module.label,
+      children: children
+    })]
   });
 };
 

package/dist/cjs/badge/Badge.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.cjs","sources":["../../../src/badge/Badge.tsx"],"sourcesContent":["import cn from 'classnames'\nimport type { HTMLAttributes, ReactNode } from 'react'\nimport styles from './Badge.module.css'\n\nexport type BadgeDataTestId = {\n  root?: string\n  icon?: string\n}\n\nexport type BadgeProps = HTMLAttributes<HTMLSpanElement> & {\n  /** Optional glyph before the label. Omitted entirely when not passed. */\n  icon?: ReactNode\n  dataTestId?: BadgeDataTestId\n}\n\n/** Bordered pill for a single trust/verification marker (audited, verified). */\nexport const Badge = ({\n  icon,\n  className,\n  children,\n  dataTestId,\n  ...rest\n}: BadgeProps) => (\n  <span\n    className={cn(styles.badge, className)}\n    data-testid={dataTestId?.root}\n    {...rest}\n  >\n    {icon && (\n      <span\n        className={styles.icon}\n        aria-hidden='true'\n        data-testid={dataTestId?.icon}\n      >\n        {icon}\n      </span>\n    )}\n    {children}\n  </span>\n)\n"],"names":["Badge","_ref","icon","className","children","dataTestId","rest","_jsxs","cn","styles","badge","root","_jsx"],"mappings":";;;;;;;;AAeA;AACO,MAAMA,KAAK,GAAGC,IAAA,IAAA;EAAA,IAAC;IACpBC,IAAI;IACJC,SAAS;IACTC,QAAQ;IACRC,UAAU;IACV,GAAGC,IAAAA;AACO,GAAC,GAAAL,IAAA,CAAA;AAAA,EAAA,oBACXM,eAAA,CAAA,MAAA,EAAA;IACEJ,SAAS,EAAEK,EAAE,CAACC,YAAM,CAACC,KAAK,EAAEP,SAAS,CAAE;IACvC,aAAaE,EAAAA,UAAU,EAAEM,IAAK;AAAA,IAAA,GAC1BL,IAAI;IAAAF,QAAA,EAAA,CAEPF,IAAI,iBACHU,cAAA,CAAA,MAAA,EAAA;MACET,SAAS,EAAEM,YAAM,CAACP,IAAK;AACvB,MAAA,aAAA,EAAY,MAAM;MAClB,aAAaG,EAAAA,UAAU,EAAEH,IAAK;AAAAE,MAAAA,QAAA,EAE7BF,IAAAA;KACG,CACP,EACAE,QAAQ,CAAA;AAAA,GACL,CAAC,CAAA;AAAA;;;;"}
+{"version":3,"file":"Badge.cjs","sources":["../../../src/badge/Badge.tsx"],"sourcesContent":["import cn from 'classnames'\nimport type { HTMLAttributes, ReactNode } from 'react'\nimport styles from './Badge.module.css'\n\nexport type BadgeDataTestId = {\n  root?: string\n  icon?: string\n}\n\nexport type BadgeProps = HTMLAttributes<HTMLSpanElement> & {\n  /** Optional glyph before the label. Omitted entirely when not passed. */\n  icon?: ReactNode\n  dataTestId?: BadgeDataTestId\n}\n\n/** Bordered pill for a single trust/verification marker (audited, verified). */\nexport const Badge = ({\n  icon,\n  className,\n  children,\n  dataTestId,\n  ...rest\n}: BadgeProps) => (\n  <span\n    className={cn(styles.badge, className)}\n    data-testid={dataTestId?.root}\n    {...rest}\n  >\n    {icon && (\n      <span\n        className={styles.icon}\n        aria-hidden='true'\n        data-testid={dataTestId?.icon}\n      >\n        {icon}\n      </span>\n    )}\n    <span className={styles.label}>{children}</span>\n  </span>\n)\n"],"names":["Badge","_ref","icon","className","children","dataTestId","rest","_jsxs","cn","styles","badge","root","_jsx","label"],"mappings":";;;;;;;;AAeA;AACO,MAAMA,KAAK,GAAGC,IAAA,IAAA;EAAA,IAAC;IACpBC,IAAI;IACJC,SAAS;IACTC,QAAQ;IACRC,UAAU;IACV,GAAGC,IAAAA;AACO,GAAC,GAAAL,IAAA,CAAA;AAAA,EAAA,oBACXM,eAAA,CAAA,MAAA,EAAA;IACEJ,SAAS,EAAEK,EAAE,CAACC,YAAM,CAACC,KAAK,EAAEP,SAAS,CAAE;IACvC,aAAaE,EAAAA,UAAU,EAAEM,IAAK;AAAA,IAAA,GAC1BL,IAAI;IAAAF,QAAA,EAAA,CAEPF,IAAI,iBACHU,cAAA,CAAA,MAAA,EAAA;MACET,SAAS,EAAEM,YAAM,CAACP,IAAK;AACvB,MAAA,aAAA,EAAY,MAAM;MAClB,aAAaG,EAAAA,UAAU,EAAEH,IAAK;AAAAE,MAAAA,QAAA,EAE7BF,IAAAA;KACG,CACP,eACDU,cAAA,CAAA,MAAA,EAAA;MAAMT,SAAS,EAAEM,YAAM,CAACI,KAAM;AAAAT,MAAAA,QAAA,EAAEA,QAAAA;AAAQ,KAAO,CAAC,CAAA;AAAA,GAC5C,CAAC,CAAA;AAAA;;;;"}

package/dist/cjs/badge/Badge.module.css.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const styles = {"badge":"Badge-module_badge__ikDSa","icon":"Badge-module_icon__lkt9n"};
+const styles = {"badge":"Badge-module_badge__ikDSa","label":"Badge-module_label__FUOSJ","icon":"Badge-module_icon__lkt9n"};
 
 module.exports = styles;
 //# sourceMappingURL=Badge.module.css.cjs.map

package/dist/cjs/banner/Banner.cjs

@@ -6,7 +6,7 @@ const cn = require('classnames');
 const Banner_module = require('./Banner.module.css.cjs');
 const jsxRuntime = require('react/jsx-runtime');
 
-/** Compact card row: icon, title and description, with an optional `action` slot on the right (usually a `Button`). */
+/** Compact card row: icon, title and description, with an optional `action` slot on the right (usually a `Button`). Needs a definite-width parent (it fills it). */
 const Banner = _ref => {
   let {
     icon,
@@ -17,33 +17,36 @@ const Banner = _ref => {
     dataTestId,
     ...rest
   } = _ref;
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: cn(Banner_module.banner, className),
     "data-testid": dataTestId?.root,
     ...rest,
-    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: Banner_module.content,
-      children: [icon ? /*#__PURE__*/jsxRuntime.jsx("span", {
-        className: Banner_module.icon,
-        "data-testid": dataTestId?.icon,
-        children: icon
-      }) : null, /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: Banner_module.text,
-        children: [/*#__PURE__*/jsxRuntime.jsx("p", {
-          className: Banner_module.title,
-          "data-testid": dataTestId?.title,
-          children: title
-        }), description ? /*#__PURE__*/jsxRuntime.jsx("p", {
-          className: Banner_module.description,
-          "data-testid": dataTestId?.description,
-          children: description
-        }) : null]
-      })]
-    }), action ? /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: Banner_module.action,
-      "data-testid": dataTestId?.action,
-      children: action
-    }) : null]
+    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: Banner_module.inner,
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: Banner_module.content,
+        children: [icon ? /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: Banner_module.icon,
+          "data-testid": dataTestId?.icon,
+          children: icon
+        }) : null, /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: Banner_module.text,
+          children: [/*#__PURE__*/jsxRuntime.jsx("p", {
+            className: Banner_module.title,
+            "data-testid": dataTestId?.title,
+            children: title
+          }), description ? /*#__PURE__*/jsxRuntime.jsx("p", {
+            className: Banner_module.description,
+            "data-testid": dataTestId?.description,
+            children: description
+          }) : null]
+        })]
+      }), action ? /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: Banner_module.action,
+        "data-testid": dataTestId?.action,
+        children: action
+      }) : null]
+    })
   });
 };
 Banner.displayName = 'Banner';

package/dist/cjs/banner/Banner.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.cjs","sources":["../../../src/banner/Banner.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './Banner.module.css'\n\nexport type BannerDataTestId = {\n  root?: string\n  icon?: string\n  title?: string\n  description?: string\n  action?: string\n}\n\nexport type BannerProps = ComponentPropsWithoutRef<'div'> & {\n  icon?: ReactNode\n  title: ReactNode\n  description?: ReactNode\n  action?: ReactNode\n  dataTestId?: BannerDataTestId\n}\n\n/** Compact card row: icon, title and description, with an optional `action` slot on the right (usually a `Button`). */\nexport const Banner = ({\n  icon,\n  title,\n  description,\n  action,\n  className,\n  dataTestId,\n  ...rest\n}: BannerProps) => (\n  <div\n    className={cn(styles.banner, className)}\n    data-testid={dataTestId?.root}\n    {...rest}\n  >\n    <div className={styles.content}>\n      {icon ? (\n        <span className={styles.icon} data-testid={dataTestId?.icon}>\n          {icon}\n        </span>\n      ) : null}\n      <div className={styles.text}>\n        <p className={styles.title} data-testid={dataTestId?.title}>\n          {title}\n        </p>\n        {description ? (\n          <p\n            className={styles.description}\n            data-testid={dataTestId?.description}\n          >\n            {description}\n          </p>\n        ) : null}\n      </div>\n    </div>\n    {action ? (\n      <div className={styles.action} data-testid={dataTestId?.action}>\n        {action}\n      </div>\n    ) : null}\n  </div>\n)\n\nBanner.displayName = 'Banner'\n"],"names":["Banner","_ref","icon","title","description","action","className","dataTestId","rest","_jsxs","cn","styles","banner","root","children","content","_jsx","text","displayName"],"mappings":";;;;;;;;AAsBA;AACO,MAAMA,MAAM,GAAGC,IAAA,IAAA;EAAA,IAAC;IACrBC,IAAI;IACJC,KAAK;IACLC,WAAW;IACXC,MAAM;IACNC,SAAS;IACTC,UAAU;IACV,GAAGC,IAAAA;AACQ,GAAC,GAAAP,IAAA,CAAA;AAAA,EAAA,oBACZQ,eAAA,CAAA,KAAA,EAAA;IACEH,SAAS,EAAEI,EAAE,CAACC,aAAM,CAACC,MAAM,EAAEN,SAAS,CAAE;IACxC,aAAaC,EAAAA,UAAU,EAAEM,IAAK;AAAA,IAAA,GAC1BL,IAAI;AAAAM,IAAAA,QAAA,gBAERL,eAAA,CAAA,KAAA,EAAA;MAAKH,SAAS,EAAEK,aAAM,CAACI,OAAQ;MAAAD,QAAA,EAAA,CAC5BZ,IAAI,gBACHc,cAAA,CAAA,MAAA,EAAA;QAAMV,SAAS,EAAEK,aAAM,CAACT,IAAK;QAAC,aAAaK,EAAAA,UAAU,EAAEL,IAAK;AAAAY,QAAAA,QAAA,EACzDZ,IAAAA;AAAI,OACD,CAAC,GACL,IAAI,eACRO,eAAA,CAAA,KAAA,EAAA;QAAKH,SAAS,EAAEK,aAAM,CAACM,IAAK;AAAAH,QAAAA,QAAA,gBAC1BE,cAAA,CAAA,GAAA,EAAA;UAAGV,SAAS,EAAEK,aAAM,CAACR,KAAM;UAAC,aAAaI,EAAAA,UAAU,EAAEJ,KAAM;AAAAW,UAAAA,QAAA,EACxDX,KAAAA;AAAK,SACL,CAAC,EACHC,WAAW,gBACVY,cAAA,CAAA,GAAA,EAAA;UACEV,SAAS,EAAEK,aAAM,CAACP,WAAY;UAC9B,aAAaG,EAAAA,UAAU,EAAEH,WAAY;AAAAU,UAAAA,QAAA,EAEpCV,WAAAA;SACA,CAAC,GACF,IAAI,CAAA;AAAA,OACL,CAAC,CAAA;AAAA,KACH,CAAC,EACLC,MAAM,gBACLW,cAAA,CAAA,KAAA,EAAA;MAAKV,SAAS,EAAEK,aAAM,CAACN,MAAO;MAAC,aAAaE,EAAAA,UAAU,EAAEF,MAAO;AAAAS,MAAAA,QAAA,EAC5DT,MAAAA;KACE,CAAC,GACJ,IAAI,CAAA;AAAA,GACL,CAAC,CAAA;AAAA,EACP;AAEDL,MAAM,CAACkB,WAAW,GAAG,QAAQ;;;;"}
+{"version":3,"file":"Banner.cjs","sources":["../../../src/banner/Banner.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './Banner.module.css'\n\nexport type BannerDataTestId = {\n  root?: string\n  icon?: string\n  title?: string\n  description?: string\n  action?: string\n}\n\nexport type BannerProps = ComponentPropsWithoutRef<'div'> & {\n  icon?: ReactNode\n  title: ReactNode\n  description?: ReactNode\n  action?: ReactNode\n  dataTestId?: BannerDataTestId\n}\n\n/** Compact card row: icon, title and description, with an optional `action` slot on the right (usually a `Button`). Needs a definite-width parent (it fills it). */\nexport const Banner = ({\n  icon,\n  title,\n  description,\n  action,\n  className,\n  dataTestId,\n  ...rest\n}: BannerProps) => (\n  <div\n    className={cn(styles.banner, className)}\n    data-testid={dataTestId?.root}\n    {...rest}\n  >\n    <div className={styles.inner}>\n      <div className={styles.content}>\n        {icon ? (\n          <span className={styles.icon} data-testid={dataTestId?.icon}>\n            {icon}\n          </span>\n        ) : null}\n        <div className={styles.text}>\n          <p className={styles.title} data-testid={dataTestId?.title}>\n            {title}\n          </p>\n          {description ? (\n            <p\n              className={styles.description}\n              data-testid={dataTestId?.description}\n            >\n              {description}\n            </p>\n          ) : null}\n        </div>\n      </div>\n      {action ? (\n        <div className={styles.action} data-testid={dataTestId?.action}>\n          {action}\n        </div>\n      ) : null}\n    </div>\n  </div>\n)\n\nBanner.displayName = 'Banner'\n"],"names":["Banner","_ref","icon","title","description","action","className","dataTestId","rest","_jsx","cn","styles","banner","root","children","_jsxs","inner","content","text","displayName"],"mappings":";;;;;;;;AAsBA;AACO,MAAMA,MAAM,GAAGC,IAAA,IAAA;EAAA,IAAC;IACrBC,IAAI;IACJC,KAAK;IACLC,WAAW;IACXC,MAAM;IACNC,SAAS;IACTC,UAAU;IACV,GAAGC,IAAAA;AACQ,GAAC,GAAAP,IAAA,CAAA;AAAA,EAAA,oBACZQ,cAAA,CAAA,KAAA,EAAA;IACEH,SAAS,EAAEI,EAAE,CAACC,aAAM,CAACC,MAAM,EAAEN,SAAS,CAAE;IACxC,aAAaC,EAAAA,UAAU,EAAEM,IAAK;AAAA,IAAA,GAC1BL,IAAI;AAAAM,IAAAA,QAAA,eAERC,eAAA,CAAA,KAAA,EAAA;MAAKT,SAAS,EAAEK,aAAM,CAACK,KAAM;AAAAF,MAAAA,QAAA,gBAC3BC,eAAA,CAAA,KAAA,EAAA;QAAKT,SAAS,EAAEK,aAAM,CAACM,OAAQ;QAAAH,QAAA,EAAA,CAC5BZ,IAAI,gBACHO,cAAA,CAAA,MAAA,EAAA;UAAMH,SAAS,EAAEK,aAAM,CAACT,IAAK;UAAC,aAAaK,EAAAA,UAAU,EAAEL,IAAK;AAAAY,UAAAA,QAAA,EACzDZ,IAAAA;AAAI,SACD,CAAC,GACL,IAAI,eACRa,eAAA,CAAA,KAAA,EAAA;UAAKT,SAAS,EAAEK,aAAM,CAACO,IAAK;AAAAJ,UAAAA,QAAA,gBAC1BL,cAAA,CAAA,GAAA,EAAA;YAAGH,SAAS,EAAEK,aAAM,CAACR,KAAM;YAAC,aAAaI,EAAAA,UAAU,EAAEJ,KAAM;AAAAW,YAAAA,QAAA,EACxDX,KAAAA;AAAK,WACL,CAAC,EACHC,WAAW,gBACVK,cAAA,CAAA,GAAA,EAAA;YACEH,SAAS,EAAEK,aAAM,CAACP,WAAY;YAC9B,aAAaG,EAAAA,UAAU,EAAEH,WAAY;AAAAU,YAAAA,QAAA,EAEpCV,WAAAA;WACA,CAAC,GACF,IAAI,CAAA;AAAA,SACL,CAAC,CAAA;AAAA,OACH,CAAC,EACLC,MAAM,gBACLI,cAAA,CAAA,KAAA,EAAA;QAAKH,SAAS,EAAEK,aAAM,CAACN,MAAO;QAAC,aAAaE,EAAAA,UAAU,EAAEF,MAAO;AAAAS,QAAAA,QAAA,EAC5DT,MAAAA;OACE,CAAC,GACJ,IAAI,CAAA;KACL,CAAA;AAAC,GACH,CAAC,CAAA;AAAA,EACP;AAEDL,MAAM,CAACmB,WAAW,GAAG,QAAQ;;;;"}

package/dist/cjs/banner/Banner.module.css.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const styles = {"banner":"Banner-module_banner__bQhms","content":"Banner-module_content__44TzS","icon":"Banner-module_icon__PkyAA","text":"Banner-module_text__2q-km","title":"Banner-module_title__gUKq0","description":"Banner-module_description__tosgg","action":"Banner-module_action__OKt2C"};
+const styles = {"banner":"Banner-module_banner__bQhms","inner":"Banner-module_inner__mahaD","content":"Banner-module_content__44TzS","icon":"Banner-module_icon__PkyAA","text":"Banner-module_text__2q-km","title":"Banner-module_title__gUKq0","description":"Banner-module_description__tosgg","action":"Banner-module_action__OKt2C"};
 
 module.exports = styles;
 //# sourceMappingURL=Banner.module.css.cjs.map

package/dist/cjs/breadcrumbs/Breadcrumbs.cjs

@@ -8,6 +8,7 @@ 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 useResizeObserver = require('../hooks/useResizeObserver.cjs');
 const ActionElement = require('../utils/ActionElement.cjs');
 const IconChevronRight = require('../icons/components/base/IconChevronRight.cjs');
 
@@ -33,13 +34,14 @@ const BreadcrumbsTrail = /*#__PURE__*/react.forwardRef((_ref, ref) => {
   } = _ref;
   const listRef = react.useRef(null);
   const {
-    sync,
-    onFocus
+    sync
   } = useEdgeFade.useEdgeFade(listRef);
   const trailRef = react.useRef();
+  const hiddenRef = react.useRef();
   useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
     const list = listRef.current;
     if (!list) return;
+    hiddenRef.current ??= list.clientWidth === 0;
     const trail = Array.from(list.children, li => li.textContent).join('\u0000');
     if (trail !== trailRef.current) {
       trailRef.current = trail;
@@ -49,20 +51,15 @@ const BreadcrumbsTrail = /*#__PURE__*/react.forwardRef((_ref, ref) => {
   });
 
   // A list mounted hidden (display: none) can't scroll on mount, so scroll once it gets a width.
-  react.useEffect(() => {
+  useResizeObserver.useResizeObserver(listRef, () => {
     const list = listRef.current;
-    if (!list || typeof ResizeObserver === 'undefined') return;
-    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]);
+    if (!list) return;
+    const wasHidden = hiddenRef.current;
+    hiddenRef.current = list.clientWidth === 0;
+    if (!wasHidden || hiddenRef.current) return;
+    list.scrollLeft = list.scrollWidth;
+    sync();
+  });
   return /*#__PURE__*/jsxRuntime.jsx("nav", {
     ref: ref,
     "aria-label": "Breadcrumb",
@@ -73,8 +70,6 @@ const BreadcrumbsTrail = /*#__PURE__*/react.forwardRef((_ref, ref) => {
       ref: listRef,
       className: Breadcrumbs_module.list,
       "data-testid": dataTestId?.list,
-      onScroll: sync,
-      onFocus: onFocus,
       onPointerOver: syncTitle,
       children: items.map((_ref2, index) => {
         let {

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

@@ -1 +1 @@
-{"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; an empty array renders nothing. */\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\nconst BreadcrumbsTrail = 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\nBreadcrumbsTrail.displayName = 'BreadcrumbsTrail'\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  (props, ref) =>\n    // Separate component so its mount effects attach once the list exists.\n    props.items.length === 0 ? null : <BreadcrumbsTrail ref={ref} {...props} />,\n)\n\nBreadcrumbs.displayName = 'Breadcrumbs'\n"],"names":["ANCHOR_ONLY","spanAttrs","props","attrs","key","syncTitle","e","el","target","closest","scrollWidth","clientWidth","setAttribute","textContent","removeAttribute","BreadcrumbsTrail","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","Breadcrumbs"],"mappings":";;;;;;;;;;;;;AA2BA,MAAMA,WAAW,GAAG,CAClB,MAAM,EACN,SAAS,EACT,UAAU,EACV,UAAU,EACV,WAAW,EACX,MAAM,EACN,QAAQ,EACR,KAAK,EACL,UAAU,CACF,CAAA;AAEV,MAAMC,SAAS,GAAIC,KAAoC,IAAK;AAC1D,EAAA,MAAMC,KAA8B,GAAG;IAAE,GAAGD,KAAAA;GAAO,CAAA;EACnD,KAAK,MAAME,GAAG,IAAIJ,WAAW,EAAE,OAAOG,KAAK,CAACC,GAAG,CAAC,CAAA;AAChD,EAAA,OAAOD,KAAK,CAAA;AACd,CAAC,CAAA;AAED,MAAME,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,CAACG,WAAW,GAAGH,EAAE,CAACI,WAAW,EACjCJ,EAAE,CAACK,YAAY,CAAC,OAAO,EAAEL,EAAE,CAACM,WAAW,IAAI,EAAE,CAAC,CAC3CN,KAAAA,EAAE,CAACO,eAAe,CAAC,OAAO,CAAC,CAAA;AAClC,CAAC,CAAA;AAED,MAAMC,gBAAgB,gBAAGC,gBAAU,CACjC,CAAAC,IAAA,EAA4CC,GAAG,KAAK;EAAA,IAAnD;IAAEC,KAAK;IAAEC,SAAS;IAAEC,UAAU;IAAE,GAAGC,IAAAA;AAAK,GAAC,GAAAL,IAAA,CAAA;AACxC,EAAA,MAAMM,OAAO,GAAGC,YAAM,CAAmB,IAAI,CAAC,CAAA;EAE9C,MAAM;IAAEC,IAAI;AAAEC,IAAAA,OAAAA;AAAQ,GAAC,GAAGC,uBAAW,CAACJ,OAAO,CAAC,CAAA;AAC9C,EAAA,MAAMK,QAAQ,GAAGJ,YAAM,EAAU,CAAA;AAEjCK,EAAAA,mDAAyB,CAAC,MAAM;AAC9B,IAAA,MAAMC,IAAI,GAAGP,OAAO,CAACQ,OAAO,CAAA;IAC5B,IAAI,CAACD,IAAI,EAAE,OAAA;IACX,MAAME,KAAK,GAAGC,KAAK,CAACC,IAAI,CAACJ,IAAI,CAACK,QAAQ,EAAGC,EAAE,IAAKA,EAAE,CAACvB,WAAW,CAAC,CAACwB,IAAI,CAClE,QACF,CAAC,CAAA;AACD,IAAA,IAAIL,KAAK,KAAKJ,QAAQ,CAACG,OAAO,EAAE;MAC9BH,QAAQ,CAACG,OAAO,GAAGC,KAAK,CAAA;AACxBF,MAAAA,IAAI,CAACQ,UAAU,GAAGR,IAAI,CAACpB,WAAW,CAAA;AACpC,KAAA;AACAe,IAAAA,IAAI,EAAE,CAAA;AACR,GAAC,CAAC,CAAA;;AAEF;AACAc,EAAAA,eAAS,CAAC,MAAM;AACd,IAAA,MAAMT,IAAI,GAAGP,OAAO,CAACQ,OAAO,CAAA;AAC5B,IAAA,IAAI,CAACD,IAAI,IAAI,OAAOU,cAAc,KAAK,WAAW,EAAE,OAAA;AACpD,IAAA,IAAIC,MAAM,GAAGX,IAAI,CAACnB,WAAW,KAAK,CAAC,CAAA;AACnC,IAAA,MAAM+B,QAAQ,GAAG,IAAIF,cAAc,CAAC,MAAM;MACxC,MAAMG,SAAS,GAAGF,MAAM,CAAA;AACxBA,MAAAA,MAAM,GAAGX,IAAI,CAACnB,WAAW,KAAK,CAAC,CAAA;AAC/B,MAAA,IAAI,CAACgC,SAAS,IAAIF,MAAM,EAAE,OAAA;AAC1BX,MAAAA,IAAI,CAACQ,UAAU,GAAGR,IAAI,CAACpB,WAAW,CAAA;AAClCe,MAAAA,IAAI,EAAE,CAAA;AACR,KAAC,CAAC,CAAA;AACFiB,IAAAA,QAAQ,CAACE,OAAO,CAACd,IAAI,CAAC,CAAA;AACtB,IAAA,OAAO,MAAMY,QAAQ,CAACG,UAAU,EAAE,CAAA;AACpC,GAAC,EAAE,CAACpB,IAAI,CAAC,CAAC,CAAA;AAEV,EAAA,oBACEqB,cAAA,CAAA,KAAA,EAAA;AACE5B,IAAAA,GAAG,EAAEA,GAAI;AACT,IAAA,YAAA,EAAW,YAAY;IACvBE,SAAS,EAAE2B,EAAE,CAACC,kBAAM,CAACC,GAAG,EAAE7B,SAAS,CAAE;IACrC,aAAaC,EAAAA,UAAU,EAAE6B,IAAK;AAAA,IAAA,GAC1B5B,IAAI;AAAAa,IAAAA,QAAA,eAERW,cAAA,CAAA,IAAA,EAAA;AACE5B,MAAAA,GAAG,EAAEK,OAAQ;MACbH,SAAS,EAAE4B,kBAAM,CAAClB,IAAK;MACvB,aAAaT,EAAAA,UAAU,EAAES,IAAK;AAC9BqB,MAAAA,QAAQ,EAAE1B,IAAK;AACfC,MAAAA,OAAO,EAAEA,OAAQ;AACjB0B,MAAAA,aAAa,EAAE/C,SAAU;MAAA8B,QAAA,EAExBhB,KAAK,CAACkC,GAAG,CACR,CAAAC,KAAA,EAAkDC,KAAK,KAAK;QAAA,IAA3D;UAAEC,KAAK;AAAEnC,UAAAA,UAAU,EAAEoC,UAAU;UAAE,GAAGC,SAAAA;AAAU,SAAC,GAAAJ,KAAA,CAAA;QAC9C,MAAMvB,OAAO,GAAGwB,KAAK,KAAKpC,KAAK,CAACwC,MAAM,GAAG,CAAC,CAAA;AAC1C,QAAA,MAAMC,UAAU,GACdF,SAAS,CAACG,KAAK,KAAKC,SAAS,GAAG;AAAE,UAAA,YAAY,EAAE,EAAA;SAAI,GAAG,EAAE,CAAA;QAC3D,MAAMC,WAAW,GACf,CAAChC,OAAO,KACP2B,SAAS,CAACM,IAAI,KAAKF,SAAS,IAC3BJ,SAAS,CAACO,OAAO,KAAKH,SAAS,CAAC,IAClC,CAACJ,SAAS,CAACQ,QAAQ,CAAA;AACrB,QAAA,oBACEC,eAAA,CAAA,IAAA,EAAA;UAAgB/C,SAAS,EAAE4B,kBAAM,CAACoB,IAAK;AAAAjC,UAAAA,QAAA,EACpC4B,CAAAA,WAAW,gBACVjB,cAAA,CAACuB,2BAAa,EAAA;YACZ,aAAaZ,EAAAA,UAAU,EAAEP,IAAK;AAAA,YAAA,GAC1BQ,SAAS;AAAA,YAAA,GACTE,UAAU;AACdxC,YAAAA,SAAS,EAAE2B,EAAE,CACXC,kBAAM,CAACQ,KAAK,EACZR,kBAAM,CAACsB,IAAI,EACXZ,SAAS,CAACtC,SACZ,CAAE;AAAAe,YAAAA,QAAA,EAEDqB,KAAAA;WACY,CAAC,gBAEhBV,cAAA,CAAA,MAAA,EAAA;YACE,aAAaW,EAAAA,UAAU,EAAEP,IAAK;YAAA,GAC1BjD,SAAS,CAACyD,SAAS,CAAC;AAAA,YAAA,GACpBE,UAAU;AAAA,YAAA,IACT7B,OAAO,IAAI;AAAE,cAAA,cAAc,EAAE,MAAA;aAAiB,CAAA;AACnDX,YAAAA,SAAS,EAAE2B,EAAE,CACXC,kBAAM,CAACQ,KAAK,EACZzB,OAAO,IAAIiB,kBAAM,CAACjB,OAAO,EACzB2B,SAAS,CAACtC,SACZ,CAAE;AAAAe,YAAAA,QAAA,EAEDqB,KAAAA;AAAK,WACF,CACP,EACA,CAACzB,OAAO,iBACPe,cAAA,CAACyB,iCAAgB,EAAA;YACfnD,SAAS,EAAE4B,kBAAM,CAACwB,SAAU;YAC5B,aAAY,EAAA,MAAA;AAAM,WACnB,CACF,CAAA;AAAA,SAAA,EAlCMjB,KAmCL,CAAC,CAAA;OAGX,CAAA;KACE,CAAA;AAAC,GACF,CAAC,CAAA;AAEV,CACF,CAAC,CAAA;AAEDxC,gBAAgB,CAAC0D,WAAW,GAAG,kBAAkB,CAAA;;AAEjD;AACO,MAAMC,WAAW,gBAAG1D,gBAAU,CACnC,CAACd,KAAK,EAAEgB,GAAG;AACT;AACAhB,KAAK,CAACiB,KAAK,CAACwC,MAAM,KAAK,CAAC,GAAG,IAAI,gBAAGb,cAAA,CAAC/B,gBAAgB,EAAA;AAACG,EAAAA,GAAG,EAAEA,GAAI;EAAA,GAAKhB,KAAAA;AAAK,CAAG,CAC9E,EAAC;AAEDwE,WAAW,CAACD,WAAW,GAAG,aAAa;;;;"}
+{"version":3,"file":"Breadcrumbs.cjs","sources":["../../../src/breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import { forwardRef, useRef } from 'react'\nimport type { HTMLAttributes, PointerEvent, ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport {\n  useEdgeFade,\n  useIsomorphicLayoutEffect,\n  useResizeObserver,\n} 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; an empty array renders nothing. */\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\nconst BreadcrumbsTrail = forwardRef<HTMLElement, BreadcrumbsProps>(\n  ({ items, className, dataTestId, ...rest }, ref) => {\n    const listRef = useRef<HTMLOListElement>(null)\n\n    const { sync } = useEdgeFade(listRef)\n    const trailRef = useRef<string>()\n    const hiddenRef = useRef<boolean>()\n\n    useIsomorphicLayoutEffect(() => {\n      const list = listRef.current\n      if (!list) return\n      hiddenRef.current ??= list.clientWidth === 0\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    useResizeObserver(listRef, () => {\n      const list = listRef.current\n      if (!list) return\n      const wasHidden = hiddenRef.current\n      hiddenRef.current = list.clientWidth === 0\n      if (!wasHidden || hiddenRef.current) return\n      list.scrollLeft = list.scrollWidth\n      sync()\n    })\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          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\nBreadcrumbsTrail.displayName = 'BreadcrumbsTrail'\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  (props, ref) =>\n    // Separate component so its mount effects attach once the list exists.\n    props.items.length === 0 ? null : <BreadcrumbsTrail ref={ref} {...props} />,\n)\n\nBreadcrumbs.displayName = 'Breadcrumbs'\n"],"names":["ANCHOR_ONLY","spanAttrs","props","attrs","key","syncTitle","e","el","target","closest","scrollWidth","clientWidth","setAttribute","textContent","removeAttribute","BreadcrumbsTrail","forwardRef","_ref","ref","items","className","dataTestId","rest","listRef","useRef","sync","useEdgeFade","trailRef","hiddenRef","useIsomorphicLayoutEffect","list","current","trail","Array","from","children","li","join","scrollLeft","useResizeObserver","wasHidden","_jsx","cn","styles","nav","root","onPointerOver","map","_ref2","index","label","itemTestId","itemProps","length","labelAttrs","title","undefined","interactive","href","onClick","disabled","_jsxs","item","ActionElement","link","IconChevronRight","separator","displayName","Breadcrumbs"],"mappings":"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"}

package/dist/cjs/button/Button.cjs

@@ -17,6 +17,7 @@ const Button = /*#__PURE__*/react.forwardRef((_ref, ref) => {
     children,
     variant = 'primary',
     size = 'big',
+    fullWidth = false,
     loading = false,
     disabled = false,
     iconLeft,
@@ -29,7 +30,7 @@ const Button = /*#__PURE__*/react.forwardRef((_ref, ref) => {
   } = _ref;
   return /*#__PURE__*/jsxRuntime.jsx(ActionElement.ActionElement, {
     ref: ref,
-    className: cn(Button_module.button, Button_module[variant], Button_module[size], loading && !disabled && Button_module.loading, className),
+    className: cn(Button_module.button, Button_module[variant], Button_module[size], fullWidth && Button_module.fullWidth, loading && !disabled && Button_module.loading, className),
     "data-testid": dataTestId?.root,
     "aria-label": joinAriaLabel.joinAriaLabel(ariaLabel, counterLabel),
     "aria-busy": loading || undefined,

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

@@ -1 +1 @@
-{"version":3,"file":"Button.cjs","sources":["../../../src/button/Button.tsx"],"sourcesContent":["import { forwardRef } from 'react'\n\nimport cn from 'classnames'\n\nimport { ActionElement, joinAriaLabel } from '../utils'\nimport styles from './Button.module.css'\nimport { ButtonContent } from './ButtonContent'\nimport type {\n  ButtonAsButtonProps,\n  ButtonAsLinkProps,\n  ButtonDataTestId,\n  ButtonProps,\n  ButtonSize,\n  ButtonVariant,\n} from './types'\n\nexport type {\n  ButtonAsButtonProps,\n  ButtonAsLinkProps,\n  ButtonDataTestId,\n  ButtonProps,\n  ButtonSize,\n  ButtonVariant,\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 it. With `href` it renders a link that routes through `LinkProvider`. */\nexport const Button = forwardRef<\n  HTMLButtonElement | HTMLAnchorElement,\n  ButtonProps\n>(\n  (\n    {\n      className,\n      children,\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    <ActionElement\n      ref={ref}\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      aria-busy={loading || undefined}\n      disabled={disabled || loading}\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    </ActionElement>\n  ),\n)\n\nButton.displayName = 'Button'\n"],"names":["Button","forwardRef","_ref","ref","className","children","variant","size","loading","disabled","iconLeft","iconRight","counter","counterLabel","dataTestId","ariaLabel","rest","_jsx","ActionElement","cn","styles","button","root","joinAriaLabel","undefined","ButtonContent","displayName"],"mappings":";;;;;;;;;;;;AAyBA;AACO,MAAMA,MAAM,gBAAGC,gBAAU,CAI9B,CAAAC,IAAA,EAgBEC,GAAG,KAAA;EAAA,IAfH;IACEC,SAAS;IACTC,QAAQ;AACRC,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,GAAAd,IAAA,CAAA;EAAA,oBAGDe,cAAA,CAACC,2BAAa,EAAA;AACZf,IAAAA,GAAG,EAAEA,GAAI;IACTC,SAAS,EAAEe,EAAE,CACXC,aAAM,CAACC,MAAM,EACbD,aAAM,CAACd,OAAO,CAAC,EACfc,aAAM,CAACb,IAAI,CAAC,EACZC,OAAO,IAAI,CAACC,QAAQ,IAAIW,aAAM,CAACZ,OAAO,EACtCJ,SACF,CAAE;IACF,aAAaU,EAAAA,UAAU,EAAEQ,IAAK;AAC9B,IAAA,YAAA,EAAYC,2BAAa,CAACR,SAAS,EAAEF,YAAY,CAAE;IACnD,WAAWL,EAAAA,OAAO,IAAIgB,SAAU;IAChCf,QAAQ,EAAEA,QAAQ,IAAID,OAAQ;AAAA,IAAA,GAC1BQ,IAAI;IAAAX,QAAA,eAERY,cAAA,CAACQ,2BAAa,EAAA;AACZjB,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;AAAAT,MAAAA,QAAA,EAEtBA,QAAAA;KACY,CAAA;AAAC,GACH,CAAC,CAAA;AAAA,CAEpB,EAAC;AAEDL,MAAM,CAAC0B,WAAW,GAAG,QAAQ;;;;"}
+{"version":3,"file":"Button.cjs","sources":["../../../src/button/Button.tsx"],"sourcesContent":["import { forwardRef } from 'react'\n\nimport cn from 'classnames'\n\nimport { ActionElement, joinAriaLabel } from '../utils'\nimport styles from './Button.module.css'\nimport { ButtonContent } from './ButtonContent'\nimport type {\n  ButtonAsButtonProps,\n  ButtonAsLinkProps,\n  ButtonDataTestId,\n  ButtonProps,\n  ButtonSize,\n  ButtonVariant,\n} from './types'\n\nexport type {\n  ButtonAsButtonProps,\n  ButtonAsLinkProps,\n  ButtonDataTestId,\n  ButtonProps,\n  ButtonSize,\n  ButtonVariant,\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 it. With `href` it renders a link that routes through `LinkProvider`. */\nexport const Button = forwardRef<\n  HTMLButtonElement | HTMLAnchorElement,\n  ButtonProps\n>(\n  (\n    {\n      className,\n      children,\n      variant = 'primary',\n      size = 'big',\n      fullWidth = false,\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    <ActionElement\n      ref={ref}\n      className={cn(\n        styles.button,\n        styles[variant],\n        styles[size],\n        fullWidth && styles.fullWidth,\n        loading && !disabled && styles.loading,\n        className,\n      )}\n      data-testid={dataTestId?.root}\n      aria-label={joinAriaLabel(ariaLabel, counterLabel)}\n      aria-busy={loading || undefined}\n      disabled={disabled || loading}\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    </ActionElement>\n  ),\n)\n\nButton.displayName = 'Button'\n"],"names":["Button","forwardRef","_ref","ref","className","children","variant","size","fullWidth","loading","disabled","iconLeft","iconRight","counter","counterLabel","dataTestId","ariaLabel","rest","_jsx","ActionElement","cn","styles","button","root","joinAriaLabel","undefined","ButtonContent","displayName"],"mappings":";;;;;;;;;;;;AAyBA;AACO,MAAMA,MAAM,gBAAGC,gBAAU,CAI9B,CAAAC,IAAA,EAiBEC,GAAG,KAAA;EAAA,IAhBH;IACEC,SAAS;IACTC,QAAQ;AACRC,IAAAA,OAAO,GAAG,SAAS;AACnBC,IAAAA,IAAI,GAAG,KAAK;AACZC,IAAAA,SAAS,GAAG,KAAK;AACjBC,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;EAAA,oBAGDgB,cAAA,CAACC,2BAAa,EAAA;AACZhB,IAAAA,GAAG,EAAEA,GAAI;AACTC,IAAAA,SAAS,EAAEgB,EAAE,CACXC,aAAM,CAACC,MAAM,EACbD,aAAM,CAACf,OAAO,CAAC,EACfe,aAAM,CAACd,IAAI,CAAC,EACZC,SAAS,IAAIa,aAAM,CAACb,SAAS,EAC7BC,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;IACnD,WAAWL,EAAAA,OAAO,IAAIgB,SAAU;IAChCf,QAAQ,EAAEA,QAAQ,IAAID,OAAQ;AAAA,IAAA,GAC1BQ,IAAI;IAAAZ,QAAA,eAERa,cAAA,CAACQ,2BAAa,EAAA;AACZjB,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,GACH,CAAC,CAAA;AAAA,CAEpB,EAAC;AAEDL,MAAM,CAAC2B,WAAW,GAAG,QAAQ;;;;"}

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

@@ -1,6 +1,6 @@
 'use strict';
 
-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"};
+const styles = {"button":"Button-module_button__eiKKZ","loading":"Button-module_loading__wZ1IR","fullWidth":"Button-module_fullWidth__TLKFB","content":"Button-module_content__SVjwi","icon":"Button-module_icon__Ojq-e","spinner":"Button-module_spinner__QToZm","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

@@ -5,7 +5,7 @@ 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 Spinner = require('../spinner/Spinner.cjs');
 
 const ButtonContent = _ref => {
   let {
@@ -18,9 +18,9 @@ const ButtonContent = _ref => {
     children
   } = _ref;
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [loading ? /*#__PURE__*/jsxRuntime.jsx(IconLoaderCircle.IconLoaderCircle, {
+    children: [loading ? /*#__PURE__*/jsxRuntime.jsx(Spinner.Spinner, {
       className: Button_module.spinner,
-      "aria-hidden": "true"
+      decorative: true
     }) : iconLeft != null && /*#__PURE__*/jsxRuntime.jsx("span", {
       className: Button_module.icon,
       "aria-hidden": "true",

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

@@ -1 +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\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":["ButtonContent","_ref","loading","iconLeft","iconRight","counter","counterLabel","dataTestId","children","_jsxs","_Fragment","_jsx","IconLoaderCircle","className","styles","spinner","icon","content","CounterSlot","CounterLabel"],"mappings":";;;;;;;;;AAeO,MAAMA,aAAa,GAAGC,IAAA,IAAA;EAAA,IAAC;AAC5BC,IAAAA,OAAO,GAAG,KAAK;IACfC,QAAQ;IACRC,SAAS;IACTC,OAAO;IACPC,YAAY;IACZC,UAAU;AACVC,IAAAA,QAAAA;AACkB,GAAC,GAAAP,IAAA,CAAA;EAAA,oBACnBQ,eAAA,CAAAC,mBAAA,EAAA;AAAAF,IAAAA,QAAA,EACGN,CAAAA,OAAO,gBACNS,cAAA,CAACC,iCAAgB,EAAA;MAACC,SAAS,EAAEC,aAAM,CAACC,OAAQ;MAAC,aAAY,EAAA,MAAA;AAAM,KAAE,CAAC,GAElEZ,QAAQ,IAAI,IAAI,iBACdQ,cAAA,CAAA,MAAA,EAAA;MACEE,SAAS,EAAEC,aAAM,CAACE,IAAK;AACvB,MAAA,aAAA,EAAY,MAAM;MAClB,aAAaT,EAAAA,UAAU,EAAEJ,QAAS;AAAAK,MAAAA,QAAA,EAEjCL,QAAAA;KACG,CAET,eACDQ,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,CAACN,OAAO,IAAIE,SAAS,IAAI,IAAI,gBAC5BO,cAAA,CAAA,MAAA,EAAA;MACEE,SAAS,EAAEC,aAAM,CAACE,IAAK;AACvB,MAAA,aAAA,EAAY,MAAM;MAClB,aAAaT,EAAAA,UAAU,EAAEH,SAAU;AAAAI,MAAAA,QAAA,EAElCJ,SAAAA;AAAS,KACN,CAAC,GACL,IAAI,eACRO,cAAA,CAACO,uBAAW,EAAA;MAACX,UAAU,EAAEA,UAAU,EAAEF,OAAQ;AAAAG,MAAAA,QAAA,EAAEH,OAAAA;AAAO,KAAc,CAAC,eACrEM,cAAA,CAACQ,wBAAY,EAAA;AAAAX,MAAAA,QAAA,EAAEF,YAAAA;AAAY,KAAe,CAAC,CAAA;AAAA,GAC3C,CAAC,CAAA;AAAA;;;;"}
+{"version":3,"file":"ButtonContent.cjs","sources":["../../../src/button/ButtonContent.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\nimport { CounterLabel, CounterSlot } from '../counter/CounterSlot'\nimport { Spinner } from '../spinner'\nimport styles from './Button.module.css'\nimport type { ButtonOwnProps } from './types'\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      <Spinner className={styles.spinner} decorative />\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":["ButtonContent","_ref","loading","iconLeft","iconRight","counter","counterLabel","dataTestId","children","_jsxs","_Fragment","_jsx","Spinner","className","styles","spinner","decorative","icon","content","CounterSlot","CounterLabel"],"mappings":";;;;;;;;;AAeO,MAAMA,aAAa,GAAGC,IAAA,IAAA;EAAA,IAAC;AAC5BC,IAAAA,OAAO,GAAG,KAAK;IACfC,QAAQ;IACRC,SAAS;IACTC,OAAO;IACPC,YAAY;IACZC,UAAU;AACVC,IAAAA,QAAAA;AACkB,GAAC,GAAAP,IAAA,CAAA;EAAA,oBACnBQ,eAAA,CAAAC,mBAAA,EAAA;AAAAF,IAAAA,QAAA,EACGN,CAAAA,OAAO,gBACNS,cAAA,CAACC,eAAO,EAAA;MAACC,SAAS,EAAEC,aAAM,CAACC,OAAQ;MAACC,UAAU,EAAA,IAAA;AAAA,KAAE,CAAC,GAEjDb,QAAQ,IAAI,IAAI,iBACdQ,cAAA,CAAA,MAAA,EAAA;MACEE,SAAS,EAAEC,aAAM,CAACG,IAAK;AACvB,MAAA,aAAA,EAAY,MAAM;MAClB,aAAaV,EAAAA,UAAU,EAAEJ,QAAS;AAAAK,MAAAA,QAAA,EAEjCL,QAAAA;KACG,CAET,eACDQ,cAAA,CAAA,MAAA,EAAA;MAAME,SAAS,EAAEC,aAAM,CAACI,OAAQ;MAAC,aAAaX,EAAAA,UAAU,EAAEW,OAAQ;AAAAV,MAAAA,QAAA,EAC/DA,QAAAA;KACG,CAAC,EACN,CAACN,OAAO,IAAIE,SAAS,IAAI,IAAI,gBAC5BO,cAAA,CAAA,MAAA,EAAA;MACEE,SAAS,EAAEC,aAAM,CAACG,IAAK;AACvB,MAAA,aAAA,EAAY,MAAM;MAClB,aAAaV,EAAAA,UAAU,EAAEH,SAAU;AAAAI,MAAAA,QAAA,EAElCJ,SAAAA;AAAS,KACN,CAAC,GACL,IAAI,eACRO,cAAA,CAACQ,uBAAW,EAAA;MAACZ,UAAU,EAAEA,UAAU,EAAEF,OAAQ;AAAAG,MAAAA,QAAA,EAAEH,OAAAA;AAAO,KAAc,CAAC,eACrEM,cAAA,CAACS,wBAAY,EAAA;AAAAZ,MAAAA,QAAA,EAAEF,YAAAA;AAAY,KAAe,CAAC,CAAA;AAAA,GAC3C,CAAC,CAAA;AAAA;;;;"}