@os-design/core 1.0.156 → 1.0.157

package/dist/cjs/MenuItem/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["selectedStyles","p","selected","css","clr","theme","menuItemSelectedColorBg","StyledButton","styled","Button","omitEmotionProps","menuItemHeight","menuItemPaddingHorizontal","m","min","xs","SelectedIcon","Check","menuItemSelectedColorIcon","MenuItem","forwardRef","ref","value","right","onClick","rest","useContext","MenuContext","closeOnSelect","onClose","onClickRef","useRef","useEffect","current","clickHandler","useCallback","e","buttonGhostColorText","colorText","displayName"],"sources":["../../../src/MenuItem/index.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n} from 'react';\nimport styled from '@emotion/styled';\nimport { m } from '@os-design/media';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { Check } from '@os-design/icons';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { css } from '@emotion/react';\nimport { MenuContext } from '@os-design/menu-utils';\nimport Button, { ButtonProps } from '../Button';\n\nexport interface MenuItemProps\n  extends Omit<ButtonProps, 'type' | 'wide' | 'size'> {\n  /**\n   * Whether the menu item is selected.\n   * @default false\n   */\n  selected?: boolean;\n  /**\n   * The value of the menu item.\n   * @default undefined\n   */\n  value?: string;\n}\n\nconst selectedStyles = (p) =>\n  p.selected &&\n  css`\n    background-color: ${clr(p.theme.menuItemSelectedColorBg)};\n  `;\n\ntype StyledButtonProps = Pick<MenuItemProps, 'selected'>;\nconst StyledButton = styled(\n  Button,\n  omitEmotionProps('selected')\n)<StyledButtonProps>`\n  display: flex;\n  font-weight: normal;\n  border-radius: 0;\n  height: ${(p) => p.theme.menuItemHeight}em;\n\n  & > span {\n    flex: 1;\n    text-align: left;\n    overflow: hidden;\n    line-height: 1.5;\n  }\n\n  padding: 0 ${(p) => p.theme.menuItemPaddingHorizontal[0]}em;\n  ${m.min.xs} {\n    padding: 0 ${(p) => p.theme.menuItemPaddingHorizontal[1]}em;\n  }\n\n  ${selectedStyles};\n`;\n\nconst SelectedIcon = styled(Check)`\n  color: ${(p) => clr(p.theme.menuItemSelectedColorIcon)};\n`;\n\n/**\n * The base menu item.\n */\nconst MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>(\n  ({ selected = false, value, right, onClick = () => {}, ...rest }, ref) => {\n    const { closeOnSelect, onClose } = useContext(MenuContext);\n    const onClickRef = useRef<MenuItemProps['onClick']>();\n\n    useEffect(() => {\n      onClickRef.current = onClick;\n    }, [onClick]);\n\n    const clickHandler = useCallback(\n      (e) => {\n        if (onClickRef.current) onClickRef.current(e);\n        if (closeOnSelect) onClose();\n      },\n      [closeOnSelect, onClose]\n    );\n\n    return (\n      <ThemeOverrider\n        overrides={(theme) => ({ buttonGhostColorText: theme.colorText })}\n      >\n        <StyledButton\n          selected={selected}\n          right={selected ? <SelectedIcon /> : right}\n          type='ghost'\n          wide='always'\n          onClick={clickHandler}\n          role='menuitem'\n          {...rest}\n          ref={ref}\n        />\n      </ThemeOverrider>\n    );\n  }\n);\n\nMenuItem.displayName = 'MenuItem';\n\nexport default MenuItem;\n"],"mappings":";;;;;;;;;AAAA;;AAOA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAgBA,IAAMA,cAAc,GAAG,SAAjBA,cAAiB,CAACC,CAAD;EAAA,OACrBA,CAAC,CAACC,QAAF,QACAC,WADA,wGAEsB,IAAAC,YAAA,EAAIH,CAAC,CAACI,KAAF,CAAQC,uBAAZ,CAFtB,CADqB;AAAA,CAAvB;;AAOA,IAAMC,YAAY,GAAG,IAAAC,kBAAA,EACnBC,kBADmB,EAEnB,IAAAC,uBAAA,EAAiB,UAAjB,CAFmB,CAAH,8UAON,UAACT,CAAD;EAAA,OAAOA,CAAC,CAACI,KAAF,CAAQM,cAAf;AAAA,CAPM,EAgBH,UAACV,CAAD;EAAA,OAAOA,CAAC,CAACI,KAAF,CAAQO,yBAAR,CAAkC,CAAlC,CAAP;AAAA,CAhBG,EAiBdC,QAAA,CAAEC,GAAF,CAAMC,EAjBQ,EAkBD,UAACd,CAAD;EAAA,OAAOA,CAAC,CAACI,KAAF,CAAQO,yBAAR,CAAkC,CAAlC,CAAP;AAAA,CAlBC,EAqBdZ,cArBc,CAAlB;AAwBA,IAAMgB,YAAY,GAAG,IAAAR,kBAAA,EAAOS,YAAP,CAAH,0FACP,UAAChB,CAAD;EAAA,OAAO,IAAAG,YAAA,EAAIH,CAAC,CAACI,KAAF,CAAQa,yBAAZ,CAAP;AAAA,CADO,CAAlB;AAIA;AACA;AACA;;AACA,IAAMC,QAAQ,gBAAG,IAAAC,iBAAA,EACf,gBAAkEC,GAAlE,EAA0E;EAAA,yBAAvEnB,QAAuE;EAAA,IAAvEA,QAAuE,8BAA5D,KAA4D;EAAA,IAArDoB,KAAqD,QAArDA,KAAqD;EAAA,IAA9CC,KAA8C,QAA9CA,KAA8C;EAAA,wBAAvCC,OAAuC;EAAA,IAAvCA,OAAuC,6BAA7B,YAAM,CAAE,CAAqB;EAAA,IAAhBC,IAAgB;;EACxE,kBAAmC,IAAAC,iBAAA,EAAWC,sBAAX,CAAnC;EAAA,IAAQC,aAAR,eAAQA,aAAR;EAAA,IAAuBC,OAAvB,eAAuBA,OAAvB;;EACA,IAAMC,UAAU,GAAG,IAAAC,aAAA,GAAnB;EAEA,IAAAC,gBAAA,EAAU,YAAM;IACdF,UAAU,CAACG,OAAX,GAAqBT,OAArB;EACD,CAFD,EAEG,CAACA,OAAD,CAFH;EAIA,IAAMU,YAAY,GAAG,IAAAC,kBAAA,EACnB,UAACC,CAAD,EAAO;IACL,IAAIN,UAAU,CAACG,OAAf,EAAwBH,UAAU,CAACG,OAAX,CAAmBG,CAAnB;IACxB,IAAIR,aAAJ,EAAmBC,OAAO;EAC3B,CAJkB,EAKnB,CAACD,aAAD,EAAgBC,OAAhB,CALmB,CAArB;EAQA,oBACE,gCAAC,uBAAD;IACE,SAAS,EAAE,mBAACxB,KAAD;MAAA,OAAY;QAAEgC,oBAAoB,EAAEhC,KAAK,CAACiC;MAA9B,CAAZ;IAAA;EADb,gBAGE,gCAAC,YAAD;IACE,QAAQ,EAAEpC,QADZ;IAEE,KAAK,EAAEA,QAAQ,gBAAG,gCAAC,YAAD,OAAH,GAAsBqB,KAFvC;IAGE,IAAI,EAAC,OAHP;IAIE,IAAI,EAAC,QAJP;IAKE,OAAO,EAAEW,YALX;IAME,IAAI,EAAC;EANP,GAOMT,IAPN;IAQE,GAAG,EAAEJ;EARP,GAHF,CADF;AAgBD,CAjCc,CAAjB;AAoCAF,QAAQ,CAACoB,WAAT,GAAuB,UAAvB;eAEepB,Q"}
+{"version":3,"file":"index.js","names":["selectedStyles","p","selected","css","clr","theme","menuItemSelectedColorBg","StyledButton","styled","Button","omitEmotionProps","menuItemHeight","menuItemPaddingHorizontal","m","min","xs","SelectedIcon","Check","menuItemSelectedColorIcon","MenuItem","forwardRef","ref","value","right","onClick","rest","useContext","MenuContext","closeOnSelect","onClose","onClickRef","useRef","useEffect","current","clickHandler","useCallback","e","buttonGhostColorText","colorText","displayName"],"sources":["../../../src/MenuItem/index.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n} from 'react';\nimport styled from '@emotion/styled';\nimport { m } from '@os-design/media';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { Check } from '@os-design/icons';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { css } from '@emotion/react';\nimport { MenuContext } from '@os-design/menu-utils';\nimport Button, { ButtonProps } from '../Button';\n\nexport interface MenuItemProps\n  extends Omit<ButtonProps, 'type' | 'wide' | 'size'> {\n  /**\n   * Whether the menu item is selected.\n   * @default false\n   */\n  selected?: boolean;\n  /**\n   * The value of the menu item.\n   * @default undefined\n   */\n  value?: string;\n}\n\nconst selectedStyles = (p) =>\n  p.selected &&\n  css`\n    background-color: ${clr(p.theme.menuItemSelectedColorBg)};\n  `;\n\ntype StyledButtonProps = Pick<MenuItemProps, 'selected'>;\nconst StyledButton = styled(\n  Button,\n  omitEmotionProps('selected')\n)<StyledButtonProps>`\n  display: flex;\n  font-weight: normal;\n  border-radius: 0;\n  height: ${(p) => p.theme.menuItemHeight}em;\n\n  & > span {\n    flex: 1;\n    text-align: left;\n    overflow: hidden;\n    line-height: 1.5;\n  }\n\n  padding: 0 ${(p) => p.theme.menuItemPaddingHorizontal[0]}em;\n  ${m.min.xs} {\n    padding: 0 ${(p) => p.theme.menuItemPaddingHorizontal[1]}em;\n  }\n\n  ${selectedStyles};\n`;\n\nconst SelectedIcon = styled(Check)`\n  color: ${(p) => clr(p.theme.menuItemSelectedColorIcon)};\n`;\n\n/**\n * The base menu item.\n */\nconst MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>(\n  ({ selected = false, value, right, onClick = () => {}, ...rest }, ref) => {\n    const { closeOnSelect, onClose } = useContext(MenuContext);\n    const onClickRef = useRef<MenuItemProps['onClick']>();\n\n    useEffect(() => {\n      onClickRef.current = onClick;\n    }, [onClick]);\n\n    const clickHandler = useCallback(\n      (e) => {\n        if (onClickRef.current) onClickRef.current(e);\n        if (closeOnSelect) onClose();\n      },\n      [closeOnSelect, onClose]\n    );\n\n    return (\n      <ThemeOverrider\n        overrides={(theme) => ({ buttonGhostColorText: theme.colorText })}\n      >\n        <StyledButton\n          selected={selected}\n          right={selected ? <SelectedIcon /> : right}\n          type='ghost'\n          wide='always'\n          onClick={clickHandler}\n          role='menuitem'\n          {...rest}\n          ref={ref}\n        />\n      </ThemeOverrider>\n    );\n  }\n);\n\nMenuItem.displayName = 'MenuItem';\n\nexport default MenuItem;\n"],"mappings":";;;;;;;AAAA;AAOA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAgD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBhD,IAAMA,cAAc,GAAG,SAAjBA,cAAc,CAAIC,CAAC;EAAA,OACvBA,CAAC,CAACC,QAAQ,QACVC,WAAG,wGACmB,IAAAC,YAAG,EAACH,CAAC,CAACI,KAAK,CAACC,uBAAuB,CAAC,CACzD;AAAA;AAGH,IAAMC,YAAY,GAAG,IAAAC,kBAAM,EACzBC,kBAAM,EACN,IAAAC,uBAAgB,EAAC,UAAU,CAAC,CAC7B,8UAIW,UAACT,CAAC;EAAA,OAAKA,CAAC,CAACI,KAAK,CAACM,cAAc;AAAA,GAS1B,UAACV,CAAC;EAAA,OAAKA,CAAC,CAACI,KAAK,CAACO,yBAAyB,CAAC,CAAC,CAAC;AAAA,GACtDC,QAAC,CAACC,GAAG,CAACC,EAAE,EACK,UAACd,CAAC;EAAA,OAAKA,CAAC,CAACI,KAAK,CAACO,yBAAyB,CAAC,CAAC,CAAC;AAAA,GAGxDZ,cAAc,CACjB;AAED,IAAMgB,YAAY,GAAG,IAAAR,kBAAM,EAACS,YAAK,CAAC,0FACvB,UAAChB,CAAC;EAAA,OAAK,IAAAG,YAAG,EAACH,CAAC,CAACI,KAAK,CAACa,yBAAyB,CAAC;AAAA,EACvD;;AAED;AACA;AACA;AACA,IAAMC,QAAQ,gBAAG,IAAAC,iBAAU,EACzB,gBAAkEC,GAAG,EAAK;EAAA,yBAAvEnB,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAAEoB,KAAK,QAALA,KAAK;IAAEC,KAAK,QAALA,KAAK;IAAA,oBAAEC,OAAO;IAAPA,OAAO,6BAAG,YAAM,CAAC,CAAC;IAAKC,IAAI;EAC5D,kBAAmC,IAAAC,iBAAU,EAACC,sBAAW,CAAC;IAAlDC,aAAa,eAAbA,aAAa;IAAEC,OAAO,eAAPA,OAAO;EAC9B,IAAMC,UAAU,GAAG,IAAAC,aAAM,GAA4B;EAErD,IAAAC,gBAAS,EAAC,YAAM;IACdF,UAAU,CAACG,OAAO,GAAGT,OAAO;EAC9B,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;EAEb,IAAMU,YAAY,GAAG,IAAAC,kBAAW,EAC9B,UAACC,CAAC,EAAK;IACL,IAAIN,UAAU,CAACG,OAAO,EAAEH,UAAU,CAACG,OAAO,CAACG,CAAC,CAAC;IAC7C,IAAIR,aAAa,EAAEC,OAAO,EAAE;EAC9B,CAAC,EACD,CAACD,aAAa,EAAEC,OAAO,CAAC,CACzB;EAED,oBACE,gCAAC,uBAAc;IACb,SAAS,EAAE,mBAACxB,KAAK;MAAA,OAAM;QAAEgC,oBAAoB,EAAEhC,KAAK,CAACiC;MAAU,CAAC;IAAA;EAAE,gBAElE,gCAAC,YAAY;IACX,QAAQ,EAAEpC,QAAS;IACnB,KAAK,EAAEA,QAAQ,gBAAG,gCAAC,YAAY,OAAG,GAAGqB,KAAM;IAC3C,IAAI,EAAC,OAAO;IACZ,IAAI,EAAC,QAAQ;IACb,OAAO,EAAEW,YAAa;IACtB,IAAI,EAAC;EAAU,GACXT,IAAI;IACR,GAAG,EAAEJ;EAAI,GACT,CACa;AAErB,CAAC,CACF;AAEDF,QAAQ,CAACoB,WAAW,GAAG,UAAU;AAAC,eAEnBpB,QAAQ;AAAA"}

