@activecollab/components 1.0.346 → 1.0.348

package/dist/cjs/components/Dialog/Dialog.js

@@ -15,11 +15,13 @@ var _DialogActions = require("./DialogActions");
 var _DialogContent = require("./DialogContent");
 var _DialogContentDivider = require("./DialogContentDivider");
 var _DialogTitle = require("./DialogTitle");
+var _excluded = ["children", "open", "onClose", "className", "enableBackgroundClick", "disableCloseOnEsc", "animate", "onClickOutside"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-// import { DialogContext } from "./DialogContext";
-
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var _Dialog = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var children = _ref.children,
     _ref$open = _ref.open,
@@ -31,7 +33,9 @@ var _Dialog = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     _ref$disableCloseOnEs = _ref.disableCloseOnEsc,
     disableCloseOnEsc = _ref$disableCloseOnEs === void 0 ? false : _ref$disableCloseOnEs,
     _ref$animate = _ref.animate,
-    animate = _ref$animate === void 0 ? "slide" : _ref$animate;
+    animate = _ref$animate === void 0 ? "slide" : _ref$animate,
+    onClickOutside = _ref.onClickOutside,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var animateDialog = function animateDialog() {
     switch (animate) {
       case "fade":
@@ -51,13 +55,14 @@ var _Dialog = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   return (
     /*#__PURE__*/
     // <DialogContext.Provider value={{}}>
-    _react.default.createElement(_Modal.Modal, {
+    _react.default.createElement(_Modal.Modal, _extends({
       ref: ref,
       open: open,
       onClose: onClose,
       disableBackgroundClick: !enableBackgroundClick,
-      disableCloseOnEsc: disableCloseOnEsc
-    }, animateDialog())
+      disableCloseOnEsc: disableCloseOnEsc,
+      onClickOutside: onClickOutside
+    }, rest), animateDialog())
     // </DialogContext.Provider>
   );
 });

package/dist/cjs/components/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","names":["_Dialog","forwardRef","ref","children","open","onClose","className","enableBackgroundClick","disableCloseOnEsc","animate","animateDialog","classnames","displayName","Dialog","Object","assign","Title","DialogTitle","Content","DialogContent","ContentDivider","DialogContentDivider","Actions","DialogActions"],"sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import classnames from \"classnames\";\nimport React, { forwardRef, PropsWithChildren } from \"react\";\nimport { Modal } from \"../Modal\";\nimport { SlideFromTop } from \"../Transitions/SlideFromTop\";\nimport { StyledDialog } from \"./Styles\";\n\n// import { DialogContext } from \"./DialogContext\";\n\nimport { Fade } from \"../Transitions\";\nimport { DialogActions } from \"./DialogActions\";\nimport { DialogContent } from \"./DialogContent\";\nimport { DialogContentDivider } from \"./DialogContentDivider\";\nimport { DialogTitle } from \"./DialogTitle\";\n\nexport interface DialogProps {\n  open?: boolean;\n  onClose?: () => void;\n  className?: string;\n  enableBackgroundClick?: boolean;\n  disableCloseOnEsc?: boolean;\n  animate?: \"fade\" | \"slide\";\n}\n\nexport const _Dialog = forwardRef<\n  HTMLDivElement,\n  PropsWithChildren<DialogProps>\n>(\n  (\n    {\n      children,\n      open = false,\n      onClose,\n      className,\n      enableBackgroundClick = false,\n      disableCloseOnEsc = false,\n      animate = \"slide\",\n    },\n    ref\n  ) => {\n    const animateDialog = () => {\n      switch (animate) {\n        case \"fade\":\n          return (\n            <Fade in={open}>\n              <StyledDialog className={classnames(\"c-dialog\", className)}>\n                {children}\n              </StyledDialog>\n            </Fade>\n          );\n        default:\n          return (\n            <SlideFromTop in={open}>\n              <StyledDialog className={classnames(\"c-dialog\", className)}>\n                {children}\n              </StyledDialog>\n            </SlideFromTop>\n          );\n      }\n    };\n\n    return (\n      // <DialogContext.Provider value={{}}>\n\n      <Modal\n        ref={ref}\n        open={open}\n        onClose={onClose}\n        disableBackgroundClick={!enableBackgroundClick}\n        disableCloseOnEsc={disableCloseOnEsc}\n      >\n        {animateDialog()}\n      </Modal>\n      // </DialogContext.Provider>\n    );\n  }\n);\n\n_Dialog.displayName = \"Dialog\";\n\n// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/34757\nexport const Dialog = Object.assign({}, _Dialog, {\n  Title: DialogTitle,\n  Content: DialogContent,\n  ContentDivider: DialogContentDivider,\n  Actions: DialogActions,\n});\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AAIA;AACA;AACA;AACA;AACA;AAA4C;AAAA;AAAA;AAN5C;;AAiBO,IAAMA,OAAO,gBAAG,IAAAC,iBAAU,EAI/B,gBAUEC,GAAG,EACA;EAAA,IATDC,QAAQ,QAARA,QAAQ;IAAA,iBACRC,IAAI;IAAJA,IAAI,0BAAG,KAAK;IACZC,OAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IAAA,6BACTC,qBAAqB;IAArBA,qBAAqB,sCAAG,KAAK;IAAA,6BAC7BC,iBAAiB;IAAjBA,iBAAiB,sCAAG,KAAK;IAAA,oBACzBC,OAAO;IAAPA,OAAO,6BAAG,OAAO;EAInB,IAAMC,aAAa,GAAG,SAAhBA,aAAa,GAAS;IAC1B,QAAQD,OAAO;MACb,KAAK,MAAM;QACT,oBACE,6BAAC,iBAAI;UAAC,EAAE,EAAEL;QAAK,gBACb,6BAAC,oBAAY;UAAC,SAAS,EAAE,IAAAO,mBAAU,EAAC,UAAU,EAAEL,SAAS;QAAE,GACxDH,QAAQ,CACI,CACV;MAEX;QACE,oBACE,6BAAC,0BAAY;UAAC,EAAE,EAAEC;QAAK,gBACrB,6BAAC,oBAAY;UAAC,SAAS,EAAE,IAAAO,mBAAU,EAAC,UAAU,EAAEL,SAAS;QAAE,GACxDH,QAAQ,CACI,CACF;IACf;EAER,CAAC;EAED;IAAA;IACE;IAEA,6BAAC,YAAK;MACJ,GAAG,EAAED,GAAI;MACT,IAAI,EAAEE,IAAK;MACX,OAAO,EAAEC,OAAQ;MACjB,sBAAsB,EAAE,CAACE,qBAAsB;MAC/C,iBAAiB,EAAEC;IAAkB,GAEpCE,aAAa,EAAE;IAElB;EAAA;AAEJ,CAAC,CACF;AAAC;AAEFV,OAAO,CAACY,WAAW,GAAG,QAAQ;;AAE9B;AACO,IAAMC,MAAM,GAAGC,MAAM,CAACC,MAAM,CAAC,CAAC,CAAC,EAAEf,OAAO,EAAE;EAC/CgB,KAAK,EAAEC,wBAAW;EAClBC,OAAO,EAAEC,4BAAa;EACtBC,cAAc,EAAEC,0CAAoB;EACpCC,OAAO,EAAEC;AACX,CAAC,CAAC;AAAC"}
+{"version":3,"file":"Dialog.js","names":["_Dialog","forwardRef","ref","children","open","onClose","className","enableBackgroundClick","disableCloseOnEsc","animate","onClickOutside","rest","animateDialog","classnames","displayName","Dialog","Object","assign","Title","DialogTitle","Content","DialogContent","ContentDivider","DialogContentDivider","Actions","DialogActions"],"sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import classnames from \"classnames\";\nimport React, { forwardRef, HTMLAttributes, PropsWithChildren } from \"react\";\nimport { Modal } from \"../Modal\";\nimport { SlideFromTop } from \"../Transitions/SlideFromTop\";\nimport { StyledDialog } from \"./Styles\";\n\n// import { DialogContext } from \"./DialogContext\";\n\nimport { Fade } from \"../Transitions\";\nimport { DialogActions } from \"./DialogActions\";\nimport { DialogContent } from \"./DialogContent\";\nimport { DialogContentDivider } from \"./DialogContentDivider\";\nimport { DialogTitle } from \"./DialogTitle\";\n\nexport interface DialogProps extends HTMLAttributes<HTMLDivElement> {\n  open?: boolean;\n  onClose?: () => void;\n  className?: string;\n  enableBackgroundClick?: boolean;\n  disableCloseOnEsc?: boolean;\n  animate?: \"fade\" | \"slide\";\n  onClickOutside?: (event) => void;\n}\n\nexport const _Dialog = forwardRef<\n  HTMLDivElement,\n  PropsWithChildren<DialogProps>\n>(\n  (\n    {\n      children,\n      open = false,\n      onClose,\n      className,\n      enableBackgroundClick = false,\n      disableCloseOnEsc = false,\n      animate = \"slide\",\n      onClickOutside,\n      ...rest\n    },\n    ref\n  ) => {\n    const animateDialog = () => {\n      switch (animate) {\n        case \"fade\":\n          return (\n            <Fade in={open}>\n              <StyledDialog className={classnames(\"c-dialog\", className)}>\n                {children}\n              </StyledDialog>\n            </Fade>\n          );\n        default:\n          return (\n            <SlideFromTop in={open}>\n              <StyledDialog className={classnames(\"c-dialog\", className)}>\n                {children}\n              </StyledDialog>\n            </SlideFromTop>\n          );\n      }\n    };\n\n    return (\n      // <DialogContext.Provider value={{}}>\n\n      <Modal\n        ref={ref}\n        open={open}\n        onClose={onClose}\n        disableBackgroundClick={!enableBackgroundClick}\n        disableCloseOnEsc={disableCloseOnEsc}\n        onClickOutside={onClickOutside}\n        {...rest}\n      >\n        {animateDialog()}\n      </Modal>\n      // </DialogContext.Provider>\n    );\n  }\n);\n\n_Dialog.displayName = \"Dialog\";\n\n// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/34757\nexport const Dialog = Object.assign({}, _Dialog, {\n  Title: DialogTitle,\n  Content: DialogContent,\n  ContentDivider: DialogContentDivider,\n  Actions: DialogActions,\n});\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AAIA;AACA;AACA;AACA;AACA;AAA4C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYrC,IAAMA,OAAO,gBAAG,IAAAC,iBAAU,EAI/B,gBAYEC,GAAG,EACA;EAAA,IAXDC,QAAQ,QAARA,QAAQ;IAAA,iBACRC,IAAI;IAAJA,IAAI,0BAAG,KAAK;IACZC,OAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IAAA,6BACTC,qBAAqB;IAArBA,qBAAqB,sCAAG,KAAK;IAAA,6BAC7BC,iBAAiB;IAAjBA,iBAAiB,sCAAG,KAAK;IAAA,oBACzBC,OAAO;IAAPA,OAAO,6BAAG,OAAO;IACjBC,cAAc,QAAdA,cAAc;IACXC,IAAI;EAIT,IAAMC,aAAa,GAAG,SAAhBA,aAAa,GAAS;IAC1B,QAAQH,OAAO;MACb,KAAK,MAAM;QACT,oBACE,6BAAC,iBAAI;UAAC,EAAE,EAAEL;QAAK,gBACb,6BAAC,oBAAY;UAAC,SAAS,EAAE,IAAAS,mBAAU,EAAC,UAAU,EAAEP,SAAS;QAAE,GACxDH,QAAQ,CACI,CACV;MAEX;QACE,oBACE,6BAAC,0BAAY;UAAC,EAAE,EAAEC;QAAK,gBACrB,6BAAC,oBAAY;UAAC,SAAS,EAAE,IAAAS,mBAAU,EAAC,UAAU,EAAEP,SAAS;QAAE,GACxDH,QAAQ,CACI,CACF;IACf;EAER,CAAC;EAED;IAAA;IACE;IAEA,6BAAC,YAAK;MACJ,GAAG,EAAED,GAAI;MACT,IAAI,EAAEE,IAAK;MACX,OAAO,EAAEC,OAAQ;MACjB,sBAAsB,EAAE,CAACE,qBAAsB;MAC/C,iBAAiB,EAAEC,iBAAkB;MACrC,cAAc,EAAEE;IAAe,GAC3BC,IAAI,GAEPC,aAAa,EAAE;IAElB;EAAA;AAEJ,CAAC,CACF;AAAC;AAEFZ,OAAO,CAACc,WAAW,GAAG,QAAQ;;AAE9B;AACO,IAAMC,MAAM,GAAGC,MAAM,CAACC,MAAM,CAAC,CAAC,CAAC,EAAEjB,OAAO,EAAE;EAC/CkB,KAAK,EAAEC,wBAAW;EAClBC,OAAO,EAAEC,4BAAa;EACtBC,cAAc,EAAEC,0CAAoB;EACpCC,OAAO,EAAEC;AACX,CAAC,CAAC;AAAC"}

package/dist/cjs/components/GlobalStyle.js

@@ -5,6 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.GlobalStyle = void 0;
 var _styledComponents = require("styled-components");
