@lidofinance/lido-app-ui 1.9.0 → 1.10.0

package/dist/cjs/logo/Logo.cjs

@@ -0,0 +1,84 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const react = require('react');
+const cn = require('classnames');
+const Logo_module = require('./Logo.module.css.cjs');
+const jsxRuntime = require('react/jsx-runtime');
+const ActionElement = require('../utils/ActionElement.cjs');
+
+const DROPLET = /*#__PURE__*/jsxRuntime.jsxs("svg", {
+  className: Logo_module.droplet,
+  viewBox: "38 26 23 32",
+  fill: "currentColor",
+  "aria-hidden": "true",
+  children: [/*#__PURE__*/jsxRuntime.jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    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"
+  }), /*#__PURE__*/jsxRuntime.jsx("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"
+  })]
+});
+const WORDMARK = /*#__PURE__*/jsxRuntime.jsx("span", {
+  className: Logo_module.wordmark,
+  children: /*#__PURE__*/jsxRuntime.jsx("svg", {
+    className: Logo_module.wordmarkSvg,
+    viewBox: "61 26 101 32",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    children: /*#__PURE__*/jsxRuntime.jsx("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"
+    })
+  })
+});
+const Logo = /*#__PURE__*/react.forwardRef((_ref, ref) => {
+  let {
+    variant = 'full',
+    product,
+    href,
+    onClick,
+    className,
+    ...rest
+  } = _ref;
+  const label = product ? `Lido ${product}` : 'Lido';
+  const content = /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsxs("span", {
+      className: Logo_module.mark,
+      children: [DROPLET, variant === 'compact' ? null : WORDMARK]
+    }), product ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+        className: Logo_module.divider,
+        "aria-hidden": "true"
+      }), /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: Logo_module.product,
+        children: product
+      })]
+    }) : null]
+  });
+  const classes = cn(Logo_module.root, Logo_module[variant], className);
+  if (href || onClick) {
+    return /*#__PURE__*/jsxRuntime.jsx(ActionElement.ActionElement, {
+      ref: ref,
+      className: cn(classes, Logo_module.interactive),
+      "aria-label": label,
+      href,
+      onClick,
+      ...rest,
+      children: content
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsx("span", {
+    ref: ref,
+    role: "img",
+    "aria-label": label,
+    className: classes,
+    ...rest,
+    children: content
+  });
+});
+Logo.displayName = 'Logo';
+
+exports.Logo = Logo;
+//# sourceMappingURL=Logo.cjs.map

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

@@ -0,0 +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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"}

package/dist/cjs/logo/Logo.module.css.cjs

@@ -0,0 +1,6 @@
+'use strict';
+
+const styles = {"root":"Logo-module_root__rytd6","interactive":"Logo-module_interactive__yDP-7","mark":"Logo-module_mark__MDd7j","droplet":"Logo-module_droplet__b6fio","wordmark":"Logo-module_wordmark__f-FR3","wordmarkSvg":"Logo-module_wordmarkSvg__0kNdt","auto":"Logo-module_auto__K5hux","divider":"Logo-module_divider__1GloM","product":"Logo-module_product__ppv8R"};
+
+module.exports = styles;
+//# sourceMappingURL=Logo.module.css.cjs.map

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

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

package/dist/cjs/modal/Modal.cjs

@@ -6,58 +6,54 @@ const react = require('react');
 const cn = require('classnames');
 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 useFocusTrap = require('../hooks/useFocusTrap.cjs');
+const useEscape = require('../hooks/useEscape.cjs');
 const IconButton = require('../icon-button/IconButton.cjs');
 const IconCross = require('../icons/components/base/IconCross.cjs');
 
-let scrollLockCount = 0;
-let restoreOverflow = '';
-const lockBodyScroll = () => {
-  if (scrollLockCount === 0) {
-    restoreOverflow = document.body.style.overflow;
-    document.body.style.overflow = 'hidden';
-  }
-  scrollLockCount += 1;
-};
-const unlockBodyScroll = () => {
-  scrollLockCount = Math.max(0, scrollLockCount - 1);
-  if (scrollLockCount === 0) {
-    document.body.style.overflow = restoreOverflow;
-  }
-};
-const Modal = _ref => {
+const ModalDialog = /*#__PURE__*/react.forwardRef((_ref, ref) => {
   let {
     title,
     subtitle,
     onClose,
     withOverlay = false,
     bodyFill = false,
+    lockScroll = true,
+    closeOnEscape = true,
+    closeOnOverlayClick = true,
     children,
     className,
     dataTestId,
     ...rest
   } = _ref;
   const titleId = react.useId();
+  const [cardEl, setCardEl] = react.useState(null);
   const backdropMouseDown = react.useRef(false);
-  react.useEffect(() => {
-    if (!withOverlay) return;
-    lockBodyScroll();
-    return unlockBodyScroll;
-  }, [withOverlay]);
+  react.useImperativeHandle(ref, () => cardEl, [cardEl]);
+  useBodyScrollLock.useBodyScrollLock(withOverlay && lockScroll);
+  useFocusTrap.useFocusTrap(cardEl, withOverlay);
+  // Stays registered with closeOnEscape={false} so Escape doesn't fall through to an underlying overlay.
+  useEscape.useEscape(withOverlay, () => {
+    if (closeOnEscape) onClose?.();
+  });
   const handleOverlayMouseDown = event => {
     backdropMouseDown.current = event.target === event.currentTarget;
   };
   const handleOverlayClick = event => {
-    if (event.target !== event.currentTarget) return;
-    if (!backdropMouseDown.current) return;
-    onClose?.();
+    if (closeOnOverlayClick && backdropMouseDown.current && event.target === event.currentTarget) {
+      onClose?.();
+    }
   };
   const card = /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: cn(Modal_module.card, bodyFill && Modal_module.cardBodyFill, className),
     role: "dialog",
     "aria-modal": withOverlay || undefined,
     "aria-labelledby": title ? titleId : undefined,
     "data-testid": dataTestId?.root,
     ...rest,
+    ref: setCardEl,
+    className: cn(Modal_module.card, bodyFill && Modal_module.cardBodyFill, className),
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
       className: Modal_module.headerGroup,
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -90,9 +86,7 @@ const Modal = _ref => {
   if (!withOverlay) return card;
   return (
     /*#__PURE__*/
-    // The backdrop is a pointer-only affordance — making it focusable would put
-    // a stop in the tab order before the dialog. Keyboard users close via the
-    // close button.
+    // 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", {
       className: Modal_module.overlay,
@@ -102,7 +96,20 @@ const Modal = _ref => {
       children: card
     })
   );
-};
+});
+ModalDialog.displayName = 'ModalDialog';
+
+// Hooks live in ModalDialog so they run once the portal has mounted its content.
+const Modal = /*#__PURE__*/react.forwardRef((props, ref) => {
+  const dialog = /*#__PURE__*/jsxRuntime.jsx(ModalDialog, {
+    ref: ref,
+    ...props
+  });
+  return props.withOverlay ? /*#__PURE__*/jsxRuntime.jsx(Portal.Portal, {
+    children: dialog
+  }) : dialog;
+});
+Modal.displayName = 'Modal';
 
 exports.Modal = Modal;
 //# 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  useEffect,\n  useId,\n  useRef,\n  type ComponentPropsWithoutRef,\n  type MouseEvent,\n  type ReactNode,\n} from 'react'\n\nimport { IconButton } from '../icon-button'\nimport { IconCross } from '../icons'\nimport cn from 'classnames'\n\nimport styles from './Modal.module.css'\n\n// Ref-counted so stacked overlays (e.g. connect modal + an action modal) lock on\n// the first and only restore on the last, regardless of close order.\nlet scrollLockCount = 0\nlet restoreOverflow = ''\n\nconst lockBodyScroll = () => {\n  if (scrollLockCount === 0) {\n    restoreOverflow = document.body.style.overflow\n    document.body.style.overflow = 'hidden'\n  }\n  scrollLockCount += 1\n}\n\nconst unlockBodyScroll = () => {\n  scrollLockCount = Math.max(0, scrollLockCount - 1)\n  if (scrollLockCount === 0) {\n    document.body.style.overflow = restoreOverflow\n  }\n}\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  withOverlay?: boolean\n  bodyFill?: boolean\n  children: ReactNode\n  dataTestId?: ModalDataTestId\n}\n\nexport const Modal = ({\n  title,\n  subtitle,\n  onClose,\n  withOverlay = false,\n  bodyFill = false,\n  children,\n  className,\n  dataTestId,\n  ...rest\n}: ModalProps) => {\n  const titleId = useId()\n  const backdropMouseDown = useRef(false)\n\n  useEffect(() => {\n    if (!withOverlay) return\n    lockBodyScroll()\n    return unlockBodyScroll\n  }, [withOverlay])\n\n  const handleOverlayMouseDown = (event: MouseEvent<HTMLDivElement>) => {\n    backdropMouseDown.current = event.target === event.currentTarget\n  }\n\n  const handleOverlayClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (event.target !== event.currentTarget) return\n    if (!backdropMouseDown.current) return\n    onClose?.()\n  }\n\n  const card = (\n    <div\n      className={cn(styles.card, bodyFill && styles.cardBodyFill, className)}\n      role='dialog'\n      aria-modal={withOverlay || undefined}\n      aria-labelledby={title ? titleId : undefined}\n      data-testid={dataTestId?.root}\n      {...rest}\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            <IconButton\n              variant='outline'\n              aria-label='Close'\n              icon={<IconCross />}\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    // The backdrop is a pointer-only affordance — making it focusable would put\n    // a stop in the tab order before the dialog. Keyboard users close via the\n    // close button.\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"],"names":["scrollLockCount","restoreOverflow","lockBodyScroll","document","body","style","overflow","unlockBodyScroll","Math","max","Modal","_ref","title","subtitle","onClose","withOverlay","bodyFill","children","className","dataTestId","rest","titleId","useId","backdropMouseDown","useRef","useEffect","handleOverlayMouseDown","event","current","target","currentTarget","handleOverlayClick","card","_jsxs","cn","styles","cardBodyFill","role","undefined","root","headerGroup","header","_jsx","id","titleHidden","IconButton","variant","icon","IconCross","onClick","closeButton","overlay","onMouseDown"],"mappings":"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"}
+{"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 { IconButton } from '../icon-button'\nimport { IconCross } from '../icons'\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              <IconButton\n                variant='outline'\n                aria-label='Close'\n                icon={<IconCross />}\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","IconButton","variant","icon","IconCross","onClick","closeButton","body","overlay","onMouseDown","displayName","Modal","props","dialog","Portal"],"mappings":"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"}

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

