@os-design/core 1.0.253 → 1.0.255

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["styled","React","forwardRef","ListItem","Skeleton","Content","div","DescriptionSkeleton","p","theme","sizes","small","ListItemSkeleton","hasDescription","titleWidth","descriptionWidth","children","rest","ref","createElement","_extends","width","displayName"],"sources":["../../../src/ListItemSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport ListItem, { ListItemProps } from '../ListItem';\nimport Skeleton from '../Skeleton';\n\nexport interface ListItemSkeletonProps\n  extends Omit<ListItemProps, 'title' | 'description' | 'actions'> {\n  /**\n   * The description placeholder.\n   * @default false\n   */\n  hasDescription?: boolean;\n  /**\n   * The width of the title.\n   * @default 30%\n   */\n  titleWidth?: string;\n  /**\n   * The width of the description.\n   * @default 40%\n   */\n  descriptionWidth?: string;\n}\n\nconst Content = styled.div`\n  width: 100%;\n`;\n\nconst DescriptionSkeleton = styled(Skeleton)`\n  height: ${(p) => p.theme.sizes.small}em;\n  margin-top: 0.3em;\n`;\n\n/**\n * Provides a list item placeholder while a user waits for the content to load.\n */\nconst ListItemSkeleton = forwardRef<HTMLDivElement, ListItemSkeletonProps>(\n  (\n    {\n      hasDescription = false,\n      titleWidth = '30%',\n      descriptionWidth = '40%',\n      children,\n      ...rest\n    },\n    ref\n  ) => (\n    <ListItem {...rest} ref={ref}>\n      {children || (\n        <Content>\n          <Skeleton width={titleWidth} />\n          {hasDescription && <DescriptionSkeleton width={descriptionWidth} />}\n        </Content>\n      )}\n    </ListItem>\n  )\n);\n\nListItemSkeleton.displayName = 'ListItemSkeleton';\n\nexport default ListItemSkeleton;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,QAAQ,MAAyB,aAAa;AACrD,OAAOC,QAAQ,MAAM,aAAa;AAqBlC,MAAMC,OAAO,GAAGL,MAAM,CAACM,GAAI;AAC3B;AACA,CAAC;AAED,MAAMC,mBAAmB,GAAGP,MAAM,CAACI,QAAQ,CAAE;AAC7C,YAAaI,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACC,KAAK,CAACC,KAAM;AACvC;AACA,CAAC;;AAED;AACA;AACA;AACA,MAAMC,gBAAgB,gBAAGV,UAAU,CACjC,CACE;EACEW,cAAc,GAAG,KAAK;EACtBC,UAAU,GAAG,KAAK;EAClBC,gBAAgB,GAAG,KAAK;EACxBC,QAAQ;EACR,GAAGC;AACL,CAAC,EACDC,GAAG,kBAEHjB,KAAA,CAAAkB,aAAA,CAAChB,QAAQ,EAAAiB,QAAA,KAAKH,IAAI;EAAEC,GAAG,EAAEA;AAAI,IAC1BF,QAAQ,iBACPf,KAAA,CAAAkB,aAAA,CAACd,OAAO,qBACNJ,KAAA,CAAAkB,aAAA,CAACf,QAAQ;EAACiB,KAAK,EAAEP;AAAW,CAAE,CAAC,EAC9BD,cAAc,iBAAIZ,KAAA,CAAAkB,aAAA,CAACZ,mBAAmB;EAACc,KAAK,EAAEN;AAAiB,CAAE,CAC3D,CAEH,CAEd,CAAC;AAEDH,gBAAgB,CAACU,WAAW,GAAG,kBAAkB;AAEjD,eAAeV,gBAAgB","ignoreList":[]}
+{"version":3,"file":"index.js","names":["styled","React","forwardRef","ListItem","Skeleton","Content","div","DescriptionSkeleton","p","theme","sizes","small","ListItemSkeleton","hasDescription","titleWidth","descriptionWidth","children","rest","ref","createElement","_extends","width","displayName"],"sources":["../../../src/ListItemSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport ListItem, { ListItemProps } from '../ListItem';\nimport Skeleton from '../Skeleton';\n\nexport interface ListItemSkeletonProps\n  extends Omit<ListItemProps, 'title' | 'description' | 'actions'> {\n  /**\n   * The description placeholder.\n   * @default false\n   */\n  hasDescription?: boolean;\n  /**\n   * The width of the title.\n   * @default 30%\n   */\n  titleWidth?: string;\n  /**\n   * The width of the description.\n   * @default 40%\n   */\n  descriptionWidth?: string;\n}\n\nconst Content = styled.div`\n  width: 100%;\n`;\n\nconst DescriptionSkeleton = styled(Skeleton)`\n  height: ${(p) => p.theme.sizes.small}em;\n  margin-top: 0.3em;\n`;\n\n/**\n * Provides a list item placeholder while a user waits for the content to load.\n */\nconst ListItemSkeleton = forwardRef<HTMLDivElement, ListItemSkeletonProps>(\n  (\n    {\n      hasDescription = false,\n      titleWidth = '30%',\n      descriptionWidth = '40%',\n      children,\n      ...rest\n    },\n    ref\n  ) => (\n    <ListItem {...rest} ref={ref}>\n      {children || (\n        <Content>\n          <Skeleton width={titleWidth} />\n          {hasDescription && <DescriptionSkeleton width={descriptionWidth} />}\n        </Content>\n      )}\n    </ListItem>\n  )\n);\n\nListItemSkeleton.displayName = 'ListItemSkeleton';\n\nexport default ListItemSkeleton;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,QAAQ,MAAyB,aAAa;AACrD,OAAOC,QAAQ,MAAM,aAAa;AAqBlC,MAAMC,OAAO,GAAGL,MAAM,CAACM,GAAG;AAC1B;AACA,CAAC;AAED,MAAMC,mBAAmB,GAAGP,MAAM,CAACI,QAAQ,CAAC;AAC5C,YAAaI,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACC,KAAK,CAACC,KAAK;AACtC;AACA,CAAC;;AAED;AACA;AACA;AACA,MAAMC,gBAAgB,gBAAGV,UAAU,CACjC,CACE;EACEW,cAAc,GAAG,KAAK;EACtBC,UAAU,GAAG,KAAK;EAClBC,gBAAgB,GAAG,KAAK;EACxBC,QAAQ;EACR,GAAGC;AACL,CAAC,EACDC,GAAG,kBAEHjB,KAAA,CAAAkB,aAAA,CAAChB,QAAQ,EAAAiB,QAAA,KAAKH,IAAI;EAAEC,GAAG,EAAEA;AAAI,IAC1BF,QAAQ,iBACPf,KAAA,CAAAkB,aAAA,CAACd,OAAO,qBACNJ,KAAA,CAAAkB,aAAA,CAACf,QAAQ;EAACiB,KAAK,EAAEP;AAAW,CAAE,CAAC,EAC9BD,cAAc,iBAAIZ,KAAA,CAAAkB,aAAA,CAACZ,mBAAmB;EAACc,KAAK,EAAEN;AAAiB,CAAE,CAC3D,CAEH,CAEd,CAAC;AAEDH,gBAAgB,CAACU,WAAW,GAAG,kBAAkB;AAEjD,eAAeV,gBAAgB","ignoreList":[]}

package/dist/esm/ListSkeleton/index.js

@@ -1,4 +1,4 @@
-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 _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React, { forwardRef, useCallback } from 'react';
 import List from '../List';
 import ListItemSkeleton from '../ListItemSkeleton';

package/dist/esm/LogoLink/index.js

@@ -1,4 +1,4 @@
-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 _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { resetFocusStyles, sizeStyles, transitionStyles } from '@os-design/styles';

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["css","styled","resetFocusStyles","sizeStyles","transitionStyles","useTheme","omitEmotionProps","React","forwardRef","darkStyles","p","dark","StyledLogoLink","LogoLink","src","as","onMouseDown","rest","ref","activeTheme","ariaLabel","createElement","_extends","e","preventDefault","alt","displayName"],"sources":["../../../src/LogoLink/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport {\n  resetFocusStyles,\n  sizeStyles,\n  transitionStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { useTheme } 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 LogoLinkProps\n  extends JsxAProps,\n    ReactRouterLinkProps,\n    Pick<LinkProps, 'as'>,\n    WithSize {\n  /**\n   * The source of the logo image.\n   */\n  src?: string;\n}\n\nconst darkStyles = (p) =>\n  p.dark &&\n  css`\n    img {\n      filter: brightness(0) invert(1); // Make the logo white\n    }\n  `;\n\ninterface StyledLogoLinkProps extends WithSize {\n  dark: boolean;\n}\nconst StyledLogoLink = styled(\n  'a',\n  omitEmotionProps('dark', 'size', 'as')\n)<StyledLogoLinkProps>`\n  ${resetFocusStyles};\n  cursor: pointer;\n  text-decoration: none;\n  display: block;\n  height: 1.5em;\n\n  img {\n    display: block;\n    height: 100%;\n    transform: rotate(0); // Fixes moves on hover\n  }\n\n  @media (hover: hover) {\n    &:hover,\n    &:focus {\n      opacity: 0.7;\n    }\n  }\n\n  ${darkStyles};\n  ${sizeStyles};\n  ${transitionStyles('opacity')};\n`;\n\n/**\n * Logo with a link.\n */\nconst LogoLink = forwardRef<HTMLAnchorElement, LogoLinkProps>(\n  ({ src, as, onMouseDown = () => {}, ...rest }, ref) => {\n    const { activeTheme } = useTheme();\n    const ariaLabel = rest['aria-label'] || 'Logo';\n\n    return (\n      <StyledLogoLink\n        dark={activeTheme === 'dark'}\n        aria-label={ariaLabel}\n        as={as}\n        onMouseDown={(e) => {\n          onMouseDown(e);\n          e.preventDefault();\n        }}\n        {...rest}\n        ref={ref}\n      >\n        <img src={src} alt={ariaLabel} />\n      </StyledLogoLink>\n    );\n  }\n);\n\nLogoLink.displayName = 'LogoLink';\n\nexport default LogoLink;\n"],"mappings":";AAAA,SAASA,GAAG,QAAQ,gBAAgB;AACpC,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SACEC,gBAAgB,EAChBC,UAAU,EACVC,gBAAgB,QAEX,mBAAmB;AAC1B,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AAezC,MAAMC,UAAU,GAAIC,CAAC,IACnBA,CAAC,CAACC,IAAI,IACNX,GAAI;AACN;AACA;AACA;AACA,GAAG;AAKH,MAAMY,cAAc,GAAGX,MAAM,CAC3B,GAAG,EACHK,gBAAgB,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CACvC,CAAuB;AACvB,IAAIJ,gBAAiB;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIO,UAAW;AACf,IAAIN,UAAW;AACf,IAAIC,gBAAgB,CAAC,SAAS,CAAE;AAChC,CAAC;;AAED;AACA;AACA;AACA,MAAMS,QAAQ,gBAAGL,UAAU,CACzB,CAAC;EAAEM,GAAG;EAAEC,EAAE;EAAEC,WAAW,GAAGA,CAAA,KAAM,CAAC,CAAC;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,KAAK;EACrD,MAAM;IAAEC;EAAY,CAAC,GAAGd,QAAQ,CAAC,CAAC;EAClC,MAAMe,SAAS,GAAGH,IAAI,CAAC,YAAY,CAAC,IAAI,MAAM;EAE9C,oBACEV,KAAA,CAAAc,aAAA,CAACT,cAAc,EAAAU,QAAA;IACbX,IAAI,EAAEQ,WAAW,KAAK,MAAO;IAC7B,cAAYC,SAAU;IACtBL,EAAE,EAAEA,EAAG;IACPC,WAAW,EAAGO,CAAC,IAAK;MAClBP,WAAW,CAACO,CAAC,CAAC;MACdA,CAAC,CAACC,cAAc,CAAC,CAAC;IACpB;EAAE,GACEP,IAAI;IACRC,GAAG,EAAEA;EAAI,iBAETX,KAAA,CAAAc,aAAA;IAAKP,GAAG,EAAEA,GAAI;IAACW,GAAG,EAAEL;EAAU,CAAE,CAClB,CAAC;AAErB,CACF,CAAC;AAEDP,QAAQ,CAACa,WAAW,GAAG,UAAU;AAEjC,eAAeb,QAAQ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["css","styled","resetFocusStyles","sizeStyles","transitionStyles","useTheme","omitEmotionProps","React","forwardRef","darkStyles","p","dark","StyledLogoLink","LogoLink","src","as","onMouseDown","rest","ref","activeTheme","ariaLabel","createElement","_extends","e","preventDefault","alt","displayName"],"sources":["../../../src/LogoLink/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport {\n  resetFocusStyles,\n  sizeStyles,\n  transitionStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { useTheme } 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 LogoLinkProps\n  extends JsxAProps,\n    ReactRouterLinkProps,\n    Pick<LinkProps, 'as'>,\n    WithSize {\n  /**\n   * The source of the logo image.\n   */\n  src?: string;\n}\n\nconst darkStyles = (p) =>\n  p.dark &&\n  css`\n    img {\n      filter: brightness(0) invert(1); // Make the logo white\n    }\n  `;\n\ninterface StyledLogoLinkProps extends WithSize {\n  dark: boolean;\n}\nconst StyledLogoLink = styled(\n  'a',\n  omitEmotionProps('dark', 'size', 'as')\n)<StyledLogoLinkProps>`\n  ${resetFocusStyles};\n  cursor: pointer;\n  text-decoration: none;\n  display: block;\n  height: 1.5em;\n\n  img {\n    display: block;\n    height: 100%;\n    transform: rotate(0); // Fixes moves on hover\n  }\n\n  @media (hover: hover) {\n    &:hover,\n    &:focus {\n      opacity: 0.7;\n    }\n  }\n\n  ${darkStyles};\n  ${sizeStyles};\n  ${transitionStyles('opacity')};\n`;\n\n/**\n * Logo with a link.\n */\nconst LogoLink = forwardRef<HTMLAnchorElement, LogoLinkProps>(\n  ({ src, as, onMouseDown = () => {}, ...rest }, ref) => {\n    const { activeTheme } = useTheme();\n    const ariaLabel = rest['aria-label'] || 'Logo';\n\n    return (\n      <StyledLogoLink\n        dark={activeTheme === 'dark'}\n        aria-label={ariaLabel}\n        as={as}\n        onMouseDown={(e) => {\n          onMouseDown(e);\n          e.preventDefault();\n        }}\n        {...rest}\n        ref={ref}\n      >\n        <img src={src} alt={ariaLabel} />\n      </StyledLogoLink>\n    );\n  }\n);\n\nLogoLink.displayName = 'LogoLink';\n\nexport default LogoLink;\n"],"mappings":";AAAA,SAASA,GAAG,QAAQ,gBAAgB;AACpC,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SACEC,gBAAgB,EAChBC,UAAU,EACVC,gBAAgB,QAEX,mBAAmB;AAC1B,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AAezC,MAAMC,UAAU,GAAIC,CAAC,IACnBA,CAAC,CAACC,IAAI,IACNX,GAAG;AACL;AACA;AACA;AACA,GAAG;AAKH,MAAMY,cAAc,GAAGX,MAAM,CAC3B,GAAG,EACHK,gBAAgB,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CACvC,CAAsB;AACtB,IAAIJ,gBAAgB;AACpB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIO,UAAU;AACd,IAAIN,UAAU;AACd,IAAIC,gBAAgB,CAAC,SAAS,CAAC;AAC/B,CAAC;;AAED;AACA;AACA;AACA,MAAMS,QAAQ,gBAAGL,UAAU,CACzB,CAAC;EAAEM,GAAG;EAAEC,EAAE;EAAEC,WAAW,GAAGA,CAAA,KAAM,CAAC,CAAC;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,KAAK;EACrD,MAAM;IAAEC;EAAY,CAAC,GAAGd,QAAQ,CAAC,CAAC;EAClC,MAAMe,SAAS,GAAGH,IAAI,CAAC,YAAY,CAAC,IAAI,MAAM;EAE9C,oBACEV,KAAA,CAAAc,aAAA,CAACT,cAAc,EAAAU,QAAA;IACbX,IAAI,EAAEQ,WAAW,KAAK,MAAO;IAC7B,cAAYC,SAAU;IACtBL,EAAE,EAAEA,EAAG;IACPC,WAAW,EAAGO,CAAC,IAAK;MAClBP,WAAW,CAACO,CAAC,CAAC;MACdA,CAAC,CAACC,cAAc,CAAC,CAAC;IACpB;EAAE,GACEP,IAAI;IACRC,GAAG,EAAEA;EAAI,iBAETX,KAAA,CAAAc,aAAA;IAAKP,GAAG,EAAEA,GAAI;IAACW,GAAG,EAAEL;EAAU,CAAE,CAClB,CAAC;AAErB,CACF,CAAC;AAEDP,QAAQ,CAACa,WAAW,GAAG,UAAU;AAEjC,eAAeb,QAAQ","ignoreList":[]}

package/dist/esm/Menu/index.js

@@ -1,4 +1,4 @@
-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 _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import styled from '@emotion/styled';
 import { useIsMinWidth } from '@os-design/media';
 import { MenuContext } from '@os-design/menu-utils';

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["styled","useIsMinWidth","MenuContext","enableScrollingStyles","useBrowserLayoutEffect","useForwardedRef","useKeyPress","React","forwardRef","useMemo","Modal","Popover","useFocusWithArrows","StyledPopover","p","theme","menuPaddingVertical","menuMinWidth","menuMaxHeight","StyledModal","Menu","closeOnSelect","modalTitle","trigger","placement","visible","onClose","size","className","id","children","rest","ref","containerRef","mergedContainerRef","window","undefined","isMinXs","menuId","Math","random","toString","slice","current","setAttribute","contextValue","createElement","Provider","value","_extends","role","title","footer","displayName"],"sources":["../../../src/Menu/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { useIsMinWidth } from '@os-design/media';\nimport { MenuContext } from '@os-design/menu-utils';\nimport { enableScrollingStyles } from '@os-design/styles';\nimport {\n  useBrowserLayoutEffect,\n  useForwardedRef,\n  useKeyPress,\n} from '@os-design/utils';\nimport React, { forwardRef, RefObject, useMemo } from 'react';\nimport Modal from '../Modal';\nimport Popover, { PopoverProps } from '../Popover';\nimport useFocusWithArrows from './utils/useFocusWithArrows';\n\nexport interface MenuProps extends PopoverProps {\n  /**\n   * Whether the menu closes when the user selects a menu item.\n   * @default true\n   */\n  closeOnSelect?: boolean;\n  /**\n   * The title of the modal.\n   * @default undefined\n   */\n  modalTitle?: string;\n}\n\nconst StyledPopover = styled(Popover)`\n  padding: ${(p) => p.theme.menuPaddingVertical}em 0;\n  min-width: ${(p) => p.theme.menuMinWidth}em;\n  max-height: ${(p) => p.theme.menuMaxHeight}em;\n  overflow: hidden;\n  ${enableScrollingStyles('y')};\n`;\n\nconst StyledModal = styled(Modal)`\n  padding-left: 0;\n  padding-right: 0;\n`;\n\n/**\n * The dropdown menu.\n */\nconst Menu = forwardRef<HTMLDivElement, MenuProps>(\n  (\n    {\n      closeOnSelect = true,\n      modalTitle,\n      trigger,\n      placement = 'bottom-start',\n      visible,\n      onClose = () => {},\n      size,\n      className,\n      id,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n    useFocusWithArrows(containerRef);\n    useKeyPress(\n      (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n      'Escape',\n      onClose\n    );\n    const isMinXs = useIsMinWidth('xs');\n\n    const menuId = useMemo(\n      () => id || `menu-${Math.random().toString(36).slice(2, 11)}`,\n      [id]\n    );\n\n    // Replace the aria-haspopup attribute from true to menu\n    useBrowserLayoutEffect(() => {\n      if (!trigger) return;\n      const { current } = trigger as RefObject<Element>;\n      if (!current) return;\n      current.setAttribute('aria-haspopup', 'menu');\n      current.setAttribute('aria-controls', menuId);\n    }, [menuId]);\n\n    const contextValue = useMemo(\n      () => ({ closeOnSelect, onClose }),\n      [closeOnSelect, onClose]\n    );\n\n    return (\n      <MenuContext.Provider value={contextValue}>\n        {isMinXs ? (\n          <StyledPopover\n            trigger={trigger}\n            placement={placement}\n            visible={visible}\n            onClose={onClose}\n            size={size}\n            className={className}\n            id={menuId}\n            role='menu'\n            {...rest}\n            ref={mergedContainerRef}\n          >\n            {children}\n          </StyledPopover>\n        ) : (\n          <StyledModal\n            title={modalTitle}\n            footer={null}\n            visible={visible}\n            onClose={onClose}\n            size={size}\n            className={className}\n            id={menuId}\n            role='menu'\n            ref={mergedContainerRef}\n          >\n            {children}\n          </StyledModal>\n        )}\n      </MenuContext.Provider>\n    );\n  }\n);\n\nMenu.displayName = 'Menu';\n\nexport default Menu;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["styled","useIsMinWidth","MenuContext","enableScrollingStyles","useBrowserLayoutEffect","useForwardedRef","useKeyPress","React","forwardRef","useMemo","Modal","Popover","useFocusWithArrows","StyledPopover","p","theme","menuPaddingVertical","menuMinWidth","menuMaxHeight","StyledModal","Menu","closeOnSelect","modalTitle","trigger","placement","visible","onClose","size","className","id","children","rest","ref","containerRef","mergedContainerRef","window","undefined","isMinXs","menuId","Math","random","toString","slice","current","setAttribute","contextValue","createElement","Provider","value","_extends","role","title","footer","displayName"],"sources":["../../../src/Menu/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { useIsMinWidth } from '@os-design/media';\nimport { MenuContext } from '@os-design/menu-utils';\nimport { enableScrollingStyles } from '@os-design/styles';\nimport {\n  useBrowserLayoutEffect,\n  useForwardedRef,\n  useKeyPress,\n} from '@os-design/utils';\nimport React, { forwardRef, RefObject, useMemo } from 'react';\nimport Modal from '../Modal';\nimport Popover, { PopoverProps } from '../Popover';\nimport useFocusWithArrows from './utils/useFocusWithArrows';\n\nexport interface MenuProps extends PopoverProps {\n  /**\n   * Whether the menu closes when the user selects a menu item.\n   * @default true\n   */\n  closeOnSelect?: boolean;\n  /**\n   * The title of the modal.\n   * @default undefined\n   */\n  modalTitle?: string;\n}\n\nconst StyledPopover = styled(Popover)`\n  padding: ${(p) => p.theme.menuPaddingVertical}em 0;\n  min-width: ${(p) => p.theme.menuMinWidth}em;\n  max-height: ${(p) => p.theme.menuMaxHeight}em;\n  overflow: hidden;\n  ${enableScrollingStyles('y')};\n`;\n\nconst StyledModal = styled(Modal)`\n  padding-left: 0;\n  padding-right: 0;\n`;\n\n/**\n * The dropdown menu.\n */\nconst Menu = forwardRef<HTMLDivElement, MenuProps>(\n  (\n    {\n      closeOnSelect = true,\n      modalTitle,\n      trigger,\n      placement = 'bottom-start',\n      visible,\n      onClose = () => {},\n      size,\n      className,\n      id,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n    useFocusWithArrows(containerRef);\n    useKeyPress(\n      (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n      'Escape',\n      onClose\n    );\n    const isMinXs = useIsMinWidth('xs');\n\n    const menuId = useMemo(\n      () => id || `menu-${Math.random().toString(36).slice(2, 11)}`,\n      [id]\n    );\n\n    // Replace the aria-haspopup attribute from true to menu\n    useBrowserLayoutEffect(() => {\n      if (!trigger) return;\n      const { current } = trigger as RefObject<Element>;\n      if (!current) return;\n      current.setAttribute('aria-haspopup', 'menu');\n      current.setAttribute('aria-controls', menuId);\n    }, [menuId]);\n\n    const contextValue = useMemo(\n      () => ({ closeOnSelect, onClose }),\n      [closeOnSelect, onClose]\n    );\n\n    return (\n      <MenuContext.Provider value={contextValue}>\n        {isMinXs ? (\n          <StyledPopover\n            trigger={trigger}\n            placement={placement}\n            visible={visible}\n            onClose={onClose}\n            size={size}\n            className={className}\n            id={menuId}\n            role='menu'\n            {...rest}\n            ref={mergedContainerRef}\n          >\n            {children}\n          </StyledPopover>\n        ) : (\n          <StyledModal\n            title={modalTitle}\n            footer={null}\n            visible={visible}\n            onClose={onClose}\n            size={size}\n            className={className}\n            id={menuId}\n            role='menu'\n            ref={mergedContainerRef}\n          >\n            {children}\n          </StyledModal>\n        )}\n      </MenuContext.Provider>\n    );\n  }\n);\n\nMenu.displayName = 'Menu';\n\nexport default Menu;\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/MenuDivider/index.js

@@ -1,4 +1,4 @@
-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 _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import styled from '@emotion/styled';
 import { clr } from '@os-design/theming';
 import React, { forwardRef } from 'react';

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["styled","clr","React","forwardRef","Container","div","p","theme","menuDividerColor","MenuDivider","props","ref","createElement","_extends","role","displayName"],"sources":["../../../src/MenuDivider/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { clr } from '@os-design/theming';\nimport React, { forwardRef } from 'react';\n\nexport type MenuDividerProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\n\nconst Container = styled.div`\n  padding-top: 0.4em;\n  border-bottom: 1px solid ${(p) => clr(p.theme.menuDividerColor)};\n  margin-bottom: 0.4em;\n`;\n\n/**\n * The divider of menu items.\n */\nconst MenuDivider = forwardRef<HTMLDivElement, MenuDividerProps>(\n  (props, ref) => <Container role='separator' {...props} ref={ref} />\n);\n\nMenuDivider.displayName = 'MenuDivider';\n\nexport default MenuDivider;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,GAAG,QAAQ,oBAAoB;AACxC,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AAIzC,MAAMC,SAAS,GAAGJ,MAAM,CAACK,GAAI;AAC7B;AACA,6BAA8BC,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACC,gBAAgB,CAAE;AAClE;AACA,CAAC;;AAED;AACA;AACA;AACA,MAAMC,WAAW,gBAAGN,UAAU,CAC5B,CAACO,KAAK,EAAEC,GAAG,kBAAKT,KAAA,CAAAU,aAAA,CAACR,SAAS,EAAAS,QAAA;EAACC,IAAI,EAAC;AAAW,GAAKJ,KAAK;EAAEC,GAAG,EAAEA;AAAI,EAAE,CACpE,CAAC;AAEDF,WAAW,CAACM,WAAW,GAAG,aAAa;AAEvC,eAAeN,WAAW","ignoreList":[]}
+{"version":3,"file":"index.js","names":["styled","clr","React","forwardRef","Container","div","p","theme","menuDividerColor","MenuDivider","props","ref","createElement","_extends","role","displayName"],"sources":["../../../src/MenuDivider/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { clr } from '@os-design/theming';\nimport React, { forwardRef } from 'react';\n\nexport type MenuDividerProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\n\nconst Container = styled.div`\n  padding-top: 0.4em;\n  border-bottom: 1px solid ${(p) => clr(p.theme.menuDividerColor)};\n  margin-bottom: 0.4em;\n`;\n\n/**\n * The divider of menu items.\n */\nconst MenuDivider = forwardRef<HTMLDivElement, MenuDividerProps>(\n  (props, ref) => <Container role='separator' {...props} ref={ref} />\n);\n\nMenuDivider.displayName = 'MenuDivider';\n\nexport default MenuDivider;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,GAAG,QAAQ,oBAAoB;AACxC,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AAIzC,MAAMC,SAAS,GAAGJ,MAAM,CAACK,GAAG;AAC5B;AACA,6BAA8BC,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACC,gBAAgB,CAAC;AACjE;AACA,CAAC;;AAED;AACA;AACA;AACA,MAAMC,WAAW,gBAAGN,UAAU,CAC5B,CAACO,KAAK,EAAEC,GAAG,kBAAKT,KAAA,CAAAU,aAAA,CAACR,SAAS,EAAAS,QAAA;EAACC,IAAI,EAAC;AAAW,GAAKJ,KAAK;EAAEC,GAAG,EAAEA;AAAI,EAAE,CACpE,CAAC;AAEDF,WAAW,CAACM,WAAW,GAAG,aAAa;AAEvC,eAAeN,WAAW","ignoreList":[]}

package/dist/esm/MenuGroup/index.js

@@ -1,4 +1,4 @@
-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 _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import styled from '@emotion/styled';
 import { m } from '@os-design/media';
 import { MenuContext } from '@os-design/menu-utils';

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["styled","m","MenuContext","ellipsisStyles","clr","useForwardedState","React","forwardRef","useCallback","useContext","useMemo","MenuItem","Title","div","p","theme","sizes","small","menuGroupColorTitle","modalBodyPaddingHorizontal","min","xs","Container","menuGroupColorDivider","modalBodyPaddingVertical","MenuGroup","title","multiple","maxSelectedItems","value","defaultValue","onChange","children","rest","ref","closeOnSelect","forwardedValue","setForwardedValue","onSelect","v","includes","filter","item","length","menuItems","Children","map","child","isValidElement","type","childValue","onClick","childOnClick","props","selected","cloneElement","key","e","role","createElement","_extends","displayName"],"sources":["../../../src/MenuGroup/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { m } from '@os-design/media';\nimport { MenuContext } from '@os-design/menu-utils';\nimport { ellipsisStyles } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { useForwardedState } from '@os-design/utils';\nimport React, { forwardRef, useCallback, useContext, useMemo } from 'react';\nimport MenuItem from '../MenuItem';\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'defaultValue' | 'value' | 'onChange' | 'ref'\n>;\ninterface BaseMenuGroupProps<T> extends JsxDivProps {\n  /**\n   * The title of the menu group.\n   * @default undefined\n   */\n  title?: string;\n  /**\n   * The max number of options that the user can select. Zero means unlimited.\n   * Works only when multiple is true.\n   * @default 0\n   */\n  maxSelectedItems?: number;\n  /**\n   * Selected menu items.\n   * @default undefined\n   */\n  value?: T;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: T;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: T) => void;\n}\ninterface MenuGroupNotMultipleProps extends BaseMenuGroupProps<string | null> {\n  /**\n   * Is it possible to select multiple values.\n   * @default false\n   */\n  multiple?: false;\n}\ninterface MenuGroupMultipleProps extends BaseMenuGroupProps<string[]> {\n  /**\n   * Is it possible to select multiple values.\n   * @default false\n   */\n  multiple: true;\n}\nexport type MenuGroupProps = MenuGroupNotMultipleProps | MenuGroupMultipleProps;\n\nconst Title = styled.div`\n  font-weight: 500;\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.menuGroupColorTitle)};\n  margin-bottom: 0.4em;\n\n  padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n  ${m.min.xs} {\n    padding: 0 0.8em;\n  }\n\n  ${ellipsisStyles};\n`;\n\nconst Container = styled.div`\n  &:not(:last-of-type) {\n    padding-bottom: 0.4em;\n    border-bottom: 1px solid ${(p) => clr(p.theme.menuGroupColorDivider)};\n  }\n  &:not(:first-of-type) {\n    margin-top: ${(p) => p.theme.modalBodyPaddingVertical[0]}em;\n    ${m.min.xs} {\n      margin-top: 0.4em;\n    }\n  }\n`;\n\n/**\n * The group of menu items.\n */\nconst MenuGroup = forwardRef<HTMLDivElement, MenuGroupProps>(\n  (\n    {\n      title,\n      multiple = false,\n      maxSelectedItems = 0,\n      value,\n      defaultValue,\n      onChange = () => {},\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const { closeOnSelect } = useContext(MenuContext);\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const [forwardedValue, setForwardedValue] = useForwardedState<any>({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    const onSelect = useCallback(\n      (v: string) => {\n        if (multiple) {\n          // Delete the value because it was already selected\n          if ((forwardedValue || []).includes(v)) {\n            setForwardedValue(\n              (forwardedValue || []).filter((item) => item !== v)\n            );\n            return;\n          }\n\n          // Add a new value if the number of selected items is less than max\n          if (\n            maxSelectedItems === 0 ||\n            (forwardedValue || []).length < maxSelectedItems\n          ) {\n            setForwardedValue([...(forwardedValue || []), v]);\n            return;\n          }\n          return;\n        }\n        setForwardedValue(v);\n      },\n      [forwardedValue, maxSelectedItems, multiple, setForwardedValue]\n    );\n\n    const menuItems = useMemo(\n      () =>\n        React.Children.map(children, (child) => {\n          if (!React.isValidElement(child) || child.type !== MenuItem)\n            return child;\n          const { value: childValue, onClick: childOnClick } = child.props;\n          const selected =\n            (multiple && (forwardedValue || []).includes(childValue)) ||\n            (!multiple && forwardedValue === childValue);\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\n          return React.cloneElement<any>(child, {\n            key: childValue,\n            selected,\n            onClick: (e) => {\n              if (!childValue) return;\n              onSelect(childValue);\n              if (childOnClick) childOnClick(e);\n            },\n            ...(!closeOnSelect\n              ? {\n                  role:\n                    maxSelectedItems === 1\n                      ? 'menuitemradio'\n                      : 'menuitemcheckbox',\n                  'aria-checked': selected,\n                }\n              : {}),\n          });\n        }),\n      [\n        children,\n        closeOnSelect,\n        forwardedValue,\n        maxSelectedItems,\n        multiple,\n        onSelect,\n      ]\n    );\n\n    return (\n      <Container\n        role={maxSelectedItems === 1 ? 'radiogroup' : 'group'}\n        {...rest}\n        ref={ref}\n      >\n        {title && <Title>{title}</Title>}\n        {menuItems}\n      </Container>\n    );\n  }\n);\n\nMenuGroup.displayName = 'MenuGroup';\n\nexport default MenuGroup;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["styled","m","MenuContext","ellipsisStyles","clr","useForwardedState","React","forwardRef","useCallback","useContext","useMemo","MenuItem","Title","div","p","theme","sizes","small","menuGroupColorTitle","modalBodyPaddingHorizontal","min","xs","Container","menuGroupColorDivider","modalBodyPaddingVertical","MenuGroup","title","multiple","maxSelectedItems","value","defaultValue","onChange","children","rest","ref","closeOnSelect","forwardedValue","setForwardedValue","onSelect","v","includes","filter","item","length","menuItems","Children","map","child","isValidElement","type","childValue","onClick","childOnClick","props","selected","cloneElement","key","e","role","createElement","_extends","displayName"],"sources":["../../../src/MenuGroup/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { m } from '@os-design/media';\nimport { MenuContext } from '@os-design/menu-utils';\nimport { ellipsisStyles } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { useForwardedState } from '@os-design/utils';\nimport React, { forwardRef, useCallback, useContext, useMemo } from 'react';\nimport MenuItem from '../MenuItem';\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'defaultValue' | 'value' | 'onChange' | 'ref'\n>;\ninterface BaseMenuGroupProps<T> extends JsxDivProps {\n  /**\n   * The title of the menu group.\n   * @default undefined\n   */\n  title?: string;\n  /**\n   * The max number of options that the user can select. Zero means unlimited.\n   * Works only when multiple is true.\n   * @default 0\n   */\n  maxSelectedItems?: number;\n  /**\n   * Selected menu items.\n   * @default undefined\n   */\n  value?: T;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: T;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: T) => void;\n}\ninterface MenuGroupNotMultipleProps extends BaseMenuGroupProps<string | null> {\n  /**\n   * Is it possible to select multiple values.\n   * @default false\n   */\n  multiple?: false;\n}\ninterface MenuGroupMultipleProps extends BaseMenuGroupProps<string[]> {\n  /**\n   * Is it possible to select multiple values.\n   * @default false\n   */\n  multiple: true;\n}\nexport type MenuGroupProps = MenuGroupNotMultipleProps | MenuGroupMultipleProps;\n\nconst Title = styled.div`\n  font-weight: 500;\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.menuGroupColorTitle)};\n  margin-bottom: 0.4em;\n\n  padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n  ${m.min.xs} {\n    padding: 0 0.8em;\n  }\n\n  ${ellipsisStyles};\n`;\n\nconst Container = styled.div`\n  &:not(:last-of-type) {\n    padding-bottom: 0.4em;\n    border-bottom: 1px solid ${(p) => clr(p.theme.menuGroupColorDivider)};\n  }\n  &:not(:first-of-type) {\n    margin-top: ${(p) => p.theme.modalBodyPaddingVertical[0]}em;\n    ${m.min.xs} {\n      margin-top: 0.4em;\n    }\n  }\n`;\n\n/**\n * The group of menu items.\n */\nconst MenuGroup = forwardRef<HTMLDivElement, MenuGroupProps>(\n  (\n    {\n      title,\n      multiple = false,\n      maxSelectedItems = 0,\n      value,\n      defaultValue,\n      onChange = () => {},\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const { closeOnSelect } = useContext(MenuContext);\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const [forwardedValue, setForwardedValue] = useForwardedState<any>({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    const onSelect = useCallback(\n      (v: string) => {\n        if (multiple) {\n          // Delete the value because it was already selected\n          if ((forwardedValue || []).includes(v)) {\n            setForwardedValue(\n              (forwardedValue || []).filter((item) => item !== v)\n            );\n            return;\n          }\n\n          // Add a new value if the number of selected items is less than max\n          if (\n            maxSelectedItems === 0 ||\n            (forwardedValue || []).length < maxSelectedItems\n          ) {\n            setForwardedValue([...(forwardedValue || []), v]);\n            return;\n          }\n          return;\n        }\n        setForwardedValue(v);\n      },\n      [forwardedValue, maxSelectedItems, multiple, setForwardedValue]\n    );\n\n    const menuItems = useMemo(\n      () =>\n        React.Children.map(children, (child) => {\n          if (!React.isValidElement(child) || child.type !== MenuItem)\n            return child;\n          const { value: childValue, onClick: childOnClick } = child.props;\n          const selected =\n            (multiple && (forwardedValue || []).includes(childValue)) ||\n            (!multiple && forwardedValue === childValue);\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\n          return React.cloneElement<any>(child, {\n            key: childValue,\n            selected,\n            onClick: (e) => {\n              if (!childValue) return;\n              onSelect(childValue);\n              if (childOnClick) childOnClick(e);\n            },\n            ...(!closeOnSelect\n              ? {\n                  role:\n                    maxSelectedItems === 1\n                      ? 'menuitemradio'\n                      : 'menuitemcheckbox',\n                  'aria-checked': selected,\n                }\n              : {}),\n          });\n        }),\n      [\n        children,\n        closeOnSelect,\n        forwardedValue,\n        maxSelectedItems,\n        multiple,\n        onSelect,\n      ]\n    );\n\n    return (\n      <Container\n        role={maxSelectedItems === 1 ? 'radiogroup' : 'group'}\n        {...rest}\n        ref={ref}\n      >\n        {title && <Title>{title}</Title>}\n        {menuItems}\n      </Container>\n    );\n  }\n);\n\nMenuGroup.displayName = 'MenuGroup';\n\nexport default MenuGroup;\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/MenuItem/index.js

@@ -1,4 +1,4 @@
-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 _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { Check } from '@os-design/icons';

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["css","styled","Check","m","MenuContext","ThemeOverrider","clr","omitEmotionProps","React","forwardRef","useCallback","useContext","useEffect","useRef","Button","selectedStyles","p","selected","theme","menuItemSelectedColorBg","StyledButton","menuItemHeight","menuItemPaddingHorizontal","min","xs","SelectedIcon","menuItemSelectedColorIcon","MenuItem","value","right","onClick","rest","ref","closeOnSelect","onClose","onClickRef","current","clickHandler","e","createElement","overrides","buttonGhostColorText","colorText","_extends","type","wide","role","displayName"],"sources":["../../../src/MenuItem/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { Check } from '@os-design/icons';\nimport { m } from '@os-design/media';\nimport { MenuContext } from '@os-design/menu-utils';\nimport { ThemeOverrider, clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, {\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n} from 'react';\nimport Button, { ButtonProps } from '../Button';\n\nexport interface MenuItemProps\n  extends Omit<ButtonProps, 'type' | 'wide' | 'size'> {\n  /**\n   * Whether the menu item is selected.\n   * @default false\n   */\n  selected?: boolean;\n  /**\n   * The value of the menu item.\n   * @default undefined\n   */\n  value?: string;\n}\n\nconst selectedStyles = (p) =>\n  p.selected &&\n  css`\n    background-color: ${clr(p.theme.menuItemSelectedColorBg)};\n  `;\n\ntype StyledButtonProps = Pick<MenuItemProps, 'selected'>;\nconst StyledButton = styled(\n  Button,\n  omitEmotionProps('selected')\n)<StyledButtonProps>`\n  display: flex;\n  font-weight: normal;\n  border-radius: 0;\n  height: ${(p) => p.theme.menuItemHeight}em;\n\n  & > span {\n    flex: 1;\n    text-align: left;\n    overflow: hidden;\n    line-height: 1.5;\n  }\n\n  padding: 0 ${(p) => p.theme.menuItemPaddingHorizontal[0]}em;\n  ${m.min.xs} {\n    padding: 0 ${(p) => p.theme.menuItemPaddingHorizontal[1]}em;\n  }\n\n  ${selectedStyles};\n`;\n\nconst SelectedIcon = styled(Check)`\n  color: ${(p) => clr(p.theme.menuItemSelectedColorIcon)};\n`;\n\n/**\n * The base menu item.\n */\nconst MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>(\n  ({ selected = false, value, right, onClick = () => {}, ...rest }, ref) => {\n    const { closeOnSelect, onClose } = useContext(MenuContext);\n    const onClickRef = useRef<MenuItemProps['onClick']>();\n\n    useEffect(() => {\n      onClickRef.current = onClick;\n    }, [onClick]);\n\n    const clickHandler = useCallback(\n      (e) => {\n        if (onClickRef.current) onClickRef.current(e);\n        if (closeOnSelect) onClose();\n      },\n      [closeOnSelect, onClose]\n    );\n\n    return (\n      <ThemeOverrider\n        overrides={(theme) => ({ buttonGhostColorText: theme.colorText })}\n      >\n        <StyledButton\n          selected={selected}\n          right={selected ? <SelectedIcon /> : right}\n          type='ghost'\n          wide='always'\n          onClick={clickHandler}\n          role='menuitem'\n          {...rest}\n          ref={ref}\n        />\n      </ThemeOverrider>\n    );\n  }\n);\n\nMenuItem.displayName = 'MenuItem';\n\nexport default MenuItem;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["css","styled","Check","m","MenuContext","ThemeOverrider","clr","omitEmotionProps","React","forwardRef","useCallback","useContext","useEffect","useRef","Button","selectedStyles","p","selected","theme","menuItemSelectedColorBg","StyledButton","menuItemHeight","menuItemPaddingHorizontal","min","xs","SelectedIcon","menuItemSelectedColorIcon","MenuItem","value","right","onClick","rest","ref","closeOnSelect","onClose","onClickRef","current","clickHandler","e","createElement","overrides","buttonGhostColorText","colorText","_extends","type","wide","role","displayName"],"sources":["../../../src/MenuItem/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { Check } from '@os-design/icons';\nimport { m } from '@os-design/media';\nimport { MenuContext } from '@os-design/menu-utils';\nimport { ThemeOverrider, clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, {\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n} from 'react';\nimport Button, { ButtonProps } from '../Button';\n\nexport interface MenuItemProps\n  extends Omit<ButtonProps, 'type' | 'wide' | 'size'> {\n  /**\n   * Whether the menu item is selected.\n   * @default false\n   */\n  selected?: boolean;\n  /**\n   * The value of the menu item.\n   * @default undefined\n   */\n  value?: string;\n}\n\nconst selectedStyles = (p) =>\n  p.selected &&\n  css`\n    background-color: ${clr(p.theme.menuItemSelectedColorBg)};\n  `;\n\ntype StyledButtonProps = Pick<MenuItemProps, 'selected'>;\nconst StyledButton = styled(\n  Button,\n  omitEmotionProps('selected')\n)<StyledButtonProps>`\n  display: flex;\n  font-weight: normal;\n  border-radius: 0;\n  height: ${(p) => p.theme.menuItemHeight}em;\n\n  & > span {\n    flex: 1;\n    text-align: left;\n    overflow: hidden;\n    line-height: 1.5;\n  }\n\n  padding: 0 ${(p) => p.theme.menuItemPaddingHorizontal[0]}em;\n  ${m.min.xs} {\n    padding: 0 ${(p) => p.theme.menuItemPaddingHorizontal[1]}em;\n  }\n\n  ${selectedStyles};\n`;\n\nconst SelectedIcon = styled(Check)`\n  color: ${(p) => clr(p.theme.menuItemSelectedColorIcon)};\n`;\n\n/**\n * The base menu item.\n */\nconst MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>(\n  ({ selected = false, value, right, onClick = () => {}, ...rest }, ref) => {\n    const { closeOnSelect, onClose } = useContext(MenuContext);\n    const onClickRef = useRef<MenuItemProps['onClick']>();\n\n    useEffect(() => {\n      onClickRef.current = onClick;\n    }, [onClick]);\n\n    const clickHandler = useCallback(\n      (e) => {\n        if (onClickRef.current) onClickRef.current(e);\n        if (closeOnSelect) onClose();\n      },\n      [closeOnSelect, onClose]\n    );\n\n    return (\n      <ThemeOverrider\n        overrides={(theme) => ({ buttonGhostColorText: theme.colorText })}\n      >\n        <StyledButton\n          selected={selected}\n          right={selected ? <SelectedIcon /> : right}\n          type='ghost'\n          wide='always'\n          onClick={clickHandler}\n          role='menuitem'\n          {...rest}\n          ref={ref}\n        />\n      </ThemeOverrider>\n    );\n  }\n);\n\nMenuItem.displayName = 'MenuItem';\n\nexport default MenuItem;\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/Modal/index.js

@@ -1,4 +1,4 @@
-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 _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import { css, keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
 import { Close } from '@os-design/icons';

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

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

package/dist/esm/Navigation/index.js

@@ -1,4 +1,4 @@
-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 _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { m } from '@os-design/media';

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

@@ -1 +1 @@
-{"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":[]}
+{"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/NavigationItem/index.js

@@ -1,4 +1,4 @@
-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 _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { m } from '@os-design/media';

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

@@ -1 +1 @@
-{"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":[]}
+{"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,4 +1,4 @@
-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 _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { m } from '@os-design/media';

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

@@ -1 +1 @@
-{"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":[]}
+{"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,GAAG;AACL,MAAM,CAACU,CAAC,CAACE,OAAO,IACZZ,GAAG;AACP;AACA,UAAUU,CAAC,CAACG,KAAK,CAACC,mBAAmB;AACrC;AACA,KAAK;AACL,MAAMZ,CAAC,CAACa,GAAG,CAACC,EAAE;AACd;AACA,qBAAqBN,CAAC,CAACG,KAAK,CAACI,mBAAmB;AAChD;AACA,GAAG;AAEH,MAAMC,mBAAmB,GAAIR,CAAC,IAC5BA,CAAC,CAACS,aAAa,IACf,CAACT,CAAC,CAACE,OAAO,IACVZ,GAAG;AACL,kBAAkBU,CAAC,CAACG,KAAK,CAACO,gBAAgB,CAAC,CAAC,CAAC,GAAGV,CAAC,CAACW,SAAS;AAC3D,MAAMnB,CAAC,CAACa,GAAG,CAACC,EAAE;AACd,oBAAoBN,CAAC,CAACG,KAAK,CAACO,gBAAgB,CAAC,CAAC,CAAC,GAAGV,CAAC,CAACW,SAAS;AAC7D;AACA,GAAG;AAEH,MAAMC,gBAAgB,GAAIZ,CAAC,IACzB,CAACA,CAAC,CAACE,OAAO,IACVZ,GAAG;AACL,mBAAmBU,CAAC,CAACG,KAAK,CAACU,0BAA0B;AACrD,sBAAsBb,CAAC,CAACG,KAAK,CAACU,0BAA0B;AACxD,MAAMpB,uBAAuB,CAAC,CAAC,CAACO,CAAC,CAAC;AAClC,GAAG;AAEH,MAAMc,sBAAsB,GAAId,CAAC,IAC/B,CAACA,CAAC,CAACC,aAAa,IAChB,CAACD,CAAC,CAACE,OAAO,IACVZ,GAAG;AACL;AACA,GAAG;AAQH,MAAMyB,SAAS,GAAGxB,MAAM,CACtB,MAAM,EACNG,gBAAgB,CAAC,eAAe,EAAE,eAAe,EAAE,SAAS,EAAE,WAAW,CAC3E,CAAiB;AACjB,gBAAiBM,CAAC,IAAKA,CAAC,CAACW,SAAS;AAClC,IAAIZ,mBAAmB;AACvB,IAAIS,mBAAmB;AACvB,IAAII,gBAAgB;AACpB,IAAIE,sBAAsB;AAC1B,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,4 +1,4 @@
-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 _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { Left } from '@os-design/icons';

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

@@ -1 +1 @@
-{"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":[]}
+{"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/PageHeaderInputSearch/index.js

@@ -1,4 +1,4 @@
-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 _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import { css, keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
 import { Close, Search } from '@os-design/icons';