@os-design/core 1.0.254 → 1.0.256

package/dist/esm/Navigation/index.js

@@ -1,165 +0,0 @@
-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); }
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-import { m } from '@os-design/media';
-import { enableScrollingStyles } from '@os-design/styles';
-import { clr } from '@os-design/theming';
-import { omitEmotionProps } from '@os-design/utils';
-import React, { forwardRef, useRef } from 'react';
-import useScrollFlags from './utils/useScrollFlags';
-const Container = styled.div`
-  position: fixed;
-  box-sizing: border-box;
-  z-index: 101;
-
-  background-color: ${p => clr(p.theme.navigationColorBg)};
-  color: ${p => clr(p.theme.navigationColorText)};
-
-  // Tab navigator
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: calc(
-    ${p => p.theme.navigationTabHeight}em + env(safe-area-inset-bottom)
-  );
-  border-top: 1px solid ${p => clr(p.theme.navigationColorBorder)};
-
-  // Side navigator
-  ${m.min.md} {
-    // Reset tab navigator styles
-    right: unset;
-    height: unset;
-    border-top: unset;
-
-    left: 0;
-    top: 0;
-    bottom: 0;
-    width: ${p => p.theme.navigationSideWidth}em;
-    border-right: 1px solid ${p => clr(p.theme.navigationColorBorder)};
-  }
-`;
-const notHasSideTopStyles = p => !p.hasSideTop && css`
-    padding-top: ${p.theme.pageHeaderHeight[1]}em;
-  `;
-const hasPrevStyles = p => p.hasPrev && !p.hasNext && css`
-    mask-image: linear-gradient(
-      to right,
-      transparent,
-      white ${p.theme.navigationMaskImageSize}em
-    );
-    ${m.min.md} {
-      mask-image: linear-gradient(
-        to bottom,
-        transparent,
-        white ${p.theme.navigationMaskImageSize}em
-      );
-    }
-  `;
-const hasNextStyles = p => !p.hasPrev && p.hasNext && css`
-    mask-image: linear-gradient(
-      to left,
-      transparent,
-      white ${p.theme.navigationMaskImageSize}em
-    );
-    ${m.min.md} {
-      mask-image: linear-gradient(
-        to top,
-        transparent,
-        white ${p.theme.navigationMaskImageSize}em
-      );
-    }
-  `;
-const hasPrevNextStyles = p => p.hasPrev && p.hasNext && css`
-    mask-image: linear-gradient(
-      to right,
-      transparent,
-      white ${p.theme.navigationMaskImageSize}em,
-      white calc(100% - ${p.theme.navigationMaskImageSize}em),
-      transparent
-    );
-    ${m.min.md} {
-      mask-image: linear-gradient(
-        to bottom,
-        transparent,
-        white ${p.theme.navigationMaskImageSize}em,
-        white calc(100% - ${p.theme.navigationMaskImageSize}em),
-        transparent
-      );
-    }
-  `;
-const Content = styled('div', omitEmotionProps('hasSideTop', 'hasPrev', 'hasNext'))`
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: flex-start;
-  &::before,
-  &::after {
-    content: ''; // Insert space before the first item and after the last one
-  }
-
-  overflow-y: hidden;
-  ${enableScrollingStyles('x', false)};
-
-  ${m.min.md} {
-    // Reset tab navigator styles
-    justify-content: unset;
-    align-items: unset;
-
-    flex-direction: column;
-
-    overflow-x: hidden;
-    ${enableScrollingStyles('y', false)};
-
-    ${notHasSideTopStyles};
-  }
-
-  ${hasPrevStyles};
-  ${hasNextStyles};
-  ${hasPrevNextStyles};
-`;
-const Addon = styled.div`
-  display: none;
-  ${m.min.md} {
-    display: block;
-  }
-`;
-const BottomAddon = styled(Addon)`
-  margin-top: auto;
-`;
-
-/**
- * The main navigation.
- */
-const Navigation = /*#__PURE__*/forwardRef(({
-  sideTop,
-  sideBottom,
-  children,
-  ...rest
-}, ref) => {
-  const contentRef = useRef(null);
-  const {
-    hasPrev,
-    hasNext
-  } = useScrollFlags(contentRef);
-  return /*#__PURE__*/React.createElement(Container, _extends({
-    role: "navigation",
-    "aria-label": "Main navigation"
-  }, rest, {
-    ref: ref
-  }), /*#__PURE__*/React.createElement(Content, {
-    hasSideTop: !!sideTop,
-    hasPrev: hasPrev,
-    hasNext: hasNext,
-    ref: contentRef,
-    role: "list"
-  }, sideTop && /*#__PURE__*/React.createElement(Addon, null, sideTop), children, sideBottom && /*#__PURE__*/React.createElement(BottomAddon, null, sideBottom)));
-});
-Navigation.displayName = 'Navigation';
-export default Navigation;
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["css","styled","m","enableScrollingStyles","clr","omitEmotionProps","React","forwardRef","useRef","useScrollFlags","Container","div","p","theme","navigationColorBg","navigationColorText","navigationTabHeight","navigationColorBorder","min","md","navigationSideWidth","notHasSideTopStyles","hasSideTop","pageHeaderHeight","hasPrevStyles","hasPrev","hasNext","navigationMaskImageSize","hasNextStyles","hasPrevNextStyles","Content","Addon","BottomAddon","Navigation","sideTop","sideBottom","children","rest","ref","contentRef","createElement","_extends","role","displayName"],"sources":["../../../src/Navigation/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { m } from '@os-design/media';\nimport { enableScrollingStyles } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, useRef } from '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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","ignoreList":[]}

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

