@lidofinance/lido-app-ui 1.13.0 → 1.14.0

package/dist/cjs/link-provider/Anchor.cjs

@@ -17,13 +17,33 @@ const pickLink = (_ref, href, _ref2) => {
     download
   } = _ref2;
   if (ABSOLUTE_URL.test(href)) return externalComponent;
-  if (href.startsWith('#') || target && target !== '_self' || download !== undefined) return undefined;
+  if (href.startsWith('#') || target && target !== '_self' || download != null && download !== false) return undefined;
   return component;
 };
 
 /** `<a>` that hands in-app hrefs to `LinkProvider`'s `component` and absolute URLs to its `externalComponent`. */
-const Anchor = /*#__PURE__*/react.forwardRef((props, ref) => {
+const Anchor = /*#__PURE__*/react.forwardRef((_ref3, ref) => {
+  let {
+    external,
+    disabled,
+    linkProps,
+    ...rest
+  } = _ref3;
   const links = LinkProvider.useLinkComponents();
+  const props = {
+    ...rest,
+    ...(external && {
+      target: rest.target ?? '_blank',
+      rel: rest.rel ?? 'noopener noreferrer'
+    }),
+    ...(disabled && {
+      href: undefined,
+      onClick: undefined,
+      tabIndex: undefined,
+      role: rest.role ?? 'link',
+      'aria-disabled': true
+    })
+  };
   const {
     href
   } = props;
@@ -32,6 +52,7 @@ const Anchor = /*#__PURE__*/react.forwardRef((props, ref) => {
     if (Link) return /*#__PURE__*/jsxRuntime.jsx(Link, {
       ref: ref,
       ...props,
+      ...linkProps,
       href: href
     });
   }

package/dist/cjs/link-provider/Anchor.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Anchor.cjs","sources":["../../../src/link-provider/Anchor.tsx"],"sourcesContent":["import { forwardRef, type AnchorHTMLAttributes } from 'react'\n\nimport { useLinkComponents, type LinkComponents } from './LinkProvider'\n\nconst ABSOLUTE_URL = /^([a-z][a-z\\d+.-]*:|\\/\\/)/i\n\nconst pickLink = (\n  { component, externalComponent }: LinkComponents,\n  href: string,\n  { target, download }: AnchorHTMLAttributes<HTMLAnchorElement>,\n) => {\n  if (ABSOLUTE_URL.test(href)) return externalComponent\n  if (\n    href.startsWith('#') ||\n    (target && target !== '_self') ||\n    download !== undefined\n  )\n    return undefined\n  return component\n}\n\n/** `<a>` that hands in-app hrefs to `LinkProvider`'s `component` and absolute URLs to its `externalComponent`. */\nexport const Anchor = forwardRef<\n  HTMLAnchorElement,\n  AnchorHTMLAttributes<HTMLAnchorElement>\n>((props, ref) => {\n  const links = useLinkComponents()\n  const { href } = props\n\n  if (href !== undefined) {\n    const Link = pickLink(links, href, props)\n    if (Link) return <Link ref={ref} {...props} href={href} />\n  }\n\n  // eslint-disable-next-line jsx-a11y/anchor-has-content -- children arrive via props\n  return <a ref={ref} {...props} />\n})\n\nAnchor.displayName = 'Anchor'\n"],"names":["ABSOLUTE_URL","pickLink","_ref","href","_ref2","component","externalComponent","target","download","test","startsWith","undefined","Anchor","forwardRef","props","ref","links","useLinkComponents","Link","_jsx","displayName"],"mappings":";;;;;;;;AAIA,MAAMA,YAAY,GAAG,4BAA4B,CAAA;AAEjD,MAAMC,QAAQ,GAAGA,CAAAC,IAAA,EAEfC,IAAY,EAAAC,KAAA,KAET;EAAA,IAHH;IAAEC,SAAS;AAAEC,IAAAA,iBAAAA;AAAkC,GAAC,GAAAJ,IAAA,CAAA;EAAA,IAEhD;IAAEK,MAAM;AAAEC,IAAAA,QAAAA;AAAkD,GAAC,GAAAJ,KAAA,CAAA;EAE7D,IAAIJ,YAAY,CAACS,IAAI,CAACN,IAAI,CAAC,EAAE,OAAOG,iBAAiB,CAAA;AACrD,EAAA,IACEH,IAAI,CAACO,UAAU,CAAC,GAAG,CAAC,IACnBH,MAAM,IAAIA,MAAM,KAAK,OAAQ,IAC9BC,QAAQ,KAAKG,SAAS,EAEtB,OAAOA,SAAS,CAAA;AAClB,EAAA,OAAON,SAAS,CAAA;AAClB,CAAC,CAAA;;AAED;AACO,MAAMO,MAAM,gBAAGC,gBAAU,CAG9B,CAACC,KAAK,EAAEC,GAAG,KAAK;AAChB,EAAA,MAAMC,KAAK,GAAGC,8BAAiB,EAAE,CAAA;EACjC,MAAM;AAAEd,IAAAA,IAAAA;AAAK,GAAC,GAAGW,KAAK,CAAA;EAEtB,IAAIX,IAAI,KAAKQ,SAAS,EAAE;IACtB,MAAMO,IAAI,GAAGjB,QAAQ,CAACe,KAAK,EAAEb,IAAI,EAAEW,KAAK,CAAC,CAAA;AACzC,IAAA,IAAII,IAAI,EAAE,oBAAOC,cAAA,CAACD,IAAI,EAAA;AAACH,MAAAA,GAAG,EAAEA,GAAI;AAAA,MAAA,GAAKD,KAAK;AAAEX,MAAAA,IAAI,EAAEA,IAAAA;AAAK,KAAE,CAAC,CAAA;AAC5D,GAAA;;AAEA;AACA,EAAA,oBAAOgB,cAAA,CAAA,GAAA,EAAA;AAAGJ,IAAAA,GAAG,EAAEA,GAAI;IAAA,GAAKD,KAAAA;AAAK,GAAG,CAAC,CAAA;AACnC,CAAC,EAAC;AAEFF,MAAM,CAACQ,WAAW,GAAG,QAAQ;;;;"}
+{"version":3,"file":"Anchor.cjs","sources":["../../../src/link-provider/Anchor.tsx"],"sourcesContent":["import { forwardRef, type AnchorHTMLAttributes } from 'react'\n\nimport {\n  useLinkComponents,\n  type LinkComponents,\n  type LinkRouterProps,\n} from './LinkProvider'\n\nconst ABSOLUTE_URL = /^([a-z][a-z\\d+.-]*:|\\/\\/)/i\n\nexport type AnchorProps = AnchorHTMLAttributes<HTMLAnchorElement> & {\n  /** Opens in a new tab: defaults `target` to `_blank` and `rel` to `noopener noreferrer`; an explicit `rel` wins. */\n  external?: boolean\n  /** Renders an href-less `role='link'` with `aria-disabled`, and drops `onClick`. */\n  disabled?: boolean\n  /** Router-only props (e.g. `prefetch`), passed to `LinkProvider` components and never to a plain `<a>`. */\n  linkProps?: LinkRouterProps\n}\n\nconst pickLink = (\n  { component, externalComponent }: LinkComponents,\n  href: string,\n  { target, download }: AnchorHTMLAttributes<HTMLAnchorElement>,\n) => {\n  if (ABSOLUTE_URL.test(href)) return externalComponent\n  if (\n    href.startsWith('#') ||\n    (target && target !== '_self') ||\n    (download != null && download !== false)\n  )\n    return undefined\n  return component\n}\n\n/** `<a>` that hands in-app hrefs to `LinkProvider`'s `component` and absolute URLs to its `externalComponent`. */\nexport const Anchor = forwardRef<HTMLAnchorElement, AnchorProps>(\n  ({ external, disabled, linkProps, ...rest }, ref) => {\n    const links = useLinkComponents()\n    const props: AnchorHTMLAttributes<HTMLAnchorElement> = {\n      ...rest,\n      ...(external && {\n        target: rest.target ?? '_blank',\n        rel: rest.rel ?? 'noopener noreferrer',\n      }),\n      ...(disabled && {\n        href: undefined,\n        onClick: undefined,\n        tabIndex: undefined,\n        role: rest.role ?? 'link',\n        'aria-disabled': true,\n      }),\n    }\n    const { href } = props\n\n    if (href !== undefined) {\n      const Link = pickLink(links, href, props)\n      if (Link) return <Link ref={ref} {...props} {...linkProps} href={href} />\n    }\n\n    // eslint-disable-next-line jsx-a11y/anchor-has-content -- children arrive via props\n    return <a ref={ref} {...props} />\n  },\n)\n\nAnchor.displayName = 'Anchor'\n"],"names":["ABSOLUTE_URL","pickLink","_ref","href","_ref2","component","externalComponent","target","download","test","startsWith","undefined","Anchor","forwardRef","_ref3","ref","external","disabled","linkProps","rest","links","useLinkComponents","props","rel","onClick","tabIndex","role","Link","_jsx","displayName"],"mappings":";;;;;;;;AAQA,MAAMA,YAAY,GAAG,4BAA4B,CAAA;AAWjD,MAAMC,QAAQ,GAAGA,CAAAC,IAAA,EAEfC,IAAY,EAAAC,KAAA,KAET;EAAA,IAHH;IAAEC,SAAS;AAAEC,IAAAA,iBAAAA;AAAkC,GAAC,GAAAJ,IAAA,CAAA;EAAA,IAEhD;IAAEK,MAAM;AAAEC,IAAAA,QAAAA;AAAkD,GAAC,GAAAJ,KAAA,CAAA;EAE7D,IAAIJ,YAAY,CAACS,IAAI,CAACN,IAAI,CAAC,EAAE,OAAOG,iBAAiB,CAAA;EACrD,IACEH,IAAI,CAACO,UAAU,CAAC,GAAG,CAAC,IACnBH,MAAM,IAAIA,MAAM,KAAK,OAAQ,IAC7BC,QAAQ,IAAI,IAAI,IAAIA,QAAQ,KAAK,KAAM,EAExC,OAAOG,SAAS,CAAA;AAClB,EAAA,OAAON,SAAS,CAAA;AAClB,CAAC,CAAA;;AAED;AACO,MAAMO,MAAM,gBAAGC,gBAAU,CAC9B,CAAAC,KAAA,EAA6CC,GAAG,KAAK;EAAA,IAApD;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC,SAAS;IAAE,GAAGC,IAAAA;AAAK,GAAC,GAAAL,KAAA,CAAA;AACzC,EAAA,MAAMM,KAAK,GAAGC,8BAAiB,EAAE,CAAA;AACjC,EAAA,MAAMC,KAA8C,GAAG;AACrD,IAAA,GAAGH,IAAI;AACP,IAAA,IAAIH,QAAQ,IAAI;AACdT,MAAAA,MAAM,EAAEY,IAAI,CAACZ,MAAM,IAAI,QAAQ;AAC/BgB,MAAAA,GAAG,EAAEJ,IAAI,CAACI,GAAG,IAAI,qBAAA;AACnB,KAAC,CAAC;AACF,IAAA,IAAIN,QAAQ,IAAI;AACdd,MAAAA,IAAI,EAAEQ,SAAS;AACfa,MAAAA,OAAO,EAAEb,SAAS;AAClBc,MAAAA,QAAQ,EAAEd,SAAS;AACnBe,MAAAA,IAAI,EAAEP,IAAI,CAACO,IAAI,IAAI,MAAM;AACzB,MAAA,eAAe,EAAE,IAAA;KAClB,CAAA;GACF,CAAA;EACD,MAAM;AAAEvB,IAAAA,IAAAA;AAAK,GAAC,GAAGmB,KAAK,CAAA;EAEtB,IAAInB,IAAI,KAAKQ,SAAS,EAAE;IACtB,MAAMgB,IAAI,GAAG1B,QAAQ,CAACmB,KAAK,EAAEjB,IAAI,EAAEmB,KAAK,CAAC,CAAA;AACzC,IAAA,IAAIK,IAAI,EAAE,oBAAOC,cAAA,CAACD,IAAI,EAAA;AAACZ,MAAAA,GAAG,EAAEA,GAAI;AAAA,MAAA,GAAKO,KAAK;AAAA,MAAA,GAAMJ,SAAS;AAAEf,MAAAA,IAAI,EAAEA,IAAAA;AAAK,KAAE,CAAC,CAAA;AAC3E,GAAA;;AAEA;AACA,EAAA,oBAAOyB,cAAA,CAAA,GAAA,EAAA;AAAGb,IAAAA,GAAG,EAAEA,GAAI;IAAA,GAAKO,KAAAA;AAAK,GAAG,CAAC,CAAA;AACnC,CACF,EAAC;AAEDV,MAAM,CAACiB,WAAW,GAAG,QAAQ;;;;"}

package/dist/cjs/link-provider/LinkProvider.cjs

@@ -6,7 +6,7 @@ const react = require('react');
 const jsxRuntime = require('react/jsx-runtime');
 
 const LinkContext = /*#__PURE__*/react.createContext({});
-/** Renders app-ui links with your components: `component` for in-app hrefs (e.g. Next.js `Link`), `externalComponent` for absolute URLs; both must forward `ref` to an `<a>`. Pass stable references (module-level, not inline functions): inline ones remount every link on each render. */
+/** Renders app-ui links with your components: `component` for in-app hrefs (e.g. Next.js `Link`), `externalComponent` for absolute URLs; both must be `forwardRef` components that forward `ref` to an `<a>`. Pass stable references (module-level, not inline functions): inline ones remount every link on each render. In-app hash links, `download` links and non-`_self` `target` links stay a plain `<a>`; absolute URLs always go to `externalComponent` when set. `TextLink`, `NavLink`, `SmallCard`, `LinkButton`, `Tag`, `Breadcrumbs` items and `Logo` with `href` use it. */
 const LinkProvider = _ref => {
   let {
     component,

package/dist/cjs/link-provider/LinkProvider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"LinkProvider.cjs","sources":["../../../src/link-provider/LinkProvider.tsx"],"sourcesContent":["import {\n  createContext,\n  useContext,\n  useMemo,\n  type AnchorHTMLAttributes,\n  type ReactNode,\n  type Ref,\n} from 'react'\n\nexport type LinkComponentProps = AnchorHTMLAttributes<HTMLAnchorElement> & {\n  href: string\n  ref?: Ref<HTMLAnchorElement>\n}\n\nexport type LinkComponent = (props: LinkComponentProps) => ReactNode\n\nexport type LinkComponents = {\n  component?: LinkComponent\n  externalComponent?: LinkComponent\n}\n\nconst LinkContext = createContext<LinkComponents>({})\n\nexport type LinkProviderProps = LinkComponents & {\n  children?: ReactNode\n}\n\n/** Renders app-ui links with your components: `component` for in-app hrefs (e.g. Next.js `Link`), `externalComponent` for absolute URLs; both must forward `ref` to an `<a>`. Pass stable references (module-level, not inline functions): inline ones remount every link on each render. */\nexport const LinkProvider = ({\n  component,\n  externalComponent,\n  children,\n}: LinkProviderProps) => {\n  const value = useMemo(\n    () => ({ component, externalComponent }),\n    [component, externalComponent],\n  )\n  return <LinkContext.Provider value={value}>{children}</LinkContext.Provider>\n}\n\nexport const useLinkComponents = () => useContext(LinkContext)\n"],"names":["LinkContext","createContext","LinkProvider","_ref","component","externalComponent","children","value","useMemo","_jsx","Provider","useLinkComponents","useContext"],"mappings":";;;;;;;AAqBA,MAAMA,WAAW,gBAAGC,mBAAa,CAAiB,EAAE,CAAC,CAAA;AAMrD;AACaC,MAAAA,YAAY,GAAGC,IAAA,IAIH;EAAA,IAJI;IAC3BC,SAAS;IACTC,iBAAiB;AACjBC,IAAAA,QAAAA;AACiB,GAAC,GAAAH,IAAA,CAAA;AAClB,EAAA,MAAMI,KAAK,GAAGC,aAAO,CACnB,OAAO;IAAEJ,SAAS;AAAEC,IAAAA,iBAAAA;AAAkB,GAAC,CAAC,EACxC,CAACD,SAAS,EAAEC,iBAAiB,CAC/B,CAAC,CAAA;AACD,EAAA,oBAAOI,cAAA,CAACT,WAAW,CAACU,QAAQ,EAAA;AAACH,IAAAA,KAAK,EAAEA,KAAM;AAAAD,IAAAA,QAAA,EAAEA,QAAAA;AAAQ,GAAuB,CAAC,CAAA;AAC9E,EAAC;AAEM,MAAMK,iBAAiB,GAAGA,MAAMC,gBAAU,CAACZ,WAAW;;;;;"}
+{"version":3,"file":"LinkProvider.cjs","sources":["../../../src/link-provider/LinkProvider.tsx"],"sourcesContent":["import {\n  createContext,\n  useContext,\n  useMemo,\n  type AnchorHTMLAttributes,\n  type ReactNode,\n  type Ref,\n} from 'react'\n\n/** Augment via `declare module '@lidofinance/lido-app-ui'` to type router-only props (e.g. Next's `prefetch`), set per link with `linkProps`. */\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nexport interface LinkRouterProps {}\n\nexport type LinkComponentProps = AnchorHTMLAttributes<HTMLAnchorElement> &\n  LinkRouterProps & {\n    href: string\n    ref?: Ref<HTMLAnchorElement>\n  }\n\n/** Wrap adapters in `forwardRef`: under React 18 `ref` arrives as the second argument, never as a prop. */\nexport type LinkComponent = (props: LinkComponentProps) => ReactNode\n\nexport type LinkComponents = {\n  /** Renders in-app hrefs (relative, not hash, `download` or non-`_self` `target`). */\n  component?: LinkComponent\n  /** Renders absolute URLs, including `mailto:` and protocol-relative `//`. */\n  externalComponent?: LinkComponent\n}\n\nconst LinkContext = createContext<LinkComponents>({})\n\nexport type LinkProviderProps = LinkComponents & {\n  children?: ReactNode\n}\n\n/** Renders app-ui links with your components: `component` for in-app hrefs (e.g. Next.js `Link`), `externalComponent` for absolute URLs; both must be `forwardRef` components that forward `ref` to an `<a>`. Pass stable references (module-level, not inline functions): inline ones remount every link on each render. In-app hash links, `download` links and non-`_self` `target` links stay a plain `<a>`; absolute URLs always go to `externalComponent` when set. `TextLink`, `NavLink`, `SmallCard`, `LinkButton`, `Tag`, `Breadcrumbs` items and `Logo` with `href` use it. */\nexport const LinkProvider = ({\n  component,\n  externalComponent,\n  children,\n}: LinkProviderProps) => {\n  const value = useMemo(\n    () => ({ component, externalComponent }),\n    [component, externalComponent],\n  )\n  return <LinkContext.Provider value={value}>{children}</LinkContext.Provider>\n}\n\nexport const useLinkComponents = () => useContext(LinkContext)\n"],"names":["LinkContext","createContext","LinkProvider","_ref","component","externalComponent","children","value","useMemo","_jsx","Provider","useLinkComponents","useContext"],"mappings":";;;;;;;AA6BA,MAAMA,WAAW,gBAAGC,mBAAa,CAAiB,EAAE,CAAC,CAAA;AAMrD;AACaC,MAAAA,YAAY,GAAGC,IAAA,IAIH;EAAA,IAJI;IAC3BC,SAAS;IACTC,iBAAiB;AACjBC,IAAAA,QAAAA;AACiB,GAAC,GAAAH,IAAA,CAAA;AAClB,EAAA,MAAMI,KAAK,GAAGC,aAAO,CACnB,OAAO;IAAEJ,SAAS;AAAEC,IAAAA,iBAAAA;AAAkB,GAAC,CAAC,EACxC,CAACD,SAAS,EAAEC,iBAAiB,CAC/B,CAAC,CAAA;AACD,EAAA,oBAAOI,cAAA,CAACT,WAAW,CAACU,QAAQ,EAAA;AAACH,IAAAA,KAAK,EAAEA,KAAM;AAAAD,IAAAA,QAAA,EAAEA,QAAAA;AAAQ,GAAuB,CAAC,CAAA;AAC9E,EAAC;AAEM,MAAMK,iBAAiB,GAAGA,MAAMC,gBAAU,CAACZ,WAAW;;;;;"}

package/dist/cjs/logo/Logo.cjs

@@ -33,13 +33,17 @@ const WORDMARK = /*#__PURE__*/jsxRuntime.jsx("span", {
     })
   })
 });
+
+/** Lido droplet with wordmark and an optional product name. */
 const Logo = /*#__PURE__*/react.forwardRef((_ref, ref) => {
   let {
     variant = 'full',
     product,
     href,
+    external,
     onClick,
     className,
+    dataTestId,
     ...rest
   } = _ref;
   const label = product ? `Lido ${product}` : 'Lido';
@@ -53,6 +57,7 @@ const Logo = /*#__PURE__*/react.forwardRef((_ref, ref) => {
         "aria-hidden": "true"
       }), /*#__PURE__*/jsxRuntime.jsx("span", {
         className: Logo_module.product,
+        "data-testid": dataTestId?.product,
         children: product
       })]
     }) : null]
@@ -63,7 +68,9 @@ const Logo = /*#__PURE__*/react.forwardRef((_ref, ref) => {
       ref: ref,
       className: cn(classes, Logo_module.interactive),
       "aria-label": label,
+      "data-testid": dataTestId?.root,
       href,
+      external: href ? external : undefined,
       onClick,
       ...rest,
       children: content
@@ -74,6 +81,7 @@ const Logo = /*#__PURE__*/react.forwardRef((_ref, ref) => {
     role: "img",
     "aria-label": label,
     className: classes,
+    "data-testid": dataTestId?.root,
     ...rest,
     children: content
   });

package/dist/cjs/logo/Logo.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Logo.cjs","sources":["../../../src/logo/Logo.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type Ref } from 'react'\n\nimport cn from 'classnames'\n\nimport { ActionElement, type ActionElementProps } from '../utils'\nimport styles from './Logo.module.css'\n\nexport type LogoVariant = 'full' | 'compact' | 'auto'\n\nexport type LogoProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {\n  variant?: LogoVariant\n  product?: string\n  href?: string\n}\n\nconst DROPLET = (\n  <svg\n    className={styles.droplet}\n    viewBox='38 26 23 32'\n    fill='currentColor'\n    aria-hidden='true'\n  >\n    <path\n      fillRule='evenodd'\n      clipRule='evenodd'\n      d='M49.485 26L57.6 38.398l-8.116 4.613-8.117-4.613L49.485 26zM43.85 37.81l5.634-8.602 5.633 8.601-5.633 3.201-5.634-3.2z'\n    />\n    <path d='M49.478 45.736l-9.416-5.35-.255.39c-2.896 4.428-2.25 10.226 1.554 13.945 4.48 4.372 11.747 4.372 16.233 0 3.812-3.719 4.458-9.517 1.554-13.945l-.254-.39-9.416 5.35z' />\n  </svg>\n)\n\nconst WORDMARK = (\n  <span className={styles.wordmark}>\n    <svg\n      className={styles.wordmarkSvg}\n      viewBox='61 26 101 32'\n      fill='currentColor'\n      aria-hidden='true'\n    >\n      <path d='M90.17 50.449H79.462V33.551h3.267v13.917h7.441v2.981zm16.422 0h-3.267V33.551h3.267V50.45zm13.242 0V33.551h5.597c.85 0 1.54.029 2.062.093 1.351.156 2.519.624 3.492 1.398.988.773 1.735 1.767 2.244 2.98.515 1.207.769 2.534.769 3.982 0 1.448-.254 2.775-.769 3.988-.516 1.207-1.264 2.193-2.244 2.967-.98.773-2.141 1.242-3.492 1.398-.53.064-1.219.092-2.062.092h-5.597zm5.597-3.002c.85 0 1.474-.043 1.873-.12a3.218 3.218 0 001.801-1.001 5.002 5.002 0 001.082-1.923 7.97 7.97 0 00.363-2.406 7.96 7.96 0 00-.371-2.442c-.239-.76-.602-1.398-1.096-1.916a3.123 3.123 0 00-1.779-.972c-.399-.078-1.023-.12-1.873-.12h-2.279V47.44h2.279v.007zm28.191 3.357c-1.707 0-3.188-.362-4.458-1.093a7.432 7.432 0 01-2.919-3.102c-.675-1.327-1.009-2.867-1.009-4.613 0-1.745.334-3.285 1.009-4.613.683-1.327 1.656-2.356 2.919-3.087 1.263-.738 2.751-1.1 4.458-1.1 1.706 0 3.187.37 4.457 1.1a7.27 7.27 0 012.904 3.087c.683 1.328 1.024 2.868 1.024 4.613 0 1.746-.341 3.286-1.024 4.613-.675 1.328-1.641 2.364-2.904 3.102-1.263.73-2.751 1.093-4.457 1.093zm.094-3.002c1.06 0 1.946-.242 2.664-.717.719-.476 1.264-1.15 1.619-2.016.363-.865.538-1.887.538-3.065 0-1.817-.422-3.237-1.271-4.259-.849-1.021-2.098-1.54-3.746-1.54-1.06 0-1.946.242-2.664.717-.719.476-1.264 1.15-1.619 2.016-.363.865-.538 1.887-.538 3.066 0 1.816.421 3.236 1.271 4.258.849 1.022 2.098 1.54 3.746 1.54z' />\n    </svg>\n  </span>\n)\n\nexport const Logo = forwardRef<HTMLElement, LogoProps>(\n  ({ variant = 'full', product, href, onClick, className, ...rest }, ref) => {\n    const label = product ? `Lido ${product}` : 'Lido'\n    const content = (\n      <>\n        <span className={styles.mark}>\n          {DROPLET}\n          {variant === 'compact' ? null : WORDMARK}\n        </span>\n        {product ? (\n          <>\n            <span className={styles.divider} aria-hidden='true' />\n            <span className={styles.product}>{product}</span>\n          </>\n        ) : null}\n      </>\n    )\n    const classes = cn(styles.root, styles[variant], className)\n\n    if (href || onClick) {\n      return (\n        <ActionElement\n          ref={ref as Ref<HTMLAnchorElement | HTMLButtonElement>}\n          className={cn(classes, styles.interactive)}\n          aria-label={label}\n          {...({ href, onClick, ...rest } as ActionElementProps)}\n        >\n          {content}\n        </ActionElement>\n      )\n    }\n\n    return (\n      <span\n        ref={ref as Ref<HTMLSpanElement>}\n        role='img'\n        aria-label={label}\n        className={classes}\n        {...rest}\n      >\n        {content}\n      </span>\n    )\n  },\n)\n\nLogo.displayName = 'Logo'\n"],"names":["DROPLET","_jsxs","className","styles","droplet","viewBox","fill","children","_jsx","fillRule","clipRule","d","WORDMARK","wordmark","wordmarkSvg","Logo","forwardRef","_ref","ref","variant","product","href","onClick","rest","label","content","_Fragment","mark","divider","classes","cn","root","ActionElement","interactive","role","displayName"],"mappings":"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"}
+{"version":3,"file":"Logo.cjs","sources":["../../../src/logo/Logo.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type AnchorHTMLAttributes,\n  type HTMLAttributes,\n  type Ref,\n} from 'react'\n\nimport cn from 'classnames'\n\nimport { ActionElement } from '../utils'\nimport styles from './Logo.module.css'\n\nexport type LogoVariant = 'full' | 'compact' | 'auto'\n\nexport type LogoDataTestId = { root?: string; product?: string }\n\nexport type LogoProps = Omit<HTMLAttributes<HTMLElement>, 'children'> &\n  Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'target' | 'download'> & {\n    /** `full` shows the wordmark, `compact` drops it, `auto` drops it below `--lido-app-ui-breakpoint-logo` (1024px), overridable per instance with `--lido-app-ui-logo-breakpoint`. */\n    variant?: LogoVariant\n    /** Product name shown after a divider and added to the accessible name. */\n    product?: string\n    /** Renders a link; with only `onClick` it renders a button, otherwise a plain `role=\"img\"` element. */\n    href?: string\n    /** Opens the link in a new tab; needs `href`. */\n    external?: boolean\n    dataTestId?: LogoDataTestId\n  }\n\nconst DROPLET = (\n  <svg\n    className={styles.droplet}\n    viewBox='38 26 23 32'\n    fill='currentColor'\n    aria-hidden='true'\n  >\n    <path\n      fillRule='evenodd'\n      clipRule='evenodd'\n      d='M49.485 26L57.6 38.398l-8.116 4.613-8.117-4.613L49.485 26zM43.85 37.81l5.634-8.602 5.633 8.601-5.633 3.201-5.634-3.2z'\n    />\n    <path d='M49.478 45.736l-9.416-5.35-.255.39c-2.896 4.428-2.25 10.226 1.554 13.945 4.48 4.372 11.747 4.372 16.233 0 3.812-3.719 4.458-9.517 1.554-13.945l-.254-.39-9.416 5.35z' />\n  </svg>\n)\n\nconst WORDMARK = (\n  <span className={styles.wordmark}>\n    <svg\n      className={styles.wordmarkSvg}\n      viewBox='61 26 101 32'\n      fill='currentColor'\n      aria-hidden='true'\n    >\n      <path d='M90.17 50.449H79.462V33.551h3.267v13.917h7.441v2.981zm16.422 0h-3.267V33.551h3.267V50.45zm13.242 0V33.551h5.597c.85 0 1.54.029 2.062.093 1.351.156 2.519.624 3.492 1.398.988.773 1.735 1.767 2.244 2.98.515 1.207.769 2.534.769 3.982 0 1.448-.254 2.775-.769 3.988-.516 1.207-1.264 2.193-2.244 2.967-.98.773-2.141 1.242-3.492 1.398-.53.064-1.219.092-2.062.092h-5.597zm5.597-3.002c.85 0 1.474-.043 1.873-.12a3.218 3.218 0 001.801-1.001 5.002 5.002 0 001.082-1.923 7.97 7.97 0 00.363-2.406 7.96 7.96 0 00-.371-2.442c-.239-.76-.602-1.398-1.096-1.916a3.123 3.123 0 00-1.779-.972c-.399-.078-1.023-.12-1.873-.12h-2.279V47.44h2.279v.007zm28.191 3.357c-1.707 0-3.188-.362-4.458-1.093a7.432 7.432 0 01-2.919-3.102c-.675-1.327-1.009-2.867-1.009-4.613 0-1.745.334-3.285 1.009-4.613.683-1.327 1.656-2.356 2.919-3.087 1.263-.738 2.751-1.1 4.458-1.1 1.706 0 3.187.37 4.457 1.1a7.27 7.27 0 012.904 3.087c.683 1.328 1.024 2.868 1.024 4.613 0 1.746-.341 3.286-1.024 4.613-.675 1.328-1.641 2.364-2.904 3.102-1.263.73-2.751 1.093-4.457 1.093zm.094-3.002c1.06 0 1.946-.242 2.664-.717.719-.476 1.264-1.15 1.619-2.016.363-.865.538-1.887.538-3.065 0-1.817-.422-3.237-1.271-4.259-.849-1.021-2.098-1.54-3.746-1.54-1.06 0-1.946.242-2.664.717-.719.476-1.264 1.15-1.619 2.016-.363.865-.538 1.887-.538 3.066 0 1.816.421 3.236 1.271 4.258.849 1.022 2.098 1.54 3.746 1.54z' />\n    </svg>\n  </span>\n)\n\n/** Lido droplet with wordmark and an optional product name. */\nexport const Logo = forwardRef<HTMLElement, LogoProps>(\n  (\n    {\n      variant = 'full',\n      product,\n      href,\n      external,\n      onClick,\n      className,\n      dataTestId,\n      ...rest\n    },\n    ref,\n  ) => {\n    const label = product ? `Lido ${product}` : 'Lido'\n    const content = (\n      <>\n        <span className={styles.mark}>\n          {DROPLET}\n          {variant === 'compact' ? null : WORDMARK}\n        </span>\n        {product ? (\n          <>\n            <span className={styles.divider} aria-hidden='true' />\n            <span className={styles.product} data-testid={dataTestId?.product}>\n              {product}\n            </span>\n          </>\n        ) : null}\n      </>\n    )\n    const classes = cn(styles.root, styles[variant], className)\n\n    if (href || onClick) {\n      return (\n        <ActionElement\n          ref={ref as Ref<HTMLAnchorElement | HTMLButtonElement>}\n          className={cn(classes, styles.interactive)}\n          aria-label={label}\n          data-testid={dataTestId?.root}\n          {...{\n            href,\n            external: href ? external : undefined,\n            onClick,\n            ...rest,\n          }}\n        >\n          {content}\n        </ActionElement>\n      )\n    }\n\n    return (\n      <span\n        ref={ref as Ref<HTMLSpanElement>}\n        role='img'\n        aria-label={label}\n        className={classes}\n        data-testid={dataTestId?.root}\n        {...rest}\n      >\n        {content}\n      </span>\n    )\n  },\n)\n\nLogo.displayName = 'Logo'\n"],"names":["DROPLET","_jsxs","className","styles","droplet","viewBox","fill","children","_jsx","fillRule","clipRule","d","WORDMARK","wordmark","wordmarkSvg","Logo","forwardRef","_ref","ref","variant","product","href","external","onClick","dataTestId","rest","label","content","_Fragment","mark","divider","classes","cn","root","ActionElement","interactive","undefined","role","displayName"],"mappings":"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"}

package/dist/cjs/message-box/MessageBox.cjs

@@ -17,6 +17,7 @@ const variantIcons = {
   error: IconWarning.IconWarning,
   success: IconCheck.IconCheck
 };
+/** Inline note in a form or card, e.g. to explain a delay, a fee or a risk. */
 const MessageBox = _ref => {
   let {
     variant = 'default',

package/dist/cjs/message-box/MessageBox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MessageBox.cjs","sources":["../../../src/message-box/MessageBox.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\n\nimport { IconCheck, IconInfo, IconShield, IconWarning } from '../icons'\nimport cn from 'classnames'\n\nimport styles from './MessageBox.module.css'\n\nexport type MessageBoxVariant =\n  | 'default'\n  | 'info'\n  | 'warning'\n  | 'error'\n  | 'success'\n\nconst variantIcons = {\n  default: IconInfo,\n  info: IconShield,\n  warning: IconWarning,\n  error: IconWarning,\n  success: IconCheck,\n}\n\nexport type MessageBoxDataTestId = {\n  root?: string\n  icon?: string\n  headline?: string\n  description?: string\n}\n\nexport type MessageBoxProps = HTMLAttributes<HTMLDivElement> & {\n  variant?: MessageBoxVariant\n  icon?: boolean\n  headline?: ReactNode\n  dataTestId?: MessageBoxDataTestId\n}\n\nexport const MessageBox = ({\n  variant = 'default',\n  icon = true,\n  headline,\n  className,\n  children,\n  dataTestId,\n  ...rest\n}: MessageBoxProps) => {\n  const Icon = variantIcons[variant]\n\n  return (\n    <div\n      className={cn(styles.box, styles[variant], className)}\n      data-testid={dataTestId?.root}\n      {...rest}\n    >\n      {icon ? (\n        <span\n          className={styles.icon}\n          aria-hidden='true'\n          data-testid={dataTestId?.icon}\n        >\n          <Icon />\n        </span>\n      ) : null}\n      <div className={styles.text}>\n        {headline != null ? (\n          <div className={styles.headline} data-testid={dataTestId?.headline}>\n            {headline}\n          </div>\n        ) : null}\n        <div\n          className={styles.description}\n          data-testid={dataTestId?.description}\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"names":["variantIcons","default","IconInfo","info","IconShield","warning","IconWarning","error","success","IconCheck","MessageBox","_ref","variant","icon","headline","className","children","dataTestId","rest","Icon","_jsxs","cn","styles","box","root","_jsx","text","description"],"mappings":";;;;;;;;;;;;AAcA,MAAMA,YAAY,GAAG;AACnBC,EAAAA,OAAO,EAAEC,iBAAQ;AACjBC,EAAAA,IAAI,EAAEC,qBAAU;AAChBC,EAAAA,OAAO,EAAEC,uBAAW;AACpBC,EAAAA,KAAK,EAAED,uBAAW;AAClBE,EAAAA,OAAO,EAAEC,mBAAAA;AACX,CAAC,CAAA;AAgBYC,MAAAA,UAAU,GAAGC,IAAA,IAQH;EAAA,IARI;AACzBC,IAAAA,OAAO,GAAG,SAAS;AACnBC,IAAAA,IAAI,GAAG,IAAI;IACXC,QAAQ;IACRC,SAAS;IACTC,QAAQ;IACRC,UAAU;IACV,GAAGC,IAAAA;AACY,GAAC,GAAAP,IAAA,CAAA;AAChB,EAAA,MAAMQ,IAAI,GAAGnB,YAAY,CAACY,OAAO,CAAC,CAAA;AAElC,EAAA,oBACEQ,eAAA,CAAA,KAAA,EAAA;AACEL,IAAAA,SAAS,EAAEM,EAAE,CAACC,iBAAM,CAACC,GAAG,EAAED,iBAAM,CAACV,OAAO,CAAC,EAAEG,SAAS,CAAE;IACtD,aAAaE,EAAAA,UAAU,EAAEO,IAAK;AAAA,IAAA,GAC1BN,IAAI;IAAAF,QAAA,EAAA,CAEPH,IAAI,gBACHY,cAAA,CAAA,MAAA,EAAA;MACEV,SAAS,EAAEO,iBAAM,CAACT,IAAK;AACvB,MAAA,aAAA,EAAY,MAAM;MAClB,aAAaI,EAAAA,UAAU,EAAEJ,IAAK;AAAAG,MAAAA,QAAA,eAE9BS,cAAA,CAACN,IAAI,EAAE,EAAA,CAAA;AAAC,KACJ,CAAC,GACL,IAAI,eACRC,eAAA,CAAA,KAAA,EAAA;MAAKL,SAAS,EAAEO,iBAAM,CAACI,IAAK;AAAAV,MAAAA,QAAA,EACzBF,CAAAA,QAAQ,IAAI,IAAI,gBACfW,cAAA,CAAA,KAAA,EAAA;QAAKV,SAAS,EAAEO,iBAAM,CAACR,QAAS;QAAC,aAAaG,EAAAA,UAAU,EAAEH,QAAS;AAAAE,QAAAA,QAAA,EAChEF,QAAAA;AAAQ,OACN,CAAC,GACJ,IAAI,eACRW,cAAA,CAAA,KAAA,EAAA;QACEV,SAAS,EAAEO,iBAAM,CAACK,WAAY;QAC9B,aAAaV,EAAAA,UAAU,EAAEU,WAAY;AAAAX,QAAAA,QAAA,EAEpCA,QAAAA;AAAQ,OACN,CAAC,CAAA;AAAA,KACH,CAAC,CAAA;AAAA,GACH,CAAC,CAAA;AAEV;;;;"}
+{"version":3,"file":"MessageBox.cjs","sources":["../../../src/message-box/MessageBox.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\n\nimport { IconCheck, IconInfo, IconShield, IconWarning } from '../icons'\nimport cn from 'classnames'\n\nimport styles from './MessageBox.module.css'\n\nexport type MessageBoxVariant =\n  | 'default'\n  | 'info'\n  | 'warning'\n  | 'error'\n  | 'success'\n\nconst variantIcons = {\n  default: IconInfo,\n  info: IconShield,\n  warning: IconWarning,\n  error: IconWarning,\n  success: IconCheck,\n}\n\nexport type MessageBoxDataTestId = {\n  root?: string\n  icon?: string\n  headline?: string\n  description?: string\n}\n\nexport type MessageBoxProps = HTMLAttributes<HTMLDivElement> & {\n  /** `default` neutral, `info` blue, `warning` orange, `error` red, `success` green. */\n  variant?: MessageBoxVariant\n  /** Toggles the leading glyph, which is picked from the variant. */\n  icon?: boolean\n  headline?: ReactNode\n  dataTestId?: MessageBoxDataTestId\n}\n\n/** Inline note in a form or card, e.g. to explain a delay, a fee or a risk. */\nexport const MessageBox = ({\n  variant = 'default',\n  icon = true,\n  headline,\n  className,\n  children,\n  dataTestId,\n  ...rest\n}: MessageBoxProps) => {\n  const Icon = variantIcons[variant]\n\n  return (\n    <div\n      className={cn(styles.box, styles[variant], className)}\n      data-testid={dataTestId?.root}\n      {...rest}\n    >\n      {icon ? (\n        <span\n          className={styles.icon}\n          aria-hidden='true'\n          data-testid={dataTestId?.icon}\n        >\n          <Icon />\n        </span>\n      ) : null}\n      <div className={styles.text}>\n        {headline != null ? (\n          <div className={styles.headline} data-testid={dataTestId?.headline}>\n            {headline}\n          </div>\n        ) : null}\n        <div\n          className={styles.description}\n          data-testid={dataTestId?.description}\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"names":["variantIcons","default","IconInfo","info","IconShield","warning","IconWarning","error","success","IconCheck","MessageBox","_ref","variant","icon","headline","className","children","dataTestId","rest","Icon","_jsxs","cn","styles","box","root","_jsx","text","description"],"mappings":";;;;;;;;;;;;AAcA,MAAMA,YAAY,GAAG;AACnBC,EAAAA,OAAO,EAAEC,iBAAQ;AACjBC,EAAAA,IAAI,EAAEC,qBAAU;AAChBC,EAAAA,OAAO,EAAEC,uBAAW;AACpBC,EAAAA,KAAK,EAAED,uBAAW;AAClBE,EAAAA,OAAO,EAAEC,mBAAAA;AACX,CAAC,CAAA;AAkBD;AACaC,MAAAA,UAAU,GAAGC,IAAA,IAQH;EAAA,IARI;AACzBC,IAAAA,OAAO,GAAG,SAAS;AACnBC,IAAAA,IAAI,GAAG,IAAI;IACXC,QAAQ;IACRC,SAAS;IACTC,QAAQ;IACRC,UAAU;IACV,GAAGC,IAAAA;AACY,GAAC,GAAAP,IAAA,CAAA;AAChB,EAAA,MAAMQ,IAAI,GAAGnB,YAAY,CAACY,OAAO,CAAC,CAAA;AAElC,EAAA,oBACEQ,eAAA,CAAA,KAAA,EAAA;AACEL,IAAAA,SAAS,EAAEM,EAAE,CAACC,iBAAM,CAACC,GAAG,EAAED,iBAAM,CAACV,OAAO,CAAC,EAAEG,SAAS,CAAE;IACtD,aAAaE,EAAAA,UAAU,EAAEO,IAAK;AAAA,IAAA,GAC1BN,IAAI;IAAAF,QAAA,EAAA,CAEPH,IAAI,gBACHY,cAAA,CAAA,MAAA,EAAA;MACEV,SAAS,EAAEO,iBAAM,CAACT,IAAK;AACvB,MAAA,aAAA,EAAY,MAAM;MAClB,aAAaI,EAAAA,UAAU,EAAEJ,IAAK;AAAAG,MAAAA,QAAA,eAE9BS,cAAA,CAACN,IAAI,EAAE,EAAA,CAAA;AAAC,KACJ,CAAC,GACL,IAAI,eACRC,eAAA,CAAA,KAAA,EAAA;MAAKL,SAAS,EAAEO,iBAAM,CAACI,IAAK;AAAAV,MAAAA,QAAA,EACzBF,CAAAA,QAAQ,IAAI,IAAI,gBACfW,cAAA,CAAA,KAAA,EAAA;QAAKV,SAAS,EAAEO,iBAAM,CAACR,QAAS;QAAC,aAAaG,EAAAA,UAAU,EAAEH,QAAS;AAAAE,QAAAA,QAAA,EAChEF,QAAAA;AAAQ,OACN,CAAC,GACJ,IAAI,eACRW,cAAA,CAAA,KAAA,EAAA;QACEV,SAAS,EAAEO,iBAAM,CAACK,WAAY;QAC9B,aAAaV,EAAAA,UAAU,EAAEU,WAAY;AAAAX,QAAAA,QAAA,EAEpCA,QAAAA;AAAQ,OACN,CAAC,CAAA;AAAA,KACH,CAAC,CAAA;AAAA,GACH,CAAC,CAAA;AAEV;;;;"}

package/dist/cjs/modal/Modal.cjs

@@ -8,8 +8,10 @@ const Modal_module = require('./Modal.module.css.cjs');
 const jsxRuntime = require('react/jsx-runtime');
 const Portal = require('../hooks/Portal.cjs');
 const useBodyScrollLock = require('../hooks/useBodyScrollLock.cjs');
+const useHideOthers = require('../hooks/useHideOthers.cjs');
 const useFocusTrap = require('../hooks/useFocusTrap.cjs');
 const useEscape = require('../hooks/useEscape.cjs');
+const useOutsideClick = require('../hooks/useOutsideClick.cjs');
 const CloseButton = require('../icon-button/CloseButton.cjs');
 
 const ModalDialog = /*#__PURE__*/react.forwardRef((_ref, ref) => {
@@ -18,46 +20,91 @@ const ModalDialog = /*#__PURE__*/react.forwardRef((_ref, ref) => {
     subtitle,
     onClose,
     withOverlay = false,
+    inertOthers = false,
     bodyFill = false,
     lockScroll = true,
     closeOnEscape = true,
     closeOnOverlayClick = true,
+    initialFocus,
     children,
     className,
     dataTestId,
     ...rest
   } = _ref;
   const titleId = react.useId();
+  const subtitleId = react.useId();
   const [cardEl, setCardEl] = react.useState(null);
-  const backdropMouseDown = react.useRef(false);
+  // Captured during render: a child's autoFocus is applied at commit, after this.
+  const [returnFocus] = react.useState(() => typeof document === 'undefined' ? null : document.activeElement);
+  const overlayRef = react.useRef(null);
+  const headerRef = react.useRef(null);
+  const pressedScrim = react.useRef(false);
   react.useImperativeHandle(ref, () => cardEl, [cardEl]);
-  useBodyScrollLock.useBodyScrollLock(withOverlay && lockScroll);
-  useFocusTrap.useFocusTrap(cardEl, withOverlay);
+  useBodyScrollLock.useBodyScrollLock({
+    enabled: withOverlay && lockScroll
+  });
+  // Before the trap: cleanups run in order, so inert lifts before focus returns to the opener.
+  useHideOthers.useHideOthers(cardEl, withOverlay && inertOthers);
+  useFocusTrap.useFocusTrap(cardEl, {
+    enabled: withOverlay,
+    initialFocus,
+    returnFocus
+  });
   // Stays registered with closeOnEscape={false} so Escape doesn't fall through to an underlying overlay.
-  useEscape.useEscape(withOverlay, () => {
+  useEscape.useEscape(() => {
     if (closeOnEscape) onClose?.();
+  }, {
+    enabled: withOverlay
   });
-  const handleOverlayMouseDown = event => {
-    backdropMouseDown.current = event.target === event.currentTarget;
+
+  // Sticky header on mobile: scroll-padding keeps focused fields from landing under it (WCAG 2.4.11).
+  react.useEffect(() => {
+    const overlay = overlayRef.current;
+    const header = headerRef.current;
+    if (!withOverlay || !overlay || !header) return;
+    if (typeof ResizeObserver === 'undefined') return;
+    const measure = () => overlay.style.setProperty('--local-header-height', `${header.offsetHeight + 8}px`);
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(header);
+    return () => observer.disconnect();
+  }, [withOverlay, cardEl]);
+
+  // Joins the outside-click stack even with closeOnOverlayClick={false}, so presses here never reach an overlay underneath.
+  // Decided at pointerdown: the handler only runs while this is the top layer.
+  useOutsideClick.useOutsideClick(cardEl, event => {
+    pressedScrim.current = !(event.button > 0) && event.target === overlayRef.current;
+  }, {
+    enabled: withOverlay
+  });
+  const handleCardPointerDown = event => {
+    pressedScrim.current = false;
+    rest.onPointerDown?.(event);
   };
   const handleOverlayClick = event => {
-    if (closeOnOverlayClick && backdropMouseDown.current && event.target === event.currentTarget) {
+    if (closeOnOverlayClick && pressedScrim.current && event.target === event.currentTarget) {
       onClose?.();
     }
+    pressedScrim.current = false;
   };
   const card = /*#__PURE__*/jsxRuntime.jsxs("div", {
     role: "dialog",
     "aria-modal": withOverlay || undefined,
     "aria-labelledby": title ? titleId : undefined,
+    "aria-describedby": subtitle != null ? subtitleId : undefined,
     "data-testid": dataTestId?.root,
     ...rest,
+    onPointerDown: handleCardPointerDown,
     ref: setCardEl,
     className: cn(Modal_module.card, bodyFill && Modal_module.cardBodyFill, className),
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      ref: headerRef,
       className: Modal_module.headerGroup,
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
         className: Modal_module.header,
         children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+          role: "heading",
+          "aria-level": 2,
           id: titleId,
           className: cn(Modal_module.title, !title && Modal_module.titleHidden),
           "data-testid": dataTestId?.title,
@@ -69,6 +116,7 @@ const ModalDialog = /*#__PURE__*/react.forwardRef((_ref, ref) => {
           }
         }) : null]
       }), subtitle != null ? /*#__PURE__*/jsxRuntime.jsx("p", {
+        id: subtitleId,
         className: Modal_module.subtitle,
         "data-testid": dataTestId?.subtitle,
         children: subtitle
@@ -85,8 +133,8 @@ const ModalDialog = /*#__PURE__*/react.forwardRef((_ref, ref) => {
     // Pointer-only: a focusable backdrop would add a tab stop before the dialog; keyboard closes via Escape.
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
     jsxRuntime.jsx("div", {
+      ref: overlayRef,
       className: Modal_module.overlay,
-      onMouseDown: handleOverlayMouseDown,
       onClick: handleOverlayClick,
       "data-testid": dataTestId?.overlay,
       children: card
@@ -96,7 +144,13 @@ const ModalDialog = /*#__PURE__*/react.forwardRef((_ref, ref) => {
 ModalDialog.displayName = 'ModalDialog';
 
 // Hooks live in ModalDialog so they run once the portal has mounted its content.
-const Modal = /*#__PURE__*/react.forwardRef((props, ref) => {
+/** Dialog card for supply, borrow and repay flows; with `withOverlay` it is portaled and closes on Escape and scrim click, traps focus and locks body scroll. `ModalCard` is the bare card. */
+const Modal = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
+  let {
+    open = true,
+    ...props
+  } = _ref2;
+  if (!open) return null;
   const dialog = /*#__PURE__*/jsxRuntime.jsx(ModalDialog, {
     ref: ref,
     ...props
@@ -106,6 +160,14 @@ const Modal = /*#__PURE__*/react.forwardRef((props, ref) => {
   }) : dialog;
 });
 Modal.displayName = 'Modal';
+/** The bare dialog card with no portal or overlay behavior; you own positioning. */
+const ModalCard = /*#__PURE__*/react.forwardRef((props, ref) => /*#__PURE__*/jsxRuntime.jsx(ModalDialog, {
+  ref: ref,
+  ...props,
+  withOverlay: false
+}));
+ModalCard.displayName = 'ModalCard';
 
 exports.Modal = Modal;
+exports.ModalCard = ModalCard;
 //# sourceMappingURL=Modal.cjs.map

package/dist/cjs/modal/Modal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.cjs","sources":["../../../src/modal/Modal.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useId,\n  useImperativeHandle,\n  useRef,\n  useState,\n  type ComponentPropsWithoutRef,\n  type MouseEvent,\n  type ReactNode,\n} from 'react'\n\nimport { Portal, useBodyScrollLock, useEscape, useFocusTrap } from '../hooks'\nimport { CloseButton } from '../icon-button'\nimport cn from 'classnames'\n\nimport styles from './Modal.module.css'\n\nexport type ModalDataTestId = {\n  root?: string\n  title?: string\n  subtitle?: string\n  closeButton?: string\n  body?: string\n  overlay?: string\n}\n\nexport type ModalProps = Omit<\n  ComponentPropsWithoutRef<'div'>,\n  'title' | 'children'\n> & {\n  title?: ReactNode\n  subtitle?: ReactNode\n  onClose?: () => void\n  /** Wraps the card in a portaled scrim; enables Escape, focus trap and scroll lock. */\n  withOverlay?: boolean\n  bodyFill?: boolean\n  /** Opt out of body scroll lock (overlay only). Default true. */\n  lockScroll?: boolean\n  /** Opt out of Escape-to-close (overlay only). Default true. */\n  closeOnEscape?: boolean\n  /** Opt out of closing on scrim click (overlay only). Default true. */\n  closeOnOverlayClick?: boolean\n  children: ReactNode\n  dataTestId?: ModalDataTestId\n}\n\nconst ModalDialog = forwardRef<HTMLDivElement, ModalProps>(\n  (\n    {\n      title,\n      subtitle,\n      onClose,\n      withOverlay = false,\n      bodyFill = false,\n      lockScroll = true,\n      closeOnEscape = true,\n      closeOnOverlayClick = true,\n      children,\n      className,\n      dataTestId,\n      ...rest\n    },\n    ref,\n  ) => {\n    const titleId = useId()\n    const [cardEl, setCardEl] = useState<HTMLDivElement | null>(null)\n    const backdropMouseDown = useRef(false)\n\n    useImperativeHandle(ref, () => cardEl as HTMLDivElement, [cardEl])\n    useBodyScrollLock(withOverlay && lockScroll)\n    useFocusTrap(cardEl, withOverlay)\n    // Stays registered with closeOnEscape={false} so Escape doesn't fall through to an underlying overlay.\n    useEscape(withOverlay, () => {\n      if (closeOnEscape) onClose?.()\n    })\n\n    const handleOverlayMouseDown = (event: MouseEvent<HTMLDivElement>) => {\n      backdropMouseDown.current = event.target === event.currentTarget\n    }\n\n    const handleOverlayClick = (event: MouseEvent<HTMLDivElement>) => {\n      if (\n        closeOnOverlayClick &&\n        backdropMouseDown.current &&\n        event.target === event.currentTarget\n      ) {\n        onClose?.()\n      }\n    }\n\n    const card = (\n      <div\n        role='dialog'\n        aria-modal={withOverlay || undefined}\n        aria-labelledby={title ? titleId : undefined}\n        data-testid={dataTestId?.root}\n        {...rest}\n        ref={setCardEl}\n        className={cn(styles.card, bodyFill && styles.cardBodyFill, className)}\n      >\n        <div className={styles.headerGroup}>\n          <div className={styles.header}>\n            <span\n              id={titleId}\n              className={cn(styles.title, !title && styles.titleHidden)}\n              data-testid={dataTestId?.title}\n            >\n              {title}\n            </span>\n            {onClose ? (\n              <CloseButton\n                onClick={onClose}\n                dataTestId={{ root: dataTestId?.closeButton }}\n              />\n            ) : null}\n          </div>\n          {subtitle != null ? (\n            <p className={styles.subtitle} data-testid={dataTestId?.subtitle}>\n              {subtitle}\n            </p>\n          ) : null}\n        </div>\n        <div className={styles.body} data-testid={dataTestId?.body}>\n          {children}\n        </div>\n      </div>\n    )\n\n    if (!withOverlay) return card\n\n    return (\n      // Pointer-only: a focusable backdrop would add a tab stop before the dialog; keyboard closes via Escape.\n      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions\n      <div\n        className={styles.overlay}\n        onMouseDown={handleOverlayMouseDown}\n        onClick={handleOverlayClick}\n        data-testid={dataTestId?.overlay}\n      >\n        {card}\n      </div>\n    )\n  },\n)\n\nModalDialog.displayName = 'ModalDialog'\n\n// Hooks live in ModalDialog so they run once the portal has mounted its content.\nexport const Modal = forwardRef<HTMLDivElement, ModalProps>((props, ref) => {\n  const dialog = <ModalDialog ref={ref} {...props} />\n  return props.withOverlay ? <Portal>{dialog}</Portal> : dialog\n})\n\nModal.displayName = 'Modal'\n"],"names":["ModalDialog","forwardRef","_ref","ref","title","subtitle","onClose","withOverlay","bodyFill","lockScroll","closeOnEscape","closeOnOverlayClick","children","className","dataTestId","rest","titleId","useId","cardEl","setCardEl","useState","backdropMouseDown","useRef","useImperativeHandle","useBodyScrollLock","useFocusTrap","useEscape","handleOverlayMouseDown","event","current","target","currentTarget","handleOverlayClick","card","_jsxs","role","undefined","root","cn","styles","cardBodyFill","headerGroup","header","_jsx","id","titleHidden","CloseButton","onClick","closeButton","body","overlay","onMouseDown","displayName","Modal","props","dialog","Portal"],"mappings":"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"}
+{"version":3,"file":"Modal.cjs","sources":["../../../src/modal/Modal.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useRef,\n  useState,\n  type ComponentPropsWithoutRef,\n  type MouseEvent,\n  type PointerEvent,\n  type ReactNode,\n  type RefObject,\n} from 'react'\n\nimport {\n  Portal,\n  useBodyScrollLock,\n  useEscape,\n  useFocusTrap,\n  useHideOthers,\n  useOutsideClick,\n} from '../hooks'\nimport { CloseButton } from '../icon-button'\nimport cn from 'classnames'\n\nimport styles from './Modal.module.css'\n\nexport type ModalDataTestId = {\n  root?: string\n  title?: string\n  subtitle?: string\n  closeButton?: string\n  body?: string\n  overlay?: string\n}\n\nexport type ModalProps = Omit<\n  ComponentPropsWithoutRef<'div'>,\n  'title' | 'children'\n> & {\n  title?: ReactNode\n  subtitle?: ReactNode\n  onClose?: () => void\n  /** Controlled visibility; omitted means open, so mounting still opens it. */\n  open?: boolean\n  /** Wraps the card in a portaled scrim; enables Escape, focus trap, scroll lock. */\n  withOverlay?: boolean\n  /** With `withOverlay`, makes every other body child inert (including the app root); body-level roots (toasts, live regions) stay live with `data-lido-overlay-keep`. */\n  inertOthers?: boolean\n  /** Stretches the body; only matters full-screen on mobile. */\n  bodyFill?: boolean\n  /** Opt out of body scroll lock (overlay only). Default true. */\n  lockScroll?: boolean\n  /** Opt out of Escape-to-close (overlay only). Default true. */\n  closeOnEscape?: boolean\n  /** Opt out of closing on scrim click (overlay only). Default true. */\n  closeOnOverlayClick?: boolean\n  /** Element focused on open; defaults to the first tabbable (Close when `onClose` is set). An `autoFocus` child also keeps focus. */\n  initialFocus?: RefObject<HTMLElement | null>\n  children: ReactNode\n  dataTestId?: ModalDataTestId\n}\n\nconst ModalDialog = forwardRef<HTMLDivElement, ModalProps>(\n  (\n    {\n      title,\n      subtitle,\n      onClose,\n      withOverlay = false,\n      inertOthers = false,\n      bodyFill = false,\n      lockScroll = true,\n      closeOnEscape = true,\n      closeOnOverlayClick = true,\n      initialFocus,\n      children,\n      className,\n      dataTestId,\n      ...rest\n    },\n    ref,\n  ) => {\n    const titleId = useId()\n    const subtitleId = useId()\n    const [cardEl, setCardEl] = useState<HTMLDivElement | null>(null)\n    // Captured during render: a child's autoFocus is applied at commit, after this.\n    const [returnFocus] = useState(() =>\n      typeof document === 'undefined'\n        ? null\n        : (document.activeElement as HTMLElement | null),\n    )\n    const overlayRef = useRef<HTMLDivElement>(null)\n    const headerRef = useRef<HTMLDivElement>(null)\n    const pressedScrim = useRef(false)\n\n    useImperativeHandle(ref, () => cardEl as HTMLDivElement, [cardEl])\n    useBodyScrollLock({ enabled: withOverlay && lockScroll })\n    // Before the trap: cleanups run in order, so inert lifts before focus returns to the opener.\n    useHideOthers(cardEl, withOverlay && inertOthers)\n    useFocusTrap(cardEl, { enabled: withOverlay, initialFocus, returnFocus })\n    // Stays registered with closeOnEscape={false} so Escape doesn't fall through to an underlying overlay.\n    useEscape(\n      () => {\n        if (closeOnEscape) onClose?.()\n      },\n      { enabled: withOverlay },\n    )\n\n    // Sticky header on mobile: scroll-padding keeps focused fields from landing under it (WCAG 2.4.11).\n    useEffect(() => {\n      const overlay = overlayRef.current\n      const header = headerRef.current\n      if (!withOverlay || !overlay || !header) return\n      if (typeof ResizeObserver === 'undefined') return\n      const measure = () =>\n        overlay.style.setProperty(\n          '--local-header-height',\n          `${header.offsetHeight + 8}px`,\n        )\n      measure()\n      const observer = new ResizeObserver(measure)\n      observer.observe(header)\n      return () => observer.disconnect()\n    }, [withOverlay, cardEl])\n\n    // Joins the outside-click stack even with closeOnOverlayClick={false}, so presses here never reach an overlay underneath.\n    // Decided at pointerdown: the handler only runs while this is the top layer.\n    useOutsideClick(\n      cardEl,\n      (event) => {\n        pressedScrim.current =\n          !(event.button > 0) && event.target === overlayRef.current\n      },\n      { enabled: withOverlay },\n    )\n\n    const handleCardPointerDown = (event: PointerEvent<HTMLDivElement>) => {\n      pressedScrim.current = false\n      rest.onPointerDown?.(event)\n    }\n\n    const handleOverlayClick = (event: MouseEvent<HTMLDivElement>) => {\n      if (\n        closeOnOverlayClick &&\n        pressedScrim.current &&\n        event.target === event.currentTarget\n      ) {\n        onClose?.()\n      }\n      pressedScrim.current = false\n    }\n\n    const card = (\n      <div\n        role='dialog'\n        aria-modal={withOverlay || undefined}\n        aria-labelledby={title ? titleId : undefined}\n        aria-describedby={subtitle != null ? subtitleId : undefined}\n        data-testid={dataTestId?.root}\n        {...rest}\n        onPointerDown={handleCardPointerDown}\n        ref={setCardEl}\n        className={cn(styles.card, bodyFill && styles.cardBodyFill, className)}\n      >\n        <div ref={headerRef} className={styles.headerGroup}>\n          <div className={styles.header}>\n            <span\n              role='heading'\n              aria-level={2}\n              id={titleId}\n              className={cn(styles.title, !title && styles.titleHidden)}\n              data-testid={dataTestId?.title}\n            >\n              {title}\n            </span>\n            {onClose ? (\n              <CloseButton\n                onClick={onClose}\n                dataTestId={{ root: dataTestId?.closeButton }}\n              />\n            ) : null}\n          </div>\n          {subtitle != null ? (\n            <p\n              id={subtitleId}\n              className={styles.subtitle}\n              data-testid={dataTestId?.subtitle}\n            >\n              {subtitle}\n            </p>\n          ) : null}\n        </div>\n        <div className={styles.body} data-testid={dataTestId?.body}>\n          {children}\n        </div>\n      </div>\n    )\n\n    if (!withOverlay) return card\n\n    return (\n      // Pointer-only: a focusable backdrop would add a tab stop before the dialog; keyboard closes via Escape.\n      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions\n      <div\n        ref={overlayRef}\n        className={styles.overlay}\n        onClick={handleOverlayClick}\n        data-testid={dataTestId?.overlay}\n      >\n        {card}\n      </div>\n    )\n  },\n)\n\nModalDialog.displayName = 'ModalDialog'\n\n// Hooks live in ModalDialog so they run once the portal has mounted its content.\n/** Dialog card for supply, borrow and repay flows; with `withOverlay` it is portaled and closes on Escape and scrim click, traps focus and locks body scroll. `ModalCard` is the bare card. */\nexport const Modal = forwardRef<HTMLDivElement, ModalProps>(\n  ({ open = true, ...props }, ref) => {\n    if (!open) return null\n    const dialog = <ModalDialog ref={ref} {...props} />\n    return props.withOverlay ? <Portal>{dialog}</Portal> : dialog\n  },\n)\n\nModal.displayName = 'Modal'\n\nexport type ModalCardProps = Omit<\n  ModalProps,\n  | 'open'\n  | 'withOverlay'\n  | 'inertOthers'\n  | 'lockScroll'\n  | 'closeOnEscape'\n  | 'closeOnOverlayClick'\n  | 'initialFocus'\n>\n\n/** The bare dialog card with no portal or overlay behavior; you own positioning. */\nexport const ModalCard = forwardRef<HTMLDivElement, ModalCardProps>(\n  (props, ref) => <ModalDialog ref={ref} {...props} withOverlay={false} />,\n)\n\nModalCard.displayName = 'ModalCard'\n"],"names":["ModalDialog","forwardRef","_ref","ref","title","subtitle","onClose","withOverlay","inertOthers","bodyFill","lockScroll","closeOnEscape","closeOnOverlayClick","initialFocus","children","className","dataTestId","rest","titleId","useId","subtitleId","cardEl","setCardEl","useState","returnFocus","document","activeElement","overlayRef","useRef","headerRef","pressedScrim","useImperativeHandle","useBodyScrollLock","enabled","useHideOthers","useFocusTrap","useEscape","useEffect","overlay","current","header","ResizeObserver","measure","style","setProperty","offsetHeight","observer","observe","disconnect","useOutsideClick","event","button","target","handleCardPointerDown","onPointerDown","handleOverlayClick","currentTarget","card","_jsxs","role","undefined","root","cn","styles","cardBodyFill","headerGroup","_jsx","id","titleHidden","CloseButton","onClick","closeButton","body","displayName","Modal","_ref2","open","props","dialog","Portal","ModalCard"],"mappings":"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"}

package/dist/cjs/nav-link/NavLink.cjs

@@ -9,6 +9,7 @@ const NavLink_module = require('./NavLink.module.css.cjs');
 const jsxRuntime = require('react/jsx-runtime');
 const IconLink = require('../icons/components/base/IconLink.cjs');
 
+/** Top-navigation link for a Header; pass `aria-current` for sections active on sub-routes (HeaderNav centers any truthy value). */
 const NavLink = /*#__PURE__*/react.forwardRef((_ref, ref) => {
   let {
     active = false,
@@ -16,24 +17,25 @@ const NavLink = /*#__PURE__*/react.forwardRef((_ref, ref) => {
     external = false,
     className,
     children,
-    target,
-    rel,
+    dataTestId,
     ...rest
   } = _ref;
   return /*#__PURE__*/jsxRuntime.jsxs(Anchor.Anchor, {
     ref: ref,
     className: cn(NavLink_module.link, active && NavLink_module.active, className),
     "aria-current": active ? 'page' : undefined,
-    target: target ?? (external ? '_blank' : undefined),
-    rel: rel ?? (external ? 'noopener noreferrer' : undefined),
+    external: external,
+    "data-testid": dataTestId?.root,
     ...rest,
     children: [icon != null ? /*#__PURE__*/jsxRuntime.jsx("span", {
       className: NavLink_module.icon,
       "aria-hidden": "true",
+      "data-testid": dataTestId?.icon,
       children: icon
     }) : null, children, external ? /*#__PURE__*/jsxRuntime.jsx("span", {
       className: NavLink_module.icon,
       "aria-hidden": "true",
+      "data-testid": dataTestId?.externalIcon,
       children: /*#__PURE__*/jsxRuntime.jsx(IconLink.IconLink, {})
     }) : null]
   });

package/dist/cjs/nav-link/NavLink.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NavLink.cjs","sources":["../../../src/nav-link/NavLink.tsx"],"sourcesContent":["import { forwardRef, type AnchorHTMLAttributes, type ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport { IconLink } from '../icons'\nimport { Anchor } from '../link-provider/Anchor'\nimport styles from './NavLink.module.css'\n\nexport type NavLinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {\n  active?: boolean\n  icon?: ReactNode\n  external?: boolean\n}\n\nexport const NavLink = forwardRef<HTMLAnchorElement, NavLinkProps>(\n  (\n    {\n      active = false,\n      icon,\n      external = false,\n      className,\n      children,\n      target,\n      rel,\n      ...rest\n    },\n    ref,\n  ) => (\n    <Anchor\n      ref={ref}\n      className={cn(styles.link, active && styles.active, className)}\n      aria-current={active ? 'page' : undefined}\n      target={target ?? (external ? '_blank' : undefined)}\n      rel={rel ?? (external ? 'noopener noreferrer' : undefined)}\n      {...rest}\n    >\n      {icon != null ? (\n        <span className={styles.icon} aria-hidden='true'>\n          {icon}\n        </span>\n      ) : null}\n      {children}\n      {external ? (\n        <span className={styles.icon} aria-hidden='true'>\n          <IconLink />\n        </span>\n      ) : null}\n    </Anchor>\n  ),\n)\n\nNavLink.displayName = 'NavLink'\n"],"names":["NavLink","forwardRef","_ref","ref","active","icon","external","className","children","target","rel","rest","_jsxs","Anchor","cn","styles","link","undefined","_jsx","IconLink","displayName"],"mappings":";;;;;;;;;;;AAcO,MAAMA,OAAO,gBAAGC,gBAAU,CAC/B,CAAAC,IAAA,EAWEC,GAAG,KAAA;EAAA,IAVH;AACEC,IAAAA,MAAM,GAAG,KAAK;IACdC,IAAI;AACJC,IAAAA,QAAQ,GAAG,KAAK;IAChBC,SAAS;IACTC,QAAQ;IACRC,MAAM;IACNC,GAAG;IACH,GAAGC,IAAAA;AACL,GAAC,GAAAT,IAAA,CAAA;EAAA,oBAGDU,eAAA,CAACC,aAAM,EAAA;AACLV,IAAAA,GAAG,EAAEA,GAAI;AACTI,IAAAA,SAAS,EAAEO,EAAE,CAACC,cAAM,CAACC,IAAI,EAAEZ,MAAM,IAAIW,cAAM,CAACX,MAAM,EAAEG,SAAS,CAAE;AAC/D,IAAA,cAAA,EAAcH,MAAM,GAAG,MAAM,GAAGa,SAAU;IAC1CR,MAAM,EAAEA,MAAM,KAAKH,QAAQ,GAAG,QAAQ,GAAGW,SAAS,CAAE;IACpDP,GAAG,EAAEA,GAAG,KAAKJ,QAAQ,GAAG,qBAAqB,GAAGW,SAAS,CAAE;AAAA,IAAA,GACvDN,IAAI;AAAAH,IAAAA,QAAA,EAEPH,CAAAA,IAAI,IAAI,IAAI,gBACXa,cAAA,CAAA,MAAA,EAAA;MAAMX,SAAS,EAAEQ,cAAM,CAACV,IAAK;AAAC,MAAA,aAAA,EAAY,MAAM;AAAAG,MAAAA,QAAA,EAC7CH,IAAAA;KACG,CAAC,GACL,IAAI,EACPG,QAAQ,EACRF,QAAQ,gBACPY,cAAA,CAAA,MAAA,EAAA;MAAMX,SAAS,EAAEQ,cAAM,CAACV,IAAK;AAAC,MAAA,aAAA,EAAY,MAAM;AAAAG,MAAAA,QAAA,eAC9CU,cAAA,CAACC,iBAAQ,EAAE,EAAA,CAAA;KACP,CAAC,GACL,IAAI,CAAA;AAAA,GACF,CAAC,CAAA;AAAA,CAEb,EAAC;AAEDnB,OAAO,CAACoB,WAAW,GAAG,SAAS;;;;"}
+{"version":3,"file":"NavLink.cjs","sources":["../../../src/nav-link/NavLink.tsx"],"sourcesContent":["import { forwardRef, type AnchorHTMLAttributes, type ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport { IconLink } from '../icons'\nimport { Anchor, type AnchorProps } from '../link-provider/Anchor'\nimport styles from './NavLink.module.css'\n\nexport type NavLinkDataTestId = {\n  root?: string\n  icon?: string\n  externalIcon?: string\n}\n\nexport type NavLinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {\n  /** Marks the current page: sets `aria-current=\"page\"` and the active style. */\n  active?: boolean\n  /** Leading icon. */\n  icon?: ReactNode\n  /** Opens in a new tab and appends the external-link arrow. */\n  external?: boolean\n  linkProps?: AnchorProps['linkProps']\n  dataTestId?: NavLinkDataTestId\n}\n\n/** Top-navigation link for a Header; pass `aria-current` for sections active on sub-routes (HeaderNav centers any truthy value). */\nexport const NavLink = forwardRef<HTMLAnchorElement, NavLinkProps>(\n  (\n    {\n      active = false,\n      icon,\n      external = false,\n      className,\n      children,\n      dataTestId,\n      ...rest\n    },\n    ref,\n  ) => (\n    <Anchor\n      ref={ref}\n      className={cn(styles.link, active && styles.active, className)}\n      aria-current={active ? 'page' : undefined}\n      external={external}\n      data-testid={dataTestId?.root}\n      {...rest}\n    >\n      {icon != null ? (\n        <span\n          className={styles.icon}\n          aria-hidden='true'\n          data-testid={dataTestId?.icon}\n        >\n          {icon}\n        </span>\n      ) : null}\n      {children}\n      {external ? (\n        <span\n          className={styles.icon}\n          aria-hidden='true'\n          data-testid={dataTestId?.externalIcon}\n        >\n          <IconLink />\n        </span>\n      ) : null}\n    </Anchor>\n  ),\n)\n\nNavLink.displayName = 'NavLink'\n"],"names":["NavLink","forwardRef","_ref","ref","active","icon","external","className","children","dataTestId","rest","_jsxs","Anchor","cn","styles","link","undefined","root","_jsx","externalIcon","IconLink","displayName"],"mappings":";;;;;;;;;;;AAyBA;AACO,MAAMA,OAAO,gBAAGC,gBAAU,CAC/B,CAAAC,IAAA,EAUEC,GAAG,KAAA;EAAA,IATH;AACEC,IAAAA,MAAM,GAAG,KAAK;IACdC,IAAI;AACJC,IAAAA,QAAQ,GAAG,KAAK;IAChBC,SAAS;IACTC,QAAQ;IACRC,UAAU;IACV,GAAGC,IAAAA;AACL,GAAC,GAAAR,IAAA,CAAA;EAAA,oBAGDS,eAAA,CAACC,aAAM,EAAA;AACLT,IAAAA,GAAG,EAAEA,GAAI;AACTI,IAAAA,SAAS,EAAEM,EAAE,CAACC,cAAM,CAACC,IAAI,EAAEX,MAAM,IAAIU,cAAM,CAACV,MAAM,EAAEG,SAAS,CAAE;AAC/D,IAAA,cAAA,EAAcH,MAAM,GAAG,MAAM,GAAGY,SAAU;AAC1CV,IAAAA,QAAQ,EAAEA,QAAS;IACnB,aAAaG,EAAAA,UAAU,EAAEQ,IAAK;AAAA,IAAA,GAC1BP,IAAI;AAAAF,IAAAA,QAAA,EAEPH,CAAAA,IAAI,IAAI,IAAI,gBACXa,cAAA,CAAA,MAAA,EAAA;MACEX,SAAS,EAAEO,cAAM,CAACT,IAAK;AACvB,MAAA,aAAA,EAAY,MAAM;MAClB,aAAaI,EAAAA,UAAU,EAAEJ,IAAK;AAAAG,MAAAA,QAAA,EAE7BH,IAAAA;KACG,CAAC,GACL,IAAI,EACPG,QAAQ,EACRF,QAAQ,gBACPY,cAAA,CAAA,MAAA,EAAA;MACEX,SAAS,EAAEO,cAAM,CAACT,IAAK;AACvB,MAAA,aAAA,EAAY,MAAM;MAClB,aAAaI,EAAAA,UAAU,EAAEU,YAAa;AAAAX,MAAAA,QAAA,eAEtCU,cAAA,CAACE,iBAAQ,EAAE,EAAA,CAAA;KACP,CAAC,GACL,IAAI,CAAA;AAAA,GACF,CAAC,CAAA;AAAA,CAEb,EAAC;AAEDpB,OAAO,CAACqB,WAAW,GAAG,SAAS;;;;"}

package/dist/cjs/notification/Notification.cjs

@@ -10,6 +10,9 @@ const jsxRuntime = require('react/jsx-runtime');
 const IconButton = require('../icon-button/IconButton.cjs');
 const IconCross = require('../icons/components/base/IconCross.cjs');
 
+const isEmpty = node => node == null || node === false || node === '';
+
+/** Dark toast that stays dark in both themes; `subheader` slots a `Tag`, `actions` takes small `Button`s, `onClose` adds a dismiss button. */
 const Notification = /*#__PURE__*/react.forwardRef((_ref, ref) => {
   let {
     title,
@@ -17,11 +20,12 @@ const Notification = /*#__PURE__*/react.forwardRef((_ref, ref) => {
     subheader,
     actions,
     onClose,
-    className,
     role = 'alert',
+    className,
     dataTestId,
     ...rest
   } = _ref;
+  const titleId = react.useId();
   return /*#__PURE__*/jsxRuntime.jsx(lidoSharedUi.ThemeProvider, {
     themeName: lidoSharedUi.ThemeName.dark,
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -31,27 +35,29 @@ const Notification = /*#__PURE__*/react.forwardRef((_ref, ref) => {
       "data-testid": dataTestId?.root,
       ...rest,
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: Notification_module.content,
-        children: [subheader != null ? /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: cn(Notification_module.content, onClose && Notification_module.closable),
+        children: [!isEmpty(subheader) ? /*#__PURE__*/jsxRuntime.jsx("div", {
           className: Notification_module.subheader,
           "data-testid": dataTestId?.subheader,
           children: subheader
         }) : null, /*#__PURE__*/jsxRuntime.jsx("p", {
-          className: cn(Notification_module.title, onClose && Notification_module.closable),
+          id: titleId,
+          className: Notification_module.title,
           "data-testid": dataTestId?.title,
           children: title
-        }), children != null ? /*#__PURE__*/jsxRuntime.jsx("div", {
+        }), !isEmpty(children) ? /*#__PURE__*/jsxRuntime.jsx("div", {
           className: Notification_module.body,
           "data-testid": dataTestId?.body,
           children: children
         }) : null]
-      }), actions != null ? /*#__PURE__*/jsxRuntime.jsx("div", {
+      }), !isEmpty(actions) ? /*#__PURE__*/jsxRuntime.jsx("div", {
         className: Notification_module.actions,
         "data-testid": dataTestId?.actions,
         children: actions
       }) : null, onClose ? /*#__PURE__*/jsxRuntime.jsx(IconButton.IconButton, {
         variant: "ghost",
         "aria-label": "Dismiss",
+        "aria-describedby": titleId,
         icon: /*#__PURE__*/jsxRuntime.jsx(IconCross.IconCross, {}),
         className: Notification_module.close,
         onClick: onClose,

package/dist/cjs/notification/Notification.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Notification.cjs","sources":["../../../src/notification/Notification.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type ComponentPropsWithoutRef,\n  type MouseEventHandler,\n  type ReactNode,\n} from 'react'\n\nimport { ThemeName, ThemeProvider } from '@lidofinance/lido-shared-ui'\nimport cn from 'classnames'\n\nimport { IconButton } from '../icon-button'\nimport { IconCross } from '../icons'\nimport styles from './Notification.module.css'\n\nexport type NotificationDataTestId = {\n  root?: string\n  title?: string\n  body?: string\n  actions?: string\n  subheader?: string\n  closeButton?: string\n}\n\nexport type NotificationProps = Omit<\n  ComponentPropsWithoutRef<'div'>,\n  'title'\n> & {\n  title: ReactNode\n  children?: ReactNode\n  /** Slot above the title, usually a `Tag`. */\n  subheader?: ReactNode\n  actions?: ReactNode\n  /** Renders a dismiss button when set. */\n  onClose?: MouseEventHandler<HTMLButtonElement>\n  dataTestId?: NotificationDataTestId\n}\n\nexport const Notification = forwardRef<HTMLDivElement, NotificationProps>(\n  (\n    {\n      title,\n      children,\n      subheader,\n      actions,\n      onClose,\n      className,\n      role = 'alert',\n      dataTestId,\n      ...rest\n    },\n    ref,\n  ) => (\n    <ThemeProvider themeName={ThemeName.dark}>\n      <div\n        ref={ref}\n        role={role}\n        className={cn(styles.notification, className)}\n        data-testid={dataTestId?.root}\n        {...rest}\n      >\n        <div className={styles.content}>\n          {subheader != null ? (\n            <div\n              className={styles.subheader}\n              data-testid={dataTestId?.subheader}\n            >\n              {subheader}\n            </div>\n          ) : null}\n          <p\n            className={cn(styles.title, onClose && styles.closable)}\n            data-testid={dataTestId?.title}\n          >\n            {title}\n          </p>\n          {children != null ? (\n            <div className={styles.body} data-testid={dataTestId?.body}>\n              {children}\n            </div>\n          ) : null}\n        </div>\n        {actions != null ? (\n          <div className={styles.actions} data-testid={dataTestId?.actions}>\n            {actions}\n          </div>\n        ) : null}\n        {onClose ? (\n          <IconButton\n            variant='ghost'\n            aria-label='Dismiss'\n            icon={<IconCross />}\n            className={styles.close}\n            onClick={onClose}\n            dataTestId={{ root: dataTestId?.closeButton }}\n          />\n        ) : null}\n      </div>\n    </ThemeProvider>\n  ),\n)\n\nNotification.displayName = 'Notification'\n"],"names":["Notification","forwardRef","_ref","ref","title","children","subheader","actions","onClose","className","role","dataTestId","rest","_jsx","ThemeProvider","themeName","ThemeName","dark","_jsxs","cn","styles","notification","root","content","closable","body","IconButton","variant","icon","IconCross","close","onClick","closeButton","displayName"],"mappings":";;;;;;;;;;;;AAqCO,MAAMA,YAAY,gBAAGC,gBAAU,CACpC,CAAAC,IAAA,EAYEC,GAAG,KAAA;EAAA,IAXH;IACEC,KAAK;IACLC,QAAQ;IACRC,SAAS;IACTC,OAAO;IACPC,OAAO;IACPC,SAAS;AACTC,IAAAA,IAAI,GAAG,OAAO;IACdC,UAAU;IACV,GAAGC,IAAAA;AACL,GAAC,GAAAV,IAAA,CAAA;EAAA,oBAGDW,cAAA,CAACC,0BAAa,EAAA;IAACC,SAAS,EAAEC,sBAAS,CAACC,IAAK;AAAAZ,IAAAA,QAAA,eACvCa,eAAA,CAAA,KAAA,EAAA;AACEf,MAAAA,GAAG,EAAEA,GAAI;AACTO,MAAAA,IAAI,EAAEA,IAAK;MACXD,SAAS,EAAEU,EAAE,CAACC,mBAAM,CAACC,YAAY,EAAEZ,SAAS,CAAE;MAC9C,aAAaE,EAAAA,UAAU,EAAEW,IAAK;AAAA,MAAA,GAC1BV,IAAI;AAAAP,MAAAA,QAAA,gBAERa,eAAA,CAAA,KAAA,EAAA;QAAKT,SAAS,EAAEW,mBAAM,CAACG,OAAQ;AAAAlB,QAAAA,QAAA,EAC5BC,CAAAA,SAAS,IAAI,IAAI,gBAChBO,cAAA,CAAA,KAAA,EAAA;UACEJ,SAAS,EAAEW,mBAAM,CAACd,SAAU;UAC5B,aAAaK,EAAAA,UAAU,EAAEL,SAAU;AAAAD,UAAAA,QAAA,EAElCC,SAAAA;AAAS,SACP,CAAC,GACJ,IAAI,eACRO,cAAA,CAAA,GAAA,EAAA;AACEJ,UAAAA,SAAS,EAAEU,EAAE,CAACC,mBAAM,CAAChB,KAAK,EAAEI,OAAO,IAAIY,mBAAM,CAACI,QAAQ,CAAE;UACxD,aAAab,EAAAA,UAAU,EAAEP,KAAM;AAAAC,UAAAA,QAAA,EAE9BD,KAAAA;AAAK,SACL,CAAC,EACHC,QAAQ,IAAI,IAAI,gBACfQ,cAAA,CAAA,KAAA,EAAA;UAAKJ,SAAS,EAAEW,mBAAM,CAACK,IAAK;UAAC,aAAad,EAAAA,UAAU,EAAEc,IAAK;AAAApB,UAAAA,QAAA,EACxDA,QAAAA;SACE,CAAC,GACJ,IAAI,CAAA;AAAA,OACL,CAAC,EACLE,OAAO,IAAI,IAAI,gBACdM,cAAA,CAAA,KAAA,EAAA;QAAKJ,SAAS,EAAEW,mBAAM,CAACb,OAAQ;QAAC,aAAaI,EAAAA,UAAU,EAAEJ,OAAQ;AAAAF,QAAAA,QAAA,EAC9DE,OAAAA;OACE,CAAC,GACJ,IAAI,EACPC,OAAO,gBACNK,cAAA,CAACa,qBAAU,EAAA;AACTC,QAAAA,OAAO,EAAC,OAAO;AACf,QAAA,YAAA,EAAW,SAAS;AACpBC,QAAAA,IAAI,eAAEf,cAAA,CAACgB,mBAAS,IAAE,CAAE;QACpBpB,SAAS,EAAEW,mBAAM,CAACU,KAAM;AACxBC,QAAAA,OAAO,EAAEvB,OAAQ;AACjBG,QAAAA,UAAU,EAAE;UAAEW,IAAI,EAAEX,UAAU,EAAEqB,WAAAA;AAAY,SAAA;OAC7C,CAAC,GACA,IAAI,CAAA;KACL,CAAA;AAAC,GACO,CAAC,CAAA;AAAA,CAEpB,EAAC;AAEDhC,YAAY,CAACiC,WAAW,GAAG,cAAc;;;;"}
+{"version":3,"file":"Notification.cjs","sources":["../../../src/notification/Notification.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useId,\n  type ComponentPropsWithoutRef,\n  type MouseEventHandler,\n  type ReactNode,\n} from 'react'\n\nimport { ThemeName, ThemeProvider } from '@lidofinance/lido-shared-ui'\nimport cn from 'classnames'\n\nimport { IconButton } from '../icon-button'\nimport { IconCross } from '../icons'\nimport styles from './Notification.module.css'\n\nexport type NotificationDataTestId = {\n  root?: string\n  title?: string\n  body?: string\n  actions?: string\n  subheader?: string\n  closeButton?: string\n}\n\nexport type NotificationProps = Omit<\n  ComponentPropsWithoutRef<'div'>,\n  'title'\n> & {\n  title: ReactNode\n  children?: ReactNode\n  /** Slot above the title, usually a `Tag`. */\n  subheader?: ReactNode\n  actions?: ReactNode\n  /** Renders a dismiss button when set. A plain `() => void` handler is fine; the click event is rarely needed. */\n  onClose?: MouseEventHandler<HTMLButtonElement>\n  dataTestId?: NotificationDataTestId\n  /** Defaults to `alert`, which is assertive (`undefined` also gives `alert`). Pass `none` inside a toast container that announces for you. */\n  role?: ComponentPropsWithoutRef<'div'>['role']\n}\n\nconst isEmpty = (node: ReactNode) =>\n  node == null || node === false || node === ''\n\n/** Dark toast that stays dark in both themes; `subheader` slots a `Tag`, `actions` takes small `Button`s, `onClose` adds a dismiss button. */\nexport const Notification = forwardRef<HTMLDivElement, NotificationProps>(\n  (\n    {\n      title,\n      children,\n      subheader,\n      actions,\n      onClose,\n      role = 'alert',\n      className,\n      dataTestId,\n      ...rest\n    },\n    ref,\n  ) => {\n    const titleId = useId()\n\n    return (\n      <ThemeProvider themeName={ThemeName.dark}>\n        <div\n          ref={ref}\n          role={role}\n          className={cn(styles.notification, className)}\n          data-testid={dataTestId?.root}\n          {...rest}\n        >\n          <div className={cn(styles.content, onClose && styles.closable)}>\n            {!isEmpty(subheader) ? (\n              <div\n                className={styles.subheader}\n                data-testid={dataTestId?.subheader}\n              >\n                {subheader}\n              </div>\n            ) : null}\n            <p\n              id={titleId}\n              className={styles.title}\n              data-testid={dataTestId?.title}\n            >\n              {title}\n            </p>\n            {!isEmpty(children) ? (\n              <div className={styles.body} data-testid={dataTestId?.body}>\n                {children}\n              </div>\n            ) : null}\n          </div>\n          {!isEmpty(actions) ? (\n            <div className={styles.actions} data-testid={dataTestId?.actions}>\n              {actions}\n            </div>\n          ) : null}\n          {onClose ? (\n            <IconButton\n              variant='ghost'\n              aria-label='Dismiss'\n              aria-describedby={titleId}\n              icon={<IconCross />}\n              className={styles.close}\n              onClick={onClose}\n              dataTestId={{ root: dataTestId?.closeButton }}\n            />\n          ) : null}\n        </div>\n      </ThemeProvider>\n    )\n  },\n)\n\nNotification.displayName = 'Notification'\n"],"names":["isEmpty","node","Notification","forwardRef","_ref","ref","title","children","subheader","actions","onClose","role","className","dataTestId","rest","titleId","useId","_jsx","ThemeProvider","themeName","ThemeName","dark","_jsxs","cn","styles","notification","root","content","closable","id","body","IconButton","variant","icon","IconCross","close","onClick","closeButton","displayName"],"mappings":";;;;;;;;;;;;AAwCA,MAAMA,OAAO,GAAIC,IAAe,IAC9BA,IAAI,IAAI,IAAI,IAAIA,IAAI,KAAK,KAAK,IAAIA,IAAI,KAAK,EAAE,CAAA;;AAE/C;AACO,MAAMC,YAAY,gBAAGC,gBAAU,CACpC,CAAAC,IAAA,EAYEC,GAAG,KACA;EAAA,IAZH;IACEC,KAAK;IACLC,QAAQ;IACRC,SAAS;IACTC,OAAO;IACPC,OAAO;AACPC,IAAAA,IAAI,GAAG,OAAO;IACdC,SAAS;IACTC,UAAU;IACV,GAAGC,IAAAA;AACL,GAAC,GAAAV,IAAA,CAAA;AAGD,EAAA,MAAMW,OAAO,GAAGC,WAAK,EAAE,CAAA;EAEvB,oBACEC,cAAA,CAACC,0BAAa,EAAA;IAACC,SAAS,EAAEC,sBAAS,CAACC,IAAK;AAAAd,IAAAA,QAAA,eACvCe,eAAA,CAAA,KAAA,EAAA;AACEjB,MAAAA,GAAG,EAAEA,GAAI;AACTM,MAAAA,IAAI,EAAEA,IAAK;MACXC,SAAS,EAAEW,EAAE,CAACC,mBAAM,CAACC,YAAY,EAAEb,SAAS,CAAE;MAC9C,aAAaC,EAAAA,UAAU,EAAEa,IAAK;AAAA,MAAA,GAC1BZ,IAAI;AAAAP,MAAAA,QAAA,gBAERe,eAAA,CAAA,KAAA,EAAA;AAAKV,QAAAA,SAAS,EAAEW,EAAE,CAACC,mBAAM,CAACG,OAAO,EAAEjB,OAAO,IAAIc,mBAAM,CAACI,QAAQ,CAAE;AAAArB,QAAAA,QAAA,GAC5D,CAACP,OAAO,CAACQ,SAAS,CAAC,gBAClBS,cAAA,CAAA,KAAA,EAAA;UACEL,SAAS,EAAEY,mBAAM,CAAChB,SAAU;UAC5B,aAAaK,EAAAA,UAAU,EAAEL,SAAU;AAAAD,UAAAA,QAAA,EAElCC,SAAAA;AAAS,SACP,CAAC,GACJ,IAAI,eACRS,cAAA,CAAA,GAAA,EAAA;AACEY,UAAAA,EAAE,EAAEd,OAAQ;UACZH,SAAS,EAAEY,mBAAM,CAAClB,KAAM;UACxB,aAAaO,EAAAA,UAAU,EAAEP,KAAM;AAAAC,UAAAA,QAAA,EAE9BD,KAAAA;SACA,CAAC,EACH,CAACN,OAAO,CAACO,QAAQ,CAAC,gBACjBU,cAAA,CAAA,KAAA,EAAA;UAAKL,SAAS,EAAEY,mBAAM,CAACM,IAAK;UAAC,aAAajB,EAAAA,UAAU,EAAEiB,IAAK;AAAAvB,UAAAA,QAAA,EACxDA,QAAAA;SACE,CAAC,GACJ,IAAI,CAAA;OACL,CAAC,EACL,CAACP,OAAO,CAACS,OAAO,CAAC,gBAChBQ,cAAA,CAAA,KAAA,EAAA;QAAKL,SAAS,EAAEY,mBAAM,CAACf,OAAQ;QAAC,aAAaI,EAAAA,UAAU,EAAEJ,OAAQ;AAAAF,QAAAA,QAAA,EAC9DE,OAAAA;OACE,CAAC,GACJ,IAAI,EACPC,OAAO,gBACNO,cAAA,CAACc,qBAAU,EAAA;AACTC,QAAAA,OAAO,EAAC,OAAO;AACf,QAAA,YAAA,EAAW,SAAS;AACpB,QAAA,kBAAA,EAAkBjB,OAAQ;AAC1BkB,QAAAA,IAAI,eAAEhB,cAAA,CAACiB,mBAAS,IAAE,CAAE;QACpBtB,SAAS,EAAEY,mBAAM,CAACW,KAAM;AACxBC,QAAAA,OAAO,EAAE1B,OAAQ;AACjBG,QAAAA,UAAU,EAAE;UAAEa,IAAI,EAAEb,UAAU,EAAEwB,WAAAA;AAAY,SAAA;OAC7C,CAAC,GACA,IAAI,CAAA;KACL,CAAA;AAAC,GACO,CAAC,CAAA;AAEpB,CACF,EAAC;AAEDnC,YAAY,CAACoC,WAAW,GAAG,cAAc;;;;"}

package/dist/cjs/page-layout/Layout.cjs

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const react = require('react');
+const cn = require('classnames');
+const Layout_module = require('./Layout.module.css.cjs');
+const jsxRuntime = require('react/jsx-runtime');
+
+/** Page root column: banners, SidebarLayout or Header/Main/Footer stack inside; fills the viewport. */
+const Layout = /*#__PURE__*/react.forwardRef((_ref, ref) => {
+  let {
+    className,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    ref: ref,
+    className: cn(Layout_module.root, className),
+    ...rest
+  });
+});
+Layout.displayName = 'Layout';
+
+exports.Layout = Layout;
+//# sourceMappingURL=Layout.cjs.map

package/dist/cjs/page-layout/Layout.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Layout.cjs","sources":["../../../src/page-layout/Layout.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './Layout.module.css'\n\nexport type LayoutProps = HTMLAttributes<HTMLDivElement>\n\n/** Page root column: banners, SidebarLayout or Header/Main/Footer stack inside; fills the viewport. */\nexport const Layout = forwardRef<HTMLDivElement, LayoutProps>(\n  ({ className, ...rest }, ref) => (\n    <div ref={ref} className={cn(styles.root, className)} {...rest} />\n  ),\n)\n\nLayout.displayName = 'Layout'\n"],"names":["Layout","forwardRef","_ref","ref","className","rest","_jsx","cn","styles","root","displayName"],"mappings":";;;;;;;;;AAQA;AACO,MAAMA,MAAM,gBAAGC,gBAAU,CAC9B,CAAAC,IAAA,EAAyBC,GAAG,KAAA;EAAA,IAA3B;IAAEC,SAAS;IAAE,GAAGC,IAAAA;AAAK,GAAC,GAAAH,IAAA,CAAA;AAAA,EAAA,oBACrBI,cAAA,CAAA,KAAA,EAAA;AAAKH,IAAAA,GAAG,EAAEA,GAAI;IAACC,SAAS,EAAEG,EAAE,CAACC,aAAM,CAACC,IAAI,EAAEL,SAAS,CAAE;IAAA,GAAKC,IAAAA;AAAI,GAAG,CAAC,CAAA;AAAA,CAEtE,EAAC;AAEDL,MAAM,CAACU,WAAW,GAAG,QAAQ;;;;"}

package/dist/cjs/page-layout/Layout.module.css.cjs

@@ -0,0 +1,6 @@
+'use strict';
+
+const styles = {"root":"Layout-module_root__QCQu-"};
+
+module.exports = styles;
+//# sourceMappingURL=Layout.module.css.cjs.map