@os-design/core 1.0.133 → 1.0.136

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/NavigationItem/index.tsx"],"names":["currentPageStyles","p","currentPage","css","theme","navigationItemColorBgActive","navigationItemColorTextActive","NavigationLink","resetFocusStyles","borderRadius","navigationItemColorText","navigationItemColorBgHover","navigationItemTabWidth","navigationTabHeight","m","min","md","navigationItemSideHeight","IconContainer","styled","span","Title","NavigationItem","ref","icon","as","onMouseDown","children","rest","e","preventDefault","undefined","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAoBA,IAAMA,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,CAAD;AAAA,SACxBA,CAAC,CAACC,WAAF,QACAC,WADA,0HAEsB,kBAAIF,CAAC,CAACG,KAAF,CAAQC,2BAAZ,CAFtB,EAGW,kBAAIJ,CAAC,CAACG,KAAF,CAAQE,6BAAZ,CAHX,CADwB;AAAA,CAA1B;;AAQA,IAAMC,cAAc,GAAG,wBACrB,GADqB,EAErB,6BAAiB,aAAjB,EAAgC,IAAhC,CAFqB,CAAH,2pBAIhBC,wBAJgB,EAQD,UAACP,CAAD;AAAA,SAAOA,CAAC,CAACG,KAAF,CAAQK,YAAf;AAAA,CARC,EAeT,UAACR,CAAD;AAAA,SAAO,kBAAIA,CAAC,CAACG,KAAF,CAAQM,uBAAZ,CAAP;AAAA,CAfS,EAmBM,UAACT,CAAD;AAAA,SAAO,kBAAIA,CAAC,CAACG,KAAF,CAAQO,0BAAZ,CAAP;AAAA,CAnBN,EAwBT,UAACV,CAAD;AAAA,SAAOA,CAAC,CAACG,KAAF,CAAQQ,sBAAf;AAAA,CAxBS,EAyBL,UAACX,CAAD;AAAA,SAAOA,CAAC,CAACG,KAAF,CAAQQ,sBAAf;AAAA,CAzBK,EA0BH,UAACX,CAAD;AAAA,SAAOA,CAAC,CAACG,KAAF,CAAQS,mBAAf;AAAA,CA1BG,EA6BhBC,SAAEC,GAAF,CAAMC,EA7BU,EAkCN,UAACf,CAAD;AAAA,SAAOA,CAAC,CAACG,KAAF,CAAQa,wBAAf;AAAA,CAlCM,EAmCF,UAAChB,CAAD;AAAA,SAAOA,CAAC,CAACG,KAAF,CAAQa,wBAAf;AAAA,CAnCE,EAsChBjB,iBAtCgB,EAuChB,8BAAiB,kBAAjB,EAAqC,OAArC,CAvCgB,CAApB;;AA0CA,IAAMkB,aAAa,GAAGC,mBAAOC,IAAV,uMAOfN,SAAEC,GAAF,CAAMC,EAPS,CAAnB;;AAYA,IAAMK,KAAK,GAAGF,mBAAOC,IAAV,2MAMPN,SAAEC,GAAF,CAAMC,EANC,CAAX;AAWA;AACA;AACA;;;AACA,IAAMM,cAAc,gBAAG,uBACrB,gBASEC,GATF;AAAA,MAEIC,IAFJ,QAEIA,IAFJ;AAAA,8BAGItB,WAHJ;AAAA,MAGIA,WAHJ,iCAGkB,KAHlB;AAAA,MAIIuB,EAJJ,QAIIA,EAJJ;AAAA,8BAKIC,WALJ;AAAA,MAKIA,YALJ,iCAKkB,YAAM,CAAE,CAL1B;AAAA,MAMIC,QANJ,QAMIA,QANJ;AAAA,MAOOC,IAPP;;AAAA,sBAWE;AAAK,IAAA,IAAI,EAAC;AAAV,kBACE,gCAAC,cAAD;AACE,IAAA,WAAW,EAAE1B,WADf;AAEE,IAAA,EAAE,EAAEuB,EAFN;AAGE,IAAA,WAAW,EAAE,qBAACI,CAAD,EAAO;AAClBH,MAAAA,YAAW,CAACG,CAAD,CAAX;;AACAA,MAAAA,CAAC,CAACC,cAAF;AACD,KANH;AAOE,oBAAc5B,WAAW,GAAG,MAAH,GAAY6B;AAPvC,KAQMH,IARN;AASE,IAAA,GAAG,EAAEL;AATP,mBAWE,gCAAC,aAAD,QAAgBC,IAAhB,CAXF,EAYGG,QAAQ,iBAAI,gCAAC,KAAD,QAAQA,QAAR,CAZf,CADF,CAXF;AAAA,CADqB,CAAvB;AA+BAL,cAAc,CAACU,WAAf,GAA6B,gBAA7B;eAEeV,c","sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { resetFocusStyles, transitionStyles } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport { m } from '@os-design/media';\nimport { LinkProps, ReactRouterLinkProps } from '../Link';\n\ntype JsxAProps = Omit<JSX.IntrinsicElements['a'], 'ref'>;\nexport interface NavigationItemProps\n  extends JsxAProps,\n    ReactRouterLinkProps,\n    Pick<LinkProps, 'as'> {\n  /**\n   * The icon of the item.\n   * @default undefined\n   */\n  icon: React.ReactElement;\n  /**\n   * Whether the item is the current page.\n   * @default false\n   */\n  currentPage?: boolean;\n}\n\nconst currentPageStyles = (p) =>\n  p.currentPage &&\n  css`\n    background-color: ${clr(p.theme.navigationItemColorBgActive)};\n    color: ${clr(p.theme.navigationItemColorTextActive)};\n  `;\n\ntype NavigationLinkProps = Pick<NavigationItemProps, 'currentPage'>;\nconst NavigationLink = styled(\n  'a',\n  omitEmotionProps('currentPage', 'as')\n)<NavigationLinkProps>`\n  ${resetFocusStyles};\n  text-decoration: none;\n  cursor: pointer;\n  overflow: hidden;\n  border-radius: ${(p) => p.theme.borderRadius}em;\n\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n\n  color: ${(p) => clr(p.theme.navigationItemColorText)};\n  @media (hover: hover) {\n    &:hover,\n    &:focus {\n      background-color: ${(p) => clr(p.theme.navigationItemColorBgHover)};\n    }\n  }\n\n  // Tab navigator\n  width: ${(p) => p.theme.navigationItemTabWidth}em;\n  min-width: ${(p) => p.theme.navigationItemTabWidth}em;\n  height: calc(${(p) => p.theme.navigationTabHeight}em - 1px);\n\n  // Side navigator\n  ${m.min.md} {\n    // Reset tab navigator styles\n    min-width: unset;\n\n    width: 100%;\n    height: ${(p) => p.theme.navigationItemSideHeight}em;\n    min-height: ${(p) => p.theme.navigationItemSideHeight}em;\n  }\n\n  ${currentPageStyles};\n  ${transitionStyles('background-color', 'color')};\n`;\n\nconst IconContainer = styled.span`\n  display: inherit;\n\n  // Tab navigator\n  font-size: 1.6em;\n\n  // Side navigator\n  ${m.min.md} {\n    font-size: 1.8em;\n  }\n`;\n\nconst Title = styled.span`\n  font-size: 0.75em;\n  font-weight: 500;\n  white-space: nowrap;\n\n  // Side navigator\n  ${m.min.md} {\n    margin-top: 0.3em;\n  }\n`;\n\n/**\n * The item of the navigation.\n */\nconst NavigationItem = forwardRef<HTMLAnchorElement, NavigationItemProps>(\n  (\n    {\n      icon,\n      currentPage = false,\n      as,\n      onMouseDown = () => {},\n      children,\n      ...rest\n    },\n    ref\n  ) => (\n    <div role='listitem'>\n      <NavigationLink\n        currentPage={currentPage}\n        as={as}\n        onMouseDown={(e) => {\n          onMouseDown(e);\n          e.preventDefault();\n        }}\n        aria-current={currentPage ? 'page' : undefined}\n        {...rest}\n        ref={ref}\n      >\n        <IconContainer>{icon}</IconContainer>\n        {children && <Title>{children}</Title>}\n      </NavigationLink>\n    </div>\n  )\n);\n\nNavigationItem.displayName = 'NavigationItem';\n\nexport default NavigationItem;\n"],"file":"index.js"}
+{"version":3,"file":"index.js","names":["currentPageStyles","p","currentPage","css","clr","theme","navigationItemColorBgActive","navigationItemColorTextActive","NavigationLink","styled","omitEmotionProps","resetFocusStyles","borderRadius","navigationItemColorText","navigationItemColorBgHover","navigationItemTabWidth","navigationTabHeight","m","min","md","navigationItemSideHeight","transitionStyles","IconContainer","span","Title","NavigationItem","forwardRef","ref","icon","as","onMouseDown","children","rest","e","preventDefault","undefined","displayName"],"sources":["../../../src/NavigationItem/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { resetFocusStyles, transitionStyles } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport { m } from '@os-design/media';\nimport { LinkProps, ReactRouterLinkProps } from '../Link';\n\ntype JsxAProps = Omit<JSX.IntrinsicElements['a'], 'ref'>;\nexport interface NavigationItemProps\n  extends JsxAProps,\n    ReactRouterLinkProps,\n    Pick<LinkProps, 'as'> {\n  /**\n   * The icon of the item.\n   * @default undefined\n   */\n  icon: React.ReactElement;\n  /**\n   * Whether the item is the current page.\n   * @default false\n   */\n  currentPage?: boolean;\n}\n\nconst currentPageStyles = (p) =>\n  p.currentPage &&\n  css`\n    background-color: ${clr(p.theme.navigationItemColorBgActive)};\n    color: ${clr(p.theme.navigationItemColorTextActive)};\n  `;\n\ntype NavigationLinkProps = Pick<NavigationItemProps, 'currentPage'>;\nconst NavigationLink = styled(\n  'a',\n  omitEmotionProps('currentPage', 'as')\n)<NavigationLinkProps>`\n  ${resetFocusStyles};\n  text-decoration: none;\n  cursor: pointer;\n  overflow: hidden;\n  border-radius: ${(p) => p.theme.borderRadius}em;\n\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n\n  color: ${(p) => clr(p.theme.navigationItemColorText)};\n  @media (hover: hover) {\n    &:hover,\n    &:focus {\n      background-color: ${(p) => clr(p.theme.navigationItemColorBgHover)};\n    }\n  }\n\n  // Tab navigator\n  width: ${(p) => p.theme.navigationItemTabWidth}em;\n  min-width: ${(p) => p.theme.navigationItemTabWidth}em;\n  height: calc(${(p) => p.theme.navigationTabHeight}em - 1px);\n\n  // Side navigator\n  ${m.min.md} {\n    // Reset tab navigator styles\n    min-width: unset;\n\n    width: 100%;\n    height: ${(p) => p.theme.navigationItemSideHeight}em;\n    min-height: ${(p) => p.theme.navigationItemSideHeight}em;\n  }\n\n  ${currentPageStyles};\n  ${transitionStyles('background-color', 'color')};\n`;\n\nconst IconContainer = styled.span`\n  display: inherit;\n\n  // Tab navigator\n  font-size: 1.6em;\n\n  // Side navigator\n  ${m.min.md} {\n    font-size: 1.8em;\n  }\n`;\n\nconst Title = styled.span`\n  font-size: 0.75em;\n  font-weight: 500;\n  white-space: nowrap;\n\n  // Side navigator\n  ${m.min.md} {\n    margin-top: 0.3em;\n  }\n`;\n\n/**\n * The item of the navigation.\n */\nconst NavigationItem = forwardRef<HTMLAnchorElement, NavigationItemProps>(\n  (\n    {\n      icon,\n      currentPage = false,\n      as,\n      onMouseDown = () => {},\n      children,\n      ...rest\n    },\n    ref\n  ) => (\n    <div role='listitem'>\n      <NavigationLink\n        currentPage={currentPage}\n        as={as}\n        onMouseDown={(e) => {\n          onMouseDown(e);\n          e.preventDefault();\n        }}\n        aria-current={currentPage ? 'page' : undefined}\n        {...rest}\n        ref={ref}\n      >\n        <IconContainer>{icon}</IconContainer>\n        {children && <Title>{children}</Title>}\n      </NavigationLink>\n    </div>\n  )\n);\n\nNavigationItem.displayName = 'NavigationItem';\n\nexport default NavigationItem;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAoBA,IAAMA,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,CAAD;EAAA,OACxBA,CAAC,CAACC,WAAF,QACAC,WADA,0HAEsB,IAAAC,YAAA,EAAIH,CAAC,CAACI,KAAF,CAAQC,2BAAZ,CAFtB,EAGW,IAAAF,YAAA,EAAIH,CAAC,CAACI,KAAF,CAAQE,6BAAZ,CAHX,CADwB;AAAA,CAA1B;;AAQA,IAAMC,cAAc,GAAG,IAAAC,kBAAA,EACrB,GADqB,EAErB,IAAAC,uBAAA,EAAiB,aAAjB,EAAgC,IAAhC,CAFqB,CAAH,2pBAIhBC,wBAJgB,EAQD,UAACV,CAAD;EAAA,OAAOA,CAAC,CAACI,KAAF,CAAQO,YAAf;AAAA,CARC,EAeT,UAACX,CAAD;EAAA,OAAO,IAAAG,YAAA,EAAIH,CAAC,CAACI,KAAF,CAAQQ,uBAAZ,CAAP;AAAA,CAfS,EAmBM,UAACZ,CAAD;EAAA,OAAO,IAAAG,YAAA,EAAIH,CAAC,CAACI,KAAF,CAAQS,0BAAZ,CAAP;AAAA,CAnBN,EAwBT,UAACb,CAAD;EAAA,OAAOA,CAAC,CAACI,KAAF,CAAQU,sBAAf;AAAA,CAxBS,EAyBL,UAACd,CAAD;EAAA,OAAOA,CAAC,CAACI,KAAF,CAAQU,sBAAf;AAAA,CAzBK,EA0BH,UAACd,CAAD;EAAA,OAAOA,CAAC,CAACI,KAAF,CAAQW,mBAAf;AAAA,CA1BG,EA6BhBC,QAAA,CAAEC,GAAF,CAAMC,EA7BU,EAkCN,UAAClB,CAAD;EAAA,OAAOA,CAAC,CAACI,KAAF,CAAQe,wBAAf;AAAA,CAlCM,EAmCF,UAACnB,CAAD;EAAA,OAAOA,CAAC,CAACI,KAAF,CAAQe,wBAAf;AAAA,CAnCE,EAsChBpB,iBAtCgB,EAuChB,IAAAqB,wBAAA,EAAiB,kBAAjB,EAAqC,OAArC,CAvCgB,CAApB;;AA0CA,IAAMC,aAAa,GAAGb,kBAAA,CAAOc,IAAV,uMAOfN,QAAA,CAAEC,GAAF,CAAMC,EAPS,CAAnB;;AAYA,IAAMK,KAAK,GAAGf,kBAAA,CAAOc,IAAV,2MAMPN,QAAA,CAAEC,GAAF,CAAMC,EANC,CAAX;AAWA;AACA;AACA;;;AACA,IAAMM,cAAc,gBAAG,IAAAC,iBAAA,EACrB,gBASEC,GATF;EAAA,IAEIC,IAFJ,QAEIA,IAFJ;EAAA,4BAGI1B,WAHJ;EAAA,IAGIA,WAHJ,iCAGkB,KAHlB;EAAA,IAII2B,EAJJ,QAIIA,EAJJ;EAAA,4BAKIC,WALJ;EAAA,IAKIA,YALJ,iCAKkB,YAAM,CAAE,CAL1B;EAAA,IAMIC,QANJ,QAMIA,QANJ;EAAA,IAOOC,IAPP;;EAAA,oBAWE;IAAK,IAAI,EAAC;EAAV,gBACE,gCAAC,cAAD;IACE,WAAW,EAAE9B,WADf;IAEE,EAAE,EAAE2B,EAFN;IAGE,WAAW,EAAE,qBAACI,CAAD,EAAO;MAClBH,YAAW,CAACG,CAAD,CAAX;;MACAA,CAAC,CAACC,cAAF;IACD,CANH;IAOE,gBAAchC,WAAW,GAAG,MAAH,GAAYiC;EAPvC,GAQMH,IARN;IASE,GAAG,EAAEL;EATP,iBAWE,gCAAC,aAAD,QAAgBC,IAAhB,CAXF,EAYGG,QAAQ,iBAAI,gCAAC,KAAD,QAAQA,QAAR,CAZf,CADF,CAXF;AAAA,CADqB,CAAvB;AA+BAN,cAAc,CAACW,WAAf,GAA6B,gBAA7B;eAEeX,c"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/PageContent/index.tsx"],"names":["hasNavigationStyles","p","hasNavigation","css","hasList","theme","navigationTabHeight","m","min","md","navigationSideWidth","hasPageHeaderStyles","hasPageHeader","pageHeaderHeight","notHasListStyles","pageContentPaddingVertical","notHasNavigationStyles","Container","PageContent","ref","children","rest","LayoutContext","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAWA,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACC,CAAD;AAAA,SAC1BA,CAAC,CAACC,aAAF,QACAC,WADA,6JAEI,CAACF,CAAC,CAACG,OAAH,QACFD,WADE,mKAGIF,CAAC,CAACI,KAAF,CAAQC,mBAHZ,CAFJ,EAQIC,SAAEC,GAAF,CAAMC,EARV,EAUmBR,CAAC,CAACI,KAAF,CAAQK,mBAV3B,CAD0B;AAAA,CAA5B;;AAeA,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACV,CAAD;AAAA,SAC1BA,CAAC,CAACW,aAAF,IACA,CAACX,CAAC,CAACG,OADH,QAEAD,WAFA,oJAGgBF,CAAC,CAACI,KAAF,CAAQQ,gBAAR,CAAyB,CAAzB,CAHhB,EAIIN,SAAEC,GAAF,CAAMC,EAJV,EAKkBR,CAAC,CAACI,KAAF,CAAQQ,gBAAR,CAAyB,CAAzB,CALlB,CAD0B;AAAA,CAA5B;;AAUA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACb,CAAD;AAAA,SACvB,CAACA,CAAC,CAACG,OAAH,QACAD,WADA,+IAEiBF,CAAC,CAACI,KAAF,CAAQU,0BAFzB,EAGoBd,CAAC,CAACI,KAAF,CAAQU,0BAH5B,EAII,uCAA0Bd,CAA1B,CAJJ,CADuB;AAAA,CAAzB;;AAQA,IAAMe,sBAAsB,GAAG,SAAzBA,sBAAyB,CAACf,CAAD;AAAA,SAC7B,CAACA,CAAC,CAACC,aAAH,IACA,CAACD,CAAC,CAACG,OADH,QAEAD,WAFA,6HAD6B;AAAA,CAA/B;;AAYA,IAAMc,SAAS,GAAG,wBAChB,MADgB,EAEhB,6BAAiB,eAAjB,EAAkC,eAAlC,EAAmD,SAAnD,CAFgB,CAAH,8GAIXjB,mBAJW,EAKXW,mBALW,EAMXG,gBANW,EAOXE,sBAPW,CAAf;AAUA;AACA;AACA;;AACA,IAAME,WAAW,gBAAG,uBAClB,gBAAyCC,GAAzC,EAAiD;AAAA,0BAA9Cf,OAA8C;AAAA,MAA9CA,OAA8C,6BAApC,KAAoC;AAAA,MAA7BgB,QAA6B,QAA7BA,QAA6B;AAAA,MAAhBC,IAAgB;;AAC/C,oBAAyC,uBAAWC,yBAAX,CAAzC;AAAA,MAAQpB,aAAR,eAAQA,aAAR;AAAA,MAAuBU,aAAvB,eAAuBA,aAAvB;;AAEA,sBACE,gCAAC,SAAD;AACE,IAAA,aAAa,EAAEV,aADjB;AAEE,IAAA,aAAa,EAAEU,aAFjB;AAGE,IAAA,OAAO,EAAER;AAHX,KAIMiB,IAJN;AAKE,IAAA,GAAG,EAAEF;AALP,MAOGC,QAPH,CADF;AAWD,CAfiB,CAApB;AAkBAF,WAAW,CAACK,WAAZ,GAA0B,aAA1B;eAEeL,W","sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef, useContext } from 'react';\nimport { horizontalPaddingStyles } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { css } from '@emotion/react';\nimport { m } from '@os-design/media';\nimport LayoutContext from '../Layout/LayoutContext';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface PageContentProps extends JsxDivProps {\n  /**\n   * Whether there is the list in the page content.\n   * @default false\n   */\n  hasList?: boolean;\n}\n\nconst hasNavigationStyles = (p) =>\n  p.hasNavigation &&\n  css`\n    ${!p.hasList &&\n    css`\n      margin-bottom: calc(\n        ${p.theme.navigationTabHeight}em + env(safe-area-inset-bottom)\n      );\n    `}\n    ${m.min.md} {\n      margin-bottom: 0;\n      margin-left: ${p.theme.navigationSideWidth}em;\n    }\n  `;\n\nconst hasPageHeaderStyles = (p) =>\n  p.hasPageHeader &&\n  !p.hasList &&\n  css`\n    margin-top: ${p.theme.pageHeaderHeight[0]}em;\n    ${m.min.md} {\n      margin-top: ${p.theme.pageHeaderHeight[1]}em;\n    }\n  `;\n\nconst notHasListStyles = (p) =>\n  !p.hasList &&\n  css`\n    padding-top: ${p.theme.pageContentPaddingVertical}em;\n    padding-bottom: ${p.theme.pageContentPaddingVertical}em;\n    ${horizontalPaddingStyles()(p)};\n  `;\n\nconst notHasNavigationStyles = (p) =>\n  !p.hasNavigation &&\n  !p.hasList &&\n  css`\n    margin-bottom: env(safe-area-inset-bottom);\n  `;\n\ninterface ContainerProps {\n  hasNavigation?: boolean;\n  hasPageHeader?: boolean;\n  hasList?: boolean;\n}\nconst Container = styled(\n  'main',\n  omitEmotionProps('hasNavigation', 'hasPageHeader', 'hasList')\n)<ContainerProps>`\n  ${hasNavigationStyles};\n  ${hasPageHeaderStyles};\n  ${notHasListStyles};\n  ${notHasNavigationStyles};\n`;\n\n/**\n * The wrapper that adds padding to the page content.\n */\nconst PageContent = forwardRef<HTMLElement, PageContentProps>(\n  ({ hasList = false, children, ...rest }, ref) => {\n    const { hasNavigation, hasPageHeader } = useContext(LayoutContext);\n\n    return (\n      <Container\n        hasNavigation={hasNavigation}\n        hasPageHeader={hasPageHeader}\n        hasList={hasList}\n        {...rest}\n        ref={ref}\n      >\n        {children}\n      </Container>\n    );\n  }\n);\n\nPageContent.displayName = 'PageContent';\n\nexport default PageContent;\n"],"file":"index.js"}
+{"version":3,"file":"index.js","names":["hasNavigationStyles","p","hasNavigation","css","hasList","theme","navigationTabHeight","m","min","md","navigationSideWidth","hasPageHeaderStyles","hasPageHeader","pageHeaderHeight","notHasListStyles","pageContentPaddingVertical","horizontalPaddingStyles","notHasNavigationStyles","Container","styled","omitEmotionProps","PageContent","forwardRef","ref","children","rest","useContext","LayoutContext","displayName"],"sources":["../../../src/PageContent/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef, useContext } from 'react';\nimport { horizontalPaddingStyles } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { css } from '@emotion/react';\nimport { m } from '@os-design/media';\nimport LayoutContext from '../Layout/LayoutContext';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface PageContentProps extends JsxDivProps {\n  /**\n   * Whether there is the list in the page content.\n   * @default false\n   */\n  hasList?: boolean;\n}\n\nconst hasNavigationStyles = (p) =>\n  p.hasNavigation &&\n  css`\n    ${!p.hasList &&\n    css`\n      margin-bottom: calc(\n        ${p.theme.navigationTabHeight}em + env(safe-area-inset-bottom)\n      );\n    `}\n    ${m.min.md} {\n      margin-bottom: 0;\n      margin-left: ${p.theme.navigationSideWidth}em;\n    }\n  `;\n\nconst hasPageHeaderStyles = (p) =>\n  p.hasPageHeader &&\n  !p.hasList &&\n  css`\n    margin-top: ${p.theme.pageHeaderHeight[0]}em;\n    ${m.min.md} {\n      margin-top: ${p.theme.pageHeaderHeight[1]}em;\n    }\n  `;\n\nconst notHasListStyles = (p) =>\n  !p.hasList &&\n  css`\n    padding-top: ${p.theme.pageContentPaddingVertical}em;\n    padding-bottom: ${p.theme.pageContentPaddingVertical}em;\n    ${horizontalPaddingStyles()(p)};\n  `;\n\nconst notHasNavigationStyles = (p) =>\n  !p.hasNavigation &&\n  !p.hasList &&\n  css`\n    margin-bottom: env(safe-area-inset-bottom);\n  `;\n\ninterface ContainerProps {\n  hasNavigation?: boolean;\n  hasPageHeader?: boolean;\n  hasList?: boolean;\n}\nconst Container = styled(\n  'main',\n  omitEmotionProps('hasNavigation', 'hasPageHeader', 'hasList')\n)<ContainerProps>`\n  ${hasNavigationStyles};\n  ${hasPageHeaderStyles};\n  ${notHasListStyles};\n  ${notHasNavigationStyles};\n`;\n\n/**\n * The wrapper that adds padding to the page content.\n */\nconst PageContent = forwardRef<HTMLElement, PageContentProps>(\n  ({ hasList = false, children, ...rest }, ref) => {\n    const { hasNavigation, hasPageHeader } = useContext(LayoutContext);\n\n    return (\n      <Container\n        hasNavigation={hasNavigation}\n        hasPageHeader={hasPageHeader}\n        hasList={hasList}\n        {...rest}\n        ref={ref}\n      >\n        {children}\n      </Container>\n    );\n  }\n);\n\nPageContent.displayName = 'PageContent';\n\nexport default PageContent;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAWA,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACC,CAAD;EAAA,OAC1BA,CAAC,CAACC,aAAF,QACAC,WADA,6JAEI,CAACF,CAAC,CAACG,OAAH,QACFD,WADE,mKAGIF,CAAC,CAACI,KAAF,CAAQC,mBAHZ,CAFJ,EAQIC,QAAA,CAAEC,GAAF,CAAMC,EARV,EAUmBR,CAAC,CAACI,KAAF,CAAQK,mBAV3B,CAD0B;AAAA,CAA5B;;AAeA,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACV,CAAD;EAAA,OAC1BA,CAAC,CAACW,aAAF,IACA,CAACX,CAAC,CAACG,OADH,QAEAD,WAFA,oJAGgBF,CAAC,CAACI,KAAF,CAAQQ,gBAAR,CAAyB,CAAzB,CAHhB,EAIIN,QAAA,CAAEC,GAAF,CAAMC,EAJV,EAKkBR,CAAC,CAACI,KAAF,CAAQQ,gBAAR,CAAyB,CAAzB,CALlB,CAD0B;AAAA,CAA5B;;AAUA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACb,CAAD;EAAA,OACvB,CAACA,CAAC,CAACG,OAAH,QACAD,WADA,+IAEiBF,CAAC,CAACI,KAAF,CAAQU,0BAFzB,EAGoBd,CAAC,CAACI,KAAF,CAAQU,0BAH5B,EAII,IAAAC,+BAAA,IAA0Bf,CAA1B,CAJJ,CADuB;AAAA,CAAzB;;AAQA,IAAMgB,sBAAsB,GAAG,SAAzBA,sBAAyB,CAAChB,CAAD;EAAA,OAC7B,CAACA,CAAC,CAACC,aAAH,IACA,CAACD,CAAC,CAACG,OADH,QAEAD,WAFA,6HAD6B;AAAA,CAA/B;;AAYA,IAAMe,SAAS,GAAG,IAAAC,kBAAA,EAChB,MADgB,EAEhB,IAAAC,uBAAA,EAAiB,eAAjB,EAAkC,eAAlC,EAAmD,SAAnD,CAFgB,CAAH,8GAIXpB,mBAJW,EAKXW,mBALW,EAMXG,gBANW,EAOXG,sBAPW,CAAf;AAUA;AACA;AACA;;AACA,IAAMI,WAAW,gBAAG,IAAAC,iBAAA,EAClB,gBAAyCC,GAAzC,EAAiD;EAAA,wBAA9CnB,OAA8C;EAAA,IAA9CA,OAA8C,6BAApC,KAAoC;EAAA,IAA7BoB,QAA6B,QAA7BA,QAA6B;EAAA,IAAhBC,IAAgB;;EAC/C,kBAAyC,IAAAC,iBAAA,EAAWC,yBAAX,CAAzC;EAAA,IAAQzB,aAAR,eAAQA,aAAR;EAAA,IAAuBU,aAAvB,eAAuBA,aAAvB;;EAEA,oBACE,gCAAC,SAAD;IACE,aAAa,EAAEV,aADjB;IAEE,aAAa,EAAEU,aAFjB;IAGE,OAAO,EAAER;EAHX,GAIMqB,IAJN;IAKE,GAAG,EAAEF;EALP,IAOGC,QAPH,CADF;AAWD,CAfiB,CAApB;AAkBAH,WAAW,CAACO,WAAZ,GAA0B,aAA1B;eAEeP,W"}

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/PageHeaderInputSearch/index.tsx"],"names":["fadeIn","keyframes","fadeOut","visibleStyles","p","visible","css","theme","transitionDelay","invisibleStyles","Container","PageHeaderContainer","CloseButton","Button","pageHeaderAddonPaddingHorizontal","PageHeaderInputSearch","ref","locale","defaultLocale","onClose","rest","setVisible","mounted","LayoutContext","hasNavigation","searchLabel","t","buttonPaddingHorizontal","pageHeaderButtonPaddingHorizontal","closeLabel","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,IAAMA,MAAM,OAAGC,iBAAH,sJAAZ;AAKA,IAAMC,OAAO,OAAGD,iBAAH,wJAAb;;AAKA,IAAME,aAAa,GAAG,SAAhBA,aAAgB,CAACC,CAAD;AAAA,SACpBA,CAAC,CAACC,OAAF,QACAC,WADA,mHAEeN,MAFf,EAEyBI,CAAC,CAACG,KAAF,CAAQC,eAFjC,CADoB;AAAA,CAAtB;;AAMA,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,CAACL,CAAD;AAAA,SACtB,CAACA,CAAC,CAACC,OAAH,QACAC,WADA,mHAEeJ,OAFf,EAE0BE,CAAC,CAACG,KAAF,CAAQC,eAFlC,CADsB;AAAA,CAAxB;;AASA,IAAME,SAAS,GAAG,wBAChBC,+BADgB,EAEhB,6BAAiB,SAAjB,CAFgB,CAAH,0IAKXR,aALW,EAMXM,eANW,CAAf;AASA,IAAMG,WAAW,GAAG,wBAAOC,kBAAP,CAAH,kGACA,UAACT,CAAD;AAAA,SAAOA,CAAC,CAACG,KAAF,CAAQO,gCAAf;AAAA,CADA,CAAjB;AAIA;AACA;AACA;;AACA,IAAMC,qBAAqB,gBAAG,uBAG5B,gBAA0DC,GAA1D,EAAkE;AAAA,yBAA/DC,MAA+D;AAAA,MAA/DA,MAA+D,4BAAtDC,yBAAsD;AAAA,0BAAvCC,OAAuC;AAAA,MAAvCA,OAAuC,6BAA7B,YAAM,CAAE,CAAqB;AAAA,MAAhBC,IAAgB;;AAClE,kBAA8B,qBAAS,KAAT,CAA9B;AAAA;AAAA,MAAOf,OAAP;AAAA,MAAgBgB,UAAhB;;AACA,kBAAkB,wBAAlB;AAAA,MAAQd,KAAR,aAAQA,KAAR;;AACA,MAAMe,OAAO,GAAG,wBAAYjB,OAAZ,EAAqBE,KAAK,CAACC,eAA3B,CAAhB;;AACA,oBAA0B,uBAAWe,yBAAX,CAA1B;AAAA,MAAQC,aAAR,eAAQA,aAAR;;AAEA,sBACE,+EACE,gCAAC,kBAAD;AACE,IAAA,IAAI,EAAC,OADP;AAEE,IAAA,IAAI,EAAC,OAFP;AAGE,IAAA,OAAO,EAAE;AAAA,aAAMH,UAAU,CAAC,IAAD,CAAhB;AAAA,KAHX;AAIE,kBAAYJ,MAAM,CAACQ;AAJrB,kBAME,gCAAC,aAAD,OANF,CADF,EAUGH,OAAO,iBACN,gCAAC,uBAAD;AACE,IAAA,SAAS,EAAE,mBAACI,CAAD;AAAA,aAAQ;AACjBC,QAAAA,uBAAuB,EAAED,CAAC,CAACE;AADV,OAAR;AAAA;AADb,kBAKE,gCAAC,SAAD;AACE,IAAA,OAAO,EAAEvB,OADX;AAEE,IAAA,kBAAkB,MAFpB;AAGE,IAAA,mBAAmB,EAAEmB;AAHvB,kBAKE,gCAAC,uBAAD;AAAa,IAAA,SAAS,MAAtB;AAAuB,IAAA,MAAM,EAAEP;AAA/B,KAA2CG,IAA3C;AAAiD,IAAA,GAAG,EAAEJ;AAAtD,KALF,eAME,gCAAC,WAAD;AACE,IAAA,IAAI,EAAC,OADP;AAEE,IAAA,IAAI,EAAC,OAFP;AAGE,IAAA,OAAO,EAAE,mBAAM;AACbK,MAAAA,UAAU,CAAC,KAAD,CAAV;AACAF,MAAAA,OAAO;AACR,KANH;AAOE,kBAAYF,MAAM,CAACY;AAPrB,kBASE,gCAAC,YAAD,OATF,CANF,CALF,CAXJ,CADF;AAuCD,CAhD6B,CAA9B;AAkDAd,qBAAqB,CAACe,WAAtB,GAAoC,uBAApC;eAEef,qB","sourcesContent":["import React, { forwardRef, useContext, useState } from 'react';\nimport { Close, Search } from '@os-design/icons';\nimport styled from '@emotion/styled';\nimport { useClosable, omitEmotionProps } from '@os-design/utils';\nimport { ThemeOverrider, useTheme } from '@os-design/theming';\nimport { css, keyframes } from '@emotion/react';\nimport InputSearch, { InputSearchProps } from '../InputSearch';\nimport Button from '../Button';\nimport { PageHeaderContainer } from '../PageHeader';\nimport LayoutContext from '../Layout/LayoutContext';\nimport defaultLocale, {\n  PageHeaderInputSearchLocale,\n} from './utils/defaultLocale';\n\nexport interface PageHeaderInputSearchProps\n  extends Omit<InputSearchProps, 'size' | 'locale'> {\n  /**\n   * The locale.\n   * @default undefined\n   */\n  locale?: PageHeaderInputSearchLocale;\n  /**\n   * The close event handler.\n   * @default undefined\n   */\n  onClose?: () => void;\n}\n\nconst fadeIn = keyframes`\n  from { transform: translateY(-100%); }\n  to { transform: translateY(0); }\n`;\n\nconst fadeOut = keyframes`\n  from { transform: translateY(0); }\n  to { transform: translateY(-100%); }\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 ContainerProps {\n  visible: boolean;\n}\nconst Container = styled(\n  PageHeaderContainer,\n  omitEmotionProps('visible')\n)<ContainerProps>`\n  z-index: 102; // After PageHeaderContainer\n  ${visibleStyles};\n  ${invisibleStyles};\n`;\n\nconst CloseButton = styled(Button)`\n  margin-left: ${(p) => p.theme.pageHeaderAddonPaddingHorizontal}em;\n`;\n\n/**\n * The search input for the page header.\n */\nconst PageHeaderInputSearch = forwardRef<\n  HTMLInputElement,\n  PageHeaderInputSearchProps\n>(({ locale = defaultLocale, onClose = () => {}, ...rest }, ref) => {\n  const [visible, setVisible] = useState(false);\n  const { theme } = useTheme();\n  const mounted = useClosable(visible, theme.transitionDelay);\n  const { hasNavigation } = useContext(LayoutContext);\n\n  return (\n    <>\n      <Button\n        type='ghost'\n        wide='never'\n        onClick={() => setVisible(true)}\n        aria-label={locale.searchLabel}\n      >\n        <Search />\n      </Button>\n\n      {mounted && (\n        <ThemeOverrider\n          overrides={(t) => ({\n            buttonPaddingHorizontal: t.pageHeaderButtonPaddingHorizontal,\n          })}\n        >\n          <Container\n            visible={visible}\n            rightIsGhostButton\n            hasNavigationIndent={hasNavigation}\n          >\n            <InputSearch autoFocus locale={locale} {...rest} ref={ref} />\n            <CloseButton\n              type='ghost'\n              wide='never'\n              onClick={() => {\n                setVisible(false);\n                onClose();\n              }}\n              aria-label={locale.closeLabel}\n            >\n              <Close />\n            </CloseButton>\n          </Container>\n        </ThemeOverrider>\n      )}\n    </>\n  );\n});\n\nPageHeaderInputSearch.displayName = 'PageHeaderInputSearch';\n\nexport default PageHeaderInputSearch;\n"],"file":"index.js"}
+{"version":3,"file":"index.js","names":["fadeIn","keyframes","fadeOut","visibleStyles","p","visible","css","theme","transitionDelay","invisibleStyles","Container","styled","PageHeaderContainer","omitEmotionProps","CloseButton","Button","pageHeaderAddonPaddingHorizontal","PageHeaderInputSearch","forwardRef","ref","locale","defaultLocale","onClose","rest","useState","setVisible","useTheme","mounted","useClosable","useContext","LayoutContext","hasNavigation","searchLabel","t","buttonPaddingHorizontal","pageHeaderButtonPaddingHorizontal","closeLabel","displayName"],"sources":["../../../src/PageHeaderInputSearch/index.tsx"],"sourcesContent":["import React, { forwardRef, useContext, useState } from 'react';\nimport { Close, Search } from '@os-design/icons';\nimport styled from '@emotion/styled';\nimport { useClosable, omitEmotionProps } from '@os-design/utils';\nimport { ThemeOverrider, useTheme } from '@os-design/theming';\nimport { css, keyframes } from '@emotion/react';\nimport InputSearch, { InputSearchProps } from '../InputSearch';\nimport Button from '../Button';\nimport { PageHeaderContainer } from '../PageHeader';\nimport LayoutContext from '../Layout/LayoutContext';\nimport defaultLocale, {\n  PageHeaderInputSearchLocale,\n} from './utils/defaultLocale';\n\nexport interface PageHeaderInputSearchProps\n  extends Omit<InputSearchProps, 'size' | 'locale'> {\n  /**\n   * The locale.\n   * @default undefined\n   */\n  locale?: PageHeaderInputSearchLocale;\n  /**\n   * The close event handler.\n   * @default undefined\n   */\n  onClose?: () => void;\n}\n\nconst fadeIn = keyframes`\n  from { transform: translateY(-100%); }\n  to { transform: translateY(0); }\n`;\n\nconst fadeOut = keyframes`\n  from { transform: translateY(0); }\n  to { transform: translateY(-100%); }\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 ContainerProps {\n  visible: boolean;\n}\nconst Container = styled(\n  PageHeaderContainer,\n  omitEmotionProps('visible')\n)<ContainerProps>`\n  z-index: 102; // After PageHeaderContainer\n  ${visibleStyles};\n  ${invisibleStyles};\n`;\n\nconst CloseButton = styled(Button)`\n  margin-left: ${(p) => p.theme.pageHeaderAddonPaddingHorizontal}em;\n`;\n\n/**\n * The search input for the page header.\n */\nconst PageHeaderInputSearch = forwardRef<\n  HTMLInputElement,\n  PageHeaderInputSearchProps\n>(({ locale = defaultLocale, onClose = () => {}, ...rest }, ref) => {\n  const [visible, setVisible] = useState(false);\n  const { theme } = useTheme();\n  const mounted = useClosable(visible, theme.transitionDelay);\n  const { hasNavigation } = useContext(LayoutContext);\n\n  return (\n    <>\n      <Button\n        type='ghost'\n        wide='never'\n        onClick={() => setVisible(true)}\n        aria-label={locale.searchLabel}\n      >\n        <Search />\n      </Button>\n\n      {mounted && (\n        <ThemeOverrider\n          overrides={(t) => ({\n            buttonPaddingHorizontal: t.pageHeaderButtonPaddingHorizontal,\n          })}\n        >\n          <Container\n            visible={visible}\n            rightIsGhostButton\n            hasNavigationIndent={hasNavigation}\n          >\n            <InputSearch autoFocus locale={locale} {...rest} ref={ref} />\n            <CloseButton\n              type='ghost'\n              wide='never'\n              onClick={() => {\n                setVisible(false);\n                onClose();\n              }}\n              aria-label={locale.closeLabel}\n            >\n              <Close />\n            </CloseButton>\n          </Container>\n        </ThemeOverrider>\n      )}\n    </>\n  );\n});\n\nPageHeaderInputSearch.displayName = 'PageHeaderInputSearch';\n\nexport default PageHeaderInputSearch;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,IAAMA,MAAM,OAAGC,iBAAH,sJAAZ;AAKA,IAAMC,OAAO,OAAGD,iBAAH,wJAAb;;AAKA,IAAME,aAAa,GAAG,SAAhBA,aAAgB,CAACC,CAAD;EAAA,OACpBA,CAAC,CAACC,OAAF,QACAC,WADA,mHAEeN,MAFf,EAEyBI,CAAC,CAACG,KAAF,CAAQC,eAFjC,CADoB;AAAA,CAAtB;;AAMA,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,CAACL,CAAD;EAAA,OACtB,CAACA,CAAC,CAACC,OAAH,QACAC,WADA,mHAEeJ,OAFf,EAE0BE,CAAC,CAACG,KAAF,CAAQC,eAFlC,CADsB;AAAA,CAAxB;;AASA,IAAME,SAAS,GAAG,IAAAC,kBAAA,EAChBC,+BADgB,EAEhB,IAAAC,uBAAA,EAAiB,SAAjB,CAFgB,CAAH,0IAKXV,aALW,EAMXM,eANW,CAAf;AASA,IAAMK,WAAW,GAAG,IAAAH,kBAAA,EAAOI,kBAAP,CAAH,kGACA,UAACX,CAAD;EAAA,OAAOA,CAAC,CAACG,KAAF,CAAQS,gCAAf;AAAA,CADA,CAAjB;AAIA;AACA;AACA;;AACA,IAAMC,qBAAqB,gBAAG,IAAAC,iBAAA,EAG5B,gBAA0DC,GAA1D,EAAkE;EAAA,uBAA/DC,MAA+D;EAAA,IAA/DA,MAA+D,4BAAtDC,yBAAsD;EAAA,wBAAvCC,OAAuC;EAAA,IAAvCA,OAAuC,6BAA7B,YAAM,CAAE,CAAqB;EAAA,IAAhBC,IAAgB;;EAClE,gBAA8B,IAAAC,eAAA,EAAS,KAAT,CAA9B;EAAA;EAAA,IAAOnB,OAAP;EAAA,IAAgBoB,UAAhB;;EACA,gBAAkB,IAAAC,iBAAA,GAAlB;EAAA,IAAQnB,KAAR,aAAQA,KAAR;;EACA,IAAMoB,OAAO,GAAG,IAAAC,kBAAA,EAAYvB,OAAZ,EAAqBE,KAAK,CAACC,eAA3B,CAAhB;;EACA,kBAA0B,IAAAqB,iBAAA,EAAWC,yBAAX,CAA1B;EAAA,IAAQC,aAAR,eAAQA,aAAR;;EAEA,oBACE,+EACE,gCAAC,kBAAD;IACE,IAAI,EAAC,OADP;IAEE,IAAI,EAAC,OAFP;IAGE,OAAO,EAAE;MAAA,OAAMN,UAAU,CAAC,IAAD,CAAhB;IAAA,CAHX;IAIE,cAAYL,MAAM,CAACY;EAJrB,gBAME,gCAAC,aAAD,OANF,CADF,EAUGL,OAAO,iBACN,gCAAC,uBAAD;IACE,SAAS,EAAE,mBAACM,CAAD;MAAA,OAAQ;QACjBC,uBAAuB,EAAED,CAAC,CAACE;MADV,CAAR;IAAA;EADb,gBAKE,gCAAC,SAAD;IACE,OAAO,EAAE9B,OADX;IAEE,kBAAkB,MAFpB;IAGE,mBAAmB,EAAE0B;EAHvB,gBAKE,gCAAC,uBAAD;IAAa,SAAS,MAAtB;IAAuB,MAAM,EAAEX;EAA/B,GAA2CG,IAA3C;IAAiD,GAAG,EAAEJ;EAAtD,GALF,eAME,gCAAC,WAAD;IACE,IAAI,EAAC,OADP;IAEE,IAAI,EAAC,OAFP;IAGE,OAAO,EAAE,mBAAM;MACbM,UAAU,CAAC,KAAD,CAAV;MACAH,OAAO;IACR,CANH;IAOE,cAAYF,MAAM,CAACgB;EAPrB,gBASE,gCAAC,YAAD,OATF,CANF,CALF,CAXJ,CADF;AAuCD,CAhD6B,CAA9B;AAkDAnB,qBAAqB,CAACoB,WAAtB,GAAoC,uBAApC;eAEepB,qB"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/PageHeaderInputSearch/utils/defaultLocale.ts"],"names":["defaultLocale","inputSearchDefaultLocale","searchLabel","closeLabel"],"mappings":";;;;;;;AAAA;;;;;;;;;;AASA,IAAMA,aAA0C,mCAC3CC,yBAD2C;AAE9CC,EAAAA,WAAW,EAAE,QAFiC;AAG9CC,EAAAA,UAAU,EAAE;AAHkC,EAAhD;;eAMeH,a","sourcesContent":["import inputSearchDefaultLocale, {\n  InputSearchLocale,\n} from '../../InputSearch/utils/defaultLocale';\n\nexport interface PageHeaderInputSearchLocale extends InputSearchLocale {\n  searchLabel: string;\n  closeLabel: string;\n}\n\nconst defaultLocale: PageHeaderInputSearchLocale = {\n  ...inputSearchDefaultLocale,\n  searchLabel: 'Search',\n  closeLabel: 'Close search',\n};\n\nexport default defaultLocale;\n"],"file":"defaultLocale.js"}
+{"version":3,"file":"defaultLocale.js","names":["defaultLocale","inputSearchDefaultLocale","searchLabel","closeLabel"],"sources":["../../../../src/PageHeaderInputSearch/utils/defaultLocale.ts"],"sourcesContent":["import inputSearchDefaultLocale, {\n  InputSearchLocale,\n} from '../../InputSearch/utils/defaultLocale';\n\nexport interface PageHeaderInputSearchLocale extends InputSearchLocale {\n  searchLabel: string;\n  closeLabel: string;\n}\n\nconst defaultLocale: PageHeaderInputSearchLocale = {\n  ...inputSearchDefaultLocale,\n  searchLabel: 'Search',\n  closeLabel: 'Close search',\n};\n\nexport default defaultLocale;\n"],"mappings":";;;;;;;AAAA;;;;;;;;;;AASA,IAAMA,aAA0C,mCAC3CC,yBAD2C;EAE9CC,WAAW,EAAE,QAFiC;EAG9CC,UAAU,EAAE;AAHkC,EAAhD;;eAMeH,a"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/PageHeaderSkeleton/index.tsx"],"names":["PageHeaderSkeleton","ref","width","rest","LayoutContext","hasNavigation","displayName"],"mappings":";;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;;;;;;;;;;;;;;;AAIA;AACA;AACA;AACA;AACA,IAAMA,kBAAkB,gBAAG,uBACzB,gBAA6BC,GAA7B,EAAqC;AAAA,wBAAlCC,KAAkC;AAAA,MAAlCA,KAAkC,2BAA1B,KAA0B;AAAA,MAAhBC,IAAgB;;AACnC,oBAA0B,uBAAWC,yBAAX,CAA1B;AAAA,MAAQC,aAAR,eAAQA,aAAR;;AAEA,sBACE,gCAAC,+BAAD;AACE,IAAA,mBAAmB,EAAEA;AADvB,KAEMF,IAFN;AAGE,IAAA,GAAG,EAAEF;AAHP,mBAKE,gCAAC,oBAAD;AAAU,IAAA,KAAK,EAAEC;AAAjB,IALF,CADF;AASD,CAbwB,CAA3B;AAgBAF,kBAAkB,CAACM,WAAnB,GAAiC,oBAAjC;eAEeN,kB","sourcesContent":["import React, { forwardRef, useContext } from 'react';\nimport { WithSize } from '@os-design/styles';\nimport Skeleton, { SkeletonProps } from '../Skeleton';\nimport { PageHeaderContainer } from '../PageHeader';\nimport LayoutContext from '../Layout/LayoutContext';\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"],"file":"index.js"}
+{"version":3,"file":"index.js","names":["PageHeaderSkeleton","forwardRef","ref","width","rest","useContext","LayoutContext","hasNavigation","displayName"],"sources":["../../../src/PageHeaderSkeleton/index.tsx"],"sourcesContent":["import React, { forwardRef, useContext } from 'react';\nimport { WithSize } from '@os-design/styles';\nimport Skeleton, { SkeletonProps } from '../Skeleton';\nimport { PageHeaderContainer } from '../PageHeader';\nimport LayoutContext from '../Layout/LayoutContext';\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":";;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;;;;;;;;;;;;;;;AAIA;AACA;AACA;AACA;AACA,IAAMA,kBAAkB,gBAAG,IAAAC,iBAAA,EACzB,gBAA6BC,GAA7B,EAAqC;EAAA,sBAAlCC,KAAkC;EAAA,IAAlCA,KAAkC,2BAA1B,KAA0B;EAAA,IAAhBC,IAAgB;;EACnC,kBAA0B,IAAAC,iBAAA,EAAWC,yBAAX,CAA1B;EAAA,IAAQC,aAAR,eAAQA,aAAR;;EAEA,oBACE,gCAAC,+BAAD;IACE,mBAAmB,EAAEA;EADvB,GAEMH,IAFN;IAGE,GAAG,EAAEF;EAHP,iBAKE,gCAAC,oBAAD;IAAU,KAAK,EAAEC;EAAjB,EALF,CADF;AASD,CAbwB,CAA3B;AAgBAH,kBAAkB,CAACQ,WAAnB,GAAiC,oBAAjC;eAEeR,kB"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ParagraphSkeleton/index.tsx"],"names":["hasMarginStyles","p","hasMargin","css","theme","paragraphMarginBottom","lineHeight","Container","key","ParagraphSkeleton","ref","rows","width","rest","Array","fill","map","_","index","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAoBA,IAAMA,eAAe,GAAG,SAAlBA,eAAkB,CAACC,CAAD;AAAA,SACtBA,CAAC,CAACC,SAAF,QACAC,WADA,uGAEmBF,CAAC,CAACG,KAAF,CAAQC,qBAAR,IAChBJ,CAAC,CAACG,KAAF,CAAQE,UAAR,GAAqB,CADL,CAFnB,CADsB;AAAA,CAAxB;;AAQA,IAAMC,SAAS,GAAG,wBAAO,KAAP,EAAc,6BAAiB,WAAjB,CAAd,CAAH,kJAEM,UAACN,CAAD;AAAA,SAAOA,CAAC,CAACG,KAAF,CAAQE,UAAR,GAAqB,CAA5B;AAAA,CAFN,EAIXN,eAJW,CAAf;AAOA,IAAIQ,GAAG,GAAG,CAAV;AAEA;AACA;AACA;;AACA,IAAMC,iBAAiB,gBAAG,uBACxB,gBAA0DC,GAA1D;AAAA,uBAAGC,IAAH;AAAA,MAAGA,IAAH,0BAAU,CAAV;AAAA,wBAAaC,KAAb;AAAA,MAAaA,KAAb,2BAAqB,KAArB;AAAA,4BAA4BV,SAA5B;AAAA,MAA4BA,SAA5B,+BAAwC,KAAxC;AAAA,MAAkDW,IAAlD;;AAAA,sBACE,gCAAC,SAAD;AAAW,IAAA,SAAS,EAAEX;AAAtB,KAAqCW,IAArC;AAA2C,IAAA,GAAG,EAAEH;AAAhD,MACGI,KAAK,CAACH,IAAD,CAAL,CACEI,IADF,CACO,EADP,EAEEC,GAFF,CAEM,UAACC,CAAD,EAAIC,KAAJ,EAAc;AACjBV,IAAAA,GAAG,IAAI,CAAP;AACA,wBACE,gCAAC,oBAAD;AAAU,MAAA,GAAG,EAAEA,GAAf;AAAoB,MAAA,KAAK,EAAEU,KAAK,GAAGP,IAAI,GAAG,CAAf,GAAmB,MAAnB,GAA4BC;AAAvD,MADF;AAGD,GAPF,CADH,CADF;AAAA,CADwB,CAA1B;AAeAH,iBAAiB,CAACU,WAAlB,GAAgC,mBAAhC;eAEeV,iB","sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { css } from '@emotion/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"],"file":"index.js"}
+{"version":3,"file":"index.js","names":["hasMarginStyles","p","hasMargin","css","theme","paragraphMarginBottom","lineHeight","Container","styled","omitEmotionProps","key","ParagraphSkeleton","forwardRef","ref","rows","width","rest","Array","fill","map","_","index","displayName"],"sources":["../../../src/ParagraphSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { css } from '@emotion/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;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAoBA,IAAMA,eAAe,GAAG,SAAlBA,eAAkB,CAACC,CAAD;EAAA,OACtBA,CAAC,CAACC,SAAF,QACAC,WADA,uGAEmBF,CAAC,CAACG,KAAF,CAAQC,qBAAR,IAChBJ,CAAC,CAACG,KAAF,CAAQE,UAAR,GAAqB,CADL,CAFnB,CADsB;AAAA,CAAxB;;AAQA,IAAMC,SAAS,GAAG,IAAAC,kBAAA,EAAO,KAAP,EAAc,IAAAC,uBAAA,EAAiB,WAAjB,CAAd,CAAH,kJAEM,UAACR,CAAD;EAAA,OAAOA,CAAC,CAACG,KAAF,CAAQE,UAAR,GAAqB,CAA5B;AAAA,CAFN,EAIXN,eAJW,CAAf;AAOA,IAAIU,GAAG,GAAG,CAAV;AAEA;AACA;AACA;;AACA,IAAMC,iBAAiB,gBAAG,IAAAC,iBAAA,EACxB,gBAA0DC,GAA1D;EAAA,qBAAGC,IAAH;EAAA,IAAGA,IAAH,0BAAU,CAAV;EAAA,sBAAaC,KAAb;EAAA,IAAaA,KAAb,2BAAqB,KAArB;EAAA,0BAA4Bb,SAA5B;EAAA,IAA4BA,SAA5B,+BAAwC,KAAxC;EAAA,IAAkDc,IAAlD;;EAAA,oBACE,gCAAC,SAAD;IAAW,SAAS,EAAEd;EAAtB,GAAqCc,IAArC;IAA2C,GAAG,EAAEH;EAAhD,IACGI,KAAK,CAACH,IAAD,CAAL,CACEI,IADF,CACO,EADP,EAEEC,GAFF,CAEM,UAACC,CAAD,EAAIC,KAAJ,EAAc;IACjBX,GAAG,IAAI,CAAP;IACA,oBACE,gCAAC,oBAAD;MAAU,GAAG,EAAEA,GAAf;MAAoB,KAAK,EAAEW,KAAK,GAAGP,IAAI,GAAG,CAAf,GAAmB,MAAnB,GAA4BC;IAAvD,EADF;EAGD,CAPF,CADH,CADF;AAAA,CADwB,CAA1B;AAeAJ,iBAAiB,CAACW,WAAlB,GAAgC,mBAAhC;eAEeX,iB"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Popover/index.tsx"],"names":["fadeIn","keyframes","fadeOut","visibleStyles","p","visible","css","theme","transitionDelay","invisibleStyles","Container","top","left","borderRadius","popoverColorBg","popoverColorText","popoverColorBorder","popoverColorBoxShadow","sizeStyles","emptyRect","width","height","Popover","ref","trigger","placement","gap","flip","onClose","id","children","rest","popoverRef","mergedPopoverRef","popoverRect","setPopoverRect","triggerRect","setTriggerRect","mounted","popoverResizeListener","current","getBoundingClientRect","measuredPopoverRef","node","triggerResizeListener","window","requestAnimationFrame","document","undefined","popoverId","Math","random","toString","slice","getAttribute","setAttribute","elementRect","displayName"],"mappings":"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","sourcesContent":["import React, {\n  forwardRef,\n  RefCallback,\n  RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport {\n  omitEmotionProps,\n  useClickOutside,\n  useClosable,\n  useEvent,\n  useForwardedRef,\n  useResizeObserver,\n  useBrowserLayoutEffect,\n} from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { clr, useTheme } from '@os-design/theming';\nimport { css, keyframes } from '@emotion/react';\nimport Portal from '@os-design/portal';\nimport usePopoverPosition, {\n  Placement,\n  Rect,\n} from './utils/usePopoverPosition';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface PopoverProps extends JsxDivProps, WithSize {\n  /**\n   * The element next to which the popover appears.\n   * @default undefined\n   */\n  trigger?: RefObject<Element> | Rect;\n  /**\n   * On which side of the element the popover will appear.\n   * @default top\n   */\n  placement?: Placement;\n  /**\n   * The gap between the element and the popover in em.\n   * @default 0.2\n   */\n  gap?: number;\n  /**\n   * Whether the popover to flip if it does not fit in the window.\n   * @default true\n   */\n  flip?: boolean;\n  /**\n   * Whether the popover is visible.\n   * @default false\n   */\n  visible?: boolean;\n  /**\n   * The close event handler.\n   * @default undefined\n   */\n  onClose?: () => void;\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 ContainerProps extends Pick<PopoverProps, 'visible' | 'size'> {\n  top: number;\n  left: number;\n}\nconst Container = styled(\n  'div',\n  omitEmotionProps('top', 'left', 'visible', 'size')\n)<ContainerProps>`\n  position: absolute;\n  top: ${(p) => p.top}px;\n  left: ${(p) => p.left}px;\n\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  background-color: ${(p) => clr(p.theme.popoverColorBg)};\n  color: ${(p) => clr(p.theme.popoverColorText)};\n  border: 1px solid ${(p) => clr(p.theme.popoverColorBorder)};\n  box-shadow: 0 0.15em 0.8em ${(p) => clr(p.theme.popoverColorBoxShadow)};\n  z-index: 1000; // Greater than the z-index of the Drawer\n\n  ${visibleStyles};\n  ${invisibleStyles};\n  ${sizeStyles};\n`;\n\nconst emptyRect: Rect = {\n  top: 0,\n  left: 0,\n  width: 0,\n  height: 0,\n};\n\n/**\n * The pop-up window located next to the element.\n */\nconst Popover = forwardRef<HTMLDivElement, PopoverProps>(\n  (\n    {\n      trigger,\n      placement = 'top',\n      gap = 0.2,\n      flip = true,\n      visible = false,\n      onClose = () => {},\n      id,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const [popoverRef, mergedPopoverRef] = useForwardedRef(ref);\n    const [popoverRect, setPopoverRect] = useState(emptyRect);\n    const [triggerRect, setTriggerRect] = useState(emptyRect);\n    const { theme } = useTheme();\n    const mounted = useClosable(visible, theme.transitionDelay);\n\n    // Init the rect of the popover and update it when the popover size changes\n    const popoverResizeListener = useCallback(() => {\n      if (!popoverRef.current) return;\n      setPopoverRect(popoverRef.current.getBoundingClientRect());\n    }, [popoverRef]);\n    useResizeObserver(\n      popoverRef.current as HTMLDivElement,\n      popoverResizeListener\n    );\n\n    const measuredPopoverRef = useCallback<RefCallback<HTMLDivElement>>(\n      (node) => {\n        if (node === null) return;\n        setPopoverRect(node.getBoundingClientRect());\n        mergedPopoverRef(node);\n      },\n      [mergedPopoverRef]\n    );\n\n    // Init the rect of the trigger and update it when the window was resized\n    // or scrolled\n    const triggerResizeListener = useCallback(() => {\n      window.requestAnimationFrame(() => {\n        if (!trigger) return;\n        const { current } = trigger as RefObject<Element>;\n        if (!current) return;\n        setTriggerRect(current.getBoundingClientRect());\n      });\n    }, [trigger]);\n    useBrowserLayoutEffect(() => {\n      if (!visible) return;\n      triggerResizeListener();\n    }, [triggerResizeListener, visible]);\n    useResizeObserver(trigger as never, triggerResizeListener);\n    useEvent(\n      (typeof window === 'undefined' ? null : window) as never,\n      'resize',\n      triggerResizeListener\n    );\n    useEvent(document, 'scroll', triggerResizeListener);\n\n    useEffect(() => {\n      if (!trigger || (trigger as RefObject<Element>).current !== undefined)\n        return;\n      setTriggerRect(trigger as Rect);\n    }, [trigger]);\n\n    const popoverId = useMemo(\n      () => id || `popover-${Math.random().toString(36).slice(2, 11)}`,\n      [id]\n    );\n\n    // Set the aria tags to support accessibility features\n    useBrowserLayoutEffect(() => {\n      if (!trigger) return;\n      const { current } = trigger as RefObject<Element>;\n      if (!current) return;\n      if (current.getAttribute('aria-haspopup') === null) {\n        current.setAttribute('aria-haspopup', 'dialog');\n      }\n      current.setAttribute('aria-controls', popoverId);\n    }, []);\n    useBrowserLayoutEffect(() => {\n      if (!trigger) return;\n      const { current } = trigger as RefObject<Element>;\n      if (!current) return;\n      current.setAttribute('aria-expanded', visible.toString());\n    }, [visible]);\n\n    // Get the popover coordinates\n    const { top, left } = usePopoverPosition({\n      elementRect: triggerRect,\n      popoverRect,\n      placement,\n      gap,\n      flip,\n    });\n\n    // Close the popover when the user clicks outside of it\n    useClickOutside(popoverRef, onClose);\n\n    if (!mounted) return null;\n\n    return (\n      <Portal>\n        <Container\n          top={top}\n          left={left}\n          visible={visible}\n          id={popoverId}\n          role='dialog'\n          {...rest}\n          ref={measuredPopoverRef}\n        >\n          {children}\n        </Container>\n      </Portal>\n    );\n  }\n);\n\nPopover.displayName = 'Popover';\n\nexport default Popover;\n"],"file":"index.js"}
+{"version":3,"file":"index.js","names":["fadeIn","keyframes","fadeOut","visibleStyles","p","visible","css","theme","transitionDelay","invisibleStyles","Container","styled","omitEmotionProps","top","left","borderRadius","clr","popoverColorBg","popoverColorText","popoverColorBorder","popoverColorBoxShadow","sizeStyles","emptyRect","width","height","Popover","forwardRef","ref","trigger","placement","gap","flip","onClose","id","children","rest","useForwardedRef","popoverRef","mergedPopoverRef","useState","popoverRect","setPopoverRect","triggerRect","setTriggerRect","useTheme","mounted","useClosable","popoverResizeListener","useCallback","current","getBoundingClientRect","useResizeObserver","measuredPopoverRef","node","triggerResizeListener","window","requestAnimationFrame","useBrowserLayoutEffect","useEvent","document","useEffect","undefined","popoverId","useMemo","Math","random","toString","slice","getAttribute","setAttribute","usePopoverPosition","elementRect","useClickOutside","displayName"],"sources":["../../../src/Popover/index.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  RefCallback,\n  RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport {\n  omitEmotionProps,\n  useClickOutside,\n  useClosable,\n  useEvent,\n  useForwardedRef,\n  useResizeObserver,\n  useBrowserLayoutEffect,\n} from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { clr, useTheme } from '@os-design/theming';\nimport { css, keyframes } from '@emotion/react';\nimport Portal from '@os-design/portal';\nimport usePopoverPosition, {\n  Placement,\n  Rect,\n} from './utils/usePopoverPosition';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface PopoverProps extends JsxDivProps, WithSize {\n  /**\n   * The element next to which the popover appears.\n   * @default undefined\n   */\n  trigger?: RefObject<Element> | Rect;\n  /**\n   * On which side of the element the popover will appear.\n   * @default top\n   */\n  placement?: Placement;\n  /**\n   * The gap between the element and the popover in em.\n   * @default 0.2\n   */\n  gap?: number;\n  /**\n   * Whether the popover to flip if it does not fit in the window.\n   * @default true\n   */\n  flip?: boolean;\n  /**\n   * Whether the popover is visible.\n   * @default false\n   */\n  visible?: boolean;\n  /**\n   * The close event handler.\n   * @default undefined\n   */\n  onClose?: () => void;\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 ContainerProps extends Pick<PopoverProps, 'visible' | 'size'> {\n  top: number;\n  left: number;\n}\nconst Container = styled(\n  'div',\n  omitEmotionProps('top', 'left', 'visible', 'size')\n)<ContainerProps>`\n  position: absolute;\n  top: ${(p) => p.top}px;\n  left: ${(p) => p.left}px;\n\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  background-color: ${(p) => clr(p.theme.popoverColorBg)};\n  color: ${(p) => clr(p.theme.popoverColorText)};\n  border: 1px solid ${(p) => clr(p.theme.popoverColorBorder)};\n  box-shadow: 0 0.15em 0.8em ${(p) => clr(p.theme.popoverColorBoxShadow)};\n  z-index: 1000; // Greater than the z-index of the Drawer\n\n  ${visibleStyles};\n  ${invisibleStyles};\n  ${sizeStyles};\n`;\n\nconst emptyRect: Rect = {\n  top: 0,\n  left: 0,\n  width: 0,\n  height: 0,\n};\n\n/**\n * The pop-up window located next to the element.\n */\nconst Popover = forwardRef<HTMLDivElement, PopoverProps>(\n  (\n    {\n      trigger,\n      placement = 'top',\n      gap = 0.2,\n      flip = true,\n      visible = false,\n      onClose = () => {},\n      id,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const [popoverRef, mergedPopoverRef] = useForwardedRef(ref);\n    const [popoverRect, setPopoverRect] = useState(emptyRect);\n    const [triggerRect, setTriggerRect] = useState(emptyRect);\n    const { theme } = useTheme();\n    const mounted = useClosable(visible, theme.transitionDelay);\n\n    // Init the rect of the popover and update it when the popover size changes\n    const popoverResizeListener = useCallback(() => {\n      if (!popoverRef.current) return;\n      setPopoverRect(popoverRef.current.getBoundingClientRect());\n    }, [popoverRef]);\n    useResizeObserver(\n      popoverRef.current as HTMLDivElement,\n      popoverResizeListener\n    );\n\n    const measuredPopoverRef = useCallback<RefCallback<HTMLDivElement>>(\n      (node) => {\n        if (node === null) return;\n        setPopoverRect(node.getBoundingClientRect());\n        mergedPopoverRef(node);\n      },\n      [mergedPopoverRef]\n    );\n\n    // Init the rect of the trigger and update it when the window was resized\n    // or scrolled\n    const triggerResizeListener = useCallback(() => {\n      window.requestAnimationFrame(() => {\n        if (!trigger) return;\n        const { current } = trigger as RefObject<Element>;\n        if (!current) return;\n        setTriggerRect(current.getBoundingClientRect());\n      });\n    }, [trigger]);\n    useBrowserLayoutEffect(() => {\n      if (!visible) return;\n      triggerResizeListener();\n    }, [triggerResizeListener, visible]);\n    useResizeObserver(trigger as never, triggerResizeListener);\n    useEvent(\n      (typeof window === 'undefined' ? null : window) as never,\n      'resize',\n      triggerResizeListener\n    );\n    useEvent(document, 'scroll', triggerResizeListener);\n\n    useEffect(() => {\n      if (!trigger || (trigger as RefObject<Element>).current !== undefined)\n        return;\n      setTriggerRect(trigger as Rect);\n    }, [trigger]);\n\n    const popoverId = useMemo(\n      () => id || `popover-${Math.random().toString(36).slice(2, 11)}`,\n      [id]\n    );\n\n    // Set the aria tags to support accessibility features\n    useBrowserLayoutEffect(() => {\n      if (!trigger) return;\n      const { current } = trigger as RefObject<Element>;\n      if (!current) return;\n      if (current.getAttribute('aria-haspopup') === null) {\n        current.setAttribute('aria-haspopup', 'dialog');\n      }\n      current.setAttribute('aria-controls', popoverId);\n    }, []);\n    useBrowserLayoutEffect(() => {\n      if (!trigger) return;\n      const { current } = trigger as RefObject<Element>;\n      if (!current) return;\n      current.setAttribute('aria-expanded', visible.toString());\n    }, [visible]);\n\n    // Get the popover coordinates\n    const { top, left } = usePopoverPosition({\n      elementRect: triggerRect,\n      popoverRect,\n      placement,\n      gap,\n      flip,\n    });\n\n    // Close the popover when the user clicks outside of it\n    useClickOutside(popoverRef, onClose);\n\n    if (!mounted) return null;\n\n    return (\n      <Portal>\n        <Container\n          top={top}\n          left={left}\n          visible={visible}\n          id={popoverId}\n          role='dialog'\n          {...rest}\n          ref={measuredPopoverRef}\n        >\n          {children}\n        </Container>\n      </Portal>\n    );\n  }\n);\n\nPopover.displayName = 'Popover';\n\nexport default Popover;\n"],"mappings":"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"}

package/dist/cjs/Popover/utils/usePopoverPosition.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/Popover/utils/usePopoverPosition.ts"],"names":["popoverPositionGetters","rectKey","sizeKey","windowSizeKey","windowOffsetKey","fitToWindow","start","elementRect","popoverRect","popoverStart","windowStart","window","windowEnd","elementStart","elementEnd","popoverEnd","before","options","gap","flip","afterPopoverStart","after","afterPopoverEnd","diffStart","diffEnd","beforePopoverStart","end","center","getPopoverPosition","top","left","placementPositionKeysMap","bottom","right","usePopoverPosition","placement","bodyFontSize","document","body","gapPx","positionKeys"],"mappings":"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","sourcesContent":["import { useMemo } from 'react';\nimport { useFontSize } from '@os-design/utils';\n\nexport type Placement =\n  | 'top'\n  | 'bottom'\n  | 'left'\n  | 'right'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'left-start'\n  | 'left-end'\n  | 'right-start'\n  | 'right-end';\n\nexport interface Rect {\n  top: number;\n  left: number;\n  width: number;\n  height: number;\n}\n\ninterface UsePopoverPositionProps {\n  /**\n   * The rect of the element.\n   */\n  elementRect: Rect;\n  /**\n   * The rect of the popover.\n   */\n  popoverRect: Rect;\n  /**\n   * On which side of the element the popover will appear.\n   * @default top\n   */\n  placement?: Placement;\n  /**\n   * The gap between the element and the popover in em.\n   * @default 0.5\n   */\n  gap?: number;\n  /**\n   * Whether to flip the popover if it does not fit in the window.\n   * @default true\n   */\n  flip?: boolean;\n}\n\ninterface PopoverPositionGetterOptions {\n  elementRect: Rect;\n  popoverRect: Rect;\n  gap: number;\n  flip: boolean;\n}\ntype PositionKeys = 'before' | 'after' | 'start' | 'end' | 'center';\ntype PopoverPositionGetterFn = (\n  options: PopoverPositionGetterOptions\n) => number;\ntype PopoverPositionGetters = Record<PositionKeys, PopoverPositionGetterFn>;\ntype FitToWindow = Pick<\n  PopoverPositionGetterOptions,\n  'elementRect' | 'popoverRect'\n>;\n\nconst popoverPositionGetters = (\n  rectKey: 'top' | 'left'\n): PopoverPositionGetters => {\n  const sizeKey = rectKey === 'top' ? 'height' : 'width';\n  const windowSizeKey = rectKey === 'top' ? 'innerHeight' : 'innerWidth';\n  const windowOffsetKey = rectKey === 'top' ? 'pageYOffset' : 'pageXOffset';\n\n  const fitToWindow = (\n    start: number,\n    { elementRect, popoverRect }: FitToWindow\n  ): number => {\n    let popoverStart = start;\n    const windowStart = window[windowOffsetKey];\n    const windowEnd = windowStart + window[windowSizeKey];\n    const elementStart = windowStart + elementRect[rectKey];\n    const elementEnd = elementStart + elementRect[sizeKey];\n    const popoverEnd = popoverStart + popoverRect[sizeKey];\n\n    // Fit the popover to the end of the window\n    if (popoverEnd > windowEnd) {\n      if (elementEnd < windowEnd)\n        popoverStart = windowEnd - popoverRect[sizeKey];\n      else if (popoverRect[sizeKey] > elementRect[sizeKey])\n        popoverStart = elementEnd - popoverRect[sizeKey];\n      else if (windowEnd - elementStart > popoverRect[sizeKey])\n        popoverStart = windowEnd - popoverRect[sizeKey];\n      else popoverStart = elementStart;\n    }\n\n    // Fit the popover to the beginning of the window\n    if (popoverStart < windowStart) {\n      if (elementStart > windowStart) popoverStart = windowStart;\n      else if (popoverRect[sizeKey] > elementRect[sizeKey])\n        popoverStart = elementStart;\n      else if (elementEnd - windowStart > popoverRect[sizeKey])\n        popoverStart = windowStart;\n      else popoverStart = elementEnd - popoverRect[sizeKey];\n    }\n\n    return popoverStart;\n  };\n\n  return {\n    before(options) {\n      const { elementRect, popoverRect, gap, flip } = options;\n      const windowStart = window[windowOffsetKey];\n      const windowEnd = windowStart + window[windowSizeKey];\n      const elementStart = windowStart + elementRect[rectKey];\n      const popoverStart = elementStart - popoverRect[sizeKey] - gap;\n      if (flip && popoverStart < windowStart) {\n        const afterPopoverStart = this.after({ ...options, flip: false });\n        const afterPopoverEnd = afterPopoverStart + popoverRect[sizeKey];\n        const diffStart = windowStart - popoverStart;\n        const diffEnd = afterPopoverEnd - windowEnd;\n        if (afterPopoverEnd <= windowEnd || diffStart > diffEnd)\n          return afterPopoverStart;\n      }\n      return popoverStart;\n    },\n    after(options) {\n      const { elementRect, popoverRect, gap, flip } = options;\n      const windowStart = window[windowOffsetKey];\n      const windowEnd = windowStart + window[windowSizeKey];\n      const elementStart = windowStart + elementRect[rectKey];\n      const elementEnd = elementStart + elementRect[sizeKey];\n      const popoverStart = elementEnd + gap;\n      const popoverEnd = popoverStart + popoverRect[sizeKey];\n      if (flip && popoverEnd > windowEnd) {\n        const beforePopoverStart = this.before({ ...options, flip: false });\n        const diffStart = windowStart - beforePopoverStart;\n        const diffEnd = popoverEnd - windowEnd;\n        if (beforePopoverStart >= windowStart || diffEnd > diffStart)\n          return beforePopoverStart;\n      }\n      return popoverStart;\n    },\n    start: ({ elementRect, popoverRect }) => {\n      const windowStart = window[windowOffsetKey];\n      const elementStart = windowStart + elementRect[rectKey];\n      return fitToWindow(elementStart, { elementRect, popoverRect });\n    },\n    end: ({ elementRect, popoverRect }) => {\n      const windowStart = window[windowOffsetKey];\n      const elementStart = windowStart + elementRect[rectKey];\n      const elementEnd = elementStart + elementRect[sizeKey];\n      const popoverStart = elementEnd - popoverRect[sizeKey];\n      return fitToWindow(popoverStart, { elementRect, popoverRect });\n    },\n    center: ({ elementRect, popoverRect }) => {\n      const windowStart = window[windowOffsetKey];\n      const elementStart = windowStart + elementRect[rectKey];\n      const popoverStart =\n        elementStart + (elementRect[sizeKey] - popoverRect[sizeKey]) / 2;\n      return fitToWindow(popoverStart, { elementRect, popoverRect });\n    },\n  };\n};\n\nconst getPopoverPosition = (\n  top: PositionKeys,\n  left: PositionKeys,\n  options: PopoverPositionGetterOptions\n) => ({\n  top: popoverPositionGetters('top')[top](options),\n  left: popoverPositionGetters('left')[left](options),\n});\n\ntype PlacementPositionKeysMap = Record<Placement, [PositionKeys, PositionKeys]>;\nconst placementPositionKeysMap: PlacementPositionKeysMap = {\n  top: ['before', 'center'],\n  bottom: ['after', 'center'],\n  left: ['center', 'before'],\n  right: ['center', 'after'],\n  'top-start': ['before', 'start'],\n  'top-end': ['before', 'end'],\n  'bottom-start': ['after', 'start'],\n  'bottom-end': ['after', 'end'],\n  'left-start': ['start', 'before'],\n  'left-end': ['end', 'before'],\n  'right-start': ['start', 'after'],\n  'right-end': ['end', 'after'],\n};\n\ninterface PopoverPosition {\n  top: number;\n  left: number;\n}\n\n/**\n * Computes the position of the popover.\n * Note that you must change the elementRect when the scroll and resize events of the parent scrollable container occur.\n * In most cases, it will be the window.\n */\nconst usePopoverPosition = ({\n  elementRect,\n  popoverRect,\n  placement = 'top',\n  gap = 0.5,\n  flip = true,\n}: UsePopoverPositionProps): PopoverPosition => {\n  const bodyFontSize = useFontSize(document.body);\n  const gapPx = useMemo(() => gap * bodyFontSize, [gap, bodyFontSize]);\n\n  const positionKeys = useMemo(() => {\n    if (typeof placement === 'string' && !!placementPositionKeysMap[placement])\n      return placementPositionKeysMap[placement];\n    return placementPositionKeysMap.top;\n  }, [placement]);\n\n  return getPopoverPosition(...positionKeys, {\n    elementRect,\n    popoverRect,\n    gap: gapPx,\n    flip,\n  });\n};\n\nexport default usePopoverPosition;\n"],"file":"usePopoverPosition.js"}
+{"version":3,"file":"usePopoverPosition.js","names":["popoverPositionGetters","rectKey","sizeKey","windowSizeKey","windowOffsetKey","fitToWindow","start","elementRect","popoverRect","popoverStart","windowStart","window","windowEnd","elementStart","elementEnd","popoverEnd","before","options","gap","flip","afterPopoverStart","after","afterPopoverEnd","diffStart","diffEnd","beforePopoverStart","end","center","getPopoverPosition","top","left","placementPositionKeysMap","bottom","right","usePopoverPosition","placement","bodyFontSize","useFontSize","document","body","gapPx","useMemo","positionKeys"],"sources":["../../../../src/Popover/utils/usePopoverPosition.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { useFontSize } from '@os-design/utils';\n\nexport type Placement =\n  | 'top'\n  | 'bottom'\n  | 'left'\n  | 'right'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'left-start'\n  | 'left-end'\n  | 'right-start'\n  | 'right-end';\n\nexport interface Rect {\n  top: number;\n  left: number;\n  width: number;\n  height: number;\n}\n\ninterface UsePopoverPositionProps {\n  /**\n   * The rect of the element.\n   */\n  elementRect: Rect;\n  /**\n   * The rect of the popover.\n   */\n  popoverRect: Rect;\n  /**\n   * On which side of the element the popover will appear.\n   * @default top\n   */\n  placement?: Placement;\n  /**\n   * The gap between the element and the popover in em.\n   * @default 0.5\n   */\n  gap?: number;\n  /**\n   * Whether to flip the popover if it does not fit in the window.\n   * @default true\n   */\n  flip?: boolean;\n}\n\ninterface PopoverPositionGetterOptions {\n  elementRect: Rect;\n  popoverRect: Rect;\n  gap: number;\n  flip: boolean;\n}\ntype PositionKeys = 'before' | 'after' | 'start' | 'end' | 'center';\ntype PopoverPositionGetterFn = (\n  options: PopoverPositionGetterOptions\n) => number;\ntype PopoverPositionGetters = Record<PositionKeys, PopoverPositionGetterFn>;\ntype FitToWindow = Pick<\n  PopoverPositionGetterOptions,\n  'elementRect' | 'popoverRect'\n>;\n\nconst popoverPositionGetters = (\n  rectKey: 'top' | 'left'\n): PopoverPositionGetters => {\n  const sizeKey = rectKey === 'top' ? 'height' : 'width';\n  const windowSizeKey = rectKey === 'top' ? 'innerHeight' : 'innerWidth';\n  const windowOffsetKey = rectKey === 'top' ? 'pageYOffset' : 'pageXOffset';\n\n  const fitToWindow = (\n    start: number,\n    { elementRect, popoverRect }: FitToWindow\n  ): number => {\n    let popoverStart = start;\n    const windowStart = window[windowOffsetKey];\n    const windowEnd = windowStart + window[windowSizeKey];\n    const elementStart = windowStart + elementRect[rectKey];\n    const elementEnd = elementStart + elementRect[sizeKey];\n    const popoverEnd = popoverStart + popoverRect[sizeKey];\n\n    // Fit the popover to the end of the window\n    if (popoverEnd > windowEnd) {\n      if (elementEnd < windowEnd)\n        popoverStart = windowEnd - popoverRect[sizeKey];\n      else if (popoverRect[sizeKey] > elementRect[sizeKey])\n        popoverStart = elementEnd - popoverRect[sizeKey];\n      else if (windowEnd - elementStart > popoverRect[sizeKey])\n        popoverStart = windowEnd - popoverRect[sizeKey];\n      else popoverStart = elementStart;\n    }\n\n    // Fit the popover to the beginning of the window\n    if (popoverStart < windowStart) {\n      if (elementStart > windowStart) popoverStart = windowStart;\n      else if (popoverRect[sizeKey] > elementRect[sizeKey])\n        popoverStart = elementStart;\n      else if (elementEnd - windowStart > popoverRect[sizeKey])\n        popoverStart = windowStart;\n      else popoverStart = elementEnd - popoverRect[sizeKey];\n    }\n\n    return popoverStart;\n  };\n\n  return {\n    before(options) {\n      const { elementRect, popoverRect, gap, flip } = options;\n      const windowStart = window[windowOffsetKey];\n      const windowEnd = windowStart + window[windowSizeKey];\n      const elementStart = windowStart + elementRect[rectKey];\n      const popoverStart = elementStart - popoverRect[sizeKey] - gap;\n      if (flip && popoverStart < windowStart) {\n        const afterPopoverStart = this.after({ ...options, flip: false });\n        const afterPopoverEnd = afterPopoverStart + popoverRect[sizeKey];\n        const diffStart = windowStart - popoverStart;\n        const diffEnd = afterPopoverEnd - windowEnd;\n        if (afterPopoverEnd <= windowEnd || diffStart > diffEnd)\n          return afterPopoverStart;\n      }\n      return popoverStart;\n    },\n    after(options) {\n      const { elementRect, popoverRect, gap, flip } = options;\n      const windowStart = window[windowOffsetKey];\n      const windowEnd = windowStart + window[windowSizeKey];\n      const elementStart = windowStart + elementRect[rectKey];\n      const elementEnd = elementStart + elementRect[sizeKey];\n      const popoverStart = elementEnd + gap;\n      const popoverEnd = popoverStart + popoverRect[sizeKey];\n      if (flip && popoverEnd > windowEnd) {\n        const beforePopoverStart = this.before({ ...options, flip: false });\n        const diffStart = windowStart - beforePopoverStart;\n        const diffEnd = popoverEnd - windowEnd;\n        if (beforePopoverStart >= windowStart || diffEnd > diffStart)\n          return beforePopoverStart;\n      }\n      return popoverStart;\n    },\n    start: ({ elementRect, popoverRect }) => {\n      const windowStart = window[windowOffsetKey];\n      const elementStart = windowStart + elementRect[rectKey];\n      return fitToWindow(elementStart, { elementRect, popoverRect });\n    },\n    end: ({ elementRect, popoverRect }) => {\n      const windowStart = window[windowOffsetKey];\n      const elementStart = windowStart + elementRect[rectKey];\n      const elementEnd = elementStart + elementRect[sizeKey];\n      const popoverStart = elementEnd - popoverRect[sizeKey];\n      return fitToWindow(popoverStart, { elementRect, popoverRect });\n    },\n    center: ({ elementRect, popoverRect }) => {\n      const windowStart = window[windowOffsetKey];\n      const elementStart = windowStart + elementRect[rectKey];\n      const popoverStart =\n        elementStart + (elementRect[sizeKey] - popoverRect[sizeKey]) / 2;\n      return fitToWindow(popoverStart, { elementRect, popoverRect });\n    },\n  };\n};\n\nconst getPopoverPosition = (\n  top: PositionKeys,\n  left: PositionKeys,\n  options: PopoverPositionGetterOptions\n) => ({\n  top: popoverPositionGetters('top')[top](options),\n  left: popoverPositionGetters('left')[left](options),\n});\n\ntype PlacementPositionKeysMap = Record<Placement, [PositionKeys, PositionKeys]>;\nconst placementPositionKeysMap: PlacementPositionKeysMap = {\n  top: ['before', 'center'],\n  bottom: ['after', 'center'],\n  left: ['center', 'before'],\n  right: ['center', 'after'],\n  'top-start': ['before', 'start'],\n  'top-end': ['before', 'end'],\n  'bottom-start': ['after', 'start'],\n  'bottom-end': ['after', 'end'],\n  'left-start': ['start', 'before'],\n  'left-end': ['end', 'before'],\n  'right-start': ['start', 'after'],\n  'right-end': ['end', 'after'],\n};\n\ninterface PopoverPosition {\n  top: number;\n  left: number;\n}\n\n/**\n * Computes the position of the popover.\n * Note that you must change the elementRect when the scroll and resize events of the parent scrollable container occur.\n * In most cases, it will be the window.\n */\nconst usePopoverPosition = ({\n  elementRect,\n  popoverRect,\n  placement = 'top',\n  gap = 0.5,\n  flip = true,\n}: UsePopoverPositionProps): PopoverPosition => {\n  const bodyFontSize = useFontSize(document.body);\n  const gapPx = useMemo(() => gap * bodyFontSize, [gap, bodyFontSize]);\n\n  const positionKeys = useMemo(() => {\n    if (typeof placement === 'string' && !!placementPositionKeysMap[placement])\n      return placementPositionKeysMap[placement];\n    return placementPositionKeysMap.top;\n  }, [placement]);\n\n  return getPopoverPosition(...positionKeys, {\n    elementRect,\n    popoverRect,\n    gap: gapPx,\n    flip,\n  });\n};\n\nexport default usePopoverPosition;\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Progress/index.tsx"],"names":["Container","sizeStyles","Trail","p","theme","progressColorTrail","height","Stroke","percent","progressColorStroke","progressColorStrokeSuccess","Text","styled","div","progressColorPercentage","Progress","ref","text","rest","validPercent","textId","Math","random","toString","slice","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAqBA,IAAMA,SAAS,GAAG,wBAAO,KAAP,EAAc,6BAAiB,MAAjB,CAAd,CAAH,2HAGXC,kBAHW,CAAf;AAOA,IAAMC,KAAK,GAAG,wBAAO,KAAP,EAAc,6BAAiB,QAAjB,CAAd,CAAH,4MAEW,UAACC,CAAD;AAAA,SAAO,kBAAIA,CAAC,CAACC,KAAF,CAAQC,kBAAZ,CAAP;AAAA,CAFX,EAGQ,UAACF,CAAD;AAAA,wBAAeA,CAAC,CAACG,MAAjB;AAAA,CAHR,CAAX;AAQA,IAAMC,MAAM,GAAG,wBACb,KADa,EAEb,6BAAiB,SAAjB,EAA4B,QAA5B,CAFa,CAAH,sLAID,UAACJ,CAAD;AAAA,SAAOA,CAAC,CAACK,OAAT;AAAA,CAJC,EAKA,UAACL,CAAD;AAAA,SAAOA,CAAC,CAACG,MAAT;AAAA,CALA,EAMS,UAACH,CAAD;AAAA,wBAAeA,CAAC,CAACG,MAAjB;AAAA,CANT,EAON,UAACH,CAAD;AAAA,wBAAeA,CAAC,CAACG,MAAjB;AAAA,CAPM,EAQU,UAACH,CAAD;AAAA,SAClBA,CAAC,CAACK,OAAF,GAAY,GAAZ,GACI,kBAAIL,CAAC,CAACC,KAAF,CAAQK,mBAAZ,CADJ,GAEI,kBAAIN,CAAC,CAACC,KAAF,CAAQM,0BAAZ,CAHc;AAAA,CARV,EAYR,8BAAiB,OAAjB,EAA0B,kBAA1B,CAZQ,CAAZ;;AAeA,IAAMC,IAAI,GAAGC,mBAAOC,GAAV,oIAEC,UAACV,CAAD;AAAA,SAAO,kBAAIA,CAAC,CAACC,KAAF,CAAQU,uBAAZ,CAAP;AAAA,CAFD,CAAV;AAMA;AACA;AACA;;;AACA,IAAMC,QAAQ,gBAAG,uBACf,gBAAmDC,GAAnD,EAA2D;AAAA,0BAAxDR,OAAwD;AAAA,MAAxDA,OAAwD,6BAA9C,CAA8C;AAAA,MAA3CS,IAA2C,QAA3CA,IAA2C;AAAA,yBAArCX,MAAqC;AAAA,MAArCA,MAAqC,4BAA5B,OAA4B;AAAA,MAAhBY,IAAgB;;AACzD,MAAMC,YAAY,GAAG,oBAAQ,YAAM;AACjC,QAAIX,OAAO,GAAG,CAAd,EAAiB,OAAO,CAAP;AACjB,QAAIA,OAAO,GAAG,GAAd,EAAmB,OAAO,GAAP;AACnB,WAAOA,OAAP;AACD,GAJoB,EAIlB,CAACA,OAAD,CAJkB,CAArB;AAMA,MAAMY,MAAM,GAAG,oBACb;AAAA,uCAA2BC,IAAI,CAACC,MAAL,GAAcC,QAAd,CAAuB,EAAvB,EAA2BC,KAA3B,CAAiC,CAAjC,EAAoC,EAApC,CAA3B;AAAA,GADa,EAEb,EAFa,CAAf;AAKA,sBACE,gCAAC,SAAD;AACE,IAAA,IAAI,EAAC,aADP;AAEE,qBAAeL,YAFjB;AAGE,qBAAe,CAHjB;AAIE,qBAAe,GAJjB;AAKE,wBAAkBC;AALpB,KAMMF,IANN;AAOE,IAAA,GAAG,EAAEF;AAPP,mBASE,gCAAC,KAAD;AAAO,IAAA,MAAM,EAAEV;AAAf,kBACE,gCAAC,MAAD;AAAQ,IAAA,OAAO,EAAEa,YAAjB;AAA+B,IAAA,MAAM,EAAEb;AAAvC,IADF,CATF,EAYGW,IAAI,iBAAI,gCAAC,IAAD;AAAM,IAAA,EAAE,EAAEG;AAAV,KAAmBH,IAAnB,CAZX,CADF;AAgBD,CA7Bc,CAAjB;AAgCAF,QAAQ,CAACU,WAAT,GAAuB,UAAvB;eAEeV,Q","sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef, useMemo } from 'react';\nimport { sizeStyles, transitionStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\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"],"file":"index.js"}
+{"version":3,"file":"index.js","names":["Container","styled","omitEmotionProps","sizeStyles","Trail","p","clr","theme","progressColorTrail","height","Stroke","percent","progressColorStroke","progressColorStrokeSuccess","transitionStyles","Text","div","progressColorPercentage","Progress","forwardRef","ref","text","rest","validPercent","useMemo","textId","Math","random","toString","slice","displayName"],"sources":["../../../src/Progress/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef, useMemo } from 'react';\nimport { sizeStyles, transitionStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\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/cjs/RadioGroup/index.js

@@ -9,8 +9,6 @@ exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _styles = require("@os-design/styles");
-
 var _utils = require("@os-design/utils");
 
 var _styled = _interopRequireDefault(require("@emotion/styled"));
@@ -62,11 +60,11 @@ var wideAlwaysStyles = function wideAlwaysStyles(p) {
   return p.wide === 'always' && (0, _react2.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: 100%;\n    & > button {\n      flex: 1;\n    }\n  "])));
 };
 
-var Container = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('wide', 'disabled', 'size'))(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: inline-flex;\n  flex-wrap: wrap;\n\n  border-radius: ", "em;\n  overflow: hidden;\n  border: 1px solid\n    ", ";\n\n  ", ";\n  ", ";\n  ", ";\n"])), function (p) {
+var Container = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('wide', 'disabled'))(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: inline-flex;\n  flex-wrap: wrap;\n\n  border-radius: ", "em;\n  overflow: hidden;\n  border: 1px solid\n    ", ";\n\n  ", ";\n  ", ";\n"])), function (p) {
   return p.theme.borderRadius;
 }, function (p) {
   return p.disabled ? (0, _theming.clr)(p.theme.buttonDisabledGhostColorText) : (0, _theming.clr)(p.theme.colorPrimary);
-}, wideDefaultStyles, wideAlwaysStyles, _styles.sizeStyles);
+}, wideDefaultStyles, wideAlwaysStyles);
 var StyledButton = (0, _styled["default"])(_Button["default"])(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  border-radius: 0;\n"])));
 /**
  * The radio buttons that allow a user to select only one of a limited number of options.
@@ -97,8 +95,7 @@ var RadioGroup = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
 
   return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(Container, _extends({
     wide: wide,
-    disabled: disabled,
-    size: size
+    disabled: disabled
   }, rest, {
     ref: ref
   }), options === null || options === void 0 ? void 0 : options.map(function (_ref2) {
@@ -114,6 +111,7 @@ var RadioGroup = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       type: forwardedValue === valueOption ? 'primary' : 'ghost',
       wide: "never",
       disabled: disabled || disabledOption,
+      size: size,
       onClick: function onClick(e) {
         setForwardedValue(valueOption);
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/RadioGroup/index.tsx"],"names":["wideDefaultStyles","p","wide","css","m","max","xxs","wideAlwaysStyles","Container","theme","borderRadius","disabled","buttonDisabledGhostColorText","colorPrimary","sizeStyles","StyledButton","Button","RadioGroup","ref","options","value","defaultValue","onChange","size","rest","forwardedValue","setForwardedValue","map","title","valueOption","disabledOption","onClick","buttonRest","e","displayName"],"mappings":"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","sourcesContent":["import React, { forwardRef } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps, useForwardedState } from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { m } from '@os-design/media';\nimport { clr } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport Button, { ButtonProps } from '../Button';\n\nexport interface RadioGroupOption\n  extends Omit<ButtonProps, 'type' | 'wide' | 'size'> {\n  /**\n   * The title of the option.\n   */\n  title: string;\n  /**\n   * The value of the option.\n   */\n  value: string;\n}\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'value' | 'defaultValue' | 'onChange' | 'ref'\n>;\nexport interface RadioGroupProps extends JsxDivProps, WithSize {\n  /**\n   * Options of the radio group.\n   * @default undefined\n   */\n  options?: RadioGroupOption[];\n  /**\n   * Whether the radio group has full width.\n   * Possible values:\n   * `default` – the radio group has full width if the screen width is less than xs;\n   * `always` – the radio group always has full width;\n   * `never` – the radio group never has full width.\n   * @default default\n   */\n  wide?: 'default' | 'always' | 'never';\n  /**\n   * Whether the radio group is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Selected option.\n   * @default false\n   */\n  value?: string;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: string;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: string) => void;\n}\n\nconst wideDefaultStyles = (p) =>\n  p.wide === 'default' &&\n  css`\n    ${m.max.xxs} {\n      width: 100%;\n      & > button {\n        flex: 1;\n      }\n    }\n  `;\n\nconst wideAlwaysStyles = (p) =>\n  p.wide === 'always' &&\n  css`\n    width: 100%;\n    & > button {\n      flex: 1;\n    }\n  `;\n\ntype ContainerProps = Required<Pick<RadioGroupProps, 'wide' | 'disabled'>> &\n  WithSize;\nconst Container = styled(\n  'div',\n  omitEmotionProps('wide', 'disabled', 'size')\n)<ContainerProps>`\n  display: inline-flex;\n  flex-wrap: wrap;\n\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  overflow: hidden;\n  border: 1px solid\n    ${(p) =>\n      p.disabled\n        ? clr(p.theme.buttonDisabledGhostColorText)\n        : clr(p.theme.colorPrimary)};\n\n  ${wideDefaultStyles};\n  ${wideAlwaysStyles};\n  ${sizeStyles};\n`;\n\nconst StyledButton = styled(Button)`\n  border-radius: 0;\n`;\n\n/**\n * The radio buttons that allow a user to select only one of a limited number of options.\n */\nconst RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(\n  (\n    {\n      options = [],\n      wide = 'default',\n      disabled = false,\n      value,\n      defaultValue,\n      onChange = () => {},\n      size,\n      ...rest\n    },\n    ref\n  ) => {\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    return (\n      <div>\n        <Container\n          wide={wide}\n          disabled={disabled}\n          size={size}\n          {...rest}\n          ref={ref}\n        >\n          {options?.map(\n            ({\n              title,\n              value: valueOption,\n              disabled: disabledOption,\n              onClick = () => {},\n              ...buttonRest\n            }) => (\n              <StyledButton\n                key={valueOption}\n                type={forwardedValue === valueOption ? 'primary' : 'ghost'}\n                wide='never'\n                disabled={disabled || disabledOption}\n                onClick={(e) => {\n                  setForwardedValue(valueOption);\n                  onClick(e);\n                }}\n                {...buttonRest}\n              >\n                {title}\n              </StyledButton>\n            )\n          )}\n        </Container>\n      </div>\n    );\n  }\n);\n\nRadioGroup.displayName = 'RadioGroup';\n\nexport default RadioGroup;\n"],"file":"index.js"}
+{"version":3,"file":"index.js","names":["wideDefaultStyles","p","wide","css","m","max","xxs","wideAlwaysStyles","Container","styled","omitEmotionProps","theme","borderRadius","disabled","clr","buttonDisabledGhostColorText","colorPrimary","StyledButton","Button","RadioGroup","forwardRef","ref","options","value","defaultValue","onChange","size","rest","useForwardedState","forwardedValue","setForwardedValue","map","title","valueOption","disabledOption","onClick","buttonRest","e","displayName"],"sources":["../../../src/RadioGroup/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { WithSize } from '@os-design/styles';\nimport { omitEmotionProps, useForwardedState } from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { m } from '@os-design/media';\nimport { clr } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport Button, { ButtonProps } from '../Button';\n\nexport interface RadioGroupOption\n  extends Omit<ButtonProps, 'type' | 'wide' | 'size'> {\n  /**\n   * The title of the option.\n   */\n  title: string;\n  /**\n   * The value of the option.\n   */\n  value: string;\n}\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'value' | 'defaultValue' | 'onChange' | 'ref'\n>;\nexport interface RadioGroupProps extends JsxDivProps, WithSize {\n  /**\n   * Options of the radio group.\n   * @default undefined\n   */\n  options?: RadioGroupOption[];\n  /**\n   * Whether the radio group has full width.\n   * Possible values:\n   * `default` – the radio group has full width if the screen width is less than xs;\n   * `always` – the radio group always has full width;\n   * `never` – the radio group never has full width.\n   * @default default\n   */\n  wide?: 'default' | 'always' | 'never';\n  /**\n   * Whether the radio group is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Selected option.\n   * @default false\n   */\n  value?: string;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: string;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: string) => void;\n}\n\nconst wideDefaultStyles = (p) =>\n  p.wide === 'default' &&\n  css`\n    ${m.max.xxs} {\n      width: 100%;\n      & > button {\n        flex: 1;\n      }\n    }\n  `;\n\nconst wideAlwaysStyles = (p) =>\n  p.wide === 'always' &&\n  css`\n    width: 100%;\n    & > button {\n      flex: 1;\n    }\n  `;\n\ntype ContainerProps = Required<Pick<RadioGroupProps, 'wide' | 'disabled'>>;\nconst Container = styled(\n  'div',\n  omitEmotionProps('wide', 'disabled')\n)<ContainerProps>`\n  display: inline-flex;\n  flex-wrap: wrap;\n\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  overflow: hidden;\n  border: 1px solid\n    ${(p) =>\n      p.disabled\n        ? clr(p.theme.buttonDisabledGhostColorText)\n        : clr(p.theme.colorPrimary)};\n\n  ${wideDefaultStyles};\n  ${wideAlwaysStyles};\n`;\n\nconst StyledButton = styled(Button)`\n  border-radius: 0;\n`;\n\n/**\n * The radio buttons that allow a user to select only one of a limited number of options.\n */\nconst RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(\n  (\n    {\n      options = [],\n      wide = 'default',\n      disabled = false,\n      value,\n      defaultValue,\n      onChange = () => {},\n      size,\n      ...rest\n    },\n    ref\n  ) => {\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    return (\n      <div>\n        <Container wide={wide} disabled={disabled} {...rest} ref={ref}>\n          {options?.map(\n            ({\n              title,\n              value: valueOption,\n              disabled: disabledOption,\n              onClick = () => {},\n              ...buttonRest\n            }) => (\n              <StyledButton\n                key={valueOption}\n                type={forwardedValue === valueOption ? 'primary' : 'ghost'}\n                wide='never'\n                disabled={disabled || disabledOption}\n                size={size}\n                onClick={(e) => {\n                  setForwardedValue(valueOption);\n                  onClick(e);\n                }}\n                {...buttonRest}\n              >\n                {title}\n              </StyledButton>\n            )\n          )}\n        </Container>\n      </div>\n    );\n  }\n);\n\nRadioGroup.displayName = 'RadioGroup';\n\nexport default RadioGroup;\n"],"mappings":";;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuDA,IAAMA,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,CAAD;EAAA,OACxBA,CAAC,CAACC,IAAF,KAAW,SAAX,QACAC,WADA,iKAEIC,QAAA,CAAEC,GAAF,CAAMC,GAFV,CADwB;AAAA,CAA1B;;AAWA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACN,CAAD;EAAA,OACvBA,CAAC,CAACC,IAAF,KAAW,QAAX,QACAC,WADA,uIADuB;AAAA,CAAzB;;AAUA,IAAMK,SAAS,GAAG,IAAAC,kBAAA,EAChB,KADgB,EAEhB,IAAAC,uBAAA,EAAiB,MAAjB,EAAyB,UAAzB,CAFgB,CAAH,4NAOI,UAACT,CAAD;EAAA,OAAOA,CAAC,CAACU,KAAF,CAAQC,YAAf;AAAA,CAPJ,EAUT,UAACX,CAAD;EAAA,OACAA,CAAC,CAACY,QAAF,GACI,IAAAC,YAAA,EAAIb,CAAC,CAACU,KAAF,CAAQI,4BAAZ,CADJ,GAEI,IAAAD,YAAA,EAAIb,CAAC,CAACU,KAAF,CAAQK,YAAZ,CAHJ;AAAA,CAVS,EAeXhB,iBAfW,EAgBXO,gBAhBW,CAAf;AAmBA,IAAMU,YAAY,GAAG,IAAAR,kBAAA,EAAOS,kBAAP,CAAH,8FAAlB;AAIA;AACA;AACA;;AACA,IAAMC,UAAU,gBAAG,IAAAC,iBAAA,EACjB,gBAWEC,GAXF,EAYK;EAAA,wBAVDC,OAUC;EAAA,IAVDA,OAUC,6BAVS,EAUT;EAAA,qBATDpB,IASC;EAAA,IATDA,IASC,0BATM,SASN;EAAA,yBARDW,QAQC;EAAA,IARDA,QAQC,8BARU,KAQV;EAAA,IAPDU,KAOC,QAPDA,KAOC;EAAA,IANDC,YAMC,QANDA,YAMC;EAAA,yBALDC,QAKC;EAAA,IALDA,QAKC,8BALU,YAAM,CAAE,CAKlB;EAAA,IAJDC,IAIC,QAJDA,IAIC;EAAA,IAHEC,IAGF;;EACH,yBAA4C,IAAAC,wBAAA,EAAkB;IAC5DL,KAAK,EAALA,KAD4D;IAE5DC,YAAY,EAAZA,YAF4D;IAG5DC,QAAQ,EAARA;EAH4D,CAAlB,CAA5C;EAAA;EAAA,IAAOI,cAAP;EAAA,IAAuBC,iBAAvB;;EAMA,oBACE,0DACE,gCAAC,SAAD;IAAW,IAAI,EAAE5B,IAAjB;IAAuB,QAAQ,EAAEW;EAAjC,GAA+Cc,IAA/C;IAAqD,GAAG,EAAEN;EAA1D,IACGC,OADH,aACGA,OADH,uBACGA,OAAO,CAAES,GAAT,CACC;IAAA,IACEC,KADF,SACEA,KADF;IAAA,IAESC,WAFT,SAEEV,KAFF;IAAA,IAGYW,cAHZ,SAGErB,QAHF;IAAA,0BAIEsB,OAJF;IAAA,IAIEA,QAJF,8BAIY,YAAM,CAAE,CAJpB;IAAA,IAKKC,UALL;;IAAA,oBAOE,gCAAC,YAAD;MACE,GAAG,EAAEH,WADP;MAEE,IAAI,EAAEJ,cAAc,KAAKI,WAAnB,GAAiC,SAAjC,GAA6C,OAFrD;MAGE,IAAI,EAAC,OAHP;MAIE,QAAQ,EAAEpB,QAAQ,IAAIqB,cAJxB;MAKE,IAAI,EAAER,IALR;MAME,OAAO,EAAE,iBAACW,CAAD,EAAO;QACdP,iBAAiB,CAACG,WAAD,CAAjB;;QACAE,QAAO,CAACE,CAAD,CAAP;MACD;IATH,GAUMD,UAVN,GAYGJ,KAZH,CAPF;EAAA,CADD,CADH,CADF,CADF;AA8BD,CAlDgB,CAAnB;AAqDAb,UAAU,CAACmB,WAAX,GAAyB,YAAzB;eAEenB,U"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/RadioGroupSkeleton/index.tsx"],"names":["StyledRadioGroupSkeleton","Skeleton","p","theme","baseHeight","sizeStyles","RadioGroupSkeleton","ref","width","rest","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAUA,IAAMA,wBAAwB,GAAG,wBAC/BC,oBAD+B,EAE/B,6BAAiB,MAAjB,CAF+B,CAAH,gHAIb,UAACC,CAAD;AAAA,SAAOA,CAAC,CAACC,KAAF,CAAQC,UAAf;AAAA,CAJa,EAK1BC,kBAL0B,CAA9B;AAQA;AACA;AACA;;AACA,IAAMC,kBAAkB,gBAAG,uBACzB,gBAA8BC,GAA9B;AAAA,wBAAGC,KAAH;AAAA,MAAGA,KAAH,2BAAW,MAAX;AAAA,MAAsBC,IAAtB;;AAAA,sBACE,gCAAC,wBAAD;AAA0B,IAAA,KAAK,EAAED;AAAjC,KAA4CC,IAA5C;AAAkD,IAAA,GAAG,EAAEF;AAAvD,KADF;AAAA,CADyB,CAA3B;AAMAD,kBAAkB,CAACI,WAAnB,GAAiC,oBAAjC;eAEeJ,kB","sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\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"],"file":"index.js"}
+{"version":3,"file":"index.js","names":["StyledRadioGroupSkeleton","styled","Skeleton","omitEmotionProps","p","theme","baseHeight","sizeStyles","RadioGroupSkeleton","forwardRef","ref","width","rest","displayName"],"sources":["../../../src/RadioGroupSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\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;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAUA,IAAMA,wBAAwB,GAAG,IAAAC,kBAAA,EAC/BC,oBAD+B,EAE/B,IAAAC,uBAAA,EAAiB,MAAjB,CAF+B,CAAH,gHAIb,UAACC,CAAD;EAAA,OAAOA,CAAC,CAACC,KAAF,CAAQC,UAAf;AAAA,CAJa,EAK1BC,kBAL0B,CAA9B;AAQA;AACA;AACA;;AACA,IAAMC,kBAAkB,gBAAG,IAAAC,iBAAA,EACzB,gBAA8BC,GAA9B;EAAA,sBAAGC,KAAH;EAAA,IAAGA,KAAH,2BAAW,MAAX;EAAA,IAAsBC,IAAtB;;EAAA,oBACE,gCAAC,wBAAD;IAA0B,KAAK,EAAED;EAAjC,GAA4CC,IAA5C;IAAkD,GAAG,EAAEF;EAAvD,GADF;AAAA,CADyB,CAA3B;AAMAF,kBAAkB,CAACK,WAAnB,GAAiC,oBAAjC;eAEeL,kB"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Result/index.tsx"],"names":["Container","p","theme","colorText","sizeStyles","IconContainer","styled","div","resultColorIcon","Text","Title","sizes","large","Description","small","resultColorDescription","ActiveElements","m","min","sm","ChildrenContainer","Result","ref","title","description","icon","actions","children","rest","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAyBA,IAAMA,SAAS,GAAG,wBAAO,KAAP,EAAc,6BAAiB,MAAjB,CAAd,CAAH,+LAKJ,UAACC,CAAD;AAAA,SAAO,kBAAIA,CAAC,CAACC,KAAF,CAAQC,SAAZ,CAAP;AAAA,CALI,EAQXC,kBARW,CAAf;;AAWA,IAAMC,aAAa,GAAGC,mBAAOC,GAAV,yJAGR,UAACN,CAAD;AAAA,SAAO,kBAAIA,CAAC,CAACC,KAAF,CAAQM,eAAZ,CAAP;AAAA,CAHQ,CAAnB;;AAOA,IAAMC,IAAI,GAAGH,mBAAOC,GAAV,oHAAV;;AAKA,IAAMG,KAAK,GAAG,wBAAOD,IAAP,CAAH,qHACI,UAACR,CAAD;AAAA,SAAOA,CAAC,CAACC,KAAF,CAAQS,KAAR,CAAcC,KAArB;AAAA,CADJ,CAAX;AAKA,IAAMC,WAAW,GAAG,wBAAOJ,IAAP,CAAH,sIACF,UAACR,CAAD;AAAA,SAAOA,CAAC,CAACC,KAAF,CAAQS,KAAR,CAAcG,KAArB;AAAA,CADE,EAEN,UAACb,CAAD;AAAA,SAAO,kBAAIA,CAAC,CAACC,KAAF,CAAQa,sBAAZ,CAAP;AAAA,CAFM,CAAjB;;AAMA,IAAMC,cAAc,GAAGV,mBAAOC,GAAV,qYAYhBU,SAAEC,GAAF,CAAMC,EAZU,CAApB;;AAsBA,IAAMC,iBAAiB,GAAGd,mBAAOC,GAAV,6FAAvB;AAIA;AACA;AACA;AACA;;;AACA,IAAMc,MAAM,gBAAG,uBACb,gBAA2DC,GAA3D;AAAA,MAAGC,KAAH,QAAGA,KAAH;AAAA,MAAUC,WAAV,QAAUA,WAAV;AAAA,MAAuBC,IAAvB,QAAuBA,IAAvB;AAAA,MAA6BC,OAA7B,QAA6BA,OAA7B;AAAA,MAAsCC,QAAtC,QAAsCA,QAAtC;AAAA,MAAmDC,IAAnD;;AAAA,sBACE,gCAAC,SAAD,eAAeA,IAAf;AAAqB,IAAA,GAAG,EAAEN;AAA1B,MACGG,IAAI,iBAAI,gCAAC,aAAD,QAAgBA,IAAhB,CADX,eAEE,gCAAC,KAAD,QAAQF,KAAR,CAFF,EAGGC,WAAW,iBAAI,gCAAC,WAAD,QAAcA,WAAd,CAHlB,EAIGE,OAAO,iBAAI,gCAAC,cAAD,QAAiBA,OAAjB,CAJd,EAKGC,QAAQ,iBAAI,gCAAC,iBAAD,QAAoBA,QAApB,CALf,CADF;AAAA,CADa,CAAf;AAYAN,MAAM,CAACQ,WAAP,GAAqB,QAArB;eAEeR,M","sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport { m } from '@os-design/media';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface ResultProps extends JsxDivProps, WithSize {\n  /**\n   * The title of the result.\n   */\n  title: string;\n  /**\n   * The description that is under the title.\n   * @default undefined\n   */\n  description?: string;\n  /**\n   * The icon that is located above the title.\n   * @default undefined\n   */\n  icon?: React.ReactElement;\n  /**\n   * Active elements.\n   * @default undefined\n   */\n  actions?: React.ReactNode;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  color: ${(p) => clr(p.theme.colorText)};\n  padding: 2.6em 0;\n\n  ${sizeStyles};\n`;\n\nconst IconContainer = styled.div`\n  font-size: 6em;\n  line-height: 1;\n  color: ${(p) => clr(p.theme.resultColorIcon)};\n  margin-bottom: 0.1em;\n`;\n\nconst Text = styled.div`\n  text-align: center;\n  max-width: 28em;\n`;\n\nconst Title = styled(Text)`\n  font-size: ${(p) => p.theme.sizes.large}em;\n  font-weight: 500;\n`;\n\nconst Description = styled(Text)`\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.resultColorDescription)};\n  margin-top: 0.5em;\n`;\n\nconst ActiveElements = styled.div`\n  margin-top: 2em;\n\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n\n  & > *:not(:first-of-type) {\n    margin-top: 0.5em;\n  }\n\n  ${m.min.sm} {\n    flex-direction: row;\n\n    & > *:not(:first-of-type) {\n      margin-top: 0;\n      margin-left: 0.5em;\n    }\n  }\n`;\n\nconst ChildrenContainer = styled.div`\n  margin-top: 2em;\n`;\n\n/**\n * Used to give the user feedback instead of results.\n * For example, error happened, results not found, no results yet.\n */\nconst Result = forwardRef<HTMLDivElement, ResultProps>(\n  ({ title, description, icon, actions, children, ...rest }, ref) => (\n    <Container {...rest} ref={ref}>\n      {icon && <IconContainer>{icon}</IconContainer>}\n      <Title>{title}</Title>\n      {description && <Description>{description}</Description>}\n      {actions && <ActiveElements>{actions}</ActiveElements>}\n      {children && <ChildrenContainer>{children}</ChildrenContainer>}\n    </Container>\n  )\n);\n\nResult.displayName = 'Result';\n\nexport default Result;\n"],"file":"index.js"}
+{"version":3,"file":"index.js","names":["Container","styled","omitEmotionProps","p","clr","theme","colorText","sizeStyles","IconContainer","div","resultColorIcon","Text","Title","sizes","large","Description","small","resultColorDescription","ActiveElements","m","min","sm","ChildrenContainer","Result","forwardRef","ref","title","description","icon","actions","children","rest","displayName"],"sources":["../../../src/Result/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport { m } from '@os-design/media';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface ResultProps extends JsxDivProps, WithSize {\n  /**\n   * The title of the result.\n   */\n  title: string;\n  /**\n   * The description that is under the title.\n   * @default undefined\n   */\n  description?: string;\n  /**\n   * The icon that is located above the title.\n   * @default undefined\n   */\n  icon?: React.ReactElement;\n  /**\n   * Active elements.\n   * @default undefined\n   */\n  actions?: React.ReactNode;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  color: ${(p) => clr(p.theme.colorText)};\n  padding: 2.6em 0;\n\n  ${sizeStyles};\n`;\n\nconst IconContainer = styled.div`\n  font-size: 6em;\n  line-height: 1;\n  color: ${(p) => clr(p.theme.resultColorIcon)};\n  margin-bottom: 0.1em;\n`;\n\nconst Text = styled.div`\n  text-align: center;\n  max-width: 28em;\n`;\n\nconst Title = styled(Text)`\n  font-size: ${(p) => p.theme.sizes.large}em;\n  font-weight: 500;\n`;\n\nconst Description = styled(Text)`\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.resultColorDescription)};\n  margin-top: 0.5em;\n`;\n\nconst ActiveElements = styled.div`\n  margin-top: 2em;\n\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n\n  & > *:not(:first-of-type) {\n    margin-top: 0.5em;\n  }\n\n  ${m.min.sm} {\n    flex-direction: row;\n\n    & > *:not(:first-of-type) {\n      margin-top: 0;\n      margin-left: 0.5em;\n    }\n  }\n`;\n\nconst ChildrenContainer = styled.div`\n  margin-top: 2em;\n`;\n\n/**\n * Used to give the user feedback instead of results.\n * For example, error happened, results not found, no results yet.\n */\nconst Result = forwardRef<HTMLDivElement, ResultProps>(\n  ({ title, description, icon, actions, children, ...rest }, ref) => (\n    <Container {...rest} ref={ref}>\n      {icon && <IconContainer>{icon}</IconContainer>}\n      <Title>{title}</Title>\n      {description && <Description>{description}</Description>}\n      {actions && <ActiveElements>{actions}</ActiveElements>}\n      {children && <ChildrenContainer>{children}</ChildrenContainer>}\n    </Container>\n  )\n);\n\nResult.displayName = 'Result';\n\nexport default Result;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAyBA,IAAMA,SAAS,GAAG,IAAAC,kBAAA,EAAO,KAAP,EAAc,IAAAC,uBAAA,EAAiB,MAAjB,CAAd,CAAH,+LAKJ,UAACC,CAAD;EAAA,OAAO,IAAAC,YAAA,EAAID,CAAC,CAACE,KAAF,CAAQC,SAAZ,CAAP;AAAA,CALI,EAQXC,kBARW,CAAf;;AAWA,IAAMC,aAAa,GAAGP,kBAAA,CAAOQ,GAAV,yJAGR,UAACN,CAAD;EAAA,OAAO,IAAAC,YAAA,EAAID,CAAC,CAACE,KAAF,CAAQK,eAAZ,CAAP;AAAA,CAHQ,CAAnB;;AAOA,IAAMC,IAAI,GAAGV,kBAAA,CAAOQ,GAAV,oHAAV;;AAKA,IAAMG,KAAK,GAAG,IAAAX,kBAAA,EAAOU,IAAP,CAAH,qHACI,UAACR,CAAD;EAAA,OAAOA,CAAC,CAACE,KAAF,CAAQQ,KAAR,CAAcC,KAArB;AAAA,CADJ,CAAX;AAKA,IAAMC,WAAW,GAAG,IAAAd,kBAAA,EAAOU,IAAP,CAAH,sIACF,UAACR,CAAD;EAAA,OAAOA,CAAC,CAACE,KAAF,CAAQQ,KAAR,CAAcG,KAArB;AAAA,CADE,EAEN,UAACb,CAAD;EAAA,OAAO,IAAAC,YAAA,EAAID,CAAC,CAACE,KAAF,CAAQY,sBAAZ,CAAP;AAAA,CAFM,CAAjB;;AAMA,IAAMC,cAAc,GAAGjB,kBAAA,CAAOQ,GAAV,qYAYhBU,QAAA,CAAEC,GAAF,CAAMC,EAZU,CAApB;;AAsBA,IAAMC,iBAAiB,GAAGrB,kBAAA,CAAOQ,GAAV,6FAAvB;AAIA;AACA;AACA;AACA;;;AACA,IAAMc,MAAM,gBAAG,IAAAC,iBAAA,EACb,gBAA2DC,GAA3D;EAAA,IAAGC,KAAH,QAAGA,KAAH;EAAA,IAAUC,WAAV,QAAUA,WAAV;EAAA,IAAuBC,IAAvB,QAAuBA,IAAvB;EAAA,IAA6BC,OAA7B,QAA6BA,OAA7B;EAAA,IAAsCC,QAAtC,QAAsCA,QAAtC;EAAA,IAAmDC,IAAnD;;EAAA,oBACE,gCAAC,SAAD,eAAeA,IAAf;IAAqB,GAAG,EAAEN;EAA1B,IACGG,IAAI,iBAAI,gCAAC,aAAD,QAAgBA,IAAhB,CADX,eAEE,gCAAC,KAAD,QAAQF,KAAR,CAFF,EAGGC,WAAW,iBAAI,gCAAC,WAAD,QAAcA,WAAd,CAHlB,EAIGE,OAAO,iBAAI,gCAAC,cAAD,QAAiBA,OAAjB,CAJd,EAKGC,QAAQ,iBAAI,gCAAC,iBAAD,QAAoBA,QAApB,CALf,CADF;AAAA,CADa,CAAf;AAYAP,MAAM,CAACS,WAAP,GAAqB,QAArB;eAEeT,M"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ScrollButton/index.tsx"],"names":["fadeIn","keyframes","fadeOut","visibleStyles","p","visible","css","theme","transitionDelay","invisibleStyles","StyledButton","Button","containerPosition","right","scrollButtonMargin","bottom","scrollButtonColorBoxShadow","ScrollButton","ref","container","scrollTo","minOffset","onClick","rest","mounted","clickHandler","e","window","top","document","body","scrollHeight","containerElement","Element","current","t","buttonPrimaryColorBg","scrollButtonColorBg","buttonPrimaryColorText","scrollButtonColorText","buttonPrimaryColorBgHover","scrollButtonColorBgHover","displayName"],"mappings":"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","sourcesContent":["import React, {\n  forwardRef,\n  MouseEventHandler,\n  RefObject,\n  useCallback,\n} from 'react';\nimport { Up, Down } from '@os-design/icons';\nimport styled from '@emotion/styled';\nimport { useClosable, omitEmotionProps } from '@os-design/utils';\nimport { clr, ThemeOverrider, useTheme } from '@os-design/theming';\nimport { css, keyframes } from '@emotion/react';\nimport Portal from '@os-design/portal';\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"],"file":"index.js"}
+{"version":3,"file":"index.js","names":["fadeIn","keyframes","fadeOut","visibleStyles","p","visible","css","theme","transitionDelay","invisibleStyles","StyledButton","styled","Button","omitEmotionProps","containerPosition","right","scrollButtonMargin","bottom","clr","scrollButtonColorBoxShadow","ScrollButton","forwardRef","ref","container","scrollTo","minOffset","onClick","rest","useVisibility","useContainerPosition","useTheme","mounted","useClosable","clickHandler","useCallback","e","window","top","document","body","scrollHeight","containerElement","Element","current","t","buttonPrimaryColorBg","scrollButtonColorBg","buttonPrimaryColorText","scrollButtonColorText","buttonPrimaryColorBgHover","scrollButtonColorBgHover","displayName"],"sources":["../../../src/ScrollButton/index.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  MouseEventHandler,\n  RefObject,\n  useCallback,\n} from 'react';\nimport { Up, Down } from '@os-design/icons';\nimport styled from '@emotion/styled';\nimport { useClosable, omitEmotionProps } from '@os-design/utils';\nimport { clr, ThemeOverrider, useTheme } from '@os-design/theming';\nimport { css, keyframes } from '@emotion/react';\nimport Portal from '@os-design/portal';\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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"}

package/dist/cjs/ScrollButton/utils/useContainerPosition.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/ScrollButton/utils/useContainerPosition.ts"],"names":["useContainerPosition","container","right","bottom","position","setPosition","updatePosition","element","Element","current","getBoundingClientRect","window","innerWidth","innerHeight"],"mappings":";;;;;;;AAAA;;AACA;;;;;;;;;;;;;;AAOA;AACA;AACA;AACA,IAAMA,oBAAoB,GAAG,SAAvBA,oBAAuB,CAC3BC,SAD2B,EAEL;AACtB,kBAAgC,qBAA4B;AAC1DC,IAAAA,KAAK,EAAE,CADmD;AAE1DC,IAAAA,MAAM,EAAE;AAFkD,GAA5B,CAAhC;AAAA;AAAA,MAAOC,QAAP;AAAA,MAAiBC,WAAjB;;AAKA,MAAMC,cAAc,GAAG,wBAAY,YAAM;AACvC,QAAI,CAACL,SAAL,EAAgB;AAChB,QAAMM,OAAO,GACXN,SAAS,YAAYO,OAArB,GAA+BP,SAA/B,GAA2CA,SAAS,CAACQ,OADvD;AAEA,QAAI,CAACF,OAAL,EAAc;;AAEd,gCAA0BA,OAAO,CAACG,qBAAR,EAA1B;AAAA,QAAQR,KAAR,yBAAQA,KAAR;AAAA,QAAeC,MAAf,yBAAeA,MAAf;;AACA,kBAAoCQ,MAApC;AAAA,QAAQC,UAAR,WAAQA,UAAR;AAAA,QAAoBC,WAApB,WAAoBA,WAApB;AAEAR,IAAAA,WAAW,CAAC;AACVH,MAAAA,KAAK,EAAEU,UAAU,GAAGV,KADV;AAEVC,MAAAA,MAAM,EAAEU,WAAW,GAAGV;AAFZ,KAAD,CAAX;AAID,GAbsB,EAapB,CAACF,SAAD,CAboB,CAAvB;AAeA,qCAAuB;AAAA,WAAMK,cAAc,EAApB;AAAA,GAAvB,EAA+C,CAACA,cAAD,CAA/C;AACA,gCAAkBL,SAAlB,EAAsCK,cAAtC;AAEA,SAAOF,QAAP;AACD,CA3BD;;eA6BeJ,oB","sourcesContent":["import { RefObject, useCallback, useState } from 'react';\nimport { useResizeObserver, useBrowserLayoutEffect } from '@os-design/utils';\n\nexport interface ContainerPosition {\n  right: number;\n  bottom: number;\n}\n\n/**\n * Calculates the position of the container.\n */\nconst useContainerPosition = (\n  container?: Element | RefObject<Element>\n): ContainerPosition => {\n  const [position, setPosition] = useState<ContainerPosition>({\n    right: 0,\n    bottom: 0,\n  });\n\n  const updatePosition = useCallback(() => {\n    if (!container) return;\n    const element =\n      container instanceof Element ? container : container.current;\n    if (!element) return;\n\n    const { right, bottom } = element.getBoundingClientRect();\n    const { innerWidth, innerHeight } = window;\n\n    setPosition({\n      right: innerWidth - right,\n      bottom: innerHeight - bottom,\n    });\n  }, [container]);\n\n  useBrowserLayoutEffect(() => updatePosition(), [updatePosition]);\n  useResizeObserver(container as never, updatePosition);\n\n  return position;\n};\n\nexport default useContainerPosition;\n"],"file":"useContainerPosition.js"}
+{"version":3,"file":"useContainerPosition.js","names":["useContainerPosition","container","useState","right","bottom","position","setPosition","updatePosition","useCallback","element","Element","current","getBoundingClientRect","window","innerWidth","innerHeight","useBrowserLayoutEffect","useResizeObserver"],"sources":["../../../../src/ScrollButton/utils/useContainerPosition.ts"],"sourcesContent":["import { RefObject, useCallback, useState } from 'react';\nimport { useResizeObserver, useBrowserLayoutEffect } from '@os-design/utils';\n\nexport interface ContainerPosition {\n  right: number;\n  bottom: number;\n}\n\n/**\n * Calculates the position of the container.\n */\nconst useContainerPosition = (\n  container?: Element | RefObject<Element>\n): ContainerPosition => {\n  const [position, setPosition] = useState<ContainerPosition>({\n    right: 0,\n    bottom: 0,\n  });\n\n  const updatePosition = useCallback(() => {\n    if (!container) return;\n    const element =\n      container instanceof Element ? container : container.current;\n    if (!element) return;\n\n    const { right, bottom } = element.getBoundingClientRect();\n    const { innerWidth, innerHeight } = window;\n\n    setPosition({\n      right: innerWidth - right,\n      bottom: innerHeight - bottom,\n    });\n  }, [container]);\n\n  useBrowserLayoutEffect(() => updatePosition(), [updatePosition]);\n  useResizeObserver(container as never, updatePosition);\n\n  return position;\n};\n\nexport default useContainerPosition;\n"],"mappings":";;;;;;;AAAA;;AACA;;;;;;;;;;;;;;AAOA;AACA;AACA;AACA,IAAMA,oBAAoB,GAAG,SAAvBA,oBAAuB,CAC3BC,SAD2B,EAEL;EACtB,gBAAgC,IAAAC,eAAA,EAA4B;IAC1DC,KAAK,EAAE,CADmD;IAE1DC,MAAM,EAAE;EAFkD,CAA5B,CAAhC;EAAA;EAAA,IAAOC,QAAP;EAAA,IAAiBC,WAAjB;;EAKA,IAAMC,cAAc,GAAG,IAAAC,kBAAA,EAAY,YAAM;IACvC,IAAI,CAACP,SAAL,EAAgB;IAChB,IAAMQ,OAAO,GACXR,SAAS,YAAYS,OAArB,GAA+BT,SAA/B,GAA2CA,SAAS,CAACU,OADvD;IAEA,IAAI,CAACF,OAAL,EAAc;;IAEd,4BAA0BA,OAAO,CAACG,qBAAR,EAA1B;IAAA,IAAQT,KAAR,yBAAQA,KAAR;IAAA,IAAeC,MAAf,yBAAeA,MAAf;;IACA,cAAoCS,MAApC;IAAA,IAAQC,UAAR,WAAQA,UAAR;IAAA,IAAoBC,WAApB,WAAoBA,WAApB;IAEAT,WAAW,CAAC;MACVH,KAAK,EAAEW,UAAU,GAAGX,KADV;MAEVC,MAAM,EAAEW,WAAW,GAAGX;IAFZ,CAAD,CAAX;EAID,CAbsB,EAapB,CAACH,SAAD,CAboB,CAAvB;EAeA,IAAAe,6BAAA,EAAuB;IAAA,OAAMT,cAAc,EAApB;EAAA,CAAvB,EAA+C,CAACA,cAAD,CAA/C;EACA,IAAAU,wBAAA,EAAkBhB,SAAlB,EAAsCM,cAAtC;EAEA,OAAOF,QAAP;AACD,CA3BD;;eA6BeL,oB"}

package/dist/cjs/ScrollButton/utils/useVisibility.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/ScrollButton/utils/useVisibility.ts"],"names":["useVisibility","container","scrollTo","minOffset","visible","setVisible","updateVisibility","offset","window","scrollY","document","body","scrollHeight","innerHeight","containerElement","Element","current","scrollTop","clientHeight","undefined"],"mappings":";;;;;;;AAAA;;AACA;;;;;;;;;;;;;;AAQA;AACA;AACA;AACA,IAAMA,aAAa,GAAG,SAAhBA,aAAgB,OAIa;AAAA,MAHjCC,SAGiC,QAHjCA,SAGiC;AAAA,MAFjCC,QAEiC,QAFjCA,QAEiC;AAAA,MADjCC,SACiC,QADjCA,SACiC;;AACjC,kBAA8B,qBAAS,KAAT,CAA9B;AAAA;AAAA,MAAOC,OAAP;AAAA,MAAgBC,UAAhB,iBADiC,CAGjC;;;AACA,MAAMC,gBAAgB,GAAG,wBAAY,YAAM;AACzC,QAAIC,MAAM,GAAG,CAAb;;AAEA,QAAI,CAACN,SAAL,EAAgB;AACdM,MAAAA,MAAM,GACJL,QAAQ,KAAK,KAAb,GACIM,MAAM,CAACC,OADX,GAEIC,QAAQ,CAACC,IAAT,CAAcC,YAAd,GAA6BJ,MAAM,CAACC,OAApC,GAA8CD,MAAM,CAACK,WAH3D;AAID,KALD,MAKO;AACL,UAAMC,gBAAgB,GACpBb,SAAS,YAAYc,OAArB,GAA+Bd,SAA/B,GAA2CA,SAAS,CAACe,OADvD;AAEA,UAAIF,gBAAgB,KAAK,IAAzB,EAA+B;AAE/BP,MAAAA,MAAM,GACJL,QAAQ,KAAK,KAAb,GACIY,gBAAgB,CAACG,SADrB,GAEIH,gBAAgB,CAACF,YAAjB,GACAE,gBAAgB,CAACG,SADjB,GAEAH,gBAAgB,CAACI,YALvB;AAMD;;AAEDb,IAAAA,UAAU,CAACE,MAAM,IAAIJ,SAAX,CAAV;AACD,GAtBwB,EAsBtB,CAACF,SAAD,EAAYC,QAAZ,EAAsBC,SAAtB,CAtBsB,CAAzB;AAwBA,qCAAuB;AAAA,WAAMG,gBAAgB,EAAtB;AAAA,GAAvB,EAAiD,CAACA,gBAAD,CAAjD;AACA,uBACEL,SAAS,KACL,OAAOO,MAAP,KAAkB,WAAlB,GAAgCA,MAAhC,GAAyCW,SADpC,CADX,EAGE,QAHF,EAIEb,gBAJF;AAOA,SAAOF,OAAP;AACD,CAzCD;;eA2CeJ,a","sourcesContent":["import { RefObject, useCallback, useState } from 'react';\nimport { useEvent, useBrowserLayoutEffect } from '@os-design/utils';\n\ninterface UseVisibilityProps {\n  container?: Element | RefObject<Element>;\n  scrollTo: 'top' | 'bottom';\n  minOffset: number;\n}\n\n/**\n * Controls the visibility of the button.\n */\nconst useVisibility = ({\n  container,\n  scrollTo,\n  minOffset,\n}: UseVisibilityProps): boolean => {\n  const [visible, setVisible] = useState(false);\n\n  // Update the visibility of the button when the user scrolls the container\n  const updateVisibility = useCallback(() => {\n    let offset = 0;\n\n    if (!container) {\n      offset =\n        scrollTo === 'top'\n          ? window.scrollY\n          : document.body.scrollHeight - window.scrollY - window.innerHeight;\n    } else {\n      const containerElement =\n        container instanceof Element ? container : container.current;\n      if (containerElement === null) return;\n\n      offset =\n        scrollTo === 'top'\n          ? containerElement.scrollTop\n          : containerElement.scrollHeight -\n            containerElement.scrollTop -\n            containerElement.clientHeight;\n    }\n\n    setVisible(offset >= minOffset);\n  }, [container, scrollTo, minOffset]);\n\n  useBrowserLayoutEffect(() => updateVisibility(), [updateVisibility]);\n  useEvent(\n    container ||\n      ((typeof window !== 'undefined' ? window : undefined) as EventTarget),\n    'scroll',\n    updateVisibility\n  );\n\n  return visible;\n};\n\nexport default useVisibility;\n"],"file":"useVisibility.js"}
+{"version":3,"file":"useVisibility.js","names":["useVisibility","container","scrollTo","minOffset","useState","visible","setVisible","updateVisibility","useCallback","offset","window","scrollY","document","body","scrollHeight","innerHeight","containerElement","Element","current","scrollTop","clientHeight","useBrowserLayoutEffect","useEvent","undefined"],"sources":["../../../../src/ScrollButton/utils/useVisibility.ts"],"sourcesContent":["import { RefObject, useCallback, useState } from 'react';\nimport { useEvent, useBrowserLayoutEffect } from '@os-design/utils';\n\ninterface UseVisibilityProps {\n  container?: Element | RefObject<Element>;\n  scrollTo: 'top' | 'bottom';\n  minOffset: number;\n}\n\n/**\n * Controls the visibility of the button.\n */\nconst useVisibility = ({\n  container,\n  scrollTo,\n  minOffset,\n}: UseVisibilityProps): boolean => {\n  const [visible, setVisible] = useState(false);\n\n  // Update the visibility of the button when the user scrolls the container\n  const updateVisibility = useCallback(() => {\n    let offset = 0;\n\n    if (!container) {\n      offset =\n        scrollTo === 'top'\n          ? window.scrollY\n          : document.body.scrollHeight - window.scrollY - window.innerHeight;\n    } else {\n      const containerElement =\n        container instanceof Element ? container : container.current;\n      if (containerElement === null) return;\n\n      offset =\n        scrollTo === 'top'\n          ? containerElement.scrollTop\n          : containerElement.scrollHeight -\n            containerElement.scrollTop -\n            containerElement.clientHeight;\n    }\n\n    setVisible(offset >= minOffset);\n  }, [container, scrollTo, minOffset]);\n\n  useBrowserLayoutEffect(() => updateVisibility(), [updateVisibility]);\n  useEvent(\n    container ||\n      ((typeof window !== 'undefined' ? window : undefined) as EventTarget),\n    'scroll',\n    updateVisibility\n  );\n\n  return visible;\n};\n\nexport default useVisibility;\n"],"mappings":";;;;;;;AAAA;;AACA;;;;;;;;;;;;;;AAQA;AACA;AACA;AACA,IAAMA,aAAa,GAAG,SAAhBA,aAAgB,OAIa;EAAA,IAHjCC,SAGiC,QAHjCA,SAGiC;EAAA,IAFjCC,QAEiC,QAFjCA,QAEiC;EAAA,IADjCC,SACiC,QADjCA,SACiC;;EACjC,gBAA8B,IAAAC,eAAA,EAAS,KAAT,CAA9B;EAAA;EAAA,IAAOC,OAAP;EAAA,IAAgBC,UAAhB,iBADiC,CAGjC;;;EACA,IAAMC,gBAAgB,GAAG,IAAAC,kBAAA,EAAY,YAAM;IACzC,IAAIC,MAAM,GAAG,CAAb;;IAEA,IAAI,CAACR,SAAL,EAAgB;MACdQ,MAAM,GACJP,QAAQ,KAAK,KAAb,GACIQ,MAAM,CAACC,OADX,GAEIC,QAAQ,CAACC,IAAT,CAAcC,YAAd,GAA6BJ,MAAM,CAACC,OAApC,GAA8CD,MAAM,CAACK,WAH3D;IAID,CALD,MAKO;MACL,IAAMC,gBAAgB,GACpBf,SAAS,YAAYgB,OAArB,GAA+BhB,SAA/B,GAA2CA,SAAS,CAACiB,OADvD;MAEA,IAAIF,gBAAgB,KAAK,IAAzB,EAA+B;MAE/BP,MAAM,GACJP,QAAQ,KAAK,KAAb,GACIc,gBAAgB,CAACG,SADrB,GAEIH,gBAAgB,CAACF,YAAjB,GACAE,gBAAgB,CAACG,SADjB,GAEAH,gBAAgB,CAACI,YALvB;IAMD;;IAEDd,UAAU,CAACG,MAAM,IAAIN,SAAX,CAAV;EACD,CAtBwB,EAsBtB,CAACF,SAAD,EAAYC,QAAZ,EAAsBC,SAAtB,CAtBsB,CAAzB;EAwBA,IAAAkB,6BAAA,EAAuB;IAAA,OAAMd,gBAAgB,EAAtB;EAAA,CAAvB,EAAiD,CAACA,gBAAD,CAAjD;EACA,IAAAe,eAAA,EACErB,SAAS,KACL,OAAOS,MAAP,KAAkB,WAAlB,GAAgCA,MAAhC,GAAyCa,SADpC,CADX,EAGE,QAHF,EAIEhB,gBAJF;EAOA,OAAOF,OAAP;AACD,CAzCD;;eA2CeL,a"}