@os-design/core 1.0.254 → 1.0.256

package/dist/Modal/index.js

@@ -0,0 +1,264 @@
+import { css, keyframes } from '@emotion/react';
+import styled from '@emotion/styled';
+import { Close } from '@os-design/icons';
+import { m } from '@os-design/media';
+import Portal from '@os-design/portal';
+import { ellipsisStyles, enableScrollingStyles, sizeStyles } from '@os-design/styles';
+import { ThemeOverrider, clr, useTheme } from '@os-design/theming';
+import { omitEmotionProps, useBodyScroll, useClosable } from '@os-design/utils';
+import React, { forwardRef, useCallback, useContext, useMemo, useRef } from 'react';
+import FocusLock from 'react-focus-lock';
+import Button from '../Button';
+import defaultLocale from './utils/defaultLocale';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const MODAL_CONTAINER_Z_INDEX = 1000;
+const MODAL_BOX_SHADOW_SIZE_EM = 1;
+const maskFadeIn = keyframes`
+  from { opacity: 0; }
+  to { opacity: 1; }
+`;
+const maskFadeOut = keyframes`
+  from { opacity: 1; }
+  to { opacity: 0; }
+`;
+const maskVisibleStyles = p => p.visible && css`
+    animation: ${maskFadeIn} ${p.theme.transitionDelay}ms forwards;
+  `;
+const maskInvisibleStyles = p => !p.visible && css`
+    animation: ${maskFadeOut} ${p.theme.transitionDelay}ms forwards;
+  `;
+export const ModalMask = styled('div', omitEmotionProps('visible'))`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 100%;
+  background-color: ${p => clr(p.theme.modalMaskColorBg)};
+  z-index: ${MODAL_CONTAINER_Z_INDEX};
+  ${maskVisibleStyles};
+  ${maskInvisibleStyles};
+`;
+const Container = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 100%;
+  z-index: ${MODAL_CONTAINER_Z_INDEX};
+
+  ${m.min.xs} {
+    ${enableScrollingStyles('y')};
+  }
+`;
+const contentFadeIn = keyframes`
+  from { transform: translateY(calc(var(--vh, 1vh) * 100 + ${MODAL_BOX_SHADOW_SIZE_EM}em)); }
+  to { transform: translateY(calc(var(--vh, 1vh) * 100 - 100%)); }
+`;
+const contentFadeOut = keyframes`
+  from { transform: translateY(calc(var(--vh, 1vh) * 100 - 100%)); }
+  to { transform: translateY(calc(var(--vh, 1vh) * 100 + ${MODAL_BOX_SHADOW_SIZE_EM}em)); }
+`;
+const contentFadeInXs = keyframes`
+  from { transform: translateY(calc(-100% - ${MODAL_BOX_SHADOW_SIZE_EM}em)); }
+  to { transform: translateY(6em); }
+`;
+const contentFadeOutXs = keyframes`
+  from { transform: translateY(6em); }
+  to { transform: translateY(calc(-100% - ${MODAL_BOX_SHADOW_SIZE_EM}em)); }
+`;
+const contentVisibleStyles = p => p.visible && css`
+    animation: ${contentFadeIn} ${p.theme.transitionDelay}ms forwards;
+    ${m.min.xs} {
+      animation: ${contentFadeInXs} ${p.theme.transitionDelay}ms forwards;
+    }
+  `;
+const contentInvisibleStyles = p => !p.visible && css`
+    animation: ${contentFadeOut} ${p.theme.transitionDelay}ms forwards;
+    ${m.min.xs} {
+      animation: ${contentFadeOutXs} ${p.theme.transitionDelay}ms forwards;
+    }
+  `;
+const Content = styled('div', omitEmotionProps('visible', 'size'))`
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: env(safe-area-inset-bottom);
+
+  background-color: ${p => clr(p.theme.colorBg)};
+  color: ${p => clr(p.theme.colorText)};
+  box-shadow: 0 0 ${MODAL_BOX_SHADOW_SIZE_EM}em
+    ${p => clr(p.theme.modalColorBoxShadow)};
+
+  width: 100%;
+  max-height: 100%;
+  border-radius: ${p => p.theme.borderRadius}em
+    ${p => p.theme.borderRadius}em 0 0;
+
+  ${m.min.xs} {
+    width: ${p => p.theme.modalWidth}em;
+    max-height: unset;
+    border-radius: ${p => p.theme.borderRadius}em;
+
+    left: 50%;
+    margin-left: ${p => -p.theme.modalWidth / 2}em;
+  }
+
+  ${contentVisibleStyles};
+  ${contentInvisibleStyles}
+  ${sizeStyles};
+`;
+const Header = styled.div`
+  flex-shrink: 0;
+  height: ${p => p.theme.modalHeaderHeight}em;
+  border-bottom: 1px solid ${p => clr(p.theme.modalHeaderColorBorderBottom)};
+  box-sizing: border-box;
+
+  display: flex;
+  align-items: center;
+
+  padding-left: ${p => p.theme.modalBodyPaddingHorizontal[0]}em;
+  padding-right: ${p => Math.max(p.theme.modalBodyPaddingHorizontal[1] - p.theme.buttonPaddingHorizontal, 0)}em;
+
+  ${m.min.xs} {
+    padding-left: ${p => p.theme.modalBodyPaddingHorizontal[1]}em;
+    padding-right: ${p => Math.max(p.theme.modalBodyPaddingHorizontal[1] - p.theme.buttonPaddingHorizontal, 0)}em;
+  }
+`;
+const Title = styled.div`
+  flex: 1;
+  font-size: ${p => p.theme.sizes.large}em;
+  font-weight: 500;
+  ${ellipsisStyles};
+`;
+const Body = styled.div`
+  flex-grow: 1;
+
+  padding: ${p => p.theme.modalBodyPaddingVertical[0]}em
+    ${p => p.theme.modalBodyPaddingHorizontal[0]}em;
+
+  ${m.min.xs} {
+    padding: ${p => p.theme.modalBodyPaddingVertical[1]}em
+      ${p => p.theme.modalBodyPaddingHorizontal[1]}em;
+  }
+
+  ${enableScrollingStyles('y')};
+`;
+const Footer = styled.div`
+  padding: 0 ${p => p.theme.modalBodyPaddingHorizontal[0]}em
+    ${p => p.theme.modalBodyPaddingVertical[0]}em;
+
+  ${m.min.xs} {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+
+    padding: 0 ${p => p.theme.modalBodyPaddingHorizontal[1]}em
+      ${p => p.theme.modalBodyPaddingVertical[1]}em;
+  }
+`;
+const CloseModalContext = /*#__PURE__*/React.createContext(() => {});
+export const useCloseModal = () => useContext(CloseModalContext);
+
+/**
+ * The base pop-up window.
+ */
+const Modal = /*#__PURE__*/forwardRef(({
+  title,
+  okText = 'OK',
+  okDanger = false,
+  okLoading = false,
+  okDisabled = false,
+  header,
+  footer,
+  visible = false,
+  locale = defaultLocale,
+  onClose = () => {},
+  onOk,
+  size,
+  id,
+  onClick = () => {},
+  children,
+  ...rest
+}, ref) => {
+  const contentRef = useRef(null);
+  const {
+    theme
+  } = useTheme();
+  const mounted = useClosable(visible, theme.transitionDelay);
+  useBodyScroll(!visible);
+  const titleId = useMemo(() => `modal-title-${Math.random().toString(36).slice(2, 11)}`, []);
+  const bodyId = useMemo(() => id || `modal-body-${Math.random().toString(36).slice(2, 11)}`, [id]);
+  const containerClickHandler = useCallback(e => {
+    e.stopPropagation();
+    onClose();
+  }, [onClose]);
+  const contentClickHandler = useCallback(e => {
+    e.stopPropagation();
+    onClick(e);
+  }, [onClick]);
+  const contentKeyDownHandler = useCallback(e => {
+    if (e.key === 'Escape') {
+      e.stopPropagation();
+      onClose();
+    }
+  }, [onClose]);
+  const ariaLabelledBy = useMemo(() => header === undefined ? titleId : undefined, [header, titleId]);
+  if (!mounted) return null;
+  return /*#__PURE__*/_jsxs(Portal, {
+    children: [/*#__PURE__*/_jsx(ModalMask, {
+      visible: visible
+    }), /*#__PURE__*/_jsx(Container, {
+      onClick: containerClickHandler,
+      children: /*#__PURE__*/_jsx(FocusLock, {
+        autoFocus: false,
+        children: /*#__PURE__*/_jsx(CloseModalContext.Provider, {
+          value: onClose,
+          children: /*#__PURE__*/_jsxs(Content, {
+            visible: visible,
+            size: size,
+            tabIndex: -1,
+            onKeyDown: contentKeyDownHandler,
+            onClick: contentClickHandler,
+            role: "dialog",
+            "aria-modal": true,
+            "aria-labelledby": ariaLabelledBy,
+            "aria-describedby": bodyId,
+            ref: contentRef,
+            children: [header === undefined ? /*#__PURE__*/_jsx(ThemeOverrider, {
+              overrides: t => ({
+                buttonPaddingHorizontal: t.modalCloseButtonPaddingHorizontal
+              }),
+              children: /*#__PURE__*/_jsxs(Header, {
+                children: [/*#__PURE__*/_jsx(Title, {
+                  id: titleId,
+                  children: title
+                }), /*#__PURE__*/_jsx(Button, {
+                  type: "ghost",
+                  wide: "never",
+                  onClick: onClose,
+                  "aria-label": locale.closeLabel,
+                  children: /*#__PURE__*/_jsx(Close, {})
+                })]
+              })
+            }) : header, /*#__PURE__*/_jsx(Body, {
+              id: bodyId,
+              ...rest,
+              ref: ref,
+              children: children
+            }), footer === undefined ? /*#__PURE__*/_jsx(Footer, {
+              children: /*#__PURE__*/_jsx(Button, {
+                danger: okDanger,
+                loading: okLoading,
+                disabled: okDisabled,
+                onClick: onOk,
+                children: okText
+              })
+            }) : footer]
+          })
+        })
+      })
+    })]
+  });
+});
+Modal.displayName = 'Modal';
+export default Modal;

package/dist/Modal/utils/defaultLocale.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaultLocale.d.ts","sourceRoot":"","sources":["../../../src/Modal/utils/defaultLocale.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC1B,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,aAAa,EAAE,WAEpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/Modal/utils/defaultLocale.js

@@ -0,0 +1,4 @@
+const defaultLocale = {
+  closeLabel: 'Close'
+};
+export default defaultLocale;

package/dist/Navigation/index.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+export interface NavigationProps extends JsxDivProps {
+    /**
+     * The top component in the side navigator.
+     * E.g. the user avatar.
+     * @default undefined
+     */
+    sideTop?: React.ReactNode;
+    /**
+     * The bottom component in the side navigator.
+     * E.g. the current tariff.
+     * @default undefined
+     */
+    sideBottom?: React.ReactNode;
+}
+/**
+ * The main navigation.
+ */
+declare const Navigation: React.ForwardRefExoticComponent<NavigationProps & React.RefAttributes<HTMLDivElement>>;
+export default Navigation;
+//# sourceMappingURL=index.d.ts.map

package/dist/Navigation/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Navigation/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAGlD,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAClD;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AA0JD;;GAEG;AACH,QAAA,MAAM,UAAU,wFA0Bf,CAAC;AAIF,eAAe,UAAU,CAAC"}

package/dist/Navigation/index.js

@@ -0,0 +1,170 @@
+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';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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__*/_jsx(Container, {
+    role: "navigation",
+    "aria-label": "Main navigation",
+    ...rest,
+    ref: ref,
+    children: /*#__PURE__*/_jsxs(Content, {
+      hasSideTop: !!sideTop,
+      hasPrev: hasPrev,
+      hasNext: hasNext,
+      ref: contentRef,
+      role: "list",
+      children: [sideTop && /*#__PURE__*/_jsx(Addon, {
+        children: sideTop
+      }), children, sideBottom && /*#__PURE__*/_jsx(BottomAddon, {
+        children: sideBottom
+      })]
+    })
+  });
+});
+Navigation.displayName = 'Navigation';
+export default Navigation;

package/dist/Navigation/utils/useScrollFlags.d.ts

@@ -0,0 +1,8 @@
+import { type RefObject } from 'react';
+interface UseScrollFlagsRes {
+    hasPrev: boolean;
+    hasNext: boolean;
+}
+declare const useScrollFlags: (ref: RefObject<Element>) => UseScrollFlagsRes;
+export default useScrollFlags;
+//# sourceMappingURL=useScrollFlags.d.ts.map

package/dist/Navigation/utils/useScrollFlags.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollFlags.d.ts","sourceRoot":"","sources":["../../../src/Navigation/utils/useScrollFlags.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAyB,MAAM,OAAO,CAAC;AAE9D,UAAU,iBAAiB;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,QAAA,MAAM,cAAc,QAAS,SAAS,CAAC,OAAO,CAAC,KAAG,iBA2BjD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/Navigation/utils/useScrollFlags.js

@@ -0,0 +1,24 @@
+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;

package/dist/NavigationItem/index.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { LinkProps, ReactRouterLinkProps } from '../Link';
+type JsxAProps = Omit<JSX.IntrinsicElements['a'], 'ref'>;
+export interface NavigationItemProps extends JsxAProps, ReactRouterLinkProps, Pick<LinkProps, 'as'> {
+    /**
+     * The icon of the item.
+     * @default undefined
+     */
+    icon: React.ReactElement;
+    /**
+     * Whether the item is the current page.
+     * @default false
+     */
+    currentPage?: boolean;
+}
+/**
+ * The item of the navigation.
+ */
+declare const NavigationItem: React.ForwardRefExoticComponent<NavigationItemProps & React.RefAttributes<HTMLAnchorElement>>;
+export default NavigationItem;
+//# sourceMappingURL=index.d.ts.map

package/dist/NavigationItem/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/NavigationItem/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,KAAK,EAAE,SAAS,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAE/D,KAAK,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,CAAC;AACzD,MAAM,WAAW,mBACf,SAAQ,SAAS,EACf,oBAAoB,EACpB,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC;IACvB;;;OAGG;IACH,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC;IACzB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AA2ED;;GAEG;AACH,QAAA,MAAM,cAAc,+FA6BnB,CAAC;AAIF,eAAe,cAAc,CAAC"}

package/dist/NavigationItem/index.js

@@ -0,0 +1,103 @@
+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';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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__*/_jsx("div", {
+  role: "listitem",
+  children: /*#__PURE__*/_jsxs(NavigationLink, {
+    currentPage: currentPage,
+    as: as,
+    onMouseDown: e => {
+      onMouseDown(e);
+      e.preventDefault();
+    },
+    "aria-current": currentPage ? 'page' : undefined,
+    ...rest,
+    ref: ref,
+    children: [/*#__PURE__*/_jsx(IconContainer, {
+      children: icon
+    }), children && /*#__PURE__*/_jsx(Title, {
+      children: children
+    })]
+  })
+}));
+NavigationItem.displayName = 'NavigationItem';
+export default NavigationItem;

package/dist/PageContent/index.d.ts

@@ -0,0 +1,20 @@
+type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+export interface PageContentProps extends JsxDivProps {
+    /**
+     * Whether there is the list in the page content.
+     * @default false
+     */
+    hasList?: boolean;
+    /**
+     * Additional upper indent (em).
+     * It can be used, for example, if you have an additional fixed header.
+     * @default 0
+     */
+    marginTop?: number;
+}
+/**
+ * The wrapper that adds padding to the page content.
+ */
+declare const PageContent: import("react").ForwardRefExoticComponent<PageContentProps & import("react").RefAttributes<HTMLElement>>;
+export default PageContent;
+//# sourceMappingURL=index.d.ts.map

package/dist/PageContent/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/PageContent/index.tsx"],"names":[],"mappings":"AAQA,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA2DD;;GAEG;AACH,QAAA,MAAM,WAAW,0GAiBhB,CAAC;AAIF,eAAe,WAAW,CAAC"}