package/dist/cjs/Modal/index.js

@@ -1,87 +1,56 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.ModalMask = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _utils = require("@os-design/utils");
-
 var _styles = require("@os-design/styles");
-
 var _media = require("@os-design/media");
-
 var _react2 = require("@emotion/react");
-
 var _icons = require("@os-design/icons");
-
 var _theming = require("@os-design/theming");
-
 var _portal = _interopRequireDefault(require("@os-design/portal"));
-
 var _Button = _interopRequireDefault(require("../Button"));
-
 var _defaultLocale = _interopRequireDefault(require("./utils/defaultLocale"));
-
 var _excluded = ["title", "okText", "okDanger", "okLoading", "okDisabled", "header", "footer", "visible", "locale", "onClose", "onOk", "size", "id", "onClick", "children"];
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
-
 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; }
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }
-
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 var MODAL_CONTAINER_Z_INDEX = 1000;
 var MODAL_BOX_SHADOW_SIZE_EM = 1;
 var maskFadeIn = (0, _react2.keyframes)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from { opacity: 0; }\n  to { opacity: 1; }\n"])));
 var maskFadeOut = (0, _react2.keyframes)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  from { opacity: 1; }\n  to { opacity: 0; }\n"])));
-
 var maskVisibleStyles = function maskVisibleStyles(p) {
   return p.visible && (0, _react2.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    animation: ", " ", "ms forwards;\n  "])), maskFadeIn, p.theme.transitionDelay);
 };
-
 var maskInvisibleStyles = function maskInvisibleStyles(p) {
   return !p.visible && (0, _react2.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    animation: ", " ", "ms forwards;\n  "])), maskFadeOut, p.theme.transitionDelay);
 };
-
 var ModalMask = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('visible'))(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  background-color: ", ";\n  z-index: ", ";\n  ", ";\n  ", ";\n"])), function (p) {
   return (0, _theming.clr)(p.theme.modalMaskColorBg);
 }, MODAL_CONTAINER_Z_INDEX, maskVisibleStyles, maskInvisibleStyles);
 exports.ModalMask = ModalMask;
-
 var Container = _styled["default"].div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  z-index: ", ";\n\n  ", " {\n    ", ";\n  }\n"])), MODAL_CONTAINER_Z_INDEX, _media.m.min.xs, (0, _styles.enableScrollingStyles)('y'));
-
 var contentFadeIn = (0, _react2.keyframes)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  from { transform: translateY(calc(var(--vh, 1vh) * 100 + ", "em)); }\n  to { transform: translateY(calc(var(--vh, 1vh) * 100 - 100%)); }\n"])), MODAL_BOX_SHADOW_SIZE_EM);
 var contentFadeOut = (0, _react2.keyframes)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  from { transform: translateY(calc(var(--vh, 1vh) * 100 - 100%)); }\n  to { transform: translateY(calc(var(--vh, 1vh) * 100 + ", "em)); }\n"])), MODAL_BOX_SHADOW_SIZE_EM);
 var contentFadeInXs = (0, _react2.keyframes)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  from { transform: translateY(calc(-100% - ", "em)); }\n  to { transform: translateY(6em); }\n"])), MODAL_BOX_SHADOW_SIZE_EM);
 var contentFadeOutXs = (0, _react2.keyframes)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  from { transform: translateY(6em); }\n  to { transform: translateY(calc(-100% - ", "em)); }\n"])), MODAL_BOX_SHADOW_SIZE_EM);
-
 var contentVisibleStyles = function contentVisibleStyles(p) {
   return p.visible && (0, _react2.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    animation: ", " ", "ms forwards;\n    ", " {\n      animation: ", " ", "ms forwards;\n    }\n  "])), contentFadeIn, p.theme.transitionDelay, _media.m.min.xs, contentFadeInXs, p.theme.transitionDelay);
 };
-
 var contentInvisibleStyles = function contentInvisibleStyles(p) {
   return !p.visible && (0, _react2.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    animation: ", " ", "ms forwards;\n    ", " {\n      animation: ", " ", "ms forwards;\n    }\n  "])), contentFadeOut, p.theme.transitionDelay, _media.m.min.xs, contentFadeOutXs, p.theme.transitionDelay);
 };
-
 var Content = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('visible', 'size'))(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  padding-bottom: env(safe-area-inset-bottom);\n\n  background-color: ", ";\n  color: ", ";\n  box-shadow: 0 0 ", "em\n    ", ";\n\n  width: 100%;\n  max-height: 100%;\n  border-radius: ", "em\n    ", "em 0 0;\n\n  ", " {\n    width: ", "em;\n    max-height: unset;\n    border-radius: ", "em;\n\n    left: 50%;\n    margin-left: ", "em;\n  }\n\n  ", ";\n  ", "\n  ", ";\n"])), function (p) {
   return (0, _theming.clr)(p.theme.colorBg);
 }, function (p) {
@@ -99,7 +68,6 @@ var Content = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('visib
 }, function (p) {
   return -p.theme.modalWidth / 2;
 }, contentVisibleStyles, contentInvisibleStyles, _styles.sizeStyles);
-
 var Header = _styled["default"].div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  flex-shrink: 0;\n  height: ", "em;\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n\n  display: flex;\n  align-items: center;\n\n  padding-left: ", "em;\n  padding-right: ", "em;\n\n  ", " {\n    padding-left: ", "em;\n    padding-right: ", "em;\n  }\n"])), function (p) {
   return p.theme.modalHeaderHeight;
 }, function (p) {
@@ -113,11 +81,9 @@ var Header = _styled["default"].div(_templateObject14 || (_templateObject14 = _t
 }, function (p) {
   return Math.max(p.theme.modalBodyPaddingHorizontal[1] - p.theme.buttonPaddingHorizontal, 0);
 });
-
 var Title = _styled["default"].div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  flex: 1;\n  font-size: ", "em;\n  font-weight: 500;\n  ", ";\n"])), function (p) {
   return p.theme.sizes.large;
 }, _styles.ellipsisStyles);