@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const react = require('react');
+const cn = require('classnames');
+const Anchor = require('../link-provider/Anchor.cjs');
+const NavLink_module = require('./NavLink.module.css.cjs');
+const jsxRuntime = require('react/jsx-runtime');
+const IconLink = require('../icons/components/base/IconLink.cjs');
+
+const NavLink = /*#__PURE__*/react.forwardRef((_ref, ref) => {
+  let {
+    active = false,
+    icon,
+    external = false,
+    className,
+    children,
+    target,
+    rel,
+    ...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),
+    ...rest,
+    children: [icon != null ? /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: NavLink_module.icon,
+      "aria-hidden": "true",
+      children: icon
+    }) : null, children, external ? /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: NavLink_module.icon,
+      "aria-hidden": "true",
+      children: /*#__PURE__*/jsxRuntime.jsx(IconLink.IconLink, {})
+    }) : null]
+  });
+});
+NavLink.displayName = 'NavLink';
+
+exports.NavLink = NavLink;
+//# sourceMappingURL=NavLink.cjs.map

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

@@ -0,0 +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;;;;"}

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

@@ -0,0 +1,6 @@
+'use strict';
+
+const styles = {"link":"NavLink-module_link__vuICw","active":"NavLink-module_active__drmha","icon":"NavLink-module_icon__gjet5"};
+
+module.exports = styles;
+//# sourceMappingURL=NavLink.module.css.cjs.map

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

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