-var GlobalStyle = (0, _styledComponents.createGlobalStyle)([":root{--color-primary:#5d2bff;--color-secondary:#5d2bff;--color-theme-100:#ffffff;--color-theme-200:#f6f6f9;--color-theme-300:#ebebee;--color-theme-400:#d7d7da;--color-theme-500:#b9b9bd;--color-theme-600:#89898e;--color-theme-700:#6d6d73;--color-theme-800:#5b5b61;--color-theme-900:#303037;--color-primary-200:rgba(93,43,255,0.05);--color-primary-300:rgba(93,43,255,0.1);--color-primary-400:rgba(93,43,255,0.25);--color-primary-500:rgba(93,43,255,0.5);--color-primary-600:rgba(93,43,255,0.75);--color-primary-700:#5d2bff;--color-primary-800:#4a21cd;--color-primary-900:#32178b;--color-secondary-200:rgba(93,43,255,0.05);--color-secondary-300:rgba(93,43,255,0.1);--color-secondary-400:rgba(93,43,255,0.25);--color-secondary-500:rgba(93,43,255,0.5);--color-secondary-600:rgba(93,43,255,0.75);--color-secondary-700:#5d2bff;--color-secondary-800:#4a21cd;--color-secondary-900:#32178b;--color-theme-transparent-200:rgba(36,36,76,0.04);--color-theme-transparent-300:rgba(48,48,55,0.1);--color-theme-transparent-400:rgba(48,48,55,0.2);--color-theme-transparent-500:rgba(48,48,55,0.34);--color-theme-transparent-600:rgba(48,48,55,0.57);--color-theme-transparent-700:rgba(48,48,55,0.7);--color-theme-transparent-800:rgba(48,48,55,0.8);--color-primary-opaque-300:#efeaff;--color-primary-opaque-400:#d6caff;--color-secondary-opaque-300:#efeaff;--color-secondary-opaque-400:#d6caff;--color-sucess-green:#64cd93;--body-bg-main:rgb(244,245,247);--body-bg-main-transparent:rgba(244,245,247,0);--page-paper-main:#ffffff;--border-primary:#d7d7da;--note-bg:#fff9f1;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.06),0 16px 16px 0 rgba(0,0,0,0.04),0 4px 4px 0 rgba(0,0,0,0.04),0 2px 2px 0 rgba(0,0,0,0.04);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.06),0 32px 32px 0 rgba(0,0,0,0.03),0 16px 16px 0 rgba(0,0,0,0.02),0 4px 4px 0 rgba(0,0,0,0.02),0 2px 2px 0 rgba(0,0,0,0.02);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.17);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.05),0 10px 15px -3px rgba(0,0,0,0.1);--shadow-tertiary-hover:0 4px 10px -2px rgba(0,0,0,0.1),0 12px 20px -3px rgba(0,0,0,0.2);--page-paper-main-shadow:rgba( 255,255,255,0 );--modal-background:rgba(244,245,247,0.6);--highlight-dark:rgba(0,0,0,0.03);--input-background-color:#ffffff;--red-alert:rgb(237,97,97);--warning:#ffcc6b;--only-white:#ffffff;--only-black:#000000;--ac-br-4:4px;--ac-br-6:6px;--ac-br-8:8px;--ac-br-rounded:999px;}.cupcake{--color-primary:#29bcdd;--color-secondary:#fe6fa7;--color-primary-200:rgba(41,188,221,0.07);--color-primary-300:rgba(41,188,221,0.12);--color-primary-400:rgba(41,188,221,0.26);--color-primary-500:rgba(41,188,221,0.52);--color-primary-600:rgba(41,188,221,0.75);--color-primary-700:#29bcdd;--color-primary-800:#219fbb;--color-primary-900:#1a768b;--color-secondary-200:rgba(254,111,167,0.07);--color-secondary-300:rgba(254,111,167,0.13);--color-secondary-400:rgba(254,111,167,0.27);--color-secondary-500:rgba(254,111,167,0.52);--color-secondary-600:rgba(254,111,167,0.75);--color-secondary-700:#fe6fa7;--color-secondary-800:#dd6091;--color-secondary-900:#ab496f;--color-primary-opaque-300:#e5f7fb;--color-primary-opaque-400:#c8eef6;--color-secondary-opaque-300:#ffecf4;--color-secondary-opaque-400:#ffd8e7;}.classic{--color-primary:#4182f2;--color-secondary:#4182f2;--color-primary-200:rgba(65,130,242,0.07);--color-primary-300:rgba(65,130,242,0.13);--color-primary-400:rgba(65,130,242,0.26);--color-primary-500:rgba(65,130,242,0.52);--color-primary-600:rgba(65,130,242,0.75);--color-primary-700:#4182f2;--color-primary-800:#356bc8;--color-primary-900:#244a8a;--color-secondary-200:rgba(65,130,242,0.07);--color-secondary-300:rgba(65,130,242,0.13);--color-secondary-400:rgba(65,130,242,0.26);--color-secondary-500:rgba(65,130,242,0.52);--color-secondary-600:rgba(65,130,242,0.75);--color-secondary-700:#4182f2;--color-secondary-800:#356bc8;--color-secondary-900:#244a8a;--color-primary-opaque-300:#e6effd;--color-primary-opaque-400:#cedffc;--color-secondary-opaque-300:#e6effd;--color-secondary-opaque-400:#cedffc;}.neon{--color-primary:#67ffc8;--color-secondary:#67ffc8;--color-theme-100:#000000;--color-theme-200:#31333e;--color-theme-300:#2b2d37;--color-theme-400:#1f2024;--color-theme-500:#6D6D73;--color-theme-600:#89898e;--color-theme-700:#b0b0b5;--color-theme-800:#dfdfe5;--color-theme-900:#ffffff;--color-primary-200:rgba(103,255,200,0.05);--color-primary-300:rgba(103,255,200,0.1);--color-primary-400:rgba(103,255,200,0.25);--color-primary-500:rgba(103,255,200,0.5);--color-primary-600:rgba(103,255,200,0.75);--color-primary-700:#67ffc8;--color-primary-800:#a5ffdf;--color-primary-900:#d0fdec;--color-secondary-200:rgba(103,255,200,0.05);--color-secondary-300:rgba(103,255,200,0.1);--color-secondary-400:rgba(103,255,200,0.25);--color-secondary-500:rgba(103,255,200,0.5);--color-secondary-600:rgba(103,255,200,0.75);--color-secondary-700:#67ffc8;--color-secondary-800:#a5ffdf;--color-secondary-900:#d0fdec;--color-theme-transparent-200:rgba(6,7,8,0.12);--color-theme-transparent-300:rgba(6,7,8,0.22);--color-theme-transparent-400:rgba(6,7,8,0.5);--color-theme-transparent-500:rgba(255,255,255,0.27);--color-theme-transparent-600:rgba(255,255,255,0.4);--color-theme-transparent-700:rgba(255,255,255,0.6);--color-theme-transparent-800:rgba(255,255,255,0.85);--color-primary-opaque-300:#3b4e51;--color-primary-opaque-400:#436b64;--color-secondary-opaque-300:#3b4e51;--color-secondary-opaque-400:#436b64;--body-bg-main:rgb(44,46,56);--body-bg-main-transparent:rgba(44,46,56,0);--page-paper-main:#373a44;--border-primary:#1f2024;--note-bg:#464545;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.2),0 32px 32px 0 rgba(0,0,0,0.2),0 16px 16px 0 rgba(0,0,0,0.2),0 4px 4px 0 rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.2);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.1),0 16px 16px 0 rgba(0,0,0,0.1),0 4px 4px 0 rgba(0,0,0,0.1),0 2px 2px 0 rgba(0,0,0,0.1);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.3);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.1),0 10px 15px -3px rgba(0,0,0,0.15);--shadow-tertiary-hover:0 4px 12px -2px rgba(0,0,0,0.4),0 10px 30px -3px rgba(0,0,0,0.5);--page-paper-main-shadow:rgba( 55,58,68,0 );--modal-background:rgba(44,46,56,0.7);--highlight-dark:rgba(0,0,0,0.06);--input-background-color:#2c2e38;--only-white:#ffffff;--only-black:#000000;}.ac-shadow,.ac-shadow--raised{&--lg{box-shadow:var(--shadow-primary);}&--sm{box-shadow:var(--shadow-tertiary);}}.ac-shadow--raised{&--lg{transition:box-shadow 0.3s;&:hover{box-shadow:var(--shadow-primary-hover);}}&--sm{transition:box-shadow 0.3s;&:hover{box-shadow:var(--shadow-tertiary-hover);}}}.ac-shadow-optimized--sm{position:relative;box-shadow:var(--shadow-tertiary);&::before{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";box-shadow:var(--shadow-tertiary);opacity:0;border-radius:var(--ac-br-6);transition:opacity 0.3s ease;z-index:-1;}@media (hover:hover){&:hover::before{opacity:1;}}}.ac-shadow-optimized--lg{position:relative;box-shadow:var(--shadow-primary);&::before{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";box-shadow:var(--shadow-primary);opacity:0;border-radius:var(--ac-br-8);transition:opacity 0.3s ease;z-index:-1;}@media (hover:hover){&:hover::before{opacity:1;}}}.ac-border-radius{&-4{border-radius:var(--ac-br-4);}&-6{border-radius:var(--ac-br-6);}&-8{border-radius:var(--ac-br-8);}&-rounded{border-radius:var(--ac-br-rounded);}}.c-cooltip{position:relative;--cooltip-spacing:0.5rem;--cooltip-padding:0.25rem 0.625rem;--cooltip-max-width:12.5rem;--cooltip-transition-duration:0.15s,0.1s,0.15s;--cooltip-transition-delay:0.6s;--cooltip-timing:ease,ease,cubic-bezier(0.39,0.575,0.565,1);}.c-cooltip::after{pointer-events:none;content:attr(data-tooltip);position:absolute;color:#fff;opacity:0;background-color:rgba(0,0,0,0.9);border-radius:0.5rem;font-size:0.75rem;font-weight:500;line-height:1.3;max-width:var(--cooltip-max-width);padding:var(--cooltip-padding);text-align:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}.c-cooltip--top::after{bottom:calc(100% + var(--cooltip-spacing));left:50%;transform:scale(0.85) translateX(-50%);transform-origin:0;}.c-cooltip--right::after{left:calc(100% + var(--cooltip-spacing));transform:scale(0.85);}.c-cooltip--bottom::after{top:calc(100% + var(--cooltip-spacing));left:50%;transform:scale(0.85) translateX(-50%);transform-origin:0;}.c-cooltip--left::after{right:calc(100% + var(--cooltip-spacing));transform:scale(0.85);}.c-cooltip:disabled::after,[aria-pressed=\"true\"]::after{display:none;}@media (hover:hover){.c-cooltip--top:not(:focus):hover::after,.c-cooltip--bottom:not(:focus):hover::after{transition-property:opacity,transform;transition-duration:var(--cooltip-transition-duration);transition-delay:var(--cooltip-transition-delay);transition-timing-function:var(--cooltip-timing);transform:scale(1) translateX(-50%);opacity:1;}.c-cooltip--right:not(:focus):hover::after,.c-cooltip--left:not(:focus):hover::after{transition-property:opacity,transform;transition-duration:var(--cooltip-transition-duration);transition-delay:var(--cooltip-transition-delay);transition-timing-function:var(--cooltip-timing);transform:scale(1);opacity:1;}}"]);
+var GlobalStyle = (0, _styledComponents.createGlobalStyle)([":root{--color-primary:#5d2bff;--color-secondary:#5d2bff;--color-theme-100:#ffffff;--color-theme-200:#f6f6f9;--color-theme-300:#ebebee;--color-theme-400:#d7d7da;--color-theme-500:#b9b9bd;--color-theme-600:#89898e;--color-theme-700:#6d6d73;--color-theme-800:#5b5b61;--color-theme-900:#303037;--color-primary-200:rgba(93,43,255,0.05);--color-primary-300:rgba(93,43,255,0.1);--color-primary-400:rgba(93,43,255,0.25);--color-primary-500:rgba(93,43,255,0.5);--color-primary-600:rgba(93,43,255,0.75);--color-primary-700:#5d2bff;--color-primary-800:#4a21cd;--color-primary-900:#32178b;--color-secondary-200:rgba(93,43,255,0.05);--color-secondary-300:rgba(93,43,255,0.1);--color-secondary-400:rgba(93,43,255,0.25);--color-secondary-500:rgba(93,43,255,0.5);--color-secondary-600:rgba(93,43,255,0.75);--color-secondary-700:#5d2bff;--color-secondary-800:#4a21cd;--color-secondary-900:#32178b;--color-theme-transparent-200:rgba(36,36,76,0.04);--color-theme-transparent-300:rgba(48,48,55,0.1);--color-theme-transparent-400:rgba(48,48,55,0.2);--color-theme-transparent-500:rgba(48,48,55,0.34);--color-theme-transparent-600:rgba(48,48,55,0.57);--color-theme-transparent-700:rgba(48,48,55,0.7);--color-theme-transparent-800:rgba(48,48,55,0.8);--color-primary-opaque-300:#efeaff;--color-primary-opaque-400:#d6caff;--color-secondary-opaque-300:#efeaff;--color-secondary-opaque-400:#d6caff;--color-sucess-green:#64cd93;--body-bg-main:rgb(244,245,247);--body-bg-main-transparent:rgba(244,245,247,0);--page-paper-main:#ffffff;--border-primary:#d7d7da;--note-bg:#fff9f1;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.06),0 16px 16px 0 rgba(0,0,0,0.04),0 4px 4px 0 rgba(0,0,0,0.04),0 2px 2px 0 rgba(0,0,0,0.04);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.06),0 32px 32px 0 rgba(0,0,0,0.03),0 16px 16px 0 rgba(0,0,0,0.02),0 4px 4px 0 rgba(0,0,0,0.02),0 2px 2px 0 rgba(0,0,0,0.02);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.17);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.05),0 10px 15px -3px rgba(0,0,0,0.1);--shadow-tertiary-hover:0 4px 10px -2px rgba(0,0,0,0.1),0 12px 20px -3px rgba(0,0,0,0.2);--page-paper-main-shadow:rgba( 255,255,255,0 );--modal-background:rgba(244,245,247,0.6);--highlight-dark:rgba(0,0,0,0.03);--input-background-color:#ffffff;--red-alert:rgb(237,97,97);--warning:#ffcc6b;--only-white:#ffffff;--only-black:#000000;--ac-br-4:4px;--ac-br-6:6px;--ac-br-8:8px;--ac-br-rounded:999px;}.cupcake{--color-primary:#29bcdd;--color-secondary:#fe6fa7;--color-primary-200:rgba(41,188,221,0.07);--color-primary-300:rgba(41,188,221,0.12);--color-primary-400:rgba(41,188,221,0.26);--color-primary-500:rgba(41,188,221,0.52);--color-primary-600:rgba(41,188,221,0.75);--color-primary-700:#29bcdd;--color-primary-800:#219fbb;--color-primary-900:#1a768b;--color-secondary-200:rgba(254,111,167,0.07);--color-secondary-300:rgba(254,111,167,0.13);--color-secondary-400:rgba(254,111,167,0.27);--color-secondary-500:rgba(254,111,167,0.52);--color-secondary-600:rgba(254,111,167,0.75);--color-secondary-700:#fe6fa7;--color-secondary-800:#dd6091;--color-secondary-900:#ab496f;--color-primary-opaque-300:#e5f7fb;--color-primary-opaque-400:#c8eef6;--color-secondary-opaque-300:#ffecf4;--color-secondary-opaque-400:#ffd8e7;}.classic{--color-primary:#4182f2;--color-secondary:#4182f2;--color-primary-200:rgba(65,130,242,0.07);--color-primary-300:rgba(65,130,242,0.13);--color-primary-400:rgba(65,130,242,0.26);--color-primary-500:rgba(65,130,242,0.52);--color-primary-600:rgba(65,130,242,0.75);--color-primary-700:#4182f2;--color-primary-800:#356bc8;--color-primary-900:#244a8a;--color-secondary-200:rgba(65,130,242,0.07);--color-secondary-300:rgba(65,130,242,0.13);--color-secondary-400:rgba(65,130,242,0.26);--color-secondary-500:rgba(65,130,242,0.52);--color-secondary-600:rgba(65,130,242,0.75);--color-secondary-700:#4182f2;--color-secondary-800:#356bc8;--color-secondary-900:#244a8a;--color-primary-opaque-300:#e6effd;--color-primary-opaque-400:#cedffc;--color-secondary-opaque-300:#e6effd;--color-secondary-opaque-400:#cedffc;}.neon{--color-primary:#67ffc8;--color-secondary:#67ffc8;--color-theme-100:#000000;--color-theme-200:#31333e;--color-theme-300:#2b2d37;--color-theme-400:#1f2024;--color-theme-500:#6D6D73;--color-theme-600:#89898e;--color-theme-700:#b0b0b5;--color-theme-800:#dfdfe5;--color-theme-900:#ffffff;--color-primary-200:rgba(103,255,200,0.05);--color-primary-300:rgba(103,255,200,0.1);--color-primary-400:rgba(103,255,200,0.25);--color-primary-500:rgba(103,255,200,0.5);--color-primary-600:rgba(103,255,200,0.75);--color-primary-700:#67ffc8;--color-primary-800:#a5ffdf;--color-primary-900:#d0fdec;--color-secondary-200:rgba(103,255,200,0.05);--color-secondary-300:rgba(103,255,200,0.1);--color-secondary-400:rgba(103,255,200,0.25);--color-secondary-500:rgba(103,255,200,0.5);--color-secondary-600:rgba(103,255,200,0.75);--color-secondary-700:#67ffc8;--color-secondary-800:#a5ffdf;--color-secondary-900:#d0fdec;--color-theme-transparent-200:rgba(6,7,8,0.12);--color-theme-transparent-300:rgba(6,7,8,0.22);--color-theme-transparent-400:rgba(6,7,8,0.5);--color-theme-transparent-500:rgba(255,255,255,0.27);--color-theme-transparent-600:rgba(255,255,255,0.4);--color-theme-transparent-700:rgba(255,255,255,0.6);--color-theme-transparent-800:rgba(255,255,255,0.85);--color-primary-opaque-300:#3b4e51;--color-primary-opaque-400:#436b64;--color-secondary-opaque-300:#3b4e51;--color-secondary-opaque-400:#436b64;--body-bg-main:rgb(44,46,56);--body-bg-main-transparent:rgba(44,46,56,0);--page-paper-main:#373a44;--border-primary:#1f2024;--note-bg:#464545;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.2),0 32px 32px 0 rgba(0,0,0,0.2),0 16px 16px 0 rgba(0,0,0,0.2),0 4px 4px 0 rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.2);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.1),0 16px 16px 0 rgba(0,0,0,0.1),0 4px 4px 0 rgba(0,0,0,0.1),0 2px 2px 0 rgba(0,0,0,0.1);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.3);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.1),0 10px 15px -3px rgba(0,0,0,0.15);--shadow-tertiary-hover:0 4px 12px -2px rgba(0,0,0,0.4),0 10px 30px -3px rgba(0,0,0,0.5);--page-paper-main-shadow:rgba( 55,58,68,0 );--modal-background:rgba(44,46,56,0.7);--highlight-dark:rgba(0,0,0,0.06);--input-background-color:#2c2e38;--only-white:#ffffff;--only-black:#000000;}html{color-scheme:light;}html{&.neon{color-scheme:dark;}}.ac-shadow,.ac-shadow--raised{&--lg{box-shadow:var(--shadow-primary);}&--sm{box-shadow:var(--shadow-tertiary);}}.ac-shadow--raised{&--lg{transition:box-shadow 0.3s;&:hover{box-shadow:var(--shadow-primary-hover);}}&--sm{transition:box-shadow 0.3s;&:hover{box-shadow:var(--shadow-tertiary-hover);}}}.ac-shadow-optimized--sm{position:relative;box-shadow:var(--shadow-tertiary);&::before{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";box-shadow:var(--shadow-tertiary);opacity:0;border-radius:var(--ac-br-6);transition:opacity 0.3s ease;z-index:-1;}@media (hover:hover){&:hover::before{opacity:1;}}}.ac-shadow-optimized--lg{position:relative;box-shadow:var(--shadow-primary);&::before{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";box-shadow:var(--shadow-primary);opacity:0;border-radius:var(--ac-br-8);transition:opacity 0.3s ease;z-index:-1;}@media (hover:hover){&:hover::before{opacity:1;}}}.ac-border-radius{&-4{border-radius:var(--ac-br-4);}&-6{border-radius:var(--ac-br-6);}&-8{border-radius:var(--ac-br-8);}&-rounded{border-radius:var(--ac-br-rounded);}}.c-cooltip{position:relative;--cooltip-spacing:0.5rem;--cooltip-padding:0.25rem 0.625rem;--cooltip-max-width:12.5rem;--cooltip-transition-duration:0.15s,0.1s,0.15s;--cooltip-transition-delay:0.6s;--cooltip-timing:ease,ease,cubic-bezier(0.39,0.575,0.565,1);}.c-cooltip::after{pointer-events:none;content:attr(data-tooltip);position:absolute;color:#fff;opacity:0;background-color:rgba(0,0,0,0.9);border-radius:0.5rem;font-size:0.75rem;font-weight:500;line-height:1.3;max-width:var(--cooltip-max-width);padding:var(--cooltip-padding);text-align:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}.c-cooltip--top::after{bottom:calc(100% + var(--cooltip-spacing));left:50%;transform:scale(0.85) translateX(-50%);transform-origin:0;}.c-cooltip--right::after{left:calc(100% + var(--cooltip-spacing));transform:scale(0.85);}.c-cooltip--bottom::after{top:calc(100% + var(--cooltip-spacing));left:50%;transform:scale(0.85) translateX(-50%);transform-origin:0;}.c-cooltip--left::after{right:calc(100% + var(--cooltip-spacing));transform:scale(0.85);}.c-cooltip:disabled::after,[aria-pressed=\"true\"]::after{display:none;}@media (hover:hover){.c-cooltip--top:not(:focus):hover::after,.c-cooltip--bottom:not(:focus):hover::after{transition-property:opacity,transform;transition-duration:var(--cooltip-transition-duration);transition-delay:var(--cooltip-transition-delay);transition-timing-function:var(--cooltip-timing);transform:scale(1) translateX(-50%);opacity:1;}.c-cooltip--right:not(:focus):hover::after,.c-cooltip--left:not(:focus):hover::after{transition-property:opacity,transform;transition-duration:var(--cooltip-transition-duration);transition-delay:var(--cooltip-transition-delay);transition-timing-function:var(--cooltip-timing);transform:scale(1);opacity:1;}}"]);
 exports.GlobalStyle = GlobalStyle;
 //# sourceMappingURL=GlobalStyle.js.map

