@lidofinance/lido-app-ui 1.14.0 → 1.16.0

package/README.md

@@ -32,14 +32,13 @@ Theme providers (`ThemeProvider`, `CookieThemeProvider`) are re-exported from `@
 
 ## Router links
 
-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.
+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.
 
 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>
 ```
 
@@ -94,9 +93,30 @@ declare module '@lidofinance/lido-app-ui' {
 ;<SmallCard href='/keys' title='Keys' linkProps={{ prefetch: false }} />
 ```
 
+## Typography
+
+`Typography` renders the type scale; it sets no color unless asked.
+
+- `variant`: `h1`, `h2`, `h3`, `amount`, `bodyLarge`, `body` (default), `description`, `caption`. Also decides the tag; override with `as`.
+- `weight`: `thin` | `regular` | `medium` | `semibold` | `bold`; overrides the variant's weight on any variant. `thin` is Manrope ExtraLight (200).
+- `color`: `default`, `secondary`, `tertiary`, `neutral`, `active`, `success`, `warning`, `error`, `info`, `inverse`, `disabled`. Omit to inherit.
+- Shortcuts: `H1`, `H2`, `H3`, `BodyLarge`, `Body`, `Description`, `Caption`.
+
+app-ui sets no default text color, so set it once in the app:
+
+```css
+body {
+  color: var(--lido-app-ui-color-text-default);
+}
+```
+
+PostCSS mixins: `font-amount`, `font-caption` (plus `font-h1`, `font-body`, ...). `font-rich-input` and `font-group-name` are deprecated.
+
+Deprecated aliases: `GroupName` (use `Caption`), variants `richInput` (use `amount`) and `groupName` (use `caption`).
+
 ## Customization
 
-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:
+Override any token after importing the stylesheet. Non-color tokens (radii, typography, z-index, spacing) are theme-independent and live on `:root`. Color tokens and `--lido-app-ui-shadow-default` (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 {
@@ -138,20 +158,19 @@ export default {
 
 ## 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+).
+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  |
+| Name | N      |
+| ---- | ------ |
+| `xl` | 1280px |
+| `lg` | 1024px |
+| `md` | 900px  |
+| `sm` | 600px  |
+| `xs` | 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`).
+The Sidebar drawer and Logo `auto` switch at `lg`. In JS, `downQuery('md')` / `upQuery('md')` build the matching `matchMedia` strings.
 
-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:
+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 at that width and below:
 
 ```tsx
 <Stack gap={{ base: 24, smDown: 12 }}>{children}</Stack>

package/dist/README.md

@@ -32,14 +32,13 @@ Theme providers (`ThemeProvider`, `CookieThemeProvider`) are re-exported from `@
 
 ## Router links
 
-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.
+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.
 
 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>
 ```
 
@@ -94,9 +93,30 @@ declare module '@lidofinance/lido-app-ui' {
 ;<SmallCard href='/keys' title='Keys' linkProps={{ prefetch: false }} />
 ```
 
+## Typography
+
+`Typography` renders the type scale; it sets no color unless asked.
+
+- `variant`: `h1`, `h2`, `h3`, `amount`, `bodyLarge`, `body` (default), `description`, `caption`. Also decides the tag; override with `as`.
+- `weight`: `thin` | `regular` | `medium` | `semibold` | `bold`; overrides the variant's weight on any variant. `thin` is Manrope ExtraLight (200).
+- `color`: `default`, `secondary`, `tertiary`, `neutral`, `active`, `success`, `warning`, `error`, `info`, `inverse`, `disabled`. Omit to inherit.
+- Shortcuts: `H1`, `H2`, `H3`, `BodyLarge`, `Body`, `Description`, `Caption`.
+
+app-ui sets no default text color, so set it once in the app:
+
+```css
+body {
+  color: var(--lido-app-ui-color-text-default);
+}
+```
+
+PostCSS mixins: `font-amount`, `font-caption` (plus `font-h1`, `font-body`, ...). `font-rich-input` and `font-group-name` are deprecated.
+
+Deprecated aliases: `GroupName` (use `Caption`), variants `richInput` (use `amount`) and `groupName` (use `caption`).
+
 ## Customization
 
