@os-design/core 1.0.156 → 1.0.157

package/dist/cjs/NavigationItem/index.js

@@ -1,48 +1,29 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 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 _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 _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));
 };
-
 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;
 }, function (p) {
@@ -60,25 +41,21 @@ var NavigationLink = (0, _styled["default"])('a', (0, _utils.omitEmotionProps)('
 }, function (p) {
   return p.theme.navigationItemSideHeight;
 }, currentPageStyles, (0, _styles.transitionStyles)('background-color', 'color'));
-
 var IconContainer = _styled["default"].span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: inherit;\n\n  // Tab navigator\n  font-size: 1.6em;\n\n  // Side navigator\n  ", " {\n    font-size: 1.8em;\n  }\n"])), _media.m.min.md);
-
 var Title = _styled["default"].span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-size: 0.75em;\n  font-weight: 500;\n  white-space: nowrap;\n\n  // Side navigator\n  ", " {\n    margin-top: 0.3em;\n  }\n"])), _media.m.min.md);
+
 /**
  * The item of the navigation.
  */
-
-
 var NavigationItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var icon = _ref.icon,
-      _ref$currentPage = _ref.currentPage,
-      currentPage = _ref$currentPage === void 0 ? false : _ref$currentPage,
-      as = _ref.as,
-      _ref$onMouseDown = _ref.onMouseDown,
-      _onMouseDown = _ref$onMouseDown === void 0 ? function () {} : _ref$onMouseDown,
-      children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    _ref$currentPage = _ref.currentPage,
+    currentPage = _ref$currentPage === void 0 ? false : _ref$currentPage,
+    as = _ref.as,
+    _ref$onMouseDown = _ref.onMouseDown,
+    _onMouseDown = _ref$onMouseDown === void 0 ? function () {} : _ref$onMouseDown,
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement("div", {
     role: "listitem"
   }, /*#__PURE__*/_react["default"].createElement(NavigationLink, _extends({
@@ -86,7 +63,6 @@ var NavigationItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     as: as,
     onMouseDown: function onMouseDown(e) {
       _onMouseDown(e);
-
       e.preventDefault();
     },
     "aria-current": currentPage ? 'page' : undefined

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;;;;;;;;;;;;;;;;;;;;AAoBA,IAAMA,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,CAAD;EAAA,OACxBA,CAAC,CAACC,WAAF,QACAC,WADA,0HAEsB,IAAAC,YAAA,EAAIH,CAAC,CAACI,KAAF,CAAQC,2BAAZ,CAFtB,EAGW,IAAAF,YAAA,EAAIH,CAAC,CAACI,KAAF,CAAQE,6BAAZ,CAHX,CADwB;AAAA,CAA1B;;AAQA,IAAMC,cAAc,GAAG,IAAAC,kBAAA,EACrB,GADqB,EAErB,IAAAC,uBAAA,EAAiB,aAAjB,EAAgC,IAAhC,CAFqB,CAAH,2pBAIhBC,wBAJgB,EAQD,UAACV,CAAD;EAAA,OAAOA,CAAC,CAACI,KAAF,CAAQO,YAAf;AAAA,CARC,EAeT,UAACX,CAAD;EAAA,OAAO,IAAAG,YAAA,EAAIH,CAAC,CAACI,KAAF,CAAQQ,uBAAZ,CAAP;AAAA,CAfS,EAmBM,UAACZ,CAAD;EAAA,OAAO,IAAAG,YAAA,EAAIH,CAAC,CAACI,KAAF,CAAQS,0BAAZ,CAAP;AAAA,CAnBN,EAwBT,UAACb,CAAD;EAAA,OAAOA,CAAC,CAACI,KAAF,CAAQU,sBAAf;AAAA,CAxBS,EAyBL,UAACd,CAAD;EAAA,OAAOA,CAAC,CAACI,KAAF,CAAQU,sBAAf;AAAA,CAzBK,EA0BH,UAACd,CAAD;EAAA,OAAOA,CAAC,CAACI,KAAF,CAAQW,mBAAf;AAAA,CA1BG,EA6BhBC,QAAA,CAAEC,GAAF,CAAMC,EA7BU,EAkCN,UAAClB,CAAD;EAAA,OAAOA,CAAC,CAACI,KAAF,CAAQe,wBAAf;AAAA,CAlCM,EAmCF,UAACnB,CAAD;EAAA,OAAOA,CAAC,CAACI,KAAF,CAAQe,wBAAf;AAAA,CAnCE,EAsChBpB,iBAtCgB,EAuChB,IAAAqB,wBAAA,EAAiB,kBAAjB,EAAqC,OAArC,CAvCgB,CAApB;;AA0CA,IAAMC,aAAa,GAAGb,kBAAA,CAAOc,IAAV,uMAOfN,QAAA,CAAEC,GAAF,CAAMC,EAPS,CAAnB;;AAYA,IAAMK,KAAK,GAAGf,kBAAA,CAAOc,IAAV,2MAMPN,QAAA,CAAEC,GAAF,CAAMC,EANC,CAAX;AAWA;AACA;AACA;;;AACA,IAAMM,cAAc,gBAAG,IAAAC,iBAAA,EACrB,gBASEC,GATF;EAAA,IAEIC,IAFJ,QAEIA,IAFJ;EAAA,4BAGI1B,WAHJ;EAAA,IAGIA,WAHJ,iCAGkB,KAHlB;EAAA,IAII2B,EAJJ,QAIIA,EAJJ;EAAA,4BAKIC,WALJ;EAAA,IAKIA,YALJ,iCAKkB,YAAM,CAAE,CAL1B;EAAA,IAMIC,QANJ,QAMIA,QANJ;EAAA,IAOOC,IAPP;;EAAA,oBAWE;IAAK,IAAI,EAAC;EAAV,gBACE,gCAAC,cAAD;IACE,WAAW,EAAE9B,WADf;IAEE,EAAE,EAAE2B,EAFN;IAGE,WAAW,EAAE,qBAACI,CAAD,EAAO;MAClBH,YAAW,CAACG,CAAD,CAAX;;MACAA,CAAC,CAACC,cAAF;IACD,CANH;IAOE,gBAAchC,WAAW,GAAG,MAAH,GAAYiC;EAPvC,GAQMH,IARN;IASE,GAAG,EAAEL;EATP,iBAWE,gCAAC,aAAD,QAAgBC,IAAhB,CAXF,EAYGG,QAAQ,iBAAI,gCAAC,KAAD,QAAQA,QAAR,CAZf,CADF,CAXF;AAAA,CADqB,CAAvB;AA+BAN,cAAc,CAACW,WAAf,GAA6B,gBAA7B;eAEeX,c"}
+{"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"}

package/dist/cjs/PageContent/index.js

@@ -1,75 +1,51 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _styles = require("@os-design/styles");
-
 var _utils = require("@os-design/utils");
-
 var _react2 = require("@emotion/react");
-
 var _media = require("@os-design/media");
-
 var _LayoutContext = _interopRequireDefault(require("../Layout/LayoutContext"));
-
 var _excluded = ["hasList", "children"];
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-
 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 hasNavigationStyles = function hasNavigationStyles(p) {
   return p.hasNavigation && (0, _react2.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    ", "\n    ", " {\n      margin-bottom: 0;\n      margin-left: ", "em;\n    }\n  "])), !p.hasList && (0, _react2.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      margin-bottom: calc(\n        ", "em + env(safe-area-inset-bottom)\n      );\n    "])), p.theme.navigationTabHeight), _media.m.min.md, p.theme.navigationSideWidth);
 };
-
 var hasPageHeaderStyles = function hasPageHeaderStyles(p) {
   return p.hasPageHeader && !p.hasList && (0, _react2.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    margin-top: ", "em;\n    ", " {\n      margin-top: ", "em;\n    }\n  "])), p.theme.pageHeaderHeight[0], _media.m.min.md, p.theme.pageHeaderHeight[1]);
 };
-
 var notHasListStyles = function notHasListStyles(p) {
   return !p.hasList && (0, _react2.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    padding-top: ", "em;\n    padding-bottom: ", "em;\n    ", ";\n  "])), p.theme.pageContentPaddingVertical, p.theme.pageContentPaddingVertical, (0, _styles.horizontalPaddingStyles)()(p));
 };
-
 var notHasNavigationStyles = function notHasNavigationStyles(p) {
   return !p.hasNavigation && !p.hasList && (0, _react2.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    margin-bottom: env(safe-area-inset-bottom);\n  "])));
 };
-
 var Container = (0, _styled["default"])('main', (0, _utils.omitEmotionProps)('hasNavigation', 'hasPageHeader', 'hasList'))(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"])), hasNavigationStyles, hasPageHeaderStyles, notHasListStyles, notHasNavigationStyles);
+
 /**
  * The wrapper that adds padding to the page content.
  */
-
 var PageContent = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _ref$hasList = _ref.hasList,
-      hasList = _ref$hasList === void 0 ? false : _ref$hasList,
-      children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    hasList = _ref$hasList === void 0 ? false : _ref$hasList,
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _useContext = (0, _react.useContext)(_LayoutContext["default"]),
-      hasNavigation = _useContext.hasNavigation,
-      hasPageHeader = _useContext.hasPageHeader;
-
+    hasNavigation = _useContext.hasNavigation,
+    hasPageHeader = _useContext.hasPageHeader;
   return /*#__PURE__*/_react["default"].createElement(Container, _extends({
     hasNavigation: hasNavigation,
     hasPageHeader: hasPageHeader,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["hasNavigationStyles","p","hasNavigation","css","hasList","theme","navigationTabHeight","m","min","md","navigationSideWidth","hasPageHeaderStyles","hasPageHeader","pageHeaderHeight","notHasListStyles","pageContentPaddingVertical","horizontalPaddingStyles","notHasNavigationStyles","Container","styled","omitEmotionProps","PageContent","forwardRef","ref","children","rest","useContext","LayoutContext","displayName"],"sources":["../../../src/PageContent/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef, useContext } from 'react';\nimport { horizontalPaddingStyles } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { css } from '@emotion/react';\nimport { m } from '@os-design/media';\nimport LayoutContext from '../Layout/LayoutContext';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface PageContentProps extends JsxDivProps {\n  /**\n   * Whether there is the list in the page content.\n   * @default false\n   */\n  hasList?: boolean;\n}\n\nconst hasNavigationStyles = (p) =>\n  p.hasNavigation &&\n  css`\n    ${!p.hasList &&\n    css`\n      margin-bottom: calc(\n        ${p.theme.navigationTabHeight}em + env(safe-area-inset-bottom)\n      );\n    `}\n    ${m.min.md} {\n      margin-bottom: 0;\n      margin-left: ${p.theme.navigationSideWidth}em;\n    }\n  `;\n\nconst hasPageHeaderStyles = (p) =>\n  p.hasPageHeader &&\n  !p.hasList &&\n  css`\n    margin-top: ${p.theme.pageHeaderHeight[0]}em;\n    ${m.min.md} {\n      margin-top: ${p.theme.pageHeaderHeight[1]}em;\n    }\n  `;\n\nconst notHasListStyles = (p) =>\n  !p.hasList &&\n  css`\n    padding-top: ${p.theme.pageContentPaddingVertical}em;\n    padding-bottom: ${p.theme.pageContentPaddingVertical}em;\n    ${horizontalPaddingStyles()(p)};\n  `;\n\nconst notHasNavigationStyles = (p) =>\n  !p.hasNavigation &&\n  !p.hasList &&\n  css`\n    margin-bottom: env(safe-area-inset-bottom);\n  `;\n\ninterface ContainerProps {\n  hasNavigation?: boolean;\n  hasPageHeader?: boolean;\n  hasList?: boolean;\n}\nconst Container = styled(\n  'main',\n  omitEmotionProps('hasNavigation', 'hasPageHeader', 'hasList')\n)<ContainerProps>`\n  ${hasNavigationStyles};\n  ${hasPageHeaderStyles};\n  ${notHasListStyles};\n  ${notHasNavigationStyles};\n`;\n\n/**\n * The wrapper that adds padding to the page content.\n */\nconst PageContent = forwardRef<HTMLElement, PageContentProps>(\n  ({ hasList = false, children, ...rest }, ref) => {\n    const { hasNavigation, hasPageHeader } = useContext(LayoutContext);\n\n    return (\n      <Container\n        hasNavigation={hasNavigation}\n        hasPageHeader={hasPageHeader}\n        hasList={hasList}\n        {...rest}\n        ref={ref}\n      >\n        {children}\n      </Container>\n    );\n  }\n);\n\nPageContent.displayName = 'PageContent';\n\nexport default PageContent;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAWA,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACC,CAAD;EAAA,OAC1BA,CAAC,CAACC,aAAF,QACAC,WADA,6JAEI,CAACF,CAAC,CAACG,OAAH,QACFD,WADE,mKAGIF,CAAC,CAACI,KAAF,CAAQC,mBAHZ,CAFJ,EAQIC,QAAA,CAAEC,GAAF,CAAMC,EARV,EAUmBR,CAAC,CAACI,KAAF,CAAQK,mBAV3B,CAD0B;AAAA,CAA5B;;AAeA,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACV,CAAD;EAAA,OAC1BA,CAAC,CAACW,aAAF,IACA,CAACX,CAAC,CAACG,OADH,QAEAD,WAFA,oJAGgBF,CAAC,CAACI,KAAF,CAAQQ,gBAAR,CAAyB,CAAzB,CAHhB,EAIIN,QAAA,CAAEC,GAAF,CAAMC,EAJV,EAKkBR,CAAC,CAACI,KAAF,CAAQQ,gBAAR,CAAyB,CAAzB,CALlB,CAD0B;AAAA,CAA5B;;AAUA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACb,CAAD;EAAA,OACvB,CAACA,CAAC,CAACG,OAAH,QACAD,WADA,+IAEiBF,CAAC,CAACI,KAAF,CAAQU,0BAFzB,EAGoBd,CAAC,CAACI,KAAF,CAAQU,0BAH5B,EAII,IAAAC,+BAAA,IAA0Bf,CAA1B,CAJJ,CADuB;AAAA,CAAzB;;AAQA,IAAMgB,sBAAsB,GAAG,SAAzBA,sBAAyB,CAAChB,CAAD;EAAA,OAC7B,CAACA,CAAC,CAACC,aAAH,IACA,CAACD,CAAC,CAACG,OADH,QAEAD,WAFA,6HAD6B;AAAA,CAA/B;;AAYA,IAAMe,SAAS,GAAG,IAAAC,kBAAA,EAChB,MADgB,EAEhB,IAAAC,uBAAA,EAAiB,eAAjB,EAAkC,eAAlC,EAAmD,SAAnD,CAFgB,CAAH,8GAIXpB,mBAJW,EAKXW,mBALW,EAMXG,gBANW,EAOXG,sBAPW,CAAf;AAUA;AACA;AACA;;AACA,IAAMI,WAAW,gBAAG,IAAAC,iBAAA,EAClB,gBAAyCC,GAAzC,EAAiD;EAAA,wBAA9CnB,OAA8C;EAAA,IAA9CA,OAA8C,6BAApC,KAAoC;EAAA,IAA7BoB,QAA6B,QAA7BA,QAA6B;EAAA,IAAhBC,IAAgB;;EAC/C,kBAAyC,IAAAC,iBAAA,EAAWC,yBAAX,CAAzC;EAAA,IAAQzB,aAAR,eAAQA,aAAR;EAAA,IAAuBU,aAAvB,eAAuBA,aAAvB;;EAEA,oBACE,gCAAC,SAAD;IACE,aAAa,EAAEV,aADjB;IAEE,aAAa,EAAEU,aAFjB;IAGE,OAAO,EAAER;EAHX,GAIMqB,IAJN;IAKE,GAAG,EAAEF;EALP,IAOGC,QAPH,CADF;AAWD,CAfiB,CAApB;AAkBAH,WAAW,CAACO,WAAZ,GAA0B,aAA1B;eAEeP,W"}
+{"version":3,"file":"index.js","names":["hasNavigationStyles","p","hasNavigation","css","hasList","theme","navigationTabHeight","m","min","md","navigationSideWidth","hasPageHeaderStyles","hasPageHeader","pageHeaderHeight","notHasListStyles","pageContentPaddingVertical","horizontalPaddingStyles","notHasNavigationStyles","Container","styled","omitEmotionProps","PageContent","forwardRef","ref","children","rest","useContext","LayoutContext","displayName"],"sources":["../../../src/PageContent/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef, useContext } from 'react';\nimport { horizontalPaddingStyles } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { css } from '@emotion/react';\nimport { m } from '@os-design/media';\nimport LayoutContext from '../Layout/LayoutContext';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface PageContentProps extends JsxDivProps {\n  /**\n   * Whether there is the list in the page content.\n   * @default false\n   */\n  hasList?: boolean;\n}\n\nconst hasNavigationStyles = (p) =>\n  p.hasNavigation &&\n  css`\n    ${!p.hasList &&\n    css`\n      margin-bottom: calc(\n        ${p.theme.navigationTabHeight}em + env(safe-area-inset-bottom)\n      );\n    `}\n    ${m.min.md} {\n      margin-bottom: 0;\n      margin-left: ${p.theme.navigationSideWidth}em;\n    }\n  `;\n\nconst hasPageHeaderStyles = (p) =>\n  p.hasPageHeader &&\n  !p.hasList &&\n  css`\n    margin-top: ${p.theme.pageHeaderHeight[0]}em;\n    ${m.min.md} {\n      margin-top: ${p.theme.pageHeaderHeight[1]}em;\n    }\n  `;\n\nconst notHasListStyles = (p) =>\n  !p.hasList &&\n  css`\n    padding-top: ${p.theme.pageContentPaddingVertical}em;\n    padding-bottom: ${p.theme.pageContentPaddingVertical}em;\n    ${horizontalPaddingStyles()(p)};\n  `;\n\nconst notHasNavigationStyles = (p) =>\n  !p.hasNavigation &&\n  !p.hasList &&\n  css`\n    margin-bottom: env(safe-area-inset-bottom);\n  `;\n\ninterface ContainerProps {\n  hasNavigation?: boolean;\n  hasPageHeader?: boolean;\n  hasList?: boolean;\n}\nconst Container = styled(\n  'main',\n  omitEmotionProps('hasNavigation', 'hasPageHeader', 'hasList')\n)<ContainerProps>`\n  ${hasNavigationStyles};\n  ${hasPageHeaderStyles};\n  ${notHasListStyles};\n  ${notHasNavigationStyles};\n`;\n\n/**\n * The wrapper that adds padding to the page content.\n */\nconst PageContent = forwardRef<HTMLElement, PageContentProps>(\n  ({ hasList = false, children, ...rest }, ref) => {\n    const { hasNavigation, hasPageHeader } = useContext(LayoutContext);\n\n    return (\n      <Container\n        hasNavigation={hasNavigation}\n        hasPageHeader={hasPageHeader}\n        hasList={hasList}\n        {...rest}\n        ref={ref}\n      >\n        {children}\n      </Container>\n    );\n  }\n);\n\nPageContent.displayName = 'PageContent';\n\nexport default PageContent;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAAoD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWpD,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAmB,CAAIC,CAAC;EAAA,OAC5BA,CAAC,CAACC,aAAa,QACfC,WAAG,6JACC,CAACF,CAAC,CAACG,OAAO,QACZD,WAAG,mKAEGF,CAAC,CAACI,KAAK,CAACC,mBAAmB,CAEhC,EACCC,QAAC,CAACC,GAAG,CAACC,EAAE,EAEOR,CAAC,CAACI,KAAK,CAACK,mBAAmB,CAE7C;AAAA;AAEH,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAmB,CAAIV,CAAC;EAAA,OAC5BA,CAAC,CAACW,aAAa,IACf,CAACX,CAAC,CAACG,OAAO,QACVD,WAAG,oJACaF,CAAC,CAACI,KAAK,CAACQ,gBAAgB,CAAC,CAAC,CAAC,EACvCN,QAAC,CAACC,GAAG,CAACC,EAAE,EACMR,CAAC,CAACI,KAAK,CAACQ,gBAAgB,CAAC,CAAC,CAAC,CAE5C;AAAA;AAEH,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB,CAAIb,CAAC;EAAA,OACzB,CAACA,CAAC,CAACG,OAAO,QACVD,WAAG,+IACcF,CAAC,CAACI,KAAK,CAACU,0BAA0B,EAC/Bd,CAAC,CAACI,KAAK,CAACU,0BAA0B,EAClD,IAAAC,+BAAuB,GAAE,CAACf,CAAC,CAAC,CAC/B;AAAA;AAEH,IAAMgB,sBAAsB,GAAG,SAAzBA,sBAAsB,CAAIhB,CAAC;EAAA,OAC/B,CAACA,CAAC,CAACC,aAAa,IAChB,CAACD,CAAC,CAACG,OAAO,QACVD,WAAG,6HAEF;AAAA;AAOH,IAAMe,SAAS,GAAG,IAAAC,kBAAM,EACtB,MAAM,EACN,IAAAC,uBAAgB,EAAC,eAAe,EAAE,eAAe,EAAE,SAAS,CAAC,CAC9D,8GACGpB,mBAAmB,EACnBW,mBAAmB,EACnBG,gBAAgB,EAChBG,sBAAsB,CACzB;;AAED;AACA;AACA;AACA,IAAMI,WAAW,gBAAG,IAAAC,iBAAU,EAC5B,gBAAyCC,GAAG,EAAK;EAAA,wBAA9CnB,OAAO;IAAPA,OAAO,6BAAG,KAAK;IAAEoB,QAAQ,QAARA,QAAQ;IAAKC,IAAI;EACnC,kBAAyC,IAAAC,iBAAU,EAACC,yBAAa,CAAC;IAA1DzB,aAAa,eAAbA,aAAa;IAAEU,aAAa,eAAbA,aAAa;EAEpC,oBACE,gCAAC,SAAS;IACR,aAAa,EAAEV,aAAc;IAC7B,aAAa,EAAEU,aAAc;IAC7B,OAAO,EAAER;EAAQ,GACbqB,IAAI;IACR,GAAG,EAAEF;EAAI,IAERC,QAAQ,CACC;AAEhB,CAAC,CACF;AAEDH,WAAW,CAACO,WAAW,GAAG,aAAa;AAAC,eAEzBP,WAAW;AAAA"}

package/dist/cjs/PageHeader/index.js

@@ -1,69 +1,44 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.PageHeaderContainer = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _styles = require("@os-design/styles");
-
 var _utils = require("@os-design/utils");
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _theming = require("@os-design/theming");
-
 var _media = require("@os-design/media");
-
 var _icons = require("@os-design/icons");
-
 var _react2 = require("@emotion/react");
-
 var _Button = _interopRequireDefault(require("../Button"));
-
 var _LayoutContext = _interopRequireDefault(require("../Layout/LayoutContext"));
-
 var _defaultLocale = _interopRequireDefault(require("./utils/defaultLocale"));
-
 var _excluded = ["title", "subtitle", "left", "leftIsGhostButton", "right", "rightIsGhostButton", "onBack", "locale"];
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 var getReducedPadding = function getReducedPadding(p, isMinSm) {
   var i = isMinSm ? 1 : 0;
   var padding = p.theme.horizontalPadding[i] - p.theme.buttonPaddingHorizontal;
   if (padding < 0) padding = 0;
   return padding;
 };
-
 var horizontalPaddingStyles = function horizontalPaddingStyles(p) {
   var reducedPadding = getReducedPadding(p, false);
   var reducedPaddingSm = getReducedPadding(p, true);
   return (0, _react2.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    padding-left: ", "em;\n    padding-right: ", "em;\n\n    ", " {\n      padding-left: ", "em;\n      padding-right: ", "em;\n    }\n  "])), p.leftIsGhostButton ? reducedPadding : p.theme.horizontalPadding[0], p.rightIsGhostButton ? reducedPadding : p.theme.horizontalPadding[0], _media.m.min.sm, p.leftIsGhostButton ? reducedPaddingSm : p.theme.horizontalPadding[1], p.rightIsGhostButton ? reducedPaddingSm : p.theme.horizontalPadding[1]);
 };
-
 var hasNavigationIndentStyles = function hasNavigationIndentStyles(p) {
   return p.hasNavigationIndent && (0, _react2.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    ", " {\n      left: ", "em;\n    }\n  "])), _media.m.min.md, p.theme.navigationSideWidth);
 };
-
 var PageHeaderContainer = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('leftIsGhostButton', 'rightIsGhostButton', 'hasNavigationIndent'))(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n\n  height: ", "em;\n  ", " {\n    height: ", "em;\n  }\n\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  z-index: 101;\n\n  background-color: ", ";\n  color: ", ";\n  border-bottom: 1px solid ", ";\n\n  ", ";\n  ", ";\n"])), function (p) {
   return p.theme.pageHeaderHeight[0];
 }, _media.m.min.md, function (p) {
@@ -77,50 +52,42 @@ var PageHeaderContainer = (0, _styled["default"])('div', (0, _utils.omitEmotionP
 }, horizontalPaddingStyles, hasNavigationIndentStyles);
 exports.PageHeaderContainer = PageHeaderContainer;
 var BackButton = (0, _styled["default"])(_Button["default"])(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin-right: 0.2em;\n  flex-shrink: 0;\n"])));
-
 var Content = _styled["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  overflow: hidden; // For ellipsis\n"])));
-
 var notHasSubtitleStyles = function notHasSubtitleStyles(p) {
   return !p.hasSubtitle && (0, _react2.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    font-size: ", "em;\n  "])), p.theme.sizes.large);
 };
-
 var Title = (0, _styled["default"])('h1', (0, _utils.omitEmotionProps)('hasSubtitle'))(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin: 0;\n  font-size: 1em;\n  font-weight: 500;\n  line-height: 1.2;\n  ", ";\n  ", ";\n"])), notHasSubtitleStyles, _styles.ellipsisStyles);
-
 var Subtitle = _styled["default"].div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  font-size: ", "em;\n  color: ", ";\n  line-height: 1;\n  margin-top: 0.2em;\n  ", ";\n"])), function (p) {
   return p.theme.sizes.small;
 }, function (p) {
   return (0, _theming.clr)(p.theme.pageHeaderSubtitleColorText);
 }, _styles.ellipsisStyles);
-
 var Addon = _styled["default"].div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
-
 var LeftAddon = (0, _styled["default"])(Addon)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  padding-right: ", "em;\n"])), function (p) {
   return p.theme.pageHeaderAddonPaddingHorizontal;
 });
 var RightAddon = (0, _styled["default"])(Addon)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  padding-left: ", "em;\n  margin-left: auto;\n\n  display: grid;\n  grid-auto-flow: column;\n  grid-column-gap: 0.4em;\n"])), function (p) {
   return p.theme.pageHeaderAddonPaddingHorizontal;
 });
+
 /**
  * The header of the page.
  */
-
 var PageHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var title = _ref.title,
-      subtitle = _ref.subtitle,
-      left = _ref.left,
-      _ref$leftIsGhostButto = _ref.leftIsGhostButton,
-      leftIsGhostButton = _ref$leftIsGhostButto === void 0 ? false : _ref$leftIsGhostButto,
-      right = _ref.right,
-      _ref$rightIsGhostButt = _ref.rightIsGhostButton,
-      rightIsGhostButton = _ref$rightIsGhostButt === void 0 ? false : _ref$rightIsGhostButt,
-      onBack = _ref.onBack,
-      _ref$locale = _ref.locale,
-      locale = _ref$locale === void 0 ? _defaultLocale["default"] : _ref$locale,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    subtitle = _ref.subtitle,
+    left = _ref.left,
+    _ref$leftIsGhostButto = _ref.leftIsGhostButton,
+    leftIsGhostButton = _ref$leftIsGhostButto === void 0 ? false : _ref$leftIsGhostButto,
+    right = _ref.right,
+    _ref$rightIsGhostButt = _ref.rightIsGhostButton,
+    rightIsGhostButton = _ref$rightIsGhostButt === void 0 ? false : _ref$rightIsGhostButt,
+    onBack = _ref.onBack,
+    _ref$locale = _ref.locale,
+    locale = _ref$locale === void 0 ? _defaultLocale["default"] : _ref$locale,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _useContext = (0, _react.useContext)(_LayoutContext["default"]),
-      hasNavigation = _useContext.hasNavigation;
-
+    hasNavigation = _useContext.hasNavigation;
   return /*#__PURE__*/_react["default"].createElement(_theming.ThemeOverrider, {
     overrides: function overrides(t) {
       return {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["getReducedPadding","p","isMinSm","i","padding","theme","horizontalPadding","buttonPaddingHorizontal","horizontalPaddingStyles","reducedPadding","reducedPaddingSm","css","leftIsGhostButton","rightIsGhostButton","m","min","sm","hasNavigationIndentStyles","hasNavigationIndent","md","navigationSideWidth","PageHeaderContainer","styled","omitEmotionProps","pageHeaderHeight","clr","pageHeaderColorBg","pageHeaderColorText","pageHeaderColorBorder","BackButton","Button","Content","div","notHasSubtitleStyles","hasSubtitle","sizes","large","Title","ellipsisStyles","Subtitle","small","pageHeaderSubtitleColorText","Addon","LeftAddon","pageHeaderAddonPaddingHorizontal","RightAddon","PageHeader","forwardRef","ref","title","subtitle","left","right","onBack","locale","defaultLocale","rest","useContext","LayoutContext","hasNavigation","t","pageHeaderButtonPaddingHorizontal","backLabel","displayName"],"sources":["../../../src/PageHeader/index.tsx"],"sourcesContent":["import React, { forwardRef, useContext } from 'react';\nimport { ellipsisStyles } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { m } from '@os-design/media';\nimport { Left } from '@os-design/icons';\nimport { css } from '@emotion/react';\nimport Button from '../Button';\nimport LayoutContext from '../Layout/LayoutContext';\nimport defaultLocale, { PageHeaderLocale } from './utils/defaultLocale';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface PageHeaderProps extends JsxDivProps {\n  /**\n   * The title of the page.\n   * @default undefined\n   */\n  title: string;\n  /**\n   * The subtitle of the page.\n   * @default undefined\n   */\n  subtitle?: string;\n  /**\n   * The component located on the left side.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * Reduces the left padding of the page header.\n   * @default false\n   */\n  leftIsGhostButton?: boolean;\n  /**\n   * The component located on the right side.\n   * @default undefined\n   */\n  right?: React.ReactNode;\n  /**\n   * Reduces the right padding of the page header.\n   * @default false\n   */\n  rightIsGhostButton?: boolean;\n  /**\n   * The back event handler. If passed, the page header has the back button.\n   * @default undefined\n   */\n  onBack?: () => void;\n  /**\n   * The locale.\n   * @default undefined\n   */\n  locale?: PageHeaderLocale;\n}\n\nconst getReducedPadding = (p, isMinSm: boolean) => {\n  const i = isMinSm ? 1 : 0;\n  let padding = p.theme.horizontalPadding[i] - p.theme.buttonPaddingHorizontal;\n  if (padding < 0) padding = 0;\n  return padding;\n};\n\nconst horizontalPaddingStyles = (p) => {\n  const reducedPadding = getReducedPadding(p, false);\n  const reducedPaddingSm = getReducedPadding(p, true);\n  return css`\n    padding-left: ${p.leftIsGhostButton\n      ? reducedPadding\n      : p.theme.horizontalPadding[0]}em;\n    padding-right: ${p.rightIsGhostButton\n      ? reducedPadding\n      : p.theme.horizontalPadding[0]}em;\n\n    ${m.min.sm} {\n      padding-left: ${p.leftIsGhostButton\n        ? reducedPaddingSm\n        : p.theme.horizontalPadding[1]}em;\n      padding-right: ${p.rightIsGhostButton\n        ? reducedPaddingSm\n        : p.theme.horizontalPadding[1]}em;\n    }\n  `;\n};\n\nconst hasNavigationIndentStyles = (p) =>\n  p.hasNavigationIndent &&\n  css`\n    ${m.min.md} {\n      left: ${p.theme.navigationSideWidth}em;\n    }\n  `;\n\ninterface ContainerProps {\n  leftIsGhostButton?: boolean;\n  rightIsGhostButton?: boolean;\n  hasNavigationIndent?: boolean;\n}\nexport const PageHeaderContainer = styled(\n  'div',\n  omitEmotionProps(\n    'leftIsGhostButton',\n    'rightIsGhostButton',\n    'hasNavigationIndent'\n  )\n)<ContainerProps>`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n\n  height: ${(p) => p.theme.pageHeaderHeight[0]}em;\n  ${m.min.md} {\n    height: ${(p) => p.theme.pageHeaderHeight[1]}em;\n  }\n\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  z-index: 101;\n\n  background-color: ${(p) => clr(p.theme.pageHeaderColorBg)};\n  color: ${(p) => clr(p.theme.pageHeaderColorText)};\n  border-bottom: 1px solid ${(p) => clr(p.theme.pageHeaderColorBorder)};\n\n  ${horizontalPaddingStyles};\n  ${hasNavigationIndentStyles};\n`;\n\nconst BackButton = styled(Button)`\n  margin-right: 0.2em;\n  flex-shrink: 0;\n`;\n\nconst Content = styled.div`\n  overflow: hidden; // For ellipsis\n`;\n\nconst notHasSubtitleStyles = (p) =>\n  !p.hasSubtitle &&\n  css`\n    font-size: ${p.theme.sizes.large}em;\n  `;\n\ninterface TitleProps {\n  hasSubtitle: boolean;\n}\nconst Title = styled('h1', omitEmotionProps('hasSubtitle'))<TitleProps>`\n  margin: 0;\n  font-size: 1em;\n  font-weight: 500;\n  line-height: 1.2;\n  ${notHasSubtitleStyles};\n  ${ellipsisStyles};\n`;\n\nconst Subtitle = styled.div`\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.pageHeaderSubtitleColorText)};\n  line-height: 1;\n  margin-top: 0.2em;\n  ${ellipsisStyles};\n`;\n\nconst Addon = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst LeftAddon = styled(Addon)`\n  padding-right: ${(p) => p.theme.pageHeaderAddonPaddingHorizontal}em;\n`;\n\nconst RightAddon = styled(Addon)`\n  padding-left: ${(p) => p.theme.pageHeaderAddonPaddingHorizontal}em;\n  margin-left: auto;\n\n  display: grid;\n  grid-auto-flow: column;\n  grid-column-gap: 0.4em;\n`;\n\n/**\n * The header of the page.\n */\nconst PageHeader = forwardRef<HTMLDivElement, PageHeaderProps>(\n  (\n    {\n      title,\n      subtitle,\n      left,\n      leftIsGhostButton = false,\n      right,\n      rightIsGhostButton = false,\n      onBack,\n      locale = defaultLocale,\n      ...rest\n    },\n    ref\n  ) => {\n    const { hasNavigation } = useContext(LayoutContext);\n\n    return (\n      <ThemeOverrider\n        overrides={(t) => ({\n          buttonPaddingHorizontal: t.pageHeaderButtonPaddingHorizontal,\n        })}\n      >\n        <PageHeaderContainer\n          leftIsGhostButton={leftIsGhostButton || !!onBack}\n          rightIsGhostButton={rightIsGhostButton}\n          hasNavigationIndent={hasNavigation}\n          {...rest}\n          ref={ref}\n        >\n          {onBack && (\n            <BackButton\n              type='ghost'\n              wide='never'\n              onClick={onBack}\n              aria-label={locale.backLabel}\n            >\n              <Left />\n            </BackButton>\n          )}\n\n          {left && <LeftAddon>{left}</LeftAddon>}\n\n          <Content>\n            <Title hasSubtitle={!!subtitle}>{title}</Title>\n            {subtitle && <Subtitle>{subtitle}</Subtitle>}\n          </Content>\n\n          {right && <RightAddon>{right}</RightAddon>}\n        </PageHeaderContainer>\n      </ThemeOverrider>\n    );\n  }\n);\n\nPageHeader.displayName = 'PageHeader';\n\nexport default PageHeader;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["getReducedPadding","p","isMinSm","i","padding","theme","horizontalPadding","buttonPaddingHorizontal","horizontalPaddingStyles","reducedPadding","reducedPaddingSm","css","leftIsGhostButton","rightIsGhostButton","m","min","sm","hasNavigationIndentStyles","hasNavigationIndent","md","navigationSideWidth","PageHeaderContainer","styled","omitEmotionProps","pageHeaderHeight","clr","pageHeaderColorBg","pageHeaderColorText","pageHeaderColorBorder","BackButton","Button","Content","div","notHasSubtitleStyles","hasSubtitle","sizes","large","Title","ellipsisStyles","Subtitle","small","pageHeaderSubtitleColorText","Addon","LeftAddon","pageHeaderAddonPaddingHorizontal","RightAddon","PageHeader","forwardRef","ref","title","subtitle","left","right","onBack","locale","defaultLocale","rest","useContext","LayoutContext","hasNavigation","t","pageHeaderButtonPaddingHorizontal","backLabel","displayName"],"sources":["../../../src/PageHeader/index.tsx"],"sourcesContent":["import React, { forwardRef, useContext } from 'react';\nimport { ellipsisStyles } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { m } from '@os-design/media';\nimport { Left } from '@os-design/icons';\nimport { css } from '@emotion/react';\nimport Button from '../Button';\nimport LayoutContext from '../Layout/LayoutContext';\nimport defaultLocale, { PageHeaderLocale } from './utils/defaultLocale';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface PageHeaderProps extends JsxDivProps {\n  /**\n   * The title of the page.\n   * @default undefined\n   */\n  title: string;\n  /**\n   * The subtitle of the page.\n   * @default undefined\n   */\n  subtitle?: string;\n  /**\n   * The component located on the left side.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * Reduces the left padding of the page header.\n   * @default false\n   */\n  leftIsGhostButton?: boolean;\n  /**\n   * The component located on the right side.\n   * @default undefined\n   */\n  right?: React.ReactNode;\n  /**\n   * Reduces the right padding of the page header.\n   * @default false\n   */\n  rightIsGhostButton?: boolean;\n  /**\n   * The back event handler. If passed, the page header has the back button.\n   * @default undefined\n   */\n  onBack?: () => void;\n  /**\n   * The locale.\n   * @default undefined\n   */\n  locale?: PageHeaderLocale;\n}\n\nconst getReducedPadding = (p, isMinSm: boolean) => {\n  const i = isMinSm ? 1 : 0;\n  let padding = p.theme.horizontalPadding[i] - p.theme.buttonPaddingHorizontal;\n  if (padding < 0) padding = 0;\n  return padding;\n};\n\nconst horizontalPaddingStyles = (p) => {\n  const reducedPadding = getReducedPadding(p, false);\n  const reducedPaddingSm = getReducedPadding(p, true);\n  return css`\n    padding-left: ${p.leftIsGhostButton\n      ? reducedPadding\n      : p.theme.horizontalPadding[0]}em;\n    padding-right: ${p.rightIsGhostButton\n      ? reducedPadding\n      : p.theme.horizontalPadding[0]}em;\n\n    ${m.min.sm} {\n      padding-left: ${p.leftIsGhostButton\n        ? reducedPaddingSm\n        : p.theme.horizontalPadding[1]}em;\n      padding-right: ${p.rightIsGhostButton\n        ? reducedPaddingSm\n        : p.theme.horizontalPadding[1]}em;\n    }\n  `;\n};\n\nconst hasNavigationIndentStyles = (p) =>\n  p.hasNavigationIndent &&\n  css`\n    ${m.min.md} {\n      left: ${p.theme.navigationSideWidth}em;\n    }\n  `;\n\ninterface ContainerProps {\n  leftIsGhostButton?: boolean;\n  rightIsGhostButton?: boolean;\n  hasNavigationIndent?: boolean;\n}\nexport const PageHeaderContainer = styled(\n  'div',\n  omitEmotionProps(\n    'leftIsGhostButton',\n    'rightIsGhostButton',\n    'hasNavigationIndent'\n  )\n)<ContainerProps>`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n\n  height: ${(p) => p.theme.pageHeaderHeight[0]}em;\n  ${m.min.md} {\n    height: ${(p) => p.theme.pageHeaderHeight[1]}em;\n  }\n\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  z-index: 101;\n\n  background-color: ${(p) => clr(p.theme.pageHeaderColorBg)};\n  color: ${(p) => clr(p.theme.pageHeaderColorText)};\n  border-bottom: 1px solid ${(p) => clr(p.theme.pageHeaderColorBorder)};\n\n  ${horizontalPaddingStyles};\n  ${hasNavigationIndentStyles};\n`;\n\nconst BackButton = styled(Button)`\n  margin-right: 0.2em;\n  flex-shrink: 0;\n`;\n\nconst Content = styled.div`\n  overflow: hidden; // For ellipsis\n`;\n\nconst notHasSubtitleStyles = (p) =>\n  !p.hasSubtitle &&\n  css`\n    font-size: ${p.theme.sizes.large}em;\n  `;\n\ninterface TitleProps {\n  hasSubtitle: boolean;\n}\nconst Title = styled('h1', omitEmotionProps('hasSubtitle'))<TitleProps>`\n  margin: 0;\n  font-size: 1em;\n  font-weight: 500;\n  line-height: 1.2;\n  ${notHasSubtitleStyles};\n  ${ellipsisStyles};\n`;\n\nconst Subtitle = styled.div`\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.pageHeaderSubtitleColorText)};\n  line-height: 1;\n  margin-top: 0.2em;\n  ${ellipsisStyles};\n`;\n\nconst Addon = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst LeftAddon = styled(Addon)`\n  padding-right: ${(p) => p.theme.pageHeaderAddonPaddingHorizontal}em;\n`;\n\nconst RightAddon = styled(Addon)`\n  padding-left: ${(p) => p.theme.pageHeaderAddonPaddingHorizontal}em;\n  margin-left: auto;\n\n  display: grid;\n  grid-auto-flow: column;\n  grid-column-gap: 0.4em;\n`;\n\n/**\n * The header of the page.\n */\nconst PageHeader = forwardRef<HTMLDivElement, PageHeaderProps>(\n  (\n    {\n      title,\n      subtitle,\n      left,\n      leftIsGhostButton = false,\n      right,\n      rightIsGhostButton = false,\n      onBack,\n      locale = defaultLocale,\n      ...rest\n    },\n    ref\n  ) => {\n    const { hasNavigation } = useContext(LayoutContext);\n\n    return (\n      <ThemeOverrider\n        overrides={(t) => ({\n          buttonPaddingHorizontal: t.pageHeaderButtonPaddingHorizontal,\n        })}\n      >\n        <PageHeaderContainer\n          leftIsGhostButton={leftIsGhostButton || !!onBack}\n          rightIsGhostButton={rightIsGhostButton}\n          hasNavigationIndent={hasNavigation}\n          {...rest}\n          ref={ref}\n        >\n          {onBack && (\n            <BackButton\n              type='ghost'\n              wide='never'\n              onClick={onBack}\n              aria-label={locale.backLabel}\n            >\n              <Left />\n            </BackButton>\n          )}\n\n          {left && <LeftAddon>{left}</LeftAddon>}\n\n          <Content>\n            <Title hasSubtitle={!!subtitle}>{title}</Title>\n            {subtitle && <Subtitle>{subtitle}</Subtitle>}\n          </Content>\n\n          {right && <RightAddon>{right}</RightAddon>}\n        </PageHeaderContainer>\n      </ThemeOverrider>\n    );\n  }\n);\n\nPageHeader.displayName = 'PageHeader';\n\nexport default PageHeader;\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"defaultLocale.js","names":["defaultLocale","backLabel"],"sources":["../../../../src/PageHeader/utils/defaultLocale.ts"],"sourcesContent":["export interface PageHeaderLocale {\n  backLabel: string;\n}\n\nconst defaultLocale: PageHeaderLocale = {\n  backLabel: 'Back',\n};\n\nexport default defaultLocale;\n"],"mappings":";;;;;;AAIA,IAAMA,aAA+B,GAAG;EACtCC,SAAS,EAAE;AAD2B,CAAxC;eAIeD,a"}
+{"version":3,"file":"defaultLocale.js","names":["defaultLocale","backLabel"],"sources":["../../../../src/PageHeader/utils/defaultLocale.ts"],"sourcesContent":["export interface PageHeaderLocale {\n  backLabel: string;\n}\n\nconst defaultLocale: PageHeaderLocale = {\n  backLabel: 'Back',\n};\n\nexport default defaultLocale;\n"],"mappings":";;;;;;AAIA,IAAMA,aAA+B,GAAG;EACtCC,SAAS,EAAE;AACb,CAAC;AAAC,eAEaD,aAAa;AAAA"}

package/dist/cjs/PageHeaderInputSearch/index.js

@@ -1,103 +1,67 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _icons = require("@os-design/icons");
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _utils = require("@os-design/utils");
-
 var _theming = require("@os-design/theming");
-
 var _react2 = require("@emotion/react");
-
 var _InputSearch = _interopRequireDefault(require("../InputSearch"));
-
 var _Button = _interopRequireDefault(require("../Button"));
-
 var _PageHeader = require("../PageHeader");
-
 var _LayoutContext = _interopRequireDefault(require("../Layout/LayoutContext"));
-
 var _defaultLocale = _interopRequireDefault(require("./utils/defaultLocale"));
-
 var _excluded = ["locale", "onClose"];
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 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 fadeIn = (0, _react2.keyframes)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from { transform: translateY(-100%); }\n  to { transform: translateY(0); }\n"])));
 var fadeOut = (0, _react2.keyframes)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  from { transform: translateY(0); }\n  to { transform: translateY(-100%); }\n"])));
-
 var visibleStyles = function visibleStyles(p) {
   return p.visible && (0, _react2.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    animation: ", " ", "ms forwards;\n  "])), fadeIn, p.theme.transitionDelay);
 };
-
 var invisibleStyles = function invisibleStyles(p) {
   return !p.visible && (0, _react2.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    animation: ", " ", "ms forwards;\n  "])), fadeOut, p.theme.transitionDelay);
 };
-
 var Container = (0, _styled["default"])(_PageHeader.PageHeaderContainer, (0, _utils.omitEmotionProps)('visible'))(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  z-index: 102; // After PageHeaderContainer\n  ", ";\n  ", ";\n"])), visibleStyles, invisibleStyles);
 var CloseButton = (0, _styled["default"])(_Button["default"])(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin-left: ", "em;\n"])), function (p) {
   return p.theme.pageHeaderAddonPaddingHorizontal;
 });
+
 /**
  * The search input for the page header.
  */
-
 var PageHeaderInputSearch = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _ref$locale = _ref.locale,
-      locale = _ref$locale === void 0 ? _defaultLocale["default"] : _ref$locale,
-      _ref$onClose = _ref.onClose,
-      onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    locale = _ref$locale === void 0 ? _defaultLocale["default"] : _ref$locale,
+    _ref$onClose = _ref.onClose,
+    onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = (0, _react.useState)(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      visible = _useState2[0],
-      setVisible = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
   var _useTheme = (0, _theming.useTheme)(),
-      theme = _useTheme.theme;
-
+    theme = _useTheme.theme;
   var mounted = (0, _utils.useClosable)(visible, theme.transitionDelay);
-
   var _useContext = (0, _react.useContext)(_LayoutContext["default"]),
-      hasNavigation = _useContext.hasNavigation;
-
+    hasNavigation = _useContext.hasNavigation;
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     type: "ghost",
     wide: "never",