package/dist/cjs/components/GlobalStyle.js.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalStyle.js","names":["GlobalStyle","createGlobalStyle"],"sources":["../../../src/components/GlobalStyle.ts"],"sourcesContent":["import { createGlobalStyle } from \"styled-components\";\n\nexport const GlobalStyle = createGlobalStyle`\n  :root {\n    --color-primary: #5d2bff;\n    --color-secondary: #5d2bff;\n\n    --color-theme-100: #ffffff;\n    --color-theme-200: #f6f6f9;\n    --color-theme-300: #ebebee;\n    --color-theme-400: #d7d7da;\n    --color-theme-500: #b9b9bd;\n    --color-theme-600: #89898e;\n    --color-theme-700: #6d6d73;\n    --color-theme-800: #5b5b61;\n    --color-theme-900: #303037;\n\n    --color-primary-200: rgba(93, 43, 255, 0.05);\n    --color-primary-300: rgba(93, 43, 255, 0.1);\n    --color-primary-400: rgba(93, 43, 255, 0.25);\n    --color-primary-500: rgba(93, 43, 255, 0.5);\n    --color-primary-600: rgba(93, 43, 255, 0.75);\n    --color-primary-700: #5d2bff;\n    --color-primary-800: #4a21cd;\n    --color-primary-900: #32178b;\n\n    --color-secondary-200: rgba(93, 43, 255, 0.05);\n    --color-secondary-300: rgba(93, 43, 255, 0.1);\n    --color-secondary-400: rgba(93, 43, 255, 0.25);\n    --color-secondary-500: rgba(93, 43, 255, 0.5);\n    --color-secondary-600: rgba(93, 43, 255, 0.75);\n    --color-secondary-700: #5d2bff;\n    --color-secondary-800: #4a21cd;\n    --color-secondary-900: #32178b;\n\n    --color-theme-transparent-200: rgba(36,36,76,0.04);\n    --color-theme-transparent-300: rgba(48,48,55,0.1);\n    --color-theme-transparent-400: rgba(48,48,55,0.2);\n    --color-theme-transparent-500: rgba(48,48,55,0.34);\n    --color-theme-transparent-600: rgba(48,48,55,0.57);\n    --color-theme-transparent-700: rgba(48,48,55,0.7);\n    --color-theme-transparent-800: rgba(48,48,55,0.8);\n\n    --color-primary-opaque-300: #efeaff;\n    --color-primary-opaque-400: #d6caff;\n\n    --color-secondary-opaque-300: #efeaff;\n    --color-secondary-opaque-400: #d6caff;\n\n    --color-sucess-green: #64cd93;\n\n    --body-bg-main: rgb(244, 245, 247);\n    --body-bg-main-transparent: rgba(244, 245, 247, 0);\n    --page-paper-main: #ffffff;\n    --border-primary: #d7d7da;\n\n    --note-bg: #fff9f1;\n\n    --shadow-primary-hover: 0 64px 64px 0 rgba(0, 0, 0, 0.1),\n      0 32px 32px 0 rgba(0, 0, 0, 0.06), 0 16px 16px 0 rgba(0, 0, 0, 0.04),\n      0 4px 4px 0 rgba(0, 0, 0, 0.04), 0 2px 2px 0 rgba(0, 0, 0, 0.04);\n    --shadow-primary: 0 64px 64px 0 rgba(0, 0, 0, 0.06),\n      0 32px 32px 0 rgba(0, 0, 0, 0.03), 0 16px 16px 0 rgba(0, 0, 0, 0.02),\n      0 4px 4px 0 rgba(0, 0, 0, 0.02), 0 2px 2px 0 rgba(0, 0, 0, 0.02);\n\n    --shadow-secondary: 0 4px 14px 0 rgba(0, 0, 0, 0.17);\n\n    --shadow-tertiary: 0 4px 6px -2px rgba(0, 0, 0, 0.05),\n      0 10px 15px -3px rgba(0, 0, 0, 0.1);\n    --shadow-tertiary-hover: 0 4px 10px -2px rgba(0, 0, 0, 0.1),\n      0 12px 20px -3px rgba(0, 0, 0, 0.2);\n\n    --page-paper-main-shadow: rgba(\n      255,\n      255,\n      255,\n      0\n    ); /* Shadow list shadow for page paper main */\n\n    --modal-background: rgba(244, 245, 247, 0.6);\n\n    --highlight-dark: rgba(0, 0, 0, 0.03);\n\n    --input-background-color: #ffffff;\n\n    --red-alert: rgb(237, 97, 97);\n\n    --warning: #ffcc6b;\n\n    --only-white: #ffffff;\n\n    --only-black: #000000;\n\n    --ac-br-4: 4px;\n\n    --ac-br-6: 6px;\n\n    --ac-br-8: 8px;\n\n    --ac-br-rounded: 999px;\n  }\n\n  .cupcake {\n    --color-primary: #29bcdd;\n    --color-secondary: #fe6fa7;\n\n    --color-primary-200: rgba(41, 188, 221, 0.07);\n    --color-primary-300: rgba(41, 188, 221, 0.12);\n    --color-primary-400: rgba(41, 188, 221, 0.26);\n    --color-primary-500: rgba(41, 188, 221, 0.52);\n    --color-primary-600: rgba(41, 188, 221, 0.75);\n    --color-primary-700: #29bcdd;\n    --color-primary-800: #219fbb;\n    --color-primary-900: #1a768b;\n\n    --color-secondary-200: rgba(254, 111, 167, 0.07);\n    --color-secondary-300: rgba(254, 111, 167, 0.13);\n    --color-secondary-400: rgba(254, 111, 167, 0.27);\n    --color-secondary-500: rgba(254, 111, 167, 0.52);\n    --color-secondary-600: rgba(254, 111, 167, 0.75);\n    --color-secondary-700: #fe6fa7;\n    --color-secondary-800: #dd6091;\n    --color-secondary-900: #ab496f;\n\n    --color-primary-opaque-300: #e5f7fb;\n    --color-primary-opaque-400: #c8eef6;\n\n    --color-secondary-opaque-300: #ffecf4;\n    --color-secondary-opaque-400: #ffd8e7;\n  }\n\n  .classic {\n    --color-primary: #4182f2;\n    --color-secondary: #4182f2;\n\n    --color-primary-200: rgba(65, 130, 242, 0.07);\n    --color-primary-300: rgba(65, 130, 242, 0.13);\n    --color-primary-400: rgba(65, 130, 242, 0.26);\n    --color-primary-500: rgba(65, 130, 242, 0.52);\n    --color-primary-600: rgba(65, 130, 242, 0.75);\n    --color-primary-700: #4182f2;\n    --color-primary-800: #356bc8;\n    --color-primary-900: #244a8a;\n\n    --color-secondary-200: rgba(65, 130, 242, 0.07);\n    --color-secondary-300: rgba(65, 130, 242, 0.13);\n    --color-secondary-400: rgba(65, 130, 242, 0.26);\n    --color-secondary-500: rgba(65, 130, 242, 0.52);\n    --color-secondary-600: rgba(65, 130, 242, 0.75);\n    --color-secondary-700: #4182f2;\n    --color-secondary-800: #356bc8;\n    --color-secondary-900: #244a8a;\n\n    --color-primary-opaque-300: #e6effd;\n    --color-primary-opaque-400: #cedffc;\n\n    --color-secondary-opaque-300: #e6effd;\n    --color-secondary-opaque-400: #cedffc;\n  }\n\n  .neon {\n    --color-primary: #67ffc8;\n    --color-secondary: #67ffc8;\n\n    --color-theme-100: #000000;\n    --color-theme-200: #31333e;\n    --color-theme-300: #2b2d37;\n    --color-theme-400: #1f2024;\n    --color-theme-500: #6D6D73;\n    --color-theme-600: #89898e;\n    --color-theme-700: #b0b0b5;\n    --color-theme-800: #dfdfe5;\n    --color-theme-900: #ffffff;\n\n    --color-primary-200: rgba(103, 255, 200, 0.05);\n    --color-primary-300: rgba(103, 255, 200, 0.1);\n    --color-primary-400: rgba(103, 255, 200, 0.25);\n    --color-primary-500: rgba(103, 255, 200, 0.5);\n    --color-primary-600: rgba(103, 255, 200, 0.75);\n    --color-primary-700: #67ffc8;\n    --color-primary-800: #a5ffdf;\n    --color-primary-900: #d0fdec;\n\n    --color-secondary-200: rgba(103, 255, 200, 0.05);\n    --color-secondary-300: rgba(103, 255, 200, 0.1);\n    --color-secondary-400: rgba(103, 255, 200, 0.25);\n    --color-secondary-500: rgba(103, 255, 200, 0.5);\n    --color-secondary-600: rgba(103, 255, 200, 0.75);\n    --color-secondary-700: #67ffc8;\n    --color-secondary-800: #a5ffdf;\n    --color-secondary-900: #d0fdec;\n\n    --color-theme-transparent-200: rgba(6,7,8,0.12);\n    --color-theme-transparent-300: rgba(6,7,8,0.22);\n    --color-theme-transparent-400: rgba(6,7,8,0.5);\n    --color-theme-transparent-500: rgba(255,255,255,0.27);\n    --color-theme-transparent-600: rgba(255,255,255,0.4);\n    --color-theme-transparent-700: rgba(255,255,255,0.6);\n    --color-theme-transparent-800: rgba(255,255,255,0.85);\n\n    --color-primary-opaque-300: #3b4e51;\n    --color-primary-opaque-400: #436b64;\n\n    --color-secondary-opaque-300: #3b4e51;\n    --color-secondary-opaque-400: #436b64;\n\n    --body-bg-main: rgb(44, 46, 56);\n    --body-bg-main-transparent: rgba(44, 46, 56, 0);\n    --page-paper-main: #373a44;\n    --border-primary: #1f2024;\n\n    --note-bg: #464545;\n\n    --shadow-primary-hover: 0 64px 64px 0 rgba(0, 0, 0, 0.2),\n      0 32px 32px 0 rgba(0, 0, 0, 0.2), 0 16px 16px 0 rgba(0, 0, 0, 0.2),\n      0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2);\n    --shadow-primary: 0 64px 64px 0 rgba(0, 0, 0, 0.1),\n      0 32px 32px 0 rgba(0, 0, 0, 0.1), 0 16px 16px 0 rgba(0, 0, 0, 0.1),\n      0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.1);\n\n    --shadow-secondary: 0 4px 14px 0 rgba(0, 0, 0, 0.3);\n\n    --shadow-tertiary: 0 4px 6px -2px rgba(0, 0, 0, 0.1),\n      0 10px 15px -3px rgba(0, 0, 0, 0.15);\n    --shadow-tertiary-hover: 0 4px 12px -2px rgba(0, 0, 0, 0.4),\n      0 10px 30px -3px rgba(0, 0, 0, 0.5);\n\n    --page-paper-main-shadow: rgba(\n      55,\n      58,\n      68,\n      0\n    ); /* Shadow list shadow for page paper main */\n\n    --modal-background: rgba(44, 46, 56, 0.7);\n\n    --highlight-dark: rgba(0, 0, 0, 0.06);\n\n    --input-background-color: #2c2e38;\n\n    --only-white: #ffffff;\n\n    --only-black: #000000;\n  }\n\n  .ac-shadow,\n  .ac-shadow--raised {\n    &--lg {\n      box-shadow: var(--shadow-primary);\n    }\n    &--sm {\n      box-shadow: var(--shadow-tertiary);\n    }\n  }\n\n  .ac-shadow--raised {\n    &--lg {\n      transition: box-shadow 0.3s;\n      &:hover {\n        box-shadow: var(--shadow-primary-hover);\n      }\n    }\n    &--sm {\n      transition: box-shadow 0.3s;\n      &:hover {\n        box-shadow: var(--shadow-tertiary-hover);\n      }\n    }\n  }\n\n  .ac-shadow-optimized--sm {\n    position: relative;\n    box-shadow: var(--shadow-tertiary);\n\n    &::before {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      content: \"\";\n      box-shadow: var(--shadow-tertiary);\n      opacity: 0;\n      border-radius: var(--ac-br-6);\n      transition: opacity 0.3s ease;\n      z-index: -1;\n    }\n\n    @media (hover: hover) {\n      &:hover::before {\n        opacity: 1;\n      }\n    }\n  }\n\n  .ac-shadow-optimized--lg {\n    position: relative;\n    box-shadow: var(--shadow-primary);\n\n    &::before {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      content: \"\";\n      box-shadow: var(--shadow-primary);\n      opacity: 0;\n      border-radius: var(--ac-br-8);\n      transition: opacity 0.3s ease;\n      z-index: -1;\n    }\n\n    @media (hover: hover) {\n      &:hover::before {\n        opacity: 1;\n      }\n    }\n  }\n\n  .ac-border-radius {\n    &-4 {\n      border-radius: var(--ac-br-4);\n    }\n\n    &-6 {\n      border-radius: var(--ac-br-6);\n    }\n\n    &-8 {\n      border-radius: var(--ac-br-8);\n    }\n\n    &-rounded {\n      border-radius: var(--ac-br-rounded);\n    }\n  }\n\n\n  // CSS Tooltip ::after content: data-tooltip\n\n  .c-cooltip {\n  position: relative;\n\n  /*\n    * Prefer scoped variables in this case.\n    * This lines of CSS should be scoped too.\n    */\n\n  --cooltip-spacing: 0.5rem;\n  --cooltip-padding: 0.25rem 0.625rem;\n  --cooltip-max-width: 12.5rem;\n\n  --cooltip-transition-duration: 0.15s, 0.1s, 0.15s;\n  --cooltip-transition-delay: 0.6s;\n  --cooltip-timing: ease, ease, cubic-bezier(0.39, 0.575, 0.565, 1);\n}\n\n.c-cooltip::after {\n  /*\n    * will-change is intended to be used as a last resort,\n    * in order to try to deal with existing performance problems.\n    * It should not be used to anticipate performance problems.\n    * https://developer.mozilla.org/en-US/docs/Web/CSS/will-change\n    *\n    * will-change: transform, opacity\n    */\n  pointer-events: none;\n  content: attr(data-tooltip);\n  position: absolute;\n  color: #fff;\n  opacity: 0;\n  background-color: rgba(0, 0, 0, 0.9);\n  border-radius: 0.5rem;\n  font-size: 0.75rem;\n  font-weight: 500;\n  line-height: 1.3;\n  max-width: var(--cooltip-max-width);\n  padding: var(--cooltip-padding);\n  text-align: center;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n\n.c-cooltip--top::after {\n  bottom: calc(100% + var(--cooltip-spacing));\n  left: 50%;\n  transform: scale(0.85) translateX(-50%);\n  transform-origin: 0;\n}\n\n.c-cooltip--right::after {\n  left: calc(100% + var(--cooltip-spacing));\n  transform: scale(0.85);\n}\n\n.c-cooltip--bottom::after {\n  top: calc(100% + var(--cooltip-spacing));\n  left: 50%;\n  transform: scale(0.85) translateX(-50%);\n  transform-origin: 0;\n}\n\n.c-cooltip--left::after {\n  right: calc(100% + var(--cooltip-spacing));\n  transform: scale(0.85);\n}\n\n/*\n* Make sure that disabled and aria pressed\n* items do not have tooltips available.\n*/\n.c-cooltip:disabled::after,\n[aria-pressed=\"true\"]::after {\n  display: none;\n}\n\n/*\n*\n* Only use hover when is available .\n* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover\n*/\n@media (hover: hover) {\n  /*\n    * Here we maybe have a complex selector but actually it's not.\n    * We simply asks here to show tooltip only on hover.\n    * Focused elements (in this case, clicked elements) should hide the tooltip.\n    */\n  .c-cooltip--top:not(:focus):hover::after,\n  .c-cooltip--bottom:not(:focus):hover::after {\n    transition-property: opacity, transform;\n    transition-duration: var(--cooltip-transition-duration);\n    transition-delay: var(--cooltip-transition-delay);\n    transition-timing-function: var(--cooltip-timing);\n    transform: scale(1) translateX(-50%);\n    opacity: 1;\n  }\n\n  /*\n    *\n    * This is not code duplication!\n    * Transform properties are tricky to animate and values\n    * are not the same depending on the tooltip position.\n    *\n    * Animating only one transform, eg. scale(1) will\n    * override all previously set transforms, eg. translateY.\n    * So we need to always chain them.\n    * eg. transform: scale(1) translateY(-50%) etc...\n    */\n\n  .c-cooltip--right:not(:focus):hover::after,\n  .c-cooltip--left:not(:focus):hover::after {\n    transition-property: opacity, transform;\n    transition-duration: var(--cooltip-transition-duration);\n    transition-delay: var(--cooltip-transition-delay);\n    transition-timing-function: var(--cooltip-timing);\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n\n`;\n"],"mappings":";;;;;;AAAA;AAEO,IAAMA,WAAW,OAAGC,mCAAiB,++RA4c3C;AAAC"}
+{"version":3,"file":"GlobalStyle.js","names":["GlobalStyle","createGlobalStyle"],"sources":["../../../src/components/GlobalStyle.ts"],"sourcesContent":["import { createGlobalStyle } from \"styled-components\";\n\nexport const GlobalStyle = createGlobalStyle`\n  :root {\n    --color-primary: #5d2bff;\n    --color-secondary: #5d2bff;\n\n    --color-theme-100: #ffffff;\n    --color-theme-200: #f6f6f9;\n    --color-theme-300: #ebebee;\n    --color-theme-400: #d7d7da;\n    --color-theme-500: #b9b9bd;\n    --color-theme-600: #89898e;\n    --color-theme-700: #6d6d73;\n    --color-theme-800: #5b5b61;\n    --color-theme-900: #303037;\n\n    --color-primary-200: rgba(93, 43, 255, 0.05);\n    --color-primary-300: rgba(93, 43, 255, 0.1);\n    --color-primary-400: rgba(93, 43, 255, 0.25);\n    --color-primary-500: rgba(93, 43, 255, 0.5);\n    --color-primary-600: rgba(93, 43, 255, 0.75);\n    --color-primary-700: #5d2bff;\n    --color-primary-800: #4a21cd;\n    --color-primary-900: #32178b;\n\n    --color-secondary-200: rgba(93, 43, 255, 0.05);\n    --color-secondary-300: rgba(93, 43, 255, 0.1);\n    --color-secondary-400: rgba(93, 43, 255, 0.25);\n    --color-secondary-500: rgba(93, 43, 255, 0.5);\n    --color-secondary-600: rgba(93, 43, 255, 0.75);\n    --color-secondary-700: #5d2bff;\n    --color-secondary-800: #4a21cd;\n    --color-secondary-900: #32178b;\n\n    --color-theme-transparent-200: rgba(36,36,76,0.04);\n    --color-theme-transparent-300: rgba(48,48,55,0.1);\n    --color-theme-transparent-400: rgba(48,48,55,0.2);\n    --color-theme-transparent-500: rgba(48,48,55,0.34);\n    --color-theme-transparent-600: rgba(48,48,55,0.57);\n    --color-theme-transparent-700: rgba(48,48,55,0.7);\n    --color-theme-transparent-800: rgba(48,48,55,0.8);\n\n    --color-primary-opaque-300: #efeaff;\n    --color-primary-opaque-400: #d6caff;\n\n    --color-secondary-opaque-300: #efeaff;\n    --color-secondary-opaque-400: #d6caff;\n\n    --color-sucess-green: #64cd93;\n\n    --body-bg-main: rgb(244, 245, 247);\n    --body-bg-main-transparent: rgba(244, 245, 247, 0);\n    --page-paper-main: #ffffff;\n    --border-primary: #d7d7da;\n\n    --note-bg: #fff9f1;\n\n    --shadow-primary-hover: 0 64px 64px 0 rgba(0, 0, 0, 0.1),\n      0 32px 32px 0 rgba(0, 0, 0, 0.06), 0 16px 16px 0 rgba(0, 0, 0, 0.04),\n      0 4px 4px 0 rgba(0, 0, 0, 0.04), 0 2px 2px 0 rgba(0, 0, 0, 0.04);\n    --shadow-primary: 0 64px 64px 0 rgba(0, 0, 0, 0.06),\n      0 32px 32px 0 rgba(0, 0, 0, 0.03), 0 16px 16px 0 rgba(0, 0, 0, 0.02),\n      0 4px 4px 0 rgba(0, 0, 0, 0.02), 0 2px 2px 0 rgba(0, 0, 0, 0.02);\n\n    --shadow-secondary: 0 4px 14px 0 rgba(0, 0, 0, 0.17);\n\n    --shadow-tertiary: 0 4px 6px -2px rgba(0, 0, 0, 0.05),\n      0 10px 15px -3px rgba(0, 0, 0, 0.1);\n    --shadow-tertiary-hover: 0 4px 10px -2px rgba(0, 0, 0, 0.1),\n      0 12px 20px -3px rgba(0, 0, 0, 0.2);\n\n    --page-paper-main-shadow: rgba(\n      255,\n      255,\n      255,\n      0\n    ); /* Shadow list shadow for page paper main */\n\n    --modal-background: rgba(244, 245, 247, 0.6);\n\n    --highlight-dark: rgba(0, 0, 0, 0.03);\n\n    --input-background-color: #ffffff;\n\n    --red-alert: rgb(237, 97, 97);\n\n    --warning: #ffcc6b;\n\n    --only-white: #ffffff;\n\n    --only-black: #000000;\n\n    --ac-br-4: 4px;\n\n    --ac-br-6: 6px;\n\n    --ac-br-8: 8px;\n\n    --ac-br-rounded: 999px;\n  }\n\n  .cupcake {\n    --color-primary: #29bcdd;\n    --color-secondary: #fe6fa7;\n\n    --color-primary-200: rgba(41, 188, 221, 0.07);\n    --color-primary-300: rgba(41, 188, 221, 0.12);\n    --color-primary-400: rgba(41, 188, 221, 0.26);\n    --color-primary-500: rgba(41, 188, 221, 0.52);\n    --color-primary-600: rgba(41, 188, 221, 0.75);\n    --color-primary-700: #29bcdd;\n    --color-primary-800: #219fbb;\n    --color-primary-900: #1a768b;\n\n    --color-secondary-200: rgba(254, 111, 167, 0.07);\n    --color-secondary-300: rgba(254, 111, 167, 0.13);\n    --color-secondary-400: rgba(254, 111, 167, 0.27);\n    --color-secondary-500: rgba(254, 111, 167, 0.52);\n    --color-secondary-600: rgba(254, 111, 167, 0.75);\n    --color-secondary-700: #fe6fa7;\n    --color-secondary-800: #dd6091;\n    --color-secondary-900: #ab496f;\n\n    --color-primary-opaque-300: #e5f7fb;\n    --color-primary-opaque-400: #c8eef6;\n\n    --color-secondary-opaque-300: #ffecf4;\n    --color-secondary-opaque-400: #ffd8e7;\n  }\n\n  .classic {\n    --color-primary: #4182f2;\n    --color-secondary: #4182f2;\n\n    --color-primary-200: rgba(65, 130, 242, 0.07);\n    --color-primary-300: rgba(65, 130, 242, 0.13);\n    --color-primary-400: rgba(65, 130, 242, 0.26);\n    --color-primary-500: rgba(65, 130, 242, 0.52);\n    --color-primary-600: rgba(65, 130, 242, 0.75);\n    --color-primary-700: #4182f2;\n    --color-primary-800: #356bc8;\n    --color-primary-900: #244a8a;\n\n    --color-secondary-200: rgba(65, 130, 242, 0.07);\n    --color-secondary-300: rgba(65, 130, 242, 0.13);\n    --color-secondary-400: rgba(65, 130, 242, 0.26);\n    --color-secondary-500: rgba(65, 130, 242, 0.52);\n    --color-secondary-600: rgba(65, 130, 242, 0.75);\n    --color-secondary-700: #4182f2;\n    --color-secondary-800: #356bc8;\n    --color-secondary-900: #244a8a;\n\n    --color-primary-opaque-300: #e6effd;\n    --color-primary-opaque-400: #cedffc;\n\n    --color-secondary-opaque-300: #e6effd;\n    --color-secondary-opaque-400: #cedffc;\n  }\n\n  .neon {\n    --color-primary: #67ffc8;\n    --color-secondary: #67ffc8;\n\n    --color-theme-100: #000000;\n    --color-theme-200: #31333e;\n    --color-theme-300: #2b2d37;\n    --color-theme-400: #1f2024;\n    --color-theme-500: #6D6D73;\n    --color-theme-600: #89898e;\n    --color-theme-700: #b0b0b5;\n    --color-theme-800: #dfdfe5;\n    --color-theme-900: #ffffff;\n\n    --color-primary-200: rgba(103, 255, 200, 0.05);\n    --color-primary-300: rgba(103, 255, 200, 0.1);\n    --color-primary-400: rgba(103, 255, 200, 0.25);\n    --color-primary-500: rgba(103, 255, 200, 0.5);\n    --color-primary-600: rgba(103, 255, 200, 0.75);\n    --color-primary-700: #67ffc8;\n    --color-primary-800: #a5ffdf;\n    --color-primary-900: #d0fdec;\n\n    --color-secondary-200: rgba(103, 255, 200, 0.05);\n    --color-secondary-300: rgba(103, 255, 200, 0.1);\n    --color-secondary-400: rgba(103, 255, 200, 0.25);\n    --color-secondary-500: rgba(103, 255, 200, 0.5);\n    --color-secondary-600: rgba(103, 255, 200, 0.75);\n    --color-secondary-700: #67ffc8;\n    --color-secondary-800: #a5ffdf;\n    --color-secondary-900: #d0fdec;\n\n    --color-theme-transparent-200: rgba(6,7,8,0.12);\n    --color-theme-transparent-300: rgba(6,7,8,0.22);\n    --color-theme-transparent-400: rgba(6,7,8,0.5);\n    --color-theme-transparent-500: rgba(255,255,255,0.27);\n    --color-theme-transparent-600: rgba(255,255,255,0.4);\n    --color-theme-transparent-700: rgba(255,255,255,0.6);\n    --color-theme-transparent-800: rgba(255,255,255,0.85);\n\n    --color-primary-opaque-300: #3b4e51;\n    --color-primary-opaque-400: #436b64;\n\n    --color-secondary-opaque-300: #3b4e51;\n    --color-secondary-opaque-400: #436b64;\n\n    --body-bg-main: rgb(44, 46, 56);\n    --body-bg-main-transparent: rgba(44, 46, 56, 0);\n    --page-paper-main: #373a44;\n    --border-primary: #1f2024;\n\n    --note-bg: #464545;\n\n    --shadow-primary-hover: 0 64px 64px 0 rgba(0, 0, 0, 0.2),\n      0 32px 32px 0 rgba(0, 0, 0, 0.2), 0 16px 16px 0 rgba(0, 0, 0, 0.2),\n      0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2);\n    --shadow-primary: 0 64px 64px 0 rgba(0, 0, 0, 0.1),\n      0 32px 32px 0 rgba(0, 0, 0, 0.1), 0 16px 16px 0 rgba(0, 0, 0, 0.1),\n      0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.1);\n\n    --shadow-secondary: 0 4px 14px 0 rgba(0, 0, 0, 0.3);\n\n    --shadow-tertiary: 0 4px 6px -2px rgba(0, 0, 0, 0.1),\n      0 10px 15px -3px rgba(0, 0, 0, 0.15);\n    --shadow-tertiary-hover: 0 4px 12px -2px rgba(0, 0, 0, 0.4),\n      0 10px 30px -3px rgba(0, 0, 0, 0.5);\n\n    --page-paper-main-shadow: rgba(\n      55,\n      58,\n      68,\n      0\n    ); /* Shadow list shadow for page paper main */\n\n    --modal-background: rgba(44, 46, 56, 0.7);\n\n    --highlight-dark: rgba(0, 0, 0, 0.06);\n\n    --input-background-color: #2c2e38;\n\n    --only-white: #ffffff;\n\n    --only-black: #000000;\n  }\n\n  html {\n    color-scheme: light;\n  }\n\n  html {\n    &.neon {\n      color-scheme: dark;\n    }\n  }\n\n  .ac-shadow,\n  .ac-shadow--raised {\n    &--lg {\n      box-shadow: var(--shadow-primary);\n    }\n    &--sm {\n      box-shadow: var(--shadow-tertiary);\n    }\n  }\n\n  .ac-shadow--raised {\n    &--lg {\n      transition: box-shadow 0.3s;\n      &:hover {\n        box-shadow: var(--shadow-primary-hover);\n      }\n    }\n    &--sm {\n      transition: box-shadow 0.3s;\n      &:hover {\n        box-shadow: var(--shadow-tertiary-hover);\n      }\n    }\n  }\n\n  .ac-shadow-optimized--sm {\n    position: relative;\n    box-shadow: var(--shadow-tertiary);\n\n    &::before {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      content: \"\";\n      box-shadow: var(--shadow-tertiary);\n      opacity: 0;\n      border-radius: var(--ac-br-6);\n      transition: opacity 0.3s ease;\n      z-index: -1;\n    }\n\n    @media (hover: hover) {\n      &:hover::before {\n        opacity: 1;\n      }\n    }\n  }\n\n  .ac-shadow-optimized--lg {\n    position: relative;\n    box-shadow: var(--shadow-primary);\n\n    &::before {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      content: \"\";\n      box-shadow: var(--shadow-primary);\n      opacity: 0;\n      border-radius: var(--ac-br-8);\n      transition: opacity 0.3s ease;\n      z-index: -1;\n    }\n\n    @media (hover: hover) {\n      &:hover::before {\n        opacity: 1;\n      }\n    }\n  }\n\n  .ac-border-radius {\n    &-4 {\n      border-radius: var(--ac-br-4);\n    }\n\n    &-6 {\n      border-radius: var(--ac-br-6);\n    }\n\n    &-8 {\n      border-radius: var(--ac-br-8);\n    }\n\n    &-rounded {\n      border-radius: var(--ac-br-rounded);\n    }\n  }\n\n\n  // CSS Tooltip ::after content: data-tooltip\n\n  .c-cooltip {\n  position: relative;\n\n  /*\n    * Prefer scoped variables in this case.\n    * This lines of CSS should be scoped too.\n    */\n\n  --cooltip-spacing: 0.5rem;\n  --cooltip-padding: 0.25rem 0.625rem;\n  --cooltip-max-width: 12.5rem;\n\n  --cooltip-transition-duration: 0.15s, 0.1s, 0.15s;\n  --cooltip-transition-delay: 0.6s;\n  --cooltip-timing: ease, ease, cubic-bezier(0.39, 0.575, 0.565, 1);\n}\n\n.c-cooltip::after {\n  /*\n    * will-change is intended to be used as a last resort,\n    * in order to try to deal with existing performance problems.\n    * It should not be used to anticipate performance problems.\n    * https://developer.mozilla.org/en-US/docs/Web/CSS/will-change\n    *\n    * will-change: transform, opacity\n    */\n  pointer-events: none;\n  content: attr(data-tooltip);\n  position: absolute;\n  color: #fff;\n  opacity: 0;\n  background-color: rgba(0, 0, 0, 0.9);\n  border-radius: 0.5rem;\n  font-size: 0.75rem;\n  font-weight: 500;\n  line-height: 1.3;\n  max-width: var(--cooltip-max-width);\n  padding: var(--cooltip-padding);\n  text-align: center;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n\n.c-cooltip--top::after {\n  bottom: calc(100% + var(--cooltip-spacing));\n  left: 50%;\n  transform: scale(0.85) translateX(-50%);\n  transform-origin: 0;\n}\n\n.c-cooltip--right::after {\n  left: calc(100% + var(--cooltip-spacing));\n  transform: scale(0.85);\n}\n\n.c-cooltip--bottom::after {\n  top: calc(100% + var(--cooltip-spacing));\n  left: 50%;\n  transform: scale(0.85) translateX(-50%);\n  transform-origin: 0;\n}\n\n.c-cooltip--left::after {\n  right: calc(100% + var(--cooltip-spacing));\n  transform: scale(0.85);\n}\n\n/*\n* Make sure that disabled and aria pressed\n* items do not have tooltips available.\n*/\n.c-cooltip:disabled::after,\n[aria-pressed=\"true\"]::after {\n  display: none;\n}\n\n/*\n*\n* Only use hover when is available .\n* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover\n*/\n@media (hover: hover) {\n  /*\n    * Here we maybe have a complex selector but actually it's not.\n    * We simply asks here to show tooltip only on hover.\n    * Focused elements (in this case, clicked elements) should hide the tooltip.\n    */\n  .c-cooltip--top:not(:focus):hover::after,\n  .c-cooltip--bottom:not(:focus):hover::after {\n    transition-property: opacity, transform;\n    transition-duration: var(--cooltip-transition-duration);\n    transition-delay: var(--cooltip-transition-delay);\n    transition-timing-function: var(--cooltip-timing);\n    transform: scale(1) translateX(-50%);\n    opacity: 1;\n  }\n\n  /*\n    *\n    * This is not code duplication!\n    * Transform properties are tricky to animate and values\n    * are not the same depending on the tooltip position.\n    *\n    * Animating only one transform, eg. scale(1) will\n    * override all previously set transforms, eg. translateY.\n    * So we need to always chain them.\n    * eg. transform: scale(1) translateY(-50%) etc...\n    */\n\n  .c-cooltip--right:not(:focus):hover::after,\n  .c-cooltip--left:not(:focus):hover::after {\n    transition-property: opacity, transform;\n    transition-duration: var(--cooltip-transition-duration);\n    transition-delay: var(--cooltip-transition-delay);\n    transition-timing-function: var(--cooltip-timing);\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n\n`;\n"],"mappings":";;;;;;AAAA;AAEO,IAAMA,WAAW,OAAGC,mCAAiB,wiSAsd3C;AAAC"}