-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:
+Override any token after importing the stylesheet. Non-color tokens (radii, typography, z-index, spacing) are theme-independent and live on `:root`. Color tokens and `--lido-app-ui-shadow-default` (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 {
@@ -138,20 +158,19 @@ export default {
 
 ## 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+).
+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  |
+| Name | N      |
+| ---- | ------ |
+| `xl` | 1280px |
+| `lg` | 1024px |
+| `md` | 900px  |
+| `sm` | 600px  |
+| `xs` | 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`).
+The Sidebar drawer and Logo `auto` switch at `lg`. In JS, `downQuery('md')` / `upQuery('md')` build the matching `matchMedia` strings.
 
-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:
+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 at that width and below:
 
 ```tsx
 <Stack gap={{ base: 24, smDown: 12 }}>{children}</Stack>

package/dist/cjs/breadcrumbs/Breadcrumbs.cjs

@@ -24,9 +24,7 @@ const syncTitle = e => {
   if (!el) return;
   if (el.scrollWidth > el.clientWidth) el.setAttribute('title', el.textContent ?? '');else el.removeAttribute('title');
 };
-
-/** Trail of ancestors ending in the current page (`aria-current="page"`); scrolls horizontally with an edge fade when it overflows. */
-const Breadcrumbs = /*#__PURE__*/react.forwardRef((_ref, ref) => {
+const BreadcrumbsTrail = /*#__PURE__*/react.forwardRef((_ref, ref) => {
   let {
     items,
     className,
@@ -115,6 +113,15 @@ const Breadcrumbs = /*#__PURE__*/react.forwardRef((_ref, ref) => {
     })
   });
 });
+BreadcrumbsTrail.displayName = 'BreadcrumbsTrail';
+
+/** Trail of ancestors ending in the current page (`aria-current="page"`); scrolls horizontally with an edge fade when it overflows. */
+const Breadcrumbs = /*#__PURE__*/react.forwardRef((props, ref) =>
+// Separate component so its mount effects attach once the list exists.
+props.items.length === 0 ? null : /*#__PURE__*/jsxRuntime.jsx(BreadcrumbsTrail, {
+  ref: ref,
+  ...props
+}));
 Breadcrumbs.displayName = 'Breadcrumbs';
 
 exports.Breadcrumbs = Breadcrumbs;

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. */\n  items: BreadcrumbItem[]\n  dataTestId?: BreadcrumbsDataTestId\n}\n\nconst ANCHOR_ONLY = [\n  'href',\n  'onClick',\n  'disabled',\n  'external',\n  'linkProps',\n  'type',\n  'target',\n  'rel',\n  'download',\n] as const\n\nconst spanAttrs = (props: Omit<BreadcrumbItem, 'label'>) => {\n  const attrs: Record<string, unknown> = { ...props }\n  for (const key of ANCHOR_ONLY) delete attrs[key]\n  return attrs as HTMLAttributes<HTMLSpanElement>\n}\n\nconst syncTitle = (e: PointerEvent<HTMLElement>) => {\n  const el = (e.target as Element).closest('[data-label]')\n  if (!el) return\n  if (el.scrollWidth > el.clientWidth)\n    el.setAttribute('title', el.textContent ?? '')\n  else el.removeAttribute('title')\n}\n\n/** Trail of ancestors ending in the current page (`aria-current=\"page\"`); scrolls horizontally with an edge fade when it overflows. */\nexport const Breadcrumbs = forwardRef<HTMLElement, BreadcrumbsProps>(\n  ({ items, className, dataTestId, ...rest }, ref) => {\n    const listRef = useRef<HTMLOListElement>(null)\n\n    const { sync, onFocus } = useEdgeFade(listRef)\n    const trailRef = useRef<string>()\n\n    useIsomorphicLayoutEffect(() => {\n      const list = listRef.current\n      if (!list) return\n      const trail = Array.from(list.children, (li) => li.textContent).join(\n        '\\u0000',\n      )\n      if (trail !== trailRef.current) {\n        trailRef.current = trail\n        list.scrollLeft = list.scrollWidth\n      }\n      sync()\n    })\n\n    // A list mounted hidden (display: none) can't scroll on mount, so scroll once it gets a width.\n    useEffect(() => {\n      const list = listRef.current\n      if (!list || typeof ResizeObserver === 'undefined') return\n      let hidden = list.clientWidth === 0\n      const observer = new ResizeObserver(() => {\n        const wasHidden = hidden\n        hidden = list.clientWidth === 0\n        if (!wasHidden || hidden) return\n        list.scrollLeft = list.scrollWidth\n        sync()\n      })\n      observer.observe(list)\n      return () => observer.disconnect()\n    }, [sync])\n\n    return (\n      <nav\n        ref={ref}\n        aria-label='Breadcrumb'\n        className={cn(styles.nav, className)}\n        data-testid={dataTestId?.root}\n        {...rest}\n      >\n        <ol\n          ref={listRef}\n          className={styles.list}\n          data-testid={dataTestId?.list}\n          onScroll={sync}\n          onFocus={onFocus}\n          onPointerOver={syncTitle}\n        >\n          {items.map(\n            ({ label, dataTestId: itemTestId, ...itemProps }, index) => {\n              const current = index === items.length - 1\n              const labelAttrs =\n                itemProps.title === undefined ? { 'data-label': '' } : {}\n              const interactive =\n                !current &&\n                (itemProps.href !== undefined ||\n                  itemProps.onClick !== undefined) &&\n                !itemProps.disabled\n              return (\n                <li key={index} className={styles.item}>\n                  {interactive ? (\n                    <ActionElement\n                      data-testid={itemTestId?.root}\n                      {...itemProps}\n                      {...labelAttrs}\n                      className={cn(\n                        styles.label,\n                        styles.link,\n                        itemProps.className,\n                      )}\n                    >\n                      {label}\n                    </ActionElement>\n                  ) : (\n                    <span\n                      data-testid={itemTestId?.root}\n                      {...spanAttrs(itemProps)}\n                      {...labelAttrs}\n                      {...(current && { 'aria-current': 'page' as const })}\n                      className={cn(\n                        styles.label,\n                        current && styles.current,\n                        itemProps.className,\n                      )}\n                    >\n                      {label}\n                    </span>\n                  )}\n                  {!current && (\n                    <IconChevronRight\n                      className={styles.separator}\n                      aria-hidden='true'\n                    />\n                  )}\n                </li>\n              )\n            },\n          )}\n        </ol>\n      </nav>\n    )\n  },\n)\n\nBreadcrumbs.displayName = 'Breadcrumbs'\n"],"names":["ANCHOR_ONLY","spanAttrs","props","attrs","key","syncTitle","e","el","target","closest","scrollWidth","clientWidth","setAttribute","textContent","removeAttribute","Breadcrumbs","forwardRef","_ref","ref","items","className","dataTestId","rest","listRef","useRef","sync","onFocus","useEdgeFade","trailRef","useIsomorphicLayoutEffect","list","current","trail","Array","from","children","li","join","scrollLeft","useEffect","ResizeObserver","hidden","observer","wasHidden","observe","disconnect","_jsx","cn","styles","nav","root","onScroll","onPointerOver","map","_ref2","index","label","itemTestId","itemProps","length","labelAttrs","title","undefined","interactive","href","onClick","disabled","_jsxs","item","ActionElement","link","IconChevronRight","separator","displayName"],"mappings":"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"}
+{"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":"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"}

package/dist/cjs/button/Button.cjs

@@ -7,13 +7,14 @@ const cn = require('classnames');
 const Button_module = require('./Button.module.css.cjs');
 const ButtonContent = require('./ButtonContent.cjs');
 const jsxRuntime = require('react/jsx-runtime');
+const ActionElement = require('../utils/ActionElement.cjs');
+const joinAriaLabel = require('../utils/joinAriaLabel.cjs');
 
-/** Fully rounded call to action; `size` is big (52px) or small (36px), `loading` swaps the icon slot for a spinner and disables the button. */
+/** 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`. */
 const Button = /*#__PURE__*/react.forwardRef((_ref, ref) => {
   let {
     className,
     children,
-    type = 'button',
     variant = 'primary',
     size = 'big',
     loading = false,
@@ -26,14 +27,13 @@ const Button = /*#__PURE__*/react.forwardRef((_ref, ref) => {
     'aria-label': ariaLabel,
     ...rest
   } = _ref;
-  return /*#__PURE__*/jsxRuntime.jsx("button", {
+  return /*#__PURE__*/jsxRuntime.jsx(ActionElement.ActionElement, {
     ref: ref,
-    type: type,
-    disabled: disabled || loading,
-    "aria-busy": loading || undefined,
     className: cn(Button_module.button, Button_module[variant], Button_module[size], loading && !disabled && Button_module.loading, className),
     "data-testid": dataTestId?.root,
-    "aria-label": ButtonContent.joinAriaLabel(ariaLabel, counterLabel),
+    "aria-label": joinAriaLabel.joinAriaLabel(ariaLabel, counterLabel),
+    "aria-busy": loading || undefined,
+    disabled: disabled || loading,
     ...rest,
     children: /*#__PURE__*/jsxRuntime.jsx(ButtonContent.ButtonContent, {
       loading: loading,

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

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

package/dist/cjs/button/ButtonContent.cjs

@@ -7,7 +7,6 @@ const Button_module = require('./Button.module.css.cjs');
 const jsxRuntime = require('react/jsx-runtime');
 const IconLoaderCircle = require('../icons/components/base/IconLoaderCircle.cjs');
 
-const joinAriaLabel = (ariaLabel, counterLabel) => ariaLabel && counterLabel ? `${ariaLabel}, ${counterLabel}` : ariaLabel;
 const ButtonContent = _ref => {
   let {
     loading = false,
@@ -46,5 +45,4 @@ const ButtonContent = _ref => {
 };
 
 exports.ButtonContent = ButtonContent;
-exports.joinAriaLabel = joinAriaLabel;
 //# sourceMappingURL=ButtonContent.cjs.map

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

package/dist/cjs/button/LinkButton.cjs

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

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

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

package/dist/cjs/counter/Counter.module.css.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const styles = {"counter":"Counter-module_counter__qutVl","neutral":"Counter-module_neutral__Z5iCI","default":"Counter-module_default__W0-pw","error":"Counter-module_error__srNOJ","warning":"Counter-module_warning__5OY4o","action":"Counter-module_action__ywkeX","active":"Counter-module_active__AZ4oD"};
+const styles = {"counter":"Counter-module_counter__qutVl","neutral":"Counter-module_neutral__Z5iCI","error":"Counter-module_error__srNOJ","warning":"Counter-module_warning__5OY4o","action":"Counter-module_action__ywkeX","active":"Counter-module_active__AZ4oD"};
 
 module.exports = styles;
 //# sourceMappingURL=Counter.module.css.cjs.map

package/dist/cjs/disclaimer/Disclaimer.cjs

@@ -11,7 +11,6 @@ const TextLink = require('../text-link/TextLink.cjs');
 const defaultContent = /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
   children: ["Your privacy matters. We use cookieless analytics and collect only anonymized data for improvements. Cookies are used for functionality only. For more info read", ' ', /*#__PURE__*/jsxRuntime.jsx(TextLink.TextLink, {
     href: "https://lido.fi/privacy-notice",
-    external: true,
     size: "inherit",
     children: "Privacy Notice"
   }), "."]

package/dist/cjs/disclaimer/Disclaimer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Disclaimer.cjs","sources":["../../../src/disclaimer/Disclaimer.tsx"],"sourcesContent":["import { forwardRef, type ComponentPropsWithoutRef, type Ref } from 'react'\n\nimport cn from 'classnames'\n\nimport { TextLink } from '../text-link'\nimport styles from './Disclaimer.module.css'\n\nexport type DisclaimerDataTestId = {\n  root?: string\n}\n\nexport type DisclaimerProps = ComponentPropsWithoutRef<'p'> & {\n  /** Root element; use `div` when `children` contain block content. */\n  as?: 'p' | 'div'\n  dataTestId?: DisclaimerDataTestId\n}\n\nconst defaultContent = (\n  <>\n    Your privacy matters. We use cookieless analytics and collect only\n    anonymized data for improvements. Cookies are used for functionality only.\n    For more info read{' '}\n    <TextLink href='https://lido.fi/privacy-notice' external size='inherit'>\n      Privacy Notice\n    </TextLink>\n    .\n  </>\n)\n\n/** Page-level note that defaults to the privacy text and pins to the bottom (`margin-top: auto`) as the last child of a flex column. */\nexport const Disclaimer = forwardRef<HTMLElement, DisclaimerProps>(\n  (\n    {\n      as: Component = 'p',\n      className,\n      children = defaultContent,\n      dataTestId,\n      ...rest\n    },\n    ref,\n  ) => (\n    <Component\n      ref={ref as Ref<HTMLDivElement & HTMLParagraphElement>}\n      className={cn(styles.root, className)}\n      data-testid={dataTestId?.root}\n      {...rest}\n    >\n      {children}\n    </Component>\n  ),\n)\n\nDisclaimer.displayName = 'Disclaimer'\n"],"names":["defaultContent","_jsxs","_Fragment","children","_jsx","TextLink","href","external","size","Disclaimer","forwardRef","_ref","ref","as","Component","className","dataTestId","rest","cn","styles","root","displayName"],"mappings":";;;;;;;;;;AAiBA,MAAMA,cAAc,gBAClBC,eAAA,CAAAC,mBAAA,EAAA;AAAAC,EAAAA,QAAA,GAAE,kKAGkB,EAAC,GAAG,eACtBC,cAAA,CAACC,iBAAQ,EAAA;AAACC,IAAAA,IAAI,EAAC,gCAAgC;IAACC,QAAQ,EAAA,IAAA;AAACC,IAAAA,IAAI,EAAC,SAAS;AAAAL,IAAAA,QAAA,EAAC,gBAAA;AAExE,GAAU,CAAC,EAEb,GAAA,CAAA;AAAA,CAAE,CACH,CAAA;;AAED;AACO,MAAMM,UAAU,gBAAGC,gBAAU,CAClC,CAAAC,IAAA,EAQEC,GAAG,KAAA;EAAA,IAPH;IACEC,EAAE,EAAEC,SAAS,GAAG,GAAG;IACnBC,SAAS;AACTZ,IAAAA,QAAQ,GAAGH,cAAc;IACzBgB,UAAU;IACV,GAAGC,IAAAA;AACL,GAAC,GAAAN,IAAA,CAAA;EAAA,oBAGDP,cAAA,CAACU,SAAS,EAAA;AACRF,IAAAA,GAAG,EAAEA,GAAkD;IACvDG,SAAS,EAAEG,EAAE,CAACC,iBAAM,CAACC,IAAI,EAAEL,SAAS,CAAE;IACtC,aAAaC,EAAAA,UAAU,EAAEI,IAAK;AAAA,IAAA,GAC1BH,IAAI;AAAAd,IAAAA,QAAA,EAEPA,QAAAA;AAAQ,GACA,CAAC,CAAA;AAAA,CAEhB,EAAC;AAEDM,UAAU,CAACY,WAAW,GAAG,YAAY;;;;"}
+{"version":3,"file":"Disclaimer.cjs","sources":["../../../src/disclaimer/Disclaimer.tsx"],"sourcesContent":["import { forwardRef, type ComponentPropsWithoutRef, type Ref } from 'react'\n\nimport cn from 'classnames'\n\nimport { TextLink } from '../text-link'\nimport styles from './Disclaimer.module.css'\n\nexport type DisclaimerDataTestId = {\n  root?: string\n}\n\nexport type DisclaimerProps = ComponentPropsWithoutRef<'p'> & {\n  /** Root element; use `div` when `children` contain block content. */\n  as?: 'p' | 'div'\n  dataTestId?: DisclaimerDataTestId\n}\n\nconst defaultContent = (\n  <>\n    Your privacy matters. We use cookieless analytics and collect only\n    anonymized data for improvements. Cookies are used for functionality only.\n    For more info read{' '}\n    <TextLink href='https://lido.fi/privacy-notice' size='inherit'>\n      Privacy Notice\n    </TextLink>\n    .\n  </>\n)\n\n/** Page-level note that defaults to the privacy text and pins to the bottom (`margin-top: auto`) as the last child of a flex column. */\nexport const Disclaimer = forwardRef<HTMLElement, DisclaimerProps>(\n  (\n    {\n      as: Component = 'p',\n      className,\n      children = defaultContent,\n      dataTestId,\n      ...rest\n    },\n    ref,\n  ) => (\n    <Component\n      ref={ref as Ref<HTMLDivElement & HTMLParagraphElement>}\n      className={cn(styles.root, className)}\n      data-testid={dataTestId?.root}\n      {...rest}\n    >\n      {children}\n    </Component>\n  ),\n)\n\nDisclaimer.displayName = 'Disclaimer'\n"],"names":["defaultContent","_jsxs","_Fragment","children","_jsx","TextLink","href","size","Disclaimer","forwardRef","_ref","ref","as","Component","className","dataTestId","rest","cn","styles","root","displayName"],"mappings":";;;;;;;;;;AAiBA,MAAMA,cAAc,gBAClBC,eAAA,CAAAC,mBAAA,EAAA;AAAAC,EAAAA,QAAA,GAAE,kKAGkB,EAAC,GAAG,eACtBC,cAAA,CAACC,iBAAQ,EAAA;AAACC,IAAAA,IAAI,EAAC,gCAAgC;AAACC,IAAAA,IAAI,EAAC,SAAS;AAAAJ,IAAAA,QAAA,EAAC,gBAAA;AAE/D,GAAU,CAAC,EAEb,GAAA,CAAA;AAAA,CAAE,CACH,CAAA;;AAED;AACO,MAAMK,UAAU,gBAAGC,gBAAU,CAClC,CAAAC,IAAA,EAQEC,GAAG,KAAA;EAAA,IAPH;IACEC,EAAE,EAAEC,SAAS,GAAG,GAAG;IACnBC,SAAS;AACTX,IAAAA,QAAQ,GAAGH,cAAc;IACzBe,UAAU;IACV,GAAGC,IAAAA;AACL,GAAC,GAAAN,IAAA,CAAA;EAAA,oBAGDN,cAAA,CAACS,SAAS,EAAA;AACRF,IAAAA,GAAG,EAAEA,GAAkD;IACvDG,SAAS,EAAEG,EAAE,CAACC,iBAAM,CAACC,IAAI,EAAEL,SAAS,CAAE;IACtC,aAAaC,EAAAA,UAAU,EAAEI,IAAK;AAAA,IAAA,GAC1BH,IAAI;AAAAb,IAAAA,QAAA,EAEPA,QAAAA;AAAQ,GACA,CAAC,CAAA;AAAA,CAEhB,EAAC;AAEDK,UAAU,CAACY,WAAW,GAAG,YAAY;;;;"}

package/dist/cjs/hidden/Hidden.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Hidden.cjs","sources":["../../../src/hidden/Hidden.tsx"],"sourcesContent":["import { forwardRef, type ElementType, type HTMLAttributes } from 'react'\n\nimport cn from 'classnames'\n\nimport { capitalize, type Breakpoint } from '../utils'\nimport styles from './Hidden.module.css'\n\nexport type HiddenDataTestId = { root?: string }\n\nexport type HiddenProps = HTMLAttributes<HTMLElement> & {\n  /** Hides below this breakpoint's width. */\n  below?: Breakpoint\n  /** Hides at this breakpoint's width and above. */\n  above?: Breakpoint\n  /** Wrapper tag; `span` is valid inside text, use `div` around block content. */\n  as?: 'span' | 'div'\n  dataTestId?: HiddenDataTestId\n}\n\n/** CSS-only responsive visibility, safe for SSR. Wrapper is `display: contents` while visible. Inside a `<p>` (Typography `body`, `description`...) children must be phrasing content too: a block child closes the paragraph in server HTML and breaks hydration. */\nexport const Hidden = forwardRef<HTMLElement, HiddenProps>(\n  (\n    {\n      as: Tag = 'span' as ElementType,\n      below,\n      above,\n      className,\n      dataTestId,\n      ...rest\n    },\n    ref,\n  ) => (\n    <Tag\n      ref={ref}\n      className={cn(\n        styles.root,\n        below && styles[`below${capitalize(below)}`],\n        above && styles[`above${capitalize(above)}`],\n        className,\n      )}\n      data-testid={dataTestId?.root}\n      {...rest}\n    />\n  ),\n)\n\nHidden.displayName = 'Hidden'\n"],"names":["Hidden","forwardRef","_ref","ref","as","Tag","below","above","className","dataTestId","rest","_jsx","cn","styles","root","capitalize","displayName"],"mappings":";;;;;;;;;;AAmBA;AACO,MAAMA,MAAM,gBAAGC,gBAAU,CAC9B,CAAAC,IAAA,EASEC,GAAG,KAAA;EAAA,IARH;IACEC,EAAE,EAAEC,GAAG,GAAG,MAAqB;IAC/BC,KAAK;IACLC,KAAK;IACLC,SAAS;IACTC,UAAU;IACV,GAAGC,IAAAA;AACL,GAAC,GAAAR,IAAA,CAAA;EAAA,oBAGDS,cAAA,CAACN,GAAG,EAAA;AACFF,IAAAA,GAAG,EAAEA,GAAI;AACTK,IAAAA,SAAS,EAAEI,EAAE,CACXC,aAAM,CAACC,IAAI,EACXR,KAAK,IAAIO,aAAM,CAAC,CAAQE,KAAAA,EAAAA,qBAAU,CAACT,KAAK,CAAC,CAAE,CAAA,CAAC,EAC5CC,KAAK,IAAIM,aAAM,CAAC,CAAQE,KAAAA,EAAAA,qBAAU,CAACR,KAAK,CAAC,CAAA,CAAE,CAAC,EAC5CC,SACF,CAAE;IACF,aAAaC,EAAAA,UAAU,EAAEK,IAAK;IAAA,GAC1BJ,IAAAA;AAAI,GACT,CAAC,CAAA;AAAA,CAEN,EAAC;AAEDV,MAAM,CAACgB,WAAW,GAAG,QAAQ;;;;"}
+{"version":3,"file":"Hidden.cjs","sources":["../../../src/hidden/Hidden.tsx"],"sourcesContent":["import { forwardRef, type ElementType, type HTMLAttributes } from 'react'\n\nimport cn from 'classnames'\n\nimport { capitalize, type Breakpoint } from '../utils'\nimport styles from './Hidden.module.css'\n\nexport type HiddenDataTestId = { root?: string }\n\nexport type HiddenProps = HTMLAttributes<HTMLElement> & {\n  /** Hides at this breakpoint's width and below. */\n  below?: Breakpoint\n  /** Hides above this breakpoint's width. */\n  above?: Breakpoint\n  /** Wrapper tag; `span` is valid inside text, use `div` around block content. */\n  as?: 'span' | 'div'\n  dataTestId?: HiddenDataTestId\n}\n\n/** CSS-only responsive visibility, safe for SSR. Wrapper is `display: contents` while visible. Inside a `<p>` (Typography `body`, `description`...) children must be phrasing content too: a block child closes the paragraph in server HTML and breaks hydration. */\nexport const Hidden = forwardRef<HTMLElement, HiddenProps>(\n  (\n    {\n      as: Tag = 'span' as ElementType,\n      below,\n      above,\n      className,\n      dataTestId,\n      ...rest\n    },\n    ref,\n  ) => (\n    <Tag\n      ref={ref}\n      className={cn(\n        styles.root,\n        below && styles[`below${capitalize(below)}`],\n        above && styles[`above${capitalize(above)}`],\n        className,\n      )}\n      data-testid={dataTestId?.root}\n      {...rest}\n    />\n  ),\n)\n\nHidden.displayName = 'Hidden'\n"],"names":["Hidden","forwardRef","_ref","ref","as","Tag","below","above","className","dataTestId","rest","_jsx","cn","styles","root","capitalize","displayName"],"mappings":";;;;;;;;;;AAmBA;AACO,MAAMA,MAAM,gBAAGC,gBAAU,CAC9B,CAAAC,IAAA,EASEC,GAAG,KAAA;EAAA,IARH;IACEC,EAAE,EAAEC,GAAG,GAAG,MAAqB;IAC/BC,KAAK;IACLC,KAAK;IACLC,SAAS;IACTC,UAAU;IACV,GAAGC,IAAAA;AACL,GAAC,GAAAR,IAAA,CAAA;EAAA,oBAGDS,cAAA,CAACN,GAAG,EAAA;AACFF,IAAAA,GAAG,EAAEA,GAAI;AACTK,IAAAA,SAAS,EAAEI,EAAE,CACXC,aAAM,CAACC,IAAI,EACXR,KAAK,IAAIO,aAAM,CAAC,CAAQE,KAAAA,EAAAA,qBAAU,CAACT,KAAK,CAAC,CAAE,CAAA,CAAC,EAC5CC,KAAK,IAAIM,aAAM,CAAC,CAAQE,KAAAA,EAAAA,qBAAU,CAACR,KAAK,CAAC,CAAA,CAAE,CAAC,EAC5CC,SACF,CAAE;IACF,aAAaC,EAAAA,UAAU,EAAEK,IAAK;IAAA,GAC1BJ,IAAAA;AAAI,GACT,CAAC,CAAA;AAAA,CAEN,EAAC;AAEDV,MAAM,CAACgB,WAAW,GAAG,QAAQ;;;;"}

package/dist/cjs/hidden/Hidden.module.css.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const styles = {"root":"Hidden-module_root__9hkfD","belowLg":"Hidden-module_belowLg__zbI6R","belowMl":"Hidden-module_belowMl__vJPhT","belowMd":"Hidden-module_belowMd__lVH9f","belowSm":"Hidden-module_belowSm__cnb9B","belowXs":"Hidden-module_belowXs__ipzM-","belowXxs":"Hidden-module_belowXxs__BkbGR","aboveLg":"Hidden-module_aboveLg__G7kJk","aboveMl":"Hidden-module_aboveMl__QadhV","aboveMd":"Hidden-module_aboveMd__1yfOJ","aboveSm":"Hidden-module_aboveSm__6-6D8","aboveXs":"Hidden-module_aboveXs__TxT4e","aboveXxs":"Hidden-module_aboveXxs__gRrwE"};
+const styles = {"root":"Hidden-module_root__9hkfD","belowXl":"Hidden-module_belowXl__xHCwc","belowLg":"Hidden-module_belowLg__zbI6R","belowMd":"Hidden-module_belowMd__lVH9f","belowSm":"Hidden-module_belowSm__cnb9B","belowXs":"Hidden-module_belowXs__ipzM-","aboveXl":"Hidden-module_aboveXl__LnW79","aboveLg":"Hidden-module_aboveLg__G7kJk","aboveMd":"Hidden-module_aboveMd__1yfOJ","aboveSm":"Hidden-module_aboveSm__6-6D8","aboveXs":"Hidden-module_aboveXs__TxT4e"};
 
 module.exports = styles;
 //# sourceMappingURL=Hidden.module.css.cjs.map

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

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

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

@@ -8,13 +8,14 @@ const CounterSlot = require('../counter/CounterSlot.cjs');
 const surface_module = require('../utils/surface.module.css.cjs');
 const IconButton_module = require('./IconButton.module.css.cjs');
 const jsxRuntime = require('react/jsx-runtime');
+const ActionElement = require('../utils/ActionElement.cjs');
+const joinAriaLabel = require('../utils/joinAriaLabel.cjs');
 const IconLoaderCircle = require('../icons/components/base/IconLoaderCircle.cjs');
 
-/** 36px fully rounded icon-only button; `loading` swaps the icon for a spinner and disables it. */
+/** 36px fully rounded icon-only button; `loading` swaps the icon for a spinner and disables it. With `href` it renders a link that routes through `LinkProvider`. */
 const IconButton = /*#__PURE__*/react.forwardRef((_ref, ref) => {
   let {
     className,
-    type = 'button',
     variant = 'outline',
     loading = false,
     disabled = false,
@@ -25,14 +26,13 @@ const IconButton = /*#__PURE__*/react.forwardRef((_ref, ref) => {
     dataTestId,
     ...rest
   } = _ref;
-  return /*#__PURE__*/jsxRuntime.jsxs("button", {
+  return /*#__PURE__*/jsxRuntime.jsxs(ActionElement.ActionElement, {
     ref: ref,
-    type: type,
-    disabled: disabled || loading,
-    "aria-busy": loading || undefined,
     className: cn(IconButton_module.button, IconButton_module[variant], variant === 'surface' && surface_module.surface, loading && !disabled && IconButton_module.loading, className),
     "data-testid": dataTestId?.root,
-    "aria-label": counterLabel ? `${ariaLabel}, ${counterLabel}` : ariaLabel,
+    "aria-label": joinAriaLabel.joinAriaLabel(ariaLabel, counterLabel),
+    "aria-busy": loading || undefined,
+    disabled: disabled || loading,
     ...rest,
     children: [loading ? /*#__PURE__*/jsxRuntime.jsx(IconLoaderCircle.IconLoaderCircle, {
       className: IconButton_module.spinner,

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

@@ -1 +1 @@
-{"version":3,"file":"IconButton.cjs","sources":["../../../src/icon-button/IconButton.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport { CounterSlot } from '../counter/CounterSlot'\nimport { IconLoaderCircle } from '../icons'\nimport surfaceStyles from '../utils/surface.module.css'\nimport styles from './IconButton.module.css'\n\nexport type IconButtonVariant = 'outline' | 'ghost' | 'surface'\n\nexport type IconButtonDataTestId = {\n  root?: string\n  icon?: string\n  counter?: string\n}\n\nexport type IconButtonProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'aria-label'\n> & {\n  'aria-label': string\n  icon: ReactNode\n  variant?: IconButtonVariant\n  loading?: boolean\n  /**\n   * Corner slot, aria-hidden. A number or string renders a default `Counter`\n   * (`0` shows a \"0\" pill; use `counter={count || null}` to hide it), or pass a\n   * `<Counter variant=...>` element. Announce the count with `counterLabel`.\n   */\n  counter?: ReactNode\n  /** Spoken with the name, e.g. \"3 unread\". */\n  counterLabel?: string\n  dataTestId?: IconButtonDataTestId\n}\n\n/** 36px fully rounded icon-only button; `loading` swaps the icon for a spinner and disables it. */\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    {\n      className,\n      type = 'button',\n      variant = 'outline',\n      loading = false,\n      disabled = false,\n      icon,\n      counter,\n      counterLabel,\n      'aria-label': ariaLabel,\n      dataTestId,\n      ...rest\n    },\n    ref,\n  ) => (\n    <button\n      ref={ref}\n      type={type}\n      disabled={disabled || loading}\n      aria-busy={loading || undefined}\n      className={cn(\n        styles.button,\n        styles[variant],\n        variant === 'surface' && surfaceStyles.surface,\n        loading && !disabled && styles.loading,\n        className,\n      )}\n      data-testid={dataTestId?.root}\n      aria-label={counterLabel ? `${ariaLabel}, ${counterLabel}` : ariaLabel}\n      {...rest}\n    >\n      {loading ? (\n        <IconLoaderCircle className={styles.spinner} aria-hidden='true' />\n      ) : (\n        <span\n          className={styles.icon}\n          aria-hidden='true'\n          data-testid={dataTestId?.icon}\n        >\n          {icon}\n        </span>\n      )}\n      <CounterSlot dataTestId={dataTestId?.counter}>{counter}</CounterSlot>\n    </button>\n  ),\n)\n\nIconButton.displayName = 'IconButton'\n"],"names":["IconButton","forwardRef","_ref","ref","className","type","variant","loading","disabled","icon","counter","counterLabel","ariaLabel","dataTestId","rest","_jsxs","undefined","cn","styles","button","surfaceStyles","surface","root","children","_jsx","IconLoaderCircle","spinner","CounterSlot","displayName"],"mappings":";;;;;;;;;;;;AAoCA;AACO,MAAMA,UAAU,gBAAGC,gBAAU,CAClC,CAAAC,IAAA,EAcEC,GAAG,KAAA;EAAA,IAbH;IACEC,SAAS;AACTC,IAAAA,IAAI,GAAG,QAAQ;AACfC,IAAAA,OAAO,GAAG,SAAS;AACnBC,IAAAA,OAAO,GAAG,KAAK;AACfC,IAAAA,QAAQ,GAAG,KAAK;IAChBC,IAAI;IACJC,OAAO;IACPC,YAAY;AACZ,IAAA,YAAY,EAAEC,SAAS;IACvBC,UAAU;IACV,GAAGC,IAAAA;AACL,GAAC,GAAAZ,IAAA,CAAA;AAAA,EAAA,oBAGDa,eAAA,CAAA,QAAA,EAAA;AACEZ,IAAAA,GAAG,EAAEA,GAAI;AACTE,IAAAA,IAAI,EAAEA,IAAK;IACXG,QAAQ,EAAEA,QAAQ,IAAID,OAAQ;IAC9B,WAAWA,EAAAA,OAAO,IAAIS,SAAU;AAChCZ,IAAAA,SAAS,EAAEa,EAAE,CACXC,iBAAM,CAACC,MAAM,EACbD,iBAAM,CAACZ,OAAO,CAAC,EACfA,OAAO,KAAK,SAAS,IAAIc,cAAa,CAACC,OAAO,EAC9Cd,OAAO,IAAI,CAACC,QAAQ,IAAIU,iBAAM,CAACX,OAAO,EACtCH,SACF,CAAE;IACF,aAAaS,EAAAA,UAAU,EAAES,IAAK;IAC9B,YAAYX,EAAAA,YAAY,GAAG,CAAGC,EAAAA,SAAS,KAAKD,YAAY,CAAA,CAAE,GAAGC,SAAU;AAAA,IAAA,GACnEE,IAAI;AAAAS,IAAAA,QAAA,EAEPhB,CAAAA,OAAO,gBACNiB,cAAA,CAACC,iCAAgB,EAAA;MAACrB,SAAS,EAAEc,iBAAM,CAACQ,OAAQ;MAAC,aAAY,EAAA,MAAA;KAAQ,CAAC,gBAElEF,cAAA,CAAA,MAAA,EAAA;MACEpB,SAAS,EAAEc,iBAAM,CAACT,IAAK;AACvB,MAAA,aAAA,EAAY,MAAM;MAClB,aAAaI,EAAAA,UAAU,EAAEJ,IAAK;AAAAc,MAAAA,QAAA,EAE7Bd,IAAAA;AAAI,KACD,CACP,eACDe,cAAA,CAACG,uBAAW,EAAA;MAACd,UAAU,EAAEA,UAAU,EAAEH,OAAQ;AAAAa,MAAAA,QAAA,EAAEb,OAAAA;AAAO,KAAc,CAAC,CAAA;AAAA,GAC/D,CAAC,CAAA;AAAA,CAEb,EAAC;AAEDV,UAAU,CAAC4B,WAAW,GAAG,YAAY;;;;"}
+{"version":3,"file":"IconButton.cjs","sources":["../../../src/icon-button/IconButton.tsx"],"sourcesContent":["import { forwardRef } from 'react'\n\nimport cn from 'classnames'\n\nimport { CounterSlot } from '../counter/CounterSlot'\nimport { IconLoaderCircle } from '../icons'\nimport { ActionElement, joinAriaLabel } from '../utils'\nimport surfaceStyles from '../utils/surface.module.css'\nimport styles from './IconButton.module.css'\nimport type {\n  IconButtonAsButtonProps,\n  IconButtonAsLinkProps,\n  IconButtonDataTestId,\n  IconButtonProps,\n  IconButtonVariant,\n} from './types'\n\nexport type {\n  IconButtonAsButtonProps,\n  IconButtonAsLinkProps,\n  IconButtonDataTestId,\n  IconButtonProps,\n  IconButtonVariant,\n}\n\n/** 36px fully rounded icon-only button; `loading` swaps the icon for a spinner and disables it. With `href` it renders a link that routes through `LinkProvider`. */\nexport const IconButton = forwardRef<\n  HTMLButtonElement | HTMLAnchorElement,\n  IconButtonProps\n>(\n  (\n    {\n      className,\n      variant = 'outline',\n      loading = false,\n      disabled = false,\n      icon,\n      counter,\n      counterLabel,\n      'aria-label': ariaLabel,\n      dataTestId,\n      ...rest\n    },\n    ref,\n  ) => (\n    <ActionElement\n      ref={ref}\n      className={cn(\n        styles.button,\n        styles[variant],\n        variant === 'surface' && surfaceStyles.surface,\n        loading && !disabled && styles.loading,\n        className,\n      )}\n      data-testid={dataTestId?.root}\n      aria-label={joinAriaLabel(ariaLabel, counterLabel)}\n      aria-busy={loading || undefined}\n      disabled={disabled || loading}\n      {...rest}\n    >\n      {loading ? (\n        <IconLoaderCircle className={styles.spinner} aria-hidden='true' />\n      ) : (\n        <span\n          className={styles.icon}\n          aria-hidden='true'\n          data-testid={dataTestId?.icon}\n        >\n          {icon}\n        </span>\n      )}\n      <CounterSlot dataTestId={dataTestId?.counter}>{counter}</CounterSlot>\n    </ActionElement>\n  ),\n)\n\nIconButton.displayName = 'IconButton'\n"],"names":["IconButton","forwardRef","_ref","ref","className","variant","loading","disabled","icon","counter","counterLabel","ariaLabel","dataTestId","rest","_jsxs","ActionElement","cn","styles","button","surfaceStyles","surface","root","joinAriaLabel","undefined","children","_jsx","IconLoaderCircle","spinner","CounterSlot","displayName"],"mappings":";;;;;;;;;;;;;;AAyBA;AACO,MAAMA,UAAU,gBAAGC,gBAAU,CAIlC,CAAAC,IAAA,EAaEC,GAAG,KAAA;EAAA,IAZH;IACEC,SAAS;AACTC,IAAAA,OAAO,GAAG,SAAS;AACnBC,IAAAA,OAAO,GAAG,KAAK;AACfC,IAAAA,QAAQ,GAAG,KAAK;IAChBC,IAAI;IACJC,OAAO;IACPC,YAAY;AACZ,IAAA,YAAY,EAAEC,SAAS;IACvBC,UAAU;IACV,GAAGC,IAAAA;AACL,GAAC,GAAAX,IAAA,CAAA;EAAA,oBAGDY,eAAA,CAACC,2BAAa,EAAA;AACZZ,IAAAA,GAAG,EAAEA,GAAI;AACTC,IAAAA,SAAS,EAAEY,EAAE,CACXC,iBAAM,CAACC,MAAM,EACbD,iBAAM,CAACZ,OAAO,CAAC,EACfA,OAAO,KAAK,SAAS,IAAIc,cAAa,CAACC,OAAO,EAC9Cd,OAAO,IAAI,CAACC,QAAQ,IAAIU,iBAAM,CAACX,OAAO,EACtCF,SACF,CAAE;IACF,aAAaQ,EAAAA,UAAU,EAAES,IAAK;AAC9B,IAAA,YAAA,EAAYC,2BAAa,CAACX,SAAS,EAAED,YAAY,CAAE;IACnD,WAAWJ,EAAAA,OAAO,IAAIiB,SAAU;IAChChB,QAAQ,EAAEA,QAAQ,IAAID,OAAQ;AAAA,IAAA,GAC1BO,IAAI;AAAAW,IAAAA,QAAA,EAEPlB,CAAAA,OAAO,gBACNmB,cAAA,CAACC,iCAAgB,EAAA;MAACtB,SAAS,EAAEa,iBAAM,CAACU,OAAQ;MAAC,aAAY,EAAA,MAAA;KAAQ,CAAC,gBAElEF,cAAA,CAAA,MAAA,EAAA;MACErB,SAAS,EAAEa,iBAAM,CAACT,IAAK;AACvB,MAAA,aAAA,EAAY,MAAM;MAClB,aAAaI,EAAAA,UAAU,EAAEJ,IAAK;AAAAgB,MAAAA,QAAA,EAE7BhB,IAAAA;AAAI,KACD,CACP,eACDiB,cAAA,CAACG,uBAAW,EAAA;MAAChB,UAAU,EAAEA,UAAU,EAAEH,OAAQ;AAAAe,MAAAA,QAAA,EAAEf,OAAAA;AAAO,KAAc,CAAC,CAAA;AAAA,GACxD,CAAC,CAAA;AAAA,CAEpB,EAAC;AAEDT,UAAU,CAAC6B,WAAW,GAAG,YAAY;;;;"}

package/dist/cjs/index.cjs

@@ -242,8 +242,8 @@ exports.useFocusTrap = useFocusTrap.useFocusTrap;
 exports.useOutsideClick = useOutsideClick.useOutsideClick;
 exports.breakpointWidths = breakpoints.breakpointWidths;
 exports.breakpoints = breakpoints.breakpoints;
-exports.logoBreakpointWidth = breakpoints.logoBreakpointWidth;
-exports.sidebarBreakpointWidth = breakpoints.sidebarBreakpointWidth;
+exports.downQuery = breakpoints.downQuery;
+exports.upQuery = breakpoints.upQuery;
 exports.spaces = responsive.spaces;
 exports.TokenIcon = TokenIcon.TokenIcon;
 exports.isTokenIcon = TokenIcon.isTokenIcon;
@@ -469,12 +469,15 @@ exports.Tooltip = Tooltip.Tooltip;
 exports.TxStatus = TxStatus.TxStatus;
 exports.Body = Typography.Body;
 exports.BodyLarge = Typography.BodyLarge;
+exports.Caption = Typography.Caption;
 exports.Description = Typography.Description;
 exports.GroupName = Typography.GroupName;
 exports.H1 = Typography.H1;
 exports.H2 = Typography.H2;
 exports.H3 = Typography.H3;
 exports.Typography = Typography.Typography;
+exports.typographyColors = Typography.typographyColors;
+exports.typographyWeights = Typography.typographyWeights;
 exports.ThemeToggler = ThemeToggler;
 Object.keys(lidoSharedUi).forEach(k => {
   if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {

package/dist/cjs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/index.ts"],"sourcesContent":["import { ThemeToggler as SharedThemeToggler } from '@lidofinance/lido-shared-ui'\n\nexport * from './icons'\n\nexport * from './accordion'\nexport * from './address'\nexport * from './address-button'\nexport * from './badge'\nexport * from './banner'\nexport * from './breadcrumbs'\nexport * from './button'\nexport * from './card'\nexport * from './checkbox'\nexport * from './copy'\nexport * from './counter'\nexport * from './data-list'\nexport * from './disclaimer'\nexport * from './divider'\nexport * from './error-page'\nexport * from './footer'\nexport * from './grid'\nexport * from './header'\nexport * from './hex'\nexport * from './hidden'\nexport {\n  Portal,\n  useBodyScrollLock,\n  useEscape,\n  useFocusTrap,\n  useOutsideClick,\n} from './hooks'\nexport type { FocusTrapOptions, PortalProps } from './hooks'\nexport * from './icon-button'\nexport * from './identicon'\nexport * from './info-tooltip'\nexport * from './input'\nexport * from './link-provider'\nexport * from './logo'\nexport * from './message-box'\nexport * from './modal'\nexport * from './nav-link'\nexport * from './notification'\nexport * from './page-layout'\nexport * from './pagination'\nexport * from './popover'\nexport * from './radio-button'\nexport * from './rich-input'\nexport * from './section-title'\nexport * from './segmented-control'\nexport * from './sidebar'\nexport * from './skeleton'\nexport * from './skip-link'\nexport * from './slider'\nexport * from './small-card'\nexport * from './stack'\nexport * from './stat-item'\nexport * from './switch'\nexport * from './tabs'\nexport * from './tag'\nexport * from './text-link'\nexport * from './theme-switcher'\nexport * from './token-amount'\nexport * from './token-selector'\nexport * from './tooltip'\nexport * from './tx-status'\nexport * from './typography'\nexport {\n  breakpoints,\n  breakpointWidths,\n  logoBreakpointWidth,\n  sidebarBreakpointWidth,\n  spaces,\n} from './utils'\nexport type { Breakpoint, Responsive, Space } from './utils'\n\n// Everything lido-shared-ui exposes is re-exported, so app products get the\n// same non-production banner and theming primitives as the landing. Their\n// styles come in through src/styles/global.css.\nexport * from '@lidofinance/lido-shared-ui'\n\n/** Unstyled in app-ui (relies on `--lido-ui-*` tokens); prefer `ThemeSwitcher`. */\nexport const ThemeToggler = SharedThemeToggler\n"],"names":["ThemeToggler","SharedThemeToggler"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgFA;AACO,MAAMA,YAAY,GAAGC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/index.ts"],"sourcesContent":["import { ThemeToggler as SharedThemeToggler } from '@lidofinance/lido-shared-ui'\n\nexport * from './icons'\n\nexport * from './accordion'\nexport * from './address'\nexport * from './address-button'\nexport * from './badge'\nexport * from './banner'\nexport * from './breadcrumbs'\nexport * from './button'\nexport * from './card'\nexport * from './checkbox'\nexport * from './copy'\nexport * from './counter'\nexport * from './data-list'\nexport * from './disclaimer'\nexport * from './divider'\nexport * from './error-page'\nexport * from './footer'\nexport * from './grid'\nexport * from './header'\nexport * from './hex'\nexport * from './hidden'\nexport {\n  Portal,\n  useBodyScrollLock,\n  useEscape,\n  useFocusTrap,\n  useOutsideClick,\n} from './hooks'\nexport type { FocusTrapOptions, PortalProps } from './hooks'\nexport * from './icon-button'\nexport * from './identicon'\nexport * from './info-tooltip'\nexport * from './input'\nexport * from './link-provider'\nexport * from './logo'\nexport * from './message-box'\nexport * from './modal'\nexport * from './nav-link'\nexport * from './notification'\nexport * from './page-layout'\nexport * from './pagination'\nexport * from './popover'\nexport * from './radio-button'\nexport * from './rich-input'\nexport * from './section-title'\nexport * from './segmented-control'\nexport * from './sidebar'\nexport * from './skeleton'\nexport * from './skip-link'\nexport * from './slider'\nexport * from './small-card'\nexport * from './stack'\nexport * from './stat-item'\nexport * from './switch'\nexport * from './tabs'\nexport * from './tag'\nexport * from './text-link'\nexport * from './theme-switcher'\nexport * from './token-amount'\nexport * from './token-selector'\nexport * from './tooltip'\nexport * from './tx-status'\nexport * from './typography'\nexport {\n  breakpoints,\n  breakpointWidths,\n  downQuery,\n  upQuery,\n  spaces,\n} from './utils'\nexport type { Breakpoint, Responsive, Space } from './utils'\n\n// Everything lido-shared-ui exposes is re-exported, so app products get the\n// same non-production banner and theming primitives as the landing. Their\n// styles come in through src/styles/global.css.\nexport * from '@lidofinance/lido-shared-ui'\n\n/** Unstyled in app-ui (relies on `--lido-ui-*` tokens); prefer `ThemeSwitcher`. */\nexport const ThemeToggler = SharedThemeToggler\n"],"names":["ThemeToggler","SharedThemeToggler"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgFA;AACO,MAAMA,YAAY,GAAGC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}