@transferwise/components 46.45.0 → 46.46.0

package/build/dimmer/Dimmer.js

@@ -0,0 +1,184 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var componentsTheming = require('@wise/components-theming');
+var classNames = require('classnames');
+var React = require('react');
+var reactTransitionGroup = require('react-transition-group');
+var deviceDetection = require('../common/deviceDetection/deviceDetection.js');
+var FocusBoundary = require('../common/focusBoundary/FocusBoundary.js');
+var withNextPortal = require('../withNextPortal/withNextPortal.js');
+var DimmerManager = require('./dimmerManager/DimmerManager.js');
+var jsxRuntime = require('react/jsx-runtime');
+var DOMOperations = require('../common/DOMOperations/DOMOperations.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+const EXIT_ANIMATION = 350;
+const dimmerManager = new DimmerManager();
+const handleTouchMove = event => {
+  const isTouchedElementDimmer = event.target.classList.contains('dimmer');
+  // disable scroll on iOS devices for Dimmer area
+  // this is because of bug in WebKit https://bugs.webkit.org/show_bug.cgi?id=220908
+  // note: scrolling still works for children(s) as expected
+  if (deviceDetection.isIosDevice() && isTouchedElementDimmer) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+};
+const Dimmer = ({
+  children,
+  className,
+  disableClickToClose = false,
+  contentPosition,
+  fadeContentOnEnter = false,
+  fadeContentOnExit = false,
+  open = false,
+  scrollable = false,
+  transparent = false,
+  onClose
+}) => {
+  const [hasNotExited, setHasNotExited] = React.useState(false);
+  const dimmerReference = React.useRef(null);
+  const closeOnClick = event => {
+    if (event.target === dimmerReference.current) {
+      onClose?.(event);
+    }
+  };
+  const handleClick = event => {
+    if (disableClickToClose || !onClose) {
+      return;
+    }
+    closeOnClick(event);
+  };
+  const handleKeyDown = React.useCallback(event => {
+    if (event.key !== 'Escape') {
+      return;
+    }
+    event.stopPropagation();
+    if (onClose && dimmerReference.current && dimmerManager.isTop(dimmerReference.current)) {
+      onClose(event);
+    }
+  }, [onClose]);
+  const onEnter = () => {
+    setHasNotExited(true);
+    if (dimmerReference.current) {
+      dimmerManager.add(dimmerReference.current);
+    }
+  };
+  const onExited = () => {
+    setHasNotExited(false);
+    if (dimmerReference.current) {
+      dimmerManager.remove(dimmerReference.current);
+    }
+  };
+  React.useEffect(() => {
+    const localReferenceCopy = dimmerReference.current;
+    if (open) {
+      document.addEventListener('keydown', handleKeyDown);
+      localReferenceCopy?.addEventListener('touchmove', handleTouchMove, {
+        passive: true
+      });
+    }
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+      localReferenceCopy?.removeEventListener('touchmove', handleTouchMove);
+    };
+  }, [handleKeyDown, open]);
+  return /*#__PURE__*/jsxRuntime.jsx(DimmerWrapper, {
+    open: open,
+    hasNotExited: hasNotExited,
+    children: /*#__PURE__*/jsxRuntime.jsx(reactTransitionGroup.CSSTransition, {
+      nodeRef: dimmerReference,
+      in: open,
+      appear: true
+      // Wait for animation to finish before unmount.
+      ,
+      timeout: {
+        enter: 0,
+        exit: EXIT_ANIMATION
+      },
+      classNames: {
+        enter: classNames__default.default({
+          'dimmer--enter-fade': fadeContentOnEnter
+        }),
+        enterDone: classNames__default.default('dimmer--enter-done', {
+          'dimmer--enter-fade': fadeContentOnEnter
+        }),
+        exit: classNames__default.default('dimmer--exit', {
+          'dimmer--exit-fade': fadeContentOnExit
+        })
+      },
+      unmountOnExit: true,
+      onEnter: onEnter,
+      onExited: onExited,
+      children: /*#__PURE__*/jsxRuntime.jsx(DimmerContentWrapper, {
+        scrollBody: !transparent,
+        children: /*#__PURE__*/jsxRuntime.jsx(FocusBoundary, {
+          children: /*#__PURE__*/jsxRuntime.jsx("div", {
+            ref: dimmerReference,
+            className: classNames__default.default('dimmer', {
+              'dimmer--scrollable': scrollable,
+              'dimmer--transparent': transparent
+            }, className),
+            role: "presentation",
+            onClick: handleClick,
+            children: /*#__PURE__*/jsxRuntime.jsx("div", {
+              className: classNames__default.default('dimmer-content-positioner', contentPosition != null && ['d-flex justify-content-center', {
+                'align-items-start': contentPosition === 'top',
+                'align-items-center': contentPosition === 'center',
+                'align-items-end': contentPosition === 'bottom'
+              }]),
+              children: children
+            })
+          })
+        })
+      })
+    })
+  });
+};
+const DimmerWrapper = ({
+  open,
+  hasNotExited,
+  children
+}) => {
+  const {
+    screenMode,
+    theme
+  } = componentsTheming.useTheme();
+  return open || hasNotExited ? /*#__PURE__*/jsxRuntime.jsx(componentsTheming.ThemeProvider, {
+    theme: "personal",
+    screenMode: theme === 'personal' ? screenMode : 'light',
+    isNotRootProvider: true,
+    children: children
+  }) : /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: children
+  });
+};
+const DimmerContentWrapper = ({
+  children,
+  scrollBody
+}) => {
+  React.useEffect(() => {
+    if (scrollBody) {
+      DOMOperations.addNoScrollClass();
+    }
+    return () => {
+      if (scrollBody) {
+        DOMOperations.removeNoScrollClass();
+      }
+    };
+  }, [scrollBody]);
+  return children;
+};
+var Dimmer$1 = withNextPortal(Dimmer);
+
+exports.Dimmer = Dimmer;
+exports.DimmerContentWrapper = DimmerContentWrapper;
+exports.EXIT_ANIMATION = EXIT_ANIMATION;
+exports.default = Dimmer$1;
+exports.handleTouchMove = handleTouchMove;
+//# sourceMappingURL=Dimmer.js.map