package/dist/cjs/components/Modal/Modal.js

@@ -10,7 +10,7 @@ var _Window = require("../Window");
 var _useForkRef = _interopRequireDefault(require("../../utils/useForkRef"));
 var _createChainedFunction = _interopRequireDefault(require("../../utils/createChainedFunction"));
 var _Overlay = require("../Overlay");
-var _excluded = ["children", "disableFocusLock", "disableScrollLock", "disableBackgroundClick", "disableBackgroundColor", "disableCloseOnEsc", "open", "onClose"];
+var _excluded = ["children", "disableFocusLock", "disableScrollLock", "disableBackgroundClick", "disableBackgroundColor", "disableCloseOnEsc", "open", "onClose", "onClickOutside"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -41,6 +41,7 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     _ref$open = _ref.open,
     defaultOpen = _ref$open === void 0 ? false : _ref$open,
     onClose = _ref.onClose,
+    onClickOutside = _ref.onClickOutside,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = (0, _react.useState)(defaultOpen),
     _useState2 = _slicedToArray(_useState, 2),
@@ -67,9 +68,12 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var handleBackgroundClick = (0, _react.useCallback)(function (event) {
     if (!disableBackgroundClick) {
       event.preventDefault();
-      handleClose();
+      return handleClose();
     }
-  }, [disableBackgroundClick, handleClose]);
+    if (onClickOutside) {
+      onClickOutside(event);
+    }
+  }, [disableBackgroundClick, onClickOutside, handleClose]);
   var handleEnter = (0, _react.useCallback)(function () {
     setExited(false);
   }, []);

package/dist/cjs/components/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","names":["getHasTransition","children","props","Object","prototype","hasOwnProperty","call","Modal","forwardRef","ref","disableFocusLock","disableScrollLock","disableBackgroundClick","disableBackgroundColor","disableCloseOnEsc","open","defaultOpen","onClose","rest","useState","setOpen","exited","setExited","innerRef","useRef","handleRef","useForkRef","hasTransition","useMemo","useEffect","handleClose","useCallback","handleBackgroundClick","event","preventDefault","handleEnter","handleExited","childProps","onEnter","createChainedFunction","onExited","in","cloneElement","displayName"],"sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  HTMLAttributes,\n  useRef,\n  cloneElement,\n  useMemo,\n  useCallback,\n  ReactElement,\n  useState,\n  useEffect,\n  MouseEvent,\n} from \"react\";\nimport { Window } from \"../Window\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport createChainedFunction from \"../../utils/createChainedFunction\";\nimport { Overlay } from \"../Overlay\";\n\nexport interface IModal {\n  disableFocusLock?: boolean;\n  disableScrollLock?: boolean;\n  open?: boolean;\n  disableBackgroundClick?: boolean;\n  disableCloseOnEsc?: boolean;\n  disableBackgroundColor?: boolean;\n  onClose?: () => void;\n  children: ReactElement;\n}\n\nconst getHasTransition = (children): boolean => {\n  return children.props\n    ? Object.prototype.hasOwnProperty.call(children.props, \"in\")\n    : false;\n};\n\nexport const Modal = forwardRef<\n  HTMLDivElement,\n  IModal & HTMLAttributes<HTMLDivElement>\n>(\n  (\n    {\n      children,\n      disableFocusLock = false,\n      disableScrollLock = false,\n      disableBackgroundClick = false,\n      disableBackgroundColor = false,\n      disableCloseOnEsc = false,\n      open: defaultOpen = false,\n      onClose,\n      ...rest\n    },\n    ref\n  ) => {\n    const [open, setOpen] = useState(defaultOpen);\n    const [exited, setExited] = useState(true);\n    const innerRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(innerRef, ref);\n\n    const hasTransition = useMemo(() => {\n      return getHasTransition(children);\n    }, [children]);\n\n    useEffect(() => {\n      setOpen(defaultOpen);\n    }, [defaultOpen]);\n\n    const handleClose = useCallback(() => {\n      setOpen(false);\n      if (!hasTransition) {\n        typeof onClose === \"function\" && onClose();\n      }\n    }, [hasTransition, onClose]);\n\n    const handleBackgroundClick = useCallback(\n      (event: MouseEvent<HTMLDivElement>) => {\n        if (!disableBackgroundClick) {\n          event.preventDefault();\n          handleClose();\n        }\n      },\n      [disableBackgroundClick, handleClose]\n    );\n\n    const handleEnter = useCallback(() => {\n      setExited(false);\n    }, []);\n\n    const handleExited = useCallback(() => {\n      setExited(true);\n      typeof onClose === \"function\" && onClose();\n    }, [onClose]);\n\n    const childProps = useMemo(() => {\n      let props = {};\n\n      // It's a Transition like component\n      if (hasTransition && children) {\n        props = {\n          onEnter: createChainedFunction(handleEnter, children.props.onEnter),\n          onExited: createChainedFunction(\n            handleExited,\n            children.props.onExited\n          ),\n          in: open,\n        };\n      }\n\n      return props;\n    }, [children, handleEnter, handleExited, hasTransition, open]);\n\n    if (!open && (!hasTransition || exited)) {\n      return null;\n    }\n\n    return (\n      <Window\n        {...rest}\n        ref={handleRef}\n        onClose={handleClose}\n        disableFocusLock={disableFocusLock}\n        disableScrollLock={disableScrollLock}\n        disableCloseOnEsc={disableCloseOnEsc}\n      >\n        {open ? (\n          <Overlay\n            onClick={handleBackgroundClick}\n            disableBackgroundColor={disableBackgroundColor}\n          />\n        ) : null}\n        {cloneElement(children, childProps)}\n      </Window>\n    );\n  }\n);\n\nModal.displayName = \"Modal\";\n"],"mappings":"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"}
+{"version":3,"file":"Modal.js","names":["getHasTransition","children","props","Object","prototype","hasOwnProperty","call","Modal","forwardRef","ref","disableFocusLock","disableScrollLock","disableBackgroundClick","disableBackgroundColor","disableCloseOnEsc","open","defaultOpen","onClose","onClickOutside","rest","useState","setOpen","exited","setExited","innerRef","useRef","handleRef","useForkRef","hasTransition","useMemo","useEffect","handleClose","useCallback","handleBackgroundClick","event","preventDefault","handleEnter","handleExited","childProps","onEnter","createChainedFunction","onExited","in","cloneElement","displayName"],"sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  HTMLAttributes,\n  useRef,\n  cloneElement,\n  useMemo,\n  useCallback,\n  ReactElement,\n  useState,\n  useEffect,\n  MouseEvent,\n} from \"react\";\nimport { Window } from \"../Window\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport createChainedFunction from \"../../utils/createChainedFunction\";\nimport { Overlay } from \"../Overlay\";\n\nexport interface IModal {\n  disableFocusLock?: boolean;\n  disableScrollLock?: boolean;\n  open?: boolean;\n  disableBackgroundClick?: boolean;\n  disableCloseOnEsc?: boolean;\n  disableBackgroundColor?: boolean;\n  onClose?: () => void;\n  children: ReactElement;\n  onClickOutside?: (event) => void;\n}\n\nconst getHasTransition = (children): boolean => {\n  return children.props\n    ? Object.prototype.hasOwnProperty.call(children.props, \"in\")\n    : false;\n};\n\nexport const Modal = forwardRef<\n  HTMLDivElement,\n  IModal & HTMLAttributes<HTMLDivElement>\n>(\n  (\n    {\n      children,\n      disableFocusLock = false,\n      disableScrollLock = false,\n      disableBackgroundClick = false,\n      disableBackgroundColor = false,\n      disableCloseOnEsc = false,\n      open: defaultOpen = false,\n      onClose,\n      onClickOutside,\n      ...rest\n    },\n    ref\n  ) => {\n    const [open, setOpen] = useState(defaultOpen);\n    const [exited, setExited] = useState(true);\n    const innerRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(innerRef, ref);\n\n    const hasTransition = useMemo(() => {\n      return getHasTransition(children);\n    }, [children]);\n\n    useEffect(() => {\n      setOpen(defaultOpen);\n    }, [defaultOpen]);\n\n    const handleClose = useCallback(() => {\n      setOpen(false);\n      if (!hasTransition) {\n        typeof onClose === \"function\" && onClose();\n      }\n    }, [hasTransition, onClose]);\n\n    const handleBackgroundClick = useCallback(\n      (event: MouseEvent<HTMLDivElement>) => {\n        if (!disableBackgroundClick) {\n          event.preventDefault();\n          return handleClose();\n        }\n\n        if (onClickOutside) {\n          onClickOutside(event);\n        }\n      },\n      [disableBackgroundClick, onClickOutside, handleClose]\n    );\n\n    const handleEnter = useCallback(() => {\n      setExited(false);\n    }, []);\n\n    const handleExited = useCallback(() => {\n      setExited(true);\n      typeof onClose === \"function\" && onClose();\n    }, [onClose]);\n\n    const childProps = useMemo(() => {\n      let props = {};\n\n      // It's a Transition like component\n      if (hasTransition && children) {\n        props = {\n          onEnter: createChainedFunction(handleEnter, children.props.onEnter),\n          onExited: createChainedFunction(\n            handleExited,\n            children.props.onExited\n          ),\n          in: open,\n        };\n      }\n\n      return props;\n    }, [children, handleEnter, handleExited, hasTransition, open]);\n\n    if (!open && (!hasTransition || exited)) {\n      return null;\n    }\n\n    return (\n      <Window\n        {...rest}\n        ref={handleRef}\n        onClose={handleClose}\n        disableFocusLock={disableFocusLock}\n        disableScrollLock={disableScrollLock}\n        disableCloseOnEsc={disableCloseOnEsc}\n      >\n        {open ? (\n          <Overlay\n            onClick={handleBackgroundClick}\n            disableBackgroundColor={disableBackgroundColor}\n          />\n        ) : null}\n        {cloneElement(children, childProps)}\n      </Window>\n    );\n  }\n);\n\nModal.displayName = \"Modal\";\n"],"mappings":"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"}

package/dist/esm/components/Dialog/Dialog.d.ts

