@lidofinance/lido-app-ui 1.12.0 → 1.14.0

package/dist/cjs/counter/Counter.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Counter.cjs","sources":["../../../src/counter/Counter.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './Counter.module.css'\n\nexport type CounterVariant =\n  | 'default'\n  | 'neutral'\n  | 'error'\n  | 'warning'\n  | 'action'\n  | 'active'\n\nexport type CounterDataTestId = {\n  root?: string\n}\n\nexport type CounterProps = HTMLAttributes<HTMLSpanElement> & {\n  variant?: CounterVariant\n  dataTestId?: CounterDataTestId\n}\n\nexport const Counter = ({\n  variant = 'default',\n  className,\n  children,\n  dataTestId,\n  ...rest\n}: CounterProps) => (\n  <span\n    className={cn(styles.counter, styles[variant], className)}\n    data-testid={dataTestId?.root}\n    {...rest}\n  >\n    {children}\n  </span>\n)\n"],"names":["Counter","_ref","variant","className","children","dataTestId","rest","_jsx","cn","styles","counter","root"],"mappings":";;;;;;;;AAuBO,MAAMA,OAAO,GAAGC,IAAA,IAAA;EAAA,IAAC;AACtBC,IAAAA,OAAO,GAAG,SAAS;IACnBC,SAAS;IACTC,QAAQ;IACRC,UAAU;IACV,GAAGC,IAAAA;AACS,GAAC,GAAAL,IAAA,CAAA;AAAA,EAAA,oBACbM,cAAA,CAAA,MAAA,EAAA;AACEJ,IAAAA,SAAS,EAAEK,EAAE,CAACC,cAAM,CAACC,OAAO,EAAED,cAAM,CAACP,OAAO,CAAC,EAAEC,SAAS,CAAE;IAC1D,aAAaE,EAAAA,UAAU,EAAEM,IAAK;AAAA,IAAA,GAC1BL,IAAI;AAAAF,IAAAA,QAAA,EAEPA,QAAAA;AAAQ,GACL,CAAC,CAAA;AAAA;;;;"}
+{"version":3,"file":"Counter.cjs","sources":["../../../src/counter/Counter.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './Counter.module.css'\n\nexport type CounterVariant =\n  | 'default'\n  | 'neutral'\n  | 'error'\n  | 'warning'\n  | 'action'\n  | 'active'\n\nexport type CounterDataTestId = {\n  root?: string\n}\n\nexport type CounterProps = HTMLAttributes<HTMLSpanElement> & {\n  variant?: CounterVariant\n  dataTestId?: CounterDataTestId\n}\n\n/** 20px pill for notification/unread counts; grows horizontally for multi-digit values. */\nexport const Counter = forwardRef<HTMLSpanElement, CounterProps>(\n  ({ variant = 'default', className, children, dataTestId, ...rest }, ref) => (\n    <span\n      ref={ref}\n      className={cn(styles.counter, styles[variant], className)}\n      data-testid={dataTestId?.root}\n      {...rest}\n    >\n      {children}\n    </span>\n  ),\n)\n\nCounter.displayName = 'Counter'\n"],"names":["Counter","forwardRef","_ref","ref","variant","className","children","dataTestId","rest","_jsx","cn","styles","counter","root","displayName"],"mappings":";;;;;;;;;AAuBA;AACO,MAAMA,OAAO,gBAAGC,gBAAU,CAC/B,CAAAC,IAAA,EAAoEC,GAAG,KAAA;EAAA,IAAtE;AAAEC,IAAAA,OAAO,GAAG,SAAS;IAAEC,SAAS;IAAEC,QAAQ;IAAEC,UAAU;IAAE,GAAGC,IAAAA;AAAK,GAAC,GAAAN,IAAA,CAAA;AAAA,EAAA,oBAChEO,cAAA,CAAA,MAAA,EAAA;AACEN,IAAAA,GAAG,EAAEA,GAAI;AACTE,IAAAA,SAAS,EAAEK,EAAE,CAACC,cAAM,CAACC,OAAO,EAAED,cAAM,CAACP,OAAO,CAAC,EAAEC,SAAS,CAAE;IAC1D,aAAaE,EAAAA,UAAU,EAAEM,IAAK;AAAA,IAAA,GAC1BL,IAAI;AAAAF,IAAAA,QAAA,EAEPA,QAAAA;AAAQ,GACL,CAAC,CAAA;AAAA,CAEX,EAAC;AAEDN,OAAO,CAACc,WAAW,GAAG,SAAS;;;;"}

package/dist/cjs/counter/CounterSlot.cjs

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
+const Counter = require('./Counter.cjs');
 const CounterSlot_module = require('./CounterSlot.module.css.cjs');
 const jsxRuntime = require('react/jsx-runtime');
 
@@ -10,13 +11,29 @@ const CounterSlot = _ref => {
     children,
     dataTestId
   } = _ref;