-
 var Body = _styled["default"].div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n\n  padding: ", "em\n    ", "em;\n\n  ", " {\n    padding: ", "em\n      ", "em;\n  }\n\n  ", ";\n"])), function (p) {
   return p.theme.modalBodyPaddingVertical[0];
 }, function (p) {
@@ -127,7 +93,6 @@ var Body = _styled["default"].div(_templateObject16 || (_templateObject16 = _tag
 }, function (p) {
   return p.theme.modalBodyPaddingHorizontal[1];
 }, (0, _styles.enableScrollingStyles)('y'));
-
 var Footer = _styled["default"].div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  padding: 0 ", "em\n    ", "em;\n\n  ", " {\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n\n    padding: 0 ", "em\n      ", "em;\n  }\n"])), function (p) {
   return p.theme.modalBodyPaddingHorizontal[0];
 }, function (p) {
@@ -137,42 +102,38 @@ var Footer = _styled["default"].div(_templateObject17 || (_templateObject17 = _t
 }, function (p) {
   return p.theme.modalBodyPaddingVertical[1];
 });
+
 /**
  * The base pop-up window.
  */
-
-
 var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var title = _ref.title,
-      _ref$okText = _ref.okText,
-      okText = _ref$okText === void 0 ? 'OK' : _ref$okText,
-      _ref$okDanger = _ref.okDanger,
-      okDanger = _ref$okDanger === void 0 ? false : _ref$okDanger,
-      _ref$okLoading = _ref.okLoading,
-      okLoading = _ref$okLoading === void 0 ? false : _ref$okLoading,
-      _ref$okDisabled = _ref.okDisabled,
-      okDisabled = _ref$okDisabled === void 0 ? false : _ref$okDisabled,
-      header = _ref.header,
-      footer = _ref.footer,
-      _ref$visible = _ref.visible,
-      visible = _ref$visible === void 0 ? false : _ref$visible,
-      _ref$locale = _ref.locale,
-      locale = _ref$locale === void 0 ? _defaultLocale["default"] : _ref$locale,
-      _ref$onClose = _ref.onClose,
-      onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
-      onOk = _ref.onOk,
-      size = _ref.size,
-      id = _ref.id,
-      _ref$onClick = _ref.onClick,
-      _onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
-      children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    _ref$okText = _ref.okText,
+    okText = _ref$okText === void 0 ? 'OK' : _ref$okText,
+    _ref$okDanger = _ref.okDanger,
+    okDanger = _ref$okDanger === void 0 ? false : _ref$okDanger,
+    _ref$okLoading = _ref.okLoading,
+    okLoading = _ref$okLoading === void 0 ? false : _ref$okLoading,
+    _ref$okDisabled = _ref.okDisabled,
+    okDisabled = _ref$okDisabled === void 0 ? false : _ref$okDisabled,
+    header = _ref.header,
+    footer = _ref.footer,
+    _ref$visible = _ref.visible,
+    visible = _ref$visible === void 0 ? false : _ref$visible,
+    _ref$locale = _ref.locale,
+    locale = _ref$locale === void 0 ? _defaultLocale["default"] : _ref$locale,
+    _ref$onClose = _ref.onClose,
+    onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
+    onOk = _ref.onOk,
+    size = _ref.size,
+    id = _ref.id,
+    _ref$onClick = _ref.onClick,
+    _onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var contentRef = (0, _react.useRef)(null);
-
   var _useTheme = (0, _theming.useTheme)(),
-      theme = _useTheme.theme;
-
+    theme = _useTheme.theme;
   var mounted = (0, _utils.useClosable)(visible, theme.transitionDelay);
   (0, _utils.useBodyScroll)(!visible);
   (0, _utils.useKeyPress)(typeof window !== 'undefined' ? window : undefined, 'Escape', onClose);
@@ -194,7 +155,6 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     size: size,
     onClick: function onClick(e) {
       e.stopPropagation();
-
       _onClick(e);
     },
     role: "dialog",

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["MODAL_CONTAINER_Z_INDEX","MODAL_BOX_SHADOW_SIZE_EM","maskFadeIn","keyframes","maskFadeOut","maskVisibleStyles","p","visible","css","theme","transitionDelay","maskInvisibleStyles","ModalMask","styled","omitEmotionProps","clr","modalMaskColorBg","Container","div","m","min","xs","enableScrollingStyles","contentFadeIn","contentFadeOut","contentFadeInXs","contentFadeOutXs","contentVisibleStyles","contentInvisibleStyles","Content","colorBg","colorText","modalColorBoxShadow","borderRadius","modalWidth","sizeStyles","Header","modalHeaderHeight","modalHeaderColorBorderBottom","modalBodyPaddingHorizontal","Math","max","buttonPaddingHorizontal","Title","sizes","large","ellipsisStyles","Body","modalBodyPaddingVertical","Footer","Modal","forwardRef","ref","title","okText","okDanger","okLoading","okDisabled","header","footer","locale","defaultLocale","onClose","onOk","size","id","onClick","children","rest","contentRef","useRef","useTheme","mounted","useClosable","useBodyScroll","useKeyPress","window","undefined","titleId","useMemo","random","toString","slice","bodyId","e","stopPropagation","t","modalCloseButtonPaddingHorizontal","closeLabel","displayName"],"sources":["../../../src/Modal/index.tsx"],"sourcesContent":["import React, { forwardRef, useMemo, useRef } from 'react';\nimport FocusLock from 'react-focus-lock';\nimport styled from '@emotion/styled';\nimport {\n  useBodyScroll,\n  useKeyPress,\n  useClosable,\n  omitEmotionProps,\n} from '@os-design/utils';\nimport {\n  ellipsisStyles,\n  enableScrollingStyles,\n  sizeStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { m } from '@os-design/media';\nimport { css, keyframes } from '@emotion/react';\nimport { Close } from '@os-design/icons';\nimport { clr, ThemeOverrider, useTheme } from '@os-design/theming';\nimport Portal from '@os-design/portal';\nimport Button from '../Button';\nimport defaultLocale, { ModalLocale } from './utils/defaultLocale';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface ModalProps extends JsxDivProps, WithSize {\n  /**\n   * The title of the modal.\n   * @default undefined\n   */\n  title?: string;\n  /**\n   * The text of the OK button.\n   * @default OK\n   */\n  okText?: string;\n  /**\n   * Sets the danger styles to the OK button.\n   * @default false\n   */\n  okDanger?: boolean;\n  /**\n   * Whether the OK button is loading.\n   * @default false\n   */\n  okLoading?: boolean;\n  /**\n   * Whether the OK button is disabled.\n   * @default false\n   */\n  okDisabled?: boolean;\n  /**\n   * The header component.\n   * Set as null if you don't need the default header.\n   * @default undefined\n   */\n  header?: React.ReactNode;\n  /**\n   * The footer component.\n   * Set as null if you don't need the default footer.\n   * @default undefined\n   */\n  footer?: React.ReactNode;\n  /**\n   * Whether the modal is visible.\n   * @default false\n   */\n  visible?: boolean;\n  /**\n   * The locale of the modal.\n   * @default undefined\n   */\n  locale?: ModalLocale;\n  /**\n   * Specifies a callback that will be called when a user clicks the mask or\n   * the close button. The callback should set the visible state to false.\n   * @default undefined\n   */\n  onClose?: () => void;\n  /**\n   * Specifies a callback that will be called when a user clicks the OK button.\n   * @default undefined\n   */\n  onOk?: () => void;\n}\n\nconst MODAL_CONTAINER_Z_INDEX = 1000;\nconst MODAL_BOX_SHADOW_SIZE_EM = 1;\n\nconst maskFadeIn = keyframes`\n  from { opacity: 0; }\n  to { opacity: 1; }\n`;\n\nconst maskFadeOut = keyframes`\n  from { opacity: 1; }\n  to { opacity: 0; }\n`;\n\nconst maskVisibleStyles = (p) =>\n  p.visible &&\n  css`\n    animation: ${maskFadeIn} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst maskInvisibleStyles = (p) =>\n  !p.visible &&\n  css`\n    animation: ${maskFadeOut} ${p.theme.transitionDelay}ms forwards;\n  `;\n\ntype MaskProps = Pick<ModalProps, 'visible'>;\nexport const ModalMask = styled('div', omitEmotionProps('visible'))<MaskProps>`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  background-color: ${(p) => clr(p.theme.modalMaskColorBg)};\n  z-index: ${MODAL_CONTAINER_Z_INDEX};\n  ${maskVisibleStyles};\n  ${maskInvisibleStyles};\n`;\n\nconst Container = styled.div`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  z-index: ${MODAL_CONTAINER_Z_INDEX};\n\n  ${m.min.xs} {\n    ${enableScrollingStyles('y')};\n  }\n`;\n\nconst contentFadeIn = keyframes`\n  from { transform: translateY(calc(var(--vh, 1vh) * 100 + ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n  to { transform: translateY(calc(var(--vh, 1vh) * 100 - 100%)); }\n`;\n\nconst contentFadeOut = keyframes`\n  from { transform: translateY(calc(var(--vh, 1vh) * 100 - 100%)); }\n  to { transform: translateY(calc(var(--vh, 1vh) * 100 + ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst contentFadeInXs = keyframes`\n  from { transform: translateY(calc(-100% - ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n  to { transform: translateY(6em); }\n`;\n\nconst contentFadeOutXs = keyframes`\n  from { transform: translateY(6em); }\n  to { transform: translateY(calc(-100% - ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst contentVisibleStyles = (p) =>\n  p.visible &&\n  css`\n    animation: ${contentFadeIn} ${p.theme.transitionDelay}ms forwards;\n    ${m.min.xs} {\n      animation: ${contentFadeInXs} ${p.theme.transitionDelay}ms forwards;\n    }\n  `;\n\nconst contentInvisibleStyles = (p) =>\n  !p.visible &&\n  css`\n    animation: ${contentFadeOut} ${p.theme.transitionDelay}ms forwards;\n    ${m.min.xs} {\n      animation: ${contentFadeOutXs} ${p.theme.transitionDelay}ms forwards;\n    }\n  `;\n\ntype ContentProps = Pick<ModalProps, 'visible' | 'size'>;\nconst Content = styled(\n  'div',\n  omitEmotionProps('visible', 'size')\n)<ContentProps>`\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  padding-bottom: env(safe-area-inset-bottom);\n\n  background-color: ${(p) => clr(p.theme.colorBg)};\n  color: ${(p) => clr(p.theme.colorText)};\n  box-shadow: 0 0 ${MODAL_BOX_SHADOW_SIZE_EM}em\n    ${(p) => clr(p.theme.modalColorBoxShadow)};\n\n  width: 100%;\n  max-height: 100%;\n  border-radius: ${(p) => p.theme.borderRadius}em\n    ${(p) => p.theme.borderRadius}em 0 0;\n\n  ${m.min.xs} {\n    width: ${(p) => p.theme.modalWidth}em;\n    max-height: unset;\n    border-radius: ${(p) => p.theme.borderRadius}em;\n\n    left: 50%;\n    margin-left: ${(p) => -p.theme.modalWidth / 2}em;\n  }\n\n  ${contentVisibleStyles};\n  ${contentInvisibleStyles}\n  ${sizeStyles};\n`;\n\nconst Header = styled.div`\n  flex-shrink: 0;\n  height: ${(p) => p.theme.modalHeaderHeight}em;\n  border-bottom: 1px solid ${(p) => clr(p.theme.modalHeaderColorBorderBottom)};\n  box-sizing: border-box;\n\n  display: flex;\n  align-items: center;\n\n  padding-left: ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n  padding-right: ${(p) =>\n    Math.max(\n      p.theme.modalBodyPaddingHorizontal[1] - p.theme.buttonPaddingHorizontal,\n      0\n    )}em;\n\n  ${m.min.xs} {\n    padding-left: ${(p) => p.theme.modalBodyPaddingHorizontal[1]}em;\n    padding-right: ${(p) =>\n      Math.max(\n        p.theme.modalBodyPaddingHorizontal[1] - p.theme.buttonPaddingHorizontal,\n        0\n      )}em;\n  }\n`;\n\nconst Title = styled.div`\n  flex: 1;\n  font-size: ${(p) => p.theme.sizes.large}em;\n  font-weight: 500;\n  ${ellipsisStyles};\n`;\n\nconst Body = styled.div`\n  flex-grow: 1;\n\n  padding: ${(p) => p.theme.modalBodyPaddingVertical[0]}em\n    ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n\n  ${m.min.xs} {\n    padding: ${(p) => p.theme.modalBodyPaddingVertical[1]}em\n      ${(p) => p.theme.modalBodyPaddingHorizontal[1]}em;\n  }\n\n  ${enableScrollingStyles('y')};\n`;\n\nconst Footer = styled.div`\n  padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em\n    ${(p) => p.theme.modalBodyPaddingVertical[0]}em;\n\n  ${m.min.xs} {\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n\n    padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[1]}em\n      ${(p) => p.theme.modalBodyPaddingVertical[1]}em;\n  }\n`;\n\n/**\n * The base pop-up window.\n */\nconst Modal = forwardRef<HTMLDivElement, ModalProps>(\n  (\n    {\n      title,\n      okText = 'OK',\n      okDanger = false,\n      okLoading = false,\n      okDisabled = false,\n      header,\n      footer,\n      visible = false,\n      locale = defaultLocale,\n      onClose = () => {},\n      onOk,\n      size,\n      id,\n      onClick = () => {},\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const contentRef = useRef<HTMLDivElement>(null);\n    const { theme } = useTheme();\n    const mounted = useClosable(visible, theme.transitionDelay);\n    useBodyScroll(!visible);\n    useKeyPress(\n      (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n      'Escape',\n      onClose\n    );\n\n    const titleId = useMemo(\n      () => `modal-title-${Math.random().toString(36).slice(2, 11)}`,\n      []\n    );\n    const bodyId = useMemo(\n      () => id || `modal-body-${Math.random().toString(36).slice(2, 11)}`,\n      [id]\n    );\n\n    if (!mounted) return null;\n\n    return (\n      <Portal>\n        <ModalMask visible={visible} />\n        <Container onClick={onClose}>\n          <FocusLock autoFocus={false}>\n            <Content\n              visible={visible}\n              size={size}\n              onClick={(e) => {\n                e.stopPropagation();\n                onClick(e);\n              }}\n              role='dialog'\n              aria-modal\n              aria-labelledby={header === undefined ? titleId : undefined}\n              aria-describedby={bodyId}\n              ref={contentRef}\n            >\n              {header === undefined ? (\n                <ThemeOverrider\n                  overrides={(t) => ({\n                    buttonPaddingHorizontal:\n                      t.modalCloseButtonPaddingHorizontal,\n                  })}\n                >\n                  <Header>\n                    <Title id={titleId}>{title}</Title>\n                    <Button\n                      type='ghost'\n                      wide='never'\n                      onClick={onClose}\n                      aria-label={locale.closeLabel}\n                    >\n                      <Close />\n                    </Button>\n                  </Header>\n                </ThemeOverrider>\n              ) : (\n                header\n              )}\n\n              <Body id={bodyId} {...rest} ref={ref}>\n                {children}\n              </Body>\n\n              {footer === undefined ? (\n                <Footer>\n                  <Button\n                    danger={okDanger}\n                    loading={okLoading}\n                    disabled={okDisabled}\n                    onClick={onOk}\n                  >\n                    {okText}\n                  </Button>\n                </Footer>\n              ) : (\n                footer\n              )}\n            </Content>\n          </FocusLock>\n        </Container>\n      </Portal>\n    );\n  }\n);\n\nModal.displayName = 'Modal';\n\nexport default Modal;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["MODAL_CONTAINER_Z_INDEX","MODAL_BOX_SHADOW_SIZE_EM","maskFadeIn","keyframes","maskFadeOut","maskVisibleStyles","p","visible","css","theme","transitionDelay","maskInvisibleStyles","ModalMask","styled","omitEmotionProps","clr","modalMaskColorBg","Container","div","m","min","xs","enableScrollingStyles","contentFadeIn","contentFadeOut","contentFadeInXs","contentFadeOutXs","contentVisibleStyles","contentInvisibleStyles","Content","colorBg","colorText","modalColorBoxShadow","borderRadius","modalWidth","sizeStyles","Header","modalHeaderHeight","modalHeaderColorBorderBottom","modalBodyPaddingHorizontal","Math","max","buttonPaddingHorizontal","Title","sizes","large","ellipsisStyles","Body","modalBodyPaddingVertical","Footer","Modal","forwardRef","ref","title","okText","okDanger","okLoading","okDisabled","header","footer","locale","defaultLocale","onClose","onOk","size","id","onClick","children","rest","contentRef","useRef","useTheme","mounted","useClosable","useBodyScroll","useKeyPress","window","undefined","titleId","useMemo","random","toString","slice","bodyId","e","stopPropagation","t","modalCloseButtonPaddingHorizontal","closeLabel","displayName"],"sources":["../../../src/Modal/index.tsx"],"sourcesContent":["import React, { forwardRef, useMemo, useRef } from 'react';\nimport FocusLock from 'react-focus-lock';\nimport styled from '@emotion/styled';\nimport {\n  useBodyScroll,\n  useKeyPress,\n  useClosable,\n  omitEmotionProps,\n} from '@os-design/utils';\nimport {\n  ellipsisStyles,\n  enableScrollingStyles,\n  sizeStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { m } from '@os-design/media';\nimport { css, keyframes } from '@emotion/react';\nimport { Close } from '@os-design/icons';\nimport { clr, ThemeOverrider, useTheme } from '@os-design/theming';\nimport Portal from '@os-design/portal';\nimport Button from '../Button';\nimport defaultLocale, { ModalLocale } from './utils/defaultLocale';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface ModalProps extends JsxDivProps, WithSize {\n  /**\n   * The title of the modal.\n   * @default undefined\n   */\n  title?: string;\n  /**\n   * The text of the OK button.\n   * @default OK\n   */\n  okText?: string;\n  /**\n   * Sets the danger styles to the OK button.\n   * @default false\n   */\n  okDanger?: boolean;\n  /**\n   * Whether the OK button is loading.\n   * @default false\n   */\n  okLoading?: boolean;\n  /**\n   * Whether the OK button is disabled.\n   * @default false\n   */\n  okDisabled?: boolean;\n  /**\n   * The header component.\n   * Set as null if you don't need the default header.\n   * @default undefined\n   */\n  header?: React.ReactNode;\n  /**\n   * The footer component.\n   * Set as null if you don't need the default footer.\n   * @default undefined\n   */\n  footer?: React.ReactNode;\n  /**\n   * Whether the modal is visible.\n   * @default false\n   */\n  visible?: boolean;\n  /**\n   * The locale of the modal.\n   * @default undefined\n   */\n  locale?: ModalLocale;\n  /**\n   * Specifies a callback that will be called when a user clicks the mask or\n   * the close button. The callback should set the visible state to false.\n   * @default undefined\n   */\n  onClose?: () => void;\n  /**\n   * Specifies a callback that will be called when a user clicks the OK button.\n   * @default undefined\n   */\n  onOk?: () => void;\n}\n\nconst MODAL_CONTAINER_Z_INDEX = 1000;\nconst MODAL_BOX_SHADOW_SIZE_EM = 1;\n\nconst maskFadeIn = keyframes`\n  from { opacity: 0; }\n  to { opacity: 1; }\n`;\n\nconst maskFadeOut = keyframes`\n  from { opacity: 1; }\n  to { opacity: 0; }\n`;\n\nconst maskVisibleStyles = (p) =>\n  p.visible &&\n  css`\n    animation: ${maskFadeIn} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst maskInvisibleStyles = (p) =>\n  !p.visible &&\n  css`\n    animation: ${maskFadeOut} ${p.theme.transitionDelay}ms forwards;\n  `;\n\ntype MaskProps = Pick<ModalProps, 'visible'>;\nexport const ModalMask = styled('div', omitEmotionProps('visible'))<MaskProps>`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  background-color: ${(p) => clr(p.theme.modalMaskColorBg)};\n  z-index: ${MODAL_CONTAINER_Z_INDEX};\n  ${maskVisibleStyles};\n  ${maskInvisibleStyles};\n`;\n\nconst Container = styled.div`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  z-index: ${MODAL_CONTAINER_Z_INDEX};\n\n  ${m.min.xs} {\n    ${enableScrollingStyles('y')};\n  }\n`;\n\nconst contentFadeIn = keyframes`\n  from { transform: translateY(calc(var(--vh, 1vh) * 100 + ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n  to { transform: translateY(calc(var(--vh, 1vh) * 100 - 100%)); }\n`;\n\nconst contentFadeOut = keyframes`\n  from { transform: translateY(calc(var(--vh, 1vh) * 100 - 100%)); }\n  to { transform: translateY(calc(var(--vh, 1vh) * 100 + ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst contentFadeInXs = keyframes`\n  from { transform: translateY(calc(-100% - ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n  to { transform: translateY(6em); }\n`;\n\nconst contentFadeOutXs = keyframes`\n  from { transform: translateY(6em); }\n  to { transform: translateY(calc(-100% - ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst contentVisibleStyles = (p) =>\n  p.visible &&\n  css`\n    animation: ${contentFadeIn} ${p.theme.transitionDelay}ms forwards;\n    ${m.min.xs} {\n      animation: ${contentFadeInXs} ${p.theme.transitionDelay}ms forwards;\n    }\n  `;\n\nconst contentInvisibleStyles = (p) =>\n  !p.visible &&\n  css`\n    animation: ${contentFadeOut} ${p.theme.transitionDelay}ms forwards;\n    ${m.min.xs} {\n      animation: ${contentFadeOutXs} ${p.theme.transitionDelay}ms forwards;\n    }\n  `;\n\ntype ContentProps = Pick<ModalProps, 'visible' | 'size'>;\nconst Content = styled(\n  'div',\n  omitEmotionProps('visible', 'size')\n)<ContentProps>`\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  padding-bottom: env(safe-area-inset-bottom);\n\n  background-color: ${(p) => clr(p.theme.colorBg)};\n  color: ${(p) => clr(p.theme.colorText)};\n  box-shadow: 0 0 ${MODAL_BOX_SHADOW_SIZE_EM}em\n    ${(p) => clr(p.theme.modalColorBoxShadow)};\n\n  width: 100%;\n  max-height: 100%;\n  border-radius: ${(p) => p.theme.borderRadius}em\n    ${(p) => p.theme.borderRadius}em 0 0;\n\n  ${m.min.xs} {\n    width: ${(p) => p.theme.modalWidth}em;\n    max-height: unset;\n    border-radius: ${(p) => p.theme.borderRadius}em;\n\n    left: 50%;\n    margin-left: ${(p) => -p.theme.modalWidth / 2}em;\n  }\n\n  ${contentVisibleStyles};\n  ${contentInvisibleStyles}\n  ${sizeStyles};\n`;\n\nconst Header = styled.div`\n  flex-shrink: 0;\n  height: ${(p) => p.theme.modalHeaderHeight}em;\n  border-bottom: 1px solid ${(p) => clr(p.theme.modalHeaderColorBorderBottom)};\n  box-sizing: border-box;\n\n  display: flex;\n  align-items: center;\n\n  padding-left: ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n  padding-right: ${(p) =>\n    Math.max(\n      p.theme.modalBodyPaddingHorizontal[1] - p.theme.buttonPaddingHorizontal,\n      0\n    )}em;\n\n  ${m.min.xs} {\n    padding-left: ${(p) => p.theme.modalBodyPaddingHorizontal[1]}em;\n    padding-right: ${(p) =>\n      Math.max(\n        p.theme.modalBodyPaddingHorizontal[1] - p.theme.buttonPaddingHorizontal,\n        0\n      )}em;\n  }\n`;\n\nconst Title = styled.div`\n  flex: 1;\n  font-size: ${(p) => p.theme.sizes.large}em;\n  font-weight: 500;\n  ${ellipsisStyles};\n`;\n\nconst Body = styled.div`\n  flex-grow: 1;\n\n  padding: ${(p) => p.theme.modalBodyPaddingVertical[0]}em\n    ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n\n  ${m.min.xs} {\n    padding: ${(p) => p.theme.modalBodyPaddingVertical[1]}em\n      ${(p) => p.theme.modalBodyPaddingHorizontal[1]}em;\n  }\n\n  ${enableScrollingStyles('y')};\n`;\n\nconst Footer = styled.div`\n  padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em\n    ${(p) => p.theme.modalBodyPaddingVertical[0]}em;\n\n  ${m.min.xs} {\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n\n    padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[1]}em\n      ${(p) => p.theme.modalBodyPaddingVertical[1]}em;\n  }\n`;\n\n/**\n * The base pop-up window.\n */\nconst Modal = forwardRef<HTMLDivElement, ModalProps>(\n  (\n    {\n      title,\n      okText = 'OK',\n      okDanger = false,\n      okLoading = false,\n      okDisabled = false,\n      header,\n      footer,\n      visible = false,\n      locale = defaultLocale,\n      onClose = () => {},\n      onOk,\n      size,\n      id,\n      onClick = () => {},\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const contentRef = useRef<HTMLDivElement>(null);\n    const { theme } = useTheme();\n    const mounted = useClosable(visible, theme.transitionDelay);\n    useBodyScroll(!visible);\n    useKeyPress(\n      (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n      'Escape',\n      onClose\n    );\n\n    const titleId = useMemo(\n      () => `modal-title-${Math.random().toString(36).slice(2, 11)}`,\n      []\n    );\n    const bodyId = useMemo(\n      () => id || `modal-body-${Math.random().toString(36).slice(2, 11)}`,\n      [id]\n    );\n\n    if (!mounted) return null;\n\n    return (\n      <Portal>\n        <ModalMask visible={visible} />\n        <Container onClick={onClose}>\n          <FocusLock autoFocus={false}>\n            <Content\n              visible={visible}\n              size={size}\n              onClick={(e) => {\n                e.stopPropagation();\n                onClick(e);\n              }}\n              role='dialog'\n              aria-modal\n              aria-labelledby={header === undefined ? titleId : undefined}\n              aria-describedby={bodyId}\n              ref={contentRef}\n            >\n              {header === undefined ? (\n                <ThemeOverrider\n                  overrides={(t) => ({\n                    buttonPaddingHorizontal:\n                      t.modalCloseButtonPaddingHorizontal,\n                  })}\n                >\n                  <Header>\n                    <Title id={titleId}>{title}</Title>\n                    <Button\n                      type='ghost'\n                      wide='never'\n                      onClick={onClose}\n                      aria-label={locale.closeLabel}\n                    >\n                      <Close />\n                    </Button>\n                  </Header>\n                </ThemeOverrider>\n              ) : (\n                header\n              )}\n\n              <Body id={bodyId} {...rest} ref={ref}>\n                {children}\n              </Body>\n\n              {footer === undefined ? (\n                <Footer>\n                  <Button\n                    danger={okDanger}\n                    loading={okLoading}\n                    disabled={okDisabled}\n                    onClick={onOk}\n                  >\n                    {okText}\n                  </Button>\n                </Footer>\n              ) : (\n                footer\n              )}\n            </Content>\n          </FocusLock>\n        </Container>\n      </Portal>\n    );\n  }\n);\n\nModal.displayName = 'Modal';\n\nexport default Modal;\n"],"mappings":"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"}

package/dist/cjs/Modal/utils/defaultLocale.js.map

@@ -1 +1 @@
-{"version":3,"file":"defaultLocale.js","names":["defaultLocale","closeLabel"],"sources":["../../../../src/Modal/utils/defaultLocale.ts"],"sourcesContent":["export interface ModalLocale {\n  closeLabel: string;\n}\n\nconst defaultLocale: ModalLocale = {\n  closeLabel: 'Close',\n};\n\nexport default defaultLocale;\n"],"mappings":";;;;;;AAIA,IAAMA,aAA0B,GAAG;EACjCC,UAAU,EAAE;AADqB,CAAnC;eAIeD,a"}
+{"version":3,"file":"defaultLocale.js","names":["defaultLocale","closeLabel"],"sources":["../../../../src/Modal/utils/defaultLocale.ts"],"sourcesContent":["export interface ModalLocale {\n  closeLabel: string;\n}\n\nconst defaultLocale: ModalLocale = {\n  closeLabel: 'Close',\n};\n\nexport default defaultLocale;\n"],"mappings":";;;;;;AAIA,IAAMA,aAA0B,GAAG;EACjCC,UAAU,EAAE;AACd,CAAC;AAAC,eAEaD,aAAa;AAAA"}

package/dist/cjs/Navigation/index.js

@@ -1,46 +1,27 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _styles = require("@os-design/styles");
-
 var _utils = require("@os-design/utils");
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _theming = require("@os-design/theming");
-
 var _media = require("@os-design/media");
-
 var _react2 = require("@emotion/react");
-
 var _useScrollFlags2 = _interopRequireDefault(require("./utils/useScrollFlags"));
-
 var _excluded = ["sideTop", "sideBottom", "children"];
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
-
 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; }
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }
-
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 var Container = _styled["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: fixed;\n  box-sizing: border-box;\n  z-index: 101;\n\n  background-color: ", ";\n  color: ", ";\n\n  // Tab navigator\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: calc(\n    ", "em + env(safe-area-inset-bottom)\n  );\n  border-top: 1px solid ", ";\n\n  // Side navigator\n  ", " {\n    // Reset tab navigator styles\n    right: unset;\n    height: unset;\n    border-top: unset;\n\n    left: 0;\n    top: 0;\n    bottom: 0;\n    width: ", "em;\n    border-right: 1px solid ", ";\n  }\n"])), function (p) {
   return (0, _theming.clr)(p.theme.navigationColorBg);
 }, function (p) {
@@ -54,44 +35,34 @@ var Container = _styled["default"].div(_templateObject || (_templateObject = _ta
 }, function (p) {
   return (0, _theming.clr)(p.theme.navigationColorBorder);
 });
-
 var notHasSideTopStyles = function notHasSideTopStyles(p) {
   return !p.hasSideTop && (0, _react2.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    padding-top: ", "em;\n  "])), p.theme.pageHeaderHeight[1]);
 };
-
 var hasPrevStyles = function hasPrevStyles(p) {
   return p.hasPrev && !p.hasNext && (0, _react2.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    mask-image: linear-gradient(\n      to right,\n      transparent,\n      white ", "em\n    );\n    ", " {\n      mask-image: linear-gradient(\n        to bottom,\n        transparent,\n        white ", "em\n      );\n    }\n  "])), p.theme.navigationMaskImageSize, _media.m.min.md, p.theme.navigationMaskImageSize);
 };
-
 var hasNextStyles = function hasNextStyles(p) {
   return !p.hasPrev && p.hasNext && (0, _react2.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    mask-image: linear-gradient(\n      to left,\n      transparent,\n      white ", "em\n    );\n    ", " {\n      mask-image: linear-gradient(\n        to top,\n        transparent,\n        white ", "em\n      );\n    }\n  "])), p.theme.navigationMaskImageSize, _media.m.min.md, p.theme.navigationMaskImageSize);
 };
-
 var hasPrevNextStyles = function hasPrevNextStyles(p) {
   return p.hasPrev && p.hasNext && (0, _react2.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    mask-image: linear-gradient(\n      to right,\n      transparent,\n      white ", "em,\n      white calc(100% - ", "em),\n      transparent\n    );\n    ", " {\n      mask-image: linear-gradient(\n        to bottom,\n        transparent,\n        white ", "em,\n        white calc(100% - ", "em),\n        transparent\n      );\n    }\n  "])), p.theme.navigationMaskImageSize, p.theme.navigationMaskImageSize, _media.m.min.md, p.theme.navigationMaskImageSize, p.theme.navigationMaskImageSize);
 };
-
 var Content = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('hasSideTop', 'hasPrev', 'hasNext'))(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: flex-start;\n  &::before,\n  &::after {\n    content: ''; // Insert space before the first item and after the last one\n  }\n\n  overflow-y: hidden;\n  ", ";\n\n  ", " {\n    // Reset tab navigator styles\n    justify-content: unset;\n    align-items: unset;\n\n    flex-direction: column;\n\n    overflow-x: hidden;\n    ", ";\n\n    ", ";\n  }\n\n  ", ";\n  ", ";\n  ", ";\n"])), (0, _styles.enableScrollingStyles)('x', false), _media.m.min.md, (0, _styles.enableScrollingStyles)('y', false), notHasSideTopStyles, hasPrevStyles, hasNextStyles, hasPrevNextStyles);
-
 var Addon = _styled["default"].div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: none;\n  ", " {\n    display: block;\n  }\n"])), _media.m.min.md);
-
 var BottomAddon = (0, _styled["default"])(Addon)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  margin-top: auto;\n"])));
+
 /**
  * The main navigation.
  */
-
 var Navigation = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var sideTop = _ref.sideTop,
-      sideBottom = _ref.sideBottom,
-      children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    sideBottom = _ref.sideBottom,
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var contentRef = (0, _react.useRef)(null);
-
   var _useScrollFlags = (0, _useScrollFlags2["default"])(contentRef),
-      hasPrev = _useScrollFlags.hasPrev,
-      hasNext = _useScrollFlags.hasNext;
-
+    hasPrev = _useScrollFlags.hasPrev,
+    hasNext = _useScrollFlags.hasNext;
   return /*#__PURE__*/_react["default"].createElement(Container, _extends({
     role: "navigation",
     "aria-label": "Main navigation"

package/dist/cjs/Navigation/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Container","styled","div","p","clr","theme","navigationColorBg","navigationColorText","navigationTabHeight","navigationColorBorder","m","min","md","navigationSideWidth","notHasSideTopStyles","hasSideTop","css","pageHeaderHeight","hasPrevStyles","hasPrev","hasNext","navigationMaskImageSize","hasNextStyles","hasPrevNextStyles","Content","omitEmotionProps","enableScrollingStyles","Addon","BottomAddon","Navigation","forwardRef","ref","sideTop","sideBottom","children","rest","contentRef","useRef","useScrollFlags","displayName"],"sources":["../../../src/Navigation/index.tsx"],"sourcesContent":["import React, { forwardRef, useRef } from 'react';\nimport { enableScrollingStyles } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { clr } from '@os-design/theming';\nimport { m } from '@os-design/media';\nimport { css } from '@emotion/react';\nimport useScrollFlags from './utils/useScrollFlags';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface NavigationProps extends JsxDivProps {\n  /**\n   * The top component in the side navigator.\n   * E.g. the user avatar.\n   * @default undefined\n   */\n  sideTop?: React.ReactNode;\n  /**\n   * The bottom component in the side navigator.\n   * E.g. the current tariff.\n   * @default undefined\n   */\n  sideBottom?: React.ReactNode;\n}\n\nconst Container = styled.div`\n  position: fixed;\n  box-sizing: border-box;\n  z-index: 101;\n\n  background-color: ${(p) => clr(p.theme.navigationColorBg)};\n  color: ${(p) => clr(p.theme.navigationColorText)};\n\n  // Tab navigator\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: calc(\n    ${(p) => p.theme.navigationTabHeight}em + env(safe-area-inset-bottom)\n  );\n  border-top: 1px solid ${(p) => clr(p.theme.navigationColorBorder)};\n\n  // Side navigator\n  ${m.min.md} {\n    // Reset tab navigator styles\n    right: unset;\n    height: unset;\n    border-top: unset;\n\n    left: 0;\n    top: 0;\n    bottom: 0;\n    width: ${(p) => p.theme.navigationSideWidth}em;\n    border-right: 1px solid ${(p) => clr(p.theme.navigationColorBorder)};\n  }\n`;\n\nconst notHasSideTopStyles = (p) =>\n  !p.hasSideTop &&\n  css`\n    padding-top: ${p.theme.pageHeaderHeight[1]}em;\n  `;\n\nconst hasPrevStyles = (p) =>\n  p.hasPrev &&\n  !p.hasNext &&\n  css`\n    mask-image: linear-gradient(\n      to right,\n      transparent,\n      white ${p.theme.navigationMaskImageSize}em\n    );\n    ${m.min.md} {\n      mask-image: linear-gradient(\n        to bottom,\n        transparent,\n        white ${p.theme.navigationMaskImageSize}em\n      );\n    }\n  `;\n\nconst hasNextStyles = (p) =>\n  !p.hasPrev &&\n  p.hasNext &&\n  css`\n    mask-image: linear-gradient(\n      to left,\n      transparent,\n      white ${p.theme.navigationMaskImageSize}em\n    );\n    ${m.min.md} {\n      mask-image: linear-gradient(\n        to top,\n        transparent,\n        white ${p.theme.navigationMaskImageSize}em\n      );\n    }\n  `;\n\nconst hasPrevNextStyles = (p) =>\n  p.hasPrev &&\n  p.hasNext &&\n  css`\n    mask-image: linear-gradient(\n      to right,\n      transparent,\n      white ${p.theme.navigationMaskImageSize}em,\n      white calc(100% - ${p.theme.navigationMaskImageSize}em),\n      transparent\n    );\n    ${m.min.md} {\n      mask-image: linear-gradient(\n        to bottom,\n        transparent,\n        white ${p.theme.navigationMaskImageSize}em,\n        white calc(100% - ${p.theme.navigationMaskImageSize}em),\n        transparent\n      );\n    }\n  `;\n\ninterface ContentProps {\n  hasSideTop: boolean;\n  hasPrev: boolean;\n  hasNext: boolean;\n}\nconst Content = styled(\n  'div',\n  omitEmotionProps('hasSideTop', 'hasPrev', 'hasNext')\n)<ContentProps>`\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: flex-start;\n  &::before,\n  &::after {\n    content: ''; // Insert space before the first item and after the last one\n  }\n\n  overflow-y: hidden;\n  ${enableScrollingStyles('x', false)};\n\n  ${m.min.md} {\n    // Reset tab navigator styles\n    justify-content: unset;\n    align-items: unset;\n\n    flex-direction: column;\n\n    overflow-x: hidden;\n    ${enableScrollingStyles('y', false)};\n\n    ${notHasSideTopStyles};\n  }\n\n  ${hasPrevStyles};\n  ${hasNextStyles};\n  ${hasPrevNextStyles};\n`;\n\nconst Addon = styled.div`\n  display: none;\n  ${m.min.md} {\n    display: block;\n  }\n`;\n\nconst BottomAddon = styled(Addon)`\n  margin-top: auto;\n`;\n\n/**\n * The main navigation.\n */\nconst Navigation = forwardRef<HTMLDivElement, NavigationProps>(\n  ({ sideTop, sideBottom, children, ...rest }, ref) => {\n    const contentRef = useRef<HTMLDivElement>(null);\n    const { hasPrev, hasNext } = useScrollFlags(contentRef);\n\n    return (\n      <Container\n        role='navigation'\n        aria-label='Main navigation'\n        {...rest}\n        ref={ref}\n      >\n        <Content\n          hasSideTop={!!sideTop}\n          hasPrev={hasPrev}\n          hasNext={hasNext}\n          ref={contentRef}\n          role='list'\n        >\n          {sideTop && <Addon>{sideTop}</Addon>}\n          {children}\n          {sideBottom && <BottomAddon>{sideBottom}</BottomAddon>}\n        </Content>\n      </Container>\n    );\n  }\n);\n\nNavigation.displayName = 'Navigation';\n\nexport default Navigation;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAkBA,IAAMA,SAAS,GAAGC,kBAAA,CAAOC,GAAV,8jBAKO,UAACC,CAAD;EAAA,OAAO,IAAAC,YAAA,EAAID,CAAC,CAACE,KAAF,CAAQC,iBAAZ,CAAP;AAAA,CALP,EAMJ,UAACH,CAAD;EAAA,OAAO,IAAAC,YAAA,EAAID,CAAC,CAACE,KAAF,CAAQE,mBAAZ,CAAP;AAAA,CANI,EAaT,UAACJ,CAAD;EAAA,OAAOA,CAAC,CAACE,KAAF,CAAQG,mBAAf;AAAA,CAbS,EAeW,UAACL,CAAD;EAAA,OAAO,IAAAC,YAAA,EAAID,CAAC,CAACE,KAAF,CAAQI,qBAAZ,CAAP;AAAA,CAfX,EAkBXC,QAAA,CAAEC,GAAF,CAAMC,EAlBK,EA2BF,UAACT,CAAD;EAAA,OAAOA,CAAC,CAACE,KAAF,CAAQQ,mBAAf;AAAA,CA3BE,EA4Be,UAACV,CAAD;EAAA,OAAO,IAAAC,YAAA,EAAID,CAAC,CAACE,KAAF,CAAQI,qBAAZ,CAAP;AAAA,CA5Bf,CAAf;;AAgCA,IAAMK,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACX,CAAD;EAAA,OAC1B,CAACA,CAAC,CAACY,UAAH,QACAC,WADA,uGAEiBb,CAAC,CAACE,KAAF,CAAQY,gBAAR,CAAyB,CAAzB,CAFjB,CAD0B;AAAA,CAA5B;;AAMA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACf,CAAD;EAAA,OACpBA,CAAC,CAACgB,OAAF,IACA,CAAChB,CAAC,CAACiB,OADH,QAEAJ,WAFA,iTAMYb,CAAC,CAACE,KAAF,CAAQgB,uBANpB,EAQIX,QAAA,CAAEC,GAAF,CAAMC,EARV,EAYcT,CAAC,CAACE,KAAF,CAAQgB,uBAZtB,CADoB;AAAA,CAAtB;;AAkBA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACnB,CAAD;EAAA,OACpB,CAACA,CAAC,CAACgB,OAAH,IACAhB,CAAC,CAACiB,OADF,QAEAJ,WAFA,6SAMYb,CAAC,CAACE,KAAF,CAAQgB,uBANpB,EAQIX,QAAA,CAAEC,GAAF,CAAMC,EARV,EAYcT,CAAC,CAACE,KAAF,CAAQgB,uBAZtB,CADoB;AAAA,CAAtB;;AAkBA,IAAME,iBAAiB,GAAG,SAApBA,iBAAoB,CAACpB,CAAD;EAAA,OACxBA,CAAC,CAACgB,OAAF,IACAhB,CAAC,CAACiB,OADF,QAEAJ,WAFA,iaAMYb,CAAC,CAACE,KAAF,CAAQgB,uBANpB,EAOwBlB,CAAC,CAACE,KAAF,CAAQgB,uBAPhC,EAUIX,QAAA,CAAEC,GAAF,CAAMC,EAVV,EAccT,CAAC,CAACE,KAAF,CAAQgB,uBAdtB,EAe0BlB,CAAC,CAACE,KAAF,CAAQgB,uBAflC,CADwB;AAAA,CAA1B;;AA2BA,IAAMG,OAAO,GAAG,IAAAvB,kBAAA,EACd,KADc,EAEd,IAAAwB,uBAAA,EAAiB,YAAjB,EAA+B,SAA/B,EAA0C,SAA1C,CAFc,CAAH,ymBAoBT,IAAAC,6BAAA,EAAsB,GAAtB,EAA2B,KAA3B,CApBS,EAsBThB,QAAA,CAAEC,GAAF,CAAMC,EAtBG,EA8BP,IAAAc,6BAAA,EAAsB,GAAtB,EAA2B,KAA3B,CA9BO,EAgCPZ,mBAhCO,EAmCTI,aAnCS,EAoCTI,aApCS,EAqCTC,iBArCS,CAAb;;AAwCA,IAAMI,KAAK,GAAG1B,kBAAA,CAAOC,GAAV,gIAEPQ,QAAA,CAAEC,GAAF,CAAMC,EAFC,CAAX;;AAOA,IAAMgB,WAAW,GAAG,IAAA3B,kBAAA,EAAO0B,KAAP,CAAH,8FAAjB;AAIA;AACA;AACA;;AACA,IAAME,UAAU,gBAAG,IAAAC,iBAAA,EACjB,gBAA6CC,GAA7C,EAAqD;EAAA,IAAlDC,OAAkD,QAAlDA,OAAkD;EAAA,IAAzCC,UAAyC,QAAzCA,UAAyC;EAAA,IAA7BC,QAA6B,QAA7BA,QAA6B;EAAA,IAAhBC,IAAgB;;EACnD,IAAMC,UAAU,GAAG,IAAAC,aAAA,EAAuB,IAAvB,CAAnB;;EACA,sBAA6B,IAAAC,2BAAA,EAAeF,UAAf,CAA7B;EAAA,IAAQjB,OAAR,mBAAQA,OAAR;EAAA,IAAiBC,OAAjB,mBAAiBA,OAAjB;;EAEA,oBACE,gCAAC,SAAD;IACE,IAAI,EAAC,YADP;IAEE,cAAW;EAFb,GAGMe,IAHN;IAIE,GAAG,EAAEJ;EAJP,iBAME,gCAAC,OAAD;IACE,UAAU,EAAE,CAAC,CAACC,OADhB;IAEE,OAAO,EAAEb,OAFX;IAGE,OAAO,EAAEC,OAHX;IAIE,GAAG,EAAEgB,UAJP;IAKE,IAAI,EAAC;EALP,GAOGJ,OAAO,iBAAI,gCAAC,KAAD,QAAQA,OAAR,CAPd,EAQGE,QARH,EASGD,UAAU,iBAAI,gCAAC,WAAD,QAAcA,UAAd,CATjB,CANF,CADF;AAoBD,CAzBgB,CAAnB;AA4BAJ,UAAU,CAACU,WAAX,GAAyB,YAAzB;eAEeV,U"}
+{"version":3,"file":"index.js","names":["Container","styled","div","p","clr","theme","navigationColorBg","navigationColorText","navigationTabHeight","navigationColorBorder","m","min","md","navigationSideWidth","notHasSideTopStyles","hasSideTop","css","pageHeaderHeight","hasPrevStyles","hasPrev","hasNext","navigationMaskImageSize","hasNextStyles","hasPrevNextStyles","Content","omitEmotionProps","enableScrollingStyles","Addon","BottomAddon","Navigation","forwardRef","ref","sideTop","sideBottom","children","rest","contentRef","useRef","useScrollFlags","displayName"],"sources":["../../../src/Navigation/index.tsx"],"sourcesContent":["import React, { forwardRef, useRef } from 'react';\nimport { enableScrollingStyles } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { clr } from '@os-design/theming';\nimport { m } from '@os-design/media';\nimport { css } from '@emotion/react';\nimport useScrollFlags from './utils/useScrollFlags';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface NavigationProps extends JsxDivProps {\n  /**\n   * The top component in the side navigator.\n   * E.g. the user avatar.\n   * @default undefined\n   */\n  sideTop?: React.ReactNode;\n  /**\n   * The bottom component in the side navigator.\n   * E.g. the current tariff.\n   * @default undefined\n   */\n  sideBottom?: React.ReactNode;\n}\n\nconst Container = styled.div`\n  position: fixed;\n  box-sizing: border-box;\n  z-index: 101;\n\n  background-color: ${(p) => clr(p.theme.navigationColorBg)};\n  color: ${(p) => clr(p.theme.navigationColorText)};\n\n  // Tab navigator\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: calc(\n    ${(p) => p.theme.navigationTabHeight}em + env(safe-area-inset-bottom)\n  );\n  border-top: 1px solid ${(p) => clr(p.theme.navigationColorBorder)};\n\n  // Side navigator\n  ${m.min.md} {\n    // Reset tab navigator styles\n    right: unset;\n    height: unset;\n    border-top: unset;\n\n    left: 0;\n    top: 0;\n    bottom: 0;\n    width: ${(p) => p.theme.navigationSideWidth}em;\n    border-right: 1px solid ${(p) => clr(p.theme.navigationColorBorder)};\n  }\n`;\n\nconst notHasSideTopStyles = (p) =>\n  !p.hasSideTop &&\n  css`\n    padding-top: ${p.theme.pageHeaderHeight[1]}em;\n  `;\n\nconst hasPrevStyles = (p) =>\n  p.hasPrev &&\n  !p.hasNext &&\n  css`\n    mask-image: linear-gradient(\n      to right,\n      transparent,\n      white ${p.theme.navigationMaskImageSize}em\n    );\n    ${m.min.md} {\n      mask-image: linear-gradient(\n        to bottom,\n        transparent,\n        white ${p.theme.navigationMaskImageSize}em\n      );\n    }\n  `;\n\nconst hasNextStyles = (p) =>\n  !p.hasPrev &&\n  p.hasNext &&\n  css`\n    mask-image: linear-gradient(\n      to left,\n      transparent,\n      white ${p.theme.navigationMaskImageSize}em\n    );\n    ${m.min.md} {\n      mask-image: linear-gradient(\n        to top,\n        transparent,\n        white ${p.theme.navigationMaskImageSize}em\n      );\n    }\n  `;\n\nconst hasPrevNextStyles = (p) =>\n  p.hasPrev &&\n  p.hasNext &&\n  css`\n    mask-image: linear-gradient(\n      to right,\n      transparent,\n      white ${p.theme.navigationMaskImageSize}em,\n      white calc(100% - ${p.theme.navigationMaskImageSize}em),\n      transparent\n    );\n    ${m.min.md} {\n      mask-image: linear-gradient(\n        to bottom,\n        transparent,\n        white ${p.theme.navigationMaskImageSize}em,\n        white calc(100% - ${p.theme.navigationMaskImageSize}em),\n        transparent\n      );\n    }\n  `;\n\ninterface ContentProps {\n  hasSideTop: boolean;\n  hasPrev: boolean;\n  hasNext: boolean;\n}\nconst Content = styled(\n  'div',\n  omitEmotionProps('hasSideTop', 'hasPrev', 'hasNext')\n)<ContentProps>`\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: flex-start;\n  &::before,\n  &::after {\n    content: ''; // Insert space before the first item and after the last one\n  }\n\n  overflow-y: hidden;\n  ${enableScrollingStyles('x', false)};\n\n  ${m.min.md} {\n    // Reset tab navigator styles\n    justify-content: unset;\n    align-items: unset;\n\n    flex-direction: column;\n\n    overflow-x: hidden;\n    ${enableScrollingStyles('y', false)};\n\n    ${notHasSideTopStyles};\n  }\n\n  ${hasPrevStyles};\n  ${hasNextStyles};\n  ${hasPrevNextStyles};\n`;\n\nconst Addon = styled.div`\n  display: none;\n  ${m.min.md} {\n    display: block;\n  }\n`;\n\nconst BottomAddon = styled(Addon)`\n  margin-top: auto;\n`;\n\n/**\n * The main navigation.\n */\nconst Navigation = forwardRef<HTMLDivElement, NavigationProps>(\n  ({ sideTop, sideBottom, children, ...rest }, ref) => {\n    const contentRef = useRef<HTMLDivElement>(null);\n    const { hasPrev, hasNext } = useScrollFlags(contentRef);\n\n    return (\n      <Container\n        role='navigation'\n        aria-label='Main navigation'\n        {...rest}\n        ref={ref}\n      >\n        <Content\n          hasSideTop={!!sideTop}\n          hasPrev={hasPrev}\n          hasNext={hasNext}\n          ref={contentRef}\n          role='list'\n        >\n          {sideTop && <Addon>{sideTop}</Addon>}\n          {children}\n          {sideBottom && <BottomAddon>{sideBottom}</BottomAddon>}\n        </Content>\n      </Container>\n    );\n  }\n);\n\nNavigation.displayName = 'Navigation';\n\nexport default Navigation;\n"],"mappings":"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"}

package/dist/cjs/Navigation/utils/useScrollFlags.js

@@ -4,36 +4,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = require("react");
-
 var _utils = require("@os-design/utils");
-
 var _media = require("@os-design/media");
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 var useScrollFlags = function useScrollFlags(ref) {
   var _useState = (0, _react.useState)(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      hasPrev = _useState2[0],
-      setHasPrev = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    hasPrev = _useState2[0],
+    setHasPrev = _useState2[1];
   var _useState3 = (0, _react.useState)(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      hasNext = _useState4[0],
-      setHasNext = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    hasNext = _useState4[0],
+    setHasNext = _useState4[1];
   var isMinMd = (0, _media.useIsMinWidth)('md');
   var scrollHandler = (0, _react.useCallback)(function () {
     var current = ref.current;
@@ -51,7 +39,6 @@ var useScrollFlags = function useScrollFlags(ref) {
     hasNext: hasNext
   };
 };
-
 var _default = useScrollFlags;
 exports["default"] = _default;
 //# sourceMappingURL=useScrollFlags.js.map

package/dist/cjs/Navigation/utils/useScrollFlags.js.map

@@ -1 +1 @@
-{"version":3,"file":"useScrollFlags.js","names":["useScrollFlags","ref","useState","hasPrev","setHasPrev","hasNext","setHasNext","isMinMd","useIsMinWidth","scrollHandler","useCallback","current","useBrowserLayoutEffect","useEvent","window","undefined"],"sources":["../../../../src/Navigation/utils/useScrollFlags.ts"],"sourcesContent":["import { RefObject, useCallback, useState } from 'react';\nimport { useEvent, useBrowserLayoutEffect } from '@os-design/utils';\nimport { useIsMinWidth } from '@os-design/media';\n\ninterface UseScrollFlagsRes {\n  hasPrev: boolean;\n  hasNext: boolean;\n}\n\nconst useScrollFlags = (ref: RefObject<Element>): UseScrollFlagsRes => {\n  const [hasPrev, setHasPrev] = useState(false);\n  const [hasNext, setHasNext] = useState(false);\n  const isMinMd = useIsMinWidth('md');\n\n  const scrollHandler = useCallback(() => {\n    const { current } = ref;\n    if (!current) return;\n\n    setHasPrev(current[isMinMd ? 'scrollTop' : 'scrollLeft'] > 0);\n    setHasNext(\n      current[isMinMd ? 'scrollHeight' : 'scrollWidth'] -\n        current[isMinMd ? 'scrollTop' : 'scrollLeft'] -\n        current[isMinMd ? 'clientHeight' : 'clientWidth'] >\n        0\n    );\n  }, [ref, isMinMd]);\n\n  useBrowserLayoutEffect(() => scrollHandler(), [scrollHandler]);\n  useEvent(ref, 'scroll', scrollHandler);\n  useEvent(\n    (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n    'resize',\n    scrollHandler\n  );\n\n  return { hasPrev, hasNext };\n};\n\nexport default useScrollFlags;\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;;;AAOA,IAAMA,cAAc,GAAG,SAAjBA,cAAiB,CAACC,GAAD,EAAgD;EACrE,gBAA8B,IAAAC,eAAA,EAAS,KAAT,CAA9B;EAAA;EAAA,IAAOC,OAAP;EAAA,IAAgBC,UAAhB;;EACA,iBAA8B,IAAAF,eAAA,EAAS,KAAT,CAA9B;EAAA;EAAA,IAAOG,OAAP;EAAA,IAAgBC,UAAhB;;EACA,IAAMC,OAAO,GAAG,IAAAC,oBAAA,EAAc,IAAd,CAAhB;EAEA,IAAMC,aAAa,GAAG,IAAAC,kBAAA,EAAY,YAAM;IACtC,IAAQC,OAAR,GAAoBV,GAApB,CAAQU,OAAR;IACA,IAAI,CAACA,OAAL,EAAc;IAEdP,UAAU,CAACO,OAAO,CAACJ,OAAO,GAAG,WAAH,GAAiB,YAAzB,CAAP,GAAgD,CAAjD,CAAV;IACAD,UAAU,CACRK,OAAO,CAACJ,OAAO,GAAG,cAAH,GAAoB,aAA5B,CAAP,GACEI,OAAO,CAACJ,OAAO,GAAG,WAAH,GAAiB,YAAzB,CADT,GAEEI,OAAO,CAACJ,OAAO,GAAG,cAAH,GAAoB,aAA5B,CAFT,GAGE,CAJM,CAAV;EAMD,CAXqB,EAWnB,CAACN,GAAD,EAAMM,OAAN,CAXmB,CAAtB;EAaA,IAAAK,6BAAA,EAAuB;IAAA,OAAMH,aAAa,EAAnB;EAAA,CAAvB,EAA8C,CAACA,aAAD,CAA9C;EACA,IAAAI,eAAA,EAASZ,GAAT,EAAc,QAAd,EAAwBQ,aAAxB;EACA,IAAAI,eAAA,EACG,OAAOC,MAAP,KAAkB,WAAlB,GAAgCA,MAAhC,GAAyCC,SAD5C,EAEE,QAFF,EAGEN,aAHF;EAMA,OAAO;IAAEN,OAAO,EAAPA,OAAF;IAAWE,OAAO,EAAPA;EAAX,CAAP;AACD,CA3BD;;eA6BeL,c"}
+{"version":3,"file":"useScrollFlags.js","names":["useScrollFlags","ref","useState","hasPrev","setHasPrev","hasNext","setHasNext","isMinMd","useIsMinWidth","scrollHandler","useCallback","current","useBrowserLayoutEffect","useEvent","window","undefined"],"sources":["../../../../src/Navigation/utils/useScrollFlags.ts"],"sourcesContent":["import { RefObject, useCallback, useState } from 'react';\nimport { useEvent, useBrowserLayoutEffect } from '@os-design/utils';\nimport { useIsMinWidth } from '@os-design/media';\n\ninterface UseScrollFlagsRes {\n  hasPrev: boolean;\n  hasNext: boolean;\n}\n\nconst useScrollFlags = (ref: RefObject<Element>): UseScrollFlagsRes => {\n  const [hasPrev, setHasPrev] = useState(false);\n  const [hasNext, setHasNext] = useState(false);\n  const isMinMd = useIsMinWidth('md');\n\n  const scrollHandler = useCallback(() => {\n    const { current } = ref;\n    if (!current) return;\n\n    setHasPrev(current[isMinMd ? 'scrollTop' : 'scrollLeft'] > 0);\n    setHasNext(\n      current[isMinMd ? 'scrollHeight' : 'scrollWidth'] -\n        current[isMinMd ? 'scrollTop' : 'scrollLeft'] -\n        current[isMinMd ? 'clientHeight' : 'clientWidth'] >\n        0\n    );\n  }, [ref, isMinMd]);\n\n  useBrowserLayoutEffect(() => scrollHandler(), [scrollHandler]);\n  useEvent(ref, 'scroll', scrollHandler);\n  useEvent(\n    (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n    'resize',\n    scrollHandler\n  );\n\n  return { hasPrev, hasNext };\n};\n\nexport default useScrollFlags;\n"],"mappings":";;;;;;AAAA;AACA;AACA;AAAiD;AAAA;AAAA;AAAA;AAAA;AAAA;AAOjD,IAAMA,cAAc,GAAG,SAAjBA,cAAc,CAAIC,GAAuB,EAAwB;EACrE,gBAA8B,IAAAC,eAAQ,EAAC,KAAK,CAAC;IAAA;IAAtCC,OAAO;IAAEC,UAAU;EAC1B,iBAA8B,IAAAF,eAAQ,EAAC,KAAK,CAAC;IAAA;IAAtCG,OAAO;IAAEC,UAAU;EAC1B,IAAMC,OAAO,GAAG,IAAAC,oBAAa,EAAC,IAAI,CAAC;EAEnC,IAAMC,aAAa,GAAG,IAAAC,kBAAW,EAAC,YAAM;IACtC,IAAQC,OAAO,GAAKV,GAAG,CAAfU,OAAO;IACf,IAAI,CAACA,OAAO,EAAE;IAEdP,UAAU,CAACO,OAAO,CAACJ,OAAO,GAAG,WAAW,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;IAC7DD,UAAU,CACRK,OAAO,CAACJ,OAAO,GAAG,cAAc,GAAG,aAAa,CAAC,GAC/CI,OAAO,CAACJ,OAAO,GAAG,WAAW,GAAG,YAAY,CAAC,GAC7CI,OAAO,CAACJ,OAAO,GAAG,cAAc,GAAG,aAAa,CAAC,GACjD,CAAC,CACJ;EACH,CAAC,EAAE,CAACN,GAAG,EAAEM,OAAO,CAAC,CAAC;EAElB,IAAAK,6BAAsB,EAAC;IAAA,OAAMH,aAAa,EAAE;EAAA,GAAE,CAACA,aAAa,CAAC,CAAC;EAC9D,IAAAI,eAAQ,EAACZ,GAAG,EAAE,QAAQ,EAAEQ,aAAa,CAAC;EACtC,IAAAI,eAAQ,EACL,OAAOC,MAAM,KAAK,WAAW,GAAGA,MAAM,GAAGC,SAAS,EACnD,QAAQ,EACRN,aAAa,CACd;EAED,OAAO;IAAEN,OAAO,EAAPA,OAAO;IAAEE,OAAO,EAAPA;EAAQ,CAAC;AAC7B,CAAC;AAAC,eAEaL,cAAc;AAAA"}