@@ -1,11 +1,12 @@
-import React from "react";
-export interface DialogProps {
+import React, { HTMLAttributes } from "react";
+export interface DialogProps extends HTMLAttributes<HTMLDivElement> {
     open?: boolean;
     onClose?: () => void;
     className?: string;
     enableBackgroundClick?: boolean;
     disableCloseOnEsc?: boolean;
     animate?: "fade" | "slide";
+    onClickOutside?: (event: any) => void;
 }
 export declare const _Dialog: React.ForwardRefExoticComponent<DialogProps & {
     children?: React.ReactNode;

package/dist/esm/components/Dialog/Dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AACA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAa7D,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC5B;AAED,eAAO,MAAM,OAAO;;wCAoDnB,CAAC;AAKF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;CAKjB,CAAC"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAc,cAAc,EAAqB,MAAM,OAAO,CAAC;AAa7E,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,cAAc,CAAC;IACjE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,CAAC,KAAK,KAAA,KAAK,IAAI,CAAC;CAClC;AAED,eAAO,MAAM,OAAO;;wCAwDnB,CAAC;AAKF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;CAKjB,CAAC"}

package/dist/esm/components/Dialog/Dialog.js

@@ -1,3 +1,6 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _excluded = ["children", "open", "onClose", "className", "enableBackgroundClick", "disableCloseOnEsc", "animate", "onClickOutside"];
 import classnames from "classnames";
 import React, { forwardRef } from "react";
 import { Modal } from "../Modal";
@@ -22,7 +25,9 @@ export var _Dialog = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _ref$disableCloseOnEs = _ref.disableCloseOnEsc,
     disableCloseOnEsc = _ref$disableCloseOnEs === void 0 ? false : _ref$disableCloseOnEs,
     _ref$animate = _ref.animate,
-    animate = _ref$animate === void 0 ? "slide" : _ref$animate;
+    animate = _ref$animate === void 0 ? "slide" : _ref$animate,
+    onClickOutside = _ref.onClickOutside,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
   var animateDialog = function animateDialog() {
     switch (animate) {
       case "fade":
@@ -42,13 +47,14 @@ export var _Dialog = /*#__PURE__*/forwardRef(function (_ref, ref) {
   return (
     /*#__PURE__*/
     // <DialogContext.Provider value={{}}>
-    React.createElement(Modal, {
+    React.createElement(Modal, _extends({
       ref: ref,
       open: open,
       onClose: onClose,
       disableBackgroundClick: !enableBackgroundClick,
-      disableCloseOnEsc: disableCloseOnEsc
-    }, animateDialog())
+      disableCloseOnEsc: disableCloseOnEsc,
+      onClickOutside: onClickOutside
+    }, rest), animateDialog())
     // </DialogContext.Provider>
   );
 });

package/dist/esm/components/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","names":["classnames","React","forwardRef","Modal","SlideFromTop","StyledDialog","Fade","DialogActions","DialogContent","DialogContentDivider","DialogTitle","_Dialog","ref","children","open","onClose","className","enableBackgroundClick","disableCloseOnEsc","animate","animateDialog","displayName","Dialog","Object","assign","Title","Content","ContentDivider","Actions"],"sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import classnames from \"classnames\";\nimport React, { forwardRef, PropsWithChildren } from \"react\";\nimport { Modal } from \"../Modal\";\nimport { SlideFromTop } from \"../Transitions/SlideFromTop\";\nimport { StyledDialog } from \"./Styles\";\n\n// import { DialogContext } from \"./DialogContext\";\n\nimport { Fade } from \"../Transitions\";\nimport { DialogActions } from \"./DialogActions\";\nimport { DialogContent } from \"./DialogContent\";\nimport { DialogContentDivider } from \"./DialogContentDivider\";\nimport { DialogTitle } from \"./DialogTitle\";\n\nexport interface DialogProps {\n  open?: boolean;\n  onClose?: () => void;\n  className?: string;\n  enableBackgroundClick?: boolean;\n  disableCloseOnEsc?: boolean;\n  animate?: \"fade\" | \"slide\";\n}\n\nexport const _Dialog = forwardRef<\n  HTMLDivElement,\n  PropsWithChildren<DialogProps>\n>(\n  (\n    {\n      children,\n      open = false,\n      onClose,\n      className,\n      enableBackgroundClick = false,\n      disableCloseOnEsc = false,\n      animate = \"slide\",\n    },\n    ref\n  ) => {\n    const animateDialog = () => {\n      switch (animate) {\n        case \"fade\":\n          return (\n            <Fade in={open}>\n              <StyledDialog className={classnames(\"c-dialog\", className)}>\n                {children}\n              </StyledDialog>\n            </Fade>\n          );\n        default:\n          return (\n            <SlideFromTop in={open}>\n              <StyledDialog className={classnames(\"c-dialog\", className)}>\n                {children}\n              </StyledDialog>\n            </SlideFromTop>\n          );\n      }\n    };\n\n    return (\n      // <DialogContext.Provider value={{}}>\n\n      <Modal\n        ref={ref}\n        open={open}\n        onClose={onClose}\n        disableBackgroundClick={!enableBackgroundClick}\n        disableCloseOnEsc={disableCloseOnEsc}\n      >\n        {animateDialog()}\n      </Modal>\n      // </DialogContext.Provider>\n    );\n  }\n);\n\n_Dialog.displayName = \"Dialog\";\n\n// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/34757\nexport const Dialog = Object.assign({}, _Dialog, {\n  Title: DialogTitle,\n  Content: DialogContent,\n  ContentDivider: DialogContentDivider,\n  Actions: DialogActions,\n});\n"],"mappings":"AAAA,OAAOA,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,IAAIC,UAAU,QAA2B,OAAO;AAC5D,SAASC,KAAK,QAAQ,UAAU;AAChC,SAASC,YAAY,QAAQ,6BAA6B;AAC1D,SAASC,YAAY,QAAQ,UAAU;;AAEvC;;AAEA,SAASC,IAAI,QAAQ,gBAAgB;AACrC,SAASC,aAAa,QAAQ,iBAAiB;AAC/C,SAASC,aAAa,QAAQ,iBAAiB;AAC/C,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,SAASC,WAAW,QAAQ,eAAe;AAW3C,OAAO,IAAMC,OAAO,gBAAGT,UAAU,CAI/B,gBAUEU,GAAG,EACA;EAAA,IATDC,QAAQ,QAARA,QAAQ;IAAA,iBACRC,IAAI;IAAJA,IAAI,0BAAG,KAAK;IACZC,OAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IAAA,6BACTC,qBAAqB;IAArBA,qBAAqB,sCAAG,KAAK;IAAA,6BAC7BC,iBAAiB;IAAjBA,iBAAiB,sCAAG,KAAK;IAAA,oBACzBC,OAAO;IAAPA,OAAO,6BAAG,OAAO;EAInB,IAAMC,aAAa,GAAG,SAAhBA,aAAa,GAAS;IAC1B,QAAQD,OAAO;MACb,KAAK,MAAM;QACT,oBACE,oBAAC,IAAI;UAAC,EAAE,EAAEL;QAAK,gBACb,oBAAC,YAAY;UAAC,SAAS,EAAEd,UAAU,CAAC,UAAU,EAAEgB,SAAS;QAAE,GACxDH,QAAQ,CACI,CACV;MAEX;QACE,oBACE,oBAAC,YAAY;UAAC,EAAE,EAAEC;QAAK,gBACrB,oBAAC,YAAY;UAAC,SAAS,EAAEd,UAAU,CAAC,UAAU,EAAEgB,SAAS;QAAE,GACxDH,QAAQ,CACI,CACF;IACf;EAER,CAAC;EAED;IAAA;IACE;IAEA,oBAAC,KAAK;MACJ,GAAG,EAAED,GAAI;MACT,IAAI,EAAEE,IAAK;MACX,OAAO,EAAEC,OAAQ;MACjB,sBAAsB,EAAE,CAACE,qBAAsB;MAC/C,iBAAiB,EAAEC;IAAkB,GAEpCE,aAAa,EAAE;IAElB;EAAA;AAEJ,CAAC,CACF;;AAEDT,OAAO,CAACU,WAAW,GAAG,QAAQ;;AAE9B;AACA,OAAO,IAAMC,MAAM,GAAGC,MAAM,CAACC,MAAM,CAAC,CAAC,CAAC,EAAEb,OAAO,EAAE;EAC/Cc,KAAK,EAAEf,WAAW;EAClBgB,OAAO,EAAElB,aAAa;EACtBmB,cAAc,EAAElB,oBAAoB;EACpCmB,OAAO,EAAErB;AACX,CAAC,CAAC"}
+{"version":3,"file":"Dialog.js","names":["classnames","React","forwardRef","Modal","SlideFromTop","StyledDialog","Fade","DialogActions","DialogContent","DialogContentDivider","DialogTitle","_Dialog","ref","children","open","onClose","className","enableBackgroundClick","disableCloseOnEsc","animate","onClickOutside","rest","animateDialog","displayName","Dialog","Object","assign","Title","Content","ContentDivider","Actions"],"sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import classnames from \"classnames\";\nimport React, { forwardRef, HTMLAttributes, PropsWithChildren } from \"react\";\nimport { Modal } from \"../Modal\";\nimport { SlideFromTop } from \"../Transitions/SlideFromTop\";\nimport { StyledDialog } from \"./Styles\";\n\n// import { DialogContext } from \"./DialogContext\";\n\nimport { Fade } from \"../Transitions\";\nimport { DialogActions } from \"./DialogActions\";\nimport { DialogContent } from \"./DialogContent\";\nimport { DialogContentDivider } from \"./DialogContentDivider\";\nimport { DialogTitle } from \"./DialogTitle\";\n\nexport interface DialogProps extends HTMLAttributes<HTMLDivElement> {\n  open?: boolean;\n  onClose?: () => void;\n  className?: string;\n  enableBackgroundClick?: boolean;\n  disableCloseOnEsc?: boolean;\n  animate?: \"fade\" | \"slide\";\n  onClickOutside?: (event) => void;\n}\n\nexport const _Dialog = forwardRef<\n  HTMLDivElement,\n  PropsWithChildren<DialogProps>\n>(\n  (\n    {\n      children,\n      open = false,\n      onClose,\n      className,\n      enableBackgroundClick = false,\n      disableCloseOnEsc = false,\n      animate = \"slide\",\n      onClickOutside,\n      ...rest\n    },\n    ref\n  ) => {\n    const animateDialog = () => {\n      switch (animate) {\n        case \"fade\":\n          return (\n            <Fade in={open}>\n              <StyledDialog className={classnames(\"c-dialog\", className)}>\n                {children}\n              </StyledDialog>\n            </Fade>\n          );\n        default:\n          return (\n            <SlideFromTop in={open}>\n              <StyledDialog className={classnames(\"c-dialog\", className)}>\n                {children}\n              </StyledDialog>\n            </SlideFromTop>\n          );\n      }\n    };\n\n    return (\n      // <DialogContext.Provider value={{}}>\n\n      <Modal\n        ref={ref}\n        open={open}\n        onClose={onClose}\n        disableBackgroundClick={!enableBackgroundClick}\n        disableCloseOnEsc={disableCloseOnEsc}\n        onClickOutside={onClickOutside}\n        {...rest}\n      >\n        {animateDialog()}\n      </Modal>\n      // </DialogContext.Provider>\n    );\n  }\n);\n\n_Dialog.displayName = \"Dialog\";\n\n// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/34757\nexport const Dialog = Object.assign({}, _Dialog, {\n  Title: DialogTitle,\n  Content: DialogContent,\n  ContentDivider: DialogContentDivider,\n  Actions: DialogActions,\n});\n"],"mappings":";;;AAAA,OAAOA,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,IAAIC,UAAU,QAA2C,OAAO;AAC5E,SAASC,KAAK,QAAQ,UAAU;AAChC,SAASC,YAAY,QAAQ,6BAA6B;AAC1D,SAASC,YAAY,QAAQ,UAAU;;AAEvC;;AAEA,SAASC,IAAI,QAAQ,gBAAgB;AACrC,SAASC,aAAa,QAAQ,iBAAiB;AAC/C,SAASC,aAAa,QAAQ,iBAAiB;AAC/C,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,SAASC,WAAW,QAAQ,eAAe;AAY3C,OAAO,IAAMC,OAAO,gBAAGT,UAAU,CAI/B,gBAYEU,GAAG,EACA;EAAA,IAXDC,QAAQ,QAARA,QAAQ;IAAA,iBACRC,IAAI;IAAJA,IAAI,0BAAG,KAAK;IACZC,OAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IAAA,6BACTC,qBAAqB;IAArBA,qBAAqB,sCAAG,KAAK;IAAA,6BAC7BC,iBAAiB;IAAjBA,iBAAiB,sCAAG,KAAK;IAAA,oBACzBC,OAAO;IAAPA,OAAO,6BAAG,OAAO;IACjBC,cAAc,QAAdA,cAAc;IACXC,IAAI;EAIT,IAAMC,aAAa,GAAG,SAAhBA,aAAa,GAAS;IAC1B,QAAQH,OAAO;MACb,KAAK,MAAM;QACT,oBACE,oBAAC,IAAI;UAAC,EAAE,EAAEL;QAAK,gBACb,oBAAC,YAAY;UAAC,SAAS,EAAEd,UAAU,CAAC,UAAU,EAAEgB,SAAS;QAAE,GACxDH,QAAQ,CACI,CACV;MAEX;QACE,oBACE,oBAAC,YAAY;UAAC,EAAE,EAAEC;QAAK,gBACrB,oBAAC,YAAY;UAAC,SAAS,EAAEd,UAAU,CAAC,UAAU,EAAEgB,SAAS;QAAE,GACxDH,QAAQ,CACI,CACF;IACf;EAER,CAAC;EAED;IAAA;IACE;IAEA,oBAAC,KAAK;MACJ,GAAG,EAAED,GAAI;MACT,IAAI,EAAEE,IAAK;MACX,OAAO,EAAEC,OAAQ;MACjB,sBAAsB,EAAE,CAACE,qBAAsB;MAC/C,iBAAiB,EAAEC,iBAAkB;MACrC,cAAc,EAAEE;IAAe,GAC3BC,IAAI,GAEPC,aAAa,EAAE;IAElB;EAAA;AAEJ,CAAC,CACF;;AAEDX,OAAO,CAACY,WAAW,GAAG,QAAQ;;AAE9B;AACA,OAAO,IAAMC,MAAM,GAAGC,MAAM,CAACC,MAAM,CAAC,CAAC,CAAC,EAAEf,OAAO,EAAE;EAC/CgB,KAAK,EAAEjB,WAAW;EAClBkB,OAAO,EAAEpB,aAAa;EACtBqB,cAAc,EAAEpB,oBAAoB;EACpCqB,OAAO,EAAEvB;AACX,CAAC,CAAC"}

