@lidofinance/lido-app-ui 1.12.0 → 1.14.0

package/README.md

@@ -28,13 +28,22 @@ function Widget() {
 }
 ```
 
-Theme providers (`ThemeProvider`, `CookieThemeProvider`, `ThemeToggler`) are re-exported from `@lidofinance/lido-shared-ui`. The color tokens follow the `data-lido-theme` attribute they set, so switching to the dark theme restyles these components. `ThemeSwitcher` is the app-ui-styled theme toggle, since the shared `ThemeToggler` relies on `--lido-ui-*` tokens that app-ui doesn't define.
+Theme providers (`ThemeProvider`, `CookieThemeProvider`) are re-exported from `@lidofinance/lido-shared-ui`. The color tokens follow the `data-lido-theme` attribute they set, so switching to the dark theme restyles these components. `ThemeSwitcher` is the app-ui-styled theme toggle, since the shared `ThemeToggler` relies on `--lido-ui-*` tokens that app-ui doesn't define. `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).
 
 ## Router links
 
-Link components (`TextLink`, `SmallCard`) render 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. Hash links, `download` links and links with a non-`_self` `target` always stay a plain `<a>`.
+Every app-ui link (`TextLink`, `NavLink`, `LinkButton`, `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. Adapters must be `forwardRef` components: under React 18 `ref` is never passed as a prop.
 
-Next.js 12 — `next/link` needs an `<a>` child, so wrap it once at module level:
+Next.js 13+ — `next/link` renders its own `<a>` and forwards its ref, so pass it directly:
+
+```tsx
+import NextLink from 'next/link'
+import { LinkProvider } from '@lidofinance/lido-app-ui'
+
+;<LinkProvider component={NextLink}>{children}</LinkProvider>
+```
+
+Next.js 12 — `next/link` needs an `<a>` child, so wrap it once at module level. Router-only props set per link with `linkProps` are split out so they don't land on the `<a>`; this requires the `LinkRouterProps` augmentation shown below:
 
 ```tsx
 import { forwardRef } from 'react'
@@ -43,8 +52,8 @@ import NextLink from 'next/link'
 import { LinkProvider, type LinkComponentProps } from '@lidofinance/lido-app-ui'
 
 const AppLink = forwardRef<HTMLAnchorElement, LinkComponentProps>(
-  ({ href, ...rest }, ref) => (
-    <NextLink href={href}>
+  ({ href, prefetch, replace, scroll, ...rest }, ref) => (
+    <NextLink href={href} prefetch={prefetch} replace={replace} scroll={scroll}>
       <a ref={ref} {...rest} />
     </NextLink>
   ),
@@ -59,42 +68,99 @@ export default function App({ Component, pageProps }: AppProps) {
 }
 ```
 
+react-router — it takes `to` instead of `href`:
+
+```tsx
+import { forwardRef } from 'react'
+import { Link } from 'react-router-dom'
+import type { LinkComponentProps } from '@lidofinance/lido-app-ui'
+
+const AppLink = forwardRef<HTMLAnchorElement, LinkComponentProps>(
+  ({ href, ...rest }, ref) => <Link ref={ref} to={href} {...rest} />,
+)
+```
+
+Router-only options such as `prefetch` are typed by augmenting `LinkRouterProps` once, then set per link with `linkProps`. They reach only the `LinkProvider` components, never a plain `<a>`:
+
+```tsx
+declare module '@lidofinance/lido-app-ui' {
+  interface LinkRouterProps {
+    prefetch?: boolean
+    replace?: boolean
+    scroll?: boolean
+  }
+}
+
+;<SmallCard href='/keys' title='Keys' linkProps={{ prefetch: false }} />
+```
+
 ## Customization
 
-Override any token after importing the stylesheet:
+Override any token after importing the stylesheet. Non-color tokens (radii, typography, z-index, spacing, `--lido-app-ui-shadow-dropdown`) are theme-independent and live on `:root`. Color tokens and `--lido-app-ui-shadow-popover` (it reads color tokens) are redeclared on every theme scope, so override them on `:root, [data-lido-theme]` or per theme, not on `:root` alone:
 
 ```css
 :root {
-  --lido-app-ui-color-border-active: #0085ff;
   --lido-app-ui-border-radius-card: 20px;
 }
+
+:root,
+[data-lido-theme='light'] {
+  --lido-app-ui-color-border-active: #0085ff;
+}
+
+[data-lido-theme='dark'] {
+  --lido-app-ui-color-border-active: #339dff;
+}
 ```
 
 The typography mixins and breakpoint definitions are published too, for products running `postcss-mixins` / `postcss-custom-media`:
 
 ```js
-// postcss.config.js
-import path from 'path'
+// postcss.config.mjs
+import { createRequire } from 'node:module'
+import path from 'node:path'
+
+const require = createRequire(import.meta.url)
+const stylesDir = path.dirname(
+  require.resolve('@lidofinance/lido-app-ui/styles/breakpoints.css'),
+)
 
 export default {
   plugins: {
     '@csstools/postcss-global-data': {
-      files: [
-        require.resolve('@lidofinance/lido-app-ui/styles/breakpoints.css'),
-      ],
-    },
-    'postcss-mixins': {
-      mixinsDir: path.dirname(
-        require.resolve(
-          '@lidofinance/lido-app-ui/styles/typography-mixins.css',
-        ),
-      ),
+      files: [path.join(stylesDir, 'breakpoints.css')],
     },
+    'postcss-mixins': { mixinsDir: stylesDir },
     'postcss-custom-media': { preserve: false },
   },
 }
 ```
 
+## 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+).
+
+| Name  | N      |
+| ----- | ------ |
+| `lg`  | 1280px |
+| `ml`  | 1024px |
+| `md`  | 900px  |
+| `sm`  | 768px  |
+| `xs`  | 600px  |
+| `xxs` | 400px  |
+
+Two component breakpoints sit outside the scale: the Sidebar drawer at `--lido-app-ui-breakpoint-sidebar-down` / `-up` (1280px, `sidebarBreakpointWidth`) and Logo `auto` dropping its wordmark at `--lido-app-ui-breakpoint-logo-down` / `-up` (1024px, `logoBreakpointWidth`).
+
+In CSS use `@media (--lido-app-ui-breakpoint-md-down)`. Responsive props such as `Stack` `gap` take `{ base, mdDown, smDown, … }` (bare `md`/`sm` are aliases), where a key applies below that width:
+
+```tsx
+<Stack gap={{ base: 24, smDown: 12 }}>{children}</Stack>
+```
+
+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.
+
 ## More
 
 This package is part of the [`lidofinance/ui`](https://github.com/lidofinance/ui) monorepo — see the [repo README](https://github.com/lidofinance/ui#readme) for the full package overview, theming, CSS variable customization, and contribution guide.

package/dist/README.md

@@ -28,13 +28,22 @@ function Widget() {
 }
 ```
 
-Theme providers (`ThemeProvider`, `CookieThemeProvider`, `ThemeToggler`) are re-exported from `@lidofinance/lido-shared-ui`. The color tokens follow the `data-lido-theme` attribute they set, so switching to the dark theme restyles these components. `ThemeSwitcher` is the app-ui-styled theme toggle, since the shared `ThemeToggler` relies on `--lido-ui-*` tokens that app-ui doesn't define.
+Theme providers (`ThemeProvider`, `CookieThemeProvider`) are re-exported from `@lidofinance/lido-shared-ui`. The color tokens follow the `data-lido-theme` attribute they set, so switching to the dark theme restyles these components. `ThemeSwitcher` is the app-ui-styled theme toggle, since the shared `ThemeToggler` relies on `--lido-ui-*` tokens that app-ui doesn't define. `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).
 
 ## Router links
 
-Link components (`TextLink`, `SmallCard`) render 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. Hash links, `download` links and links with a non-`_self` `target` always stay a plain `<a>`.
+Every app-ui link (`TextLink`, `NavLink`, `LinkButton`, `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. Adapters must be `forwardRef` components: under React 18 `ref` is never passed as a prop.
 
-Next.js 12 — `next/link` needs an `<a>` child, so wrap it once at module level:
+Next.js 13+ — `next/link` renders its own `<a>` and forwards its ref, so pass it directly:
+
+```tsx
+import NextLink from 'next/link'
+import { LinkProvider } from '@lidofinance/lido-app-ui'
+
+;<LinkProvider component={NextLink}>{children}</LinkProvider>
+```
+
+Next.js 12 — `next/link` needs an `<a>` child, so wrap it once at module level. Router-only props set per link with `linkProps` are split out so they don't land on the `<a>`; this requires the `LinkRouterProps` augmentation shown below:
 
 ```tsx
 import { forwardRef } from 'react'
@@ -43,8 +52,8 @@ import NextLink from 'next/link'
 import { LinkProvider, type LinkComponentProps } from '@lidofinance/lido-app-ui'
 
 const AppLink = forwardRef<HTMLAnchorElement, LinkComponentProps>(
-  ({ href, ...rest }, ref) => (
-    <NextLink href={href}>
+  ({ href, prefetch, replace, scroll, ...rest }, ref) => (
+    <NextLink href={href} prefetch={prefetch} replace={replace} scroll={scroll}>
       <a ref={ref} {...rest} />
     </NextLink>
   ),
@@ -59,42 +68,99 @@ export default function App({ Component, pageProps }: AppProps) {
 }
 ```
 
+react-router — it takes `to` instead of `href`:
+
+```tsx
+import { forwardRef } from 'react'
+import { Link } from 'react-router-dom'
+import type { LinkComponentProps } from '@lidofinance/lido-app-ui'
+
+const AppLink = forwardRef<HTMLAnchorElement, LinkComponentProps>(
+  ({ href, ...rest }, ref) => <Link ref={ref} to={href} {...rest} />,
+)
+```
+
+Router-only options such as `prefetch` are typed by augmenting `LinkRouterProps` once, then set per link with `linkProps`. They reach only the `LinkProvider` components, never a plain `<a>`:
+
+```tsx
+declare module '@lidofinance/lido-app-ui' {
+  interface LinkRouterProps {
+    prefetch?: boolean
+    replace?: boolean
+    scroll?: boolean
+  }
+}
+
+;<SmallCard href='/keys' title='Keys' linkProps={{ prefetch: false }} />
+```
+
 ## Customization
 
-Override any token after importing the stylesheet:
+Override any token after importing the stylesheet. Non-color tokens (radii, typography, z-index, spacing, `--lido-app-ui-shadow-dropdown`) are theme-independent and live on `:root`. Color tokens and `--lido-app-ui-shadow-popover` (it reads color tokens) are redeclared on every theme scope, so override them on `:root, [data-lido-theme]` or per theme, not on `:root` alone:
 
 ```css
 :root {
-  --lido-app-ui-color-border-active: #0085ff;
   --lido-app-ui-border-radius-card: 20px;
 }
+
+:root,
+[data-lido-theme='light'] {
+  --lido-app-ui-color-border-active: #0085ff;
+}
+
+[data-lido-theme='dark'] {
+  --lido-app-ui-color-border-active: #339dff;
+}
 ```
 
 The typography mixins and breakpoint definitions are published too, for products running `postcss-mixins` / `postcss-custom-media`:
 
 ```js
-// postcss.config.js
-import path from 'path'
+// postcss.config.mjs
+import { createRequire } from 'node:module'
+import path from 'node:path'
+
+const require = createRequire(import.meta.url)
+const stylesDir = path.dirname(
+  require.resolve('@lidofinance/lido-app-ui/styles/breakpoints.css'),
+)
 
 export default {
   plugins: {
     '@csstools/postcss-global-data': {
-      files: [
-        require.resolve('@lidofinance/lido-app-ui/styles/breakpoints.css'),
-      ],
-    },
-    'postcss-mixins': {
-      mixinsDir: path.dirname(
-        require.resolve(
-          '@lidofinance/lido-app-ui/styles/typography-mixins.css',
-        ),
-      ),
+      files: [path.join(stylesDir, 'breakpoints.css')],
     },
+    'postcss-mixins': { mixinsDir: stylesDir },
     'postcss-custom-media': { preserve: false },
   },
 }
 ```
 
+## 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+).
+
+| Name  | N      |
+| ----- | ------ |
+| `lg`  | 1280px |
+| `ml`  | 1024px |
+| `md`  | 900px  |
+| `sm`  | 768px  |
+| `xs`  | 600px  |
+| `xxs` | 400px  |
+
+Two component breakpoints sit outside the scale: the Sidebar drawer at `--lido-app-ui-breakpoint-sidebar-down` / `-up` (1280px, `sidebarBreakpointWidth`) and Logo `auto` dropping its wordmark at `--lido-app-ui-breakpoint-logo-down` / `-up` (1024px, `logoBreakpointWidth`).
+
+In CSS use `@media (--lido-app-ui-breakpoint-md-down)`. Responsive props such as `Stack` `gap` take `{ base, mdDown, smDown, … }` (bare `md`/`sm` are aliases), where a key applies below that width:
+
+```tsx
+<Stack gap={{ base: 24, smDown: 12 }}>{children}</Stack>
+```
+
+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.
+
 ## More
 
 This package is part of the [`lidofinance/ui`](https://github.com/lidofinance/ui) monorepo — see the [repo README](https://github.com/lidofinance/ui#readme) for the full package overview, theming, CSS variable customization, and contribution guide.

package/dist/cjs/accordion/Accordion.cjs

@@ -9,6 +9,7 @@ const jsxRuntime = require('react/jsx-runtime');
 const IconChevronUp = require('../icons/components/base/IconChevronUp.cjs');
 const IconChevronDown = require('../icons/components/base/IconChevronDown.cjs');
 
+/** Collapsible section, uncontrolled by default; pass `expanded` + `onExpandedChange` to drive it from your own state. */
 const Accordion = _ref => {
   let {
     title,

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  border?: boolean\n  defaultExpanded?: boolean\n  expanded?: boolean\n  onExpandedChange?: (expanded: boolean) => void\n  dataTestId?: AccordionDataTestId\n}\n\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":";;;;;;;;;;;AA4BaA,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 { 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;;;;"}

package/dist/cjs/address/Address.cjs

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/cjs/badge/Badge.cjs

@@ -6,6 +6,7 @@ const cn = require('classnames');
 const Badge_module = require('./Badge.module.css.cjs');
 const jsxRuntime = require('react/jsx-runtime');
 
+/** Bordered pill for a single trust/verification marker (audited, verified). */
 const Badge = _ref => {
   let {
     icon,

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\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":";;;;;;;;AAeO,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    {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;;;;"}

package/dist/cjs/banner/Banner.cjs

@@ -6,6 +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`). */
 const Banner = _ref => {
   let {
     icon,

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\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":";;;;;;;;AAsBO,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`). */\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;;;;"}