-  return children == null || children === false ? null : /*#__PURE__*/jsxRuntime.jsx("span", {
+  if (children == null || typeof children === 'boolean' || children === '') {
+    return null;
+  }
+  const content = typeof children === 'number' || typeof children === 'string' ? /*#__PURE__*/jsxRuntime.jsx(Counter.Counter, {
+    children: children
+  }) : children;
+  return /*#__PURE__*/jsxRuntime.jsx("span", {
     className: CounterSlot_module.slot,
     "aria-hidden": "true",
     "data-testid": dataTestId,
-    children: children
+    children: content
   });
 };
+const CounterLabel = _ref2 => {
+  let {
+    children
+  } = _ref2;
+  return children ? /*#__PURE__*/jsxRuntime.jsx("span", {
+    className: CounterSlot_module.visuallyHidden,
+    children: children
+  }) : null;
+};
 
+exports.CounterLabel = CounterLabel;
 exports.CounterSlot = CounterSlot;
 //# sourceMappingURL=CounterSlot.cjs.map

package/dist/cjs/counter/CounterSlot.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CounterSlot.cjs","sources":["../../../src/counter/CounterSlot.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\nimport styles from './CounterSlot.module.css'\n\ntype CounterSlotProps = {\n  children?: ReactNode\n  dataTestId?: string\n}\n\nexport const CounterSlot = ({ children, dataTestId }: CounterSlotProps) =>\n  children == null || children === false ? null : (\n    <span className={styles.slot} aria-hidden='true' data-testid={dataTestId}>\n      {children}\n    </span>\n  )\n"],"names":["CounterSlot","_ref","children","dataTestId","_jsx","className","styles","slot"],"mappings":";;;;;;;AASO,MAAMA,WAAW,GAAGC,IAAA,IAAA;EAAA,IAAC;IAAEC,QAAQ;AAAEC,IAAAA,UAAAA;AAA6B,GAAC,GAAAF,IAAA,CAAA;EAAA,OACpEC,QAAQ,IAAI,IAAI,IAAIA,QAAQ,KAAK,KAAK,GAAG,IAAI,gBAC3CE,cAAA,CAAA,MAAA,EAAA;IAAMC,SAAS,EAAEC,kBAAM,CAACC,IAAK;AAAC,IAAA,aAAA,EAAY,MAAM;AAAC,IAAA,aAAA,EAAaJ,UAAW;AAAAD,IAAAA,QAAA,EACtEA,QAAAA;AAAQ,GACL,CACP,CAAA;AAAA;;;;"}
+{"version":3,"file":"CounterSlot.cjs","sources":["../../../src/counter/CounterSlot.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\nimport { Counter } from './Counter'\nimport styles from './CounterSlot.module.css'\n\ntype CounterSlotProps = {\n  children?: ReactNode\n  dataTestId?: string\n}\n\nexport const CounterSlot = ({ children, dataTestId }: CounterSlotProps) => {\n  if (children == null || typeof children === 'boolean' || children === '') {\n    return null\n  }\n\n  const content =\n    typeof children === 'number' || typeof children === 'string' ? (\n      <Counter>{children}</Counter>\n    ) : (\n      children\n    )\n\n  return (\n    <span className={styles.slot} aria-hidden='true' data-testid={dataTestId}>\n      {content}\n    </span>\n  )\n}\n\nexport const CounterLabel = ({ children }: { children?: string }) =>\n  children ? <span className={styles.visuallyHidden}>{children}</span> : null\n"],"names":["CounterSlot","_ref","children","dataTestId","content","_jsx","Counter","className","styles","slot","CounterLabel","_ref2","visuallyHidden"],"mappings":";;;;;;;;AAUaA,MAAAA,WAAW,GAAGC,IAAA,IAAgD;EAAA,IAA/C;IAAEC,QAAQ;AAAEC,IAAAA,UAAAA;AAA6B,GAAC,GAAAF,IAAA,CAAA;AACpE,EAAA,IAAIC,QAAQ,IAAI,IAAI,IAAI,OAAOA,QAAQ,KAAK,SAAS,IAAIA,QAAQ,KAAK,EAAE,EAAE;AACxE,IAAA,OAAO,IAAI,CAAA;AACb,GAAA;AAEA,EAAA,MAAME,OAAO,GACX,OAAOF,QAAQ,KAAK,QAAQ,IAAI,OAAOA,QAAQ,KAAK,QAAQ,gBAC1DG,cAAA,CAACC,eAAO,EAAA;AAAAJ,IAAAA,QAAA,EAAEA,QAAAA;GAAkB,CAAC,GAE7BA,QACD,CAAA;AAEH,EAAA,oBACEG,cAAA,CAAA,MAAA,EAAA;IAAME,SAAS,EAAEC,kBAAM,CAACC,IAAK;AAAC,IAAA,aAAA,EAAY,MAAM;AAAC,IAAA,aAAA,EAAaN,UAAW;AAAAD,IAAAA,QAAA,EACtEE,OAAAA;AAAO,GACJ,CAAC,CAAA;AAEX,EAAC;AAEM,MAAMM,YAAY,GAAGC,KAAA,IAAA;EAAA,IAAC;AAAET,IAAAA,QAAAA;AAAgC,GAAC,GAAAS,KAAA,CAAA;EAAA,OAC9DT,QAAQ,gBAAGG,cAAA,CAAA,MAAA,EAAA;IAAME,SAAS,EAAEC,kBAAM,CAACI,cAAe;AAAAV,IAAAA,QAAA,EAAEA,QAAAA;GAAe,CAAC,GAAG,IAAI,CAAA;AAAA;;;;;"}

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

@@ -1,6 +1,6 @@
 'use strict';
 
-const styles = {"slot":"CounterSlot-module_slot__EhyeG"};
+const styles = {"slot":"CounterSlot-module_slot__EhyeG","visuallyHidden":"CounterSlot-module_visuallyHidden__mbzc0"};
 
 module.exports = styles;
 //# sourceMappingURL=CounterSlot.module.css.cjs.map

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

@@ -6,6 +6,7 @@ const cn = require('classnames');
 const DataList_module = require('./DataList.module.css.cjs');
 const jsxRuntime = require('react/jsx-runtime');
 
+/** Spacing wrapper for label-left, value-right transaction details; put `DataListRow`s inside. */
 const DataList = _ref => {
   let {
     children,

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

@@ -1 +1 @@
-{"version":3,"file":"DataList.cjs","sources":["../../../src/data-list/DataList.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './DataList.module.css'\n\nexport type DataListDataTestId = {\n  root?: string\n}\n\nexport type DataListProps = Omit<\n  ComponentPropsWithoutRef<'div'>,\n  'children'\n> & {\n  children: ReactNode\n  divided?: boolean\n  dataTestId?: DataListDataTestId\n}\n\nexport const DataList = ({\n  children,\n  className,\n  divided = false,\n  dataTestId,\n  ...rest\n}: DataListProps) => (\n  <div\n    className={cn(styles.card, divided && styles.divided, className)}\n    data-testid={dataTestId?.root}\n    {...rest}\n  >\n    {children}\n  </div>\n)\n"],"names":["DataList","_ref","children","className","divided","dataTestId","rest","_jsx","cn","styles","card","root"],"mappings":";;;;;;;;AAmBO,MAAMA,QAAQ,GAAGC,IAAA,IAAA;EAAA,IAAC;IACvBC,QAAQ;IACRC,SAAS;AACTC,IAAAA,OAAO,GAAG,KAAK;IACfC,UAAU;IACV,GAAGC,IAAAA;AACU,GAAC,GAAAL,IAAA,CAAA;AAAA,EAAA,oBACdM,cAAA,CAAA,KAAA,EAAA;AACEJ,IAAAA,SAAS,EAAEK,EAAE,CAACC,eAAM,CAACC,IAAI,EAAEN,OAAO,IAAIK,eAAM,CAACL,OAAO,EAAED,SAAS,CAAE;IACjE,aAAaE,EAAAA,UAAU,EAAEM,IAAK;AAAA,IAAA,GAC1BL,IAAI;AAAAJ,IAAAA,QAAA,EAEPA,QAAAA;AAAQ,GACN,CAAC,CAAA;AAAA;;;;"}
+{"version":3,"file":"DataList.cjs","sources":["../../../src/data-list/DataList.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './DataList.module.css'\n\nexport type DataListDataTestId = {\n  root?: string\n}\n\nexport type DataListProps = Omit<\n  ComponentPropsWithoutRef<'div'>,\n  'children'\n> & {\n  children: ReactNode\n  divided?: boolean\n  dataTestId?: DataListDataTestId\n}\n\n/** Spacing wrapper for label-left, value-right transaction details; put `DataListRow`s inside. */\nexport const DataList = ({\n  children,\n  className,\n  divided = false,\n  dataTestId,\n  ...rest\n}: DataListProps) => (\n  <div\n    className={cn(styles.card, divided && styles.divided, className)}\n    data-testid={dataTestId?.root}\n    {...rest}\n  >\n    {children}\n  </div>\n)\n"],"names":["DataList","_ref","children","className","divided","dataTestId","rest","_jsx","cn","styles","card","root"],"mappings":";;;;;;;;AAmBA;AACO,MAAMA,QAAQ,GAAGC,IAAA,IAAA;EAAA,IAAC;IACvBC,QAAQ;IACRC,SAAS;AACTC,IAAAA,OAAO,GAAG,KAAK;IACfC,UAAU;IACV,GAAGC,IAAAA;AACU,GAAC,GAAAL,IAAA,CAAA;AAAA,EAAA,oBACdM,cAAA,CAAA,KAAA,EAAA;AACEJ,IAAAA,SAAS,EAAEK,EAAE,CAACC,eAAM,CAACC,IAAI,EAAEN,OAAO,IAAIK,eAAM,CAACL,OAAO,EAAED,SAAS,CAAE;IACjE,aAAaE,EAAAA,UAAU,EAAEM,IAAK;AAAA,IAAA,GAC1BL,IAAI;AAAAJ,IAAAA,QAAA,EAEPA,QAAAA;AAAQ,GACN,CAAC,CAAA;AAAA;;;;"}

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"DataListRow.cjs","sources":["../../../src/data-list/DataListRow.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react'\n\nimport { IconInfo } from '../icons'\nimport cn from 'classnames'\nimport { Tooltip } from '../tooltip'\n\nimport styles from './DataList.module.css'\n\nexport type DetailRowValue = ReactNode | { from: ReactNode; to: ReactNode }\n\nexport type DataListRowDataTestId = {\n  root?: string\n  label?: string\n  value?: string\n  icon?: string\n  description?: string\n}\n\nexport type DetailRowProps = ComponentPropsWithoutRef<'div'> & {\n  label: ReactNode\n  value: DetailRowValue\n  icon?: ReactNode\n  info?: ReactNode\n  infoFaint?: boolean\n  description?: ReactNode\n  descriptionInfo?: ReactNode\n  dataTestId?: DataListRowDataTestId\n}\n\nconst isChangeValue = (\n  value: DetailRowValue,\n): value is { from: ReactNode; to: ReactNode } =>\n  typeof value === 'object' &&\n  value !== null &&\n  'from' in value &&\n  'to' in value\n\nexport const DataListRow = ({\n  label,\n  value,\n  icon,\n  info,\n  infoFaint = false,\n  description,\n  descriptionInfo,\n  className,\n  dataTestId,\n  ...rest\n}: DetailRowProps) => (\n  <div\n    className={cn(styles.row, className)}\n    data-testid={dataTestId?.root}\n    {...rest}\n  >\n    <span className={styles.mainRow}>\n      <span className={styles.labelGroup}>\n        {icon ? (\n          <span className={styles.leadingIcon} data-testid={dataTestId?.icon}>\n            {icon}\n          </span>\n        ) : null}\n        <span className={styles.label} data-testid={dataTestId?.label}>\n          {label}\n        </span>\n        {info ? (\n          <Tooltip\n            content={info}\n            className={cn(styles.info, infoFaint && styles.infoFaint)}\n          >\n            <IconInfo className={styles.infoIcon} />\n          </Tooltip>\n        ) : null}\n      </span>\n      {isChangeValue(value) ? (\n        <span className={styles.value} data-testid={dataTestId?.value}>\n          <span className={styles.valueOld}>{value.from}</span>\n          <span className={styles.valueArrow} aria-hidden='true'>\n            →\n          </span>\n          <span>{value.to}</span>\n        </span>\n      ) : (\n        <span className={styles.value} data-testid={dataTestId?.value}>\n          {value}\n        </span>\n      )}\n    </span>\n    {description ? (\n      <span className={styles.descriptionRow}>\n        <span\n          className={styles.description}\n          data-testid={dataTestId?.description}\n        >\n          {description}\n        </span>\n        {descriptionInfo ? (\n          <Tooltip content={descriptionInfo} className={styles.info}>\n            <IconInfo className={styles.descriptionIcon} />\n          </Tooltip>\n        ) : null}\n      </span>\n    ) : null}\n  </div>\n)\n"],"names":["isChangeValue","value","DataListRow","_ref","label","icon","info","infoFaint","description","descriptionInfo","className","dataTestId","rest","_jsxs","cn","styles","row","root","children","mainRow","labelGroup","_jsx","leadingIcon","Tooltip","content","IconInfo","infoIcon","valueOld","from","valueArrow","to","descriptionRow","descriptionIcon"],"mappings":";;;;;;;;;;AA6BA,MAAMA,aAAa,GACjBC,KAAqB,IAErB,OAAOA,KAAK,KAAK,QAAQ,IACzBA,KAAK,KAAK,IAAI,IACd,MAAM,IAAIA,KAAK,IACf,IAAI,IAAIA,KAAK,CAAA;AAER,MAAMC,WAAW,GAAGC,IAAA,IAAA;EAAA,IAAC;IAC1BC,KAAK;IACLH,KAAK;IACLI,IAAI;IACJC,IAAI;AACJC,IAAAA,SAAS,GAAG,KAAK;IACjBC,WAAW;IACXC,eAAe;IACfC,SAAS;IACTC,UAAU;IACV,GAAGC,IAAAA;AACW,GAAC,GAAAT,IAAA,CAAA;AAAA,EAAA,oBACfU,eAAA,CAAA,KAAA,EAAA;IACEH,SAAS,EAAEI,EAAE,CAACC,eAAM,CAACC,GAAG,EAAEN,SAAS,CAAE;IACrC,aAAaC,EAAAA,UAAU,EAAEM,IAAK;AAAA,IAAA,GAC1BL,IAAI;AAAAM,IAAAA,QAAA,gBAERL,eAAA,CAAA,MAAA,EAAA;MAAMH,SAAS,EAAEK,eAAM,CAACI,OAAQ;AAAAD,MAAAA,QAAA,gBAC9BL,eAAA,CAAA,MAAA,EAAA;QAAMH,SAAS,EAAEK,eAAM,CAACK,UAAW;QAAAF,QAAA,EAAA,CAChCb,IAAI,gBACHgB,cAAA,CAAA,MAAA,EAAA;UAAMX,SAAS,EAAEK,eAAM,CAACO,WAAY;UAAC,aAAaX,EAAAA,UAAU,EAAEN,IAAK;AAAAa,UAAAA,QAAA,EAChEb,IAAAA;AAAI,SACD,CAAC,GACL,IAAI,eACRgB,cAAA,CAAA,MAAA,EAAA;UAAMX,SAAS,EAAEK,eAAM,CAACX,KAAM;UAAC,aAAaO,EAAAA,UAAU,EAAEP,KAAM;AAAAc,UAAAA,QAAA,EAC3Dd,KAAAA;AAAK,SACF,CAAC,EACNE,IAAI,gBACHe,cAAA,CAACE,eAAO,EAAA;AACNC,UAAAA,OAAO,EAAElB,IAAK;AACdI,UAAAA,SAAS,EAAEI,EAAE,CAACC,eAAM,CAACT,IAAI,EAAEC,SAAS,IAAIQ,eAAM,CAACR,SAAS,CAAE;UAAAW,QAAA,eAE1DG,cAAA,CAACI,iBAAQ,EAAA;YAACf,SAAS,EAAEK,eAAM,CAACW,QAAAA;WAAW,CAAA;SAChC,CAAC,GACR,IAAI,CAAA;AAAA,OACJ,CAAC,EACN1B,aAAa,CAACC,KAAK,CAAC,gBACnBY,eAAA,CAAA,MAAA,EAAA;QAAMH,SAAS,EAAEK,eAAM,CAACd,KAAM;QAAC,aAAaU,EAAAA,UAAU,EAAEV,KAAM;AAAAiB,QAAAA,QAAA,gBAC5DG,cAAA,CAAA,MAAA,EAAA;UAAMX,SAAS,EAAEK,eAAM,CAACY,QAAS;UAAAT,QAAA,EAAEjB,KAAK,CAAC2B,IAAAA;SAAW,CAAC,eACrDP,cAAA,CAAA,MAAA,EAAA;UAAMX,SAAS,EAAEK,eAAM,CAACc,UAAW;AAAC,UAAA,aAAA,EAAY,MAAM;AAAAX,UAAAA,QAAA,EAAC,QAAA;SAEjD,CAAC,eACPG,cAAA,CAAA,MAAA,EAAA;UAAAH,QAAA,EAAOjB,KAAK,CAAC6B,EAAAA;AAAE,SAAO,CAAC,CAAA;OACnB,CAAC,gBAEPT,cAAA,CAAA,MAAA,EAAA;QAAMX,SAAS,EAAEK,eAAM,CAACd,KAAM;QAAC,aAAaU,EAAAA,UAAU,EAAEV,KAAM;AAAAiB,QAAAA,QAAA,EAC3DjB,KAAAA;AAAK,OACF,CACP,CAAA;AAAA,KACG,CAAC,EACNO,WAAW,gBACVK,eAAA,CAAA,MAAA,EAAA;MAAMH,SAAS,EAAEK,eAAM,CAACgB,cAAe;AAAAb,MAAAA,QAAA,gBACrCG,cAAA,CAAA,MAAA,EAAA;QACEX,SAAS,EAAEK,eAAM,CAACP,WAAY;QAC9B,aAAaG,EAAAA,UAAU,EAAEH,WAAY;AAAAU,QAAAA,QAAA,EAEpCV,WAAAA;AAAW,OACR,CAAC,EACNC,eAAe,gBACdY,cAAA,CAACE,eAAO,EAAA;AAACC,QAAAA,OAAO,EAAEf,eAAgB;QAACC,SAAS,EAAEK,eAAM,CAACT,IAAK;QAAAY,QAAA,eACxDG,cAAA,CAACI,iBAAQ,EAAA;UAACf,SAAS,EAAEK,eAAM,CAACiB,eAAAA;SAAkB,CAAA;OACvC,CAAC,GACR,IAAI,CAAA;KACJ,CAAC,GACL,IAAI,CAAA;AAAA,GACL,CAAC,CAAA;AAAA;;;;"}
+{"version":3,"file":"DataListRow.cjs","sources":["../../../src/data-list/DataListRow.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react'\n\nimport cn from 'classnames'\nimport { InfoTooltip } from '../info-tooltip'\n\nimport styles from './DataList.module.css'\n\nexport type DetailRowValue = ReactNode | { from: ReactNode; to: ReactNode }\n\nexport type DataListRowDataTestId = {\n  root?: string\n  label?: string\n  value?: string\n  icon?: string\n  description?: string\n}\n\nexport type DetailRowProps = ComponentPropsWithoutRef<'div'> & {\n  label: ReactNode\n  value: DetailRowValue\n  icon?: ReactNode\n  info?: ReactNode\n  infoFaint?: boolean\n  description?: ReactNode\n  descriptionInfo?: ReactNode\n  dataTestId?: DataListRowDataTestId\n}\n\nconst isChangeValue = (\n  value: DetailRowValue,\n): value is { from: ReactNode; to: ReactNode } =>\n  typeof value === 'object' &&\n  value !== null &&\n  'from' in value &&\n  'to' in value\n\n/** Label and value row with an optional info tooltip, leading icon and from → to change format. */\nexport const DataListRow = ({\n  label,\n  value,\n  icon,\n  info,\n  infoFaint = false,\n  description,\n  descriptionInfo,\n  className,\n  dataTestId,\n  ...rest\n}: DetailRowProps) => (\n  <div\n    className={cn(styles.row, className)}\n    data-testid={dataTestId?.root}\n    {...rest}\n  >\n    <span className={styles.mainRow}>\n      <span className={styles.labelGroup}>\n        {icon ? (\n          <span className={styles.leadingIcon} data-testid={dataTestId?.icon}>\n            {icon}\n          </span>\n        ) : null}\n        <span className={styles.label} data-testid={dataTestId?.label}>\n          {label}\n        </span>\n        {info ? (\n          <InfoTooltip\n            content={info}\n            className={cn(infoFaint && styles.infoFaint)}\n          />\n        ) : null}\n      </span>\n      {isChangeValue(value) ? (\n        <span className={styles.value} data-testid={dataTestId?.value}>\n          <span className={styles.valueOld}>{value.from}</span>\n          <span className={styles.valueArrow} aria-hidden='true'>\n            →\n          </span>\n          <span>{value.to}</span>\n        </span>\n      ) : (\n        <span className={styles.value} data-testid={dataTestId?.value}>\n          {value}\n        </span>\n      )}\n    </span>\n    {description ? (\n      <span className={styles.descriptionRow}>\n        <span\n          className={styles.description}\n          data-testid={dataTestId?.description}\n        >\n          {description}\n        </span>\n        {descriptionInfo ? (\n          <InfoTooltip content={descriptionInfo} tone='tertiary' />\n        ) : null}\n      </span>\n    ) : null}\n  </div>\n)\n"],"names":["isChangeValue","value","DataListRow","_ref","label","icon","info","infoFaint","description","descriptionInfo","className","dataTestId","rest","_jsxs","cn","styles","row","root","children","mainRow","labelGroup","_jsx","leadingIcon","InfoTooltip","content","valueOld","from","valueArrow","to","descriptionRow","tone"],"mappings":"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"}

package/dist/cjs/disclaimer/Disclaimer.cjs

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
+const react = require('react');
 const cn = require('classnames');
 const Disclaimer_module = require('./Disclaimer.module.css.cjs');
 const jsxRuntime = require('react/jsx-runtime');
@@ -11,23 +12,29 @@ 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"
   }), "."]
 });