package/dist/esm/components/GlobalStyle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalStyle.d.ts","sourceRoot":"","sources":["../../../src/components/GlobalStyle.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,gGA4cvB,CAAC"}
+{"version":3,"file":"GlobalStyle.d.ts","sourceRoot":"","sources":["../../../src/components/GlobalStyle.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,gGAsdvB,CAAC"}

package/dist/esm/components/GlobalStyle.js

@@ -1,3 +1,3 @@
 import { createGlobalStyle } from "styled-components";
-export var GlobalStyle = createGlobalStyle([":root{--color-primary:#5d2bff;--color-secondary:#5d2bff;--color-theme-100:#ffffff;--color-theme-200:#f6f6f9;--color-theme-300:#ebebee;--color-theme-400:#d7d7da;--color-theme-500:#b9b9bd;--color-theme-600:#89898e;--color-theme-700:#6d6d73;--color-theme-800:#5b5b61;--color-theme-900:#303037;--color-primary-200:rgba(93,43,255,0.05);--color-primary-300:rgba(93,43,255,0.1);--color-primary-400:rgba(93,43,255,0.25);--color-primary-500:rgba(93,43,255,0.5);--color-primary-600:rgba(93,43,255,0.75);--color-primary-700:#5d2bff;--color-primary-800:#4a21cd;--color-primary-900:#32178b;--color-secondary-200:rgba(93,43,255,0.05);--color-secondary-300:rgba(93,43,255,0.1);--color-secondary-400:rgba(93,43,255,0.25);--color-secondary-500:rgba(93,43,255,0.5);--color-secondary-600:rgba(93,43,255,0.75);--color-secondary-700:#5d2bff;--color-secondary-800:#4a21cd;--color-secondary-900:#32178b;--color-theme-transparent-200:rgba(36,36,76,0.04);--color-theme-transparent-300:rgba(48,48,55,0.1);--color-theme-transparent-400:rgba(48,48,55,0.2);--color-theme-transparent-500:rgba(48,48,55,0.34);--color-theme-transparent-600:rgba(48,48,55,0.57);--color-theme-transparent-700:rgba(48,48,55,0.7);--color-theme-transparent-800:rgba(48,48,55,0.8);--color-primary-opaque-300:#efeaff;--color-primary-opaque-400:#d6caff;--color-secondary-opaque-300:#efeaff;--color-secondary-opaque-400:#d6caff;--color-sucess-green:#64cd93;--body-bg-main:rgb(244,245,247);--body-bg-main-transparent:rgba(244,245,247,0);--page-paper-main:#ffffff;--border-primary:#d7d7da;--note-bg:#fff9f1;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.06),0 16px 16px 0 rgba(0,0,0,0.04),0 4px 4px 0 rgba(0,0,0,0.04),0 2px 2px 0 rgba(0,0,0,0.04);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.06),0 32px 32px 0 rgba(0,0,0,0.03),0 16px 16px 0 rgba(0,0,0,0.02),0 4px 4px 0 rgba(0,0,0,0.02),0 2px 2px 0 rgba(0,0,0,0.02);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.17);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.05),0 10px 15px -3px rgba(0,0,0,0.1);--shadow-tertiary-hover:0 4px 10px -2px rgba(0,0,0,0.1),0 12px 20px -3px rgba(0,0,0,0.2);--page-paper-main-shadow:rgba( 255,255,255,0 );--modal-background:rgba(244,245,247,0.6);--highlight-dark:rgba(0,0,0,0.03);--input-background-color:#ffffff;--red-alert:rgb(237,97,97);--warning:#ffcc6b;--only-white:#ffffff;--only-black:#000000;--ac-br-4:4px;--ac-br-6:6px;--ac-br-8:8px;--ac-br-rounded:999px;}.cupcake{--color-primary:#29bcdd;--color-secondary:#fe6fa7;--color-primary-200:rgba(41,188,221,0.07);--color-primary-300:rgba(41,188,221,0.12);--color-primary-400:rgba(41,188,221,0.26);--color-primary-500:rgba(41,188,221,0.52);--color-primary-600:rgba(41,188,221,0.75);--color-primary-700:#29bcdd;--color-primary-800:#219fbb;--color-primary-900:#1a768b;--color-secondary-200:rgba(254,111,167,0.07);--color-secondary-300:rgba(254,111,167,0.13);--color-secondary-400:rgba(254,111,167,0.27);--color-secondary-500:rgba(254,111,167,0.52);--color-secondary-600:rgba(254,111,167,0.75);--color-secondary-700:#fe6fa7;--color-secondary-800:#dd6091;--color-secondary-900:#ab496f;--color-primary-opaque-300:#e5f7fb;--color-primary-opaque-400:#c8eef6;--color-secondary-opaque-300:#ffecf4;--color-secondary-opaque-400:#ffd8e7;}.classic{--color-primary:#4182f2;--color-secondary:#4182f2;--color-primary-200:rgba(65,130,242,0.07);--color-primary-300:rgba(65,130,242,0.13);--color-primary-400:rgba(65,130,242,0.26);--color-primary-500:rgba(65,130,242,0.52);--color-primary-600:rgba(65,130,242,0.75);--color-primary-700:#4182f2;--color-primary-800:#356bc8;--color-primary-900:#244a8a;--color-secondary-200:rgba(65,130,242,0.07);--color-secondary-300:rgba(65,130,242,0.13);--color-secondary-400:rgba(65,130,242,0.26);--color-secondary-500:rgba(65,130,242,0.52);--color-secondary-600:rgba(65,130,242,0.75);--color-secondary-700:#4182f2;--color-secondary-800:#356bc8;--color-secondary-900:#244a8a;--color-primary-opaque-300:#e6effd;--color-primary-opaque-400:#cedffc;--color-secondary-opaque-300:#e6effd;--color-secondary-opaque-400:#cedffc;}.neon{--color-primary:#67ffc8;--color-secondary:#67ffc8;--color-theme-100:#000000;--color-theme-200:#31333e;--color-theme-300:#2b2d37;--color-theme-400:#1f2024;--color-theme-500:#6D6D73;--color-theme-600:#89898e;--color-theme-700:#b0b0b5;--color-theme-800:#dfdfe5;--color-theme-900:#ffffff;--color-primary-200:rgba(103,255,200,0.05);--color-primary-300:rgba(103,255,200,0.1);--color-primary-400:rgba(103,255,200,0.25);--color-primary-500:rgba(103,255,200,0.5);--color-primary-600:rgba(103,255,200,0.75);--color-primary-700:#67ffc8;--color-primary-800:#a5ffdf;--color-primary-900:#d0fdec;--color-secondary-200:rgba(103,255,200,0.05);--color-secondary-300:rgba(103,255,200,0.1);--color-secondary-400:rgba(103,255,200,0.25);--color-secondary-500:rgba(103,255,200,0.5);--color-secondary-600:rgba(103,255,200,0.75);--color-secondary-700:#67ffc8;--color-secondary-800:#a5ffdf;--color-secondary-900:#d0fdec;--color-theme-transparent-200:rgba(6,7,8,0.12);--color-theme-transparent-300:rgba(6,7,8,0.22);--color-theme-transparent-400:rgba(6,7,8,0.5);--color-theme-transparent-500:rgba(255,255,255,0.27);--color-theme-transparent-600:rgba(255,255,255,0.4);--color-theme-transparent-700:rgba(255,255,255,0.6);--color-theme-transparent-800:rgba(255,255,255,0.85);--color-primary-opaque-300:#3b4e51;--color-primary-opaque-400:#436b64;--color-secondary-opaque-300:#3b4e51;--color-secondary-opaque-400:#436b64;--body-bg-main:rgb(44,46,56);--body-bg-main-transparent:rgba(44,46,56,0);--page-paper-main:#373a44;--border-primary:#1f2024;--note-bg:#464545;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.2),0 32px 32px 0 rgba(0,0,0,0.2),0 16px 16px 0 rgba(0,0,0,0.2),0 4px 4px 0 rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.2);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.1),0 16px 16px 0 rgba(0,0,0,0.1),0 4px 4px 0 rgba(0,0,0,0.1),0 2px 2px 0 rgba(0,0,0,0.1);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.3);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.1),0 10px 15px -3px rgba(0,0,0,0.15);--shadow-tertiary-hover:0 4px 12px -2px rgba(0,0,0,0.4),0 10px 30px -3px rgba(0,0,0,0.5);--page-paper-main-shadow:rgba( 55,58,68,0 );--modal-background:rgba(44,46,56,0.7);--highlight-dark:rgba(0,0,0,0.06);--input-background-color:#2c2e38;--only-white:#ffffff;--only-black:#000000;}.ac-shadow,.ac-shadow--raised{&--lg{box-shadow:var(--shadow-primary);}&--sm{box-shadow:var(--shadow-tertiary);}}.ac-shadow--raised{&--lg{transition:box-shadow 0.3s;&:hover{box-shadow:var(--shadow-primary-hover);}}&--sm{transition:box-shadow 0.3s;&:hover{box-shadow:var(--shadow-tertiary-hover);}}}.ac-shadow-optimized--sm{position:relative;box-shadow:var(--shadow-tertiary);&::before{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";box-shadow:var(--shadow-tertiary);opacity:0;border-radius:var(--ac-br-6);transition:opacity 0.3s ease;z-index:-1;}@media (hover:hover){&:hover::before{opacity:1;}}}.ac-shadow-optimized--lg{position:relative;box-shadow:var(--shadow-primary);&::before{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";box-shadow:var(--shadow-primary);opacity:0;border-radius:var(--ac-br-8);transition:opacity 0.3s ease;z-index:-1;}@media (hover:hover){&:hover::before{opacity:1;}}}.ac-border-radius{&-4{border-radius:var(--ac-br-4);}&-6{border-radius:var(--ac-br-6);}&-8{border-radius:var(--ac-br-8);}&-rounded{border-radius:var(--ac-br-rounded);}}.c-cooltip{position:relative;--cooltip-spacing:0.5rem;--cooltip-padding:0.25rem 0.625rem;--cooltip-max-width:12.5rem;--cooltip-transition-duration:0.15s,0.1s,0.15s;--cooltip-transition-delay:0.6s;--cooltip-timing:ease,ease,cubic-bezier(0.39,0.575,0.565,1);}.c-cooltip::after{pointer-events:none;content:attr(data-tooltip);position:absolute;color:#fff;opacity:0;background-color:rgba(0,0,0,0.9);border-radius:0.5rem;font-size:0.75rem;font-weight:500;line-height:1.3;max-width:var(--cooltip-max-width);padding:var(--cooltip-padding);text-align:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}.c-cooltip--top::after{bottom:calc(100% + var(--cooltip-spacing));left:50%;transform:scale(0.85) translateX(-50%);transform-origin:0;}.c-cooltip--right::after{left:calc(100% + var(--cooltip-spacing));transform:scale(0.85);}.c-cooltip--bottom::after{top:calc(100% + var(--cooltip-spacing));left:50%;transform:scale(0.85) translateX(-50%);transform-origin:0;}.c-cooltip--left::after{right:calc(100% + var(--cooltip-spacing));transform:scale(0.85);}.c-cooltip:disabled::after,[aria-pressed=\"true\"]::after{display:none;}@media (hover:hover){.c-cooltip--top:not(:focus):hover::after,.c-cooltip--bottom:not(:focus):hover::after{transition-property:opacity,transform;transition-duration:var(--cooltip-transition-duration);transition-delay:var(--cooltip-transition-delay);transition-timing-function:var(--cooltip-timing);transform:scale(1) translateX(-50%);opacity:1;}.c-cooltip--right:not(:focus):hover::after,.c-cooltip--left:not(:focus):hover::after{transition-property:opacity,transform;transition-duration:var(--cooltip-transition-duration);transition-delay:var(--cooltip-transition-delay);transition-timing-function:var(--cooltip-timing);transform:scale(1);opacity:1;}}"]);
+export var GlobalStyle = createGlobalStyle([":root{--color-primary:#5d2bff;--color-secondary:#5d2bff;--color-theme-100:#ffffff;--color-theme-200:#f6f6f9;--color-theme-300:#ebebee;--color-theme-400:#d7d7da;--color-theme-500:#b9b9bd;--color-theme-600:#89898e;--color-theme-700:#6d6d73;--color-theme-800:#5b5b61;--color-theme-900:#303037;--color-primary-200:rgba(93,43,255,0.05);--color-primary-300:rgba(93,43,255,0.1);--color-primary-400:rgba(93,43,255,0.25);--color-primary-500:rgba(93,43,255,0.5);--color-primary-600:rgba(93,43,255,0.75);--color-primary-700:#5d2bff;--color-primary-800:#4a21cd;--color-primary-900:#32178b;--color-secondary-200:rgba(93,43,255,0.05);--color-secondary-300:rgba(93,43,255,0.1);--color-secondary-400:rgba(93,43,255,0.25);--color-secondary-500:rgba(93,43,255,0.5);--color-secondary-600:rgba(93,43,255,0.75);--color-secondary-700:#5d2bff;--color-secondary-800:#4a21cd;--color-secondary-900:#32178b;--color-theme-transparent-200:rgba(36,36,76,0.04);--color-theme-transparent-300:rgba(48,48,55,0.1);--color-theme-transparent-400:rgba(48,48,55,0.2);--color-theme-transparent-500:rgba(48,48,55,0.34);--color-theme-transparent-600:rgba(48,48,55,0.57);--color-theme-transparent-700:rgba(48,48,55,0.7);--color-theme-transparent-800:rgba(48,48,55,0.8);--color-primary-opaque-300:#efeaff;--color-primary-opaque-400:#d6caff;--color-secondary-opaque-300:#efeaff;--color-secondary-opaque-400:#d6caff;--color-sucess-green:#64cd93;--body-bg-main:rgb(244,245,247);--body-bg-main-transparent:rgba(244,245,247,0);--page-paper-main:#ffffff;--border-primary:#d7d7da;--note-bg:#fff9f1;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.06),0 16px 16px 0 rgba(0,0,0,0.04),0 4px 4px 0 rgba(0,0,0,0.04),0 2px 2px 0 rgba(0,0,0,0.04);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.06),0 32px 32px 0 rgba(0,0,0,0.03),0 16px 16px 0 rgba(0,0,0,0.02),0 4px 4px 0 rgba(0,0,0,0.02),0 2px 2px 0 rgba(0,0,0,0.02);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.17);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.05),0 10px 15px -3px rgba(0,0,0,0.1);--shadow-tertiary-hover:0 4px 10px -2px rgba(0,0,0,0.1),0 12px 20px -3px rgba(0,0,0,0.2);--page-paper-main-shadow:rgba( 255,255,255,0 );--modal-background:rgba(244,245,247,0.6);--highlight-dark:rgba(0,0,0,0.03);--input-background-color:#ffffff;--red-alert:rgb(237,97,97);--warning:#ffcc6b;--only-white:#ffffff;--only-black:#000000;--ac-br-4:4px;--ac-br-6:6px;--ac-br-8:8px;--ac-br-rounded:999px;}.cupcake{--color-primary:#29bcdd;--color-secondary:#fe6fa7;--color-primary-200:rgba(41,188,221,0.07);--color-primary-300:rgba(41,188,221,0.12);--color-primary-400:rgba(41,188,221,0.26);--color-primary-500:rgba(41,188,221,0.52);--color-primary-600:rgba(41,188,221,0.75);--color-primary-700:#29bcdd;--color-primary-800:#219fbb;--color-primary-900:#1a768b;--color-secondary-200:rgba(254,111,167,0.07);--color-secondary-300:rgba(254,111,167,0.13);--color-secondary-400:rgba(254,111,167,0.27);--color-secondary-500:rgba(254,111,167,0.52);--color-secondary-600:rgba(254,111,167,0.75);--color-secondary-700:#fe6fa7;--color-secondary-800:#dd6091;--color-secondary-900:#ab496f;--color-primary-opaque-300:#e5f7fb;--color-primary-opaque-400:#c8eef6;--color-secondary-opaque-300:#ffecf4;--color-secondary-opaque-400:#ffd8e7;}.classic{--color-primary:#4182f2;--color-secondary:#4182f2;--color-primary-200:rgba(65,130,242,0.07);--color-primary-300:rgba(65,130,242,0.13);--color-primary-400:rgba(65,130,242,0.26);--color-primary-500:rgba(65,130,242,0.52);--color-primary-600:rgba(65,130,242,0.75);--color-primary-700:#4182f2;--color-primary-800:#356bc8;--color-primary-900:#244a8a;--color-secondary-200:rgba(65,130,242,0.07);--color-secondary-300:rgba(65,130,242,0.13);--color-secondary-400:rgba(65,130,242,0.26);--color-secondary-500:rgba(65,130,242,0.52);--color-secondary-600:rgba(65,130,242,0.75);--color-secondary-700:#4182f2;--color-secondary-800:#356bc8;--color-secondary-900:#244a8a;--color-primary-opaque-300:#e6effd;--color-primary-opaque-400:#cedffc;--color-secondary-opaque-300:#e6effd;--color-secondary-opaque-400:#cedffc;}.neon{--color-primary:#67ffc8;--color-secondary:#67ffc8;--color-theme-100:#000000;--color-theme-200:#31333e;--color-theme-300:#2b2d37;--color-theme-400:#1f2024;--color-theme-500:#6D6D73;--color-theme-600:#89898e;--color-theme-700:#b0b0b5;--color-theme-800:#dfdfe5;--color-theme-900:#ffffff;--color-primary-200:rgba(103,255,200,0.05);--color-primary-300:rgba(103,255,200,0.1);--color-primary-400:rgba(103,255,200,0.25);--color-primary-500:rgba(103,255,200,0.5);--color-primary-600:rgba(103,255,200,0.75);--color-primary-700:#67ffc8;--color-primary-800:#a5ffdf;--color-primary-900:#d0fdec;--color-secondary-200:rgba(103,255,200,0.05);--color-secondary-300:rgba(103,255,200,0.1);--color-secondary-400:rgba(103,255,200,0.25);--color-secondary-500:rgba(103,255,200,0.5);--color-secondary-600:rgba(103,255,200,0.75);--color-secondary-700:#67ffc8;--color-secondary-800:#a5ffdf;--color-secondary-900:#d0fdec;--color-theme-transparent-200:rgba(6,7,8,0.12);--color-theme-transparent-300:rgba(6,7,8,0.22);--color-theme-transparent-400:rgba(6,7,8,0.5);--color-theme-transparent-500:rgba(255,255,255,0.27);--color-theme-transparent-600:rgba(255,255,255,0.4);--color-theme-transparent-700:rgba(255,255,255,0.6);--color-theme-transparent-800:rgba(255,255,255,0.85);--color-primary-opaque-300:#3b4e51;--color-primary-opaque-400:#436b64;--color-secondary-opaque-300:#3b4e51;--color-secondary-opaque-400:#436b64;--body-bg-main:rgb(44,46,56);--body-bg-main-transparent:rgba(44,46,56,0);--page-paper-main:#373a44;--border-primary:#1f2024;--note-bg:#464545;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.2),0 32px 32px 0 rgba(0,0,0,0.2),0 16px 16px 0 rgba(0,0,0,0.2),0 4px 4px 0 rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.2);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.1),0 16px 16px 0 rgba(0,0,0,0.1),0 4px 4px 0 rgba(0,0,0,0.1),0 2px 2px 0 rgba(0,0,0,0.1);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.3);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.1),0 10px 15px -3px rgba(0,0,0,0.15);--shadow-tertiary-hover:0 4px 12px -2px rgba(0,0,0,0.4),0 10px 30px -3px rgba(0,0,0,0.5);--page-paper-main-shadow:rgba( 55,58,68,0 );--modal-background:rgba(44,46,56,0.7);--highlight-dark:rgba(0,0,0,0.06);--input-background-color:#2c2e38;--only-white:#ffffff;--only-black:#000000;}html{color-scheme:light;}html{&.neon{color-scheme:dark;}}.ac-shadow,.ac-shadow--raised{&--lg{box-shadow:var(--shadow-primary);}&--sm{box-shadow:var(--shadow-tertiary);}}.ac-shadow--raised{&--lg{transition:box-shadow 0.3s;&:hover{box-shadow:var(--shadow-primary-hover);}}&--sm{transition:box-shadow 0.3s;&:hover{box-shadow:var(--shadow-tertiary-hover);}}}.ac-shadow-optimized--sm{position:relative;box-shadow:var(--shadow-tertiary);&::before{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";box-shadow:var(--shadow-tertiary);opacity:0;border-radius:var(--ac-br-6);transition:opacity 0.3s ease;z-index:-1;}@media (hover:hover){&:hover::before{opacity:1;}}}.ac-shadow-optimized--lg{position:relative;box-shadow:var(--shadow-primary);&::before{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";box-shadow:var(--shadow-primary);opacity:0;border-radius:var(--ac-br-8);transition:opacity 0.3s ease;z-index:-1;}@media (hover:hover){&:hover::before{opacity:1;}}}.ac-border-radius{&-4{border-radius:var(--ac-br-4);}&-6{border-radius:var(--ac-br-6);}&-8{border-radius:var(--ac-br-8);}&-rounded{border-radius:var(--ac-br-rounded);}}.c-cooltip{position:relative;--cooltip-spacing:0.5rem;--cooltip-padding:0.25rem 0.625rem;--cooltip-max-width:12.5rem;--cooltip-transition-duration:0.15s,0.1s,0.15s;--cooltip-transition-delay:0.6s;--cooltip-timing:ease,ease,cubic-bezier(0.39,0.575,0.565,1);}.c-cooltip::after{pointer-events:none;content:attr(data-tooltip);position:absolute;color:#fff;opacity:0;background-color:rgba(0,0,0,0.9);border-radius:0.5rem;font-size:0.75rem;font-weight:500;line-height:1.3;max-width:var(--cooltip-max-width);padding:var(--cooltip-padding);text-align:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}.c-cooltip--top::after{bottom:calc(100% + var(--cooltip-spacing));left:50%;transform:scale(0.85) translateX(-50%);transform-origin:0;}.c-cooltip--right::after{left:calc(100% + var(--cooltip-spacing));transform:scale(0.85);}.c-cooltip--bottom::after{top:calc(100% + var(--cooltip-spacing));left:50%;transform:scale(0.85) translateX(-50%);transform-origin:0;}.c-cooltip--left::after{right:calc(100% + var(--cooltip-spacing));transform:scale(0.85);}.c-cooltip:disabled::after,[aria-pressed=\"true\"]::after{display:none;}@media (hover:hover){.c-cooltip--top:not(:focus):hover::after,.c-cooltip--bottom:not(:focus):hover::after{transition-property:opacity,transform;transition-duration:var(--cooltip-transition-duration);transition-delay:var(--cooltip-transition-delay);transition-timing-function:var(--cooltip-timing);transform:scale(1) translateX(-50%);opacity:1;}.c-cooltip--right:not(:focus):hover::after,.c-cooltip--left:not(:focus):hover::after{transition-property:opacity,transform;transition-duration:var(--cooltip-transition-duration);transition-delay:var(--cooltip-transition-delay);transition-timing-function:var(--cooltip-timing);transform:scale(1);opacity:1;}}"]);
 //# sourceMappingURL=GlobalStyle.js.map

package/dist/esm/components/GlobalStyle.js.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalStyle.js","names":["createGlobalStyle","GlobalStyle"],"sources":["../../../src/components/GlobalStyle.ts"],"sourcesContent":["import { createGlobalStyle } from \"styled-components\";\n\nexport const GlobalStyle = createGlobalStyle`\n  :root {\n    --color-primary: #5d2bff;\n    --color-secondary: #5d2bff;\n\n    --color-theme-100: #ffffff;\n    --color-theme-200: #f6f6f9;\n    --color-theme-300: #ebebee;\n    --color-theme-400: #d7d7da;\n    --color-theme-500: #b9b9bd;\n    --color-theme-600: #89898e;\n    --color-theme-700: #6d6d73;\n    --color-theme-800: #5b5b61;\n    --color-theme-900: #303037;\n\n    --color-primary-200: rgba(93, 43, 255, 0.05);\n    --color-primary-300: rgba(93, 43, 255, 0.1);\n    --color-primary-400: rgba(93, 43, 255, 0.25);\n    --color-primary-500: rgba(93, 43, 255, 0.5);\n    --color-primary-600: rgba(93, 43, 255, 0.75);\n    --color-primary-700: #5d2bff;\n    --color-primary-800: #4a21cd;\n    --color-primary-900: #32178b;\n\n    --color-secondary-200: rgba(93, 43, 255, 0.05);\n    --color-secondary-300: rgba(93, 43, 255, 0.1);\n    --color-secondary-400: rgba(93, 43, 255, 0.25);\n    --color-secondary-500: rgba(93, 43, 255, 0.5);\n    --color-secondary-600: rgba(93, 43, 255, 0.75);\n    --color-secondary-700: #5d2bff;\n    --color-secondary-800: #4a21cd;\n    --color-secondary-900: #32178b;\n\n    --color-theme-transparent-200: rgba(36,36,76,0.04);\n    --color-theme-transparent-300: rgba(48,48,55,0.1);\n    --color-theme-transparent-400: rgba(48,48,55,0.2);\n    --color-theme-transparent-500: rgba(48,48,55,0.34);\n    --color-theme-transparent-600: rgba(48,48,55,0.57);\n    --color-theme-transparent-700: rgba(48,48,55,0.7);\n    --color-theme-transparent-800: rgba(48,48,55,0.8);\n\n    --color-primary-opaque-300: #efeaff;\n    --color-primary-opaque-400: #d6caff;\n\n    --color-secondary-opaque-300: #efeaff;\n    --color-secondary-opaque-400: #d6caff;\n\n    --color-sucess-green: #64cd93;\n\n    --body-bg-main: rgb(244, 245, 247);\n    --body-bg-main-transparent: rgba(244, 245, 247, 0);\n    --page-paper-main: #ffffff;\n    --border-primary: #d7d7da;\n\n    --note-bg: #fff9f1;\n\n    --shadow-primary-hover: 0 64px 64px 0 rgba(0, 0, 0, 0.1),\n      0 32px 32px 0 rgba(0, 0, 0, 0.06), 0 16px 16px 0 rgba(0, 0, 0, 0.04),\n      0 4px 4px 0 rgba(0, 0, 0, 0.04), 0 2px 2px 0 rgba(0, 0, 0, 0.04);\n    --shadow-primary: 0 64px 64px 0 rgba(0, 0, 0, 0.06),\n      0 32px 32px 0 rgba(0, 0, 0, 0.03), 0 16px 16px 0 rgba(0, 0, 0, 0.02),\n      0 4px 4px 0 rgba(0, 0, 0, 0.02), 0 2px 2px 0 rgba(0, 0, 0, 0.02);\n\n    --shadow-secondary: 0 4px 14px 0 rgba(0, 0, 0, 0.17);\n\n    --shadow-tertiary: 0 4px 6px -2px rgba(0, 0, 0, 0.05),\n      0 10px 15px -3px rgba(0, 0, 0, 0.1);\n    --shadow-tertiary-hover: 0 4px 10px -2px rgba(0, 0, 0, 0.1),\n      0 12px 20px -3px rgba(0, 0, 0, 0.2);\n\n    --page-paper-main-shadow: rgba(\n      255,\n      255,\n      255,\n      0\n    ); /* Shadow list shadow for page paper main */\n\n    --modal-background: rgba(244, 245, 247, 0.6);\n\n    --highlight-dark: rgba(0, 0, 0, 0.03);\n\n    --input-background-color: #ffffff;\n\n    --red-alert: rgb(237, 97, 97);\n\n    --warning: #ffcc6b;\n\n    --only-white: #ffffff;\n\n    --only-black: #000000;\n\n    --ac-br-4: 4px;\n\n    --ac-br-6: 6px;\n\n    --ac-br-8: 8px;\n\n    --ac-br-rounded: 999px;\n  }\n\n  .cupcake {\n    --color-primary: #29bcdd;\n    --color-secondary: #fe6fa7;\n\n    --color-primary-200: rgba(41, 188, 221, 0.07);\n    --color-primary-300: rgba(41, 188, 221, 0.12);\n    --color-primary-400: rgba(41, 188, 221, 0.26);\n    --color-primary-500: rgba(41, 188, 221, 0.52);\n    --color-primary-600: rgba(41, 188, 221, 0.75);\n    --color-primary-700: #29bcdd;\n    --color-primary-800: #219fbb;\n    --color-primary-900: #1a768b;\n\n    --color-secondary-200: rgba(254, 111, 167, 0.07);\n    --color-secondary-300: rgba(254, 111, 167, 0.13);\n    --color-secondary-400: rgba(254, 111, 167, 0.27);\n    --color-secondary-500: rgba(254, 111, 167, 0.52);\n    --color-secondary-600: rgba(254, 111, 167, 0.75);\n    --color-secondary-700: #fe6fa7;\n    --color-secondary-800: #dd6091;\n    --color-secondary-900: #ab496f;\n\n    --color-primary-opaque-300: #e5f7fb;\n    --color-primary-opaque-400: #c8eef6;\n\n    --color-secondary-opaque-300: #ffecf4;\n    --color-secondary-opaque-400: #ffd8e7;\n  }\n\n  .classic {\n    --color-primary: #4182f2;\n    --color-secondary: #4182f2;\n\n    --color-primary-200: rgba(65, 130, 242, 0.07);\n    --color-primary-300: rgba(65, 130, 242, 0.13);\n    --color-primary-400: rgba(65, 130, 242, 0.26);\n    --color-primary-500: rgba(65, 130, 242, 0.52);\n    --color-primary-600: rgba(65, 130, 242, 0.75);\n    --color-primary-700: #4182f2;\n    --color-primary-800: #356bc8;\n    --color-primary-900: #244a8a;\n\n    --color-secondary-200: rgba(65, 130, 242, 0.07);\n    --color-secondary-300: rgba(65, 130, 242, 0.13);\n    --color-secondary-400: rgba(65, 130, 242, 0.26);\n    --color-secondary-500: rgba(65, 130, 242, 0.52);\n    --color-secondary-600: rgba(65, 130, 242, 0.75);\n    --color-secondary-700: #4182f2;\n    --color-secondary-800: #356bc8;\n    --color-secondary-900: #244a8a;\n\n    --color-primary-opaque-300: #e6effd;\n    --color-primary-opaque-400: #cedffc;\n\n    --color-secondary-opaque-300: #e6effd;\n    --color-secondary-opaque-400: #cedffc;\n  }\n\n  .neon {\n    --color-primary: #67ffc8;\n    --color-secondary: #67ffc8;\n\n    --color-theme-100: #000000;\n    --color-theme-200: #31333e;\n    --color-theme-300: #2b2d37;\n    --color-theme-400: #1f2024;\n    --color-theme-500: #6D6D73;\n    --color-theme-600: #89898e;\n    --color-theme-700: #b0b0b5;\n    --color-theme-800: #dfdfe5;\n    --color-theme-900: #ffffff;\n\n    --color-primary-200: rgba(103, 255, 200, 0.05);\n    --color-primary-300: rgba(103, 255, 200, 0.1);\n    --color-primary-400: rgba(103, 255, 200, 0.25);\n    --color-primary-500: rgba(103, 255, 200, 0.5);\n    --color-primary-600: rgba(103, 255, 200, 0.75);\n    --color-primary-700: #67ffc8;\n    --color-primary-800: #a5ffdf;\n    --color-primary-900: #d0fdec;\n\n    --color-secondary-200: rgba(103, 255, 200, 0.05);\n    --color-secondary-300: rgba(103, 255, 200, 0.1);\n    --color-secondary-400: rgba(103, 255, 200, 0.25);\n    --color-secondary-500: rgba(103, 255, 200, 0.5);\n    --color-secondary-600: rgba(103, 255, 200, 0.75);\n    --color-secondary-700: #67ffc8;\n    --color-secondary-800: #a5ffdf;\n    --color-secondary-900: #d0fdec;\n\n    --color-theme-transparent-200: rgba(6,7,8,0.12);\n    --color-theme-transparent-300: rgba(6,7,8,0.22);\n    --color-theme-transparent-400: rgba(6,7,8,0.5);\n    --color-theme-transparent-500: rgba(255,255,255,0.27);\n    --color-theme-transparent-600: rgba(255,255,255,0.4);\n    --color-theme-transparent-700: rgba(255,255,255,0.6);\n    --color-theme-transparent-800: rgba(255,255,255,0.85);\n\n    --color-primary-opaque-300: #3b4e51;\n    --color-primary-opaque-400: #436b64;\n\n    --color-secondary-opaque-300: #3b4e51;\n    --color-secondary-opaque-400: #436b64;\n\n    --body-bg-main: rgb(44, 46, 56);\n    --body-bg-main-transparent: rgba(44, 46, 56, 0);\n    --page-paper-main: #373a44;\n    --border-primary: #1f2024;\n\n    --note-bg: #464545;\n\n    --shadow-primary-hover: 0 64px 64px 0 rgba(0, 0, 0, 0.2),\n      0 32px 32px 0 rgba(0, 0, 0, 0.2), 0 16px 16px 0 rgba(0, 0, 0, 0.2),\n      0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2);\n    --shadow-primary: 0 64px 64px 0 rgba(0, 0, 0, 0.1),\n      0 32px 32px 0 rgba(0, 0, 0, 0.1), 0 16px 16px 0 rgba(0, 0, 0, 0.1),\n      0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.1);\n\n    --shadow-secondary: 0 4px 14px 0 rgba(0, 0, 0, 0.3);\n\n    --shadow-tertiary: 0 4px 6px -2px rgba(0, 0, 0, 0.1),\n      0 10px 15px -3px rgba(0, 0, 0, 0.15);\n    --shadow-tertiary-hover: 0 4px 12px -2px rgba(0, 0, 0, 0.4),\n      0 10px 30px -3px rgba(0, 0, 0, 0.5);\n\n    --page-paper-main-shadow: rgba(\n      55,\n      58,\n      68,\n      0\n    ); /* Shadow list shadow for page paper main */\n\n    --modal-background: rgba(44, 46, 56, 0.7);\n\n    --highlight-dark: rgba(0, 0, 0, 0.06);\n\n    --input-background-color: #2c2e38;\n\n    --only-white: #ffffff;\n\n    --only-black: #000000;\n  }\n\n  .ac-shadow,\n  .ac-shadow--raised {\n    &--lg {\n      box-shadow: var(--shadow-primary);\n    }\n    &--sm {\n      box-shadow: var(--shadow-tertiary);\n    }\n  }\n\n  .ac-shadow--raised {\n    &--lg {\n      transition: box-shadow 0.3s;\n      &:hover {\n        box-shadow: var(--shadow-primary-hover);\n      }\n    }\n    &--sm {\n      transition: box-shadow 0.3s;\n      &:hover {\n        box-shadow: var(--shadow-tertiary-hover);\n      }\n    }\n  }\n\n  .ac-shadow-optimized--sm {\n    position: relative;\n    box-shadow: var(--shadow-tertiary);\n\n    &::before {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      content: \"\";\n      box-shadow: var(--shadow-tertiary);\n      opacity: 0;\n      border-radius: var(--ac-br-6);\n      transition: opacity 0.3s ease;\n      z-index: -1;\n    }\n\n    @media (hover: hover) {\n      &:hover::before {\n        opacity: 1;\n      }\n    }\n  }\n\n  .ac-shadow-optimized--lg {\n    position: relative;\n    box-shadow: var(--shadow-primary);\n\n    &::before {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      content: \"\";\n      box-shadow: var(--shadow-primary);\n      opacity: 0;\n      border-radius: var(--ac-br-8);\n      transition: opacity 0.3s ease;\n      z-index: -1;\n    }\n\n    @media (hover: hover) {\n      &:hover::before {\n        opacity: 1;\n      }\n    }\n  }\n\n  .ac-border-radius {\n    &-4 {\n      border-radius: var(--ac-br-4);\n    }\n\n    &-6 {\n      border-radius: var(--ac-br-6);\n    }\n\n    &-8 {\n      border-radius: var(--ac-br-8);\n    }\n\n    &-rounded {\n      border-radius: var(--ac-br-rounded);\n    }\n  }\n\n\n  // CSS Tooltip ::after content: data-tooltip\n\n  .c-cooltip {\n  position: relative;\n\n  /*\n    * Prefer scoped variables in this case.\n    * This lines of CSS should be scoped too.\n    */\n\n  --cooltip-spacing: 0.5rem;\n  --cooltip-padding: 0.25rem 0.625rem;\n  --cooltip-max-width: 12.5rem;\n\n  --cooltip-transition-duration: 0.15s, 0.1s, 0.15s;\n  --cooltip-transition-delay: 0.6s;\n  --cooltip-timing: ease, ease, cubic-bezier(0.39, 0.575, 0.565, 1);\n}\n\n.c-cooltip::after {\n  /*\n    * will-change is intended to be used as a last resort,\n    * in order to try to deal with existing performance problems.\n    * It should not be used to anticipate performance problems.\n    * https://developer.mozilla.org/en-US/docs/Web/CSS/will-change\n    *\n    * will-change: transform, opacity\n    */\n  pointer-events: none;\n  content: attr(data-tooltip);\n  position: absolute;\n  color: #fff;\n  opacity: 0;\n  background-color: rgba(0, 0, 0, 0.9);\n  border-radius: 0.5rem;\n  font-size: 0.75rem;\n  font-weight: 500;\n  line-height: 1.3;\n  max-width: var(--cooltip-max-width);\n  padding: var(--cooltip-padding);\n  text-align: center;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n\n.c-cooltip--top::after {\n  bottom: calc(100% + var(--cooltip-spacing));\n  left: 50%;\n  transform: scale(0.85) translateX(-50%);\n  transform-origin: 0;\n}\n\n.c-cooltip--right::after {\n  left: calc(100% + var(--cooltip-spacing));\n  transform: scale(0.85);\n}\n\n.c-cooltip--bottom::after {\n  top: calc(100% + var(--cooltip-spacing));\n  left: 50%;\n  transform: scale(0.85) translateX(-50%);\n  transform-origin: 0;\n}\n\n.c-cooltip--left::after {\n  right: calc(100% + var(--cooltip-spacing));\n  transform: scale(0.85);\n}\n\n/*\n* Make sure that disabled and aria pressed\n* items do not have tooltips available.\n*/\n.c-cooltip:disabled::after,\n[aria-pressed=\"true\"]::after {\n  display: none;\n}\n\n/*\n*\n* Only use hover when is available .\n* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover\n*/\n@media (hover: hover) {\n  /*\n    * Here we maybe have a complex selector but actually it's not.\n    * We simply asks here to show tooltip only on hover.\n    * Focused elements (in this case, clicked elements) should hide the tooltip.\n    */\n  .c-cooltip--top:not(:focus):hover::after,\n  .c-cooltip--bottom:not(:focus):hover::after {\n    transition-property: opacity, transform;\n    transition-duration: var(--cooltip-transition-duration);\n    transition-delay: var(--cooltip-transition-delay);\n    transition-timing-function: var(--cooltip-timing);\n    transform: scale(1) translateX(-50%);\n    opacity: 1;\n  }\n\n  /*\n    *\n    * This is not code duplication!\n    * Transform properties are tricky to animate and values\n    * are not the same depending on the tooltip position.\n    *\n    * Animating only one transform, eg. scale(1) will\n    * override all previously set transforms, eg. translateY.\n    * So we need to always chain them.\n    * eg. transform: scale(1) translateY(-50%) etc...\n    */\n\n  .c-cooltip--right:not(:focus):hover::after,\n  .c-cooltip--left:not(:focus):hover::after {\n    transition-property: opacity, transform;\n    transition-duration: var(--cooltip-transition-duration);\n    transition-delay: var(--cooltip-transition-delay);\n    transition-timing-function: var(--cooltip-timing);\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n\n`;\n"],"mappings":"AAAA,SAASA,iBAAiB,QAAQ,mBAAmB;AAErD,OAAO,IAAMC,WAAW,GAAGD,iBAAiB,8+RA4c3C"}
+{"version":3,"file":"GlobalStyle.js","names":["createGlobalStyle","GlobalStyle"],"sources":["../../../src/components/GlobalStyle.ts"],"sourcesContent":["import { createGlobalStyle } from \"styled-components\";\n\nexport const GlobalStyle = createGlobalStyle`\n  :root {\n    --color-primary: #5d2bff;\n    --color-secondary: #5d2bff;\n\n    --color-theme-100: #ffffff;\n    --color-theme-200: #f6f6f9;\n    --color-theme-300: #ebebee;\n    --color-theme-400: #d7d7da;\n    --color-theme-500: #b9b9bd;\n    --color-theme-600: #89898e;\n    --color-theme-700: #6d6d73;\n    --color-theme-800: #5b5b61;\n    --color-theme-900: #303037;\n\n    --color-primary-200: rgba(93, 43, 255, 0.05);\n    --color-primary-300: rgba(93, 43, 255, 0.1);\n    --color-primary-400: rgba(93, 43, 255, 0.25);\n    --color-primary-500: rgba(93, 43, 255, 0.5);\n    --color-primary-600: rgba(93, 43, 255, 0.75);\n    --color-primary-700: #5d2bff;\n    --color-primary-800: #4a21cd;\n    --color-primary-900: #32178b;\n\n    --color-secondary-200: rgba(93, 43, 255, 0.05);\n    --color-secondary-300: rgba(93, 43, 255, 0.1);\n    --color-secondary-400: rgba(93, 43, 255, 0.25);\n    --color-secondary-500: rgba(93, 43, 255, 0.5);\n    --color-secondary-600: rgba(93, 43, 255, 0.75);\n    --color-secondary-700: #5d2bff;\n    --color-secondary-800: #4a21cd;\n    --color-secondary-900: #32178b;\n\n    --color-theme-transparent-200: rgba(36,36,76,0.04);\n    --color-theme-transparent-300: rgba(48,48,55,0.1);\n    --color-theme-transparent-400: rgba(48,48,55,0.2);\n    --color-theme-transparent-500: rgba(48,48,55,0.34);\n    --color-theme-transparent-600: rgba(48,48,55,0.57);\n    --color-theme-transparent-700: rgba(48,48,55,0.7);\n    --color-theme-transparent-800: rgba(48,48,55,0.8);\n\n    --color-primary-opaque-300: #efeaff;\n    --color-primary-opaque-400: #d6caff;\n\n    --color-secondary-opaque-300: #efeaff;\n    --color-secondary-opaque-400: #d6caff;\n\n    --color-sucess-green: #64cd93;\n\n    --body-bg-main: rgb(244, 245, 247);\n    --body-bg-main-transparent: rgba(244, 245, 247, 0);\n    --page-paper-main: #ffffff;\n    --border-primary: #d7d7da;\n\n    --note-bg: #fff9f1;\n\n    --shadow-primary-hover: 0 64px 64px 0 rgba(0, 0, 0, 0.1),\n      0 32px 32px 0 rgba(0, 0, 0, 0.06), 0 16px 16px 0 rgba(0, 0, 0, 0.04),\n      0 4px 4px 0 rgba(0, 0, 0, 0.04), 0 2px 2px 0 rgba(0, 0, 0, 0.04);\n    --shadow-primary: 0 64px 64px 0 rgba(0, 0, 0, 0.06),\n      0 32px 32px 0 rgba(0, 0, 0, 0.03), 0 16px 16px 0 rgba(0, 0, 0, 0.02),\n      0 4px 4px 0 rgba(0, 0, 0, 0.02), 0 2px 2px 0 rgba(0, 0, 0, 0.02);\n\n    --shadow-secondary: 0 4px 14px 0 rgba(0, 0, 0, 0.17);\n\n    --shadow-tertiary: 0 4px 6px -2px rgba(0, 0, 0, 0.05),\n      0 10px 15px -3px rgba(0, 0, 0, 0.1);\n    --shadow-tertiary-hover: 0 4px 10px -2px rgba(0, 0, 0, 0.1),\n      0 12px 20px -3px rgba(0, 0, 0, 0.2);\n\n    --page-paper-main-shadow: rgba(\n      255,\n      255,\n      255,\n      0\n    ); /* Shadow list shadow for page paper main */\n\n    --modal-background: rgba(244, 245, 247, 0.6);\n\n    --highlight-dark: rgba(0, 0, 0, 0.03);\n\n    --input-background-color: #ffffff;\n\n    --red-alert: rgb(237, 97, 97);\n\n    --warning: #ffcc6b;\n\n    --only-white: #ffffff;\n\n    --only-black: #000000;\n\n    --ac-br-4: 4px;\n\n    --ac-br-6: 6px;\n\n    --ac-br-8: 8px;\n\n    --ac-br-rounded: 999px;\n  }\n\n  .cupcake {\n    --color-primary: #29bcdd;\n    --color-secondary: #fe6fa7;\n\n    --color-primary-200: rgba(41, 188, 221, 0.07);\n    --color-primary-300: rgba(41, 188, 221, 0.12);\n    --color-primary-400: rgba(41, 188, 221, 0.26);\n    --color-primary-500: rgba(41, 188, 221, 0.52);\n    --color-primary-600: rgba(41, 188, 221, 0.75);\n    --color-primary-700: #29bcdd;\n    --color-primary-800: #219fbb;\n    --color-primary-900: #1a768b;\n\n    --color-secondary-200: rgba(254, 111, 167, 0.07);\n    --color-secondary-300: rgba(254, 111, 167, 0.13);\n    --color-secondary-400: rgba(254, 111, 167, 0.27);\n    --color-secondary-500: rgba(254, 111, 167, 0.52);\n    --color-secondary-600: rgba(254, 111, 167, 0.75);\n    --color-secondary-700: #fe6fa7;\n    --color-secondary-800: #dd6091;\n    --color-secondary-900: #ab496f;\n\n    --color-primary-opaque-300: #e5f7fb;\n    --color-primary-opaque-400: #c8eef6;\n\n    --color-secondary-opaque-300: #ffecf4;\n    --color-secondary-opaque-400: #ffd8e7;\n  }\n\n  .classic {\n    --color-primary: #4182f2;\n    --color-secondary: #4182f2;\n\n    --color-primary-200: rgba(65, 130, 242, 0.07);\n    --color-primary-300: rgba(65, 130, 242, 0.13);\n    --color-primary-400: rgba(65, 130, 242, 0.26);\n    --color-primary-500: rgba(65, 130, 242, 0.52);\n    --color-primary-600: rgba(65, 130, 242, 0.75);\n    --color-primary-700: #4182f2;\n    --color-primary-800: #356bc8;\n    --color-primary-900: #244a8a;\n\n    --color-secondary-200: rgba(65, 130, 242, 0.07);\n    --color-secondary-300: rgba(65, 130, 242, 0.13);\n    --color-secondary-400: rgba(65, 130, 242, 0.26);\n    --color-secondary-500: rgba(65, 130, 242, 0.52);\n    --color-secondary-600: rgba(65, 130, 242, 0.75);\n    --color-secondary-700: #4182f2;\n    --color-secondary-800: #356bc8;\n    --color-secondary-900: #244a8a;\n\n    --color-primary-opaque-300: #e6effd;\n    --color-primary-opaque-400: #cedffc;\n\n    --color-secondary-opaque-300: #e6effd;\n    --color-secondary-opaque-400: #cedffc;\n  }\n\n  .neon {\n    --color-primary: #67ffc8;\n    --color-secondary: #67ffc8;\n\n    --color-theme-100: #000000;\n    --color-theme-200: #31333e;\n    --color-theme-300: #2b2d37;\n    --color-theme-400: #1f2024;\n    --color-theme-500: #6D6D73;\n    --color-theme-600: #89898e;\n    --color-theme-700: #b0b0b5;\n    --color-theme-800: #dfdfe5;\n    --color-theme-900: #ffffff;\n\n    --color-primary-200: rgba(103, 255, 200, 0.05);\n    --color-primary-300: rgba(103, 255, 200, 0.1);\n    --color-primary-400: rgba(103, 255, 200, 0.25);\n    --color-primary-500: rgba(103, 255, 200, 0.5);\n    --color-primary-600: rgba(103, 255, 200, 0.75);\n    --color-primary-700: #67ffc8;\n    --color-primary-800: #a5ffdf;\n    --color-primary-900: #d0fdec;\n\n    --color-secondary-200: rgba(103, 255, 200, 0.05);\n    --color-secondary-300: rgba(103, 255, 200, 0.1);\n    --color-secondary-400: rgba(103, 255, 200, 0.25);\n    --color-secondary-500: rgba(103, 255, 200, 0.5);\n    --color-secondary-600: rgba(103, 255, 200, 0.75);\n    --color-secondary-700: #67ffc8;\n    --color-secondary-800: #a5ffdf;\n    --color-secondary-900: #d0fdec;\n\n    --color-theme-transparent-200: rgba(6,7,8,0.12);\n    --color-theme-transparent-300: rgba(6,7,8,0.22);\n    --color-theme-transparent-400: rgba(6,7,8,0.5);\n    --color-theme-transparent-500: rgba(255,255,255,0.27);\n    --color-theme-transparent-600: rgba(255,255,255,0.4);\n    --color-theme-transparent-700: rgba(255,255,255,0.6);\n    --color-theme-transparent-800: rgba(255,255,255,0.85);\n\n    --color-primary-opaque-300: #3b4e51;\n    --color-primary-opaque-400: #436b64;\n\n    --color-secondary-opaque-300: #3b4e51;\n    --color-secondary-opaque-400: #436b64;\n\n    --body-bg-main: rgb(44, 46, 56);\n    --body-bg-main-transparent: rgba(44, 46, 56, 0);\n    --page-paper-main: #373a44;\n    --border-primary: #1f2024;\n\n    --note-bg: #464545;\n\n    --shadow-primary-hover: 0 64px 64px 0 rgba(0, 0, 0, 0.2),\n      0 32px 32px 0 rgba(0, 0, 0, 0.2), 0 16px 16px 0 rgba(0, 0, 0, 0.2),\n      0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2);\n    --shadow-primary: 0 64px 64px 0 rgba(0, 0, 0, 0.1),\n      0 32px 32px 0 rgba(0, 0, 0, 0.1), 0 16px 16px 0 rgba(0, 0, 0, 0.1),\n      0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.1);\n\n    --shadow-secondary: 0 4px 14px 0 rgba(0, 0, 0, 0.3);\n\n    --shadow-tertiary: 0 4px 6px -2px rgba(0, 0, 0, 0.1),\n      0 10px 15px -3px rgba(0, 0, 0, 0.15);\n    --shadow-tertiary-hover: 0 4px 12px -2px rgba(0, 0, 0, 0.4),\n      0 10px 30px -3px rgba(0, 0, 0, 0.5);\n\n    --page-paper-main-shadow: rgba(\n      55,\n      58,\n      68,\n      0\n    ); /* Shadow list shadow for page paper main */\n\n    --modal-background: rgba(44, 46, 56, 0.7);\n\n    --highlight-dark: rgba(0, 0, 0, 0.06);\n\n    --input-background-color: #2c2e38;\n\n    --only-white: #ffffff;\n\n    --only-black: #000000;\n  }\n\n  html {\n    color-scheme: light;\n  }\n\n  html {\n    &.neon {\n      color-scheme: dark;\n    }\n  }\n\n  .ac-shadow,\n  .ac-shadow--raised {\n    &--lg {\n      box-shadow: var(--shadow-primary);\n    }\n    &--sm {\n      box-shadow: var(--shadow-tertiary);\n    }\n  }\n\n  .ac-shadow--raised {\n    &--lg {\n      transition: box-shadow 0.3s;\n      &:hover {\n        box-shadow: var(--shadow-primary-hover);\n      }\n    }\n    &--sm {\n      transition: box-shadow 0.3s;\n      &:hover {\n        box-shadow: var(--shadow-tertiary-hover);\n      }\n    }\n  }\n\n  .ac-shadow-optimized--sm {\n    position: relative;\n    box-shadow: var(--shadow-tertiary);\n\n    &::before {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      content: \"\";\n      box-shadow: var(--shadow-tertiary);\n      opacity: 0;\n      border-radius: var(--ac-br-6);\n      transition: opacity 0.3s ease;\n      z-index: -1;\n    }\n\n    @media (hover: hover) {\n      &:hover::before {\n        opacity: 1;\n      }\n    }\n  }\n\n  .ac-shadow-optimized--lg {\n    position: relative;\n    box-shadow: var(--shadow-primary);\n\n    &::before {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      content: \"\";\n      box-shadow: var(--shadow-primary);\n      opacity: 0;\n      border-radius: var(--ac-br-8);\n      transition: opacity 0.3s ease;\n      z-index: -1;\n    }\n\n    @media (hover: hover) {\n      &:hover::before {\n        opacity: 1;\n      }\n    }\n  }\n\n  .ac-border-radius {\n    &-4 {\n      border-radius: var(--ac-br-4);\n    }\n\n    &-6 {\n      border-radius: var(--ac-br-6);\n    }\n\n    &-8 {\n      border-radius: var(--ac-br-8);\n    }\n\n    &-rounded {\n      border-radius: var(--ac-br-rounded);\n    }\n  }\n\n\n  // CSS Tooltip ::after content: data-tooltip\n\n  .c-cooltip {\n  position: relative;\n\n  /*\n    * Prefer scoped variables in this case.\n    * This lines of CSS should be scoped too.\n    */\n\n  --cooltip-spacing: 0.5rem;\n  --cooltip-padding: 0.25rem 0.625rem;\n  --cooltip-max-width: 12.5rem;\n\n  --cooltip-transition-duration: 0.15s, 0.1s, 0.15s;\n  --cooltip-transition-delay: 0.6s;\n  --cooltip-timing: ease, ease, cubic-bezier(0.39, 0.575, 0.565, 1);\n}\n\n.c-cooltip::after {\n  /*\n    * will-change is intended to be used as a last resort,\n    * in order to try to deal with existing performance problems.\n    * It should not be used to anticipate performance problems.\n    * https://developer.mozilla.org/en-US/docs/Web/CSS/will-change\n    *\n    * will-change: transform, opacity\n    */\n  pointer-events: none;\n  content: attr(data-tooltip);\n  position: absolute;\n  color: #fff;\n  opacity: 0;\n  background-color: rgba(0, 0, 0, 0.9);\n  border-radius: 0.5rem;\n  font-size: 0.75rem;\n  font-weight: 500;\n  line-height: 1.3;\n  max-width: var(--cooltip-max-width);\n  padding: var(--cooltip-padding);\n  text-align: center;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n\n.c-cooltip--top::after {\n  bottom: calc(100% + var(--cooltip-spacing));\n  left: 50%;\n  transform: scale(0.85) translateX(-50%);\n  transform-origin: 0;\n}\n\n.c-cooltip--right::after {\n  left: calc(100% + var(--cooltip-spacing));\n  transform: scale(0.85);\n}\n\n.c-cooltip--bottom::after {\n  top: calc(100% + var(--cooltip-spacing));\n  left: 50%;\n  transform: scale(0.85) translateX(-50%);\n  transform-origin: 0;\n}\n\n.c-cooltip--left::after {\n  right: calc(100% + var(--cooltip-spacing));\n  transform: scale(0.85);\n}\n\n/*\n* Make sure that disabled and aria pressed\n* items do not have tooltips available.\n*/\n.c-cooltip:disabled::after,\n[aria-pressed=\"true\"]::after {\n  display: none;\n}\n\n/*\n*\n* Only use hover when is available .\n* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover\n*/\n@media (hover: hover) {\n  /*\n    * Here we maybe have a complex selector but actually it's not.\n    * We simply asks here to show tooltip only on hover.\n    * Focused elements (in this case, clicked elements) should hide the tooltip.\n    */\n  .c-cooltip--top:not(:focus):hover::after,\n  .c-cooltip--bottom:not(:focus):hover::after {\n    transition-property: opacity, transform;\n    transition-duration: var(--cooltip-transition-duration);\n    transition-delay: var(--cooltip-transition-delay);\n    transition-timing-function: var(--cooltip-timing);\n    transform: scale(1) translateX(-50%);\n    opacity: 1;\n  }\n\n  /*\n    *\n    * This is not code duplication!\n    * Transform properties are tricky to animate and values\n    * are not the same depending on the tooltip position.\n    *\n    * Animating only one transform, eg. scale(1) will\n    * override all previously set transforms, eg. translateY.\n    * So we need to always chain them.\n    * eg. transform: scale(1) translateY(-50%) etc...\n    */\n\n  .c-cooltip--right:not(:focus):hover::after,\n  .c-cooltip--left:not(:focus):hover::after {\n    transition-property: opacity, transform;\n    transition-duration: var(--cooltip-transition-duration);\n    transition-delay: var(--cooltip-transition-delay);\n    transition-timing-function: var(--cooltip-timing);\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n\n`;\n"],"mappings":"AAAA,SAASA,iBAAiB,QAAQ,mBAAmB;AAErD,OAAO,IAAMC,WAAW,GAAGD,iBAAiB,uiSAsd3C"}