package/build/dimmer/Dimmer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dimmer.js","sources":["../../src/dimmer/Dimmer.tsx"],"sourcesContent":["import { ThemeProvider, useTheme } from '@wise/components-theming';\nimport classNames from 'classnames';\nimport { MouseEvent, ReactNode, useCallback, useEffect, useRef, useState } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport {\n  addNoScrollClass,\n  CommonProps,\n  PositionBottom,\n  PositionCenter,\n  PositionTop,\n  removeNoScrollClass,\n} from '../common';\nimport { isIosDevice } from '../common/deviceDetection';\nimport FocusBoundary from '../common/focusBoundary';\nimport withNextPortal from '../withNextPortal/withNextPortal';\n\nimport DimmerManager from './dimmerManager';\n\nexport const EXIT_ANIMATION = 350;\n\nconst dimmerManager = new DimmerManager();\n\nexport type DimmerProps = CommonProps & {\n  children?: ReactNode;\n  disableClickToClose?: boolean;\n  contentPosition?: PositionTop | PositionCenter | PositionBottom;\n  fadeContentOnEnter?: boolean;\n  fadeContentOnExit?: boolean;\n  open?: boolean;\n  scrollable?: boolean;\n  transparent?: boolean;\n  onClose?: (event: KeyboardEvent | MouseEvent) => void;\n};\n\nexport const handleTouchMove = (event: Event) => {\n  const isTouchedElementDimmer = (event.target as HTMLDivElement).classList.contains('dimmer');\n\n  // disable scroll on iOS devices for Dimmer area\n  // this is because of bug in WebKit https://bugs.webkit.org/show_bug.cgi?id=220908\n  // note: scrolling still works for children(s) as expected\n  if (isIosDevice() && isTouchedElementDimmer) {\n    event.stopPropagation();\n    event.preventDefault();\n  }\n};\n\nconst Dimmer = ({\n  children,\n  className,\n  disableClickToClose = false,\n  contentPosition,\n  fadeContentOnEnter = false,\n  fadeContentOnExit = false,\n  open = false,\n  scrollable = false,\n  transparent = false,\n  onClose,\n}: DimmerProps) => {\n  const [hasNotExited, setHasNotExited] = useState(false);\n  const dimmerReference = useRef<HTMLDivElement>(null);\n\n  const closeOnClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (event.target === dimmerReference.current) {\n      onClose?.(event);\n    }\n  };\n\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (disableClickToClose || !onClose) {\n      return;\n    }\n\n    closeOnClick(event);\n  };\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key !== 'Escape') {\n        return;\n      }\n      event.stopPropagation();\n\n      if (onClose && dimmerReference.current && dimmerManager.isTop(dimmerReference.current)) {\n        onClose(event);\n      }\n    },\n    [onClose],\n  );\n\n  const onEnter = () => {\n    setHasNotExited(true);\n\n    if (dimmerReference.current) {\n      dimmerManager.add(dimmerReference.current);\n    }\n  };\n  const onExited = () => {\n    setHasNotExited(false);\n\n    if (dimmerReference.current) {\n      dimmerManager.remove(dimmerReference.current);\n    }\n  };\n\n  useEffect(() => {\n    const localReferenceCopy = dimmerReference.current;\n\n    if (open) {\n      document.addEventListener('keydown', handleKeyDown);\n      localReferenceCopy?.addEventListener('touchmove', handleTouchMove, { passive: true });\n    }\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n\n      localReferenceCopy?.removeEventListener('touchmove', handleTouchMove);\n    };\n  }, [handleKeyDown, open]);\n\n  return (\n    <DimmerWrapper open={open} hasNotExited={hasNotExited}>\n      <CSSTransition\n        nodeRef={dimmerReference}\n        in={open}\n        appear\n        // Wait for animation to finish before unmount.\n        timeout={{ enter: 0, exit: EXIT_ANIMATION }}\n        classNames={{\n          enter: classNames({ 'dimmer--enter-fade': fadeContentOnEnter }),\n          enterDone: classNames('dimmer--enter-done', {\n            'dimmer--enter-fade': fadeContentOnEnter,\n          }),\n          exit: classNames('dimmer--exit', { 'dimmer--exit-fade': fadeContentOnExit }),\n        }}\n        unmountOnExit\n        onEnter={onEnter}\n        onExited={onExited}\n      >\n        <DimmerContentWrapper scrollBody={!transparent}>\n          <FocusBoundary>\n            <div\n              ref={dimmerReference}\n              className={classNames(\n                'dimmer',\n                { 'dimmer--scrollable': scrollable, 'dimmer--transparent': transparent },\n                className,\n              )}\n              role=\"presentation\"\n              onClick={handleClick}\n            >\n              <div\n                className={classNames(\n                  'dimmer-content-positioner',\n                  contentPosition != null && [\n                    'd-flex justify-content-center',\n                    {\n                      'align-items-start': contentPosition === 'top',\n                      'align-items-center': contentPosition === 'center',\n                      'align-items-end': contentPosition === 'bottom',\n                    },\n                  ],\n                )}\n              >\n                {children}\n              </div>\n            </div>\n          </FocusBoundary>\n        </DimmerContentWrapper>\n      </CSSTransition>\n    </DimmerWrapper>\n  );\n};\n\nconst DimmerWrapper: React.ComponentType<{\n  open: boolean;\n  hasNotExited: boolean;\n  children: React.ReactNode;\n}> = ({ open, hasNotExited, children }) => {\n  const { screenMode, theme } = useTheme();\n\n  return open || hasNotExited ? (\n    <ThemeProvider\n      theme=\"personal\"\n      screenMode={theme === 'personal' ? screenMode : 'light'}\n      isNotRootProvider\n    >\n      {children}\n    </ThemeProvider>\n  ) : (\n    <>{children}</>\n  );\n};\n\nexport const DimmerContentWrapper = ({\n  children,\n  scrollBody,\n}: {\n  children: React.ReactElement;\n  scrollBody: boolean;\n}) => {\n  useEffect(() => {\n    if (scrollBody) {\n      addNoScrollClass();\n    }\n\n    return () => {\n      if (scrollBody) {\n        removeNoScrollClass();\n      }\n    };\n  }, [scrollBody]);\n\n  return children;\n};\n\n// Export without the Portal for tests only\nexport { Dimmer };\n\nexport default withNextPortal(Dimmer);\n"],"names":["EXIT_ANIMATION","dimmerManager","DimmerManager","handleTouchMove","event","isTouchedElementDimmer","target","classList","contains","isIosDevice","stopPropagation","preventDefault","Dimmer","children","className","disableClickToClose","contentPosition","fadeContentOnEnter","fadeContentOnExit","open","scrollable","transparent","onClose","hasNotExited","setHasNotExited","useState","dimmerReference","useRef","closeOnClick","current","handleClick","handleKeyDown","useCallback","key","isTop","onEnter","add","onExited","remove","useEffect","localReferenceCopy","document","addEventListener","passive","removeEventListener","_jsx","DimmerWrapper","CSSTransition","nodeRef","in","appear","timeout","enter","exit","classNames","enterDone","unmountOnExit","DimmerContentWrapper","scrollBody","FocusBoundary","ref","role","onClick","screenMode","theme","useTheme","ThemeProvider","isNotRootProvider","_Fragment","addNoScrollClass","removeNoScrollClass","withNextPortal"],"mappings":"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"}

package/build/dimmer/Dimmer.mjs

@@ -0,0 +1,172 @@
+import { useTheme, ThemeProvider } from '@wise/components-theming';
+import classNames from 'classnames';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { CSSTransition } from 'react-transition-group';
+import { isIosDevice } from '../common/deviceDetection/deviceDetection.mjs';
+import FocusBoundary from '../common/focusBoundary/FocusBoundary.mjs';
+import withNextPortalWrapper from '../withNextPortal/withNextPortal.mjs';
+import DimmerManager from './dimmerManager/DimmerManager.mjs';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { addNoScrollClass, removeNoScrollClass } from '../common/DOMOperations/DOMOperations.mjs';
+
+const EXIT_ANIMATION = 350;
+const dimmerManager = new DimmerManager();
+const handleTouchMove = event => {
+  const isTouchedElementDimmer = event.target.classList.contains('dimmer');
+  // disable scroll on iOS devices for Dimmer area
+  // this is because of bug in WebKit https://bugs.webkit.org/show_bug.cgi?id=220908
+  // note: scrolling still works for children(s) as expected
+  if (isIosDevice() && isTouchedElementDimmer) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+};
+const Dimmer = ({
+  children,
+  className,
+  disableClickToClose = false,
+  contentPosition,
+  fadeContentOnEnter = false,
+  fadeContentOnExit = false,
+  open = false,
+  scrollable = false,
+  transparent = false,
+  onClose
+}) => {
+  const [hasNotExited, setHasNotExited] = useState(false);
+  const dimmerReference = useRef(null);
+  const closeOnClick = event => {
+    if (event.target === dimmerReference.current) {
+      onClose?.(event);
+    }
+  };
+  const handleClick = event => {
+    if (disableClickToClose || !onClose) {
+      return;
+    }
+    closeOnClick(event);
+  };
+  const handleKeyDown = useCallback(event => {
+    if (event.key !== 'Escape') {
+      return;
+    }
+    event.stopPropagation();
+    if (onClose && dimmerReference.current && dimmerManager.isTop(dimmerReference.current)) {
+      onClose(event);
+    }
+  }, [onClose]);
+  const onEnter = () => {
+    setHasNotExited(true);
+    if (dimmerReference.current) {
+      dimmerManager.add(dimmerReference.current);
+    }
+  };
+  const onExited = () => {
+    setHasNotExited(false);
+    if (dimmerReference.current) {
+      dimmerManager.remove(dimmerReference.current);
+    }
+  };
+  useEffect(() => {
+    const localReferenceCopy = dimmerReference.current;
+    if (open) {
+      document.addEventListener('keydown', handleKeyDown);
+      localReferenceCopy?.addEventListener('touchmove', handleTouchMove, {
+        passive: true
+      });
+    }
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+      localReferenceCopy?.removeEventListener('touchmove', handleTouchMove);
+    };
+  }, [handleKeyDown, open]);
+  return /*#__PURE__*/jsx(DimmerWrapper, {
+    open: open,
+    hasNotExited: hasNotExited,
+    children: /*#__PURE__*/jsx(CSSTransition, {
+      nodeRef: dimmerReference,
+      in: open,
+      appear: true
+      // Wait for animation to finish before unmount.
+      ,
+      timeout: {
+        enter: 0,
+        exit: EXIT_ANIMATION
+      },
+      classNames: {
+        enter: classNames({
+          'dimmer--enter-fade': fadeContentOnEnter
+        }),
+        enterDone: classNames('dimmer--enter-done', {
+          'dimmer--enter-fade': fadeContentOnEnter
+        }),
+        exit: classNames('dimmer--exit', {
+          'dimmer--exit-fade': fadeContentOnExit
+        })
+      },
+      unmountOnExit: true,
+      onEnter: onEnter,
+      onExited: onExited,
+      children: /*#__PURE__*/jsx(DimmerContentWrapper, {
+        scrollBody: !transparent,
+        children: /*#__PURE__*/jsx(FocusBoundary, {
+          children: /*#__PURE__*/jsx("div", {
+            ref: dimmerReference,
+            className: classNames('dimmer', {
+              'dimmer--scrollable': scrollable,
+              'dimmer--transparent': transparent
+            }, className),
+            role: "presentation",
+            onClick: handleClick,
+            children: /*#__PURE__*/jsx("div", {
+              className: classNames('dimmer-content-positioner', contentPosition != null && ['d-flex justify-content-center', {
+                'align-items-start': contentPosition === 'top',
+                'align-items-center': contentPosition === 'center',
+                'align-items-end': contentPosition === 'bottom'
+              }]),
+              children: children
+            })
+          })
+        })
+      })
+    })
+  });
+};
+const DimmerWrapper = ({
+  open,
+  hasNotExited,
+  children
+}) => {
+  const {
+    screenMode,
+    theme
+  } = useTheme();
+  return open || hasNotExited ? /*#__PURE__*/jsx(ThemeProvider, {
+    theme: "personal",
+    screenMode: theme === 'personal' ? screenMode : 'light',
+    isNotRootProvider: true,
+    children: children
+  }) : /*#__PURE__*/jsx(Fragment, {
+    children: children
+  });
+};
+const DimmerContentWrapper = ({
+  children,
+  scrollBody
+}) => {
+  useEffect(() => {
+    if (scrollBody) {
+      addNoScrollClass();
+    }
+    return () => {
+      if (scrollBody) {
+        removeNoScrollClass();
+      }
+    };
+  }, [scrollBody]);
+  return children;
+};
+var Dimmer$1 = withNextPortalWrapper(Dimmer);
+
+export { Dimmer, DimmerContentWrapper, EXIT_ANIMATION, Dimmer$1 as default, handleTouchMove };
+//# sourceMappingURL=Dimmer.mjs.map