@@ -1,25 +0,0 @@
-import { useIsMinWidth } from '@os-design/media';
-import { useBrowserLayoutEffect, useEvent } from '@os-design/utils';
-import { useCallback, useState } from 'react';
-const useScrollFlags = ref => {
-  const [hasPrev, setHasPrev] = useState(false);
-  const [hasNext, setHasNext] = useState(false);
-  const isMinMd = useIsMinWidth('md');
-  const scrollHandler = useCallback(() => {
-    const {
-      current
-    } = ref;
-    if (!current) return;
-    setHasPrev(current[isMinMd ? 'scrollTop' : 'scrollLeft'] > 0);
-    setHasNext(current[isMinMd ? 'scrollHeight' : 'scrollWidth'] - current[isMinMd ? 'scrollTop' : 'scrollLeft'] - current[isMinMd ? 'clientHeight' : 'clientWidth'] > 0);
-  }, [ref, isMinMd]);
-  useBrowserLayoutEffect(() => scrollHandler(), [scrollHandler]);
-  useEvent(ref, 'scroll', scrollHandler);
-  useEvent(typeof window !== 'undefined' ? window : undefined, 'resize', scrollHandler);
-  return {
-    hasPrev,
-    hasNext
-  };
-};
-export default useScrollFlags;
-//# sourceMappingURL=useScrollFlags.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"useScrollFlags.js","names":["useIsMinWidth","useBrowserLayoutEffect","useEvent","useCallback","useState","useScrollFlags","ref","hasPrev","setHasPrev","hasNext","setHasNext","isMinMd","scrollHandler","current","window","undefined"],"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":"AAAA,SAASA,aAAa,QAAQ,kBAAkB;AAChD,SAASC,sBAAsB,EAAEC,QAAQ,QAAQ,kBAAkB;AACnE,SAAoBC,WAAW,EAAEC,QAAQ,QAAQ,OAAO;AAOxD,MAAMC,cAAc,GAAIC,GAAuB,IAAwB;EACrE,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGJ,QAAQ,CAAC,KAAK,CAAC;EAC7C,MAAM,CAACK,OAAO,EAAEC,UAAU,CAAC,GAAGN,QAAQ,CAAC,KAAK,CAAC;EAC7C,MAAMO,OAAO,GAAGX,aAAa,CAAC,IAAI,CAAC;EAEnC,MAAMY,aAAa,GAAGT,WAAW,CAAC,MAAM;IACtC,MAAM;MAAEU;IAAQ,CAAC,GAAGP,GAAG;IACvB,IAAI,CAACO,OAAO,EAAE;IAEdL,UAAU,CAACK,OAAO,CAACF,OAAO,GAAG,WAAW,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;IAC7DD,UAAU,CACRG,OAAO,CAACF,OAAO,GAAG,cAAc,GAAG,aAAa,CAAC,GAC/CE,OAAO,CAACF,OAAO,GAAG,WAAW,GAAG,YAAY,CAAC,GAC7CE,OAAO,CAACF,OAAO,GAAG,cAAc,GAAG,aAAa,CAAC,GACjD,CACJ,CAAC;EACH,CAAC,EAAE,CAACL,GAAG,EAAEK,OAAO,CAAC,CAAC;EAElBV,sBAAsB,CAAC,MAAMW,aAAa,CAAC,CAAC,EAAE,CAACA,aAAa,CAAC,CAAC;EAC9DV,QAAQ,CAACI,GAAG,EAAE,QAAQ,EAAEM,aAAa,CAAC;EACtCV,QAAQ,CACL,OAAOY,MAAM,KAAK,WAAW,GAAGA,MAAM,GAAGC,SAAS,EACnD,QAAQ,EACRH,aACF,CAAC;EAED,OAAO;IAAEL,OAAO;IAAEE;EAAQ,CAAC;AAC7B,CAAC;AAED,eAAeJ,cAAc","ignoreList":[]}