package/dist/esm/components/Modal/Modal.d.ts

@@ -8,6 +8,7 @@ export interface IModal {
     disableBackgroundColor?: boolean;
     onClose?: () => void;
     children: ReactElement;
+    onClickOutside?: (event: any) => void;
 }
 export declare const Modal: React.ForwardRefExoticComponent<IModal & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=Modal.d.ts.map

package/dist/esm/components/Modal/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAOZ,YAAY,EAIb,MAAM,OAAO,CAAC;AAMf,MAAM,WAAW,MAAM;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,YAAY,CAAC;CACxB;AAQD,eAAO,MAAM,KAAK,sHAkGjB,CAAC"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAOZ,YAAY,EAIb,MAAM,OAAO,CAAC;AAMf,MAAM,WAAW,MAAM;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,YAAY,CAAC;IACvB,cAAc,CAAC,EAAE,CAAC,KAAK,KAAA,KAAK,IAAI,CAAC;CAClC;AAQD,eAAO,MAAM,KAAK,sHAuGjB,CAAC"}

package/dist/esm/components/Modal/Modal.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["children", "disableFocusLock", "disableScrollLock", "disableBackgroundClick", "disableBackgroundColor", "disableCloseOnEsc", "open", "onClose"];
+var _excluded = ["children", "disableFocusLock", "disableScrollLock", "disableBackgroundClick", "disableBackgroundColor", "disableCloseOnEsc", "open", "onClose", "onClickOutside"];
 import React, { forwardRef, useRef, cloneElement, useMemo, useCallback, useState, useEffect } from "react";
 import { Window } from "../Window";
 import useForkRef from "../../utils/useForkRef";