-const Disclaimer = _ref => {
+
+/** 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. */
+const Disclaimer = /*#__PURE__*/react.forwardRef((_ref, ref) => {
   let {
+    as: Component = 'p',
     className,
     children = defaultContent,
     dataTestId,
     ...rest
   } = _ref;
-  return /*#__PURE__*/jsxRuntime.jsx("p", {
+  return /*#__PURE__*/jsxRuntime.jsx(Component, {
+    ref: ref,
     className: cn(Disclaimer_module.root, className),
     "data-testid": dataTestId?.root,
     ...rest,
     children: children
   });
-};
+});
+Disclaimer.displayName = 'Disclaimer';
 
 exports.Disclaimer = Disclaimer;
 //# sourceMappingURL=Disclaimer.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Disclaimer.cjs","sources":["../../../src/disclaimer/Disclaimer.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } 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  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>\n      Privacy Notice\n    </TextLink>\n    .\n  </>\n)\n\nexport const Disclaimer = ({\n  className,\n  children = defaultContent,\n  dataTestId,\n  ...rest\n}: DisclaimerProps) => (\n  <p\n    className={cn(styles.root, className)}\n    data-testid={dataTestId?.root}\n    {...rest}\n  >\n    {children}\n  </p>\n)\n"],"names":["defaultContent","_jsxs","_Fragment","children","_jsx","TextLink","href","external","Disclaimer","_ref","className","dataTestId","rest","cn","styles","root"],"mappings":";;;;;;;;;AAeA,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;AAAAJ,IAAAA,QAAA,EAAC,gBAAA;AAEzD,GAAU,CAAC,EAEb,GAAA,CAAA;AAAA,CAAE,CACH,CAAA;AAEM,MAAMK,UAAU,GAAGC,IAAA,IAAA;EAAA,IAAC;IACzBC,SAAS;AACTP,IAAAA,QAAQ,GAAGH,cAAc;IACzBW,UAAU;IACV,GAAGC,IAAAA;AACY,GAAC,GAAAH,IAAA,CAAA;AAAA,EAAA,oBAChBL,cAAA,CAAA,GAAA,EAAA;IACEM,SAAS,EAAEG,EAAE,CAACC,iBAAM,CAACC,IAAI,EAAEL,SAAS,CAAE;IACtC,aAAaC,EAAAA,UAAU,EAAEI,IAAK;AAAA,IAAA,GAC1BH,IAAI;AAAAT,IAAAA,QAAA,EAEPA,QAAAA;AAAQ,GACR,CAAC,CAAA;AAAA;;;;"}
+{"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;;;;"}

package/dist/cjs/divider/Divider.cjs

@@ -12,11 +12,16 @@ const Divider = /*#__PURE__*/react.forwardRef((_ref, ref) => {
   let {
     orientation = 'horizontal',
     className,
+    role,
+    dataTestId,
     ...rest
   } = _ref;
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     ref: ref,
+    role: role,
+    "aria-orientation": role === 'separator' && orientation === 'vertical' ? 'vertical' : undefined,
     className: cn(Divider_module.root, Divider_module[orientation], className),
+    "data-testid": dataTestId?.root,
     ...rest
   });
 });

