@os-design/core 1.0.203 → 1.0.205

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useIsMinWidth","useTheme","useFontSize","useForwardedRef","useSafeAreaInset","useSize","React","forwardRef","useCallback","useContext","useMemo","FixedSizeList","LayoutContext","WindowScroller","useRWLoadNext","List","itemCount","itemHeight","threshold","overscanCount","height","heightProp","paddingTop","paddingBottom","style","empty","onLoadNext","itemRenderer","rest","ref","listRef","mergedListRef","size","fontSize","document","body","hasNavigation","hasPageHeader","theme","isMinMd","safeAreaInset","itemSize","paddingTopSize","pageHeaderHeight","paddingBottomSize","navigationTabHeight","bottom","loadNextHandler","windowScrollHandler","top","current","scrollTo","InnerElement","innerStyle","innerRest","createElement","_extends","parseFloat","listChildren","childrenStyle","childrenRest","toString","EmptyComponent","Fragment","renderList","width","onScroll","scrollOffset","undefined","innerElementType","displayName","default"],"sources":["../../../src/List/index.tsx"],"sourcesContent":["import { useIsMinWidth } from '@os-design/media';\nimport { useTheme } from '@os-design/theming';\nimport {\n  useFontSize,\n  useForwardedRef,\n  useSafeAreaInset,\n  useSize,\n} from '@os-design/utils';\n\nimport React, {\n  CSSProperties,\n  forwardRef,\n  useCallback,\n  useContext,\n  useMemo,\n} from 'react';\nimport {\n  FixedSizeList,\n  ListChildComponentProps,\n  ListProps as RWListProps,\n} from 'react-window';\nimport LayoutContext from '../Layout/LayoutContext';\n\nimport WindowScroller, { ScrollPosition } from './WindowScroller';\nimport useRWLoadNext from './utils/useRWLoadNext';\n\nexport interface ListProps extends Partial<RWListProps> {\n  /**\n   * Total number of items in the list.\n   */\n  itemCount: number;\n  /**\n   * The item height in em.\n   * @default 4\n   */\n  itemHeight?: number;\n  /**\n   * A threshold N means that the onLoadNext function calls when a user scrolls all items except N.\n   * @default 10\n   */\n  threshold?: number;\n  /**\n   * Defines how many items outside of the visible \"window\" to render at all times.\n   * @default 10\n   */\n  overscanCount?: number;\n  /**\n   * The height of the list in px.\n   * @default undefined\n   */\n  height?: number;\n  /**\n   * The top padding in em.\n   * @default 0\n   */\n  paddingTop?: number;\n  /**\n   * The bottom padding in em.\n   * @default 0\n   */\n  paddingBottom?: number;\n  /**\n   * The inline css style.\n   * @default undefined\n   */\n  style?: CSSProperties;\n  /**\n   * The component that renders if the list is empty.\n   * @default undefined\n   */\n  empty?: React.ReactNode;\n  /**\n   * The callback to load more items.\n   * @default undefined\n   */\n  onLoadNext?: () => void;\n  /**\n   * The callback to render items.\n   * @default () => null\n   */\n  itemRenderer?: React.FC<ListChildComponentProps>;\n}\n\n/**\n * Virtualized list.\n * Used the react-window library.\n */\nconst List = forwardRef<FixedSizeList, ListProps>(\n  (\n    {\n      itemCount,\n      itemHeight = 4,\n      threshold = 10,\n      overscanCount = 10,\n      height: heightProp,\n      paddingTop = 0,\n      paddingBottom = 0,\n      style = {},\n      empty,\n      onLoadNext = () => {},\n      itemRenderer = () => null,\n      ...rest\n    },\n    ref\n  ) => {\n    const [listRef, mergedListRef] = useForwardedRef(ref);\n    const size = useSize();\n    const fontSize = useFontSize(document.body);\n    const { hasNavigation, hasPageHeader } = useContext(LayoutContext);\n    const { theme } = useTheme();\n    const isMinMd = useIsMinWidth('md');\n    const safeAreaInset = useSafeAreaInset();\n\n    const itemSize = useMemo(\n      () => itemHeight * fontSize,\n      [itemHeight, fontSize]\n    );\n\n    const paddingTopSize = useMemo(\n      () =>\n        ((hasPageHeader ? theme.pageHeaderHeight[isMinMd ? 1 : 0] : 0) +\n          paddingTop) *\n        fontSize,\n      [hasPageHeader, theme.pageHeaderHeight, isMinMd, paddingTop, fontSize]\n    );\n\n    const paddingBottomSize = useMemo(\n      () =>\n        ((hasNavigation && !isMinMd ? theme.navigationTabHeight : 0) +\n          paddingBottom) *\n          fontSize +\n        safeAreaInset.bottom,\n      [\n        hasNavigation,\n        theme.navigationTabHeight,\n        isMinMd,\n        paddingBottom,\n        fontSize,\n        safeAreaInset.bottom,\n      ]\n    );\n\n    const height = useMemo(\n      () => heightProp || size.height,\n      [heightProp, size.height]\n    );\n\n    const loadNextHandler = useRWLoadNext({\n      itemCount,\n      threshold,\n      itemSize,\n      paddingTop: paddingTopSize,\n      height,\n      onLoadNext,\n    });\n\n    const windowScrollHandler = useCallback(\n      ({ top }: ScrollPosition) => {\n        // Set the scroll position to the list\n        if (listRef.current) listRef.current.scrollTo(top);\n        loadNextHandler(top);\n      },\n      [listRef, loadNextHandler]\n    );\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const InnerElement = useCallback(\n      ({ style: innerStyle, ...innerRest }) => (\n        <div\n          style={{\n            ...innerStyle,\n            height: `${\n              parseFloat(innerStyle.height) + paddingTopSize + paddingBottomSize\n            }px`,\n          }}\n          {...innerRest}\n        />\n      ),\n      [paddingBottomSize, paddingTopSize]\n    );\n\n    const listChildren = useCallback<RWListProps['children']>(\n      ({ style: childrenStyle, ...childrenRest }) =>\n        itemRenderer({\n          style: {\n            ...childrenStyle,\n            top: `${\n              parseFloat(\n                childrenStyle.top ? childrenStyle.top.toString() : '0'\n              ) + paddingTopSize\n            }px`,\n          },\n          ...childrenRest,\n        }),\n      [itemRenderer, paddingTopSize]\n    );\n\n    // eslint-disable-next-line react/jsx-no-useless-fragment\n    const EmptyComponent = useCallback(() => <>{empty}</>, [empty]);\n\n    const renderList = useCallback(\n      () => (\n        <FixedSizeList\n          ref={mergedListRef}\n          itemCount={itemCount}\n          width='100%'\n          height={height}\n          itemSize={itemSize}\n          style={heightProp ? style : { ...style, height: '100% important!' }}\n          overscanCount={overscanCount}\n          onScroll={\n            heightProp\n              ? ({ scrollOffset }) => loadNextHandler(scrollOffset)\n              : undefined\n          }\n          innerElementType={itemCount > 0 ? InnerElement : EmptyComponent}\n          {...rest}\n        >\n          {listChildren}\n        </FixedSizeList>\n      ),\n      [\n        EmptyComponent,\n        InnerElement,\n        height,\n        heightProp,\n        itemCount,\n        itemSize,\n        listChildren,\n        loadNextHandler,\n        mergedListRef,\n        overscanCount,\n        rest,\n        style,\n      ]\n    );\n\n    if (heightProp) {\n      return renderList();\n    }\n\n    return (\n      <WindowScroller onScroll={windowScrollHandler}>\n        {renderList()}\n      </WindowScroller>\n    );\n  }\n);\n\nList.displayName = 'List';\n\nexport { default as WindowScroller } from './WindowScroller';\nexport { default as useRWLoadNext } from './utils/useRWLoadNext';\n\nexport default List;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["useIsMinWidth","useTheme","useFontSize","useForwardedRef","useSafeAreaInset","useSize","React","forwardRef","useCallback","useContext","useMemo","FixedSizeList","LayoutContext","WindowScroller","useRWLoadNext","List","itemCount","itemHeight","threshold","overscanCount","height","heightProp","paddingTop","paddingBottom","style","empty","onLoadNext","itemRenderer","rest","ref","listRef","mergedListRef","size","fontSize","document","body","hasNavigation","hasPageHeader","theme","isMinMd","safeAreaInset","itemSize","paddingTopSize","pageHeaderHeight","paddingBottomSize","navigationTabHeight","bottom","loadNextHandler","windowScrollHandler","top","current","scrollTo","InnerElement","innerStyle","innerRest","createElement","_extends","parseFloat","listChildren","childrenStyle","childrenRest","toString","EmptyComponent","Fragment","renderList","width","onScroll","scrollOffset","undefined","innerElementType","displayName","default"],"sources":["../../../src/List/index.tsx"],"sourcesContent":["import { useIsMinWidth } from '@os-design/media';\nimport { useTheme } from '@os-design/theming';\nimport {\n  useFontSize,\n  useForwardedRef,\n  useSafeAreaInset,\n  useSize,\n} from '@os-design/utils';\nimport React, {\n  CSSProperties,\n  forwardRef,\n  useCallback,\n  useContext,\n  useMemo,\n} from 'react';\nimport {\n  FixedSizeList,\n  ListChildComponentProps,\n  ListProps as RWListProps,\n} from 'react-window';\nimport LayoutContext from '../Layout/LayoutContext';\nimport WindowScroller, { ScrollPosition } from './WindowScroller';\nimport useRWLoadNext from './utils/useRWLoadNext';\n\nexport interface ListProps extends Partial<RWListProps> {\n  /**\n   * Total number of items in the list.\n   */\n  itemCount: number;\n  /**\n   * The item height in em.\n   * @default 4\n   */\n  itemHeight?: number;\n  /**\n   * A threshold N means that the onLoadNext function calls when a user scrolls all items except N.\n   * @default 10\n   */\n  threshold?: number;\n  /**\n   * Defines how many items outside of the visible \"window\" to render at all times.\n   * @default 10\n   */\n  overscanCount?: number;\n  /**\n   * The height of the list in px.\n   * @default undefined\n   */\n  height?: number;\n  /**\n   * The top padding in em.\n   * @default 0\n   */\n  paddingTop?: number;\n  /**\n   * The bottom padding in em.\n   * @default 0\n   */\n  paddingBottom?: number;\n  /**\n   * The inline css style.\n   * @default undefined\n   */\n  style?: CSSProperties;\n  /**\n   * The component that renders if the list is empty.\n   * @default undefined\n   */\n  empty?: React.ReactNode;\n  /**\n   * The callback to load more items.\n   * @default undefined\n   */\n  onLoadNext?: () => void;\n  /**\n   * The callback to render items.\n   * @default () => null\n   */\n  itemRenderer?: React.FC<ListChildComponentProps>;\n}\n\n/**\n * Virtualized list.\n * Used the react-window library.\n */\nconst List = forwardRef<FixedSizeList, ListProps>(\n  (\n    {\n      itemCount,\n      itemHeight = 4,\n      threshold = 10,\n      overscanCount = 10,\n      height: heightProp,\n      paddingTop = 0,\n      paddingBottom = 0,\n      style = {},\n      empty,\n      onLoadNext = () => {},\n      itemRenderer = () => null,\n      ...rest\n    },\n    ref\n  ) => {\n    const [listRef, mergedListRef] = useForwardedRef(ref);\n    const size = useSize();\n    const fontSize = useFontSize(document.body);\n    const { hasNavigation, hasPageHeader } = useContext(LayoutContext);\n    const { theme } = useTheme();\n    const isMinMd = useIsMinWidth('md');\n    const safeAreaInset = useSafeAreaInset();\n\n    const itemSize = useMemo(\n      () => itemHeight * fontSize,\n      [itemHeight, fontSize]\n    );\n\n    const paddingTopSize = useMemo(\n      () =>\n        ((hasPageHeader ? theme.pageHeaderHeight[isMinMd ? 1 : 0] : 0) +\n          paddingTop) *\n        fontSize,\n      [hasPageHeader, theme.pageHeaderHeight, isMinMd, paddingTop, fontSize]\n    );\n\n    const paddingBottomSize = useMemo(\n      () =>\n        ((hasNavigation && !isMinMd ? theme.navigationTabHeight : 0) +\n          paddingBottom) *\n          fontSize +\n        safeAreaInset.bottom,\n      [\n        hasNavigation,\n        theme.navigationTabHeight,\n        isMinMd,\n        paddingBottom,\n        fontSize,\n        safeAreaInset.bottom,\n      ]\n    );\n\n    const height = useMemo(\n      () => heightProp || size.height,\n      [heightProp, size.height]\n    );\n\n    const loadNextHandler = useRWLoadNext({\n      itemCount,\n      threshold,\n      itemSize,\n      paddingTop: paddingTopSize,\n      height,\n      onLoadNext,\n    });\n\n    const windowScrollHandler = useCallback(\n      ({ top }: ScrollPosition) => {\n        // Set the scroll position to the list\n        if (listRef.current) listRef.current.scrollTo(top);\n        loadNextHandler(top);\n      },\n      [listRef, loadNextHandler]\n    );\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const InnerElement = useCallback(\n      ({ style: innerStyle, ...innerRest }) => (\n        <div\n          style={{\n            ...innerStyle,\n            height: `${\n              parseFloat(innerStyle.height) + paddingTopSize + paddingBottomSize\n            }px`,\n          }}\n          {...innerRest}\n        />\n      ),\n      [paddingBottomSize, paddingTopSize]\n    );\n\n    const listChildren = useCallback<RWListProps['children']>(\n      ({ style: childrenStyle, ...childrenRest }) =>\n        itemRenderer({\n          style: {\n            ...childrenStyle,\n            top: `${\n              parseFloat(\n                childrenStyle.top ? childrenStyle.top.toString() : '0'\n              ) + paddingTopSize\n            }px`,\n          },\n          ...childrenRest,\n        }),\n      [itemRenderer, paddingTopSize]\n    );\n\n    // eslint-disable-next-line react/jsx-no-useless-fragment\n    const EmptyComponent = useCallback(() => <>{empty}</>, [empty]);\n\n    const renderList = useCallback(\n      () => (\n        <FixedSizeList\n          ref={mergedListRef}\n          itemCount={itemCount}\n          width='100%'\n          height={height}\n          itemSize={itemSize}\n          style={heightProp ? style : { ...style, height: '100% important!' }}\n          overscanCount={overscanCount}\n          onScroll={\n            heightProp\n              ? ({ scrollOffset }) => loadNextHandler(scrollOffset)\n              : undefined\n          }\n          innerElementType={itemCount > 0 ? InnerElement : EmptyComponent}\n          {...rest}\n        >\n          {listChildren}\n        </FixedSizeList>\n      ),\n      [\n        EmptyComponent,\n        InnerElement,\n        height,\n        heightProp,\n        itemCount,\n        itemSize,\n        listChildren,\n        loadNextHandler,\n        mergedListRef,\n        overscanCount,\n        rest,\n        style,\n      ]\n    );\n\n    if (heightProp) {\n      return renderList();\n    }\n\n    return (\n      <WindowScroller onScroll={windowScrollHandler}>\n        {renderList()}\n      </WindowScroller>\n    );\n  }\n);\n\nList.displayName = 'List';\n\nexport { default as WindowScroller } from './WindowScroller';\nexport { default as useRWLoadNext } from './utils/useRWLoadNext';\n\nexport default List;\n"],"mappings":"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"}

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';\n\nimport React, {\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n} from 'react';\nimport Button, { ButtonProps } from '../Button';\n\nexport interface MenuItemProps\n  extends Omit<ButtonProps, 'type' | 'wide' | 'size'> {\n  /**\n   * Whether the menu item is selected.\n   * @default false\n   */\n  selected?: boolean;\n  /**\n   * The value of the menu item.\n   * @default undefined\n   */\n  value?: string;\n}\n\nconst selectedStyles = (p) =>\n  p.selected &&\n  css`\n    background-color: ${clr(p.theme.menuItemSelectedColorBg)};\n  `;\n\ntype StyledButtonProps = Pick<MenuItemProps, 'selected'>;\nconst StyledButton = styled(\n  Button,\n  omitEmotionProps('selected')\n)<StyledButtonProps>`\n  display: flex;\n  font-weight: normal;\n  border-radius: 0;\n  height: ${(p) => p.theme.menuItemHeight}em;\n\n  & > span {\n    flex: 1;\n    text-align: left;\n    overflow: hidden;\n    line-height: 1.5;\n  }\n\n  padding: 0 ${(p) => p.theme.menuItemPaddingHorizontal[0]}em;\n  ${m.min.xs} {\n    padding: 0 ${(p) => p.theme.menuItemPaddingHorizontal[1]}em;\n  }\n\n  ${selectedStyles};\n`;\n\nconst SelectedIcon = styled(Check)`\n  color: ${(p) => clr(p.theme.menuItemSelectedColorIcon)};\n`;\n\n/**\n * The base menu item.\n */\nconst MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>(\n  ({ selected = false, value, right, onClick = () => {}, ...rest }, ref) => {\n    const { closeOnSelect, onClose } = useContext(MenuContext);\n    const onClickRef = useRef<MenuItemProps['onClick']>();\n\n    useEffect(() => {\n      onClickRef.current = onClick;\n    }, [onClick]);\n\n    const clickHandler = useCallback(\n      (e) => {\n        if (onClickRef.current) onClickRef.current(e);\n        if (closeOnSelect) onClose();\n      },\n      [closeOnSelect, onClose]\n    );\n\n    return (\n      <ThemeOverrider\n        overrides={(theme) => ({ buttonGhostColorText: theme.colorText })}\n      >\n        <StyledButton\n          selected={selected}\n          right={selected ? <SelectedIcon /> : right}\n          type='ghost'\n          wide='always'\n          onClick={clickHandler}\n          role='menuitem'\n          {...rest}\n          ref={ref}\n        />\n      </ThemeOverrider>\n    );\n  }\n);\n\nMenuItem.displayName = 'MenuItem';\n\nexport default MenuItem;\n"],"mappings":";AAAA,SAASA,GAAG,QAAQ,gBAAgB;AACpC,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,KAAK,QAAQ,kBAAkB;AACxC,SAASC,CAAC,QAAQ,kBAAkB;AACpC,SAASC,WAAW,QAAQ,uBAAuB;AACnD,SAASC,cAAc,EAAEC,GAAG,QAAQ,oBAAoB;AACxD,SAASC,gBAAgB,QAAQ,kBAAkB;AAEnD,OAAOC,KAAK,IACVC,UAAU,EACVC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,MAAM,QACD,OAAO;AACd,OAAOC,MAAM,MAAuB,WAAW;AAgB/C,MAAMC,cAAc,GAAIC,CAAC,IACvBA,CAAC,CAACC,QAAQ,IACVjB,GAAI;AACN,wBAAwBM,GAAG,CAACU,CAAC,CAACE,KAAK,CAACC,uBAAuB,CAAE;AAC7D,GAAG;AAGH,MAAMC,YAAY,GAAGnB,MAAM,CACzBa,MAAM,EACNP,gBAAgB,CAAC,UAAU,CAC7B,CAAqB;AACrB;AACA;AACA;AACA,YAAaS,CAAC,IAAKA,CAAC,CAACE,KAAK,CAACG,cAAe;AAC1C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAgBL,CAAC,IAAKA,CAAC,CAACE,KAAK,CAACI,yBAAyB,CAAC,CAAC,CAAE;AAC3D,IAAInB,CAAC,CAACoB,GAAG,CAACC,EAAG;AACb,iBAAkBR,CAAC,IAAKA,CAAC,CAACE,KAAK,CAACI,yBAAyB,CAAC,CAAC,CAAE;AAC7D;AACA;AACA,IAAIP,cAAe;AACnB,CAAC;AAED,MAAMU,YAAY,GAAGxB,MAAM,CAACC,KAAK,CAAE;AACnC,WAAYc,CAAC,IAAKV,GAAG,CAACU,CAAC,CAACE,KAAK,CAACQ,yBAAyB,CAAE;AACzD,CAAC;;AAED;AACA;AACA;AACA,MAAMC,QAAQ,gBAAGlB,UAAU,CACzB,CAAC;EAAEQ,QAAQ,GAAG,KAAK;EAAEW,KAAK;EAAEC,KAAK;EAAEC,OAAO,GAAGA,CAAA,KAAM,CAAC,CAAC;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,KAAK;EACxE,MAAM;IAAEC,aAAa;IAAEC;EAAQ,CAAC,GAAGvB,UAAU,CAACP,WAAW,CAAC;EAC1D,MAAM+B,UAAU,GAAGtB,MAAM,CAA2B,CAAC;EAErDD,SAAS,CAAC,MAAM;IACduB,UAAU,CAACC,OAAO,GAAGN,OAAO;EAC9B,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;EAEb,MAAMO,YAAY,GAAG3B,WAAW,CAC7B4B,CAAC,IAAK;IACL,IAAIH,UAAU,CAACC,OAAO,EAAED,UAAU,CAACC,OAAO,CAACE,CAAC,CAAC;IAC7C,IAAIL,aAAa,EAAEC,OAAO,CAAC,CAAC;EAC9B,CAAC,EACD,CAACD,aAAa,EAAEC,OAAO,CACzB,CAAC;EAED,oBACE1B,KAAA,CAAA+B,aAAA,CAAClC,cAAc;IACbmC,SAAS,EAAGtB,KAAK,KAAM;MAAEuB,oBAAoB,EAAEvB,KAAK,CAACwB;IAAU,CAAC;EAAE,gBAElElC,KAAA,CAAA+B,aAAA,CAACnB,YAAY,EAAAuB,QAAA;IACX1B,QAAQ,EAAEA,QAAS;IACnBY,KAAK,EAAEZ,QAAQ,gBAAGT,KAAA,CAAA+B,aAAA,CAACd,YAAY,MAAE,CAAC,GAAGI,KAAM;IAC3Ce,IAAI,EAAC,OAAO;IACZC,IAAI,EAAC,QAAQ;IACbf,OAAO,EAAEO,YAAa;IACtBS,IAAI,EAAC;EAAU,GACXf,IAAI;IACRC,GAAG,EAAEA;EAAI,EACV,CACa,CAAC;AAErB,CACF,CAAC;AAEDL,QAAQ,CAACoB,WAAW,GAAG,UAAU;AAEjC,eAAepB,QAAQ"}
+{"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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"}

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

package/dist/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';\n\nimport { enableScrollingStyles } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\n\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, useRef } from 'react';\n\nimport useScrollFlags from './utils/useScrollFlags';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface NavigationProps extends JsxDivProps {\n  /**\n   * The top component in the side navigator.\n   * E.g. the user avatar.\n   * @default undefined\n   */\n  sideTop?: React.ReactNode;\n  /**\n   * The bottom component in the side navigator.\n   * E.g. the current tariff.\n   * @default undefined\n   */\n  sideBottom?: React.ReactNode;\n}\n\nconst Container = styled.div`\n  position: fixed;\n  box-sizing: border-box;\n  z-index: 101;\n\n  background-color: ${(p) => clr(p.theme.navigationColorBg)};\n  color: ${(p) => clr(p.theme.navigationColorText)};\n\n  // Tab navigator\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: calc(\n    ${(p) => p.theme.navigationTabHeight}em + env(safe-area-inset-bottom)\n  );\n  border-top: 1px solid ${(p) => clr(p.theme.navigationColorBorder)};\n\n  // Side navigator\n  ${m.min.md} {\n    // Reset tab navigator styles\n    right: unset;\n    height: unset;\n    border-top: unset;\n\n    left: 0;\n    top: 0;\n    bottom: 0;\n    width: ${(p) => p.theme.navigationSideWidth}em;\n    border-right: 1px solid ${(p) => clr(p.theme.navigationColorBorder)};\n  }\n`;\n\nconst notHasSideTopStyles = (p) =>\n  !p.hasSideTop &&\n  css`\n    padding-top: ${p.theme.pageHeaderHeight[1]}em;\n  `;\n\nconst hasPrevStyles = (p) =>\n  p.hasPrev &&\n  !p.hasNext &&\n  css`\n    mask-image: linear-gradient(\n      to right,\n      transparent,\n      white ${p.theme.navigationMaskImageSize}em\n    );\n    ${m.min.md} {\n      mask-image: linear-gradient(\n        to bottom,\n        transparent,\n        white ${p.theme.navigationMaskImageSize}em\n      );\n    }\n  `;\n\nconst hasNextStyles = (p) =>\n  !p.hasPrev &&\n  p.hasNext &&\n  css`\n    mask-image: linear-gradient(\n      to left,\n      transparent,\n      white ${p.theme.navigationMaskImageSize}em\n    );\n    ${m.min.md} {\n      mask-image: linear-gradient(\n        to top,\n        transparent,\n        white ${p.theme.navigationMaskImageSize}em\n      );\n    }\n  `;\n\nconst hasPrevNextStyles = (p) =>\n  p.hasPrev &&\n  p.hasNext &&\n  css`\n    mask-image: linear-gradient(\n      to right,\n      transparent,\n      white ${p.theme.navigationMaskImageSize}em,\n      white calc(100% - ${p.theme.navigationMaskImageSize}em),\n      transparent\n    );\n    ${m.min.md} {\n      mask-image: linear-gradient(\n        to bottom,\n        transparent,\n        white ${p.theme.navigationMaskImageSize}em,\n        white calc(100% - ${p.theme.navigationMaskImageSize}em),\n        transparent\n      );\n    }\n  `;\n\ninterface ContentProps {\n  hasSideTop: boolean;\n  hasPrev: boolean;\n  hasNext: boolean;\n}\nconst Content = styled(\n  'div',\n  omitEmotionProps('hasSideTop', 'hasPrev', 'hasNext')\n)<ContentProps>`\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: flex-start;\n  &::before,\n  &::after {\n    content: ''; // Insert space before the first item and after the last one\n  }\n\n  overflow-y: hidden;\n  ${enableScrollingStyles('x', false)};\n\n  ${m.min.md} {\n    // Reset tab navigator styles\n    justify-content: unset;\n    align-items: unset;\n\n    flex-direction: column;\n\n    overflow-x: hidden;\n    ${enableScrollingStyles('y', false)};\n\n    ${notHasSideTopStyles};\n  }\n\n  ${hasPrevStyles};\n  ${hasNextStyles};\n  ${hasPrevNextStyles};\n`;\n\nconst Addon = styled.div`\n  display: none;\n  ${m.min.md} {\n    display: block;\n  }\n`;\n\nconst BottomAddon = styled(Addon)`\n  margin-top: auto;\n`;\n\n/**\n * The main navigation.\n */\nconst Navigation = forwardRef<HTMLDivElement, NavigationProps>(\n  ({ sideTop, sideBottom, children, ...rest }, ref) => {\n    const contentRef = useRef<HTMLDivElement>(null);\n    const { hasPrev, hasNext } = useScrollFlags(contentRef);\n\n    return (\n      <Container\n        role='navigation'\n        aria-label='Main navigation'\n        {...rest}\n        ref={ref}\n      >\n        <Content\n          hasSideTop={!!sideTop}\n          hasPrev={hasPrev}\n          hasNext={hasNext}\n          ref={contentRef}\n          role='list'\n        >\n          {sideTop && <Addon>{sideTop}</Addon>}\n          {children}\n          {sideBottom && <BottomAddon>{sideBottom}</BottomAddon>}\n        </Content>\n      </Container>\n    );\n  }\n);\n\nNavigation.displayName = 'Navigation';\n\nexport default Navigation;\n"],"mappings":"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"}
+{"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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"}

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","notHasListStyles","pageContentPaddingVertical","notHasNavigationStyles","Container","PageContent","children","rest","ref","createElement","_extends","displayName"],"sources":["../../../src/PageContent/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\n\nimport styled from '@emotion/styled';\nimport { m } from '@os-design/media';\n\nimport { horizontalPaddingStyles } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, useContext } from 'react';\n\nimport LayoutContext from '../Layout/LayoutContext';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface PageContentProps extends JsxDivProps {\n  /**\n   * Whether there is the list in the page content.\n   * @default false\n   */\n  hasList?: boolean;\n}\n\nconst hasNavigationStyles = (p) =>\n  p.hasNavigation &&\n  css`\n    ${!p.hasList &&\n    css`\n      margin-bottom: calc(\n        ${p.theme.navigationTabHeight}em + env(safe-area-inset-bottom)\n      );\n    `}\n    ${m.min.md} {\n      margin-bottom: 0;\n      margin-left: ${p.theme.navigationSideWidth}em;\n    }\n  `;\n\nconst hasPageHeaderStyles = (p) =>\n  p.hasPageHeader &&\n  !p.hasList &&\n  css`\n    margin-top: ${p.theme.pageHeaderHeight[0]}em;\n    ${m.min.md} {\n      margin-top: ${p.theme.pageHeaderHeight[1]}em;\n    }\n  `;\n\nconst notHasListStyles = (p) =>\n  !p.hasList &&\n  css`\n    padding-top: ${p.theme.pageContentPaddingVertical}em;\n    padding-bottom: ${p.theme.pageContentPaddingVertical}em;\n    ${horizontalPaddingStyles()(p)};\n  `;\n\nconst notHasNavigationStyles = (p) =>\n  !p.hasNavigation &&\n  !p.hasList &&\n  css`\n    margin-bottom: env(safe-area-inset-bottom);\n  `;\n\ninterface ContainerProps {\n  hasNavigation?: boolean;\n  hasPageHeader?: boolean;\n  hasList?: boolean;\n}\nconst Container = styled(\n  'main',\n  omitEmotionProps('hasNavigation', 'hasPageHeader', 'hasList')\n)<ContainerProps>`\n  ${hasNavigationStyles};\n  ${hasPageHeaderStyles};\n  ${notHasListStyles};\n  ${notHasNavigationStyles};\n`;\n\n/**\n * The wrapper that adds padding to the page content.\n */\nconst PageContent = forwardRef<HTMLElement, PageContentProps>(\n  ({ hasList = false, children, ...rest }, ref) => {\n    const { hasNavigation, hasPageHeader } = useContext(LayoutContext);\n\n    return (\n      <Container\n        hasNavigation={hasNavigation}\n        hasPageHeader={hasPageHeader}\n        hasList={hasList}\n        {...rest}\n        ref={ref}\n      >\n        {children}\n      </Container>\n    );\n  }\n);\n\nPageContent.displayName = 'PageContent';\n\nexport default PageContent;\n"],"mappings":";AAAA,SAASA,GAAG,QAAQ,gBAAgB;AAEpC,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,CAAC,QAAQ,kBAAkB;AAEpC,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,EAAEC,UAAU,QAAQ,OAAO;AAErD,OAAOC,aAAa,MAAM,yBAAyB;AAWnD,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,CAAE;AAC9C,MAAMlB,CAAC,CAACa,GAAG,CAACC,EAAG;AACf,oBAAoBN,CAAC,CAACG,KAAK,CAACO,gBAAgB,CAAC,CAAC,CAAE;AAChD;AACA,GAAG;AAEH,MAAMC,gBAAgB,GAAIX,CAAC,IACzB,CAACA,CAAC,CAACE,OAAO,IACVZ,GAAI;AACN,mBAAmBU,CAAC,CAACG,KAAK,CAACS,0BAA2B;AACtD,sBAAsBZ,CAAC,CAACG,KAAK,CAACS,0BAA2B;AACzD,MAAMnB,uBAAuB,CAAC,CAAC,CAACO,CAAC,CAAE;AACnC,GAAG;AAEH,MAAMa,sBAAsB,GAAIb,CAAC,IAC/B,CAACA,CAAC,CAACC,aAAa,IAChB,CAACD,CAAC,CAACE,OAAO,IACVZ,GAAI;AACN;AACA,GAAG;AAOH,MAAMwB,SAAS,GAAGvB,MAAM,CACtB,MAAM,EACNG,gBAAgB,CAAC,eAAe,EAAE,eAAe,EAAE,SAAS,CAC9D,CAAkB;AAClB,IAAIK,mBAAoB;AACxB,IAAIS,mBAAoB;AACxB,IAAIG,gBAAiB;AACrB,IAAIE,sBAAuB;AAC3B,CAAC;;AAED;AACA;AACA;AACA,MAAME,WAAW,gBAAGnB,UAAU,CAC5B,CAAC;EAAEM,OAAO,GAAG,KAAK;EAAEc,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,KAAK;EAC/C,MAAM;IAAEjB,aAAa;IAAEQ;EAAc,CAAC,GAAGZ,UAAU,CAACC,aAAa,CAAC;EAElE,oBACEH,KAAA,CAAAwB,aAAA,CAACL,SAAS,EAAAM,QAAA;IACRnB,aAAa,EAAEA,aAAc;IAC7BQ,aAAa,EAAEA,aAAc;IAC7BP,OAAO,EAAEA;EAAQ,GACbe,IAAI;IACRC,GAAG,EAAEA;EAAI,IAERF,QACQ,CAAC;AAEhB,CACF,CAAC;AAEDD,WAAW,CAACM,WAAW,GAAG,aAAa;AAEvC,eAAeN,WAAW"}
+{"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","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\nconst hasNavigationStyles = (p) =>\n  p.hasNavigation &&\n  css`\n    ${!p.hasList &&\n    css`\n      margin-bottom: calc(\n        ${p.theme.navigationTabHeight}em + env(safe-area-inset-bottom)\n      );\n    `}\n    ${m.min.md} {\n      margin-bottom: 0;\n      margin-left: ${p.theme.navigationSideWidth}em;\n    }\n  `;\n\nconst hasPageHeaderStyles = (p) =>\n  p.hasPageHeader &&\n  !p.hasList &&\n  css`\n    margin-top: ${p.theme.pageHeaderHeight[0]}em;\n    ${m.min.md} {\n      margin-top: ${p.theme.pageHeaderHeight[1]}em;\n    }\n  `;\n\nconst notHasListStyles = (p) =>\n  !p.hasList &&\n  css`\n    padding-top: ${p.theme.pageContentPaddingVertical}em;\n    padding-bottom: ${p.theme.pageContentPaddingVertical}em;\n    ${horizontalPaddingStyles()(p)};\n  `;\n\nconst notHasNavigationStyles = (p) =>\n  !p.hasNavigation &&\n  !p.hasList &&\n  css`\n    margin-bottom: env(safe-area-inset-bottom);\n  `;\n\ninterface ContainerProps {\n  hasNavigation?: boolean;\n  hasPageHeader?: boolean;\n  hasList?: boolean;\n}\nconst Container = styled(\n  'main',\n  omitEmotionProps('hasNavigation', 'hasPageHeader', 'hasList')\n)<ContainerProps>`\n  ${hasNavigationStyles};\n  ${hasPageHeaderStyles};\n  ${notHasListStyles};\n  ${notHasNavigationStyles};\n`;\n\n/**\n * The wrapper that adds padding to the page content.\n */\nconst PageContent = forwardRef<HTMLElement, PageContentProps>(\n  ({ hasList = false, children, ...rest }, ref) => {\n    const { hasNavigation, hasPageHeader } = useContext(LayoutContext);\n\n    return (\n      <Container\n        hasNavigation={hasNavigation}\n        hasPageHeader={hasPageHeader}\n        hasList={hasList}\n        {...rest}\n        ref={ref}\n      >\n        {children}\n      </Container>\n    );\n  }\n);\n\nPageContent.displayName = 'PageContent';\n\nexport default PageContent;\n"],"mappings":";AAAA,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;AAWnD,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,CAAE;AAC9C,MAAMlB,CAAC,CAACa,GAAG,CAACC,EAAG;AACf,oBAAoBN,CAAC,CAACG,KAAK,CAACO,gBAAgB,CAAC,CAAC,CAAE;AAChD;AACA,GAAG;AAEH,MAAMC,gBAAgB,GAAIX,CAAC,IACzB,CAACA,CAAC,CAACE,OAAO,IACVZ,GAAI;AACN,mBAAmBU,CAAC,CAACG,KAAK,CAACS,0BAA2B;AACtD,sBAAsBZ,CAAC,CAACG,KAAK,CAACS,0BAA2B;AACzD,MAAMnB,uBAAuB,CAAC,CAAC,CAACO,CAAC,CAAE;AACnC,GAAG;AAEH,MAAMa,sBAAsB,GAAIb,CAAC,IAC/B,CAACA,CAAC,CAACC,aAAa,IAChB,CAACD,CAAC,CAACE,OAAO,IACVZ,GAAI;AACN;AACA,GAAG;AAOH,MAAMwB,SAAS,GAAGvB,MAAM,CACtB,MAAM,EACNG,gBAAgB,CAAC,eAAe,EAAE,eAAe,EAAE,SAAS,CAC9D,CAAkB;AAClB,IAAIK,mBAAoB;AACxB,IAAIS,mBAAoB;AACxB,IAAIG,gBAAiB;AACrB,IAAIE,sBAAuB;AAC3B,CAAC;;AAED;AACA;AACA;AACA,MAAME,WAAW,gBAAGnB,UAAU,CAC5B,CAAC;EAAEM,OAAO,GAAG,KAAK;EAAEc,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,KAAK;EAC/C,MAAM;IAAEjB,aAAa;IAAEQ;EAAc,CAAC,GAAGZ,UAAU,CAACC,aAAa,CAAC;EAElE,oBACEH,KAAA,CAAAwB,aAAA,CAACL,SAAS,EAAAM,QAAA;IACRnB,aAAa,EAAEA,aAAc;IAC7BQ,aAAa,EAAEA,aAAc;IAC7BP,OAAO,EAAEA;EAAQ,GACbe,IAAI;IACRC,GAAG,EAAEA;EAAI,IAERF,QACQ,CAAC;AAEhB,CACF,CAAC;AAEDD,WAAW,CAACM,WAAW,GAAG,aAAa;AAEvC,eAAeN,WAAW"}

package/dist/esm/PageHeader/index.js

@@ -78,8 +78,7 @@ const Title = styled('h1', omitEmotionProps('hasSubtitle'))`
 const Subtitle = styled.div`
   font-size: ${p => p.theme.sizes.small}em;
   color: ${p => clr(p.theme.pageHeaderSubtitleColorText)};
-  line-height: 1;
-  margin-top: 0.2em;
+  line-height: 1.2;
   ${ellipsisStyles};
 `;
 const Addon = styled.div`

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","useContext","LayoutContext","PageHeaderContainer","Skeleton","PageHeaderSkeleton","width","rest","ref","hasNavigation","createElement","_extends","hasNavigationIndent","displayName"],"sources":["../../../src/PageHeaderSkeleton/index.tsx"],"sourcesContent":["import { WithSize } from '@os-design/styles';\n\nimport React, { forwardRef, useContext } from 'react';\nimport LayoutContext from '../Layout/LayoutContext';\nimport { PageHeaderContainer } from '../PageHeader';\n\nimport Skeleton, { SkeletonProps } from '../Skeleton';\n\nexport type PageHeaderSkeletonProps = SkeletonProps & WithSize;\n\n/**\n * Provides a page header placeholder while a user waits for\n * the content to load.\n */\nconst PageHeaderSkeleton = forwardRef<HTMLDivElement, PageHeaderSkeletonProps>(\n  ({ width = '30%', ...rest }, ref) => {\n    const { hasNavigation } = useContext(LayoutContext);\n\n    return (\n      <PageHeaderContainer\n        hasNavigationIndent={hasNavigation}\n        {...rest}\n        ref={ref}\n      >\n        <Skeleton width={width} />\n      </PageHeaderContainer>\n    );\n  }\n);\n\nPageHeaderSkeleton.displayName = 'PageHeaderSkeleton';\n\nexport default PageHeaderSkeleton;\n"],"mappings":";AAEA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,UAAU,QAAQ,OAAO;AACrD,OAAOC,aAAa,MAAM,yBAAyB;AACnD,SAASC,mBAAmB,QAAQ,eAAe;AAEnD,OAAOC,QAAQ,MAAyB,aAAa;AAIrD;AACA;AACA;AACA;AACA,MAAMC,kBAAkB,gBAAGL,UAAU,CACnC,CAAC;EAAEM,KAAK,GAAG,KAAK;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,KAAK;EACnC,MAAM;IAAEC;EAAc,CAAC,GAAGR,UAAU,CAACC,aAAa,CAAC;EAEnD,oBACEH,KAAA,CAAAW,aAAA,CAACP,mBAAmB,EAAAQ,QAAA;IAClBC,mBAAmB,EAAEH;EAAc,GAC/BF,IAAI;IACRC,GAAG,EAAEA;EAAI,iBAETT,KAAA,CAAAW,aAAA,CAACN,QAAQ;IAACE,KAAK,EAAEA;EAAM,CAAE,CACN,CAAC;AAE1B,CACF,CAAC;AAEDD,kBAAkB,CAACQ,WAAW,GAAG,oBAAoB;AAErD,eAAeR,kBAAkB"}
+{"version":3,"file":"index.js","names":["React","forwardRef","useContext","LayoutContext","PageHeaderContainer","Skeleton","PageHeaderSkeleton","width","rest","ref","hasNavigation","createElement","_extends","hasNavigationIndent","displayName"],"sources":["../../../src/PageHeaderSkeleton/index.tsx"],"sourcesContent":["import { WithSize } from '@os-design/styles';\nimport React, { forwardRef, useContext } from 'react';\nimport LayoutContext from '../Layout/LayoutContext';\nimport { PageHeaderContainer } from '../PageHeader';\nimport Skeleton, { SkeletonProps } from '../Skeleton';\n\nexport type PageHeaderSkeletonProps = SkeletonProps & WithSize;\n\n/**\n * Provides a page header placeholder while a user waits for\n * the content to load.\n */\nconst PageHeaderSkeleton = forwardRef<HTMLDivElement, PageHeaderSkeletonProps>(\n  ({ width = '30%', ...rest }, ref) => {\n    const { hasNavigation } = useContext(LayoutContext);\n\n    return (\n      <PageHeaderContainer\n        hasNavigationIndent={hasNavigation}\n        {...rest}\n        ref={ref}\n      >\n        <Skeleton width={width} />\n      </PageHeaderContainer>\n    );\n  }\n);\n\nPageHeaderSkeleton.displayName = 'PageHeaderSkeleton';\n\nexport default PageHeaderSkeleton;\n"],"mappings":";AACA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,UAAU,QAAQ,OAAO;AACrD,OAAOC,aAAa,MAAM,yBAAyB;AACnD,SAASC,mBAAmB,QAAQ,eAAe;AACnD,OAAOC,QAAQ,MAAyB,aAAa;AAIrD;AACA;AACA;AACA;AACA,MAAMC,kBAAkB,gBAAGL,UAAU,CACnC,CAAC;EAAEM,KAAK,GAAG,KAAK;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,KAAK;EACnC,MAAM;IAAEC;EAAc,CAAC,GAAGR,UAAU,CAACC,aAAa,CAAC;EAEnD,oBACEH,KAAA,CAAAW,aAAA,CAACP,mBAAmB,EAAAQ,QAAA;IAClBC,mBAAmB,EAAEH;EAAc,GAC/BF,IAAI;IACRC,GAAG,EAAEA;EAAI,iBAETT,KAAA,CAAAW,aAAA,CAACN,QAAQ;IAACE,KAAK,EAAEA;EAAM,CAAE,CACN,CAAC;AAE1B,CACF,CAAC;AAEDD,kBAAkB,CAACQ,WAAW,GAAG,oBAAoB;AAErD,eAAeR,kBAAkB"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["css","styled","omitEmotionProps","React","forwardRef","Skeleton","hasMarginStyles","p","hasMargin","theme","paragraphMarginBottom","lineHeight","Container","key","ParagraphSkeleton","rows","width","rest","ref","createElement","_extends","Array","fill","map","_","index","displayName"],"sources":["../../../src/ParagraphSkeleton/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\n\nimport styled from '@emotion/styled';\n\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\n\nimport Skeleton, { SkeletonProps } from '../Skeleton';\n\nexport interface ParagraphSkeletonProps extends SkeletonProps {\n  /**\n   * The number of rows.\n   * @default 4\n   */\n  rows?: number;\n  /**\n   * The width of the last row.\n   * @default 70%\n   */\n  width?: string;\n  /**\n   * Whether the paragraph has a bottom margin.\n   * @default false\n   */\n  hasMargin?: boolean;\n}\n\nconst hasMarginStyles = (p) =>\n  p.hasMargin &&\n  css`\n    margin-bottom: ${p.theme.paragraphMarginBottom +\n    (p.theme.lineHeight - 1)}em;\n  `;\n\ntype ContainerProps = Pick<ParagraphSkeletonProps, 'hasMargin'>;\nconst Container = styled('div', omitEmotionProps('hasMargin'))<ContainerProps>`\n  & > *:not(:last-of-type) {\n    margin-bottom: ${(p) => p.theme.lineHeight - 1}em;\n  }\n  ${hasMarginStyles};\n`;\n\nlet key = 0;\n\n/**\n * Provides a paragraph placeholder while a user waits for the content to load.\n */\nconst ParagraphSkeleton = forwardRef<HTMLDivElement, ParagraphSkeletonProps>(\n  ({ rows = 4, width = '70%', hasMargin = false, ...rest }, ref) => (\n    <Container hasMargin={hasMargin} {...rest} ref={ref}>\n      {Array(rows)\n        .fill({})\n        .map((_, index) => {\n          key += 1;\n          return (\n            <Skeleton key={key} width={index < rows - 1 ? '100%' : width} />\n          );\n        })}\n    </Container>\n  )\n);\n\nParagraphSkeleton.displayName = 'ParagraphSkeleton';\n\nexport default ParagraphSkeleton;\n"],"mappings":";AAAA,SAASA,GAAG,QAAQ,gBAAgB;AAEpC,OAAOC,MAAM,MAAM,iBAAiB;AAEpC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AAEzC,OAAOC,QAAQ,MAAyB,aAAa;AAoBrD,MAAMC,eAAe,GAAIC,CAAC,IACxBA,CAAC,CAACC,SAAS,IACXR,GAAI;AACN,qBAAqBO,CAAC,CAACE,KAAK,CAACC,qBAAqB,IAC7CH,CAAC,CAACE,KAAK,CAACE,UAAU,GAAG,CAAC,CAAE;AAC7B,GAAG;AAGH,MAAMC,SAAS,GAAGX,MAAM,CAAC,KAAK,EAAEC,gBAAgB,CAAC,WAAW,CAAC,CAAkB;AAC/E;AACA,qBAAsBK,CAAC,IAAKA,CAAC,CAACE,KAAK,CAACE,UAAU,GAAG,CAAE;AACnD;AACA,IAAIL,eAAgB;AACpB,CAAC;AAED,IAAIO,GAAG,GAAG,CAAC;;AAEX;AACA;AACA;AACA,MAAMC,iBAAiB,gBAAGV,UAAU,CAClC,CAAC;EAAEW,IAAI,GAAG,CAAC;EAAEC,KAAK,GAAG,KAAK;EAAER,SAAS,GAAG,KAAK;EAAE,GAAGS;AAAK,CAAC,EAAEC,GAAG,kBAC3Df,KAAA,CAAAgB,aAAA,CAACP,SAAS,EAAAQ,QAAA;EAACZ,SAAS,EAAEA;AAAU,GAAKS,IAAI;EAAEC,GAAG,EAAEA;AAAI,IACjDG,KAAK,CAACN,IAAI,CAAC,CACTO,IAAI,CAAC,CAAC,CAAC,CAAC,CACRC,GAAG,CAAC,CAACC,CAAC,EAAEC,KAAK,KAAK;EACjBZ,GAAG,IAAI,CAAC;EACR,oBACEV,KAAA,CAAAgB,aAAA,CAACd,QAAQ;IAACQ,GAAG,EAAEA,GAAI;IAACG,KAAK,EAAES,KAAK,GAAGV,IAAI,GAAG,CAAC,GAAG,MAAM,GAAGC;EAAM,CAAE,CAAC;AAEpE,CAAC,CACM,CAEf,CAAC;AAEDF,iBAAiB,CAACY,WAAW,GAAG,mBAAmB;AAEnD,eAAeZ,iBAAiB"}
+{"version":3,"file":"index.js","names":["css","styled","omitEmotionProps","React","forwardRef","Skeleton","hasMarginStyles","p","hasMargin","theme","paragraphMarginBottom","lineHeight","Container","key","ParagraphSkeleton","rows","width","rest","ref","createElement","_extends","Array","fill","map","_","index","displayName"],"sources":["../../../src/ParagraphSkeleton/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\nimport Skeleton, { SkeletonProps } from '../Skeleton';\n\nexport interface ParagraphSkeletonProps extends SkeletonProps {\n  /**\n   * The number of rows.\n   * @default 4\n   */\n  rows?: number;\n  /**\n   * The width of the last row.\n   * @default 70%\n   */\n  width?: string;\n  /**\n   * Whether the paragraph has a bottom margin.\n   * @default false\n   */\n  hasMargin?: boolean;\n}\n\nconst hasMarginStyles = (p) =>\n  p.hasMargin &&\n  css`\n    margin-bottom: ${p.theme.paragraphMarginBottom +\n    (p.theme.lineHeight - 1)}em;\n  `;\n\ntype ContainerProps = Pick<ParagraphSkeletonProps, 'hasMargin'>;\nconst Container = styled('div', omitEmotionProps('hasMargin'))<ContainerProps>`\n  & > *:not(:last-of-type) {\n    margin-bottom: ${(p) => p.theme.lineHeight - 1}em;\n  }\n  ${hasMarginStyles};\n`;\n\nlet key = 0;\n\n/**\n * Provides a paragraph placeholder while a user waits for the content to load.\n */\nconst ParagraphSkeleton = forwardRef<HTMLDivElement, ParagraphSkeletonProps>(\n  ({ rows = 4, width = '70%', hasMargin = false, ...rest }, ref) => (\n    <Container hasMargin={hasMargin} {...rest} ref={ref}>\n      {Array(rows)\n        .fill({})\n        .map((_, index) => {\n          key += 1;\n          return (\n            <Skeleton key={key} width={index < rows - 1 ? '100%' : width} />\n          );\n        })}\n    </Container>\n  )\n);\n\nParagraphSkeleton.displayName = 'ParagraphSkeleton';\n\nexport default ParagraphSkeleton;\n"],"mappings":";AAAA,SAASA,GAAG,QAAQ,gBAAgB;AACpC,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,QAAQ,MAAyB,aAAa;AAoBrD,MAAMC,eAAe,GAAIC,CAAC,IACxBA,CAAC,CAACC,SAAS,IACXR,GAAI;AACN,qBAAqBO,CAAC,CAACE,KAAK,CAACC,qBAAqB,IAC7CH,CAAC,CAACE,KAAK,CAACE,UAAU,GAAG,CAAC,CAAE;AAC7B,GAAG;AAGH,MAAMC,SAAS,GAAGX,MAAM,CAAC,KAAK,EAAEC,gBAAgB,CAAC,WAAW,CAAC,CAAkB;AAC/E;AACA,qBAAsBK,CAAC,IAAKA,CAAC,CAACE,KAAK,CAACE,UAAU,GAAG,CAAE;AACnD;AACA,IAAIL,eAAgB;AACpB,CAAC;AAED,IAAIO,GAAG,GAAG,CAAC;;AAEX;AACA;AACA;AACA,MAAMC,iBAAiB,gBAAGV,UAAU,CAClC,CAAC;EAAEW,IAAI,GAAG,CAAC;EAAEC,KAAK,GAAG,KAAK;EAAER,SAAS,GAAG,KAAK;EAAE,GAAGS;AAAK,CAAC,EAAEC,GAAG,kBAC3Df,KAAA,CAAAgB,aAAA,CAACP,SAAS,EAAAQ,QAAA;EAACZ,SAAS,EAAEA;AAAU,GAAKS,IAAI;EAAEC,GAAG,EAAEA;AAAI,IACjDG,KAAK,CAACN,IAAI,CAAC,CACTO,IAAI,CAAC,CAAC,CAAC,CAAC,CACRC,GAAG,CAAC,CAACC,CAAC,EAAEC,KAAK,KAAK;EACjBZ,GAAG,IAAI,CAAC;EACR,oBACEV,KAAA,CAAAgB,aAAA,CAACd,QAAQ;IAACQ,GAAG,EAAEA,GAAI;IAACG,KAAK,EAAES,KAAK,GAAGV,IAAI,GAAG,CAAC,GAAG,MAAM,GAAGC;EAAM,CAAE,CAAC;AAEpE,CAAC,CACM,CAEf,CAAC;AAEDF,iBAAiB,CAACY,WAAW,GAAG,mBAAmB;AAEnD,eAAeZ,iBAAiB"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["styled","sizeStyles","transitionStyles","clr","omitEmotionProps","React","forwardRef","useMemo","Container","Trail","p","theme","progressColorTrail","height","Stroke","percent","progressColorStroke","progressColorStrokeSuccess","Text","div","progressColorPercentage","Progress","text","rest","ref","validPercent","textId","Math","random","toString","slice","createElement","_extends","role","id","displayName"],"sources":["../../../src/Progress/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { WithSize, sizeStyles, transitionStyles } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\n\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, useMemo } from 'react';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface ProgressProps extends JsxDivProps, WithSize {\n  /**\n   * The percentage of completion.\n   * @default 0\n   */\n  percent?: number;\n  /**\n   * The text that is displayed to the right of the progress bar.\n   * @default undefined\n   */\n  text?: string;\n  /**\n   * The height of the progress bar.\n   * @default 0.5em\n   */\n  height?: string;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n  display: flex;\n  align-items: center;\n  ${sizeStyles};\n`;\n\ntype TrailProps = Required<Pick<ProgressProps, 'height'>>;\nconst Trail = styled('div', omitEmotionProps('height'))<TrailProps>`\n  width: 100%;\n  background-color: ${(p) => clr(p.theme.progressColorTrail)};\n  border-radius: ${(p) => `calc(${p.height} / 2)`};\n  overflow: hidden; // To hide the border of the progress bar\n`;\n\ntype StrokeProps = Required<Pick<ProgressProps, 'percent' | 'height'>>;\nconst Stroke = styled(\n  'div',\n  omitEmotionProps('percent', 'height')\n)<StrokeProps>`\n  width: ${(p) => p.percent}%;\n  height: ${(p) => p.height};\n  border-radius: 0 ${(p) => `calc(${p.height} / 2)`}\n    ${(p) => `calc(${p.height} / 2)`} 0;\n  background-color: ${(p) =>\n    p.percent < 100\n      ? clr(p.theme.progressColorStroke)\n      : clr(p.theme.progressColorStrokeSuccess)};\n  ${transitionStyles('width', 'background-color')};\n`;\n\nconst Text = styled.div`\n  margin-left: 0.5em;\n  color: ${(p) => clr(p.theme.progressColorPercentage)};\n  line-height: 1;\n`;\n\n/**\n * The progress bar.\n */\nconst Progress = forwardRef<HTMLDivElement, ProgressProps>(\n  ({ percent = 0, text, height = '0.5em', ...rest }, ref) => {\n    const validPercent = useMemo(() => {\n      if (percent < 0) return 0;\n      if (percent > 100) return 100;\n      return percent;\n    }, [percent]);\n\n    const textId = useMemo(\n      () => `progress-bar-text-${Math.random().toString(36).slice(2, 11)}`,\n      []\n    );\n\n    return (\n      <Container\n        role='progressbar'\n        aria-valuenow={validPercent}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        aria-describedby={textId}\n        {...rest}\n        ref={ref}\n      >\n        <Trail height={height}>\n          <Stroke percent={validPercent} height={height} />\n        </Trail>\n        {text && <Text id={textId}>{text}</Text>}\n      </Container>\n    );\n  }\n);\n\nProgress.displayName = 'Progress';\n\nexport default Progress;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["styled","sizeStyles","transitionStyles","clr","omitEmotionProps","React","forwardRef","useMemo","Container","Trail","p","theme","progressColorTrail","height","Stroke","percent","progressColorStroke","progressColorStrokeSuccess","Text","div","progressColorPercentage","Progress","text","rest","ref","validPercent","textId","Math","random","toString","slice","createElement","_extends","role","id","displayName"],"sources":["../../../src/Progress/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { WithSize, sizeStyles, transitionStyles } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, useMemo } from 'react';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface ProgressProps extends JsxDivProps, WithSize {\n  /**\n   * The percentage of completion.\n   * @default 0\n   */\n  percent?: number;\n  /**\n   * The text that is displayed to the right of the progress bar.\n   * @default undefined\n   */\n  text?: string;\n  /**\n   * The height of the progress bar.\n   * @default 0.5em\n   */\n  height?: string;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n  display: flex;\n  align-items: center;\n  ${sizeStyles};\n`;\n\ntype TrailProps = Required<Pick<ProgressProps, 'height'>>;\nconst Trail = styled('div', omitEmotionProps('height'))<TrailProps>`\n  width: 100%;\n  background-color: ${(p) => clr(p.theme.progressColorTrail)};\n  border-radius: ${(p) => `calc(${p.height} / 2)`};\n  overflow: hidden; // To hide the border of the progress bar\n`;\n\ntype StrokeProps = Required<Pick<ProgressProps, 'percent' | 'height'>>;\nconst Stroke = styled(\n  'div',\n  omitEmotionProps('percent', 'height')\n)<StrokeProps>`\n  width: ${(p) => p.percent}%;\n  height: ${(p) => p.height};\n  border-radius: 0 ${(p) => `calc(${p.height} / 2)`}\n    ${(p) => `calc(${p.height} / 2)`} 0;\n  background-color: ${(p) =>\n    p.percent < 100\n      ? clr(p.theme.progressColorStroke)\n      : clr(p.theme.progressColorStrokeSuccess)};\n  ${transitionStyles('width', 'background-color')};\n`;\n\nconst Text = styled.div`\n  margin-left: 0.5em;\n  color: ${(p) => clr(p.theme.progressColorPercentage)};\n  line-height: 1;\n`;\n\n/**\n * The progress bar.\n */\nconst Progress = forwardRef<HTMLDivElement, ProgressProps>(\n  ({ percent = 0, text, height = '0.5em', ...rest }, ref) => {\n    const validPercent = useMemo(() => {\n      if (percent < 0) return 0;\n      if (percent > 100) return 100;\n      return percent;\n    }, [percent]);\n\n    const textId = useMemo(\n      () => `progress-bar-text-${Math.random().toString(36).slice(2, 11)}`,\n      []\n    );\n\n    return (\n      <Container\n        role='progressbar'\n        aria-valuenow={validPercent}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        aria-describedby={textId}\n        {...rest}\n        ref={ref}\n      >\n        <Trail height={height}>\n          <Stroke percent={validPercent} height={height} />\n        </Trail>\n        {text && <Text id={textId}>{text}</Text>}\n      </Container>\n    );\n  }\n);\n\nProgress.displayName = 'Progress';\n\nexport default Progress;\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["styled","sizeStyles","omitEmotionProps","React","forwardRef","Skeleton","StyledRadioGroupSkeleton","p","theme","baseHeight","RadioGroupSkeleton","width","rest","ref","createElement","_extends","displayName"],"sources":["../../../src/RadioGroupSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\n\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\n\nimport Skeleton, { SkeletonProps } from '../Skeleton';\n\nexport interface RadioGroupSkeletonProps extends SkeletonProps, WithSize {\n  /**\n   * The width of the skeleton.\n   * @default 10em\n   */\n  width?: string;\n}\n\nconst StyledRadioGroupSkeleton = styled(\n  Skeleton,\n  omitEmotionProps('size')\n)<WithSize>`\n  height: calc(${(p) => p.theme.baseHeight}em + 2px);\n  ${sizeStyles};\n`;\n\n/**\n * Provides a radio group placeholder while a user waits for the content to load.\n */\nconst RadioGroupSkeleton = forwardRef<HTMLDivElement, RadioGroupSkeletonProps>(\n  ({ width = '10em', ...rest }, ref) => (\n    <StyledRadioGroupSkeleton width={width} {...rest} ref={ref} />\n  )\n);\n\nRadioGroupSkeleton.displayName = 'RadioGroupSkeleton';\n\nexport default RadioGroupSkeleton;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AAEpC,SAASC,UAAU,QAAkB,mBAAmB;AACxD,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AAEzC,OAAOC,QAAQ,MAAyB,aAAa;AAUrD,MAAMC,wBAAwB,GAAGN,MAAM,CACrCK,QAAQ,EACRH,gBAAgB,CAAC,MAAM,CACzB,CAAY;AACZ,iBAAkBK,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACC,UAAW;AAC3C,IAAIR,UAAW;AACf,CAAC;;AAED;AACA;AACA;AACA,MAAMS,kBAAkB,gBAAGN,UAAU,CACnC,CAAC;EAAEO,KAAK,GAAG,MAAM;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,kBAC/BV,KAAA,CAAAW,aAAA,CAACR,wBAAwB,EAAAS,QAAA;EAACJ,KAAK,EAAEA;AAAM,GAAKC,IAAI;EAAEC,GAAG,EAAEA;AAAI,EAAE,CAEjE,CAAC;AAEDH,kBAAkB,CAACM,WAAW,GAAG,oBAAoB;AAErD,eAAeN,kBAAkB"}
+{"version":3,"file":"index.js","names":["styled","sizeStyles","omitEmotionProps","React","forwardRef","Skeleton","StyledRadioGroupSkeleton","p","theme","baseHeight","RadioGroupSkeleton","width","rest","ref","createElement","_extends","displayName"],"sources":["../../../src/RadioGroupSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\nimport Skeleton, { SkeletonProps } from '../Skeleton';\n\nexport interface RadioGroupSkeletonProps extends SkeletonProps, WithSize {\n  /**\n   * The width of the skeleton.\n   * @default 10em\n   */\n  width?: string;\n}\n\nconst StyledRadioGroupSkeleton = styled(\n  Skeleton,\n  omitEmotionProps('size')\n)<WithSize>`\n  height: calc(${(p) => p.theme.baseHeight}em + 2px);\n  ${sizeStyles};\n`;\n\n/**\n * Provides a radio group placeholder while a user waits for the content to load.\n */\nconst RadioGroupSkeleton = forwardRef<HTMLDivElement, RadioGroupSkeletonProps>(\n  ({ width = '10em', ...rest }, ref) => (\n    <StyledRadioGroupSkeleton width={width} {...rest} ref={ref} />\n  )\n);\n\nRadioGroupSkeleton.displayName = 'RadioGroupSkeleton';\n\nexport default RadioGroupSkeleton;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,UAAU,QAAkB,mBAAmB;AACxD,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,QAAQ,MAAyB,aAAa;AAUrD,MAAMC,wBAAwB,GAAGN,MAAM,CACrCK,QAAQ,EACRH,gBAAgB,CAAC,MAAM,CACzB,CAAY;AACZ,iBAAkBK,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACC,UAAW;AAC3C,IAAIR,UAAW;AACf,CAAC;;AAED;AACA;AACA;AACA,MAAMS,kBAAkB,gBAAGN,UAAU,CACnC,CAAC;EAAEO,KAAK,GAAG,MAAM;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,kBAC/BV,KAAA,CAAAW,aAAA,CAACR,wBAAwB,EAAAS,QAAA;EAACJ,KAAK,EAAEA;AAAM,GAAKC,IAAI;EAAEC,GAAG,EAAEA;AAAI,EAAE,CAEjE,CAAC;AAEDH,kBAAkB,CAACM,WAAW,GAAG,oBAAoB;AAErD,eAAeN,kBAAkB"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["css","keyframes","styled","Down","Up","Portal","clr","ThemeOverrider","useTheme","omitEmotionProps","useClosable","React","forwardRef","useCallback","Button","useContainerPosition","useVisibility","fadeIn","fadeOut","visibleStyles","p","visible","theme","transitionDelay","invisibleStyles","StyledButton","containerPosition","right","scrollButtonMargin","bottom","scrollButtonColorBoxShadow","ScrollButton","container","scrollTo","minOffset","onClick","rest","ref","mounted","clickHandler","e","window","top","document","body","scrollHeight","containerElement","Element","current","createElement","overrides","t","buttonPrimaryColorBg","scrollButtonColorBg","buttonPrimaryColorText","scrollButtonColorText","buttonPrimaryColorBgHover","scrollButtonColorBgHover","_extends","wide","size","displayName"],"sources":["../../../src/ScrollButton/index.tsx"],"sourcesContent":["import { css, keyframes } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { Down, Up } from '@os-design/icons';\nimport Portal from '@os-design/portal';\nimport { clr, ThemeOverrider, useTheme } from '@os-design/theming';\nimport { omitEmotionProps, useClosable } from '@os-design/utils';\n\nimport React, {\n  forwardRef,\n  MouseEventHandler,\n  RefObject,\n  useCallback,\n} from 'react';\nimport Button, { ButtonProps } from '../Button';\nimport useContainerPosition, {\n  ContainerPosition,\n} from './utils/useContainerPosition';\nimport useVisibility from './utils/useVisibility';\n\nexport interface ScrollButtonProps extends Omit<ButtonProps, 'type' | 'wide'> {\n  /**\n   * The container that needs to be scrolled.\n   * @default undefined\n   */\n  container?: Element | RefObject<Element>;\n  /**\n   * Where the container should be scrolled.\n   * @default top\n   */\n  scrollTo?: 'top' | 'bottom';\n  /**\n   * The min scroll offset when the button is visible.\n   * @default 500\n   */\n  minOffset?: number;\n}\n\nconst fadeIn = keyframes`\n  from { opacity: 0; }\n  to { opacity: 1; }\n`;\n\nconst fadeOut = keyframes`\n  from { opacity: 1; }\n  to { opacity: 0; }\n`;\n\nconst visibleStyles = (p) =>\n  p.visible &&\n  css`\n    animation: ${fadeIn} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst invisibleStyles = (p) =>\n  !p.visible &&\n  css`\n    animation: ${fadeOut} ${p.theme.transitionDelay}ms forwards;\n  `;\n\ninterface StyledButtonProps {\n  visible: boolean;\n  containerPosition: ContainerPosition;\n}\nconst StyledButton = styled(\n  Button,\n  omitEmotionProps('visible', 'containerPosition')\n)<StyledButtonProps>`\n  position: fixed;\n  right: ${(p) =>\n    p.containerPosition.right > 0\n      ? `calc(${p.containerPosition.right}px + ${p.theme.scrollButtonMargin}em)`\n      : `${p.theme.scrollButtonMargin}em`};\n  bottom: ${(p) =>\n    `calc(${\n      p.containerPosition.bottom > 0 ? `${p.containerPosition.bottom}px + ` : ''\n    }${p.theme.scrollButtonMargin}em + env(safe-area-inset-bottom))`};\n  box-shadow: 0 0.15em 0.8em ${(p) => clr(p.theme.scrollButtonColorBoxShadow)};\n\n  ${visibleStyles};\n  ${invisibleStyles};\n`;\n\n/**\n * The button to scroll to either the top or bottom of the container.\n */\nconst ScrollButton = forwardRef<HTMLButtonElement, ScrollButtonProps>(\n  (\n    {\n      container,\n      scrollTo = 'top',\n      minOffset = 500,\n      onClick = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const visible = useVisibility({ container, scrollTo, minOffset });\n    const containerPosition = useContainerPosition(container);\n    const { theme } = useTheme();\n    const mounted = useClosable(visible, theme.transitionDelay);\n\n    // Scroll through the container when the user clicks the button\n    const clickHandler = useCallback<MouseEventHandler<HTMLButtonElement>>(\n      (e) => {\n        // Scroll the window if the container is not defined\n        if (!container) {\n          window.scrollTo({\n            top: scrollTo === 'top' ? 0 : document.body.scrollHeight,\n          });\n          return;\n        }\n\n        // Otherwise scroll the container\n        const containerElement =\n          container instanceof Element ? container : container.current;\n        if (!containerElement) return;\n\n        containerElement.scrollTo({\n          top: scrollTo === 'top' ? 0 : containerElement.scrollHeight,\n        });\n\n        // Call the passed onClick handler\n        onClick(e);\n      },\n      [container, scrollTo, onClick]\n    );\n\n    if (!mounted) return null;\n\n    return (\n      <Portal container={container}>\n        <ThemeOverrider\n          overrides={(t) => ({\n            buttonPrimaryColorBg: t.scrollButtonColorBg,\n            buttonPrimaryColorText: t.scrollButtonColorText,\n            buttonPrimaryColorBgHover: t.scrollButtonColorBgHover,\n          })}\n        >\n          <StyledButton\n            visible={visible}\n            containerPosition={containerPosition}\n            wide='never'\n            size='small'\n            onClick={clickHandler}\n            aria-label={`Scroll to ${scrollTo}`}\n            {...rest}\n            ref={ref}\n          >\n            {scrollTo === 'top' ? <Up /> : <Down />}\n          </StyledButton>\n        </ThemeOverrider>\n      </Portal>\n    );\n  }\n);\n\nScrollButton.displayName = 'ScrollButton';\n\nexport default ScrollButton;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["css","keyframes","styled","Down","Up","Portal","clr","ThemeOverrider","useTheme","omitEmotionProps","useClosable","React","forwardRef","useCallback","Button","useContainerPosition","useVisibility","fadeIn","fadeOut","visibleStyles","p","visible","theme","transitionDelay","invisibleStyles","StyledButton","containerPosition","right","scrollButtonMargin","bottom","scrollButtonColorBoxShadow","ScrollButton","container","scrollTo","minOffset","onClick","rest","ref","mounted","clickHandler","e","window","top","document","body","scrollHeight","containerElement","Element","current","createElement","overrides","t","buttonPrimaryColorBg","scrollButtonColorBg","buttonPrimaryColorText","scrollButtonColorText","buttonPrimaryColorBgHover","scrollButtonColorBgHover","_extends","wide","size","displayName"],"sources":["../../../src/ScrollButton/index.tsx"],"sourcesContent":["import { css, keyframes } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { Down, Up } from '@os-design/icons';\nimport Portal from '@os-design/portal';\nimport { clr, ThemeOverrider, useTheme } from '@os-design/theming';\nimport { omitEmotionProps, useClosable } from '@os-design/utils';\nimport React, {\n  forwardRef,\n  MouseEventHandler,\n  RefObject,\n  useCallback,\n} from 'react';\nimport Button, { ButtonProps } from '../Button';\nimport useContainerPosition, {\n  ContainerPosition,\n} from './utils/useContainerPosition';\nimport useVisibility from './utils/useVisibility';\n\nexport interface ScrollButtonProps extends Omit<ButtonProps, 'type' | 'wide'> {\n  /**\n   * The container that needs to be scrolled.\n   * @default undefined\n   */\n  container?: Element | RefObject<Element>;\n  /**\n   * Where the container should be scrolled.\n   * @default top\n   */\n  scrollTo?: 'top' | 'bottom';\n  /**\n   * The min scroll offset when the button is visible.\n   * @default 500\n   */\n  minOffset?: number;\n}\n\nconst fadeIn = keyframes`\n  from { opacity: 0; }\n  to { opacity: 1; }\n`;\n\nconst fadeOut = keyframes`\n  from { opacity: 1; }\n  to { opacity: 0; }\n`;\n\nconst visibleStyles = (p) =>\n  p.visible &&\n  css`\n    animation: ${fadeIn} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst invisibleStyles = (p) =>\n  !p.visible &&\n  css`\n    animation: ${fadeOut} ${p.theme.transitionDelay}ms forwards;\n  `;\n\ninterface StyledButtonProps {\n  visible: boolean;\n  containerPosition: ContainerPosition;\n}\nconst StyledButton = styled(\n  Button,\n  omitEmotionProps('visible', 'containerPosition')\n)<StyledButtonProps>`\n  position: fixed;\n  right: ${(p) =>\n    p.containerPosition.right > 0\n      ? `calc(${p.containerPosition.right}px + ${p.theme.scrollButtonMargin}em)`\n      : `${p.theme.scrollButtonMargin}em`};\n  bottom: ${(p) =>\n    `calc(${\n      p.containerPosition.bottom > 0 ? `${p.containerPosition.bottom}px + ` : ''\n    }${p.theme.scrollButtonMargin}em + env(safe-area-inset-bottom))`};\n  box-shadow: 0 0.15em 0.8em ${(p) => clr(p.theme.scrollButtonColorBoxShadow)};\n\n  ${visibleStyles};\n  ${invisibleStyles};\n`;\n\n/**\n * The button to scroll to either the top or bottom of the container.\n */\nconst ScrollButton = forwardRef<HTMLButtonElement, ScrollButtonProps>(\n  (\n    {\n      container,\n      scrollTo = 'top',\n      minOffset = 500,\n      onClick = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const visible = useVisibility({ container, scrollTo, minOffset });\n    const containerPosition = useContainerPosition(container);\n    const { theme } = useTheme();\n    const mounted = useClosable(visible, theme.transitionDelay);\n\n    // Scroll through the container when the user clicks the button\n    const clickHandler = useCallback<MouseEventHandler<HTMLButtonElement>>(\n      (e) => {\n        // Scroll the window if the container is not defined\n        if (!container) {\n          window.scrollTo({\n            top: scrollTo === 'top' ? 0 : document.body.scrollHeight,\n          });\n          return;\n        }\n\n        // Otherwise scroll the container\n        const containerElement =\n          container instanceof Element ? container : container.current;\n        if (!containerElement) return;\n\n        containerElement.scrollTo({\n          top: scrollTo === 'top' ? 0 : containerElement.scrollHeight,\n        });\n\n        // Call the passed onClick handler\n        onClick(e);\n      },\n      [container, scrollTo, onClick]\n    );\n\n    if (!mounted) return null;\n\n    return (\n      <Portal container={container}>\n        <ThemeOverrider\n          overrides={(t) => ({\n            buttonPrimaryColorBg: t.scrollButtonColorBg,\n            buttonPrimaryColorText: t.scrollButtonColorText,\n            buttonPrimaryColorBgHover: t.scrollButtonColorBgHover,\n          })}\n        >\n          <StyledButton\n            visible={visible}\n            containerPosition={containerPosition}\n            wide='never'\n            size='small'\n            onClick={clickHandler}\n            aria-label={`Scroll to ${scrollTo}`}\n            {...rest}\n            ref={ref}\n          >\n            {scrollTo === 'top' ? <Up /> : <Down />}\n          </StyledButton>\n        </ThemeOverrider>\n      </Portal>\n    );\n  }\n);\n\nScrollButton.displayName = 'ScrollButton';\n\nexport default ScrollButton;\n"],"mappings":"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"}