package/dist/cjs/notification/Notification.cjs

@@ -2,26 +2,32 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
+const react = require('react');
 const lidoSharedUi = require('@lidofinance/lido-shared-ui');
 const cn = require('classnames');
 const Notification_module = require('./Notification.module.css.cjs');
 const jsxRuntime = require('react/jsx-runtime');
+const IconButton = require('../icon-button/IconButton.cjs');
+const IconCross = require('../icons/components/base/IconCross.cjs');
 
-const Notification = _ref => {
+const Notification = /*#__PURE__*/react.forwardRef((_ref, ref) => {
   let {
     title,
     children,
     subheader,
     actions,
+    onClose,
     className,
+    role = 'alert',
     dataTestId,
     ...rest
   } = _ref;
   return /*#__PURE__*/jsxRuntime.jsx(lidoSharedUi.ThemeProvider, {
     themeName: lidoSharedUi.ThemeName.dark,
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+      ref: ref,
+      role: role,
       className: cn(Notification_module.notification, className),
-      role: "alert",
       "data-testid": dataTestId?.root,
       ...rest,
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -31,7 +37,7 @@ const Notification = _ref => {
           "data-testid": dataTestId?.subheader,
           children: subheader
         }) : null, /*#__PURE__*/jsxRuntime.jsx("p", {
-          className: Notification_module.title,
+          className: cn(Notification_module.title, onClose && Notification_module.closable),
           "data-testid": dataTestId?.title,
           children: title
         }), children != null ? /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -43,10 +49,20 @@ const Notification = _ref => {
         className: Notification_module.actions,
         "data-testid": dataTestId?.actions,
         children: actions
+      }) : null, onClose ? /*#__PURE__*/jsxRuntime.jsx(IconButton.IconButton, {
+        variant: "ghost",
+        "aria-label": "Dismiss",
+        icon: /*#__PURE__*/jsxRuntime.jsx(IconCross.IconCross, {}),
+        className: Notification_module.close,
+        onClick: onClose,
+        dataTestId: {
+          root: dataTestId?.closeButton
+        }
       }) : null]
     })
   });