package/dist/cjs/divider/Divider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.cjs","sources":["../../../src/divider/Divider.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './Divider.module.css'\n\nexport type DividerOrientation = 'horizontal' | 'vertical'\n\nexport type DividerProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {\n  orientation?: DividerOrientation\n}\n\n/** Visual-only 1px line in the default border color; stretches along the cross axis of a flex parent. Pass role='separator' for semantics. */\nexport const Divider = forwardRef<HTMLDivElement, DividerProps>(\n  ({ orientation = 'horizontal', className, ...rest }, ref) => (\n    <div\n      ref={ref}\n      className={cn(styles.root, styles[orientation], className)}\n      {...rest}\n    />\n  ),\n)\n\nDivider.displayName = 'Divider'\n"],"names":["Divider","forwardRef","_ref","ref","orientation","className","rest","_jsx","cn","styles","root","displayName"],"mappings":";;;;;;;;;AAYA;AACO,MAAMA,OAAO,gBAAGC,gBAAU,CAC/B,CAAAC,IAAA,EAAqDC,GAAG,KAAA;EAAA,IAAvD;AAAEC,IAAAA,WAAW,GAAG,YAAY;IAAEC,SAAS;IAAE,GAAGC,IAAAA;AAAK,GAAC,GAAAJ,IAAA,CAAA;AAAA,EAAA,oBACjDK,cAAA,CAAA,KAAA,EAAA;AACEJ,IAAAA,GAAG,EAAEA,GAAI;AACTE,IAAAA,SAAS,EAAEG,EAAE,CAACC,cAAM,CAACC,IAAI,EAAED,cAAM,CAACL,WAAW,CAAC,EAAEC,SAAS,CAAE;IAAA,GACvDC,IAAAA;AAAI,GACT,CAAC,CAAA;AAAA,CAEN,EAAC;AAEDN,OAAO,CAACW,WAAW,GAAG,SAAS;;;;"}
+{"version":3,"file":"Divider.cjs","sources":["../../../src/divider/Divider.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './Divider.module.css'\n\nexport type DividerOrientation = 'horizontal' | 'vertical'\n\nexport type DividerDataTestId = { root?: string }\n\nexport type DividerProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {\n  orientation?: DividerOrientation\n  dataTestId?: DividerDataTestId\n}\n\n/** Visual-only 1px line in the default border color; stretches along the cross axis of a flex parent. Pass role='separator' for semantics. */\nexport const Divider = forwardRef<HTMLDivElement, DividerProps>(\n  (\n    { orientation = 'horizontal', className, role, dataTestId, ...rest },\n    ref,\n  ) => (\n    <div\n      ref={ref}\n      role={role}\n      aria-orientation={\n        role === 'separator' && orientation === 'vertical'\n          ? 'vertical'\n          : undefined\n      }\n      className={cn(styles.root, styles[orientation], className)}\n      data-testid={dataTestId?.root}\n      {...rest}\n    />\n  ),\n)\n\nDivider.displayName = 'Divider'\n"],"names":["Divider","forwardRef","_ref","ref","orientation","className","role","dataTestId","rest","_jsx","undefined","cn","styles","root","displayName"],"mappings":";;;;;;;;;AAeA;AACO,MAAMA,OAAO,gBAAGC,gBAAU,CAC/B,CAAAC,IAAA,EAEEC,GAAG,KAAA;EAAA,IADH;AAAEC,IAAAA,WAAW,GAAG,YAAY;IAAEC,SAAS;IAAEC,IAAI;IAAEC,UAAU;IAAE,GAAGC,IAAAA;AAAK,GAAC,GAAAN,IAAA,CAAA;AAAA,EAAA,oBAGpEO,cAAA,CAAA,KAAA,EAAA;AACEN,IAAAA,GAAG,EAAEA,GAAI;AACTG,IAAAA,IAAI,EAAEA,IAAK;IACX,kBACEA,EAAAA,IAAI,KAAK,WAAW,IAAIF,WAAW,KAAK,UAAU,GAC9C,UAAU,GACVM,SACL;AACDL,IAAAA,SAAS,EAAEM,EAAE,CAACC,cAAM,CAACC,IAAI,EAAED,cAAM,CAACR,WAAW,CAAC,EAAEC,SAAS,CAAE;IAC3D,aAAaE,EAAAA,UAAU,EAAEM,IAAK;IAAA,GAC1BL,IAAAA;AAAI,GACT,CAAC,CAAA;AAAA,CAEN,EAAC;AAEDR,OAAO,CAACc,WAAW,GAAG,SAAS;;;;"}

package/dist/cjs/error-page/ErrorPage.cjs

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
+const react = require('react');
 const cn = require('classnames');
 const ErrorPage_module = require('./ErrorPage.module.css.cjs');
 const jsxRuntime = require('react/jsx-runtime');
@@ -17,7 +18,10 @@ const presets = {
   }
 };
 const isPresetCode = code => code === '404' || code === '500';