package/dist/esm/NavigationItem/index.js

@@ -1,98 +0,0 @@
-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); }
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-import { m } from '@os-design/media';
-import { resetFocusStyles, transitionStyles } from '@os-design/styles';
-import { clr } from '@os-design/theming';
-import { omitEmotionProps } from '@os-design/utils';
-import React, { forwardRef } from 'react';
-const currentPageStyles = p => p.currentPage && css`
-    background-color: ${clr(p.theme.navigationItemColorBgActive)};
-    color: ${clr(p.theme.navigationItemColorTextActive)};
-  `;
-const NavigationLink = styled('a', omitEmotionProps('currentPage', 'as'))`
-  ${resetFocusStyles};
-  text-decoration: none;
-  cursor: pointer;
-  overflow: hidden;
-  border-radius: ${p => p.theme.borderRadius}em;
-
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-
-  color: ${p => clr(p.theme.navigationItemColorText)};
-  @media (hover: hover) {
-    &:hover,
-    &:focus {
-      background-color: ${p => clr(p.theme.navigationItemColorBgHover)};
-    }
-  }
-
-  // Tab navigator
-  width: ${p => p.theme.navigationItemTabWidth}em;
-  min-width: ${p => p.theme.navigationItemTabWidth}em;
-  height: calc(${p => p.theme.navigationTabHeight}em - 1px);
-
-  // Side navigator
-  ${m.min.md} {
-    // Reset tab navigator styles
-    min-width: unset;
-
-    width: 100%;
-    height: ${p => p.theme.navigationItemSideHeight}em;
-    min-height: ${p => p.theme.navigationItemSideHeight}em;
-  }
-
-  ${currentPageStyles};
-  ${transitionStyles('background-color', 'color')};
-`;
-const IconContainer = styled.span`
-  display: inherit;
-
-  // Tab navigator
-  font-size: 1.6em;
-
-  // Side navigator
-  ${m.min.md} {
-    font-size: 1.8em;
-  }
-`;
-const Title = styled.span`
-  font-size: 0.75em;
-  font-weight: 500;
-  white-space: nowrap;
-
-  // Side navigator
-  ${m.min.md} {
-    margin-top: 0.3em;
-  }
-`;
-
-/**
- * The item of the navigation.
- */
-const NavigationItem = /*#__PURE__*/forwardRef(({
-  icon,
-  currentPage = false,
-  as,
-  onMouseDown = () => {},
-  children,
-  ...rest
-}, ref) => /*#__PURE__*/React.createElement("div", {
-  role: "listitem"
-}, /*#__PURE__*/React.createElement(NavigationLink, _extends({
-  currentPage: currentPage,
-  as: as,
-  onMouseDown: e => {
-    onMouseDown(e);
-    e.preventDefault();
-  },
-  "aria-current": currentPage ? 'page' : undefined
-}, rest, {
-  ref: ref
-}), /*#__PURE__*/React.createElement(IconContainer, null, icon), children && /*#__PURE__*/React.createElement(Title, null, children))));
-NavigationItem.displayName = 'NavigationItem';
-export default NavigationItem;
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["css","styled","m","resetFocusStyles","transitionStyles","clr","omitEmotionProps","React","forwardRef","currentPageStyles","p","currentPage","theme","navigationItemColorBgActive","navigationItemColorTextActive","NavigationLink","borderRadius","navigationItemColorText","navigationItemColorBgHover","navigationItemTabWidth","navigationTabHeight","min","md","navigationItemSideHeight","IconContainer","span","Title","NavigationItem","icon","as","onMouseDown","children","rest","ref","createElement","role","_extends","e","preventDefault","undefined","displayName"],"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":"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","ignoreList":[]}

