@os-design/core 1.0.196 → 1.0.197

package/dist/cjs/MenuItem/index.js

@@ -5,26 +5,26 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("@emotion/react");
 var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _icons = require("@os-design/icons");
 var _media = require("@os-design/media");
+var _menuUtils = require("@os-design/menu-utils");
 var _theming = require("@os-design/theming");
-var _icons = require("@os-design/icons");
 var _utils = require("@os-design/utils");
-var _react2 = require("@emotion/react");
-var _menuUtils = require("@os-design/menu-utils");
+var _react2 = _interopRequireWildcard(require("react"));
 var _Button = _interopRequireDefault(require("../Button"));
 var _excluded = ["selected", "value", "right", "onClick"];
 var _templateObject, _templateObject2, _templateObject3;
-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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 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 selectedStyles = function selectedStyles(p) {
-  return p.selected && (0, _react2.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    background-color: ", ";\n  "])), (0, _theming.clr)(p.theme.menuItemSelectedColorBg));
+  return p.selected && (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    background-color: ", ";\n  "])), (0, _theming.clr)(p.theme.menuItemSelectedColorBg));
 };
 var StyledButton = (0, _styled["default"])(_Button["default"], (0, _utils.omitEmotionProps)('selected'))(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  font-weight: normal;\n  border-radius: 0;\n  height: ", "em;\n\n  & > span {\n    flex: 1;\n    text-align: left;\n    overflow: hidden;\n    line-height: 1.5;\n  }\n\n  padding: 0 ", "em;\n  ", " {\n    padding: 0 ", "em;\n  }\n\n  ", ";\n"])), function (p) {
   return p.theme.menuItemHeight;
@@ -40,7 +40,7 @@ var SelectedIcon = (0, _styled["default"])(_icons.Check)(_templateObject3 || (_t
 /**
  * The base menu item.
  */
-var MenuItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+var MenuItem = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
   var _ref$selected = _ref.selected,
     selected = _ref$selected === void 0 ? false : _ref$selected,
     value = _ref.value,
@@ -48,26 +48,26 @@ var MenuItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     _ref$onClick = _ref.onClick,
     onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var _useContext = (0, _react.useContext)(_menuUtils.MenuContext),
+  var _useContext = (0, _react2.useContext)(_menuUtils.MenuContext),
     closeOnSelect = _useContext.closeOnSelect,
     onClose = _useContext.onClose;
-  var onClickRef = (0, _react.useRef)();
-  (0, _react.useEffect)(function () {
+  var onClickRef = (0, _react2.useRef)();
+  (0, _react2.useEffect)(function () {
     onClickRef.current = onClick;
   }, [onClick]);
-  var clickHandler = (0, _react.useCallback)(function (e) {
+  var clickHandler = (0, _react2.useCallback)(function (e) {
     if (onClickRef.current) onClickRef.current(e);
     if (closeOnSelect) onClose();
   }, [closeOnSelect, onClose]);
-  return /*#__PURE__*/_react["default"].createElement(_theming.ThemeOverrider, {
+  return /*#__PURE__*/_react2["default"].createElement(_theming.ThemeOverrider, {
     overrides: function overrides(theme) {
       return {
         buttonGhostColorText: theme.colorText
       };
     }
-  }, /*#__PURE__*/_react["default"].createElement(StyledButton, _extends({
+  }, /*#__PURE__*/_react2["default"].createElement(StyledButton, _extends({
     selected: selected,
-    right: selected ? /*#__PURE__*/_react["default"].createElement(SelectedIcon, null) : right,
+    right: selected ? /*#__PURE__*/_react2["default"].createElement(SelectedIcon, null) : right,
     type: "ghost",
     wide: "always",
     onClick: clickHandler,

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;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"}
+{"version":3,"file":"index.js","names":["_react","require","_styled","_interopRequireDefault","_icons","_media","_menuUtils","_theming","_utils","_react2","_interopRequireWildcard","_Button","_excluded","_templateObject","_templateObject2","_templateObject3","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","_taggedTemplateLiteral","strings","raw","slice","freeze","defineProperties","value","selectedStyles","p","selected","css","clr","theme","menuItemSelectedColorBg","StyledButton","styled","Button","omitEmotionProps","menuItemHeight","menuItemPaddingHorizontal","m","min","xs","SelectedIcon","Check","menuItemSelectedColorIcon","MenuItem","forwardRef","_ref","ref","_ref$selected","right","_ref$onClick","onClick","rest","_useContext","useContext","MenuContext","closeOnSelect","onClose","onClickRef","useRef","useEffect","current","clickHandler","useCallback","e","createElement","ThemeOverrider","overrides","buttonGhostColorText","colorText","type","wide","role","displayName","_default","exports"],"sources":["../../../src/MenuItem/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { Check } from '@os-design/icons';\nimport { m } from '@os-design/media';\nimport { MenuContext } from '@os-design/menu-utils';\nimport { ThemeOverrider, clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\n\nimport React, {\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n} from 'react';\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":"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"}

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","CloseModalContext","React","createContext","useCloseModal","useContext","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","titleId","useMemo","random","toString","slice","bodyId","clickHandler","useCallback","e","stopPropagation","keyDownHandler","key","ariaLabelledBy","undefined","t","modalCloseButtonPaddingHorizontal","closeLabel","displayName"],"sources":["../../../src/Modal/index.tsx"],"sourcesContent":["import { css, keyframes } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { Close } from '@os-design/icons';\nimport { m } from '@os-design/media';\nimport Portal from '@os-design/portal';\nimport {\n  ellipsisStyles,\n  enableScrollingStyles,\n  sizeStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { clr, ThemeOverrider, useTheme } from '@os-design/theming';\nimport { omitEmotionProps, useBodyScroll, useClosable } from '@os-design/utils';\nimport React, {\n  forwardRef,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n} from 'react';\nimport FocusLock from 'react-focus-lock';\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\nconst CloseModalContext = React.createContext<() => void>(() => {});\n\nexport const useCloseModal = () => useContext(CloseModalContext);\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\n    useBodyScroll(!visible);\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    const clickHandler = useCallback(\n      (e) => {\n        e.stopPropagation();\n        onClick(e);\n      },\n      [onClick]\n    );\n\n    const keyDownHandler = useCallback(\n      (e) => {\n        if (e.key === 'Escape') {\n          e.stopPropagation();\n          onClose();\n        }\n      },\n      [onClose]\n    );\n\n    const ariaLabelledBy = useMemo(\n      () => (header === undefined ? titleId : undefined),\n      [header, titleId]\n    );\n\n    if (!mounted) return null;\n\n    return (\n      <Portal>\n        <ModalMask visible={visible} />\n        <Container onClick={onClose}>\n          <FocusLock autoFocus>\n            <CloseModalContext.Provider value={onClose}>\n              <Content\n                visible={visible}\n                size={size}\n                tabIndex={-1}\n                onKeyDown={keyDownHandler}\n                onClick={clickHandler}\n                role='dialog'\n                aria-modal\n                aria-labelledby={ariaLabelledBy}\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            </CloseModalContext.Provider>\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":["_react","require","_styled","_interopRequireDefault","_icons","_media","_portal","_styles","_theming","_utils","_react2","_interopRequireWildcard","_reactFocusLock","_Button","_defaultLocale","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","_templateObject9","_templateObject10","_templateObject11","_templateObject12","_templateObject13","_templateObject14","_templateObject15","_templateObject16","_templateObject17","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","_taggedTemplateLiteral","strings","raw","slice","freeze","defineProperties","value","MODAL_CONTAINER_Z_INDEX","MODAL_BOX_SHADOW_SIZE_EM","maskFadeIn","keyframes","maskFadeOut","maskVisibleStyles","p","visible","css","theme","transitionDelay","maskInvisibleStyles","ModalMask","styled","omitEmotionProps","clr","modalMaskColorBg","exports","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","CloseModalContext","React","createContext","useCloseModal","useContext","Modal","forwardRef","_ref","ref","title","_ref$okText","okText","_ref$okDanger","okDanger","_ref$okLoading","okLoading","_ref$okDisabled","okDisabled","header","footer","_ref$visible","_ref$locale","locale","defaultLocale","_ref$onClose","onClose","onOk","size","id","_ref$onClick","onClick","children","rest","contentRef","useRef","_useTheme","useTheme","mounted","useClosable","useBodyScroll","titleId","useMemo","concat","random","toString","bodyId","clickHandler","useCallback","e","stopPropagation","keyDownHandler","ariaLabelledBy","undefined","createElement","autoFocus","Provider","tabIndex","onKeyDown","role","ThemeOverrider","overrides","t","modalCloseButtonPaddingHorizontal","type","wide","closeLabel","Close","danger","loading","disabled","displayName","_default"],"sources":["../../../src/Modal/index.tsx"],"sourcesContent":["import { css, keyframes } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { Close } from '@os-design/icons';\nimport { m } from '@os-design/media';\nimport Portal from '@os-design/portal';\nimport {\n  WithSize,\n  ellipsisStyles,\n  enableScrollingStyles,\n  sizeStyles,\n} from '@os-design/styles';\nimport { ThemeOverrider, clr, useTheme } from '@os-design/theming';\n\nimport { omitEmotionProps, useBodyScroll, useClosable } from '@os-design/utils';\nimport React, {\n  forwardRef,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n} from 'react';\nimport FocusLock from 'react-focus-lock';\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\nconst CloseModalContext = React.createContext<() => void>(() => {});\n\nexport const useCloseModal = () => useContext(CloseModalContext);\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\n    useBodyScroll(!visible);\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    const clickHandler = useCallback(\n      (e) => {\n        e.stopPropagation();\n        onClick(e);\n      },\n      [onClick]\n    );\n\n    const keyDownHandler = useCallback(\n      (e) => {\n        if (e.key === 'Escape') {\n          e.stopPropagation();\n          onClose();\n        }\n      },\n      [onClose]\n    );\n\n    const ariaLabelledBy = useMemo(\n      () => (header === undefined ? titleId : undefined),\n      [header, titleId]\n    );\n\n    if (!mounted) return null;\n\n    return (\n      <Portal>\n        <ModalMask visible={visible} />\n        <Container onClick={onClose}>\n          <FocusLock autoFocus>\n            <CloseModalContext.Provider value={onClose}>\n              <Content\n                visible={visible}\n                size={size}\n                tabIndex={-1}\n                onKeyDown={keyDownHandler}\n                onClick={clickHandler}\n                role='dialog'\n                aria-modal\n                aria-labelledby={ariaLabelledBy}\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            </CloseModalContext.Provider>\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;AACd,CAAC;AAAC,eAEaD,aAAa;AAAA"}
+{"version":3,"file":"defaultLocale.js","names":["defaultLocale","closeLabel","_default","exports"],"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,IAAAC,QAAA,GAEaF,aAAa;AAAAG,OAAA,cAAAD,QAAA"}

package/dist/cjs/Navigation/index.js

@@ -5,19 +5,19 @@ 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 _react = require("@emotion/react");
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _theming = require("@os-design/theming");
 var _media = require("@os-design/media");
-var _react2 = require("@emotion/react");
+var _styles = require("@os-design/styles");
+var _theming = require("@os-design/theming");
+var _utils = require("@os-design/utils");
+var _react2 = _interopRequireWildcard(require("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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 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; }
@@ -36,16 +36,16 @@ var Container = _styled["default"].div(_templateObject || (_templateObject = _ta
   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]);
+  return !p.hasSideTop && (0, _react.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);
+  return p.hasPrev && !p.hasNext && (0, _react.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);
+  return !p.hasPrev && p.hasNext && (0, _react.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);
+  return p.hasPrev && p.hasNext && (0, _react.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);
@@ -54,27 +54,27 @@ var BottomAddon = (0, _styled["default"])(Addon)(_templateObject8 || (_templateO
 /**
  * The main navigation.
  */
-var Navigation = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+var Navigation = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
   var sideTop = _ref.sideTop,
     sideBottom = _ref.sideBottom,
     children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var contentRef = (0, _react.useRef)(null);
+  var contentRef = (0, _react2.useRef)(null);
   var _useScrollFlags = (0, _useScrollFlags2["default"])(contentRef),
     hasPrev = _useScrollFlags.hasPrev,
     hasNext = _useScrollFlags.hasNext;
-  return /*#__PURE__*/_react["default"].createElement(Container, _extends({
+  return /*#__PURE__*/_react2["default"].createElement(Container, _extends({
     role: "navigation",
     "aria-label": "Main navigation"
   }, rest, {
     ref: ref
-  }), /*#__PURE__*/_react["default"].createElement(Content, {
+  }), /*#__PURE__*/_react2["default"].createElement(Content, {
     hasSideTop: !!sideTop,
     hasPrev: hasPrev,
     hasNext: hasNext,
     ref: contentRef,
     role: "list"
-  }, sideTop && /*#__PURE__*/_react["default"].createElement(Addon, null, sideTop), children, sideBottom && /*#__PURE__*/_react["default"].createElement(BottomAddon, null, sideBottom)));
+  }, sideTop && /*#__PURE__*/_react2["default"].createElement(Addon, null, sideTop), children, sideBottom && /*#__PURE__*/_react2["default"].createElement(BottomAddon, null, sideBottom)));
 });
 Navigation.displayName = 'Navigation';
 var _default = 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":"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"}
+{"version":3,"file":"index.js","names":["_react","require","_styled","_interopRequireDefault","_media","_styles","_theming","_utils","_react2","_interopRequireWildcard","_useScrollFlags2","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","_taggedTemplateLiteral","strings","raw","slice","freeze","defineProperties","value","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","ref","sideTop","sideBottom","children","rest","contentRef","useRef","_useScrollFlags","useScrollFlags","createElement","role","displayName","_default","exports"],"sources":["../../../src/Navigation/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { m } from '@os-design/media';\n\nimport { enableScrollingStyles } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\n\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, useRef } from 'react';\n\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,9 +4,9 @@ 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");
+var _utils = require("@os-design/utils");
+var _react = require("react");
 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); }

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;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"}
+{"version":3,"file":"useScrollFlags.js","names":["_media","require","_utils","_react","_slicedToArray","arr","i","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","Object","prototype","toString","call","slice","constructor","name","Array","from","test","len","length","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","isArray","useScrollFlags","ref","_useState","useState","_useState2","hasPrev","setHasPrev","_useState3","_useState4","hasNext","setHasNext","isMinMd","useIsMinWidth","scrollHandler","useCallback","current","useBrowserLayoutEffect","useEvent","window","undefined","_default","exports"],"sources":["../../../../src/Navigation/utils/useScrollFlags.ts"],"sourcesContent":["import { useIsMinWidth } from '@os-design/media';\nimport { useBrowserLayoutEffect, useEvent } from '@os-design/utils';\nimport { RefObject, useCallback, useState } from 'react';\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":"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"}

package/dist/cjs/NavigationItem/index.js

@@ -5,24 +5,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("@emotion/react");
 var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _media = require("@os-design/media");
 var _styles = require("@os-design/styles");
-var _utils = require("@os-design/utils");
 var _theming = require("@os-design/theming");
-var _react2 = require("@emotion/react");
-var _media = require("@os-design/media");
+var _utils = require("@os-design/utils");
+var _react2 = _interopRequireWildcard(require("react"));
 var _excluded = ["icon", "currentPage", "as", "onMouseDown", "children"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 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 currentPageStyles = function currentPageStyles(p) {
-  return p.currentPage && (0, _react2.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    background-color: ", ";\n    color: ", ";\n  "])), (0, _theming.clr)(p.theme.navigationItemColorBgActive), (0, _theming.clr)(p.theme.navigationItemColorTextActive));
+  return p.currentPage && (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    background-color: ", ";\n    color: ", ";\n  "])), (0, _theming.clr)(p.theme.navigationItemColorBgActive), (0, _theming.clr)(p.theme.navigationItemColorTextActive));
 };
 var NavigationLink = (0, _styled["default"])('a', (0, _utils.omitEmotionProps)('currentPage', 'as'))(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n  text-decoration: none;\n  cursor: pointer;\n  overflow: hidden;\n  border-radius: ", "em;\n\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n\n  color: ", ";\n  @media (hover: hover) {\n    &:hover,\n    &:focus {\n      background-color: ", ";\n    }\n  }\n\n  // Tab navigator\n  width: ", "em;\n  min-width: ", "em;\n  height: calc(", "em - 1px);\n\n  // Side navigator\n  ", " {\n    // Reset tab navigator styles\n    min-width: unset;\n\n    width: 100%;\n    height: ", "em;\n    min-height: ", "em;\n  }\n\n  ", ";\n  ", ";\n"])), _styles.resetFocusStyles, function (p) {
   return p.theme.borderRadius;
@@ -47,7 +47,7 @@ var Title = _styled["default"].span(_templateObject4 || (_templateObject4 = _tag
 /**
  * The item of the navigation.
  */
-var NavigationItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+var NavigationItem = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
   var icon = _ref.icon,
     _ref$currentPage = _ref.currentPage,
     currentPage = _ref$currentPage === void 0 ? false : _ref$currentPage,
@@ -56,9 +56,9 @@ var NavigationItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     _onMouseDown = _ref$onMouseDown === void 0 ? function () {} : _ref$onMouseDown,
     children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_react["default"].createElement("div", {
+  return /*#__PURE__*/_react2["default"].createElement("div", {
     role: "listitem"
-  }, /*#__PURE__*/_react["default"].createElement(NavigationLink, _extends({
+  }, /*#__PURE__*/_react2["default"].createElement(NavigationLink, _extends({
     currentPage: currentPage,
     as: as,
     onMouseDown: function onMouseDown(e) {
@@ -68,7 +68,7 @@ var NavigationItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     "aria-current": currentPage ? 'page' : undefined
   }, rest, {
     ref: ref
-  }), /*#__PURE__*/_react["default"].createElement(IconContainer, null, icon), children && /*#__PURE__*/_react["default"].createElement(Title, null, children)));
+  }), /*#__PURE__*/_react2["default"].createElement(IconContainer, null, icon), children && /*#__PURE__*/_react2["default"].createElement(Title, null, children)));
 });
 NavigationItem.displayName = 'NavigationItem';
 var _default = NavigationItem;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["currentPageStyles","p","currentPage","css","clr","theme","navigationItemColorBgActive","navigationItemColorTextActive","NavigationLink","styled","omitEmotionProps","resetFocusStyles","borderRadius","navigationItemColorText","navigationItemColorBgHover","navigationItemTabWidth","navigationTabHeight","m","min","md","navigationItemSideHeight","transitionStyles","IconContainer","span","Title","NavigationItem","forwardRef","ref","icon","as","onMouseDown","children","rest","e","preventDefault","undefined","displayName"],"sources":["../../../src/NavigationItem/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { resetFocusStyles, transitionStyles } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport { m } from '@os-design/media';\nimport { LinkProps, ReactRouterLinkProps } from '../Link';\n\ntype JsxAProps = Omit<JSX.IntrinsicElements['a'], 'ref'>;\nexport interface NavigationItemProps\n  extends JsxAProps,\n    ReactRouterLinkProps,\n    Pick<LinkProps, 'as'> {\n  /**\n   * The icon of the item.\n   * @default undefined\n   */\n  icon: React.ReactElement;\n  /**\n   * Whether the item is the current page.\n   * @default false\n   */\n  currentPage?: boolean;\n}\n\nconst currentPageStyles = (p) =>\n  p.currentPage &&\n  css`\n    background-color: ${clr(p.theme.navigationItemColorBgActive)};\n    color: ${clr(p.theme.navigationItemColorTextActive)};\n  `;\n\ntype NavigationLinkProps = Pick<NavigationItemProps, 'currentPage'>;\nconst NavigationLink = styled(\n  'a',\n  omitEmotionProps('currentPage', 'as')\n)<NavigationLinkProps>`\n  ${resetFocusStyles};\n  text-decoration: none;\n  cursor: pointer;\n  overflow: hidden;\n  border-radius: ${(p) => p.theme.borderRadius}em;\n\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n\n  color: ${(p) => clr(p.theme.navigationItemColorText)};\n  @media (hover: hover) {\n    &:hover,\n    &:focus {\n      background-color: ${(p) => clr(p.theme.navigationItemColorBgHover)};\n    }\n  }\n\n  // Tab navigator\n  width: ${(p) => p.theme.navigationItemTabWidth}em;\n  min-width: ${(p) => p.theme.navigationItemTabWidth}em;\n  height: calc(${(p) => p.theme.navigationTabHeight}em - 1px);\n\n  // Side navigator\n  ${m.min.md} {\n    // Reset tab navigator styles\n    min-width: unset;\n\n    width: 100%;\n    height: ${(p) => p.theme.navigationItemSideHeight}em;\n    min-height: ${(p) => p.theme.navigationItemSideHeight}em;\n  }\n\n  ${currentPageStyles};\n  ${transitionStyles('background-color', 'color')};\n`;\n\nconst IconContainer = styled.span`\n  display: inherit;\n\n  // Tab navigator\n  font-size: 1.6em;\n\n  // Side navigator\n  ${m.min.md} {\n    font-size: 1.8em;\n  }\n`;\n\nconst Title = styled.span`\n  font-size: 0.75em;\n  font-weight: 500;\n  white-space: nowrap;\n\n  // Side navigator\n  ${m.min.md} {\n    margin-top: 0.3em;\n  }\n`;\n\n/**\n * The item of the navigation.\n */\nconst NavigationItem = forwardRef<HTMLAnchorElement, NavigationItemProps>(\n  (\n    {\n      icon,\n      currentPage = false,\n      as,\n      onMouseDown = () => {},\n      children,\n      ...rest\n    },\n    ref\n  ) => (\n    <div role='listitem'>\n      <NavigationLink\n        currentPage={currentPage}\n        as={as}\n        onMouseDown={(e) => {\n          onMouseDown(e);\n          e.preventDefault();\n        }}\n        aria-current={currentPage ? 'page' : undefined}\n        {...rest}\n        ref={ref}\n      >\n        <IconContainer>{icon}</IconContainer>\n        {children && <Title>{children}</Title>}\n      </NavigationLink>\n    </div>\n  )\n);\n\nNavigationItem.displayName = 'NavigationItem';\n\nexport default NavigationItem;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAAqC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBrC,IAAMA,iBAAiB,GAAG,SAApBA,iBAAiB,CAAIC,CAAC;EAAA,OAC1BA,CAAC,CAACC,WAAW,QACbC,WAAG,0HACmB,IAAAC,YAAG,EAACH,CAAC,CAACI,KAAK,CAACC,2BAA2B,CAAC,EACnD,IAAAF,YAAG,EAACH,CAAC,CAACI,KAAK,CAACE,6BAA6B,CAAC,CACpD;AAAA;AAGH,IAAMC,cAAc,GAAG,IAAAC,kBAAM,EAC3B,GAAG,EACH,IAAAC,uBAAgB,EAAC,aAAa,EAAE,IAAI,CAAC,CACtC,2pBACGC,wBAAgB,EAID,UAACV,CAAC;EAAA,OAAKA,CAAC,CAACI,KAAK,CAACO,YAAY;AAAA,GAOnC,UAACX,CAAC;EAAA,OAAK,IAAAG,YAAG,EAACH,CAAC,CAACI,KAAK,CAACQ,uBAAuB,CAAC;AAAA,GAI5B,UAACZ,CAAC;EAAA,OAAK,IAAAG,YAAG,EAACH,CAAC,CAACI,KAAK,CAACS,0BAA0B,CAAC;AAAA,GAK7D,UAACb,CAAC;EAAA,OAAKA,CAAC,CAACI,KAAK,CAACU,sBAAsB;AAAA,GACjC,UAACd,CAAC;EAAA,OAAKA,CAAC,CAACI,KAAK,CAACU,sBAAsB;AAAA,GACnC,UAACd,CAAC;EAAA,OAAKA,CAAC,CAACI,KAAK,CAACW,mBAAmB;AAAA,GAG/CC,QAAC,CAACC,GAAG,CAACC,EAAE,EAKE,UAAClB,CAAC;EAAA,OAAKA,CAAC,CAACI,KAAK,CAACe,wBAAwB;AAAA,GACnC,UAACnB,CAAC;EAAA,OAAKA,CAAC,CAACI,KAAK,CAACe,wBAAwB;AAAA,GAGrDpB,iBAAiB,EACjB,IAAAqB,wBAAgB,EAAC,kBAAkB,EAAE,OAAO,CAAC,CAChD;AAED,IAAMC,aAAa,GAAGb,kBAAM,CAACc,IAAI,uMAO7BN,QAAC,CAACC,GAAG,CAACC,EAAE,CAGX;AAED,IAAMK,KAAK,GAAGf,kBAAM,CAACc,IAAI,2MAMrBN,QAAC,CAACC,GAAG,CAACC,EAAE,CAGX;;AAED;AACA;AACA;AACA,IAAMM,cAAc,gBAAG,IAAAC,iBAAU,EAC/B,gBASEC,GAAG;EAAA,IAPDC,IAAI,QAAJA,IAAI;IAAA,wBACJ1B,WAAW;IAAXA,WAAW,iCAAG,KAAK;IACnB2B,EAAE,QAAFA,EAAE;IAAA,wBACFC,WAAW;IAAXA,YAAW,iCAAG,YAAM,CAAC,CAAC;IACtBC,QAAQ,QAARA,QAAQ;IACLC,IAAI;EAAA,oBAIT;IAAK,IAAI,EAAC;EAAU,gBAClB,gCAAC,cAAc;IACb,WAAW,EAAE9B,WAAY;IACzB,EAAE,EAAE2B,EAAG;IACP,WAAW,EAAE,qBAACI,CAAC,EAAK;MAClBH,YAAW,CAACG,CAAC,CAAC;MACdA,CAAC,CAACC,cAAc,EAAE;IACpB,CAAE;IACF,gBAAchC,WAAW,GAAG,MAAM,GAAGiC;EAAU,GAC3CH,IAAI;IACR,GAAG,EAAEL;EAAI,iBAET,gCAAC,aAAa,QAAEC,IAAI,CAAiB,EACpCG,QAAQ,iBAAI,gCAAC,KAAK,QAAEA,QAAQ,CAAS,CACvB,CACb;AAAA,CACP,CACF;AAEDN,cAAc,CAACW,WAAW,GAAG,gBAAgB;AAAC,eAE/BX,cAAc;AAAA"}
+{"version":3,"file":"index.js","names":["_react","require","_styled","_interopRequireDefault","_media","_styles","_theming","_utils","_react2","_interopRequireWildcard","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","_taggedTemplateLiteral","strings","raw","slice","freeze","defineProperties","value","currentPageStyles","p","currentPage","css","clr","theme","navigationItemColorBgActive","navigationItemColorTextActive","NavigationLink","styled","omitEmotionProps","resetFocusStyles","borderRadius","navigationItemColorText","navigationItemColorBgHover","navigationItemTabWidth","navigationTabHeight","m","min","md","navigationItemSideHeight","transitionStyles","IconContainer","span","Title","NavigationItem","forwardRef","_ref","ref","icon","_ref$currentPage","as","_ref$onMouseDown","onMouseDown","children","rest","createElement","role","e","preventDefault","undefined","displayName","_default","exports"],"sources":["../../../src/NavigationItem/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { m } from '@os-design/media';\nimport { resetFocusStyles, transitionStyles } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\nimport { LinkProps, ReactRouterLinkProps } from '../Link';\n\ntype JsxAProps = Omit<JSX.IntrinsicElements['a'], 'ref'>;\nexport interface NavigationItemProps\n  extends JsxAProps,\n    ReactRouterLinkProps,\n    Pick<LinkProps, 'as'> {\n  /**\n   * The icon of the item.\n   * @default undefined\n   */\n  icon: React.ReactElement;\n  /**\n   * Whether the item is the current page.\n   * @default false\n   */\n  currentPage?: boolean;\n}\n\nconst currentPageStyles = (p) =>\n  p.currentPage &&\n  css`\n    background-color: ${clr(p.theme.navigationItemColorBgActive)};\n    color: ${clr(p.theme.navigationItemColorTextActive)};\n  `;\n\ntype NavigationLinkProps = Pick<NavigationItemProps, 'currentPage'>;\nconst NavigationLink = styled(\n  'a',\n  omitEmotionProps('currentPage', 'as')\n)<NavigationLinkProps>`\n  ${resetFocusStyles};\n  text-decoration: none;\n  cursor: pointer;\n  overflow: hidden;\n  border-radius: ${(p) => p.theme.borderRadius}em;\n\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n\n  color: ${(p) => clr(p.theme.navigationItemColorText)};\n  @media (hover: hover) {\n    &:hover,\n    &:focus {\n      background-color: ${(p) => clr(p.theme.navigationItemColorBgHover)};\n    }\n  }\n\n  // Tab navigator\n  width: ${(p) => p.theme.navigationItemTabWidth}em;\n  min-width: ${(p) => p.theme.navigationItemTabWidth}em;\n  height: calc(${(p) => p.theme.navigationTabHeight}em - 1px);\n\n  // Side navigator\n  ${m.min.md} {\n    // Reset tab navigator styles\n    min-width: unset;\n\n    width: 100%;\n    height: ${(p) => p.theme.navigationItemSideHeight}em;\n    min-height: ${(p) => p.theme.navigationItemSideHeight}em;\n  }\n\n  ${currentPageStyles};\n  ${transitionStyles('background-color', 'color')};\n`;\n\nconst IconContainer = styled.span`\n  display: inherit;\n\n  // Tab navigator\n  font-size: 1.6em;\n\n  // Side navigator\n  ${m.min.md} {\n    font-size: 1.8em;\n  }\n`;\n\nconst Title = styled.span`\n  font-size: 0.75em;\n  font-weight: 500;\n  white-space: nowrap;\n\n  // Side navigator\n  ${m.min.md} {\n    margin-top: 0.3em;\n  }\n`;\n\n/**\n * The item of the navigation.\n */\nconst NavigationItem = forwardRef<HTMLAnchorElement, NavigationItemProps>(\n  (\n    {\n      icon,\n      currentPage = false,\n      as,\n      onMouseDown = () => {},\n      children,\n      ...rest\n    },\n    ref\n  ) => (\n    <div role='listitem'>\n      <NavigationLink\n        currentPage={currentPage}\n        as={as}\n        onMouseDown={(e) => {\n          onMouseDown(e);\n          e.preventDefault();\n        }}\n        aria-current={currentPage ? 'page' : undefined}\n        {...rest}\n        ref={ref}\n      >\n        <IconContainer>{icon}</IconContainer>\n        {children && <Title>{children}</Title>}\n      </NavigationLink>\n    </div>\n  )\n);\n\nNavigationItem.displayName = 'NavigationItem';\n\nexport default NavigationItem;\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AACA,IAAAK,QAAA,GAAAL,OAAA;AACA,IAAAM,MAAA,GAAAN,OAAA;AACA,IAAAO,OAAA,GAAAC,uBAAA,CAAAR,OAAA;AAA0C,IAAAS,SAAA;AAAA,IAAAC,eAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA;AAAA,SAAAC,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,yBAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAP,wBAAAW,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,aAAAE,OAAA,CAAAF,GAAA,yBAAAA,GAAA,uCAAAA,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,cAAAN,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AAAA,SAAAvB,uBAAAiB,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,gBAAAA,GAAA;AAAA,SAAAiB,SAAA,IAAAA,QAAA,GAAAT,MAAA,CAAAU,MAAA,GAAAV,MAAA,CAAAU,MAAA,CAAAC,IAAA,eAAAC,MAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAF,CAAA,UAAAG,MAAA,GAAAF,SAAA,CAAAD,CAAA,YAAAV,GAAA,IAAAa,MAAA,QAAAhB,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAU,MAAA,EAAAb,GAAA,KAAAS,MAAA,CAAAT,GAAA,IAAAa,MAAA,CAAAb,GAAA,gBAAAS,MAAA,YAAAH,QAAA,CAAAQ,KAAA,OAAAH,SAAA;AAAA,SAAAI,yBAAAF,MAAA,EAAAG,QAAA,QAAAH,MAAA,yBAAAJ,MAAA,GAAAQ,6BAAA,CAAAJ,MAAA,EAAAG,QAAA,OAAAhB,GAAA,EAAAU,CAAA,MAAAb,MAAA,CAAAqB,qBAAA,QAAAC,gBAAA,GAAAtB,MAAA,CAAAqB,qBAAA,CAAAL,MAAA,QAAAH,CAAA,MAAAA,CAAA,GAAAS,gBAAA,CAAAP,MAAA,EAAAF,CAAA,MAAAV,GAAA,GAAAmB,gBAAA,CAAAT,CAAA,OAAAM,QAAA,CAAAI,OAAA,CAAApB,GAAA,uBAAAH,MAAA,CAAAI,SAAA,CAAAoB,oBAAA,CAAAlB,IAAA,CAAAU,MAAA,EAAAb,GAAA,aAAAS,MAAA,CAAAT,GAAA,IAAAa,MAAA,CAAAb,GAAA,cAAAS,MAAA;AAAA,SAAAQ,8BAAAJ,MAAA,EAAAG,QAAA,QAAAH,MAAA,yBAAAJ,MAAA,WAAAa,UAAA,GAAAzB,MAAA,CAAA0B,IAAA,CAAAV,MAAA,OAAAb,GAAA,EAAAU,CAAA,OAAAA,CAAA,MAAAA,CAAA,GAAAY,UAAA,CAAAV,MAAA,EAAAF,CAAA,MAAAV,GAAA,GAAAsB,UAAA,CAAAZ,CAAA,OAAAM,QAAA,CAAAI,OAAA,CAAApB,GAAA,kBAAAS,MAAA,CAAAT,GAAA,IAAAa,MAAA,CAAAb,GAAA,YAAAS,MAAA;AAAA,SAAAe,uBAAAC,OAAA,EAAAC,GAAA,SAAAA,GAAA,IAAAA,GAAA,GAAAD,OAAA,CAAAE,KAAA,cAAA9B,MAAA,CAAA+B,MAAA,CAAA/B,MAAA,CAAAgC,gBAAA,CAAAJ,OAAA,IAAAC,GAAA,IAAAI,KAAA,EAAAjC,MAAA,CAAA+B,MAAA,CAAAF,GAAA;AAoB1C,IAAMK,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAIC,CAAC;EAAA,OAC1BA,CAAC,CAACC,WAAW,QACbC,UAAG,EAAAtD,eAAA,KAAAA,eAAA,GAAA4C,sBAAA,4DACmB,IAAAW,YAAG,EAACH,CAAC,CAACI,KAAK,CAACC,2BAA2B,CAAC,EACnD,IAAAF,YAAG,EAACH,CAAC,CAACI,KAAK,CAACE,6BAA6B,CAAC,CACpD;AAAA;AAGH,IAAMC,cAAc,GAAG,IAAAC,kBAAM,EAC3B,GAAG,EACH,IAAAC,uBAAgB,EAAC,aAAa,EAAE,IAAI,CACtC,CAAC,CAAA5D,gBAAA,KAAAA,gBAAA,GAAA2C,sBAAA,4lBACGkB,wBAAgB,EAID,UAACV,CAAC;EAAA,OAAKA,CAAC,CAACI,KAAK,CAACO,YAAY;AAAA,GAOnC,UAACX,CAAC;EAAA,OAAK,IAAAG,YAAG,EAACH,CAAC,CAACI,KAAK,CAACQ,uBAAuB,CAAC;AAAA,GAI5B,UAACZ,CAAC;EAAA,OAAK,IAAAG,YAAG,EAACH,CAAC,CAACI,KAAK,CAACS,0BAA0B,CAAC;AAAA,GAK7D,UAACb,CAAC;EAAA,OAAKA,CAAC,CAACI,KAAK,CAACU,sBAAsB;AAAA,GACjC,UAACd,CAAC;EAAA,OAAKA,CAAC,CAACI,KAAK,CAACU,sBAAsB;AAAA,GACnC,UAACd,CAAC;EAAA,OAAKA,CAAC,CAACI,KAAK,CAACW,mBAAmB;AAAA,GAG/CC,QAAC,CAACC,GAAG,CAACC,EAAE,EAKE,UAAClB,CAAC;EAAA,OAAKA,CAAC,CAACI,KAAK,CAACe,wBAAwB;AAAA,GACnC,UAACnB,CAAC;EAAA,OAAKA,CAAC,CAACI,KAAK,CAACe,wBAAwB;AAAA,GAGrDpB,iBAAiB,EACjB,IAAAqB,wBAAgB,EAAC,kBAAkB,EAAE,OAAO,CAAC,CAChD;AAED,IAAMC,aAAa,GAAGb,kBAAM,CAACc,IAAI,CAAAxE,gBAAA,KAAAA,gBAAA,GAAA0C,sBAAA,wIAO7BwB,QAAC,CAACC,GAAG,CAACC,EAAE,CAGX;AAED,IAAMK,KAAK,GAAGf,kBAAM,CAACc,IAAI,CAAAvE,gBAAA,KAAAA,gBAAA,GAAAyC,sBAAA,4IAMrBwB,QAAC,CAACC,GAAG,CAACC,EAAE,CAGX;;AAED;AACA;AACA;AACA,IAAMM,cAAc,gBAAG,IAAAC,kBAAU,EAC/B,UAAAC,IAAA,EASEC,GAAG;EAAA,IAPDC,IAAI,GAAAF,IAAA,CAAJE,IAAI;IAAAC,gBAAA,GAAAH,IAAA,CACJzB,WAAW;IAAXA,WAAW,GAAA4B,gBAAA,cAAG,KAAK,GAAAA,gBAAA;IACnBC,EAAE,GAAAJ,IAAA,CAAFI,EAAE;IAAAC,gBAAA,GAAAL,IAAA,CACFM,WAAW;IAAXA,YAAW,GAAAD,gBAAA,cAAG,YAAM,CAAC,CAAC,GAAAA,gBAAA;IACtBE,QAAQ,GAAAP,IAAA,CAARO,QAAQ;IACLC,IAAI,GAAAnD,wBAAA,CAAA2C,IAAA,EAAA/E,SAAA;EAAA,oBAITF,OAAA,YAAA0F,aAAA;IAAKC,IAAI,EAAC;EAAU,gBAClB3F,OAAA,YAAA0F,aAAA,CAAC5B,cAAc,EAAAjC,QAAA;IACb2B,WAAW,EAAEA,WAAY;IACzB6B,EAAE,EAAEA,EAAG;IACPE,WAAW,EAAE,SAAAA,YAACK,CAAC,EAAK;MAClBL,YAAW,CAACK,CAAC,CAAC;MACdA,CAAC,CAACC,cAAc,CAAC,CAAC;IACpB,CAAE;IACF,gBAAcrC,WAAW,GAAG,MAAM,GAAGsC;EAAU,GAC3CL,IAAI;IACRP,GAAG,EAAEA;EAAI,iBAETlF,OAAA,YAAA0F,aAAA,CAACd,aAAa,QAAEO,IAAoB,CAAC,EACpCK,QAAQ,iBAAIxF,OAAA,YAAA0F,aAAA,CAACZ,KAAK,QAAEU,QAAgB,CACvB,CACb,CAAC;AAAA,CAEV,CAAC;AAEDT,cAAc,CAACgB,WAAW,GAAG,gBAAgB;AAAC,IAAAC,QAAA,GAE/BjB,cAAc;AAAAkB,OAAA,cAAAD,QAAA"}