package/build/dimmer/Dimmer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dimmer.mjs","sources":["../../src/dimmer/Dimmer.tsx"],"sourcesContent":["import { ThemeProvider, useTheme } from '@wise/components-theming';\nimport classNames from 'classnames';\nimport { MouseEvent, ReactNode, useCallback, useEffect, useRef, useState } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport {\n  addNoScrollClass,\n  CommonProps,\n  PositionBottom,\n  PositionCenter,\n  PositionTop,\n  removeNoScrollClass,\n} from '../common';\nimport { isIosDevice } from '../common/deviceDetection';\nimport FocusBoundary from '../common/focusBoundary';\nimport withNextPortal from '../withNextPortal/withNextPortal';\n\nimport DimmerManager from './dimmerManager';\n\nexport const EXIT_ANIMATION = 350;\n\nconst dimmerManager = new DimmerManager();\n\nexport type DimmerProps = CommonProps & {\n  children?: ReactNode;\n  disableClickToClose?: boolean;\n  contentPosition?: PositionTop | PositionCenter | PositionBottom;\n  fadeContentOnEnter?: boolean;\n  fadeContentOnExit?: boolean;\n  open?: boolean;\n  scrollable?: boolean;\n  transparent?: boolean;\n  onClose?: (event: KeyboardEvent | MouseEvent) => void;\n};\n\nexport const handleTouchMove = (event: Event) => {\n  const isTouchedElementDimmer = (event.target as HTMLDivElement).classList.contains('dimmer');\n\n  // disable scroll on iOS devices for Dimmer area\n  // this is because of bug in WebKit https://bugs.webkit.org/show_bug.cgi?id=220908\n  // note: scrolling still works for children(s) as expected\n  if (isIosDevice() && isTouchedElementDimmer) {\n    event.stopPropagation();\n    event.preventDefault();\n  }\n};\n\nconst Dimmer = ({\n  children,\n  className,\n  disableClickToClose = false,\n  contentPosition,\n  fadeContentOnEnter = false,\n  fadeContentOnExit = false,\n  open = false,\n  scrollable = false,\n  transparent = false,\n  onClose,\n}: DimmerProps) => {\n  const [hasNotExited, setHasNotExited] = useState(false);\n  const dimmerReference = useRef<HTMLDivElement>(null);\n\n  const closeOnClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (event.target === dimmerReference.current) {\n      onClose?.(event);\n    }\n  };\n\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (disableClickToClose || !onClose) {\n      return;\n    }\n\n    closeOnClick(event);\n  };\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key !== 'Escape') {\n        return;\n      }\n      event.stopPropagation();\n\n      if (onClose && dimmerReference.current && dimmerManager.isTop(dimmerReference.current)) {\n        onClose(event);\n      }\n    },\n    [onClose],\n  );\n\n  const onEnter = () => {\n    setHasNotExited(true);\n\n    if (dimmerReference.current) {\n      dimmerManager.add(dimmerReference.current);\n    }\n  };\n  const onExited = () => {\n    setHasNotExited(false);\n\n    if (dimmerReference.current) {\n      dimmerManager.remove(dimmerReference.current);\n    }\n  };\n\n  useEffect(() => {\n    const localReferenceCopy = dimmerReference.current;\n\n    if (open) {\n      document.addEventListener('keydown', handleKeyDown);\n      localReferenceCopy?.addEventListener('touchmove', handleTouchMove, { passive: true });\n    }\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n\n      localReferenceCopy?.removeEventListener('touchmove', handleTouchMove);\n    };\n  }, [handleKeyDown, open]);\n\n  return (\n    <DimmerWrapper open={open} hasNotExited={hasNotExited}>\n      <CSSTransition\n        nodeRef={dimmerReference}\n        in={open}\n        appear\n        // Wait for animation to finish before unmount.\n        timeout={{ enter: 0, exit: EXIT_ANIMATION }}\n        classNames={{\n          enter: classNames({ 'dimmer--enter-fade': fadeContentOnEnter }),\n          enterDone: classNames('dimmer--enter-done', {\n            'dimmer--enter-fade': fadeContentOnEnter,\n          }),\n          exit: classNames('dimmer--exit', { 'dimmer--exit-fade': fadeContentOnExit }),\n        }}\n        unmountOnExit\n        onEnter={onEnter}\n        onExited={onExited}\n      >\n        <DimmerContentWrapper scrollBody={!transparent}>\n          <FocusBoundary>\n            <div\n              ref={dimmerReference}\n              className={classNames(\n                'dimmer',\n                { 'dimmer--scrollable': scrollable, 'dimmer--transparent': transparent },\n                className,\n              )}\n              role=\"presentation\"\n              onClick={handleClick}\n            >\n              <div\n                className={classNames(\n                  'dimmer-content-positioner',\n                  contentPosition != null && [\n                    'd-flex justify-content-center',\n                    {\n                      'align-items-start': contentPosition === 'top',\n                      'align-items-center': contentPosition === 'center',\n                      'align-items-end': contentPosition === 'bottom',\n                    },\n                  ],\n                )}\n              >\n                {children}\n              </div>\n            </div>\n          </FocusBoundary>\n        </DimmerContentWrapper>\n      </CSSTransition>\n    </DimmerWrapper>\n  );\n};\n\nconst DimmerWrapper: React.ComponentType<{\n  open: boolean;\n  hasNotExited: boolean;\n  children: React.ReactNode;\n}> = ({ open, hasNotExited, children }) => {\n  const { screenMode, theme } = useTheme();\n\n  return open || hasNotExited ? (\n    <ThemeProvider\n      theme=\"personal\"\n      screenMode={theme === 'personal' ? screenMode : 'light'}\n      isNotRootProvider\n    >\n      {children}\n    </ThemeProvider>\n  ) : (\n    <>{children}</>\n  );\n};\n\nexport const DimmerContentWrapper = ({\n  children,\n  scrollBody,\n}: {\n  children: React.ReactElement;\n  scrollBody: boolean;\n}) => {\n  useEffect(() => {\n    if (scrollBody) {\n      addNoScrollClass();\n    }\n\n    return () => {\n      if (scrollBody) {\n        removeNoScrollClass();\n      }\n    };\n  }, [scrollBody]);\n\n  return children;\n};\n\n// Export without the Portal for tests only\nexport { Dimmer };\n\nexport default withNextPortal(Dimmer);\n"],"names":["EXIT_ANIMATION","dimmerManager","DimmerManager","handleTouchMove","event","isTouchedElementDimmer","target","classList","contains","isIosDevice","stopPropagation","preventDefault","Dimmer","children","className","disableClickToClose","contentPosition","fadeContentOnEnter","fadeContentOnExit","open","scrollable","transparent","onClose","hasNotExited","setHasNotExited","useState","dimmerReference","useRef","closeOnClick","current","handleClick","handleKeyDown","useCallback","key","isTop","onEnter","add","onExited","remove","useEffect","localReferenceCopy","document","addEventListener","passive","removeEventListener","_jsx","DimmerWrapper","CSSTransition","nodeRef","in","appear","timeout","enter","exit","classNames","enterDone","unmountOnExit","DimmerContentWrapper","scrollBody","FocusBoundary","ref","role","onClick","screenMode","theme","useTheme","ThemeProvider","isNotRootProvider","_Fragment","addNoScrollClass","removeNoScrollClass","withNextPortal"],"mappings":"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"}

package/build/dimmer/dimmerManager/DimmerManager.js

@@ -0,0 +1,36 @@
+'use strict';
+
+/**
+ * Dimmer state management inspired by Material UI's ModalManager (https://github.com/mui-org/material-ui)
+ */
+class DimmerManager {
+  /**
+   * Dimmer refs
+   */
+  dimmers;
+  constructor() {
+    this.dimmers = [];
+  }
+  add(dimmer) {
+    let dimmerIndex = this.dimmers.indexOf(dimmer);
+    if (dimmerIndex !== -1) {
+      return dimmerIndex;
+    }
+    dimmerIndex = this.dimmers.length;
+    this.dimmers.push(dimmer);
+    return dimmerIndex;
+  }
+  remove(dimmer) {
+    const dimmerIndex = this.dimmers.indexOf(dimmer);
+    if (dimmerIndex !== -1) {
+      this.dimmers.splice(dimmerIndex, 1);
+    }
+    return dimmerIndex;
+  }
+  isTop(dimmer) {
+    return this.dimmers.length > 0 && this.dimmers[this.dimmers.length - 1] === dimmer;
+  }
+}
+
+module.exports = DimmerManager;
+//# sourceMappingURL=DimmerManager.js.map

package/build/dimmer/dimmerManager/DimmerManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DimmerManager.js","sources":["../../../src/dimmer/dimmerManager/DimmerManager.ts"],"sourcesContent":["/**\n * Dimmer state management inspired by Material UI's ModalManager (https://github.com/mui-org/material-ui)\n */\nexport default class DimmerManager {\n  /**\n   * Dimmer refs\n   */\n  private dimmers: Element[];\n\n  constructor() {\n    this.dimmers = [];\n  }\n\n  add(dimmer: Element): number {\n    let dimmerIndex = this.dimmers.indexOf(dimmer);\n    if (dimmerIndex !== -1) {\n      return dimmerIndex;\n    }\n\n    dimmerIndex = this.dimmers.length;\n    this.dimmers.push(dimmer);\n    return dimmerIndex;\n  }\n\n  remove(dimmer: Element): number {\n    const dimmerIndex = this.dimmers.indexOf(dimmer);\n\n    if (dimmerIndex !== -1) {\n      this.dimmers.splice(dimmerIndex, 1);\n    }\n    return dimmerIndex;\n  }\n\n  isTop(dimmer: Element): boolean {\n    return this.dimmers.length > 0 && this.dimmers[this.dimmers.length - 1] === dimmer;\n  }\n}\n"],"names":["DimmerManager","dimmers","constructor","add","dimmer","dimmerIndex","indexOf","length","push","remove","splice","isTop"],"mappings":";;AAAA;;AAEG;AACW,MAAOA,aAAa,CAAA;AAChC;;AAEG;EACKC,OAAO,CAAA;AAEfC,EAAAA,WAAAA,GAAA;IACE,IAAI,CAACD,OAAO,GAAG,EAAE,CAAA;AACnB,GAAA;EAEAE,GAAGA,CAACC,MAAe,EAAA;IACjB,IAAIC,WAAW,GAAG,IAAI,CAACJ,OAAO,CAACK,OAAO,CAACF,MAAM,CAAC,CAAA;AAC9C,IAAA,IAAIC,WAAW,KAAK,CAAC,CAAC,EAAE;AACtB,MAAA,OAAOA,WAAW,CAAA;AACpB,KAAA;AAEAA,IAAAA,WAAW,GAAG,IAAI,CAACJ,OAAO,CAACM,MAAM,CAAA;AACjC,IAAA,IAAI,CAACN,OAAO,CAACO,IAAI,CAACJ,MAAM,CAAC,CAAA;AACzB,IAAA,OAAOC,WAAW,CAAA;AACpB,GAAA;EAEAI,MAAMA,CAACL,MAAe,EAAA;IACpB,MAAMC,WAAW,GAAG,IAAI,CAACJ,OAAO,CAACK,OAAO,CAACF,MAAM,CAAC,CAAA;AAEhD,IAAA,IAAIC,WAAW,KAAK,CAAC,CAAC,EAAE;MACtB,IAAI,CAACJ,OAAO,CAACS,MAAM,CAACL,WAAW,EAAE,CAAC,CAAC,CAAA;AACrC,KAAA;AACA,IAAA,OAAOA,WAAW,CAAA;AACpB,GAAA;EAEAM,KAAKA,CAACP,MAAe,EAAA;IACnB,OAAO,IAAI,CAACH,OAAO,CAACM,MAAM,GAAG,CAAC,IAAI,IAAI,CAACN,OAAO,CAAC,IAAI,CAACA,OAAO,CAACM,MAAM,GAAG,CAAC,CAAC,KAAKH,MAAM,CAAA;AACpF,GAAA;AACD;;;;"}

package/build/dimmer/dimmerManager/DimmerManager.mjs

@@ -0,0 +1,34 @@
+/**
+ * Dimmer state management inspired by Material UI's ModalManager (https://github.com/mui-org/material-ui)
+ */
+class DimmerManager {
+  /**
+   * Dimmer refs
+   */
+  dimmers;
+  constructor() {
+    this.dimmers = [];
+  }
+  add(dimmer) {
+    let dimmerIndex = this.dimmers.indexOf(dimmer);
+    if (dimmerIndex !== -1) {
+      return dimmerIndex;
+    }
+    dimmerIndex = this.dimmers.length;
+    this.dimmers.push(dimmer);
+    return dimmerIndex;
+  }
+  remove(dimmer) {
+    const dimmerIndex = this.dimmers.indexOf(dimmer);
+    if (dimmerIndex !== -1) {
+      this.dimmers.splice(dimmerIndex, 1);
+    }
+    return dimmerIndex;
+  }
+  isTop(dimmer) {
+    return this.dimmers.length > 0 && this.dimmers[this.dimmers.length - 1] === dimmer;
+  }
+}
+
+export { DimmerManager as default };
+//# sourceMappingURL=DimmerManager.mjs.map

package/build/dimmer/dimmerManager/DimmerManager.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DimmerManager.mjs","sources":["../../../src/dimmer/dimmerManager/DimmerManager.ts"],"sourcesContent":["/**\n * Dimmer state management inspired by Material UI's ModalManager (https://github.com/mui-org/material-ui)\n */\nexport default class DimmerManager {\n  /**\n   * Dimmer refs\n   */\n  private dimmers: Element[];\n\n  constructor() {\n    this.dimmers = [];\n  }\n\n  add(dimmer: Element): number {\n    let dimmerIndex = this.dimmers.indexOf(dimmer);\n    if (dimmerIndex !== -1) {\n      return dimmerIndex;\n    }\n\n    dimmerIndex = this.dimmers.length;\n    this.dimmers.push(dimmer);\n    return dimmerIndex;\n  }\n\n  remove(dimmer: Element): number {\n    const dimmerIndex = this.dimmers.indexOf(dimmer);\n\n    if (dimmerIndex !== -1) {\n      this.dimmers.splice(dimmerIndex, 1);\n    }\n    return dimmerIndex;\n  }\n\n  isTop(dimmer: Element): boolean {\n    return this.dimmers.length > 0 && this.dimmers[this.dimmers.length - 1] === dimmer;\n  }\n}\n"],"names":["DimmerManager","dimmers","constructor","add","dimmer","dimmerIndex","indexOf","length","push","remove","splice","isTop"],"mappings":"AAAA;;AAEG;AACW,MAAOA,aAAa,CAAA;AAChC;;AAEG;EACKC,OAAO,CAAA;AAEfC,EAAAA,WAAAA,GAAA;IACE,IAAI,CAACD,OAAO,GAAG,EAAE,CAAA;AACnB,GAAA;EAEAE,GAAGA,CAACC,MAAe,EAAA;IACjB,IAAIC,WAAW,GAAG,IAAI,CAACJ,OAAO,CAACK,OAAO,CAACF,MAAM,CAAC,CAAA;AAC9C,IAAA,IAAIC,WAAW,KAAK,CAAC,CAAC,EAAE;AACtB,MAAA,OAAOA,WAAW,CAAA;AACpB,KAAA;AAEAA,IAAAA,WAAW,GAAG,IAAI,CAACJ,OAAO,CAACM,MAAM,CAAA;AACjC,IAAA,IAAI,CAACN,OAAO,CAACO,IAAI,CAACJ,MAAM,CAAC,CAAA;AACzB,IAAA,OAAOC,WAAW,CAAA;AACpB,GAAA;EAEAI,MAAMA,CAACL,MAAe,EAAA;IACpB,MAAMC,WAAW,GAAG,IAAI,CAACJ,OAAO,CAACK,OAAO,CAACF,MAAM,CAAC,CAAA;AAEhD,IAAA,IAAIC,WAAW,KAAK,CAAC,CAAC,EAAE;MACtB,IAAI,CAACJ,OAAO,CAACS,MAAM,CAACL,WAAW,EAAE,CAAC,CAAC,CAAA;AACrC,KAAA;AACA,IAAA,OAAOA,WAAW,CAAA;AACpB,GAAA;EAEAM,KAAKA,CAACP,MAAe,EAAA;IACnB,OAAO,IAAI,CAACH,OAAO,CAACM,MAAM,GAAG,CAAC,IAAI,IAAI,CAACN,OAAO,CAAC,IAAI,CAACA,OAAO,CAACM,MAAM,GAAG,CAAC,CAAC,KAAKH,MAAM,CAAA;AACpF,GAAA;AACD;;;;"}

package/build/display/Display.js

@@ -0,0 +1,26 @@
+'use strict';
+
+var classNames = require('classnames');
+var jsxRuntime = require('react/jsx-runtime');
+var typography = require('../common/propsValues/typography.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+function Display({
+  as: Heading = 'h1',
+  type = typography.Typography.DISPLAY_LARGE,
+  children,
+  className,
+  id
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(Heading, {
+    id: id,
+    className: classNames__default.default(`np-text-${type}`, 'text-primary', className),
+    children: children
+  });
+}
+
+module.exports = Display;
+//# sourceMappingURL=Display.js.map

package/build/display/Display.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Display.js","sources":["../../src/display/Display.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { PropsWithChildren } from 'react';\n\nimport { DisplayTypes, Typography } from '../common';\n\ntype Props = PropsWithChildren<{\n  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  id?: string;\n  type?: DisplayTypes;\n  className?: string;\n}>;\n\nfunction Display({\n  as: Heading = 'h1',\n  type = Typography.DISPLAY_LARGE,\n  children,\n  className,\n  id,\n}: Props) {\n  return (\n    <Heading id={id} className={classNames(`np-text-${type}`, 'text-primary', className)}>\n      {children}\n    </Heading>\n  );\n}\n\nexport default Display;\n"],"names":["Display","as","Heading","type","Typography","DISPLAY_LARGE","children","className","id","_jsx","classNames"],"mappings":";;;;;;;;;;AAYA,SAASA,OAAOA,CAAC;EACfC,EAAE,EAAEC,OAAO,GAAG,IAAI;EAClBC,IAAI,GAAGC,qBAAU,CAACC,aAAa;EAC/BC,QAAQ;EACRC,SAAS;AACTC,EAAAA,EAAAA;AACM,CAAA,EAAA;EACN,oBACEC,cAAA,CAACP,OAAO,EAAA;AAACM,IAAAA,EAAE,EAAEA,EAAG;IAACD,SAAS,EAAEG,2BAAU,CAAY,CAAAP,QAAAA,EAAAA,IAAM,EAAA,EAAE,cAAc,EAAEI,SAAS,CAAE;AAAAD,IAAAA,QAAA,EAClFA,QAAAA;AAAQ,GACF,CAAC,CAAA;AAEd;;;;"}

package/build/display/Display.mjs

@@ -0,0 +1,20 @@
+import classNames from 'classnames';
+import { jsx } from 'react/jsx-runtime';
+import { Typography } from '../common/propsValues/typography.mjs';
+
+function Display({
+  as: Heading = 'h1',
+  type = Typography.DISPLAY_LARGE,
+  children,
+  className,
+  id
+}) {
+  return /*#__PURE__*/jsx(Heading, {
+    id: id,
+    className: classNames(`np-text-${type}`, 'text-primary', className),
+    children: children
+  });
+}
+
+export { Display as default };
+//# sourceMappingURL=Display.mjs.map

package/build/display/Display.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Display.mjs","sources":["../../src/display/Display.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { PropsWithChildren } from 'react';\n\nimport { DisplayTypes, Typography } from '../common';\n\ntype Props = PropsWithChildren<{\n  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  id?: string;\n  type?: DisplayTypes;\n  className?: string;\n}>;\n\nfunction Display({\n  as: Heading = 'h1',\n  type = Typography.DISPLAY_LARGE,\n  children,\n  className,\n  id,\n}: Props) {\n  return (\n    <Heading id={id} className={classNames(`np-text-${type}`, 'text-primary', className)}>\n      {children}\n    </Heading>\n  );\n}\n\nexport default Display;\n"],"names":["Display","as","Heading","type","Typography","DISPLAY_LARGE","children","className","id","_jsx","classNames"],"mappings":";;;;AAYA,SAASA,OAAOA,CAAC;EACfC,EAAE,EAAEC,OAAO,GAAG,IAAI;EAClBC,IAAI,GAAGC,UAAU,CAACC,aAAa;EAC/BC,QAAQ;EACRC,SAAS;AACTC,EAAAA,EAAAA;AACM,CAAA,EAAA;EACN,oBACEC,GAAA,CAACP,OAAO,EAAA;AAACM,IAAAA,EAAE,EAAEA,EAAG;IAACD,SAAS,EAAEG,UAAU,CAAY,CAAAP,QAAAA,EAAAA,IAAM,EAAA,EAAE,cAAc,EAAEI,SAAS,CAAE;AAAAD,IAAAA,QAAA,EAClFA,QAAAA;AAAQ,GACF,CAAC,CAAA;AAEd;;;;"}

package/build/drawer/Drawer.js

@@ -0,0 +1,68 @@
+'use strict';
+
+var classNames = require('classnames');
+var React = require('react');
+var CloseButton = require('../common/closeButton/CloseButton.js');
+var Dimmer = require('../dimmer/Dimmer.js');
+var SlidingPanel = require('../slidingPanel/SlidingPanel.js');
+var Title = require('../title/Title.js');
+var jsxRuntime = require('react/jsx-runtime');
+var logActionRequired = require('../utilities/logActionRequired.js');
+var useLayout = require('../common/hooks/useLayout/useLayout.js');
+var position = require('../common/propsValues/position.js');
+var typography = require('../common/propsValues/typography.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+function Drawer({
+  children,
+  className,
+  footerContent,
+  headerTitle,
+  onClose,
+  open = false,
+  position: position$1 = 'right'
+}) {
+  logActionRequired.logActionRequiredIf('Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.', !onClose);
+  const {
+    isMobile
+  } = useLayout.useLayout();
+  const titleId = React.useId();
+  return /*#__PURE__*/jsxRuntime.jsx(Dimmer.default, {
+    open: open,
+    onClose: onClose,
+    children: /*#__PURE__*/jsxRuntime.jsx(SlidingPanel.default, {
+      open: open,
+      position: isMobile ? position.Position.BOTTOM : position$1,
+      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+        role: "dialog",
+        "aria-modal": true,
+        "aria-labelledby": headerTitle ? titleId : undefined,
+        className: classNames__default.default('np-drawer', className),
+        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: classNames__default.default('np-drawer-header', {
+            'np-drawer-header--withborder': headerTitle
+          }),
+          children: [headerTitle && /*#__PURE__*/jsxRuntime.jsx(Title, {
+            id: titleId,
+            type: typography.Typography.TITLE_BODY,
+            children: headerTitle
+          }), /*#__PURE__*/jsxRuntime.jsx(CloseButton.CloseButton, {
+            onClick: onClose
+          })]
+        }), children && /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: classNames__default.default('np-drawer-content'),
+          children: children
+        }), footerContent && /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: classNames__default.default('np-drawer-footer'),
+          children: footerContent
+        })]
+      })
+    })
+  });
+}
+
+module.exports = Drawer;
+//# sourceMappingURL=Drawer.js.map

