@lidofinance/lido-app-ui 1.13.0 → 1.14.0

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;;;;"}

package/dist/cjs/header/HeaderNav.cjs

@@ -6,23 +6,25 @@ const react = require('react');
 const cn = require('classnames');
 const HeaderNav_module = require('./HeaderNav.module.css.cjs');
 const jsxRuntime = require('react/jsx-runtime');
+const useEdgeFade = require('../hooks/useEdgeFade.cjs');
+const useIsomorphicLayoutEffect = require('../hooks/useIsomorphicLayoutEffect.cjs');
 
-const syncFade = nav => {
-  nav.toggleAttribute('data-fade-start', nav.scrollLeft > 0);
-  nav.toggleAttribute('data-fade-end', nav.scrollLeft < nav.scrollWidth - nav.clientWidth - 1);
-};
-const scrollActiveIntoView = nav => {
-  const active = nav.querySelector("[aria-current='page']");
+const ACTIVE = "[aria-current]:not([aria-current='false'], [aria-current=''])";
+const scrollIntoCenter = (nav, active) => {
   if (!active) return;
   const navRect = nav.getBoundingClientRect();
   const activeRect = active.getBoundingClientRect();
   nav.scrollLeft += activeRect.left - navRect.left - (nav.clientWidth - activeRect.width) / 2;
 };
+
+/** `<nav>` for header links (`aria-label` defaults to `Main`); scrolls with an edge fade when narrow and centers the link with a truthy `aria-current`. */
 const HeaderNav = /*#__PURE__*/react.forwardRef((_ref, ref) => {
   let {
     'aria-label': ariaLabel = 'Main',
     className,
     onScroll,
+    onFocus,
+    dataTestId,
     ...rest
   } = _ref;
   const navRef = react.useRef(null);
@@ -30,36 +32,46 @@ const HeaderNav = /*#__PURE__*/react.forwardRef((_ref, ref) => {
     navRef.current = node;
     if (typeof ref === 'function') ref(node);else if (ref) ref.current = node;
   }, [ref]);
-  react.useEffect(() => {
+  const {
+    sync,
+    onFocus: revealFocused
+  } = useEdgeFade.useEdgeFade(navRef);
+  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
     const nav = navRef.current;
     if (!nav) return;
-    const sync = () => {
-      scrollActiveIntoView(nav);
-      syncFade(nav);
-    };
+    let active = nav.querySelector(ACTIVE);
+    scrollIntoCenter(nav, active);
     sync();
-    const mutations = typeof MutationObserver === 'undefined' ? null : new MutationObserver(sync);
-    mutations?.observe(nav, {
+    if (typeof MutationObserver === 'undefined') return;
+    const mutations = new MutationObserver(() => {
+      const next = nav.querySelector(ACTIVE);
+      if (next !== active) {
+        active = next;
+        scrollIntoCenter(nav, next);
+      }
+      sync();
+    });
+    mutations.observe(nav, {
       childList: true,
       subtree: true,
       attributes: true,
       attributeFilter: ['aria-current']
     });
-    const resizes = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(() => syncFade(nav));
-    resizes?.observe(nav);
-    return () => {
-      mutations?.disconnect();
-      resizes?.disconnect();
-    };
-  }, []);
+    return () => mutations.disconnect();
+  }, [sync]);
   return /*#__PURE__*/jsxRuntime.jsx("nav", {
     ref: setRef,
     "aria-label": ariaLabel,
     className: cn(HeaderNav_module.nav, className),
     onScroll: e => {
-      syncFade(e.currentTarget);
+      sync();
       onScroll?.(e);
     },
+    onFocus: e => {
+      revealFocused(e);
+      onFocus?.(e);
+    },
+    "data-testid": dataTestId?.root,
     ...rest
   });
 });

package/dist/cjs/header/HeaderNav.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderNav.cjs","sources":["../../../src/header/HeaderNav.tsx"],"sourcesContent":["import { forwardRef, useCallback, useEffect, useRef } from 'react'\nimport type { ComponentPropsWithoutRef } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './HeaderNav.module.css'\n\nexport type HeaderNavProps = ComponentPropsWithoutRef<'nav'>\n\nconst syncFade = (nav: HTMLElement) => {\n  nav.toggleAttribute('data-fade-start', nav.scrollLeft > 0)\n  nav.toggleAttribute(\n    'data-fade-end',\n    nav.scrollLeft < nav.scrollWidth - nav.clientWidth - 1,\n  )\n}\n\nconst scrollActiveIntoView = (nav: HTMLElement) => {\n  const active = nav.querySelector<HTMLElement>(\"[aria-current='page']\")\n  if (!active) return\n  const navRect = nav.getBoundingClientRect()\n  const activeRect = active.getBoundingClientRect()\n  nav.scrollLeft +=\n    activeRect.left - navRect.left - (nav.clientWidth - activeRect.width) / 2\n}\n\nexport const HeaderNav = forwardRef<HTMLElement, HeaderNavProps>(\n  ({ 'aria-label': ariaLabel = 'Main', className, onScroll, ...rest }, ref) => {\n    const navRef = useRef<HTMLElement | null>(null)\n\n    const setRef = useCallback(\n      (node: HTMLElement | null) => {\n        navRef.current = node\n        if (typeof ref === 'function') ref(node)\n        else if (ref) ref.current = node\n      },\n      [ref],\n    )\n\n    useEffect(() => {\n      const nav = navRef.current\n      if (!nav) return\n      const sync = () => {\n        scrollActiveIntoView(nav)\n        syncFade(nav)\n      }\n      sync()\n      const mutations =\n        typeof MutationObserver === 'undefined'\n          ? null\n          : new MutationObserver(sync)\n      mutations?.observe(nav, {\n        childList: true,\n        subtree: true,\n        attributes: true,\n        attributeFilter: ['aria-current'],\n      })\n      const resizes =\n        typeof ResizeObserver === 'undefined'\n          ? null\n          : new ResizeObserver(() => syncFade(nav))\n      resizes?.observe(nav)\n      return () => {\n        mutations?.disconnect()\n        resizes?.disconnect()\n      }\n    }, [])\n\n    return (\n      <nav\n        ref={setRef}\n        aria-label={ariaLabel}\n        className={cn(styles.nav, className)}\n        onScroll={(e) => {\n          syncFade(e.currentTarget)\n          onScroll?.(e)\n        }}\n        {...rest}\n      />\n    )\n  },\n)\n\nHeaderNav.displayName = 'HeaderNav'\n"],"names":["syncFade","nav","toggleAttribute","scrollLeft","scrollWidth","clientWidth","scrollActiveIntoView","active","querySelector","navRect","getBoundingClientRect","activeRect","left","width","HeaderNav","forwardRef","_ref","ref","ariaLabel","className","onScroll","rest","navRef","useRef","setRef","useCallback","node","current","useEffect","sync","mutations","MutationObserver","observe","childList","subtree","attributes","attributeFilter","resizes","ResizeObserver","disconnect","_jsx","cn","styles","e","currentTarget","displayName"],"mappings":"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"}
+{"version":3,"file":"HeaderNav.cjs","sources":["../../../src/header/HeaderNav.tsx"],"sourcesContent":["import { forwardRef, useCallback, useRef } from 'react'\nimport type { ComponentPropsWithoutRef } from 'react'\n\nimport cn from 'classnames'\n\nimport { useEdgeFade, useIsomorphicLayoutEffect } from '../hooks'\nimport styles from './HeaderNav.module.css'\n\nexport type HeaderNavDataTestId = { root?: string }\n\nexport type HeaderNavProps = ComponentPropsWithoutRef<'nav'> & {\n  dataTestId?: HeaderNavDataTestId\n}\n\nconst ACTIVE = \"[aria-current]:not([aria-current='false'], [aria-current=''])\"\n\nconst scrollIntoCenter = (nav: HTMLElement, active: HTMLElement | null) => {\n  if (!active) return\n  const navRect = nav.getBoundingClientRect()\n  const activeRect = active.getBoundingClientRect()\n  nav.scrollLeft +=\n    activeRect.left - navRect.left - (nav.clientWidth - activeRect.width) / 2\n}\n\n/** `<nav>` for header links (`aria-label` defaults to `Main`); scrolls with an edge fade when narrow and centers the link with a truthy `aria-current`. */\nexport const HeaderNav = forwardRef<HTMLElement, HeaderNavProps>(\n  (\n    {\n      'aria-label': ariaLabel = 'Main',\n      className,\n      onScroll,\n      onFocus,\n      dataTestId,\n      ...rest\n    },\n    ref,\n  ) => {\n    const navRef = useRef<HTMLElement | null>(null)\n\n    const setRef = useCallback(\n      (node: HTMLElement | null) => {\n        navRef.current = node\n        if (typeof ref === 'function') ref(node)\n        else if (ref) ref.current = node\n      },\n      [ref],\n    )\n\n    const { sync, onFocus: revealFocused } = useEdgeFade(navRef)\n\n    useIsomorphicLayoutEffect(() => {\n      const nav = navRef.current\n      if (!nav) return\n      let active = nav.querySelector<HTMLElement>(ACTIVE)\n      scrollIntoCenter(nav, active)\n      sync()\n      if (typeof MutationObserver === 'undefined') return\n      const mutations = new MutationObserver(() => {\n        const next = nav.querySelector<HTMLElement>(ACTIVE)\n        if (next !== active) {\n          active = next\n          scrollIntoCenter(nav, next)\n        }\n        sync()\n      })\n      mutations.observe(nav, {\n        childList: true,\n        subtree: true,\n        attributes: true,\n        attributeFilter: ['aria-current'],\n      })\n      return () => mutations.disconnect()\n    }, [sync])\n\n    return (\n      <nav\n        ref={setRef}\n        aria-label={ariaLabel}\n        className={cn(styles.nav, className)}\n        onScroll={(e) => {\n          sync()\n          onScroll?.(e)\n        }}\n        onFocus={(e) => {\n          revealFocused(e)\n          onFocus?.(e)\n        }}\n        data-testid={dataTestId?.root}\n        {...rest}\n      />\n    )\n  },\n)\n\nHeaderNav.displayName = 'HeaderNav'\n"],"names":["ACTIVE","scrollIntoCenter","nav","active","navRect","getBoundingClientRect","activeRect","scrollLeft","left","clientWidth","width","HeaderNav","forwardRef","_ref","ref","ariaLabel","className","onScroll","onFocus","dataTestId","rest","navRef","useRef","setRef","useCallback","node","current","sync","revealFocused","useEdgeFade","useIsomorphicLayoutEffect","querySelector","MutationObserver","mutations","next","observe","childList","subtree","attributes","attributeFilter","disconnect","_jsx","cn","styles","e","root","displayName"],"mappings":"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"}

package/dist/cjs/header/HeaderNav.module.css.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const styles = {"nav":"HeaderNav-module_nav__YxWpA"};
+const styles = {"nav":"HeaderNav-module_nav__YxWpA ScrollFade-module_scrollFade__bK-Oi"};
 
 module.exports = styles;
 //# sourceMappingURL=HeaderNav.module.css.cjs.map

package/dist/cjs/hidden/Hidden.cjs

@@ -2,24 +2,30 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
+const react = require('react');
 const cn = require('classnames');
 const Hidden_module = require('./Hidden.module.css.cjs');
 const jsxRuntime = require('react/jsx-runtime');
 const responsive = require('../utils/responsive.cjs');
 
-/** CSS-only responsive visibility, safe for SSR. Wrapper is `display: contents` while visible. */
-const Hidden = _ref => {
+/** 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. */
+const Hidden = /*#__PURE__*/react.forwardRef((_ref, ref) => {
   let {
+    as: Tag = 'span',
     below,
     above,
     className,
+    dataTestId,
     ...rest
   } = _ref;
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
+  return /*#__PURE__*/jsxRuntime.jsx(Tag, {
+    ref: ref,
     className: cn(Hidden_module.root, below && Hidden_module[`below${responsive.capitalize(below)}`], above && Hidden_module[`above${responsive.capitalize(above)}`], className),
+    "data-testid": dataTestId?.root,
     ...rest
   });
-};
+});
+Hidden.displayName = 'Hidden';
 
 exports.Hidden = Hidden;
 //# sourceMappingURL=Hidden.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Hidden.cjs","sources":["../../../src/hidden/Hidden.tsx"],"sourcesContent":["import 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 HiddenProps = HTMLAttributes<HTMLDivElement> & {\n  /** Hides at this breakpoint's width and below. */\n  below?: Breakpoint\n  /** Hides at widths above this breakpoint. */\n  above?: Breakpoint\n}\n\n/** CSS-only responsive visibility, safe for SSR. Wrapper is `display: contents` while visible. */\nexport const Hidden = ({ below, above, className, ...rest }: HiddenProps) => (\n  <div\n    className={cn(\n      styles.root,\n      below && styles[`below${capitalize(below)}`],\n      above && styles[`above${capitalize(above)}`],\n      className,\n    )}\n    {...rest}\n  />\n)\n"],"names":["Hidden","_ref","below","above","className","rest","_jsx","cn","styles","root","capitalize"],"mappings":";;;;;;;;;AAcA;AACO,MAAMA,MAAM,GAAGC,IAAA,IAAA;EAAA,IAAC;IAAEC,KAAK;IAAEC,KAAK;IAAEC,SAAS;IAAE,GAAGC,IAAAA;AAAkB,GAAC,GAAAJ,IAAA,CAAA;AAAA,EAAA,oBACtEK,cAAA,CAAA,KAAA,EAAA;AACEF,IAAAA,SAAS,EAAEG,EAAE,CACXC,aAAM,CAACC,IAAI,EACXP,KAAK,IAAIM,aAAM,CAAC,CAAQE,KAAAA,EAAAA,qBAAU,CAACR,KAAK,CAAC,CAAE,CAAA,CAAC,EAC5CC,KAAK,IAAIK,aAAM,CAAC,CAAQE,KAAAA,EAAAA,qBAAU,CAACP,KAAK,CAAC,CAAA,CAAE,CAAC,EAC5CC,SACF,CAAE;IAAA,GACEC,IAAAA;AAAI,GACT,CAAC,CAAA;AAAA;;;;"}
+{"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;;;;"}

package/dist/cjs/hooks/Portal.cjs

@@ -8,10 +8,7 @@ const jsxRuntime = require('react/jsx-runtime');
 
 const THEME_ATTR = 'data-lido-theme';
 
-/**
- * Renders `null` until mounted so SSR and first client render match.
- * Without `container`, mirrors the nearest `data-lido-theme` scope onto the portal root so tokens still resolve.
- */
+/** SSR-safe portal into `container` or `document.body`; without `container` a marker span (dropped once resolved) finds the nearest `data-lido-theme` scope to mirror onto the portal root. */
 const Portal = _ref => {
   let {
     children,
@@ -19,12 +16,19 @@ const Portal = _ref => {
   } = _ref;
   const markerRef = react.useRef(null);
   const [target, setTarget] = react.useState(null);
+  const [tick, retry] = react.useReducer(n => n + 1, 0);
   react.useEffect(() => {
     if (container) {
       setTarget(container);
       return;
     }
-    const scope = markerRef.current?.closest(`[${THEME_ATTR}]`);
+    // Marker is gone after a container -> undefined switch; clear target so it re-renders, then retry.
+    if (!markerRef.current) {
+      setTarget(null);
+      retry();
+      return;
+    }
+    const scope = markerRef.current.closest(`[${THEME_ATTR}]`);
     if (!scope || scope === document.documentElement) {
       setTarget(document.body);
       return;
@@ -44,12 +48,11 @@ const Portal = _ref => {
       observer.disconnect();
       root.remove();
     };
-  }, [container]);
-  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-      ref: markerRef,
-      hidden: true
-    }), target ? /*#__PURE__*/reactDom.createPortal(children, target) : null]
+  }, [container, tick]);
+  if (target) return /*#__PURE__*/reactDom.createPortal(children, target);
+  return container ? null : /*#__PURE__*/jsxRuntime.jsx("span", {
+    ref: markerRef,
+    hidden: true
   });
 };
 