@@ -24,6 +24,7 @@ export var Modal = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _ref$open = _ref.open,
     defaultOpen = _ref$open === void 0 ? false : _ref$open,
     onClose = _ref.onClose,
+    onClickOutside = _ref.onClickOutside,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
   var _useState = useState(defaultOpen),
     open = _useState[0],
@@ -48,9 +49,12 @@ export var Modal = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var handleBackgroundClick = useCallback(function (event) {
     if (!disableBackgroundClick) {
       event.preventDefault();
-      handleClose();
+      return handleClose();
     }
-  }, [disableBackgroundClick, handleClose]);
+    if (onClickOutside) {
+      onClickOutside(event);
+    }
+  }, [disableBackgroundClick, onClickOutside, handleClose]);
   var handleEnter = useCallback(function () {
     setExited(false);
   }, []);

package/dist/esm/components/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","names":["React","forwardRef","useRef","cloneElement","useMemo","useCallback","useState","useEffect","Window","useForkRef","createChainedFunction","Overlay","getHasTransition","children","props","Object","prototype","hasOwnProperty","call","Modal","ref","disableFocusLock","disableScrollLock","disableBackgroundClick","disableBackgroundColor","disableCloseOnEsc","open","defaultOpen","onClose","rest","setOpen","exited","setExited","innerRef","handleRef","hasTransition","handleClose","handleBackgroundClick","event","preventDefault","handleEnter","handleExited","childProps","onEnter","onExited","in","displayName"],"sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  HTMLAttributes,\n  useRef,\n  cloneElement,\n  useMemo,\n  useCallback,\n  ReactElement,\n  useState,\n  useEffect,\n  MouseEvent,\n} from \"react\";\nimport { Window } from \"../Window\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport createChainedFunction from \"../../utils/createChainedFunction\";\nimport { Overlay } from \"../Overlay\";\n\nexport interface IModal {\n  disableFocusLock?: boolean;\n  disableScrollLock?: boolean;\n  open?: boolean;\n  disableBackgroundClick?: boolean;\n  disableCloseOnEsc?: boolean;\n  disableBackgroundColor?: boolean;\n  onClose?: () => void;\n  children: ReactElement;\n}\n\nconst getHasTransition = (children): boolean => {\n  return children.props\n    ? Object.prototype.hasOwnProperty.call(children.props, \"in\")\n    : false;\n};\n\nexport const Modal = forwardRef<\n  HTMLDivElement,\n  IModal & HTMLAttributes<HTMLDivElement>\n>(\n  (\n    {\n      children,\n      disableFocusLock = false,\n      disableScrollLock = false,\n      disableBackgroundClick = false,\n      disableBackgroundColor = false,\n      disableCloseOnEsc = false,\n      open: defaultOpen = false,\n      onClose,\n      ...rest\n    },\n    ref\n  ) => {\n    const [open, setOpen] = useState(defaultOpen);\n    const [exited, setExited] = useState(true);\n    const innerRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(innerRef, ref);\n\n    const hasTransition = useMemo(() => {\n      return getHasTransition(children);\n    }, [children]);\n\n    useEffect(() => {\n      setOpen(defaultOpen);\n    }, [defaultOpen]);\n\n    const handleClose = useCallback(() => {\n      setOpen(false);\n      if (!hasTransition) {\n        typeof onClose === \"function\" && onClose();\n      }\n    }, [hasTransition, onClose]);\n\n    const handleBackgroundClick = useCallback(\n      (event: MouseEvent<HTMLDivElement>) => {\n        if (!disableBackgroundClick) {\n          event.preventDefault();\n          handleClose();\n        }\n      },\n      [disableBackgroundClick, handleClose]\n    );\n\n    const handleEnter = useCallback(() => {\n      setExited(false);\n    }, []);\n\n    const handleExited = useCallback(() => {\n      setExited(true);\n      typeof onClose === \"function\" && onClose();\n    }, [onClose]);\n\n    const childProps = useMemo(() => {\n      let props = {};\n\n      // It's a Transition like component\n      if (hasTransition && children) {\n        props = {\n          onEnter: createChainedFunction(handleEnter, children.props.onEnter),\n          onExited: createChainedFunction(\n            handleExited,\n            children.props.onExited\n          ),\n          in: open,\n        };\n      }\n\n      return props;\n    }, [children, handleEnter, handleExited, hasTransition, open]);\n\n    if (!open && (!hasTransition || exited)) {\n      return null;\n    }\n\n    return (\n      <Window\n        {...rest}\n        ref={handleRef}\n        onClose={handleClose}\n        disableFocusLock={disableFocusLock}\n        disableScrollLock={disableScrollLock}\n        disableCloseOnEsc={disableCloseOnEsc}\n      >\n        {open ? (\n          <Overlay\n            onClick={handleBackgroundClick}\n            disableBackgroundColor={disableBackgroundColor}\n          />\n        ) : null}\n        {cloneElement(children, childProps)}\n      </Window>\n    );\n  }\n);\n\nModal.displayName = \"Modal\";\n"],"mappings":"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"}
+{"version":3,"file":"Modal.js","names":["React","forwardRef","useRef","cloneElement","useMemo","useCallback","useState","useEffect","Window","useForkRef","createChainedFunction","Overlay","getHasTransition","children","props","Object","prototype","hasOwnProperty","call","Modal","ref","disableFocusLock","disableScrollLock","disableBackgroundClick","disableBackgroundColor","disableCloseOnEsc","open","defaultOpen","onClose","onClickOutside","rest","setOpen","exited","setExited","innerRef","handleRef","hasTransition","handleClose","handleBackgroundClick","event","preventDefault","handleEnter","handleExited","childProps","onEnter","onExited","in","displayName"],"sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  HTMLAttributes,\n  useRef,\n  cloneElement,\n  useMemo,\n  useCallback,\n  ReactElement,\n  useState,\n  useEffect,\n  MouseEvent,\n} from \"react\";\nimport { Window } from \"../Window\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport createChainedFunction from \"../../utils/createChainedFunction\";\nimport { Overlay } from \"../Overlay\";\n\nexport interface IModal {\n  disableFocusLock?: boolean;\n  disableScrollLock?: boolean;\n  open?: boolean;\n  disableBackgroundClick?: boolean;\n  disableCloseOnEsc?: boolean;\n  disableBackgroundColor?: boolean;\n  onClose?: () => void;\n  children: ReactElement;\n  onClickOutside?: (event) => void;\n}\n\nconst getHasTransition = (children): boolean => {\n  return children.props\n    ? Object.prototype.hasOwnProperty.call(children.props, \"in\")\n    : false;\n};\n\nexport const Modal = forwardRef<\n  HTMLDivElement,\n  IModal & HTMLAttributes<HTMLDivElement>\n>(\n  (\n    {\n      children,\n      disableFocusLock = false,\n      disableScrollLock = false,\n      disableBackgroundClick = false,\n      disableBackgroundColor = false,\n      disableCloseOnEsc = false,\n      open: defaultOpen = false,\n      onClose,\n      onClickOutside,\n      ...rest\n    },\n    ref\n  ) => {\n    const [open, setOpen] = useState(defaultOpen);\n    const [exited, setExited] = useState(true);\n    const innerRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(innerRef, ref);\n\n    const hasTransition = useMemo(() => {\n      return getHasTransition(children);\n    }, [children]);\n\n    useEffect(() => {\n      setOpen(defaultOpen);\n    }, [defaultOpen]);\n\n    const handleClose = useCallback(() => {\n      setOpen(false);\n      if (!hasTransition) {\n        typeof onClose === \"function\" && onClose();\n      }\n    }, [hasTransition, onClose]);\n\n    const handleBackgroundClick = useCallback(\n      (event: MouseEvent<HTMLDivElement>) => {\n        if (!disableBackgroundClick) {\n          event.preventDefault();\n          return handleClose();\n        }\n\n        if (onClickOutside) {\n          onClickOutside(event);\n        }\n      },\n      [disableBackgroundClick, onClickOutside, handleClose]\n    );\n\n    const handleEnter = useCallback(() => {\n      setExited(false);\n    }, []);\n\n    const handleExited = useCallback(() => {\n      setExited(true);\n      typeof onClose === \"function\" && onClose();\n    }, [onClose]);\n\n    const childProps = useMemo(() => {\n      let props = {};\n\n      // It's a Transition like component\n      if (hasTransition && children) {\n        props = {\n          onEnter: createChainedFunction(handleEnter, children.props.onEnter),\n          onExited: createChainedFunction(\n            handleExited,\n            children.props.onExited\n          ),\n          in: open,\n        };\n      }\n\n      return props;\n    }, [children, handleEnter, handleExited, hasTransition, open]);\n\n    if (!open && (!hasTransition || exited)) {\n      return null;\n    }\n\n    return (\n      <Window\n        {...rest}\n        ref={handleRef}\n        onClose={handleClose}\n        disableFocusLock={disableFocusLock}\n        disableScrollLock={disableScrollLock}\n        disableCloseOnEsc={disableCloseOnEsc}\n      >\n        {open ? (\n          <Overlay\n            onClick={handleBackgroundClick}\n            disableBackgroundColor={disableBackgroundColor}\n          />\n        ) : null}\n        {cloneElement(children, childProps)}\n      </Window>\n    );\n  }\n);\n\nModal.displayName = \"Modal\";\n"],"mappings":"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"}