package/dist/esm/PageContent/index.js

@@ -1,66 +0,0 @@
-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); }
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-import { m } from '@os-design/media';
-import { horizontalPaddingStyles } from '@os-design/styles';
-import { omitEmotionProps } from '@os-design/utils';
-import React, { forwardRef, useContext } from 'react';
-import LayoutContext from '../Layout/LayoutContext';
-const hasNavigationStyles = p => p.hasNavigation && css`
-    ${!p.hasList && css`
-      margin-bottom: calc(
-        ${p.theme.navigationTabHeight}em + env(safe-area-inset-bottom)
-      );
-    `}
-    ${m.min.md} {
-      margin-bottom: 0;
-      margin-left: ${p.theme.navigationSideWidth}em;
-    }
-  `;
-const hasPageHeaderStyles = p => p.hasPageHeader && !p.hasList && css`
-    margin-top: ${p.theme.pageHeaderHeight[0] + p.marginTop}em;
-    ${m.min.md} {
-      margin-top: ${p.theme.pageHeaderHeight[1] + p.marginTop}em;
-    }
-  `;
-const notHasListStyles = p => !p.hasList && css`
-    padding-top: ${p.theme.pageContentPaddingVertical}em;
-    padding-bottom: ${p.theme.pageContentPaddingVertical}em;
-    ${horizontalPaddingStyles()(p)};
-  `;
-const notHasNavigationStyles = p => !p.hasNavigation && !p.hasList && css`
-    margin-bottom: env(safe-area-inset-bottom);
-  `;
-const Container = styled('main', omitEmotionProps('hasNavigation', 'hasPageHeader', 'hasList', 'marginTop'))`
-  margin-top: ${p => p.marginTop}em;
-  ${hasNavigationStyles};
-  ${hasPageHeaderStyles};
-  ${notHasListStyles};
-  ${notHasNavigationStyles};
-`;
-
-/**
- * The wrapper that adds padding to the page content.
- */
-const PageContent = /*#__PURE__*/forwardRef(({
-  hasList = false,
-  marginTop = 0,
-  children,
-  ...rest
-}, ref) => {
-  const {
-    hasNavigation,
-    hasPageHeader
-  } = useContext(LayoutContext);
-  return /*#__PURE__*/React.createElement(Container, _extends({
-    hasNavigation: hasNavigation,
-    hasPageHeader: hasPageHeader,
-    hasList: hasList,
-    marginTop: marginTop
-  }, rest, {
-    ref: ref
-  }), children);
-});
-PageContent.displayName = 'PageContent';
-export default PageContent;
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["css","styled","m","horizontalPaddingStyles","omitEmotionProps","React","forwardRef","useContext","LayoutContext","hasNavigationStyles","p","hasNavigation","hasList","theme","navigationTabHeight","min","md","navigationSideWidth","hasPageHeaderStyles","hasPageHeader","pageHeaderHeight","marginTop","notHasListStyles","pageContentPaddingVertical","notHasNavigationStyles","Container","PageContent","children","rest","ref","createElement","_extends","displayName"],"sources":["../../../src/PageContent/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { m } from '@os-design/media';\nimport { horizontalPaddingStyles } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, useContext } from 'react';\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   * Additional upper indent (em).\n   * It can be used, for example, if you have an additional fixed header.\n   * @default 0\n   */\n  marginTop?: number;\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] + p.marginTop}em;\n    ${m.min.md} {\n      margin-top: ${p.theme.pageHeaderHeight[1] + p.marginTop}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  marginTop: number;\n}\nconst Container = styled(\n  'main',\n  omitEmotionProps('hasNavigation', 'hasPageHeader', 'hasList', 'marginTop')\n)<ContainerProps>`\n  margin-top: ${(p) => p.marginTop}em;\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, marginTop = 0, children, ...rest }, ref) => {\n    const { hasNavigation, hasPageHeader } = useContext(LayoutContext);\n\n    return (\n      <Container\n        hasNavigation={hasNavigation}\n        hasPageHeader={hasPageHeader}\n        hasList={hasList}\n        marginTop={marginTop}\n        {...rest}\n        ref={ref}\n      >\n        {children}\n      </Container>\n    );\n  }\n);\n\nPageContent.displayName = 'PageContent';\n\nexport default PageContent;\n"],"mappings":";AAAA,SAASA,GAAG,QAAQ,gBAAgB;AACpC,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,CAAC,QAAQ,kBAAkB;AACpC,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,EAAEC,UAAU,QAAQ,OAAO;AACrD,OAAOC,aAAa,MAAM,yBAAyB;AAiBnD,MAAMC,mBAAmB,GAAIC,CAAC,IAC5BA,CAAC,CAACC,aAAa,IACfX,GAAI;AACN,MAAM,CAACU,CAAC,CAACE,OAAO,IACZZ,GAAI;AACR;AACA,UAAUU,CAAC,CAACG,KAAK,CAACC,mBAAoB;AACtC;AACA,KAAM;AACN,MAAMZ,CAAC,CAACa,GAAG,CAACC,EAAG;AACf;AACA,qBAAqBN,CAAC,CAACG,KAAK,CAACI,mBAAoB;AACjD;AACA,GAAG;AAEH,MAAMC,mBAAmB,GAAIR,CAAC,IAC5BA,CAAC,CAACS,aAAa,IACf,CAACT,CAAC,CAACE,OAAO,IACVZ,GAAI;AACN,kBAAkBU,CAAC,CAACG,KAAK,CAACO,gBAAgB,CAAC,CAAC,CAAC,GAAGV,CAAC,CAACW,SAAU;AAC5D,MAAMnB,CAAC,CAACa,GAAG,CAACC,EAAG;AACf,oBAAoBN,CAAC,CAACG,KAAK,CAACO,gBAAgB,CAAC,CAAC,CAAC,GAAGV,CAAC,CAACW,SAAU;AAC9D;AACA,GAAG;AAEH,MAAMC,gBAAgB,GAAIZ,CAAC,IACzB,CAACA,CAAC,CAACE,OAAO,IACVZ,GAAI;AACN,mBAAmBU,CAAC,CAACG,KAAK,CAACU,0BAA2B;AACtD,sBAAsBb,CAAC,CAACG,KAAK,CAACU,0BAA2B;AACzD,MAAMpB,uBAAuB,CAAC,CAAC,CAACO,CAAC,CAAE;AACnC,GAAG;AAEH,MAAMc,sBAAsB,GAAId,CAAC,IAC/B,CAACA,CAAC,CAACC,aAAa,IAChB,CAACD,CAAC,CAACE,OAAO,IACVZ,GAAI;AACN;AACA,GAAG;AAQH,MAAMyB,SAAS,GAAGxB,MAAM,CACtB,MAAM,EACNG,gBAAgB,CAAC,eAAe,EAAE,eAAe,EAAE,SAAS,EAAE,WAAW,CAC3E,CAAkB;AAClB,gBAAiBM,CAAC,IAAKA,CAAC,CAACW,SAAU;AACnC,IAAIZ,mBAAoB;AACxB,IAAIS,mBAAoB;AACxB,IAAII,gBAAiB;AACrB,IAAIE,sBAAuB;AAC3B,CAAC;;AAED;AACA;AACA;AACA,MAAME,WAAW,gBAAGpB,UAAU,CAC5B,CAAC;EAAEM,OAAO,GAAG,KAAK;EAAES,SAAS,GAAG,CAAC;EAAEM,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,KAAK;EAC9D,MAAM;IAAElB,aAAa;IAAEQ;EAAc,CAAC,GAAGZ,UAAU,CAACC,aAAa,CAAC;EAElE,oBACEH,KAAA,CAAAyB,aAAA,CAACL,SAAS,EAAAM,QAAA;IACRpB,aAAa,EAAEA,aAAc;IAC7BQ,aAAa,EAAEA,aAAc;IAC7BP,OAAO,EAAEA,OAAQ;IACjBS,SAAS,EAAEA;EAAU,GACjBO,IAAI;IACRC,GAAG,EAAEA;EAAI,IAERF,QACQ,CAAC;AAEhB,CACF,CAAC;AAEDD,WAAW,CAACM,WAAW,GAAG,aAAa;AAEvC,eAAeN,WAAW","ignoreList":[]}