package/dist/cjs/hooks/Portal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Portal.cjs","sources":["../../../src/hooks/Portal.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from 'react'\nimport { createPortal } from 'react-dom'\n\nexport type PortalProps = {\n  children?: ReactNode\n  /** Defaults to `document.body`. */\n  container?: Element | null\n}\n\nconst THEME_ATTR = 'data-lido-theme'\n\n/**\n * Renders `null` until mounted so SSR and first client render match.\n * Without `container`, mirrors the nearest `data-lido-theme` scope onto the portal root so tokens still resolve.\n */\nexport const Portal = ({ children, container }: PortalProps) => {\n  const markerRef = useRef<HTMLSpanElement>(null)\n  const [target, setTarget] = useState<Element | null>(null)\n\n  useEffect(() => {\n    if (container) {\n      setTarget(container)\n      return\n    }\n    const scope = markerRef.current?.closest(`[${THEME_ATTR}]`)\n    if (!scope || scope === document.documentElement) {\n      setTarget(document.body)\n      return\n    }\n\n    const root = document.createElement('div')\n    root.style.display = 'contents'\n    const sync = () =>\n      root.setAttribute(THEME_ATTR, scope.getAttribute(THEME_ATTR) ?? '')\n    sync()\n    document.body.appendChild(root)\n    const observer = new MutationObserver(sync)\n    observer.observe(scope, { attributes: true, attributeFilter: [THEME_ATTR] })\n    setTarget(root)\n    return () => {\n      observer.disconnect()\n      root.remove()\n    }\n  }, [container])\n\n  return (\n    <>\n      <span ref={markerRef} hidden />\n      {target ? createPortal(children, target) : null}\n    </>\n  )\n}\n"],"names":["THEME_ATTR","Portal","_ref","children","container","markerRef","useRef","target","setTarget","useState","useEffect","scope","current","closest","document","documentElement","body","root","createElement","style","display","sync","setAttribute","getAttribute","appendChild","observer","MutationObserver","observe","attributes","attributeFilter","disconnect","remove","_jsxs","_Fragment","_jsx","ref","hidden","createPortal"],"mappings":";;;;;;;;AASA,MAAMA,UAAU,GAAG,iBAAiB,CAAA;;AAEpC;AACA;AACA;AACA;AACaC,MAAAA,MAAM,GAAGC,IAAA,IAA0C;EAAA,IAAzC;IAAEC,QAAQ;AAAEC,IAAAA,SAAAA;AAAuB,GAAC,GAAAF,IAAA,CAAA;AACzD,EAAA,MAAMG,SAAS,GAAGC,YAAM,CAAkB,IAAI,CAAC,CAAA;EAC/C,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGC,cAAQ,CAAiB,IAAI,CAAC,CAAA;AAE1DC,EAAAA,eAAS,CAAC,MAAM;AACd,IAAA,IAAIN,SAAS,EAAE;MACbI,SAAS,CAACJ,SAAS,CAAC,CAAA;AACpB,MAAA,OAAA;AACF,KAAA;IACA,MAAMO,KAAK,GAAGN,SAAS,CAACO,OAAO,EAAEC,OAAO,CAAC,CAAA,CAAA,EAAIb,UAAU,CAAA,CAAA,CAAG,CAAC,CAAA;IAC3D,IAAI,CAACW,KAAK,IAAIA,KAAK,KAAKG,QAAQ,CAACC,eAAe,EAAE;AAChDP,MAAAA,SAAS,CAACM,QAAQ,CAACE,IAAI,CAAC,CAAA;AACxB,MAAA,OAAA;AACF,KAAA;AAEA,IAAA,MAAMC,IAAI,GAAGH,QAAQ,CAACI,aAAa,CAAC,KAAK,CAAC,CAAA;AAC1CD,IAAAA,IAAI,CAACE,KAAK,CAACC,OAAO,GAAG,UAAU,CAAA;AAC/B,IAAA,MAAMC,IAAI,GAAGA,MACXJ,IAAI,CAACK,YAAY,CAACtB,UAAU,EAAEW,KAAK,CAACY,YAAY,CAACvB,UAAU,CAAC,IAAI,EAAE,CAAC,CAAA;AACrEqB,IAAAA,IAAI,EAAE,CAAA;AACNP,IAAAA,QAAQ,CAACE,IAAI,CAACQ,WAAW,CAACP,IAAI,CAAC,CAAA;AAC/B,IAAA,MAAMQ,QAAQ,GAAG,IAAIC,gBAAgB,CAACL,IAAI,CAAC,CAAA;AAC3CI,IAAAA,QAAQ,CAACE,OAAO,CAAChB,KAAK,EAAE;AAAEiB,MAAAA,UAAU,EAAE,IAAI;MAAEC,eAAe,EAAE,CAAC7B,UAAU,CAAA;AAAE,KAAC,CAAC,CAAA;IAC5EQ,SAAS,CAACS,IAAI,CAAC,CAAA;AACf,IAAA,OAAO,MAAM;MACXQ,QAAQ,CAACK,UAAU,EAAE,CAAA;MACrBb,IAAI,CAACc,MAAM,EAAE,CAAA;KACd,CAAA;AACH,GAAC,EAAE,CAAC3B,SAAS,CAAC,CAAC,CAAA;EAEf,oBACE4B,eAAA,CAAAC,mBAAA,EAAA;AAAA9B,IAAAA,QAAA,gBACE+B,cAAA,CAAA,MAAA,EAAA;AAAMC,MAAAA,GAAG,EAAE9B,SAAU;MAAC+B,MAAM,EAAA,IAAA;KAAE,CAAC,EAC9B7B,MAAM,gBAAG8B,qBAAY,CAAClC,QAAQ,EAAEI,MAAM,CAAC,GAAG,IAAI,CAAA;AAAA,GAC/C,CAAC,CAAA;AAEP;;;;"}
+{"version":3,"file":"Portal.cjs","sources":["../../../src/hooks/Portal.tsx"],"sourcesContent":["import { useEffect, useReducer, useRef, useState, type ReactNode } from 'react'\nimport { createPortal } from 'react-dom'\n\nexport type PortalProps = {\n  children?: ReactNode\n  /** Defaults to `document.body`. */\n  container?: Element | null\n}\n\nconst THEME_ATTR = 'data-lido-theme'\n\n/** SSR-safe portal into `container` or `document.body`; without `container` a marker span (dropped once resolved) finds the nearest `data-lido-theme` scope to mirror onto the portal root. */\nexport const Portal = ({ children, container }: PortalProps) => {\n  const markerRef = useRef<HTMLSpanElement>(null)\n  const [target, setTarget] = useState<Element | null>(null)\n  const [tick, retry] = useReducer((n: number) => n + 1, 0)\n\n  useEffect(() => {\n    if (container) {\n      setTarget(container)\n      return\n    }\n    // Marker is gone after a container -> undefined switch; clear target so it re-renders, then retry.\n    if (!markerRef.current) {\n      setTarget(null)\n      retry()\n      return\n    }\n    const scope = markerRef.current.closest(`[${THEME_ATTR}]`)\n    if (!scope || scope === document.documentElement) {\n      setTarget(document.body)\n      return\n    }\n\n    const root = document.createElement('div')\n    root.style.display = 'contents'\n    const sync = () =>\n      root.setAttribute(THEME_ATTR, scope.getAttribute(THEME_ATTR) ?? '')\n    sync()\n    document.body.appendChild(root)\n    const observer = new MutationObserver(sync)\n    observer.observe(scope, { attributes: true, attributeFilter: [THEME_ATTR] })\n    setTarget(root)\n    return () => {\n      observer.disconnect()\n      root.remove()\n    }\n  }, [container, tick])\n\n  if (target) return createPortal(children, target)\n  return container ? null : <span ref={markerRef} hidden />\n}\n"],"names":["THEME_ATTR","Portal","_ref","children","container","markerRef","useRef","target","setTarget","useState","tick","retry","useReducer","n","useEffect","current","scope","closest","document","documentElement","body","root","createElement","style","display","sync","setAttribute","getAttribute","appendChild","observer","MutationObserver","observe","attributes","attributeFilter","disconnect","remove","createPortal","_jsx","ref","hidden"],"mappings":";;;;;;;;AASA,MAAMA,UAAU,GAAG,iBAAiB,CAAA;;AAEpC;AACaC,MAAAA,MAAM,GAAGC,IAAA,IAA0C;EAAA,IAAzC;IAAEC,QAAQ;AAAEC,IAAAA,SAAAA;AAAuB,GAAC,GAAAF,IAAA,CAAA;AACzD,EAAA,MAAMG,SAAS,GAAGC,YAAM,CAAkB,IAAI,CAAC,CAAA;EAC/C,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGC,cAAQ,CAAiB,IAAI,CAAC,CAAA;AAC1D,EAAA,MAAM,CAACC,IAAI,EAAEC,KAAK,CAAC,GAAGC,gBAAU,CAAEC,CAAS,IAAKA,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAA;AAEzDC,EAAAA,eAAS,CAAC,MAAM;AACd,IAAA,IAAIV,SAAS,EAAE;MACbI,SAAS,CAACJ,SAAS,CAAC,CAAA;AACpB,MAAA,OAAA;AACF,KAAA;AACA;AACA,IAAA,IAAI,CAACC,SAAS,CAACU,OAAO,EAAE;MACtBP,SAAS,CAAC,IAAI,CAAC,CAAA;AACfG,MAAAA,KAAK,EAAE,CAAA;AACP,MAAA,OAAA;AACF,KAAA;IACA,MAAMK,KAAK,GAAGX,SAAS,CAACU,OAAO,CAACE,OAAO,CAAC,CAAA,CAAA,EAAIjB,UAAU,CAAA,CAAA,CAAG,CAAC,CAAA;IAC1D,IAAI,CAACgB,KAAK,IAAIA,KAAK,KAAKE,QAAQ,CAACC,eAAe,EAAE;AAChDX,MAAAA,SAAS,CAACU,QAAQ,CAACE,IAAI,CAAC,CAAA;AACxB,MAAA,OAAA;AACF,KAAA;AAEA,IAAA,MAAMC,IAAI,GAAGH,QAAQ,CAACI,aAAa,CAAC,KAAK,CAAC,CAAA;AAC1CD,IAAAA,IAAI,CAACE,KAAK,CAACC,OAAO,GAAG,UAAU,CAAA;AAC/B,IAAA,MAAMC,IAAI,GAAGA,MACXJ,IAAI,CAACK,YAAY,CAAC1B,UAAU,EAAEgB,KAAK,CAACW,YAAY,CAAC3B,UAAU,CAAC,IAAI,EAAE,CAAC,CAAA;AACrEyB,IAAAA,IAAI,EAAE,CAAA;AACNP,IAAAA,QAAQ,CAACE,IAAI,CAACQ,WAAW,CAACP,IAAI,CAAC,CAAA;AAC/B,IAAA,MAAMQ,QAAQ,GAAG,IAAIC,gBAAgB,CAACL,IAAI,CAAC,CAAA;AAC3CI,IAAAA,QAAQ,CAACE,OAAO,CAACf,KAAK,EAAE;AAAEgB,MAAAA,UAAU,EAAE,IAAI;MAAEC,eAAe,EAAE,CAACjC,UAAU,CAAA;AAAE,KAAC,CAAC,CAAA;IAC5EQ,SAAS,CAACa,IAAI,CAAC,CAAA;AACf,IAAA,OAAO,MAAM;MACXQ,QAAQ,CAACK,UAAU,EAAE,CAAA;MACrBb,IAAI,CAACc,MAAM,EAAE,CAAA;KACd,CAAA;AACH,GAAC,EAAE,CAAC/B,SAAS,EAAEM,IAAI,CAAC,CAAC,CAAA;EAErB,IAAIH,MAAM,EAAE,oBAAO6B,qBAAY,CAACjC,QAAQ,EAAEI,MAAM,CAAC,CAAA;AACjD,EAAA,OAAOH,SAAS,GAAG,IAAI,gBAAGiC,cAAA,CAAA,MAAA,EAAA;AAAMC,IAAAA,GAAG,EAAEjC,SAAU;IAACkC,MAAM,EAAA,IAAA;AAAA,GAAE,CAAC,CAAA;AAC3D;;;;"}