-const ErrorPage = _ref => {
+const isEmpty = node => node == null || node === '' || typeof node === 'boolean';
+
+/** Centered 404 / 500 block with its own page gutters; render it directly in the page, not inside a container that already adds them. */
+const ErrorPage = /*#__PURE__*/react.forwardRef((_ref, ref) => {
   let {
     code,
     title,
@@ -27,26 +31,28 @@ const ErrorPage = _ref => {
     dataTestId,
     ...rest
   } = _ref;
-  const preset = isPresetCode(code) ? presets[code] : undefined;
+  const codeStr = code == null ? undefined : String(code);
+  const preset = isPresetCode(codeStr) ? presets[codeStr] : undefined;
   const resolvedTitle = title !== undefined ? title : preset?.title;
   const resolvedDescription = description !== undefined ? description : preset?.description;
   return /*#__PURE__*/jsxRuntime.jsx("div", {
+    ref: ref,
     className: cn(ErrorPage_module.root, className),
     "data-testid": dataTestId?.root,
     ...rest,
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: ErrorPage_module.inner,
-      children: [code != null ? /*#__PURE__*/jsxRuntime.jsx("div", {
+      children: [codeStr != null ? /*#__PURE__*/jsxRuntime.jsx("div", {
         className: ErrorPage_module.code,
         "data-testid": dataTestId?.code,
-        children: code
+        children: codeStr
       }) : null, /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: ErrorPage_module.text,
-        children: [resolvedTitle != null ? /*#__PURE__*/jsxRuntime.jsx("h1", {
+        children: [!isEmpty(resolvedTitle) ? /*#__PURE__*/jsxRuntime.jsx("h1", {
           className: ErrorPage_module.title,
           "data-testid": dataTestId?.title,
           children: resolvedTitle
-        }) : null, resolvedDescription != null ? /*#__PURE__*/jsxRuntime.jsx("p", {
+        }) : null, !isEmpty(resolvedDescription) ? /*#__PURE__*/jsxRuntime.jsx("p", {
           className: ErrorPage_module.description,
           "data-testid": dataTestId?.description,
           children: resolvedDescription
@@ -58,7 +64,8 @@ const ErrorPage = _ref => {
       }) : null]
     })
   });
-};
+});
+ErrorPage.displayName = 'ErrorPage';
 
 exports.ErrorPage = ErrorPage;
 //# sourceMappingURL=ErrorPage.cjs.map

package/dist/cjs/error-page/ErrorPage.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorPage.cjs","sources":["../../../src/error-page/ErrorPage.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './ErrorPage.module.css'\n\nexport type ErrorPageCode = '404' | '500'\n\nexport type ErrorPageDataTestId = {\n  root?: string\n  code?: string\n  title?: string\n  description?: string\n  action?: string\n}\n\nexport type ErrorPageProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {\n  /** `'404'` / `'500'` fill default title and description. */\n  code?: ErrorPageCode | (string & {})\n  title?: ReactNode\n  description?: ReactNode\n  /** Slot below the text, usually a `Button`. */\n  action?: ReactNode\n  dataTestId?: ErrorPageDataTestId\n}\n\nconst presets: Record<ErrorPageCode, { title: string; description: string }> = {\n  '404': {\n    title: 'Page not found',\n    description:\n      'The page you’re looking for doesn’t exist or has been moved. Check the URL or return to your dashboard.',\n  },\n  '500': {\n    title: 'Something went wrong',\n    description:\n      'We’re having trouble loading this page. Please try again in a moment.',\n  },\n}\n\nconst isPresetCode = (code?: string): code is ErrorPageCode =>\n  code === '404' || code === '500'\n\nexport const ErrorPage = ({\n  code,\n  title,\n  description,\n  action,\n  className,\n  dataTestId,\n  ...rest\n}: ErrorPageProps) => {\n  const preset = isPresetCode(code) ? presets[code] : undefined\n  const resolvedTitle = title !== undefined ? title : preset?.title\n  const resolvedDescription =\n    description !== undefined ? description : preset?.description\n\n  return (\n    <div\n      className={cn(styles.root, className)}\n      data-testid={dataTestId?.root}\n      {...rest}\n    >\n      <div className={styles.inner}>\n        {code != null ? (\n          <div className={styles.code} data-testid={dataTestId?.code}>\n            {code}\n          </div>\n        ) : null}\n        <div className={styles.text}>\n          {resolvedTitle != null ? (\n            <h1 className={styles.title} data-testid={dataTestId?.title}>\n              {resolvedTitle}\n            </h1>\n          ) : null}\n          {resolvedDescription != null ? (\n            <p\n              className={styles.description}\n              data-testid={dataTestId?.description}\n            >\n              {resolvedDescription}\n            </p>\n          ) : null}\n        </div>\n        {action != null ? (\n          <div className={styles.action} data-testid={dataTestId?.action}>\n            {action}\n          </div>\n        ) : null}\n      </div>\n    </div>\n  )\n}\n"],"names":["presets","title","description","isPresetCode","code","ErrorPage","_ref","action","className","dataTestId","rest","preset","undefined","resolvedTitle","resolvedDescription","_jsx","cn","styles","root","children","_jsxs","inner","text"],"mappings":";;;;;;;;AA0BA,MAAMA,OAAsE,GAAG;AAC7E,EAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAE,gBAAgB;AACvBC,IAAAA,WAAW,EACT,yGAAA;GACH;AACD,EAAA,KAAK,EAAE;AACLD,IAAAA,KAAK,EAAE,sBAAsB;AAC7BC,IAAAA,WAAW,EACT,uEAAA;AACJ,GAAA;AACF,CAAC,CAAA;AAED,MAAMC,YAAY,GAAIC,IAAa,IACjCA,IAAI,KAAK,KAAK,IAAIA,IAAI,KAAK,KAAK,CAAA;AAErBC,MAAAA,SAAS,GAAGC,IAAA,IAQH;EAAA,IARI;IACxBF,IAAI;IACJH,KAAK;IACLC,WAAW;IACXK,MAAM;IACNC,SAAS;IACTC,UAAU;IACV,GAAGC,IAAAA;AACW,GAAC,GAAAJ,IAAA,CAAA;AACf,EAAA,MAAMK,MAAM,GAAGR,YAAY,CAACC,IAAI,CAAC,GAAGJ,OAAO,CAACI,IAAI,CAAC,GAAGQ,SAAS,CAAA;EAC7D,MAAMC,aAAa,GAAGZ,KAAK,KAAKW,SAAS,GAAGX,KAAK,GAAGU,MAAM,EAAEV,KAAK,CAAA;EACjE,MAAMa,mBAAmB,GACvBZ,WAAW,KAAKU,SAAS,GAAGV,WAAW,GAAGS,MAAM,EAAET,WAAW,CAAA;AAE/D,EAAA,oBACEa,cAAA,CAAA,KAAA,EAAA;IACEP,SAAS,EAAEQ,EAAE,CAACC,gBAAM,CAACC,IAAI,EAAEV,SAAS,CAAE;IACtC,aAAaC,EAAAA,UAAU,EAAES,IAAK;AAAA,IAAA,GAC1BR,IAAI;AAAAS,IAAAA,QAAA,eAERC,eAAA,CAAA,KAAA,EAAA;MAAKZ,SAAS,EAAES,gBAAM,CAACI,KAAM;AAAAF,MAAAA,QAAA,EAC1Bf,CAAAA,IAAI,IAAI,IAAI,gBACXW,cAAA,CAAA,KAAA,EAAA;QAAKP,SAAS,EAAES,gBAAM,CAACb,IAAK;QAAC,aAAaK,EAAAA,UAAU,EAAEL,IAAK;AAAAe,QAAAA,QAAA,EACxDf,IAAAA;AAAI,OACF,CAAC,GACJ,IAAI,eACRgB,eAAA,CAAA,KAAA,EAAA;QAAKZ,SAAS,EAAES,gBAAM,CAACK,IAAK;AAAAH,QAAAA,QAAA,EACzBN,CAAAA,aAAa,IAAI,IAAI,gBACpBE,cAAA,CAAA,IAAA,EAAA;UAAIP,SAAS,EAAES,gBAAM,CAAChB,KAAM;UAAC,aAAaQ,EAAAA,UAAU,EAAER,KAAM;AAAAkB,UAAAA,QAAA,EACzDN,aAAAA;SACC,CAAC,GACH,IAAI,EACPC,mBAAmB,IAAI,IAAI,gBAC1BC,cAAA,CAAA,GAAA,EAAA;UACEP,SAAS,EAAES,gBAAM,CAACf,WAAY;UAC9B,aAAaO,EAAAA,UAAU,EAAEP,WAAY;AAAAiB,UAAAA,QAAA,EAEpCL,mBAAAA;SACA,CAAC,GACF,IAAI,CAAA;AAAA,OACL,CAAC,EACLP,MAAM,IAAI,IAAI,gBACbQ,cAAA,CAAA,KAAA,EAAA;QAAKP,SAAS,EAAES,gBAAM,CAACV,MAAO;QAAC,aAAaE,EAAAA,UAAU,EAAEF,MAAO;AAAAY,QAAAA,QAAA,EAC5DZ,MAAAA;OACE,CAAC,GACJ,IAAI,CAAA;KACL,CAAA;AAAC,GACH,CAAC,CAAA;AAEV;;;;"}
+{"version":3,"file":"ErrorPage.cjs","sources":["../../../src/error-page/ErrorPage.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './ErrorPage.module.css'\n\nexport type ErrorPageCode = '404' | '500'\n\nexport type ErrorPageDataTestId = {\n  root?: string\n  code?: string\n  title?: string\n  description?: string\n  action?: string\n}\n\nexport type ErrorPageProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {\n  /** `'404'` / `'500'` fill default title and description. */\n  code?: ErrorPageCode | number | (string & {})\n  /** Overrides the preset title; `null` suppresses it. */\n  title?: ReactNode\n  /** Overrides the preset description; `null` suppresses it. */\n  description?: ReactNode\n  /** Slot below the text: one or more `Button`s, which wrap on narrow screens. */\n  action?: ReactNode\n  dataTestId?: ErrorPageDataTestId\n}\n\nconst presets: Record<ErrorPageCode, { title: string; description: string }> = {\n  '404': {\n    title: 'Page not found',\n    description:\n      'The page you’re looking for doesn’t exist or has been moved. Check the URL or return to your dashboard.',\n  },\n  '500': {\n    title: 'Something went wrong',\n    description:\n      'We’re having trouble loading this page. Please try again in a moment.',\n  },\n}\n\nconst isPresetCode = (code?: string): code is ErrorPageCode =>\n  code === '404' || code === '500'\n\nconst isEmpty = (node: ReactNode) =>\n  node == null || node === '' || typeof node === 'boolean'\n\n/** Centered 404 / 500 block with its own page gutters; render it directly in the page, not inside a container that already adds them. */\nexport const ErrorPage = forwardRef<HTMLDivElement, ErrorPageProps>(\n  (\n    { code, title, description, action, className, dataTestId, ...rest },\n    ref,\n  ) => {\n    const codeStr = code == null ? undefined : String(code)\n    const preset = isPresetCode(codeStr) ? presets[codeStr] : undefined\n    const resolvedTitle = title !== undefined ? title : preset?.title\n    const resolvedDescription =\n      description !== undefined ? description : preset?.description\n\n    return (\n      <div\n        ref={ref}\n        className={cn(styles.root, className)}\n        data-testid={dataTestId?.root}\n        {...rest}\n      >\n        <div className={styles.inner}>\n          {codeStr != null ? (\n            <div className={styles.code} data-testid={dataTestId?.code}>\n              {codeStr}\n            </div>\n          ) : null}\n          <div className={styles.text}>\n            {!isEmpty(resolvedTitle) ? (\n              <h1 className={styles.title} data-testid={dataTestId?.title}>\n                {resolvedTitle}\n              </h1>\n            ) : null}\n            {!isEmpty(resolvedDescription) ? (\n              <p\n                className={styles.description}\n                data-testid={dataTestId?.description}\n              >\n                {resolvedDescription}\n              </p>\n            ) : null}\n          </div>\n          {action != null ? (\n            <div className={styles.action} data-testid={dataTestId?.action}>\n              {action}\n            </div>\n          ) : null}\n        </div>\n      </div>\n    )\n  },\n)\n\nErrorPage.displayName = 'ErrorPage'\n"],"names":["presets","title","description","isPresetCode","code","isEmpty","node","ErrorPage","forwardRef","_ref","ref","action","className","dataTestId","rest","codeStr","undefined","String","preset","resolvedTitle","resolvedDescription","_jsx","cn","styles","root","children","_jsxs","inner","text","displayName"],"mappings":"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"}

package/dist/cjs/footer/Footer.cjs

@@ -2,29 +2,37 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
+const react = require('react');
 const cn = require('classnames');
 const Footer_module = require('./Footer.module.css.cjs');
 const jsxRuntime = require('react/jsx-runtime');
 
-const Footer = _ref => {
+/** App footer shell with page background, top border and page gutters. */
+const Footer = /*#__PURE__*/react.forwardRef((_ref, ref) => {
   let {
     children,
     aside,
     className,
+    dataTestId,
     ...rest
   } = _ref;
   return /*#__PURE__*/jsxRuntime.jsxs("footer", {
+    ref: ref,
     className: cn(Footer_module.footer, className),
+    "data-testid": dataTestId?.root,
     ...rest,
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
       className: Footer_module.content,
+      "data-testid": dataTestId?.content,
       children: children
     }), aside != null ? /*#__PURE__*/jsxRuntime.jsx("div", {
       className: Footer_module.aside,
+      "data-testid": dataTestId?.aside,
       children: aside
     }) : null]
   });
-};
+});
+Footer.displayName = 'Footer';
 
 exports.Footer = Footer;
 //# sourceMappingURL=Footer.cjs.map

package/dist/cjs/footer/Footer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Footer.cjs","sources":["../../../src/footer/Footer.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './Footer.module.css'\n\nexport type FooterProps = ComponentPropsWithoutRef<'footer'> & {\n  /** Right slot, e.g. version tag. */\n  aside?: ReactNode\n}\n\nexport const Footer = ({\n  children,\n  aside,\n  className,\n  ...rest\n}: FooterProps) => (\n  <footer className={cn(styles.footer, className)} {...rest}>\n    <div className={styles.content}>{children}</div>\n    {aside != null ? <div className={styles.aside}>{aside}</div> : null}\n  </footer>\n)\n"],"names":["Footer","_ref","children","aside","className","rest","_jsxs","cn","styles","footer","_jsx","content"],"mappings":";;;;;;;;AAWO,MAAMA,MAAM,GAAGC,IAAA,IAAA;EAAA,IAAC;IACrBC,QAAQ;IACRC,KAAK;IACLC,SAAS;IACT,GAAGC,IAAAA;AACQ,GAAC,GAAAJ,IAAA,CAAA;AAAA,EAAA,oBACZK,eAAA,CAAA,QAAA,EAAA;IAAQF,SAAS,EAAEG,EAAE,CAACC,aAAM,CAACC,MAAM,EAAEL,SAAS,CAAE;AAAA,IAAA,GAAKC,IAAI;AAAAH,IAAAA,QAAA,gBACvDQ,cAAA,CAAA,KAAA,EAAA;MAAKN,SAAS,EAAEI,aAAM,CAACG,OAAQ;AAAAT,MAAAA,QAAA,EAAEA,QAAAA;AAAQ,KAAM,CAAC,EAC/CC,KAAK,IAAI,IAAI,gBAAGO,cAAA,CAAA,KAAA,EAAA;MAAKN,SAAS,EAAEI,aAAM,CAACL,KAAM;AAAAD,MAAAA,QAAA,EAAEC,KAAAA;KAAW,CAAC,GAAG,IAAI,CAAA;AAAA,GAC7D,CAAC,CAAA;AAAA;;;;"}
+{"version":3,"file":"Footer.cjs","sources":["../../../src/footer/Footer.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n} from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './Footer.module.css'\n\nexport type FooterDataTestId = {\n  root?: string\n  content?: string\n  aside?: string\n}\n\nexport type FooterProps = ComponentPropsWithoutRef<'footer'> & {\n  /** Left row of links or text; wraps. */\n  children?: ReactNode\n  /** Right slot, e.g. version tag. */\n  aside?: ReactNode\n  dataTestId?: FooterDataTestId\n}\n\n/** App footer shell with page background, top border and page gutters. */\nexport const Footer = forwardRef<HTMLElement, FooterProps>(\n  ({ children, aside, className, dataTestId, ...rest }, ref) => (\n    <footer\n      ref={ref}\n      className={cn(styles.footer, className)}\n      data-testid={dataTestId?.root}\n      {...rest}\n    >\n      <div className={styles.content} data-testid={dataTestId?.content}>\n        {children}\n      </div>\n      {aside != null ? (\n        <div className={styles.aside} data-testid={dataTestId?.aside}>\n          {aside}\n        </div>\n      ) : null}\n    </footer>\n  ),\n)\n\nFooter.displayName = 'Footer'\n"],"names":["Footer","forwardRef","_ref","ref","children","aside","className","dataTestId","rest","_jsxs","cn","styles","footer","root","_jsx","content","displayName"],"mappings":";;;;;;;;;AAwBA;AACO,MAAMA,MAAM,gBAAGC,gBAAU,CAC9B,CAAAC,IAAA,EAAsDC,GAAG,KAAA;EAAA,IAAxD;IAAEC,QAAQ;IAAEC,KAAK;IAAEC,SAAS;IAAEC,UAAU;IAAE,GAAGC,IAAAA;AAAK,GAAC,GAAAN,IAAA,CAAA;AAAA,EAAA,oBAClDO,eAAA,CAAA,QAAA,EAAA;AACEN,IAAAA,GAAG,EAAEA,GAAI;IACTG,SAAS,EAAEI,EAAE,CAACC,aAAM,CAACC,MAAM,EAAEN,SAAS,CAAE;IACxC,aAAaC,EAAAA,UAAU,EAAEM,IAAK;AAAA,IAAA,GAC1BL,IAAI;AAAAJ,IAAAA,QAAA,gBAERU,cAAA,CAAA,KAAA,EAAA;MAAKR,SAAS,EAAEK,aAAM,CAACI,OAAQ;MAAC,aAAaR,EAAAA,UAAU,EAAEQ,OAAQ;AAAAX,MAAAA,QAAA,EAC9DA,QAAAA;AAAQ,KACN,CAAC,EACLC,KAAK,IAAI,IAAI,gBACZS,cAAA,CAAA,KAAA,EAAA;MAAKR,SAAS,EAAEK,aAAM,CAACN,KAAM;MAAC,aAAaE,EAAAA,UAAU,EAAEF,KAAM;AAAAD,MAAAA,QAAA,EAC1DC,KAAAA;KACE,CAAC,GACJ,IAAI,CAAA;AAAA,GACF,CAAC,CAAA;AAAA,CAEb,EAAC;AAEDL,MAAM,CAACgB,WAAW,GAAG,QAAQ;;;;"}

package/dist/cjs/grid/Grid.cjs

@@ -4,13 +4,14 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const react = require('react');
 const cn = require('classnames');
+const Stack = require('../stack/Stack.cjs');
 const Grid_module = require('./Grid.module.css.cjs');
 const jsxRuntime = require('react/jsx-runtime');
 const responsive = require('../utils/responsive.cjs');
 
 const columnsToCss = columns => typeof columns === 'number' ? `repeat(${columns}, minmax(0, 1fr))` : columns;
 
-/** CSS grid container with equal, templated or auto-fit columns and a spacing scale. */
+/** CSS grid container; `columns`, `gap` and `align` take a value or a desktop-first per-breakpoint object like `{ base: 4, mdDown: 2 }`. Use `minItemWidth` to adapt to the container width instead of the viewport. */
 const Grid = /*#__PURE__*/react.forwardRef((_ref, ref) => {
   let {
     as: Component = 'div',
@@ -22,6 +23,7 @@ const Grid = /*#__PURE__*/react.forwardRef((_ref, ref) => {
     align,
     className,
     style,
+    dataTestId,
     ...rest
   } = _ref;
   const minWidth = typeof minItemWidth === 'number' ? `${minItemWidth}px` : minItemWidth;
@@ -29,15 +31,17 @@ const Grid = /*#__PURE__*/react.forwardRef((_ref, ref) => {
   const vars = {
     ...responsive.responsiveVars('columns', template, columnsToCss),
     ...responsive.responsiveVars('rowGap', responsive.mergeResponsive(gap, rowGap), responsive.spaceToCss),
-    ...responsive.responsiveVars('columnGap', responsive.mergeResponsive(gap, columnGap), responsive.spaceToCss)
+    ...responsive.responsiveVars('columnGap', responsive.mergeResponsive(gap, columnGap), responsive.spaceToCss),
+    ...responsive.responsiveVars('align', align, Stack.alignToCss)
   };
   return /*#__PURE__*/jsxRuntime.jsx(Component, {
     ref: ref,
-    className: cn(Grid_module.root, align && Grid_module[`align${responsive.capitalize(align)}`], className),
+    className: cn(Grid_module.root, className),
     style: {
       ...vars,
       ...style
     },
+    "data-testid": dataTestId?.root,
     ...rest
   });
 });

package/dist/cjs/grid/Grid.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.cjs","sources":["../../../src/grid/Grid.tsx"],"sourcesContent":["import { forwardRef, type ElementType, type HTMLAttributes } from 'react'\n\nimport cn from 'classnames'\n\nimport {\n  capitalize,\n  mergeResponsive,\n  responsiveVars,\n  spaceToCss,\n  type Responsive,\n  type Space,\n} from '../utils'\nimport styles from './Grid.module.css'\n\nexport type GridAlign = 'start' | 'center' | 'end' | 'stretch'\n\nexport type GridProps = HTMLAttributes<HTMLElement> & {\n  as?: ElementType\n  /** A number makes equal columns; a string is used as raw `grid-template-columns`. */\n  columns?: Responsive<number | string>\n  /** Auto-fit columns of at least this width (number = px). Takes precedence over `columns`. */\n  minItemWidth?: number | string\n  gap?: Responsive<Space>\n  /** Overrides `gap` for rows, per breakpoint. */\n  rowGap?: Responsive<Space>\n  /** Overrides `gap` for columns, per breakpoint. */\n  columnGap?: Responsive<Space>\n  align?: GridAlign\n}\n\nconst columnsToCss = (columns: number | string) =>\n  typeof columns === 'number' ? `repeat(${columns}, minmax(0, 1fr))` : columns\n\n/** CSS grid container with equal, templated or auto-fit columns and a spacing scale. */\nexport const Grid = forwardRef<HTMLElement, GridProps>(\n  (\n    {\n      as: Component = 'div',\n      columns,\n      minItemWidth,\n      gap,\n      rowGap,\n      columnGap,\n      align,\n      className,\n      style,\n      ...rest\n    },\n    ref,\n  ) => {\n    const minWidth =\n      typeof minItemWidth === 'number' ? `${minItemWidth}px` : minItemWidth\n    const template =\n      minItemWidth !== undefined\n        ? `repeat(auto-fit, minmax(min(${minWidth}, 100%), 1fr))`\n        : columns\n\n    const vars = {\n      ...responsiveVars('columns', template, columnsToCss),\n      ...responsiveVars('rowGap', mergeResponsive(gap, rowGap), spaceToCss),\n      ...responsiveVars(\n        'columnGap',\n        mergeResponsive(gap, columnGap),\n        spaceToCss,\n      ),\n    }\n\n    return (\n      <Component\n        ref={ref}\n        className={cn(\n          styles.root,\n          align && styles[`align${capitalize(align)}`],\n          className,\n        )}\n        style={{ ...vars, ...style }}\n        {...rest}\n      />\n    )\n  },\n)\n\nGrid.displayName = 'Grid'\n"],"names":["columnsToCss","columns","Grid","forwardRef","_ref","ref","as","Component","minItemWidth","gap","rowGap","columnGap","align","className","style","rest","minWidth","template","undefined","vars","responsiveVars","mergeResponsive","spaceToCss","_jsx","cn","styles","root","capitalize","displayName"],"mappings":";;;;;;;;;;AA8BA,MAAMA,YAAY,GAAIC,OAAwB,IAC5C,OAAOA,OAAO,KAAK,QAAQ,GAAG,CAAA,OAAA,EAAUA,OAAO,CAAA,iBAAA,CAAmB,GAAGA,OAAO,CAAA;;AAE9E;AACO,MAAMC,IAAI,gBAAGC,gBAAU,CAC5B,CAAAC,IAAA,EAaEC,GAAG,KACA;EAAA,IAbH;IACEC,EAAE,EAAEC,SAAS,GAAG,KAAK;IACrBN,OAAO;IACPO,YAAY;IACZC,GAAG;IACHC,MAAM;IACNC,SAAS;IACTC,KAAK;IACLC,SAAS;IACTC,KAAK;IACL,GAAGC,IAAAA;AACL,GAAC,GAAAX,IAAA,CAAA;EAGD,MAAMY,QAAQ,GACZ,OAAOR,YAAY,KAAK,QAAQ,GAAG,CAAGA,EAAAA,YAAY,CAAI,EAAA,CAAA,GAAGA,YAAY,CAAA;EACvE,MAAMS,QAAQ,GACZT,YAAY,KAAKU,SAAS,GACtB,CAA+BF,4BAAAA,EAAAA,QAAQ,CAAgB,cAAA,CAAA,GACvDf,OAAO,CAAA;AAEb,EAAA,MAAMkB,IAAI,GAAG;AACX,IAAA,GAAGC,yBAAc,CAAC,SAAS,EAAEH,QAAQ,EAAEjB,YAAY,CAAC;AACpD,IAAA,GAAGoB,yBAAc,CAAC,QAAQ,EAAEC,0BAAe,CAACZ,GAAG,EAAEC,MAAM,CAAC,EAAEY,qBAAU,CAAC;IACrE,GAAGF,yBAAc,CACf,WAAW,EACXC,0BAAe,CAACZ,GAAG,EAAEE,SAAS,CAAC,EAC/BW,qBACF,CAAA;GACD,CAAA;EAED,oBACEC,cAAA,CAAChB,SAAS,EAAA;AACRF,IAAAA,GAAG,EAAEA,GAAI;IACTQ,SAAS,EAAEW,EAAE,CACXC,WAAM,CAACC,IAAI,EACXd,KAAK,IAAIa,WAAM,CAAC,CAAQE,KAAAA,EAAAA,qBAAU,CAACf,KAAK,CAAC,EAAE,CAAC,EAC5CC,SACF,CAAE;AACFC,IAAAA,KAAK,EAAE;AAAE,MAAA,GAAGK,IAAI;MAAE,GAAGL,KAAAA;KAAQ;IAAA,GACzBC,IAAAA;AAAI,GACT,CAAC,CAAA;AAEN,CACF,EAAC;AAEDb,IAAI,CAAC0B,WAAW,GAAG,MAAM;;;;"}
+{"version":3,"file":"Grid.cjs","sources":["../../../src/grid/Grid.tsx"],"sourcesContent":["import { forwardRef, type ElementType, type HTMLAttributes } from 'react'\n\nimport cn from 'classnames'\n\nimport {\n  mergeResponsive,\n  responsiveVars,\n  spaceToCss,\n  type PolymorphicComponent,\n  type PolymorphicProps,\n  type Responsive,\n  type Space,\n} from '../utils'\nimport { alignToCss, type StackAlign } from '../stack/Stack'\nimport styles from './Grid.module.css'\n\nexport type GridAlign = Exclude<StackAlign, 'baseline'>\n\nexport type GridDataTestId = { root?: string }\n\ntype GridOwnProps = {\n  /** Per-breakpoint, desktop-first (see breakpointWidths); breakpoint keys follow the viewport width. A number makes equal columns; a string is used as raw `grid-template-columns`. */\n  columns?: Responsive<number | string>\n  /** Auto-fit columns of at least this width (number = px). Responds to the Grid's own width, not the viewport; prefer it inside cards, panels and modals. Takes precedence over `columns`. */\n  minItemWidth?: number | string\n  /** Gap from the spacing scale in px. Per-breakpoint, desktop-first (see breakpointWidths). */\n  gap?: Responsive<Space>\n  /** Overrides `gap` for rows, merged per breakpoint key: keys you omit keep `gap`'s value. `16` and `{ base: 16 }` are the same. */\n  rowGap?: Responsive<Space>\n  /** Overrides `gap` for columns, merged per breakpoint key: keys you omit keep `gap`'s value. `16` and `{ base: 16 }` are the same. */\n  columnGap?: Responsive<Space>\n  /** Cross-axis alignment of items. Per-breakpoint, desktop-first (see breakpointWidths). */\n  align?: Responsive<GridAlign | 'baseline'>\n  dataTestId?: GridDataTestId\n}\n\ntype GridImplProps = HTMLAttributes<HTMLElement> &\n  GridOwnProps & { as?: ElementType }\n\nexport type GridProps<E extends ElementType = never> = [E] extends [never]\n  ? GridImplProps\n  : PolymorphicProps<E, GridOwnProps>\n\nconst columnsToCss = (columns: number | string) =>\n  typeof columns === 'number' ? `repeat(${columns}, minmax(0, 1fr))` : columns\n\n/** CSS grid container; `columns`, `gap` and `align` take a value or a desktop-first per-breakpoint object like `{ base: 4, mdDown: 2 }`. Use `minItemWidth` to adapt to the container width instead of the viewport. */\nexport const Grid = forwardRef<HTMLElement, GridImplProps>(\n  (\n    {\n      as: Component = 'div',\n      columns,\n      minItemWidth,\n      gap,\n      rowGap,\n      columnGap,\n      align,\n      className,\n      style,\n      dataTestId,\n      ...rest\n    },\n    ref,\n  ) => {\n    const minWidth =\n      typeof minItemWidth === 'number' ? `${minItemWidth}px` : minItemWidth\n    const template =\n      minItemWidth !== undefined\n        ? `repeat(auto-fit, minmax(min(${minWidth}, 100%), 1fr))`\n        : columns\n\n    const vars = {\n      ...responsiveVars('columns', template, columnsToCss),\n      ...responsiveVars('rowGap', mergeResponsive(gap, rowGap), spaceToCss),\n      ...responsiveVars(\n        'columnGap',\n        mergeResponsive(gap, columnGap),\n        spaceToCss,\n      ),\n      ...responsiveVars('align', align, alignToCss),\n    }\n\n    return (\n      <Component\n        ref={ref}\n        className={cn(styles.root, className)}\n        style={{ ...vars, ...style }}\n        data-testid={dataTestId?.root}\n        {...rest}\n      />\n    )\n  },\n) as PolymorphicComponent<'div', GridOwnProps>\n\nGrid.displayName = 'Grid'\n"],"names":["columnsToCss","columns","Grid","forwardRef","_ref","ref","as","Component","minItemWidth","gap","rowGap","columnGap","align","className","style","dataTestId","rest","minWidth","template","undefined","vars","responsiveVars","mergeResponsive","spaceToCss","alignToCss","_jsx","cn","styles","root","displayName"],"mappings":";;;;;;;;;;;AA2CA,MAAMA,YAAY,GAAIC,OAAwB,IAC5C,OAAOA,OAAO,KAAK,QAAQ,GAAG,CAAA,OAAA,EAAUA,OAAO,CAAA,iBAAA,CAAmB,GAAGA,OAAO,CAAA;;AAE9E;AACO,MAAMC,IAAI,gBAAGC,gBAAU,CAC5B,CAAAC,IAAA,EAcEC,GAAG,KACA;EAAA,IAdH;IACEC,EAAE,EAAEC,SAAS,GAAG,KAAK;IACrBN,OAAO;IACPO,YAAY;IACZC,GAAG;IACHC,MAAM;IACNC,SAAS;IACTC,KAAK;IACLC,SAAS;IACTC,KAAK;IACLC,UAAU;IACV,GAAGC,IAAAA;AACL,GAAC,GAAAZ,IAAA,CAAA;EAGD,MAAMa,QAAQ,GACZ,OAAOT,YAAY,KAAK,QAAQ,GAAG,CAAGA,EAAAA,YAAY,CAAI,EAAA,CAAA,GAAGA,YAAY,CAAA;EACvE,MAAMU,QAAQ,GACZV,YAAY,KAAKW,SAAS,GACtB,CAA+BF,4BAAAA,EAAAA,QAAQ,CAAgB,cAAA,CAAA,GACvDhB,OAAO,CAAA;AAEb,EAAA,MAAMmB,IAAI,GAAG;AACX,IAAA,GAAGC,yBAAc,CAAC,SAAS,EAAEH,QAAQ,EAAElB,YAAY,CAAC;AACpD,IAAA,GAAGqB,yBAAc,CAAC,QAAQ,EAAEC,0BAAe,CAACb,GAAG,EAAEC,MAAM,CAAC,EAAEa,qBAAU,CAAC;AACrE,IAAA,GAAGF,yBAAc,CACf,WAAW,EACXC,0BAAe,CAACb,GAAG,EAAEE,SAAS,CAAC,EAC/BY,qBACF,CAAC;AACD,IAAA,GAAGF,yBAAc,CAAC,OAAO,EAAET,KAAK,EAAEY,gBAAU,CAAA;GAC7C,CAAA;EAED,oBACEC,cAAA,CAAClB,SAAS,EAAA;AACRF,IAAAA,GAAG,EAAEA,GAAI;IACTQ,SAAS,EAAEa,EAAE,CAACC,WAAM,CAACC,IAAI,EAAEf,SAAS,CAAE;AACtCC,IAAAA,KAAK,EAAE;AAAE,MAAA,GAAGM,IAAI;MAAE,GAAGN,KAAAA;KAAQ;IAC7B,aAAaC,EAAAA,UAAU,EAAEa,IAAK;IAAA,GAC1BZ,IAAAA;AAAI,GACT,CAAC,CAAA;AAEN,CACF,EAA8C;AAE9Cd,IAAI,CAAC2B,WAAW,GAAG,MAAM;;;;"}

package/dist/cjs/grid/Grid.module.css.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const styles = {"root":"Grid-module_root__WQ5eA","alignStart":"Grid-module_alignStart__tJzED","alignCenter":"Grid-module_alignCenter__Br-nr","alignEnd":"Grid-module_alignEnd__oWTV-","alignStretch":"Grid-module_alignStretch__v1rgi"};
+const styles = {"root":"Grid-module_root__WQ5eA"};
 
 module.exports = styles;
 //# sourceMappingURL=Grid.module.css.cjs.map

package/dist/cjs/grid/GridItem.cjs

@@ -18,6 +18,7 @@ const GridItem = /*#__PURE__*/react.forwardRef((_ref, ref) => {
     area,
     className,
     style,
+    dataTestId,
     ...rest
   } = _ref;
   return /*#__PURE__*/jsxRuntime.jsx(Component, {
@@ -30,6 +31,7 @@ const GridItem = /*#__PURE__*/react.forwardRef((_ref, ref) => {
       }),
       ...style
     },
+    "data-testid": dataTestId?.root,
     ...rest
   });
 });

package/dist/cjs/grid/GridItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"GridItem.cjs","sources":["../../../src/grid/GridItem.tsx"],"sourcesContent":["import { forwardRef, type ElementType, type HTMLAttributes } from 'react'\n\nimport cn from 'classnames'\n\nimport { responsiveVars, type Responsive } from '../utils'\nimport styles from './GridItem.module.css'\n\nexport type GridItemProps = HTMLAttributes<HTMLElement> & {\n  as?: ElementType\n  /** Number of columns to span; `'full'` spans every column. */\n  span?: Responsive<number | 'full'>\n  area?: string\n}\n\nconst spanToCss = (span: number | 'full') =>\n  span === 'full' ? '1 / -1' : `span ${span} / span ${span}`\n\n/** Grid child that can span columns or sit in a named area. */\nexport const GridItem = forwardRef<HTMLElement, GridItemProps>(\n  ({ as: Component = 'div', span, area, className, style, ...rest }, ref) => {\n    return (\n      <Component\n        ref={ref}\n        className={cn(styles.root, className)}\n        style={{\n          ...responsiveVars('span', span, spanToCss),\n          ...(area !== undefined && { gridArea: area }),\n          ...style,\n        }}\n        {...rest}\n      />\n    )\n  },\n)\n\nGridItem.displayName = 'GridItem'\n"],"names":["spanToCss","span","GridItem","forwardRef","_ref","ref","as","Component","area","className","style","rest","_jsx","cn","styles","root","responsiveVars","undefined","gridArea","displayName"],"mappings":";;;;;;;;;;AAcA,MAAMA,SAAS,GAAIC,IAAqB,IACtCA,IAAI,KAAK,MAAM,GAAG,QAAQ,GAAG,CAAA,KAAA,EAAQA,IAAI,CAAA,QAAA,EAAWA,IAAI,CAAE,CAAA,CAAA;;AAE5D;AACO,MAAMC,QAAQ,gBAAGC,gBAAU,CAChC,CAAAC,IAAA,EAAmEC,GAAG,KAAK;EAAA,IAA1E;IAAEC,EAAE,EAAEC,SAAS,GAAG,KAAK;IAAEN,IAAI;IAAEO,IAAI;IAAEC,SAAS;IAAEC,KAAK;IAAE,GAAGC,IAAAA;AAAK,GAAC,GAAAP,IAAA,CAAA;EAC/D,oBACEQ,cAAA,CAACL,SAAS,EAAA;AACRF,IAAAA,GAAG,EAAEA,GAAI;IACTI,SAAS,EAAEI,EAAE,CAACC,eAAM,CAACC,IAAI,EAAEN,SAAS,CAAE;AACtCC,IAAAA,KAAK,EAAE;AACL,MAAA,GAAGM,yBAAc,CAAC,MAAM,EAAEf,IAAI,EAAED,SAAS,CAAC;MAC1C,IAAIQ,IAAI,KAAKS,SAAS,IAAI;AAAEC,QAAAA,QAAQ,EAAEV,IAAAA;AAAK,OAAC,CAAC;MAC7C,GAAGE,KAAAA;KACH;IAAA,GACEC,IAAAA;AAAI,GACT,CAAC,CAAA;AAEN,CACF,EAAC;AAEDT,QAAQ,CAACiB,WAAW,GAAG,UAAU;;;;"}
+{"version":3,"file":"GridItem.cjs","sources":["../../../src/grid/GridItem.tsx"],"sourcesContent":["import { forwardRef, type ElementType, type HTMLAttributes } from 'react'\n\nimport cn from 'classnames'\n\nimport {\n  responsiveVars,\n  type PolymorphicComponent,\n  type PolymorphicProps,\n  type Responsive,\n} from '../utils'\nimport styles from './GridItem.module.css'\n\nexport type GridItemDataTestId = { root?: string }\n\ntype GridItemOwnProps = {\n  /** Per-breakpoint, desktop-first (see breakpointWidths). Number of columns to span; `'full'` spans every column. When Grid `columns` shrinks, make `span` responsive too: a span wider than the current column count adds an empty implicit track, and its gap shortens every other cell. */\n  span?: Responsive<number | 'full'>\n  /** Places the item in a named `grid-template-areas` area. */\n  area?: string\n  dataTestId?: GridItemDataTestId\n}\n\ntype GridItemImplProps = HTMLAttributes<HTMLElement> &\n  GridItemOwnProps & { as?: ElementType }\n\nexport type GridItemProps<E extends ElementType = never> = [E] extends [never]\n  ? GridItemImplProps\n  : PolymorphicProps<E, GridItemOwnProps>\n\nconst spanToCss = (span: number | 'full') =>\n  span === 'full' ? '1 / -1' : `span ${span} / span ${span}`\n\n/** Grid child that can span columns or sit in a named area. */\nexport const GridItem = forwardRef<HTMLElement, GridItemImplProps>(\n  (\n    {\n      as: Component = 'div',\n      span,\n      area,\n      className,\n      style,\n      dataTestId,\n      ...rest\n    },\n    ref,\n  ) => {\n    return (\n      <Component\n        ref={ref}\n        className={cn(styles.root, className)}\n        style={{\n          ...responsiveVars('span', span, spanToCss),\n          ...(area !== undefined && { gridArea: area }),\n          ...style,\n        }}\n        data-testid={dataTestId?.root}\n        {...rest}\n      />\n    )\n  },\n) as PolymorphicComponent<'div', GridItemOwnProps>\n\nGridItem.displayName = 'GridItem'\n"],"names":["spanToCss","span","GridItem","forwardRef","_ref","ref","as","Component","area","className","style","dataTestId","rest","_jsx","cn","styles","root","responsiveVars","undefined","gridArea","displayName"],"mappings":";;;;;;;;;;AA6BA,MAAMA,SAAS,GAAIC,IAAqB,IACtCA,IAAI,KAAK,MAAM,GAAG,QAAQ,GAAG,CAAA,KAAA,EAAQA,IAAI,CAAA,QAAA,EAAWA,IAAI,CAAE,CAAA,CAAA;;AAE5D;AACO,MAAMC,QAAQ,gBAAGC,gBAAU,CAChC,CAAAC,IAAA,EAUEC,GAAG,KACA;EAAA,IAVH;IACEC,EAAE,EAAEC,SAAS,GAAG,KAAK;IACrBN,IAAI;IACJO,IAAI;IACJC,SAAS;IACTC,KAAK;IACLC,UAAU;IACV,GAAGC,IAAAA;AACL,GAAC,GAAAR,IAAA,CAAA;EAGD,oBACES,cAAA,CAACN,SAAS,EAAA;AACRF,IAAAA,GAAG,EAAEA,GAAI;IACTI,SAAS,EAAEK,EAAE,CAACC,eAAM,CAACC,IAAI,EAAEP,SAAS,CAAE;AACtCC,IAAAA,KAAK,EAAE;AACL,MAAA,GAAGO,yBAAc,CAAC,MAAM,EAAEhB,IAAI,EAAED,SAAS,CAAC;MAC1C,IAAIQ,IAAI,KAAKU,SAAS,IAAI;AAAEC,QAAAA,QAAQ,EAAEX,IAAAA;AAAK,OAAC,CAAC;MAC7C,GAAGE,KAAAA;KACH;IACF,aAAaC,EAAAA,UAAU,EAAEK,IAAK;IAAA,GAC1BJ,IAAAA;AAAI,GACT,CAAC,CAAA;AAEN,CACF,EAAkD;AAElDV,QAAQ,CAACkB,WAAW,GAAG,UAAU;;;;"}

package/dist/cjs/header/Header.cjs

@@ -2,30 +2,38 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
+const react = require('react');
 const cn = require('classnames');
 const Header_module = require('./Header.module.css.cjs');
 const jsxRuntime = require('react/jsx-runtime');
 
-const Header = _ref => {
+/** App top bar shell (64px, bottom border, page-gutter padding): `children` fill the left, `actions` sit right. Only the last child shrinks, so put Breadcrumbs or HeaderNav last. `sticky` needs no `overflow: hidden/auto` ancestor and sets `scroll-padding-top` on `html` to `--lido-app-ui-header-height`; your own `html` rule wins. */
+const Header = /*#__PURE__*/react.forwardRef((_ref, ref) => {
   let {
     children,
     actions,
     sticky,
     className,
+    dataTestId,
     ...rest
   } = _ref;
   return /*#__PURE__*/jsxRuntime.jsxs("header", {
+    ref: ref,
     className: cn(Header_module.header, sticky && Header_module.sticky, className),
+    "data-testid": dataTestId?.root,
     ...rest,
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
       className: Header_module.content,
+      "data-testid": dataTestId?.content,
       children: children
     }), actions != null ? /*#__PURE__*/jsxRuntime.jsx("div", {
       className: Header_module.actions,
+      "data-testid": dataTestId?.actions,
       children: actions
     }) : null]
   });
-};
+});
+Header.displayName = 'Header';
 
 exports.Header = Header;
 //# sourceMappingURL=Header.cjs.map

package/dist/cjs/header/Header.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Header.cjs","sources":["../../../src/header/Header.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './Header.module.css'\n\nexport type HeaderProps = ComponentPropsWithoutRef<'header'> & {\n  /** Right control group. */\n  actions?: ReactNode\n  /** Sticks to the top of the viewport while scrolling. */\n  sticky?: boolean\n}\n\nexport const Header = ({\n  children,\n  actions,\n  sticky,\n  className,\n  ...rest\n}: HeaderProps) => (\n  <header\n    className={cn(styles.header, sticky && styles.sticky, className)}\n    {...rest}\n  >\n    <div className={styles.content}>{children}</div>\n    {actions != null ? <div className={styles.actions}>{actions}</div> : null}\n  </header>\n)\n"],"names":["Header","_ref","children","actions","sticky","className","rest","_jsxs","cn","styles","header","_jsx","content"],"mappings":";;;;;;;;AAaO,MAAMA,MAAM,GAAGC,IAAA,IAAA;EAAA,IAAC;IACrBC,QAAQ;IACRC,OAAO;IACPC,MAAM;IACNC,SAAS;IACT,GAAGC,IAAAA;AACQ,GAAC,GAAAL,IAAA,CAAA;AAAA,EAAA,oBACZM,eAAA,CAAA,QAAA,EAAA;AACEF,IAAAA,SAAS,EAAEG,EAAE,CAACC,aAAM,CAACC,MAAM,EAAEN,MAAM,IAAIK,aAAM,CAACL,MAAM,EAAEC,SAAS,CAAE;AAAA,IAAA,GAC7DC,IAAI;AAAAJ,IAAAA,QAAA,gBAERS,cAAA,CAAA,KAAA,EAAA;MAAKN,SAAS,EAAEI,aAAM,CAACG,OAAQ;AAAAV,MAAAA,QAAA,EAAEA,QAAAA;AAAQ,KAAM,CAAC,EAC/CC,OAAO,IAAI,IAAI,gBAAGQ,cAAA,CAAA,KAAA,EAAA;MAAKN,SAAS,EAAEI,aAAM,CAACN,OAAQ;AAAAD,MAAAA,QAAA,EAAEC,OAAAA;KAAa,CAAC,GAAG,IAAI,CAAA;AAAA,GACnE,CAAC,CAAA;AAAA;;;;"}
+{"version":3,"file":"Header.cjs","sources":["../../../src/header/Header.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n} from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './Header.module.css'\n\nexport type HeaderDataTestId = {\n  root?: string\n  content?: string\n  actions?: string\n}\n\nexport type HeaderProps = ComponentPropsWithoutRef<'header'> & {\n  /** Right control group. */\n  actions?: ReactNode\n  /** Sticks to the top of the viewport while scrolling. */\n  sticky?: boolean\n  dataTestId?: HeaderDataTestId\n}\n\n/** App top bar shell (64px, bottom border, page-gutter padding): `children` fill the left, `actions` sit right. Only the last child shrinks, so put Breadcrumbs or HeaderNav last. `sticky` needs no `overflow: hidden/auto` ancestor and sets `scroll-padding-top` on `html` to `--lido-app-ui-header-height`; your own `html` rule wins. */\nexport const Header = forwardRef<HTMLElement, HeaderProps>(\n  ({ children, actions, sticky, className, dataTestId, ...rest }, ref) => (\n    <header\n      ref={ref}\n      className={cn(styles.header, sticky && styles.sticky, className)}\n      data-testid={dataTestId?.root}\n      {...rest}\n    >\n      <div className={styles.content} data-testid={dataTestId?.content}>\n        {children}\n      </div>\n      {actions != null ? (\n        <div className={styles.actions} data-testid={dataTestId?.actions}>\n          {actions}\n        </div>\n      ) : null}\n    </header>\n  ),\n)\n\nHeader.displayName = 'Header'\n"],"names":["Header","forwardRef","_ref","ref","children","actions","sticky","className","dataTestId","rest","_jsxs","cn","styles","header","root","_jsx","content","displayName"],"mappings":";;;;;;;;;AAwBA;AACO,MAAMA,MAAM,gBAAGC,gBAAU,CAC9B,CAAAC,IAAA,EAAgEC,GAAG,KAAA;EAAA,IAAlE;IAAEC,QAAQ;IAAEC,OAAO;IAAEC,MAAM;IAAEC,SAAS;IAAEC,UAAU;IAAE,GAAGC,IAAAA;AAAK,GAAC,GAAAP,IAAA,CAAA;AAAA,EAAA,oBAC5DQ,eAAA,CAAA,QAAA,EAAA;AACEP,IAAAA,GAAG,EAAEA,GAAI;AACTI,IAAAA,SAAS,EAAEI,EAAE,CAACC,aAAM,CAACC,MAAM,EAAEP,MAAM,IAAIM,aAAM,CAACN,MAAM,EAAEC,SAAS,CAAE;IACjE,aAAaC,EAAAA,UAAU,EAAEM,IAAK;AAAA,IAAA,GAC1BL,IAAI;AAAAL,IAAAA,QAAA,gBAERW,cAAA,CAAA,KAAA,EAAA;MAAKR,SAAS,EAAEK,aAAM,CAACI,OAAQ;MAAC,aAAaR,EAAAA,UAAU,EAAEQ,OAAQ;AAAAZ,MAAAA,QAAA,EAC9DA,QAAAA;AAAQ,KACN,CAAC,EACLC,OAAO,IAAI,IAAI,gBACdU,cAAA,CAAA,KAAA,EAAA;MAAKR,SAAS,EAAEK,aAAM,CAACP,OAAQ;MAAC,aAAaG,EAAAA,UAAU,EAAEH,OAAQ;AAAAD,MAAAA,QAAA,EAC9DC,OAAAA;KACE,CAAC,GACJ,IAAI,CAAA;AAAA,GACF,CAAC,CAAA;AAAA,CAEb,EAAC;AAEDL,MAAM,CAACiB,WAAW,GAAG,QAAQ;;;;"}