-};
+});
+Notification.displayName = 'Notification';
 
 exports.Notification = Notification;
 //# sourceMappingURL=Notification.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Notification.cjs","sources":["../../../src/notification/Notification.tsx"],"sourcesContent":["import { ThemeName, ThemeProvider } from '@lidofinance/lido-shared-ui'\n\nimport cn from 'classnames'\nimport type { ComponentPropsWithoutRef, ReactNode } from 'react'\n\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}\n\nexport type NotificationProps = Omit<\n  ComponentPropsWithoutRef<'div'>,\n  'title'\n> & {\n  title: ReactNode\n  children?: ReactNode\n  subheader?: ReactNode\n  actions?: ReactNode\n  dataTestId?: NotificationDataTestId\n}\n\nexport const Notification = ({\n  title,\n  children,\n  subheader,\n  actions,\n  className,\n  dataTestId,\n  ...rest\n}: NotificationProps) => (\n  <ThemeProvider themeName={ThemeName.dark}>\n    <div\n      className={cn(styles.notification, className)}\n      role='alert'\n      data-testid={dataTestId?.root}\n      {...rest}\n    >\n      <div className={styles.content}>\n        {subheader != null ? (\n          <div className={styles.subheader} data-testid={dataTestId?.subheader}>\n            {subheader}\n          </div>\n        ) : null}\n        <p className={styles.title} data-testid={dataTestId?.title}>\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    </div>\n  </ThemeProvider>\n)\n"],"names":["Notification","_ref","title","children","subheader","actions","className","dataTestId","rest","_jsx","ThemeProvider","themeName","ThemeName","dark","_jsxs","cn","styles","notification","role","root","content","body"],"mappings":";;;;;;;;;AA0BO,MAAMA,YAAY,GAAGC,IAAA,IAAA;EAAA,IAAC;IAC3BC,KAAK;IACLC,QAAQ;IACRC,SAAS;IACTC,OAAO;IACPC,SAAS;IACTC,UAAU;IACV,GAAGC,IAAAA;AACc,GAAC,GAAAP,IAAA,CAAA;EAAA,oBAClBQ,cAAA,CAACC,0BAAa,EAAA;IAACC,SAAS,EAAEC,sBAAS,CAACC,IAAK;AAAAV,IAAAA,QAAA,eACvCW,eAAA,CAAA,KAAA,EAAA;MACER,SAAS,EAAES,EAAE,CAACC,mBAAM,CAACC,YAAY,EAAEX,SAAS,CAAE;AAC9CY,MAAAA,IAAI,EAAC,OAAO;MACZ,aAAaX,EAAAA,UAAU,EAAEY,IAAK;AAAA,MAAA,GAC1BX,IAAI;AAAAL,MAAAA,QAAA,gBAERW,eAAA,CAAA,KAAA,EAAA;QAAKR,SAAS,EAAEU,mBAAM,CAACI,OAAQ;AAAAjB,QAAAA,QAAA,EAC5BC,CAAAA,SAAS,IAAI,IAAI,gBAChBK,cAAA,CAAA,KAAA,EAAA;UAAKH,SAAS,EAAEU,mBAAM,CAACZ,SAAU;UAAC,aAAaG,EAAAA,UAAU,EAAEH,SAAU;AAAAD,UAAAA,QAAA,EAClEC,SAAAA;AAAS,SACP,CAAC,GACJ,IAAI,eACRK,cAAA,CAAA,GAAA,EAAA;UAAGH,SAAS,EAAEU,mBAAM,CAACd,KAAM;UAAC,aAAaK,EAAAA,UAAU,EAAEL,KAAM;AAAAC,UAAAA,QAAA,EACxDD,KAAAA;AAAK,SACL,CAAC,EACHC,QAAQ,IAAI,IAAI,gBACfM,cAAA,CAAA,KAAA,EAAA;UAAKH,SAAS,EAAEU,mBAAM,CAACK,IAAK;UAAC,aAAad,EAAAA,UAAU,EAAEc,IAAK;AAAAlB,UAAAA,QAAA,EACxDA,QAAAA;SACE,CAAC,GACJ,IAAI,CAAA;AAAA,OACL,CAAC,EACLE,OAAO,IAAI,IAAI,gBACdI,cAAA,CAAA,KAAA,EAAA;QAAKH,SAAS,EAAEU,mBAAM,CAACX,OAAQ;QAAC,aAAaE,EAAAA,UAAU,EAAEF,OAAQ;AAAAF,QAAAA,QAAA,EAC9DE,OAAAA;OACE,CAAC,GACJ,IAAI,CAAA;KACL,CAAA;AAAC,GACO,CAAC,CAAA;AAAA;;;;"}