package/dist/esm/PageHeader/index.js

@@ -1,138 +0,0 @@
-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); }
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-import { Left } from '@os-design/icons';
-import { m } from '@os-design/media';
-import { ellipsisStyles } from '@os-design/styles';
-import { ThemeOverrider, clr } from '@os-design/theming';
-import { omitEmotionProps } from '@os-design/utils';
-import React, { forwardRef, useContext } from 'react';
-import Button from '../Button';
-import LayoutContext from '../Layout/LayoutContext';
-import defaultLocale from './utils/defaultLocale';
-const getReducedPadding = (p, isMinSm) => {
-  const i = isMinSm ? 1 : 0;
-  let padding = p.theme.horizontalPadding[i] - p.theme.buttonPaddingHorizontal;
-  if (padding < 0) padding = 0;
-  return padding;
-};
-const horizontalPaddingStyles = p => {
-  const reducedPadding = getReducedPadding(p, false);
-  const reducedPaddingSm = getReducedPadding(p, true);
-  return css`
-    padding-left: ${p.leftIsGhostButton ? reducedPadding : p.theme.horizontalPadding[0]}em;
-    padding-right: ${p.rightIsGhostButton ? reducedPadding : p.theme.horizontalPadding[0]}em;
-
-    ${m.min.sm} {
-      padding-left: ${p.leftIsGhostButton ? reducedPaddingSm : p.theme.horizontalPadding[1]}em;
-      padding-right: ${p.rightIsGhostButton ? reducedPaddingSm : p.theme.horizontalPadding[1]}em;
-    }
-  `;
-};
-const hasNavigationIndentStyles = p => p.hasNavigationIndent && css`
-    ${m.min.md} {
-      left: ${p.theme.navigationSideWidth}em;
-    }
-  `;
-export const PageHeaderContainer = styled('div', omitEmotionProps('leftIsGhostButton', 'rightIsGhostButton', 'hasNavigationIndent'))`
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-
-  height: ${p => p.theme.pageHeaderHeight[0]}em;
-  ${m.min.md} {
-    height: ${p => p.theme.pageHeaderHeight[1]}em;
-  }
-
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  z-index: 101;
-
-  background-color: ${p => clr(p.theme.pageHeaderColorBg)};
-  color: ${p => clr(p.theme.pageHeaderColorText)};
-  border-bottom: 1px solid ${p => clr(p.theme.pageHeaderColorBorder)};
-
-  ${horizontalPaddingStyles};
-  ${hasNavigationIndentStyles};
-`;
-const BackButton = styled(Button)`
-  margin-right: 0.2em;
-  flex-shrink: 0;
-`;
-const Content = styled.div`
-  overflow: hidden; // For ellipsis
-`;
-const notHasSubtitleStyles = p => !p.hasSubtitle && css`
-    font-size: ${p.theme.sizes.large}em;
-  `;
-const Title = styled('h1', omitEmotionProps('hasSubtitle'))`
-  margin: 0;
-  font-size: 1em;
-  font-weight: 500;
-  line-height: 1.2;
-  ${notHasSubtitleStyles};
-  ${ellipsisStyles};
-`;
-const Subtitle = styled.div`
-  font-size: ${p => p.theme.sizes.small}em;
-  color: ${p => clr(p.theme.pageHeaderSubtitleColorText)};
-  line-height: 1.2;
-  ${ellipsisStyles};
-`;
-const Addon = styled.div`
-  display: flex;
-  align-items: center;
-`;
-const LeftAddon = styled(Addon)`
-  padding-right: ${p => p.theme.pageHeaderAddonPaddingHorizontal}em;
-`;
-const RightAddon = styled(Addon)`
-  padding-left: ${p => p.theme.pageHeaderAddonPaddingHorizontal}em;
-  margin-left: auto;
-
-  display: grid;
-  grid-auto-flow: column;
-  grid-column-gap: 0.4em;
-`;
-
-/**
- * The header of the page.
- */
-const PageHeader = /*#__PURE__*/forwardRef(({
-  title,
-  subtitle,
-  left,
-  leftIsGhostButton = false,
-  right,
-  rightIsGhostButton = false,
-  onBack,
-  locale = defaultLocale,
-  ...rest
-}, ref) => {
-  const {
-    hasNavigation
-  } = useContext(LayoutContext);
-  return /*#__PURE__*/React.createElement(ThemeOverrider, {
-    overrides: t => ({
-      buttonPaddingHorizontal: t.pageHeaderButtonPaddingHorizontal
-    })
-  }, /*#__PURE__*/React.createElement(PageHeaderContainer, _extends({
-    leftIsGhostButton: leftIsGhostButton || !!onBack,
-    rightIsGhostButton: rightIsGhostButton,
-    hasNavigationIndent: hasNavigation
-  }, rest, {
-    ref: ref
-  }), onBack && /*#__PURE__*/React.createElement(BackButton, {
-    type: "ghost",
-    wide: "never",
-    onClick: onBack,
-    "aria-label": locale.backLabel
-  }, /*#__PURE__*/React.createElement(Left, null)), left && /*#__PURE__*/React.createElement(LeftAddon, null, left), /*#__PURE__*/React.createElement(Content, null, /*#__PURE__*/React.createElement(Title, {
-    hasSubtitle: !!subtitle
-  }, title), subtitle && /*#__PURE__*/React.createElement(Subtitle, null, subtitle)), right && /*#__PURE__*/React.createElement(RightAddon, null, right)));
-});
-PageHeader.displayName = 'PageHeader';
-export default PageHeader;
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["css","styled","Left","m","ellipsisStyles","ThemeOverrider","clr","omitEmotionProps","React","forwardRef","useContext","Button","LayoutContext","defaultLocale","getReducedPadding","p","isMinSm","i","padding","theme","horizontalPadding","buttonPaddingHorizontal","horizontalPaddingStyles","reducedPadding","reducedPaddingSm","leftIsGhostButton","rightIsGhostButton","min","sm","hasNavigationIndentStyles","hasNavigationIndent","md","navigationSideWidth","PageHeaderContainer","pageHeaderHeight","pageHeaderColorBg","pageHeaderColorText","pageHeaderColorBorder","BackButton","Content","div","notHasSubtitleStyles","hasSubtitle","sizes","large","Title","Subtitle","small","pageHeaderSubtitleColorText","Addon","LeftAddon","pageHeaderAddonPaddingHorizontal","RightAddon","PageHeader","title","subtitle","left","right","onBack","locale","rest","ref","hasNavigation","createElement","overrides","t","pageHeaderButtonPaddingHorizontal","_extends","type","wide","onClick","backLabel","displayName"],"sources":["../../../src/PageHeader/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { Left } from '@os-design/icons';\nimport { m } from '@os-design/media';\nimport { ellipsisStyles } from '@os-design/styles';\nimport { ThemeOverrider, clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, useContext } from '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.2;\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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","ignoreList":[]}

package/dist/esm/PageHeader/utils/defaultLocale.js

@@ -1,5 +0,0 @@
-const defaultLocale = {
-  backLabel: 'Back'
-};
-export default defaultLocale;
-//# sourceMappingURL=defaultLocale.js.map

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

@@ -1 +0,0 @@
-{"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,MAAMA,aAA+B,GAAG;EACtCC,SAAS,EAAE;AACb,CAAC;AAED,eAAeD,aAAa","ignoreList":[]}