package/build/drawer/Drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.js","sources":["../../src/drawer/Drawer.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport SlidingPanel from '../slidingPanel';\nimport Title from '../title';\nimport { logActionRequiredIf } from '../utilities';\n\nexport interface DrawerProps {\n  /** The content to appear in the drawer body. */\n  children?: React.ReactNode;\n  className?: string;\n  /** The content to appear in the drawer footer. */\n  footerContent?: React.ReactNode;\n  /** The content to appear in the drawer header. */\n  headerTitle?: React.ReactNode;\n  /** The status of Drawer either open or not. */\n  open?: boolean;\n  /** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */\n  position?: `${Position.LEFT | Position.RIGHT | Position.BOTTOM}`;\n  /** The action to perform on close click. */\n  onClose?: (event: KeyboardEvent | React.MouseEvent) => void;\n}\n\nexport default function Drawer({\n  children,\n  className,\n  footerContent,\n  headerTitle,\n  onClose,\n  open = false,\n  position = 'right',\n}: DrawerProps) {\n  logActionRequiredIf(\n    'Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.',\n    !onClose,\n  );\n\n  const { isMobile } = useLayout();\n  const titleId = useId();\n\n  return (\n    <Dimmer open={open} onClose={onClose}>\n      <SlidingPanel open={open} position={isMobile ? Position.BOTTOM : position}>\n        <div\n          role=\"dialog\"\n          aria-modal\n          aria-labelledby={headerTitle ? titleId : undefined}\n          className={classNames('np-drawer', className)}\n        >\n          <div\n            className={classNames('np-drawer-header', {\n              'np-drawer-header--withborder': headerTitle,\n            })}\n          >\n            {headerTitle && (\n              <Title id={titleId} type={Typography.TITLE_BODY}>\n                {headerTitle}\n              </Title>\n            )}\n            <CloseButton onClick={onClose} />\n          </div>\n          {children && <div className={classNames('np-drawer-content')}>{children}</div>}\n          {footerContent && <div className={classNames('np-drawer-footer')}>{footerContent}</div>}\n        </div>\n      </SlidingPanel>\n    </Dimmer>\n  );\n}\n"],"names":["Drawer","children","className","footerContent","headerTitle","onClose","open","position","logActionRequiredIf","isMobile","useLayout","titleId","useId","_jsx","Dimmer","SlidingPanel","Position","BOTTOM","_jsxs","role","undefined","classNames","Title","id","type","Typography","TITLE_BODY","CloseButton","onClick"],"mappings":";;;;;;;;;;;;;;;;;;AA2BwB,SAAAA,MAAMA,CAAC;EAC7BC,QAAQ;EACRC,SAAS;EACTC,aAAa;EACbC,WAAW;EACXC,OAAO;AACPC,EAAAA,IAAI,GAAG,KAAK;AACZC,YAAAA,UAAQ,GAAG,OAAA;AACC,CAAA,EAAA;AACZC,EAAAA,qCAAmB,CACjB,8GAA8G,EAC9G,CAACH,OAAO,CACT,CAAA;EAED,MAAM;AAAEI,IAAAA,QAAAA;GAAU,GAAGC,mBAAS,EAAE,CAAA;AAChC,EAAA,MAAMC,OAAO,GAAGC,WAAK,EAAE,CAAA;EAEvB,oBACEC,cAAA,CAACC,cAAM,EAAA;AAACR,IAAAA,IAAI,EAAEA,IAAK;AAACD,IAAAA,OAAO,EAAEA,OAAQ;IAAAJ,QAAA,eACnCY,cAAA,CAACE,oBAAY,EAAA;AAACT,MAAAA,IAAI,EAAEA,IAAK;AAACC,MAAAA,QAAQ,EAAEE,QAAQ,GAAGO,iBAAQ,CAACC,MAAM,GAAGV,UAAS;AAAAN,MAAAA,QAAA,eACxEiB,eAAA,CAAA,KAAA,EAAA;AACEC,QAAAA,IAAI,EAAC,QAAQ;QACb,YAAU,EAAA,IAAA;AACV,QAAA,iBAAA,EAAiBf,WAAW,GAAGO,OAAO,GAAGS,SAAU;AACnDlB,QAAAA,SAAS,EAAEmB,2BAAU,CAAC,WAAW,EAAEnB,SAAS,CAAE;AAAAD,QAAAA,QAAA,gBAE9CiB,eAAA,CAAA,KAAA,EAAA;AACEhB,UAAAA,SAAS,EAAEmB,2BAAU,CAAC,kBAAkB,EAAE;AACxC,YAAA,8BAA8B,EAAEjB,WAAAA;AACjC,WAAA,CAAE;AAAAH,UAAAA,QAAA,EAEFG,CAAAA,WAAW,iBACVS,cAAA,CAACS,KAAK,EAAA;AAACC,YAAAA,EAAE,EAAEZ,OAAQ;YAACa,IAAI,EAAEC,qBAAU,CAACC,UAAW;AAAAzB,YAAAA,QAAA,EAC7CG,WAAAA;AAAW,WACP,CACR,eACDS,cAAA,CAACc,uBAAW,EAAA;AAACC,YAAAA,OAAO,EAAEvB,OAAAA;AAAQ,WAChC,CAAA,CAAA;AAAA,SAAK,CACL,EAACJ,QAAQ,iBAAIY,cAAA,CAAA,KAAA,EAAA;AAAKX,UAAAA,SAAS,EAAEmB,2BAAU,CAAC,mBAAmB,CAAE;AAAApB,UAAAA,QAAA,EAAEA,QAAAA;AAAQ,SAAM,CAAC,EAC7EE,aAAa,iBAAIU,cAAA,CAAA,KAAA,EAAA;AAAKX,UAAAA,SAAS,EAAEmB,2BAAU,CAAC,kBAAkB,CAAE;AAAApB,UAAAA,QAAA,EAAEE,aAAAA;AAAa,SAAM,CAAC,CAAA;OACpF,CAAA;KACO,CAAA;AAChB,GAAQ,CAAC,CAAA;AAEb;;;;"}