package/dist/cjs/hooks/useBodyScrollLock.cjs

@@ -4,46 +4,82 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const react = require('react');
 
+const SCROLLBAR_VAR = '--lido-app-ui-scrollbar-width';
+
 // Ref-counted so stacked overlays only restore on the last unlock.
 let lockCount = 0;
+const AXES = ['overflow-x', 'overflow-y'];
 let saved = {
-  overflow: '',
+  scroller: null,
+  axes: [],
   paddingRight: ''
 };
 const lock = () => {
   if (lockCount === 0) {
     const {
       body,
-      documentElement
+      documentElement: html
     } = document;
+    // Locking <html> when body is the scroller would detach body's overflow propagation and break sticky headers.
+    const scroller = ['auto', 'scroll'].includes(getComputedStyle(html).overflowY) ? html : body;
     saved = {
-      overflow: body.style.overflow,
+      scroller,
+      axes: AXES.map(name => ({
+        name,
+        value: scroller.style.getPropertyValue(name),
+        priority: scroller.style.getPropertyPriority(name)
+      })),
       paddingRight: body.style.paddingRight
     };
-    const scrollbarWidth = window.innerWidth - documentElement.clientWidth;
-    if (scrollbarWidth > 0) {
+    const before = body.getBoundingClientRect().width;
+    // body's rect updates synchronously after the lock, html.clientWidth doesn't.
+    scroller.style.overflow = 'hidden';
+    const gained = body.getBoundingClientRect().width - before;
+    if (gained > 0) {
       const current = parseFloat(getComputedStyle(body).paddingRight) || 0;
-      body.style.paddingRight = `${current + scrollbarWidth}px`;
+      body.style.paddingRight = `${current + gained}px`;
+      html.style.setProperty(SCROLLBAR_VAR, `${gained}px`);
     }
-    body.style.overflow = 'hidden';
   }
   lockCount += 1;
 };
 const unlock = () => {
   lockCount -= 1;
   if (lockCount === 0) {
-    document.body.style.overflow = saved.overflow;
-    document.body.style.paddingRight = saved.paddingRight;
+    const {
+      body,
+      documentElement: html
+    } = document;
+    const {
+      scroller,
+      axes
+    } = saved;
+    if (scroller) {
+      scroller.style.removeProperty('overflow');
+      axes.forEach(_ref => {
+        let {
+          name,
+          value,
+          priority
+        } = _ref;
+        if (value) scroller.style.setProperty(name, value, priority);else scroller.style.removeProperty(name);
+      });
+    }
+    body.style.paddingRight = saved.paddingRight;
+    html.style.removeProperty(SCROLLBAR_VAR);
   }
 };
 
-/** Locks body scroll while `active`, compensating the scrollbar width. */
-const useBodyScrollLock = active => {
+/** Locks page scroll while `enabled`, compensating the scrollbar width and exposing it as `--lido-app-ui-scrollbar-width`. */
+const useBodyScrollLock = function () {
+  let {
+    enabled = true
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   react.useEffect(() => {
-    if (!active) return;
+    if (!enabled) return;
     lock();
     return unlock;
-  }, [active]);
+  }, [enabled]);
 };
 
 exports.useBodyScrollLock = useBodyScrollLock;