+{"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;;;;"}

package/dist/cjs/notification/Notification.module.css.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const styles = {"notification":"Notification-module_notification__78CFU","content":"Notification-module_content__HOyyc","title":"Notification-module_title__pC9Yh","body":"Notification-module_body__9icKP","subheader":"Notification-module_subheader__4Mrnv","actions":"Notification-module_actions__DCafA","button":"Notification-module_button__x9Snk"};
+const styles = {"notification":"Notification-module_notification__78CFU","content":"Notification-module_content__HOyyc","subheader":"Notification-module_subheader__4Mrnv","title":"Notification-module_title__pC9Yh","closable":"Notification-module_closable__75wDN","close":"Notification-module_close__v8fH-","body":"Notification-module_body__9icKP","actions":"Notification-module_actions__DCafA"};
 
 module.exports = styles;
 //# sourceMappingURL=Notification.module.css.cjs.map

package/dist/cjs/popover/Popover.cjs

@@ -0,0 +1,136 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const react = require('react');
+const cn = require('classnames');
+const Popover_module = require('./Popover.module.css.cjs');
+const jsxRuntime = require('react/jsx-runtime');
+const Portal = require('../hooks/Portal.cjs');
+const useIsomorphicLayoutEffect = require('../hooks/useIsomorphicLayoutEffect.cjs');
+const useFocusTrap = require('../hooks/useFocusTrap.cjs');
+const useEscape = require('../hooks/useEscape.cjs');
+const useOutsideClick = require('../hooks/useOutsideClick.cjs');
+
+const POSITION_KEYS = ['top', 'bottom', 'left', 'right', 'width'];
+const samePosition = (a, b) => a != null && a.placement === b.placement && POSITION_KEYS.every(key => a.coordinates[key] === b.coordinates[key]);
+const VIEWPORT_MARGIN = 8;
+const clamp = (value, max) => Math.max(VIEWPORT_MARGIN, Math.min(value, max));
+const computePosition = (anchor, alignEl, panel, placement, align, offset, width) => {
+  const anchorRect = anchor.getBoundingClientRect();
+  const alignRect = alignEl === anchor ? anchorRect : alignEl.getBoundingClientRect();
+  const viewportWidth = document.documentElement.clientWidth;
+  const viewportHeight = document.documentElement.clientHeight;
+  const fixedWidth = typeof width === 'number' ? width : width === 'anchor' ? anchorRect.width : width === 'align' ? alignRect.width : undefined;
+  const panelWidth = fixedWidth ?? panel?.getBoundingClientRect().width ?? 0;
+  const maxEdge = viewportWidth - VIEWPORT_MARGIN - panelWidth;
+  const panelHeight = panel?.getBoundingClientRect().height ?? 0;
+  const roomBelow = viewportHeight - anchorRect.bottom - offset - VIEWPORT_MARGIN;
+  const roomAbove = anchorRect.top - offset - VIEWPORT_MARGIN;
+  const [room, opposite] = placement === 'top' ? [roomAbove, roomBelow] : [roomBelow, roomAbove];
+  const resolved = panelHeight > room && opposite > room ? placement === 'top' ? 'bottom' : 'top' : placement;
+  const coordinates = {};
+  if (fixedWidth != null) coordinates.width = fixedWidth;
+  if (resolved === 'top') {
+    coordinates.bottom = viewportHeight - anchorRect.top + offset;
+  } else {
+    coordinates.top = anchorRect.bottom + offset;
+  }
+  if (align === 'end') {
+    coordinates.right = clamp(viewportWidth - alignRect.right, maxEdge);
+  } else if (align === 'center') {
+    coordinates.left = clamp(alignRect.left + alignRect.width / 2 - panelWidth / 2, maxEdge);
+  } else {
+    coordinates.left = clamp(alignRect.left, maxEdge);
+  }
+  return {
+    placement: resolved,
+    coordinates
+  };
+};
+const PopoverPanel = _ref => {
+  let {
+    onClose,
+    anchorRef,
+    alignRef,
+    placement = 'bottom',
+    align = 'start',
+    offset = 8,
+    width,
+    modal = true,
+    className,
+    style,
+    children,
+    ...rest
+  } = _ref;
+  const [panel, setPanel] = react.useState(null);
+  const [position, setPosition] = react.useState(null);
+  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+    const update = () => {
+      const anchor = anchorRef.current;
+      if (!anchor) return;
+      const next = computePosition(anchor, alignRef?.current ?? anchor, panel, placement, align, offset, width);
+      // Keeps the previous object so unchanged scroll/resize frames skip a re-render.
+      setPosition(prev => samePosition(prev, next) ? prev : next);
+    };
+    update();
+    let frame = 0;
+    const schedule = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(update);
+    };
+    window.addEventListener('resize', schedule);
+    window.addEventListener('scroll', schedule, true);
+    const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(schedule);
+    if (anchorRef.current) observer?.observe(anchorRef.current);
+    return () => {
+      observer?.disconnect();
+      cancelAnimationFrame(frame);
+      window.removeEventListener('resize', schedule);
+      window.removeEventListener('scroll', schedule, true);
+    };
+  }, [anchorRef, alignRef, panel, placement, align, offset, width]);
+  useFocusTrap.useFocusTrap(panel, modal && position != null, {
+    restoreFocus: false
+  });
+  useEscape.useEscape(true, onClose);
+  useOutsideClick.useOutsideClick(panel, event => {
+    // Anchor clicks are left to the anchor's own toggle handler.
+    if (event.target instanceof Node && anchorRef.current?.contains(event.target)) return;
+    onClose();
+  }, true);
+
+  // Passive cleanup runs after the panel left the DOM; focus is on body unless the user moved it elsewhere.
+  react.useEffect(() => () => {
+    const active = document.activeElement;
+    if (!active || active === document.body) anchorRef.current?.focus();
+  }, [anchorRef]);
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    ref: setPanel,
+    role: "dialog",
+    "aria-modal": modal || undefined,
+    "data-placement": position?.placement,
+    className: cn(Popover_module.panel, className),
+    style: {
+      ...position?.coordinates,
+      ...style,
+      visibility: position ? undefined : 'hidden'
+    },
+    ...rest,
+    children: children
+  });
+};
+const Popover = _ref2 => {
+  let {
+    open,
+    ...props
+  } = _ref2;
+  return open ? /*#__PURE__*/jsxRuntime.jsx(Portal.Portal, {
+    children: /*#__PURE__*/jsxRuntime.jsx(PopoverPanel, {
+      ...props
+    })
+  }) : null;
+};
+
+exports.Popover = Popover;
+//# sourceMappingURL=Popover.cjs.map

package/dist/cjs/popover/Popover.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.cjs","sources":["../../../src/popover/Popover.tsx"],"sourcesContent":["import { useEffect, useState, type HTMLAttributes, type RefObject } from 'react'\n\nimport cn from 'classnames'\n\nimport {\n  Portal,\n  useEscape,\n  useFocusTrap,\n  useIsomorphicLayoutEffect,\n  useOutsideClick,\n} from '../hooks'\nimport styles from './Popover.module.css'\n\nexport type PopoverPlacement = 'top' | 'bottom'\nexport type PopoverAlign = 'start' | 'center' | 'end'\nexport type PopoverOffset = 0 | 2 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 52\n\nexport type PopoverProps = HTMLAttributes<HTMLDivElement> & {\n  open: boolean\n  onClose: () => void\n  anchorRef: RefObject<HTMLElement | null>\n  /** Element whose edge the panel aligns to; defaults to the anchor. */\n  alignRef?: RefObject<HTMLElement | null>\n  placement?: PopoverPlacement\n  align?: PopoverAlign\n  /** Gap in px between the anchor and the panel. */\n  offset?: PopoverOffset\n  /** Px, or match the width of the anchor / align element. */\n  width?: number | 'anchor' | 'align'\n  /** When false, focus stays where it is and isn't trapped, e.g. for menus opened by hover. */\n  modal?: boolean\n}\n\nconst POSITION_KEYS = ['top', 'bottom', 'left', 'right', 'width'] as const\ntype Coordinates = Partial<Record<(typeof POSITION_KEYS)[number], number>>\ntype Position = { placement: PopoverPlacement; coordinates: Coordinates }\n\nconst samePosition = (a: Position | null, b: Position) =>\n  a != null &&\n  a.placement === b.placement &&\n  POSITION_KEYS.every((key) => a.coordinates[key] === b.coordinates[key])\n\nconst VIEWPORT_MARGIN = 8\n\nconst clamp = (value: number, max: number) =>\n  Math.max(VIEWPORT_MARGIN, Math.min(value, max))\n\nconst computePosition = (\n  anchor: HTMLElement,\n  alignEl: HTMLElement,\n  panel: HTMLElement | null,\n  placement: PopoverPlacement,\n  align: PopoverAlign,\n  offset: number,\n  width: PopoverProps['width'],\n): Position => {\n  const anchorRect = anchor.getBoundingClientRect()\n  const alignRect =\n    alignEl === anchor ? anchorRect : alignEl.getBoundingClientRect()\n  const viewportWidth = document.documentElement.clientWidth\n  const viewportHeight = document.documentElement.clientHeight\n\n  const fixedWidth =\n    typeof width === 'number'\n      ? width\n      : width === 'anchor'\n        ? anchorRect.width\n        : width === 'align'\n          ? alignRect.width\n          : undefined\n  const panelWidth = fixedWidth ?? panel?.getBoundingClientRect().width ?? 0\n  const maxEdge = viewportWidth - VIEWPORT_MARGIN - panelWidth\n\n  const panelHeight = panel?.getBoundingClientRect().height ?? 0\n  const roomBelow =\n    viewportHeight - anchorRect.bottom - offset - VIEWPORT_MARGIN\n  const roomAbove = anchorRect.top - offset - VIEWPORT_MARGIN\n  const [room, opposite] =\n    placement === 'top' ? [roomAbove, roomBelow] : [roomBelow, roomAbove]\n  const resolved: PopoverPlacement =\n    panelHeight > room && opposite > room\n      ? placement === 'top'\n        ? 'bottom'\n        : 'top'\n      : placement\n\n  const coordinates: Coordinates = {}\n  if (fixedWidth != null) coordinates.width = fixedWidth\n  if (resolved === 'top') {\n    coordinates.bottom = viewportHeight - anchorRect.top + offset\n  } else {\n    coordinates.top = anchorRect.bottom + offset\n  }\n  if (align === 'end') {\n    coordinates.right = clamp(viewportWidth - alignRect.right, maxEdge)\n  } else if (align === 'center') {\n    coordinates.left = clamp(\n      alignRect.left + alignRect.width / 2 - panelWidth / 2,\n      maxEdge,\n    )\n  } else {\n    coordinates.left = clamp(alignRect.left, maxEdge)\n  }\n  return { placement: resolved, coordinates }\n}\n\nconst PopoverPanel = ({\n  onClose,\n  anchorRef,\n  alignRef,\n  placement = 'bottom',\n  align = 'start',\n  offset = 8,\n  width,\n  modal = true,\n  className,\n  style,\n  children,\n  ...rest\n}: Omit<PopoverProps, 'open'>) => {\n  const [panel, setPanel] = useState<HTMLDivElement | null>(null)\n  const [position, setPosition] = useState<Position | null>(null)\n\n  useIsomorphicLayoutEffect(() => {\n    const update = () => {\n      const anchor = anchorRef.current\n      if (!anchor) return\n      const next = computePosition(\n        anchor,\n        alignRef?.current ?? anchor,\n        panel,\n        placement,\n        align,\n        offset,\n        width,\n      )\n      // Keeps the previous object so unchanged scroll/resize frames skip a re-render.\n      setPosition((prev) => (samePosition(prev, next) ? prev : next))\n    }\n    update()\n    let frame = 0\n    const schedule = () => {\n      cancelAnimationFrame(frame)\n      frame = requestAnimationFrame(update)\n    }\n    window.addEventListener('resize', schedule)\n    window.addEventListener('scroll', schedule, true)\n    const observer =\n      typeof ResizeObserver === 'undefined'\n        ? null\n        : new ResizeObserver(schedule)\n    if (anchorRef.current) observer?.observe(anchorRef.current)\n    return () => {\n      observer?.disconnect()\n      cancelAnimationFrame(frame)\n      window.removeEventListener('resize', schedule)\n      window.removeEventListener('scroll', schedule, true)\n    }\n  }, [anchorRef, alignRef, panel, placement, align, offset, width])\n\n  useFocusTrap(panel, modal && position != null, { restoreFocus: false })\n  useEscape(true, onClose)\n  useOutsideClick(\n    panel,\n    (event) => {\n      // Anchor clicks are left to the anchor's own toggle handler.\n      if (\n        event.target instanceof Node &&\n        anchorRef.current?.contains(event.target)\n      )\n        return\n      onClose()\n    },\n    true,\n  )\n\n  // Passive cleanup runs after the panel left the DOM; focus is on body unless the user moved it elsewhere.\n  useEffect(\n    () => () => {\n      const active = document.activeElement\n      if (!active || active === document.body) anchorRef.current?.focus()\n    },\n    [anchorRef],\n  )\n\n  return (\n    <div\n      ref={setPanel}\n      role='dialog'\n      aria-modal={modal || undefined}\n      data-placement={position?.placement}\n      className={cn(styles.panel, className)}\n      style={{\n        ...position?.coordinates,\n        ...style,\n        visibility: position ? undefined : 'hidden',\n      }}\n      {...rest}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport const Popover = ({ open, ...props }: PopoverProps) =>\n  open ? (\n    <Portal>\n      <PopoverPanel {...props} />\n    </Portal>\n  ) : null\n"],"names":["POSITION_KEYS","samePosition","a","b","placement","every","key","coordinates","VIEWPORT_MARGIN","clamp","value","max","Math","min","computePosition","anchor","alignEl","panel","align","offset","width","anchorRect","getBoundingClientRect","alignRect","viewportWidth","document","documentElement","clientWidth","viewportHeight","clientHeight","fixedWidth","undefined","panelWidth","maxEdge","panelHeight","height","roomBelow","bottom","roomAbove","top","room","opposite","resolved","right","left","PopoverPanel","_ref","onClose","anchorRef","alignRef","modal","className","style","children","rest","setPanel","useState","position","setPosition","useIsomorphicLayoutEffect","update","current","next","prev","frame","schedule","cancelAnimationFrame","requestAnimationFrame","window","addEventListener","observer","ResizeObserver","observe","disconnect","removeEventListener","useFocusTrap","restoreFocus","useEscape","useOutsideClick","event","target","Node","contains","useEffect","active","activeElement","body","focus","_jsx","ref","role","cn","styles","visibility","Popover","_ref2","open","props","Portal"],"mappings":"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"}

package/dist/cjs/popover/Popover.module.css.cjs

@@ -0,0 +1,6 @@
+'use strict';
+
+const styles = {"panel":"Popover-module_panel__N-Et6"};
+
+module.exports = styles;
+//# sourceMappingURL=Popover.module.css.cjs.map