@pega/cosmos-react-core 2.0.0-dev.9.2 → 2.0.0-rc.2

package/lib/components/PageTemplates/PageTemplates.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageTemplates.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplates.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,QAAQ,EAKR,MAAM,EACP,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,WAAW,MAAM,gBAAgB,CAAC;AACzC,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,IAAI,EAAE,EAAE,QAAQ,EAAa,MAAM,SAAS,CAAC;AACpD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE5D,OAAO,WAAiC,MAAM,gBAAgB,CAAC;AAuE/D,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CACxC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;wBAEI,KAAK,CAAC,IAAI,CAAC,OAAO;wBAClB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC;GACzD,CACF,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC1D,OAAO,GAAG,CAAA;kBACM,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC;;GAE9C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvD,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;IACpD,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC;IACrD,OAAO,GAAG,CAAA;uBACW,KAAK,CAAC,IAAI,CAAC,OAAO;sBACnB,KAAK,CAAC,IAAI,CAAC,OAAO;kBACtB,OAAO;aACZ,KAAK;gCACc,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;MAGrD,UAAU;;;;GAIb,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,CAAC,MAAM,iBAAiB,GAAuB,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACrF,OAAO,GAAG,CAAA;qBACS,KAAK,CAAC,IAAI,CAAC,OAAO;GACpC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,UAAU,GAAsD,UAAU,CAC9E,CACE,EACE,OAAO,EACP,IAAI,GAAG,UAAU,OAAO,CAAC,MAAM,mBAAmB,EAClD,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,OAAO,EACP,EAAE,EACF,GAAG,SAAS,EACqB,EACnC,GAA2B,EAC3B,EAAE;IACF,MAAM,UAAU,GAAG,IAAI,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC;IAC3F,MAAM,UAAU,GAAG,IAAI,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC;IAC3F,MAAM,UAAU,GAAG,IAAI,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,IAAI,CAC1F,GAAG,CACJ,GAAG,CAAC;IAEL,MAAM,eAAe,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAC5C,MAAM,oBAAoB,GAAG,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,eAAe,CAAC;IACnE,MAAM,kBAAkB,GAAG,MAAM,CAAmD;QAClF,QAAQ,EAAE,EAAE;QACZ,MAAM,EAAE,EAAE;KACX,CAAC,CAAC;IAEH,cAAc,CAAC,oBAAoB,CAAC,CAAC,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAE9E,OAAO,CACL,MAAC,IAAI,oBACC,SAAS,IACb,EAAE,EAAE,gBAAgB,EACpB,WAAW,EAAE,EAAE,EACf,SAAS,EAAE;YACT,QAAQ,EAAE,aAAa;YACvB,IAAI,EAAE,KAAK;YACX,GAAG,EAAE,CAAC;SACP,EACD,EAAE,EAAE;YACF,SAAS,EAAE;gBACT,KAAK,EAAE,OAAO;oBACZ,CAAC,CAAC,GAAG,UAAU,KAAK,UAAU,KAAK,UAAU,EAAE;oBAC/C,CAAC,CAAC,GAAG,UAAU,KAAK,UAAU,EAAE;gBAClC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,UAAU;gBAC5C,IAAI;aACL;SACF,EACD,GAAG,EAAE,GAAG,iBAER,MAAC,IAAI,kBAAC,EAAE,EAAE,gBAAgB,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,iBACzD,IAAI,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,KAAC,iBAAiB,IAAC,IAAI,EAAK,IAAI,WAAI;oBAChE,KAAC,WAAW,IACV,MAAM,EACJ,IAAI,IAAI,CACN,KAAC,cAAc,kBAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,gBACpE,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,WAAI,YACL,CAClB,EAEH,OAAO,EAAE,KAAC,IAAI,kBAAC,OAAO,EAAC,IAAI,gBAAE,KAAK,YAAQ,EAC1C,OAAO,EAAE,OAAO,WAChB,aACG;YACN,OAAO,IAAI,KAAC,IAAI,kBAAC,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,gBAAG,OAAO,YAAQ;YACnE,OAAO,CAAC,GAAG,CAAC,CAAC,QAAmB,EAAE,CAAS,EAAE,EAAE;gBAC9C,OAAO,CACL,KAAC,IAAI,kBACH,GAAG,EAAE,CAAC,EAAkB,EAAE,EAAE;;wBAC1B,IAAI,EAAE;4BAAE,CAAC,MAAA,kBAAkB,CAAC,OAAO,0CAAE,QAAQ,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;oBAC1D,CAAC,EACD,SAAS,EAAE;wBACT,IAAI,EAAE,gBAAgB;wBACtB,UAAU,EAAE,OAAO;wBACnB,YAAY,EAAE,OAAO;wBACrB,GAAG,EAAE,CAAC;qBACP,EACD,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,OAAO,CAAC,GAAG,CAAC,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,gBAIzD,QAAQ,KAFJ,CAAC,CAGD,CACR,CAAC;YACJ,CAAC,CAAC,aACG,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAsD,UAAU,CACrF,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,GAAG,SAAS,EAAoC,EAAE,GAAwB,EAAE,EAAE;;IACxF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,MAAA,IAAI,CAAC,YAAY,mCAAI,MAAA,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,0CAAE,EAAE,CAAC,CAAC;IAE1E,OAAO,CACL,KAAC,UAAU,kBACT,OAAO,EAAE;YACP,8BACE,KAAC,IAAI,oBACC,IAAI,IACR,UAAU,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE;;4BACpB,QAAQ,CAAC,EAAE,CAAC,CAAC;4BACb,MAAA,IAAI,CAAC,UAAU,+CAAf,IAAI,EAAc,EAAE,EAAE,CAAC,CAAC,CAAC;wBAC3B,CAAC,YACD;oBACF,KAAC,IAAI,kBACH,EAAE,EAAE,QAAQ,EACZ,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE;4BACT,UAAU,EAAE,OAAO;4BACnB,YAAY,EAAE,OAAO;4BACrB,GAAG,EAAE,CAAC;yBACP,gBAEA,CAAC,YACG,YACN;SACJ,EACD,GAAG,EAAE,GAAG,IACJ,SAAS,UACb,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AACF,MAAM,CAAC,MAAM,aAAa,GAAyD,UAAU,CAC3F,CAAC,EAAE,CAAC,EAAE,GAAG,SAAS,EAAuC,EAAE,GAAwB,EAAE,EAAE;IACrF,OAAO,KAAC,UAAU,kBAAC,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,IAAM,SAAS,UAAI,CAAC;AAC/D,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAyD,UAAU,CAC3F,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,SAAS,EAAuC,EAAE,GAAwB,EAAE,EAAE;IACxF,OAAO,KAAC,UAAU,kBAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,IAAM,SAAS,UAAI,CAAC;AAClE,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAA2D,UAAU,CAC/F,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,SAAS,EAAyC,EAAE,GAAwB,EAAE,EAAE;IAC7F,OAAO,KAAC,UAAU,kBAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,IAAM,SAAS,UAAI,CAAC;AACrE,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAA0D,UAAU,CAC7F,CACE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,SAAS,EAAwC,EAClE,GAAwB,EACxB,EAAE;IACF,OAAO,KAAC,UAAU,kBAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,IAAM,SAAS,UAAI,CAAC;AACxE,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAA0D,UAAU,CAC7F,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,SAAS,EAAwC,EAAE,GAAwB,EAAE,EAAE;IACzF,OAAO,KAAC,UAAU,kBAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,EAAC,SAAS,EAAC,GAAG,EAAE,GAAG,IAAM,SAAS,UAAI,CAAC;AACjF,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAA0D,UAAU,CAC7F,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,SAAS,EAAwC,EAAE,GAAwB,EAAE,EAAE;IACzF,OAAO,KAAC,UAAU,kBAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,EAAC,SAAS,EAAC,GAAG,EAAE,GAAG,IAAM,SAAS,UAAI,CAAC;AACjF,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAC7B,UAAU,CACR,CACE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,SAAS,EAA4C,EACnE,GAAwB,EACxB,EAAE;IACF,OAAO,KAAC,UAAU,kBAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,EAAC,aAAa,EAAC,GAAG,EAAE,GAAG,IAAM,SAAS,UAAI,CAAC;AACxF,CAAC,CACF,CAAC;AAEJ,MAAM,CAAC,MAAM,kBAAkB,GAC7B,UAAU,CACR,CACE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,SAAS,EAA4C,EACnE,GAAwB,EACxB,EAAE;IACF,OAAO,KAAC,UAAU,kBAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,EAAC,aAAa,EAAC,GAAG,EAAE,GAAG,IAAM,SAAS,UAAI,CAAC;AACxF,CAAC,CACF,CAAC;AAEJ,MAAM,CAAC,MAAM,oBAAoB,GAC/B,UAAU,CACR,CACE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,SAAS,EAA8C,EACrE,GAAwB,EACxB,EAAE;IACF,OAAO,KAAC,UAAU,kBAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,EAAC,aAAa,EAAC,GAAG,EAAE,GAAG,IAAM,SAAS,UAAI,CAAC;AACxF,CAAC,CACF,CAAC","sourcesContent":["import {\n  forwardRef,\n  useState,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  ReactNode,\n  useRef\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps, NoChildrenProp, AsProp } from '../../types';\nimport Grid from '../Grid';\nimport Text from '../Text';\nimport SummaryItem from '../SummaryItem';\nimport Icon, { StyledIcon } from '../Icon';\nimport { tryCatch } from '../../utils';\nimport Tabs, { TabPanel, TabsProps } from '../Tabs';\nimport Flex from '../Flex';\nimport { useBreakpoint, useScrollStick } from '../../hooks';\nimport type { ScrollStickOptions } from '../../hooks/useScrollStick';\nimport Breadcrumbs, { BreadcrumbsProps } from '../Breadcrumbs';\n\nexport interface PageTemplateProps extends BaseProps, AsProp, NoChildrenProp {\n  title: string;\n  icon?: string;\n  actions?: ReactNode;\n  banners?: ReactNode;\n  path?: BreadcrumbsProps['path'];\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface TabbedPageProps extends PageTemplateProps {\n  tabs: TabsProps;\n  a: ReactNode;\n}\n\nexport interface OneColumnPageProps extends PageTemplateProps {\n  a: ReactNode;\n}\n\nexport interface TwoColumnPageProps extends PageTemplateProps {\n  a: ReactNode;\n  b: ReactNode;\n}\n\nexport interface ThreeColumnPageProps extends PageTemplateProps {\n  a: ReactNode;\n  b: ReactNode;\n  c: ReactNode;\n}\n\nexport interface FourColumnPageProps extends PageTemplateProps {\n  a: ReactNode;\n  b: ReactNode;\n  c: ReactNode;\n  d: ReactNode;\n}\n\nexport interface WideNarrowPageProps extends PageTemplateProps {\n  a: ReactNode;\n  b: ReactNode;\n}\n\nexport interface NarrowWidePageProps extends PageTemplateProps {\n  a: ReactNode;\n  b: ReactNode;\n}\n\nexport interface WideWideNarrowPageProps extends PageTemplateProps {\n  a: ReactNode;\n  b: ReactNode;\n  c: ReactNode;\n}\n\nexport interface NarrowWideWidePageProps extends PageTemplateProps {\n  a: ReactNode;\n  b: ReactNode;\n  c: ReactNode;\n}\n\nexport interface NarrowWideNarrowPageProps extends PageTemplateProps {\n  a: ReactNode;\n  b: ReactNode;\n  c: ReactNode;\n}\n\nexport interface PageLayoutProps extends PageTemplateProps {\n  regions: ReactNode[];\n  cols?: string;\n}\n\nexport const StyledPageLayout = styled.div(\n  ({ theme }) => css`\n    height: 100%;\n    padding: calc(2 * ${theme.base.spacing});\n    background-color: ${theme.base.palette['app-background']};\n  `\n);\n\nStyledPageLayout.defaultProps = defaultThemeProp;\n\nexport const StyledPageHeader = styled.header(({ theme }) => {\n  return css`\n    min-height: ${theme.base.sizes['touch-mouse']};\n    min-width: 0;\n  `;\n});\n\nStyledPageHeader.defaultProps = defaultThemeProp;\n\nexport const StyledPageIcon = styled(Flex)(({ theme }) => {\n  const bgColor = theme.base.palette['brand-primary'];\n  const color = tryCatch(() => readableColor(bgColor));\n  return css`\n    height: calc(4 * ${theme.base.spacing});\n    width: calc(4 * ${theme.base.spacing});\n    background: ${bgColor};\n    color: ${color};\n    border-radius: calc(0.5 * ${theme.base['border-radius']});\n\n    /* Need to override size set in SummaryItem */\n    ${StyledIcon} {\n      height: 1.125rem;\n      width: 1.125rem;\n    }\n  `;\n});\n\nStyledPageIcon.defaultProps = defaultThemeProp;\n\nexport const StyledBreadcrumbs: typeof Breadcrumbs = styled(Breadcrumbs)(({ theme }) => {\n  return css`\n    margin-bottom: ${theme.base.spacing};\n  `;\n});\n\nStyledBreadcrumbs.defaultProps = defaultThemeProp;\n\nconst PageLayout: FunctionComponent<PageLayoutProps & ForwardProps> = forwardRef(\n  (\n    {\n      regions,\n      cols = `repeat(${regions.length}, minmax(0, 1fr))`,\n      title,\n      icon,\n      path,\n      actions,\n      banners,\n      as,\n      ...restProps\n    }: PropsWithoutRef<PageLayoutProps>,\n    ref: PageLayoutProps['ref']\n  ) => {\n    const headerArea = `'${Array.from({ length: regions.length }, () => 'header').join(' ')}'`;\n    const bannerArea = `'${Array.from({ length: regions.length }, () => 'banner').join(' ')}'`;\n    const regionArea = `'${Array.from({ length: regions.length }, (_, i) => `col-${i + 1}`).join(\n      ' '\n    )}'`;\n\n    const isMediumOrAbove = useBreakpoint('md');\n    const hasSideBySideColumns = regions.length > 1 && isMediumOrAbove;\n    const scrollStickOptions = useRef<ScrollStickOptions & { elements: HTMLElement[] }>({\n      elements: [],\n      offset: 16\n    });\n\n    useScrollStick(hasSideBySideColumns ? scrollStickOptions.current : undefined);\n\n    return (\n      <Grid\n        {...restProps}\n        as={StyledPageLayout}\n        forwardedAs={as}\n        container={{\n          autoRows: 'max-content',\n          cols: '1fr',\n          gap: 2\n        }}\n        md={{\n          container: {\n            areas: banners\n              ? `${headerArea}\\n${bannerArea}\\n${regionArea}`\n              : `${headerArea}\\n${regionArea}`,\n            rows: banners ? 'auto auto 1fr' : 'auto 1fr',\n            cols\n          }\n        }}\n        ref={ref}\n      >\n        <Grid as={StyledPageHeader} md={{ item: { area: 'header' } }}>\n          {path && path.length > 0 && <StyledBreadcrumbs path={...path} />}\n          <SummaryItem\n            visual={\n              icon && (\n                <StyledPageIcon container={{ alignItems: 'center', justify: 'center' }}>\n                  <Icon name={icon} />\n                </StyledPageIcon>\n              )\n            }\n            primary={<Text variant='h1'>{title}</Text>}\n            actions={actions}\n          />\n        </Grid>\n        {banners && <Grid md={{ item: { area: 'banner' } }}>{banners}</Grid>}\n        {regions.map((colItems: ReactNode, i: number) => {\n          return (\n            <Grid\n              ref={(el: HTMLDivElement) => {\n                if (el) (scrollStickOptions.current?.elements).push(el);\n              }}\n              container={{\n                cols: 'minmax(0, 1fr)',\n                alignItems: 'start',\n                alignContent: 'start',\n                gap: 2\n              }}\n              md={{ item: { area: `col-${i + 1}`, alignSelf: 'start' } }}\n              // eslint-disable-next-line react/no-array-index-key\n              key={i}\n            >\n              {colItems}\n            </Grid>\n          );\n        })}\n      </Grid>\n    );\n  }\n);\n\nexport const TabbedPage: FunctionComponent<TabbedPageProps & ForwardProps> = forwardRef(\n  ({ tabs, a, ...restProps }: PropsWithoutRef<TabbedPageProps>, ref: Ref<HTMLDivElement>) => {\n    const [tabId, setTabId] = useState(tabs.currentTabId ?? tabs.tabs[0]?.id);\n\n    return (\n      <PageLayout\n        regions={[\n          <>\n            <Tabs\n              {...tabs}\n              onTabClick={(id, e) => {\n                setTabId(id);\n                tabs.onTabClick?.(id, e);\n              }}\n            />\n            <Grid\n              as={TabPanel}\n              tabId={tabId}\n              container={{\n                alignItems: 'start',\n                alignContent: 'start',\n                gap: 2\n              }}\n            >\n              {a}\n            </Grid>\n          </>\n        ]}\n        ref={ref}\n        {...restProps}\n      />\n    );\n  }\n);\nexport const OneColumnPage: FunctionComponent<OneColumnPageProps & ForwardProps> = forwardRef(\n  ({ a, ...restProps }: PropsWithoutRef<OneColumnPageProps>, ref: Ref<HTMLDivElement>) => {\n    return <PageLayout regions={[a]} ref={ref} {...restProps} />;\n  }\n);\n\nexport const TwoColumnPage: FunctionComponent<TwoColumnPageProps & ForwardProps> = forwardRef(\n  ({ a, b, ...restProps }: PropsWithoutRef<TwoColumnPageProps>, ref: Ref<HTMLDivElement>) => {\n    return <PageLayout regions={[a, b]} ref={ref} {...restProps} />;\n  }\n);\n\nexport const ThreeColumnPage: FunctionComponent<ThreeColumnPageProps & ForwardProps> = forwardRef(\n  ({ a, b, c, ...restProps }: PropsWithoutRef<ThreeColumnPageProps>, ref: Ref<HTMLDivElement>) => {\n    return <PageLayout regions={[a, b, c]} ref={ref} {...restProps} />;\n  }\n);\n\nexport const FourColumnPage: FunctionComponent<FourColumnPageProps & ForwardProps> = forwardRef(\n  (\n    { a, b, c, d, ...restProps }: PropsWithoutRef<FourColumnPageProps>,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    return <PageLayout regions={[a, b, c, d]} ref={ref} {...restProps} />;\n  }\n);\n\nexport const WideNarrowPage: FunctionComponent<WideNarrowPageProps & ForwardProps> = forwardRef(\n  ({ a, b, ...restProps }: PropsWithoutRef<WideNarrowPageProps>, ref: Ref<HTMLDivElement>) => {\n    return <PageLayout regions={[a, b]} cols='2fr 1fr' ref={ref} {...restProps} />;\n  }\n);\n\nexport const NarrowWidePage: FunctionComponent<WideNarrowPageProps & ForwardProps> = forwardRef(\n  ({ a, b, ...restProps }: PropsWithoutRef<WideNarrowPageProps>, ref: Ref<HTMLDivElement>) => {\n    return <PageLayout regions={[a, b]} cols='1fr 2fr' ref={ref} {...restProps} />;\n  }\n);\n\nexport const WideWideNarrowPage: FunctionComponent<WideWideNarrowPageProps & ForwardProps> =\n  forwardRef(\n    (\n      { a, b, c, ...restProps }: PropsWithoutRef<WideWideNarrowPageProps>,\n      ref: Ref<HTMLDivElement>\n    ) => {\n      return <PageLayout regions={[a, b, c]} cols='2fr 2fr 1fr' ref={ref} {...restProps} />;\n    }\n  );\n\nexport const NarrowWideWidePage: FunctionComponent<NarrowWideWidePageProps & ForwardProps> =\n  forwardRef(\n    (\n      { a, b, c, ...restProps }: PropsWithoutRef<NarrowWideWidePageProps>,\n      ref: Ref<HTMLDivElement>\n    ) => {\n      return <PageLayout regions={[a, b, c]} cols='1fr 2fr 2fr' ref={ref} {...restProps} />;\n    }\n  );\n\nexport const NarrowWideNarrowPage: FunctionComponent<NarrowWideNarrowPageProps & ForwardProps> =\n  forwardRef(\n    (\n      { a, b, c, ...restProps }: PropsWithoutRef<NarrowWideNarrowPageProps>,\n      ref: Ref<HTMLDivElement>\n    ) => {\n      return <PageLayout regions={[a, b, c]} cols='1fr 3fr 1fr' ref={ref} {...restProps} />;\n    }\n  );\n"]}
+{"version":3,"file":"PageTemplates.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplates.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,QAAQ,EAKR,MAAM,EAEN,UAAU,EACX,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,WAAW,MAAM,gBAAgB,CAAC;AACzC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,IAAI,EAAE,EAAE,QAAQ,EAAa,MAAM,SAAS,CAAC;AACpD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAExE,OAAO,WAAW,EAAE,EAAoB,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAClF,OAAO,eAAe,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AA2E1C,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvD,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;IACpD,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC;IACrD,OAAO,GAAG,CAAA;uBACW,KAAK,CAAC,IAAI,CAAC,OAAO;sBACnB,KAAK,CAAC,IAAI,CAAC,OAAO;kBACtB,OAAO;aACZ,KAAK;gCACc,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;GACxD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC1D,OAAO,GAAG,CAAA;MACN,iBAAiB;0BACG,KAAK,CAAC,IAAI,CAAC,OAAO;;;MAGtC,YAAY;MACZ,UAAU;qCACqB,KAAK,CAAC,IAAI,CAAC,OAAO;;GAEpD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AACzC,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEtC,CAAC;AACF,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAC1C,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,wBAAwB,GAAoB,MAAM,CAAC,QAAQ,CAAC,CAAC,GAAG,EAAE;IAC7E,OAAO,GAAG,CAAA;;;GAGT,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,wBAAwB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEzD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAGxC,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;wBAGX,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC;;MAEtD,aAAa;IACf,GAAG,CAAA;QACC,aAAa;;;;QAIb,aAAa;;;;;;KAMhB;GACF,CACF,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,UAAU,GAAsD,UAAU,CAC9E,CACE,EACE,OAAO,EACP,IAAI,GAAG,UAAU,OAAO,CAAC,MAAM,mBAAmB,EAClD,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,OAAO,EACP,IAAI,EACJ,EAAE,EACF,MAAM,EACN,UAAU,EACV,aAAa,GAAG,KAAK,EACrB,GAAG,SAAS,EACqB,EACnC,GAA2B,EAC3B,EAAE;IACF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,UAAU,EAAe,CAAC;IAC5D,MAAM,eAAe,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAC5C,MAAM,oBAAoB,GAAG,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,eAAe,CAAC;IACnE,MAAM,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAEjD,MAAM,kBAAkB,GAAG,MAAM,CAAmD;QAClF,QAAQ,EAAE,EAAE;KACb,CAAC,CAAC;IAEH,kBAAkB,CAAC,OAAO,CAAC,eAAe,GAAG,aAAa,IAAI,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;IAChG,kBAAkB,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,QAAQ,EAAE,YAAY,IAAI,CAAC,CAAC,GAAG,EAAE,CAAC;IAEvE,cAAc,CAAC,oBAAoB,CAAC,CAAC,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAE9E,OAAO,CACL,MAAC,IAAI,OACC,SAAS,EACb,SAAS,EAAE;YACT,SAAS,EAAE,QAAQ;YACnB,GAAG,EAAE,CAAC;SACP,EACD,aAAa,EAAE,aAAa,EAC5B,EAAE,EAAE,gBAAgB,EACpB,WAAW,EAAE,EAAE,EACf,GAAG,EAAE,GAAG,aAER,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,EAClD,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,EAC5B,EAAE,EAAE,gBAAgB,aAEnB,IAAI,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,KAAC,WAAW,IAAC,IAAI,EAAK,IAAI,WAAI,EAEzD,MAAM,IAAI,CACT,KAAC,WAAW,IACV,MAAM,EACJ,IAAI,IAAI,CACN,KAAC,cAAc,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,YACpE,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,WAAI,WACL,CAClB,EAEH,OAAO,EAAE,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,KAAK,WAAQ,EAC1C,OAAO,EAAE,OAAO,WAChB,CACH,EAEA,OAAO,EACP,IAAI,YACA,EAEP,KAAC,IAAI,IACH,SAAS,QACT,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EACjB,EAAE,EAAE,aAAa,EACjB,GAAG,EAAE,aAAa,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,YAE7C,KAAC,IAAI,IACH,SAAS,EAAE;wBACT,IAAI,EAAE,gBAAgB;wBACtB,UAAU,EAAE,OAAO;wBACnB,GAAG,EAAE,CAAC;wBACN,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;qBACf,EACD,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,EAAE,EAC3B,EAAE,EAAE,aAAa,EACjB,GAAG,EAAE,UAAU,YAEd,OAAO,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,CAAC,EAAE,EAAE;wBAC3B,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE;gCACT,SAAS,EAAE,QAAQ;gCACnB,GAAG,EAAE,CAAC;6BACP,EACD,EAAE,EAAE,YAAY,EAGhB,GAAG,EAAE,CAAC,EAAyB,EAAE,EAAE;gCACjC,IAAI,EAAE,EAAE;oCACN,kBAAkB,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC;iCAC7C;4BACH,CAAC,YAEA,QAAQ,IAPJ,CAAC,CAQD,CACR,CAAC;oBACJ,CAAC,CAAC,WACG,WACF,YACF,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAsD,UAAU,CACrF,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,GAAG,SAAS,EAAoC,EAAE,GAAwB,EAAE,EAAE;IACxF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAE1E,OAAO,CACL,KAAC,UAAU,OACL,SAAS,EACb,IAAI,EACF,KAAC,IAAI,OACC,IAAI,EACR,UAAU,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE;gBACpB,QAAQ,CAAC,EAAE,CAAC,CAAC;gBACb,IAAI,CAAC,UAAU,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;YAC3B,CAAC,WACD,EAEJ,OAAO,EAAE;YACP,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,YACzE,CAAC,WACG;SACR,EACD,GAAG,EAAE,GAAG,WACR,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAyD,UAAU,CAC3F,CAAC,EAAE,CAAC,EAAE,GAAG,SAAS,EAAuC,EAAE,GAAwB,EAAE,EAAE;IACrF,OAAO,KAAC,UAAU,IAAC,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,KAAM,SAAS,EAAE,IAAI,EAAC,gBAAgB,WAAG,CAAC;AACrF,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAyD,UAAU,CAC3F,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,SAAS,EAAuC,EAAE,GAAwB,EAAE,EAAE;IACxF,OAAO,CACL,KAAC,UAAU,IAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,KAAM,SAAS,EAAE,IAAI,EAAC,2BAA2B,WAAG,CAC1F,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAA2D,UAAU,CAC/F,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,SAAS,EAAyC,EAAE,GAAwB,EAAE,EAAE;IAC7F,OAAO,CACL,KAAC,UAAU,IAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,KAAM,SAAS,EAAE,IAAI,EAAC,2BAA2B,WAAG,CAC7F,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAA0D,UAAU,CAC7F,CACE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,SAAS,EAAwC,EAClE,GAAwB,EACxB,EAAE;IACF,OAAO,CACL,KAAC,UAAU,IACT,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EACrB,GAAG,EAAE,GAAG,KACJ,SAAS,EACb,IAAI,EAAC,2BAA2B,WAChC,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAA0D,UAAU,CAC7F,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,SAAS,EAAwC,EAAE,GAAwB,EAAE,EAAE;IACzF,OAAO,CACL,KAAC,UAAU,IAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,KAAM,SAAS,EAAE,IAAI,EAAC,+BAA+B,WAAG,CAC9F,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAA0D,UAAU,CAC7F,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,SAAS,EAAwC,EAAE,GAAwB,EAAE,EAAE;IACzF,OAAO,CACL,KAAC,UAAU,IAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,KAAM,SAAS,EAAE,IAAI,EAAC,+BAA+B,WAAG,CAC9F,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAC7B,UAAU,CACR,CACE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,SAAS,EAA4C,EACnE,GAAwB,EACxB,EAAE;IACF,OAAO,CACL,KAAC,UAAU,IACT,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAClB,GAAG,EAAE,GAAG,KACJ,SAAS,EACb,IAAI,EAAC,0CAA0C,WAC/C,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEJ,MAAM,CAAC,MAAM,kBAAkB,GAC7B,UAAU,CACR,CACE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,SAAS,EAA4C,EACnE,GAAwB,EACxB,EAAE;IACF,OAAO,CACL,KAAC,UAAU,IACT,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAClB,GAAG,EAAE,GAAG,KACJ,SAAS,EACb,IAAI,EAAC,0CAA0C,WAC/C,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEJ,MAAM,CAAC,MAAM,oBAAoB,GAC/B,UAAU,CACR,CACE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,SAAS,EAA8C,EACrE,GAAwB,EACxB,EAAE;IACF,OAAO,CACL,KAAC,UAAU,IACT,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAClB,GAAG,EAAE,GAAG,KACJ,SAAS,EACb,IAAI,EAAC,8CAA8C,WACnD,CACH,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["import {\n  forwardRef,\n  useState,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  ReactNode,\n  useRef,\n  ReactElement,\n  useContext\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps, NoChildrenProp, AsProp } from '../../types';\nimport Grid from '../Grid';\nimport Text from '../Text';\nimport SummaryItem from '../SummaryItem';\nimport Icon from '../Icon';\nimport { tryCatch } from '../../utils';\nimport Tabs, { TabPanel, TabsProps } from '../Tabs';\nimport Flex from '../Flex';\nimport { useBreakpoint, useElement, useScrollStick } from '../../hooks';\nimport type { ScrollStickOptions } from '../../hooks/useScrollStick';\nimport Breadcrumbs, { BreadcrumbsProps, StyledBreadcrumbs } from '../Breadcrumbs';\nimport AppShellContext from '../AppShell/AppShellContext';\nimport { StyledBanner } from '../Banner/Banner';\nimport { StyledTabs } from '../Tabs/Tabs';\n\nexport interface PageTemplateProps extends BaseProps, AsProp, NoChildrenProp {\n  title: string;\n  icon?: string;\n  actions?: ReactNode;\n  banners?: ReactNode;\n  path?: BreadcrumbsProps['path'];\n  header?: ReactNode;\n  scrollContent?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface TabbedPageProps extends PageTemplateProps {\n  tabs: TabsProps;\n  a: ReactNode;\n}\n\nexport interface OneColumnPageProps extends PageTemplateProps {\n  a: ReactNode;\n}\n\nexport interface TwoColumnPageProps extends PageTemplateProps {\n  a: ReactNode;\n  b: ReactNode;\n}\n\nexport interface ThreeColumnPageProps extends PageTemplateProps {\n  a: ReactNode;\n  b: ReactNode;\n  c: ReactNode;\n}\n\nexport interface FourColumnPageProps extends PageTemplateProps {\n  a: ReactNode;\n  b: ReactNode;\n  c: ReactNode;\n  d: ReactNode;\n}\n\nexport interface WideNarrowPageProps extends PageTemplateProps {\n  a: ReactNode;\n  b: ReactNode;\n}\n\nexport interface NarrowWidePageProps extends PageTemplateProps {\n  a: ReactNode;\n  b: ReactNode;\n}\n\nexport interface WideWideNarrowPageProps extends PageTemplateProps {\n  a: ReactNode;\n  b: ReactNode;\n  c: ReactNode;\n}\n\nexport interface NarrowWideWidePageProps extends PageTemplateProps {\n  a: ReactNode;\n  b: ReactNode;\n  c: ReactNode;\n}\n\nexport interface NarrowWideNarrowPageProps extends PageTemplateProps {\n  a: ReactNode;\n  b: ReactNode;\n  c: ReactNode;\n}\n\nexport interface PageLayoutProps extends PageTemplateProps {\n  tabs?: ReactElement<typeof Tabs>;\n  regions: ReactNode[];\n  regionsRef?: Ref<HTMLDivElement>;\n  cols?: string;\n}\n\nexport const StyledPageIcon = styled(Flex)(({ theme }) => {\n  const bgColor = theme.base.palette['brand-primary'];\n  const color = tryCatch(() => readableColor(bgColor));\n  return css`\n    height: calc(4 * ${theme.base.spacing});\n    width: calc(4 * ${theme.base.spacing});\n    background: ${bgColor};\n    color: ${color};\n    border-radius: calc(0.5 * ${theme.base['border-radius']});\n  `;\n});\n\nStyledPageIcon.defaultProps = defaultThemeProp;\n\nexport const StyledPageHeader = styled.header(({ theme }) => {\n  return css`\n    ${StyledBreadcrumbs} {\n      margin-block-end: ${theme.base.spacing};\n    }\n\n    ${StyledBanner},\n    ${StyledTabs} {\n      margin-block-start: calc(2 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledPageHeader.defaultProps = defaultThemeProp;\n\nexport const StyledRegion = styled.div``;\nStyledRegion.defaultProps = defaultThemeProp;\n\nexport const StyledRegions = styled.div`\n  flex-grow: 1;\n`;\nStyledRegions.defaultProps = defaultThemeProp;\n\nexport const StyledContent = styled.div``;\nStyledContent.defaultProps = defaultThemeProp;\n\nexport const StyledScrollableTabPanel: typeof TabPanel = styled(TabPanel)(() => {\n  return css`\n    height: 100%;\n    overflow: auto;\n  `;\n});\n\nStyledScrollableTabPanel.defaultProps = defaultThemeProp;\n\nexport const StyledPageLayout = styled.div<{\n  scrollContent: PageLayoutProps['scrollContent'];\n}>(\n  ({ theme, scrollContent }) => css`\n    position: relative;\n    min-height: inherit;\n    background-color: ${theme.base.palette['app-background']};\n\n    ${scrollContent &&\n    css`\n      ${StyledContent} {\n        position: relative;\n      }\n\n      ${StyledRegions} {\n        position: absolute;\n        height: 100%;\n        width: 100%;\n        overflow: auto;\n      }\n    `}\n  `\n);\n\nStyledPageLayout.defaultProps = defaultThemeProp;\n\nconst PageLayout: FunctionComponent<PageLayoutProps & ForwardProps> = forwardRef(\n  (\n    {\n      regions,\n      cols = `repeat(${regions.length}, minmax(0, 1fr))`,\n      title,\n      icon,\n      path,\n      actions,\n      banners,\n      tabs,\n      as,\n      header,\n      regionsRef,\n      scrollContent = false,\n      ...restProps\n    }: PropsWithoutRef<PageLayoutProps>,\n    ref: PageLayoutProps['ref']\n  ) => {\n    const [contentEl, setContentEl] = useElement<HTMLElement>();\n    const isMediumOrAbove = useBreakpoint('md');\n    const hasSideBySideColumns = regions.length > 1 && isMediumOrAbove;\n    const { headerEl } = useContext(AppShellContext);\n\n    const scrollStickOptions = useRef<ScrollStickOptions & { elements: HTMLElement[] }>({\n      elements: []\n    });\n\n    scrollStickOptions.current.scrollContainer = scrollContent && contentEl ? contentEl : undefined;\n    scrollStickOptions.current.offset = (headerEl?.offsetHeight ?? 0) + 16;\n\n    useScrollStick(hasSideBySideColumns ? scrollStickOptions.current : undefined);\n\n    return (\n      <Flex\n        {...restProps}\n        container={{\n          direction: 'column',\n          gap: 2\n        }}\n        scrollContent={scrollContent}\n        as={StyledPageLayout}\n        forwardedAs={as}\n        ref={ref}\n      >\n        <Flex\n          container={{ direction: 'column', pad: [2, 2, 0] }}\n          item={{ grow: 0, shrink: 0 }}\n          as={StyledPageHeader}\n        >\n          {path && path.length > 0 && <Breadcrumbs path={...path} />}\n\n          {header || (\n            <SummaryItem\n              visual={\n                icon && (\n                  <StyledPageIcon container={{ alignItems: 'center', justify: 'center' }}>\n                    <Icon name={icon} />\n                  </StyledPageIcon>\n                )\n              }\n              primary={<Text variant='h1'>{title}</Text>}\n              actions={actions}\n            />\n          )}\n\n          {banners}\n          {tabs}\n        </Flex>\n\n        <Flex\n          container\n          item={{ grow: 1 }}\n          as={StyledContent}\n          ref={scrollContent ? setContentEl : undefined}\n        >\n          <Grid\n            container={{\n              cols: 'minmax(0, 1fr)',\n              alignItems: 'start',\n              gap: 2,\n              pad: [0, 2, 2]\n            }}\n            md={{ container: { cols } }}\n            as={StyledRegions}\n            ref={regionsRef}\n          >\n            {regions.map((colItems, i) => {\n              return (\n                <Flex\n                  container={{\n                    direction: 'column',\n                    gap: 2\n                  }}\n                  as={StyledRegion}\n                  // eslint-disable-next-line react/no-array-index-key\n                  key={i}\n                  ref={(el: HTMLDivElement | null) => {\n                    if (el) {\n                      scrollStickOptions.current.elements[i] = el;\n                    }\n                  }}\n                >\n                  {colItems}\n                </Flex>\n              );\n            })}\n          </Grid>\n        </Flex>\n      </Flex>\n    );\n  }\n);\n\nexport const TabbedPage: FunctionComponent<TabbedPageProps & ForwardProps> = forwardRef(\n  ({ tabs, a, ...restProps }: PropsWithoutRef<TabbedPageProps>, ref: Ref<HTMLDivElement>) => {\n    const [tabId, setTabId] = useState(tabs.currentTabId ?? tabs.tabs[0]?.id);\n\n    return (\n      <PageLayout\n        {...restProps}\n        tabs={\n          <Tabs\n            {...tabs}\n            onTabClick={(id, e) => {\n              setTabId(id);\n              tabs.onTabClick?.(id, e);\n            }}\n          />\n        }\n        regions={[\n          <Flex container={{ direction: 'column', gap: 2 }} as={TabPanel} tabId={tabId}>\n            {a}\n          </Flex>\n        ]}\n        ref={ref}\n      />\n    );\n  }\n);\n\nexport const OneColumnPage: FunctionComponent<OneColumnPageProps & ForwardProps> = forwardRef(\n  ({ a, ...restProps }: PropsWithoutRef<OneColumnPageProps>, ref: Ref<HTMLDivElement>) => {\n    return <PageLayout regions={[a]} ref={ref} {...restProps} cols='minmax(0, 1fr)' />;\n  }\n);\n\nexport const TwoColumnPage: FunctionComponent<TwoColumnPageProps & ForwardProps> = forwardRef(\n  ({ a, b, ...restProps }: PropsWithoutRef<TwoColumnPageProps>, ref: Ref<HTMLDivElement>) => {\n    return (\n      <PageLayout regions={[a, b]} ref={ref} {...restProps} cols='repeat(2, minmax(0, 1fr))' />\n    );\n  }\n);\n\nexport const ThreeColumnPage: FunctionComponent<ThreeColumnPageProps & ForwardProps> = forwardRef(\n  ({ a, b, c, ...restProps }: PropsWithoutRef<ThreeColumnPageProps>, ref: Ref<HTMLDivElement>) => {\n    return (\n      <PageLayout regions={[a, b, c]} ref={ref} {...restProps} cols='repeat(3, minmax(0, 1fr))' />\n    );\n  }\n);\n\nexport const FourColumnPage: FunctionComponent<FourColumnPageProps & ForwardProps> = forwardRef(\n  (\n    { a, b, c, d, ...restProps }: PropsWithoutRef<FourColumnPageProps>,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    return (\n      <PageLayout\n        regions={[a, b, c, d]}\n        ref={ref}\n        {...restProps}\n        cols='repeat(4, minmax(0, 1fr))'\n      />\n    );\n  }\n);\n\nexport const WideNarrowPage: FunctionComponent<WideNarrowPageProps & ForwardProps> = forwardRef(\n  ({ a, b, ...restProps }: PropsWithoutRef<WideNarrowPageProps>, ref: Ref<HTMLDivElement>) => {\n    return (\n      <PageLayout regions={[a, b]} ref={ref} {...restProps} cols='minmax(0, 2fr) minmax(0, 1fr)' />\n    );\n  }\n);\n\nexport const NarrowWidePage: FunctionComponent<WideNarrowPageProps & ForwardProps> = forwardRef(\n  ({ a, b, ...restProps }: PropsWithoutRef<WideNarrowPageProps>, ref: Ref<HTMLDivElement>) => {\n    return (\n      <PageLayout regions={[a, b]} ref={ref} {...restProps} cols='minmax(0, 1fr) minmax(0, 2fr)' />\n    );\n  }\n);\n\nexport const WideWideNarrowPage: FunctionComponent<WideWideNarrowPageProps & ForwardProps> =\n  forwardRef(\n    (\n      { a, b, c, ...restProps }: PropsWithoutRef<WideWideNarrowPageProps>,\n      ref: Ref<HTMLDivElement>\n    ) => {\n      return (\n        <PageLayout\n          regions={[a, b, c]}\n          ref={ref}\n          {...restProps}\n          cols='repeat(2, minmax(0, 2fr)) minmax(0, 1fr)'\n        />\n      );\n    }\n  );\n\nexport const NarrowWideWidePage: FunctionComponent<NarrowWideWidePageProps & ForwardProps> =\n  forwardRef(\n    (\n      { a, b, c, ...restProps }: PropsWithoutRef<NarrowWideWidePageProps>,\n      ref: Ref<HTMLDivElement>\n    ) => {\n      return (\n        <PageLayout\n          regions={[a, b, c]}\n          ref={ref}\n          {...restProps}\n          cols='minmax(0, 1fr) repeat(2, minmax(0, 2fr))'\n        />\n      );\n    }\n  );\n\nexport const NarrowWideNarrowPage: FunctionComponent<NarrowWideNarrowPageProps & ForwardProps> =\n  forwardRef(\n    (\n      { a, b, c, ...restProps }: PropsWithoutRef<NarrowWideNarrowPageProps>,\n      ref: Ref<HTMLDivElement>\n    ) => {\n      return (\n        <PageLayout\n          regions={[a, b, c]}\n          ref={ref}\n          {...restProps}\n          cols='minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr)'\n        />\n      );\n    }\n  );\n"]}

package/lib/components/PageTemplates/index.d.ts

@@ -22,4 +22,7 @@ export { StyledPageHeader } from './PageTemplates';
 export { default as DashboardPage } from './DashboardPage';
 export { DashboardPageProps } from './DashboardPage';
 export { default as CategorySubPage } from './CategorySubPage';
+export { TabbedPageProps } from './PageTemplates';
+export { PageTemplateProps } from './PageTemplates';
+export { StyledRegion } from './PageTemplates';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/PageTemplates/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAE,yBAAyB,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAE,yBAAyB,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC"}

package/lib/components/PageTemplates/index.js

@@ -12,4 +12,5 @@ export { StyledPageLayout } from './PageTemplates';
 export { StyledPageHeader } from './PageTemplates';
 export { default as DashboardPage } from './DashboardPage';
 export { default as CategorySubPage } from './CategorySubPage';
+export { StyledRegion } from './PageTemplates';
 //# sourceMappingURL=index.js.map

package/lib/components/PageTemplates/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAErD,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAErD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAEvD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAE3D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC","sourcesContent":["export { OneColumnPage } from './PageTemplates';\nexport { OneColumnPageProps } from './PageTemplates';\nexport { TwoColumnPage } from './PageTemplates';\nexport { TwoColumnPageProps } from './PageTemplates';\nexport { ThreeColumnPage } from './PageTemplates';\nexport { ThreeColumnPageProps } from './PageTemplates';\nexport { FourColumnPage } from './PageTemplates';\nexport { FourColumnPageProps } from './PageTemplates';\nexport { WideNarrowPage } from './PageTemplates';\nexport { WideNarrowPageProps } from './PageTemplates';\nexport { NarrowWidePage } from './PageTemplates';\nexport { NarrowWidePageProps } from './PageTemplates';\nexport { NarrowWideWidePage } from './PageTemplates';\nexport { NarrowWideWidePageProps } from './PageTemplates';\nexport { WideWideNarrowPage } from './PageTemplates';\nexport { WideWideNarrowPageProps } from './PageTemplates';\nexport { NarrowWideNarrowPage } from './PageTemplates';\nexport { NarrowWideNarrowPageProps } from './PageTemplates';\nexport { TabbedPage } from './PageTemplates';\nexport { StyledPageLayout } from './PageTemplates';\nexport { StyledPageHeader } from './PageTemplates';\nexport { default as DashboardPage } from './DashboardPage';\nexport { DashboardPageProps } from './DashboardPage';\nexport { default as CategorySubPage } from './CategorySubPage';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAErD,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAErD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAEvD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAE3D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAG/D,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["export { OneColumnPage } from './PageTemplates';\nexport { OneColumnPageProps } from './PageTemplates';\nexport { TwoColumnPage } from './PageTemplates';\nexport { TwoColumnPageProps } from './PageTemplates';\nexport { ThreeColumnPage } from './PageTemplates';\nexport { ThreeColumnPageProps } from './PageTemplates';\nexport { FourColumnPage } from './PageTemplates';\nexport { FourColumnPageProps } from './PageTemplates';\nexport { WideNarrowPage } from './PageTemplates';\nexport { WideNarrowPageProps } from './PageTemplates';\nexport { NarrowWidePage } from './PageTemplates';\nexport { NarrowWidePageProps } from './PageTemplates';\nexport { NarrowWideWidePage } from './PageTemplates';\nexport { NarrowWideWidePageProps } from './PageTemplates';\nexport { WideWideNarrowPage } from './PageTemplates';\nexport { WideWideNarrowPageProps } from './PageTemplates';\nexport { NarrowWideNarrowPage } from './PageTemplates';\nexport { NarrowWideNarrowPageProps } from './PageTemplates';\nexport { TabbedPage } from './PageTemplates';\nexport { StyledPageLayout } from './PageTemplates';\nexport { StyledPageHeader } from './PageTemplates';\nexport { default as DashboardPage } from './DashboardPage';\nexport { DashboardPageProps } from './DashboardPage';\nexport { default as CategorySubPage } from './CategorySubPage';\nexport { TabbedPageProps } from './PageTemplates';\nexport { PageTemplateProps } from './PageTemplates';\nexport { StyledRegion } from './PageTemplates';\n"]}

package/lib/components/Pagination/Pagination.d.ts

@@ -1,6 +1,6 @@
 import { FunctionComponent } from 'react';
-import { BaseProps, ForwardProps } from '../../types';
-export interface PaginationProps extends BaseProps {
+import type { BaseProps, ForwardProps, NoChildrenProp } from '../../types';
+export interface PaginationProps extends BaseProps, NoChildrenProp {
     /** Total number of items. */
     total: number;
     /**

package/lib/components/Pagination/Pagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/Pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAe,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAMtD,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sCAAsC;IACtC,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AAOD,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CA4DjE,CAAC;AAIF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/Pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAe,MAAM,OAAO,CAAC;AAEvD,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAU3E,MAAM,WAAW,eAAgB,SAAQ,SAAS,EAAE,cAAc;IAChE,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sCAAsC;IACtC,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AAOD,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CA4DjE,CAAC;AAIF,eAAe,UAAU,CAAC"}

package/lib/components/Pagination/Pagination.js

@@ -1,9 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from 'react';
 import { useDirection, useI18n } from '../../hooks';
-import Icon from '../Icon';
+import Icon, { registerIcon } from '../Icon';
+import * as caretLeftIcon from '../Icon/icons/caret-left.icon';
+import * as caretRightIcon from '../Icon/icons/caret-right.icon';
 import Button from '../Button';
 import Flex from '../Flex';
+registerIcon(caretLeftIcon, caretRightIcon);
 const defaultProps = {
     pageNumber: 1,
     pageSize: 10
@@ -23,13 +26,11 @@ const Pagination = (props) => {
             onPageChange(currentValue);
     }, [onPageChange]);
     const { start, end } = useDirection();
-    return (_jsxs(Flex, Object.assign({ container: {
+    return (_jsxs(Flex, { container: {
             gap: 1
-        }, "aria-label": t('pagination_page_of', pageNumber, pageCount).toString(), role: 'tablist', total: total }, restProps, { children: [_jsx(Flex, Object.assign({ container: { alignItems: 'center' }, "aria-hidden": 'true' }, { children: t('pagination_page_of', pageNumber, pageCount) }), void 0),
-            _jsxs(Flex, Object.assign({ container: {
+        }, "aria-label": t('pagination_page_of', [pageNumber, pageCount]), role: 'tablist', total: total, ...restProps, children: [_jsx(Flex, { container: { alignItems: 'center' }, "aria-hidden": 'true', children: t('pagination_page_of', [pageNumber, pageCount]) }, void 0), _jsxs(Flex, { container: {
                     gap: 1
-                }, role: 'group' }, { children: [_jsx(Button, Object.assign({ variant: 'simple', label: t('pagination_prev'), disabled: pageNumber === 1, onClick: () => handlePageChange(pageNumber - 1), icon: true }, { children: _jsx(Icon, { name: `caret-${start}` }, void 0) }), void 0),
-                    _jsx(Button, Object.assign({ variant: 'simple', label: t('pagination_next'), disabled: pageNumber === pageCount, onClick: () => handlePageChange(pageNumber + 1), icon: true }, { children: _jsx(Icon, { name: `caret-${end}` }, void 0) }), void 0)] }), void 0)] }), void 0));
+                }, role: 'group', children: [_jsx(Button, { variant: 'simple', label: t('pagination_prev'), disabled: pageNumber === 1, onClick: () => handlePageChange(pageNumber - 1), icon: true, children: _jsx(Icon, { name: `caret-${start}` }, void 0) }, void 0), _jsx(Button, { variant: 'simple', label: t('pagination_next'), disabled: pageNumber === pageCount, onClick: () => handlePageChange(pageNumber + 1), icon: true, children: _jsx(Icon, { name: `caret-${end}` }, void 0) }, void 0)] }, void 0)] }, void 0));
 };
 Pagination.defaultProps = defaultProps;
 export default Pagination;

package/lib/components/Pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../../src/components/Pagination/Pagination.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,WAAW,EAAE,MAAM,OAAO,CAAC;AAGvD,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,MAAM,SAAS,CAAC;AAmB3B,MAAM,YAAY,GAA6B;IAC7C,UAAU,EAAE,CAAC;IACb,QAAQ,EAAE,EAAE;CACb,CAAC;AAEF,MAAM,UAAU,GAAsD,CAAC,KAAsB,EAAE,EAAE;IAC/F,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACpD,IAAI,EAAE,QAAQ,GAAG,EAAE,EAAE,UAAU,GAAG,CAAC,EAAE,GAAG,KAAK,CAAC;IAE9C,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC;IACjC,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,CAAC;IAC9C,IAAI,UAAU,GAAG,CAAC;QAAE,UAAU,GAAG,CAAC,CAAC;IACnC,IAAI,UAAU,GAAG,SAAS;QAAE,UAAU,GAAG,SAAS,CAAC;IAEnD,MAAM,gBAAgB,GAAG,WAAW,CAClC,CAAC,YAAoB,EAAE,EAAE;QACvB,IAAI,YAAY;YAAE,YAAY,CAAC,YAAY,CAAC,CAAC;IAC/C,CAAC,EACD,CAAC,YAAY,CAAC,CACf,CAAC;IAEF,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAEtC,OAAO,CACL,MAAC,IAAI,kBACH,SAAS,EAAE;YACT,GAAG,EAAE,CAAC;SACP,gBACW,CAAC,CAAC,oBAAoB,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC,QAAQ,EAAE,EACrE,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,KAAK,IACR,SAAS,eAEb,KAAC,IAAI,kBAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,iBAAc,MAAM,gBAC1D,CAAC,CAAC,oBAAoB,EAAE,UAAU,EAAE,SAAS,CAAC,YAC1C;YACP,MAAC,IAAI,kBACH,SAAS,EAAE;oBACT,GAAG,EAAE,CAAC;iBACP,EACD,IAAI,EAAC,OAAO,iBAEZ,KAAC,MAAM,kBACL,OAAO,EAAC,QAAQ,EAChB,KAAK,EAAE,CAAC,CAAC,iBAAiB,CAAC,EAC3B,QAAQ,EAAE,UAAU,KAAK,CAAC,EAC1B,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,UAAU,GAAG,CAAC,CAAC,EAC/C,IAAI,sBAEJ,KAAC,IAAI,IAAC,IAAI,EAAE,SAAS,KAAK,EAAE,WAAI,YACzB;oBACT,KAAC,MAAM,kBACL,OAAO,EAAC,QAAQ,EAChB,KAAK,EAAE,CAAC,CAAC,iBAAiB,CAAC,EAC3B,QAAQ,EAAE,UAAU,KAAK,SAAS,EAClC,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,UAAU,GAAG,CAAC,CAAC,EAC/C,IAAI,sBAEJ,KAAC,IAAI,IAAC,IAAI,EAAE,SAAS,GAAG,EAAE,WAAI,YACvB,aACJ,aACF,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,UAAU,CAAC,YAAY,GAAG,YAAY,CAAC;AAEvC,eAAe,UAAU,CAAC","sourcesContent":["import { FunctionComponent, useCallback } from 'react';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport { useDirection, useI18n } from '../../hooks';\nimport Icon from '../Icon';\nimport Button from '../Button';\nimport Flex from '../Flex';\n\nexport interface PaginationProps extends BaseProps {\n  /** Total number of items. */\n  total: number;\n  /**\n   * Size of each page.\n   * @default 10\n   */\n  pageSize?: number;\n  /**\n   * Current page number.\n   * @default 1\n   */\n  pageNumber?: number;\n  /** Function to handle page change. */\n  onPageChange?: (pageNumber: number) => void;\n}\n\nconst defaultProps: Partial<PaginationProps> = {\n  pageNumber: 1,\n  pageSize: 10\n};\n\nconst Pagination: FunctionComponent<PaginationProps & ForwardProps> = (props: PaginationProps) => {\n  const { total, onPageChange, ...restProps } = props;\n  let { pageSize = 10, pageNumber = 1 } = props;\n\n  const t = useI18n();\n\n  pageSize = Math.max(1, pageSize);\n  const pageCount = Math.ceil(total / pageSize);\n  if (pageNumber < 1) pageNumber = 1;\n  if (pageNumber > pageCount) pageNumber = pageCount;\n\n  const handlePageChange = useCallback(\n    (currentValue: number) => {\n      if (onPageChange) onPageChange(currentValue);\n    },\n    [onPageChange]\n  );\n\n  const { start, end } = useDirection();\n\n  return (\n    <Flex\n      container={{\n        gap: 1\n      }}\n      aria-label={t('pagination_page_of', pageNumber, pageCount).toString()}\n      role='tablist'\n      total={total}\n      {...restProps}\n    >\n      <Flex container={{ alignItems: 'center' }} aria-hidden='true'>\n        {t('pagination_page_of', pageNumber, pageCount)}\n      </Flex>\n      <Flex\n        container={{\n          gap: 1\n        }}\n        role='group'\n      >\n        <Button\n          variant='simple'\n          label={t('pagination_prev')}\n          disabled={pageNumber === 1}\n          onClick={() => handlePageChange(pageNumber - 1)}\n          icon\n        >\n          <Icon name={`caret-${start}`} />\n        </Button>\n        <Button\n          variant='simple'\n          label={t('pagination_next')}\n          disabled={pageNumber === pageCount}\n          onClick={() => handlePageChange(pageNumber + 1)}\n          icon\n        >\n          <Icon name={`caret-${end}`} />\n        </Button>\n      </Flex>\n    </Flex>\n  );\n};\n\nPagination.defaultProps = defaultProps;\n\nexport default Pagination;\n"]}
+{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../../src/components/Pagination/Pagination.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,WAAW,EAAE,MAAM,OAAO,CAAC;AAGvD,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,aAAa,MAAM,+BAA+B,CAAC;AAC/D,OAAO,KAAK,cAAc,MAAM,gCAAgC,CAAC;AACjE,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,YAAY,CAAC,aAAa,EAAE,cAAc,CAAC,CAAC;AAmB5C,MAAM,YAAY,GAA6B;IAC7C,UAAU,EAAE,CAAC;IACb,QAAQ,EAAE,EAAE;CACb,CAAC;AAEF,MAAM,UAAU,GAAsD,CAAC,KAAsB,EAAE,EAAE;IAC/F,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACpD,IAAI,EAAE,QAAQ,GAAG,EAAE,EAAE,UAAU,GAAG,CAAC,EAAE,GAAG,KAAK,CAAC;IAE9C,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC;IACjC,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,CAAC;IAC9C,IAAI,UAAU,GAAG,CAAC;QAAE,UAAU,GAAG,CAAC,CAAC;IACnC,IAAI,UAAU,GAAG,SAAS;QAAE,UAAU,GAAG,SAAS,CAAC;IAEnD,MAAM,gBAAgB,GAAG,WAAW,CAClC,CAAC,YAAoB,EAAE,EAAE;QACvB,IAAI,YAAY;YAAE,YAAY,CAAC,YAAY,CAAC,CAAC;IAC/C,CAAC,EACD,CAAC,YAAY,CAAC,CACf,CAAC;IAEF,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAEtC,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE;YACT,GAAG,EAAE,CAAC;SACP,gBACW,CAAC,CAAC,oBAAoB,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,EAC5D,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,KAAK,KACR,SAAS,aAEb,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,iBAAc,MAAM,YAC1D,CAAC,CAAC,oBAAoB,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,WAC5C,EACP,MAAC,IAAI,IACH,SAAS,EAAE;oBACT,GAAG,EAAE,CAAC;iBACP,EACD,IAAI,EAAC,OAAO,aAEZ,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,KAAK,EAAE,CAAC,CAAC,iBAAiB,CAAC,EAC3B,QAAQ,EAAE,UAAU,KAAK,CAAC,EAC1B,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,UAAU,GAAG,CAAC,CAAC,EAC/C,IAAI,kBAEJ,KAAC,IAAI,IAAC,IAAI,EAAE,SAAS,KAAK,EAAE,WAAI,WACzB,EACT,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,KAAK,EAAE,CAAC,CAAC,iBAAiB,CAAC,EAC3B,QAAQ,EAAE,UAAU,KAAK,SAAS,EAClC,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,UAAU,GAAG,CAAC,CAAC,EAC/C,IAAI,kBAEJ,KAAC,IAAI,IAAC,IAAI,EAAE,SAAS,GAAG,EAAE,WAAI,WACvB,YACJ,YACF,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,UAAU,CAAC,YAAY,GAAG,YAAY,CAAC;AAEvC,eAAe,UAAU,CAAC","sourcesContent":["import { FunctionComponent, useCallback } from 'react';\n\nimport type { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { useDirection, useI18n } from '../../hooks';\nimport Icon, { registerIcon } from '../Icon';\nimport * as caretLeftIcon from '../Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport Button from '../Button';\nimport Flex from '../Flex';\n\nregisterIcon(caretLeftIcon, caretRightIcon);\n\nexport interface PaginationProps extends BaseProps, NoChildrenProp {\n  /** Total number of items. */\n  total: number;\n  /**\n   * Size of each page.\n   * @default 10\n   */\n  pageSize?: number;\n  /**\n   * Current page number.\n   * @default 1\n   */\n  pageNumber?: number;\n  /** Function to handle page change. */\n  onPageChange?: (pageNumber: number) => void;\n}\n\nconst defaultProps: Partial<PaginationProps> = {\n  pageNumber: 1,\n  pageSize: 10\n};\n\nconst Pagination: FunctionComponent<PaginationProps & ForwardProps> = (props: PaginationProps) => {\n  const { total, onPageChange, ...restProps } = props;\n  let { pageSize = 10, pageNumber = 1 } = props;\n\n  const t = useI18n();\n\n  pageSize = Math.max(1, pageSize);\n  const pageCount = Math.ceil(total / pageSize);\n  if (pageNumber < 1) pageNumber = 1;\n  if (pageNumber > pageCount) pageNumber = pageCount;\n\n  const handlePageChange = useCallback(\n    (currentValue: number) => {\n      if (onPageChange) onPageChange(currentValue);\n    },\n    [onPageChange]\n  );\n\n  const { start, end } = useDirection();\n\n  return (\n    <Flex\n      container={{\n        gap: 1\n      }}\n      aria-label={t('pagination_page_of', [pageNumber, pageCount])}\n      role='tablist'\n      total={total}\n      {...restProps}\n    >\n      <Flex container={{ alignItems: 'center' }} aria-hidden='true'>\n        {t('pagination_page_of', [pageNumber, pageCount])}\n      </Flex>\n      <Flex\n        container={{\n          gap: 1\n        }}\n        role='group'\n      >\n        <Button\n          variant='simple'\n          label={t('pagination_prev')}\n          disabled={pageNumber === 1}\n          onClick={() => handlePageChange(pageNumber - 1)}\n          icon\n        >\n          <Icon name={`caret-${start}`} />\n        </Button>\n        <Button\n          variant='simple'\n          label={t('pagination_next')}\n          disabled={pageNumber === pageCount}\n          onClick={() => handlePageChange(pageNumber + 1)}\n          icon\n        >\n          <Icon name={`caret-${end}`} />\n        </Button>\n      </Flex>\n    </Flex>\n  );\n};\n\nPagination.defaultProps = defaultProps;\n\nexport default Pagination;\n"]}

package/lib/components/Paragraph/ParagraphDisplay.d.ts

@@ -0,0 +1,11 @@
+import { FunctionComponent, Ref } from 'react';
+import { BaseProps, ForwardProps } from '../../types';
+export interface ParagraphDisplayProps extends BaseProps {
+    /** Paragraph text */
+    value?: string;
+    /** Ref for the wrapping element. */
+    ref?: Ref<HTMLParagraphElement>;
+}
+declare const ParagraphDisplay: FunctionComponent<ParagraphDisplayProps & ForwardProps>;
+export default ParagraphDisplay;
+//# sourceMappingURL=ParagraphDisplay.d.ts.map

package/lib/components/Paragraph/ParagraphDisplay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ParagraphDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/Paragraph/ParagraphDisplay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEtD,MAAM,WAAW,qBAAsB,SAAQ,SAAS;IACtD,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,oBAAoB,CAAC,CAAC;CACjC;AAMD,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CAW7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/components/Paragraph/ParagraphDisplay.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+const StyledParagraphDisplay = styled.p `
+  white-space: break-spaces;
+`;
+const ParagraphDisplay = forwardRef(({ value, ...restProps }, ref) => {
+    return (_jsx(StyledParagraphDisplay, { ref: ref, ...restProps, children: value !== undefined ? value : _jsx("span", { "aria-hidden": 'true', children: "\u2013\u2013" }, void 0) }, void 0));
+});
+export default ParagraphDisplay;
+//# sourceMappingURL=ParagraphDisplay.js.map

package/lib/components/Paragraph/ParagraphDisplay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ParagraphDisplay.js","sourceRoot":"","sources":["../../../src/components/Paragraph/ParagraphDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAWvC,MAAM,sBAAsB,GAAG,MAAM,CAAC,CAAC,CAAA;;CAEtC,CAAC;AAEF,MAAM,gBAAgB,GAA4D,UAAU,CAC1F,CACE,EAAE,KAAK,EAAE,GAAG,SAAS,EAA0C,EAC/D,GAAiC,EACjC,EAAE;IACF,OAAO,CACL,KAAC,sBAAsB,IAAC,GAAG,EAAE,GAAG,KAAM,SAAS,YAC5C,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,8BAAkB,MAAM,qCAAsB,WACtD,CAC1B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled from 'styled-components';\n\nimport { BaseProps, ForwardProps } from '../../types';\n\nexport interface ParagraphDisplayProps extends BaseProps {\n  /** Paragraph text */\n  value?: string;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLParagraphElement>;\n}\n\nconst StyledParagraphDisplay = styled.p`\n  white-space: break-spaces;\n`;\n\nconst ParagraphDisplay: FunctionComponent<ParagraphDisplayProps & ForwardProps> = forwardRef(\n  (\n    { value, ...restProps }: PropsWithoutRef<ParagraphDisplayProps>,\n    ref: ParagraphDisplayProps['ref']\n  ) => {\n    return (\n      <StyledParagraphDisplay ref={ref} {...restProps}>\n        {value !== undefined ? value : <span aria-hidden='true'>&ndash;&ndash;</span>}\n      </StyledParagraphDisplay>\n    );\n  }\n);\n\nexport default ParagraphDisplay;\n"]}

package/lib/components/Paragraph/index.d.ts

@@ -0,0 +1,3 @@
+export { default as ParagraphDisplay } from './ParagraphDisplay';
+export { ParagraphDisplayProps } from './ParagraphDisplay';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/Paragraph/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Paragraph/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC"}

package/lib/components/Paragraph/index.js

@@ -0,0 +1,2 @@
+export { default as ParagraphDisplay } from './ParagraphDisplay';
+//# sourceMappingURL=index.js.map

package/lib/components/Paragraph/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Paragraph/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC","sourcesContent":["export { default as ParagraphDisplay } from './ParagraphDisplay';\nexport { ParagraphDisplayProps } from './ParagraphDisplay';\n"]}

package/lib/components/Phone/PhoneDisplay.d.ts

@@ -1,6 +1,6 @@
 import { FunctionComponent, Ref } from 'react';
-import { BaseProps, ForwardProps } from '../../types';
-export interface PhoneDisplayProps extends BaseProps {
+import type { BaseProps, ForwardProps, NoChildrenProp } from '../../types';
+export interface PhoneDisplayProps extends BaseProps, NoChildrenProp {
     /** Phone number, no 'tel:' scheme, '+18887342669' */
     value?: string;
     /** The text to be displayed. */

package/lib/components/Phone/PhoneDisplay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/Phone/PhoneDisplay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGtD,MAAM,WAAW,iBAAkB,SAAQ,SAAS;IAClD,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,GAAG,eAAe,CAAC,CAAC;CAChD;AAED,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAqBrE,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"PhoneDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/Phone/PhoneDisplay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAG3E,MAAM,WAAW,iBAAkB,SAAQ,SAAS,EAAE,cAAc;IAClE,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,GAAG,eAAe,CAAC,CAAC;CAChD;AAED,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAqBrE,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Phone/PhoneDisplay.js

@@ -3,9 +3,8 @@ import { forwardRef } from 'react';
 import parsePhoneNumber from 'libphonenumber-js';
 import Link from '../Link';
 const PhoneDisplay = forwardRef(({ value, displayText, variant = 'link', ...restProps }, ref) => {
-    var _a;
-    const displayValue = value ? (displayText || ((_a = parsePhoneNumber(value || '')) === null || _a === void 0 ? void 0 : _a.formatInternational()) || value) : (_jsx("span", Object.assign({ "aria-hidden": 'true' }, { children: "\u2013\u2013" }), void 0));
-    return variant === 'text' || !value ? (_jsx("span", Object.assign({ ref: ref }, restProps, { children: displayValue }), void 0)) : (_jsx(Link, Object.assign({ ref: ref }, restProps, { href: `tel:${value}` }, { children: displayValue }), void 0));
+    const displayValue = value ? (displayText || parsePhoneNumber(value || '')?.formatInternational() || value) : (_jsx("span", { "aria-hidden": 'true', children: "\u2013\u2013" }, void 0));
+    return variant === 'text' || !value ? (_jsx("span", { ref: ref, ...restProps, children: displayValue }, void 0)) : (_jsx(Link, { ref: ref, ...restProps, href: `tel:${value}`, children: displayValue }, void 0));
 });
 export default PhoneDisplay;
 //# sourceMappingURL=PhoneDisplay.js.map

package/lib/components/Phone/PhoneDisplay.js.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneDisplay.js","sourceRoot":"","sources":["../../../src/components/Phone/PhoneDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,gBAAgB,MAAM,mBAAmB,CAAC;AAGjD,OAAO,IAAI,MAAM,SAAS,CAAC;AAgB3B,MAAM,YAAY,GAAwD,UAAU,CAClF,CACE,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,GAAG,MAAM,EAAE,GAAG,SAAS,EAAsC,EAC1F,GAA6B,EAC7B,EAAE;;IACF,MAAM,YAAY,GAAG,KAAK,CAAC,CAAC,CAAC,CAC3B,WAAW,KAAI,MAAA,gBAAgB,CAAC,KAAK,IAAI,EAAE,CAAC,0CAAE,mBAAmB,EAAE,CAAA,IAAI,KAAK,CAC7E,CAAC,CAAC,CAAC,CACF,4CAAkB,MAAM,0CAAsB,CAC/C,CAAC;IAEF,OAAO,OAAO,KAAK,MAAM,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CACpC,6BAAM,GAAG,EAAE,GAA2B,IAAM,SAAS,cAClD,YAAY,YACR,CACR,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,kBAAC,GAAG,EAAE,GAA6B,IAAM,SAAS,IAAE,IAAI,EAAE,OAAO,KAAK,EAAE,gBAC1E,YAAY,YACR,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport parsePhoneNumber from 'libphonenumber-js';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport Link from '../Link';\n\nexport interface PhoneDisplayProps extends BaseProps {\n  /** Phone number, no 'tel:' scheme, '+18887342669' */\n  value?: string;\n  /** The text to be displayed. */\n  displayText?: string;\n  /**\n   * Controls styling of the field.\n   * @default \"link\"\n   */\n  variant?: 'link' | 'text';\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLAnchorElement | HTMLSpanElement>;\n}\n\nconst PhoneDisplay: FunctionComponent<PhoneDisplayProps & ForwardProps> = forwardRef(\n  (\n    { value, displayText, variant = 'link', ...restProps }: PropsWithoutRef<PhoneDisplayProps>,\n    ref: PhoneDisplayProps['ref']\n  ) => {\n    const displayValue = value ? (\n      displayText || parsePhoneNumber(value || '')?.formatInternational() || value\n    ) : (\n      <span aria-hidden='true'>&ndash;&ndash;</span>\n    );\n\n    return variant === 'text' || !value ? (\n      <span ref={ref as Ref<HTMLSpanElement>} {...restProps}>\n        {displayValue}\n      </span>\n    ) : (\n      <Link ref={ref as Ref<HTMLAnchorElement>} {...restProps} href={`tel:${value}`}>\n        {displayValue}\n      </Link>\n    );\n  }\n);\n\nexport default PhoneDisplay;\n"]}
+{"version":3,"file":"PhoneDisplay.js","sourceRoot":"","sources":["../../../src/components/Phone/PhoneDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,gBAAgB,MAAM,mBAAmB,CAAC;AAGjD,OAAO,IAAI,MAAM,SAAS,CAAC;AAgB3B,MAAM,YAAY,GAAwD,UAAU,CAClF,CACE,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,GAAG,MAAM,EAAE,GAAG,SAAS,EAAsC,EAC1F,GAA6B,EAC7B,EAAE;IACF,MAAM,YAAY,GAAG,KAAK,CAAC,CAAC,CAAC,CAC3B,WAAW,IAAI,gBAAgB,CAAC,KAAK,IAAI,EAAE,CAAC,EAAE,mBAAmB,EAAE,IAAI,KAAK,CAC7E,CAAC,CAAC,CAAC,CACF,8BAAkB,MAAM,qCAAsB,CAC/C,CAAC;IAEF,OAAO,OAAO,KAAK,MAAM,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CACpC,eAAM,GAAG,EAAE,GAA2B,KAAM,SAAS,YAClD,YAAY,WACR,CACR,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,GAAG,EAAE,GAA6B,KAAM,SAAS,EAAE,IAAI,EAAE,OAAO,KAAK,EAAE,YAC1E,YAAY,WACR,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport parsePhoneNumber from 'libphonenumber-js';\n\nimport type { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport Link from '../Link';\n\nexport interface PhoneDisplayProps extends BaseProps, NoChildrenProp {\n  /** Phone number, no 'tel:' scheme, '+18887342669' */\n  value?: string;\n  /** The text to be displayed. */\n  displayText?: string;\n  /**\n   * Controls styling of the field.\n   * @default \"link\"\n   */\n  variant?: 'link' | 'text';\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLAnchorElement | HTMLSpanElement>;\n}\n\nconst PhoneDisplay: FunctionComponent<PhoneDisplayProps & ForwardProps> = forwardRef(\n  (\n    { value, displayText, variant = 'link', ...restProps }: PropsWithoutRef<PhoneDisplayProps>,\n    ref: PhoneDisplayProps['ref']\n  ) => {\n    const displayValue = value ? (\n      displayText || parsePhoneNumber(value || '')?.formatInternational() || value\n    ) : (\n      <span aria-hidden='true'>&ndash;&ndash;</span>\n    );\n\n    return variant === 'text' || !value ? (\n      <span ref={ref as Ref<HTMLSpanElement>} {...restProps}>\n        {displayValue}\n      </span>\n    ) : (\n      <Link ref={ref as Ref<HTMLAnchorElement>} {...restProps} href={`tel:${value}`}>\n        {displayValue}\n      </Link>\n    );\n  }\n);\n\nexport default PhoneDisplay;\n"]}

package/lib/components/Phone/PhoneInput.d.ts

@@ -1,7 +1,7 @@
 import { FunctionComponent, Ref } from 'react';
-import { BaseProps, ForwardProps } from '../../types';
+import { BaseProps, ForwardProps, NoChildrenProp } from '../../types';
 import { FormControlProps } from '../FormControl';
-export interface PhoneInputProps extends FormControlProps, BaseProps {
+export interface PhoneInputProps extends FormControlProps, BaseProps, NoChildrenProp {
     /**
      * Display select with countries calling codes
      * @default false

package/lib/components/Phone/PhoneInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/components/Phone/PhoneInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAEjB,GAAG,EAKJ,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAqB,MAAM,aAAa,CAAC;AAEzE,OAAO,EAAE,gBAAgB,EAAqB,MAAM,gBAAgB,CAAC;AAgBrE,MAAM,WAAW,eAAgB,SAAQ,gBAAgB,EAAE,SAAS;IAClE;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,oDAAoD;IACpD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,oDAAoD;IACpD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAwBD,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAgIjE,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/components/Phone/PhoneInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAEjB,GAAG,EAKJ,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAqB,MAAM,aAAa,CAAC;AAEzF,OAAO,EAAE,gBAAgB,EAAqB,MAAM,gBAAgB,CAAC;AAerE,MAAM,WAAW,eAAgB,SAAQ,gBAAgB,EAAE,SAAS,EAAE,cAAc;IAClF;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,oDAAoD;IACpD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,oDAAoD;IACpD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAwBD,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAkIjE,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/Phone/PhoneInput.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
 import styled, { css } from 'styled-components';
+import { useAfterInitialEffect, useDirection, useFocusWithin } from '../../hooks';
 import { defaultThemeProp } from '../../theme';
 import FormField from '../FormField';
 import { StyledFormControl } from '../FormControl';
@@ -9,7 +10,6 @@ import Select, { Option } from '../Select';
 import Input from '../Input';
 import { StyledSelect } from '../Select/Select';
 import Flex from '../Flex';
-import { useDirection, useFocusWithin } from '../../hooks';
 import callingCodes from './callingCodes';
 import { calculateCursorPosition, convertToCallbackParameter, formatPhoneNumber, getPhoneNumberParts } from './utils';
 const StyledPhoneInput = styled.div(() => {
@@ -19,13 +19,13 @@ const StyledPhoneInput = styled.div(() => {
     > ${StyledSelect} {
       max-width: max-content;
       border-inline-end: none;
-      border-top-${end}-radius: 0;
-      border-bottom-${end}-radius: 0;
+      ${`border-top-${end}-radius`}: 0;
+      ${`border-bottom-${end}-radius`}: 0;
     }
 
     > ${StyledSelect} + ${StyledInput} {
-      border-top-${start}-radius: 0;
-      border-bottom-${start}-radius: 0;
+      ${`border-top-${start}-radius`}: 0;
+      ${`border-bottom-${start}-radius`}: 0;
     }
   `;
 });
@@ -35,21 +35,24 @@ const PhoneInput = forwardRef((props, ref) => {
     const phoneNumberParts = useMemo(() => {
         return value ? getPhoneNumberParts(value, callingCodesList) : undefined;
     }, [callingCodesList, value]);
-    const [countryCode, setCountryCode] = useState(phoneNumberParts === null || phoneNumberParts === void 0 ? void 0 : phoneNumberParts[0]);
+    const [countryCode, setCountryCode] = useState(showCountryCode ? phoneNumberParts?.[0] || callingCodesList[0] : phoneNumberParts?.[0]);
     const [phoneNumber, setPhoneNumber] = useState(phoneNumberParts ? formatPhoneNumber(phoneNumberParts[1], countryCode) : '');
+    useAfterInitialEffect(() => {
+        setCountryCode(phoneNumberParts?.[0]);
+        setPhoneNumber(phoneNumberParts ? formatPhoneNumber(phoneNumberParts[1], countryCode) : '');
+    }, [phoneNumberParts]);
     const [cursor, setCursor] = useState(undefined);
     const inputRef = useRef(null);
     useEffect(() => {
-        var _a;
         if (cursor !== undefined)
-            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(cursor, cursor);
+            inputRef.current?.setSelectionRange(cursor, cursor);
     }, [cursor, inputRef.current]);
     const onFocusChange = (focused) => {
         const callbackParam = convertToCallbackParameter(countryCode, phoneNumber);
         if (focused)
-            onFocus === null || onFocus === void 0 ? void 0 : onFocus(callbackParam);
+            onFocus?.(callbackParam);
         else
-            onBlur === null || onBlur === void 0 ? void 0 : onBlur(callbackParam);
+            onBlur?.(callbackParam);
     };
     const containerRef = useRef(null);
     useFocusWithin([containerRef], onFocusChange);
@@ -61,19 +64,17 @@ const PhoneInput = forwardRef((props, ref) => {
         if (countryCode) {
             setCursor(calculateCursorPosition(formatted, phoneNumber, countryCode, selectionStart));
         }
-        onChange === null || onChange === void 0 ? void 0 : onChange(convertToCallbackParameter(countryCode, formatted));
+        onChange?.(convertToCallbackParameter(countryCode, formatted));
     };
     const onSelectChange = (e) => {
         const selectValue = e.target.value;
         setCountryCode(selectValue);
         setPhoneNumber(formatPhoneNumber(phoneNumber, selectValue));
-        onChange === null || onChange === void 0 ? void 0 : onChange(convertToCallbackParameter(selectValue, phoneNumber));
+        onChange?.(convertToCallbackParameter(selectValue, phoneNumber));
     };
-    const codesOptions = (_jsxs(_Fragment, { children: [!countryCode && (_jsx(Option, Object.assign({ value: '' }, { children: ' ' }), 'none')),
-            callingCodesList.map(code => (_jsx(Option, Object.assign({ value: code }, { children: code }), code)))] }, void 0));
-    const Comp = (_jsxs(StyledPhoneInput, Object.assign({ as: StyledFormControl, forwardedAs: Flex, container: { alignItems: 'center', wrap: 'nowrap' }, ref: containerRef, status: status, readOnly: readOnly, disabled: disabled }, { children: [showCountryCode && (_jsx(Select, Object.assign({ value: countryCode, onChange: onSelectChange, required: required, status: status, readOnly: readOnly, disabled: disabled }, { children: codesOptions }), void 0)),
-            _jsx(Input, Object.assign({}, restProps, { inputMode: 'tel', ref: inputRef, value: phoneNumber, onChange: onInputChange, required: required, status: status, readOnly: readOnly, disabled: disabled }), void 0)] }), void 0));
-    return label ? (_jsx(FormField, Object.assign({ as: 'fieldset', labelAs: 'legend' }, { label, labelHidden, id, info, ref, status, required, disabled }, { children: Comp }), void 0)) : (Comp);
+    const codesOptions = (_jsx(_Fragment, { children: callingCodesList.map(code => (_jsx(Option, { value: code, children: code }, code))) }, void 0));
+    const Comp = (_jsxs(StyledPhoneInput, { as: StyledFormControl, forwardedAs: Flex, container: { alignItems: 'center', wrap: 'nowrap' }, ref: containerRef, status: status, readOnly: readOnly, disabled: disabled, children: [showCountryCode && (_jsx(Select, { value: countryCode, onChange: onSelectChange, required: required, status: status, readOnly: readOnly, disabled: disabled, children: codesOptions }, void 0)), _jsx(Input, { ...restProps, inputMode: 'tel', ref: inputRef, value: phoneNumber, onChange: onInputChange, required: required, status: status, readOnly: readOnly, disabled: disabled }, void 0)] }, void 0));
+    return label ? (_jsx(FormField, { as: 'fieldset', labelAs: 'legend', ...{ label, labelHidden, id, info, ref, status, required, disabled }, children: Comp }, void 0)) : (Comp);
 });
 export default PhoneInput;
 //# sourceMappingURL=PhoneInput.js.map

package/lib/components/Phone/PhoneInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneInput.js","sourceRoot":"","sources":["../../../src/components/Phone/PhoneInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeEvent,\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  useEffect,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps, PropsWithDefaults } from '../../types';\nimport FormField from '../FormField';\nimport { FormControlProps, StyledFormControl } from '../FormControl';\nimport StyledInput from '../Input/Input.styles';\nimport Select, { Option } from '../Select';\nimport Input from '../Input';\nimport { StyledSelect } from '../Select/Select';\nimport Flex from '../Flex';\nimport { useDirection, useFocusWithin } from '../../hooks';\n\nimport callingCodes from './callingCodes';\nimport {\n  calculateCursorPosition,\n  convertToCallbackParameter,\n  formatPhoneNumber,\n  getPhoneNumberParts\n} from './utils';\n\nexport interface PhoneInputProps extends FormControlProps, BaseProps {\n  /**\n   * Display select with countries calling codes\n   * @default false\n   */\n  showCountryCode?: boolean;\n  /** Changes lists of countries calling codes */\n  callingCodesList?: string[];\n  /** Callback fired on input value change */\n  onChange?: (value: string) => void;\n  /** Callback fired when the component loses focus */\n  onBlur?: (value: string) => void;\n  /** CCallback fired when the component gets focus */\n  onFocus?: (value: string) => void;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\ntype PhoneInputPropsWithDefaults = PropsWithDefaults<PhoneInputProps>;\n\nconst StyledPhoneInput = styled.div<PhoneInputPropsWithDefaults>(() => {\n  const { start, end } = useDirection();\n  return css`\n    border: 0;\n    > ${StyledSelect} {\n      max-width: max-content;\n      border-inline-end: none;\n      border-top-${end}-radius: 0;\n      border-bottom-${end}-radius: 0;\n    }\n\n    > ${StyledSelect} + ${StyledInput} {\n      border-top-${start}-radius: 0;\n      border-bottom-${start}-radius: 0;\n    }\n  `;\n});\n\nStyledPhoneInput.defaultProps = defaultThemeProp;\n\nconst PhoneInput: FunctionComponent<PhoneInputProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<PhoneInputProps>, ref: PhoneInputProps['ref']) => {\n    const {\n      defaultValue,\n      value = defaultValue,\n      id,\n      label,\n      labelHidden,\n      info,\n      status,\n      required,\n      readOnly,\n      disabled,\n      showCountryCode = false,\n      callingCodesList = callingCodes,\n      onChange,\n      onBlur,\n      onFocus,\n      ...restProps\n    } = props;\n\n    const phoneNumberParts = useMemo(() => {\n      return value ? getPhoneNumberParts(value, callingCodesList) : undefined;\n    }, [callingCodesList, value]);\n\n    const [countryCode, setCountryCode] = useState(phoneNumberParts?.[0]);\n\n    const [phoneNumber, setPhoneNumber] = useState(\n      phoneNumberParts ? formatPhoneNumber(phoneNumberParts[1], countryCode) : ''\n    );\n\n    const [cursor, setCursor] = useState<number | undefined>(undefined);\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    useEffect(() => {\n      if (cursor !== undefined) inputRef.current?.setSelectionRange(cursor, cursor);\n    }, [cursor, inputRef.current]);\n\n    const onFocusChange = (focused: boolean) => {\n      const callbackParam = convertToCallbackParameter(countryCode, phoneNumber);\n      if (focused) onFocus?.(callbackParam);\n      else onBlur?.(callbackParam);\n    };\n\n    const containerRef = useRef<HTMLElement>(null);\n    useFocusWithin([containerRef], onFocusChange);\n\n    const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n      const inputValue = e.target.value;\n      const selectionStart = e.target.selectionStart;\n      const formatted = formatPhoneNumber(inputValue, countryCode);\n      setPhoneNumber(formatted);\n      if (countryCode) {\n        setCursor(calculateCursorPosition(formatted, phoneNumber, countryCode, selectionStart));\n      }\n      onChange?.(convertToCallbackParameter(countryCode, formatted));\n    };\n\n    const onSelectChange = (e: ChangeEvent<HTMLSelectElement>) => {\n      const selectValue = e.target.value;\n      setCountryCode(selectValue);\n      setPhoneNumber(formatPhoneNumber(phoneNumber, selectValue));\n      onChange?.(convertToCallbackParameter(selectValue, phoneNumber));\n    };\n\n    const codesOptions = (\n      <>\n        {!countryCode && (\n          <Option key='none' value=''>\n            {' '}\n          </Option>\n        )}\n        {callingCodesList.map(code => (\n          <Option key={code} value={code}>\n            {code}\n          </Option>\n        ))}\n      </>\n    );\n\n    const Comp = (\n      <StyledPhoneInput\n        as={StyledFormControl}\n        forwardedAs={Flex as any}\n        container={{ alignItems: 'center', wrap: 'nowrap' }}\n        ref={containerRef}\n        status={status}\n        readOnly={readOnly}\n        disabled={disabled}\n      >\n        {showCountryCode && (\n          <Select\n            value={countryCode}\n            onChange={onSelectChange}\n            required={required}\n            status={status}\n            readOnly={readOnly}\n            disabled={disabled}\n          >\n            {codesOptions}\n          </Select>\n        )}\n        <Input\n          {...restProps}\n          inputMode='tel'\n          ref={inputRef}\n          value={phoneNumber}\n          onChange={onInputChange}\n          required={required}\n          status={status}\n          readOnly={readOnly}\n          disabled={disabled}\n        />\n      </StyledPhoneInput>\n    );\n\n    return label ? (\n      <FormField\n        as='fieldset'\n        labelAs='legend'\n        {...{ label, labelHidden, id, info, ref, status, required, disabled }}\n      >\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default PhoneInput;\n"]}
+{"version":3,"file":"PhoneInput.js","sourceRoot":"","sources":["../../../src/components/Phone/PhoneInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeEvent,\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  useEffect,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useAfterInitialEffect, useDirection, useFocusWithin } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps, NoChildrenProp, PropsWithDefaults } from '../../types';\nimport FormField from '../FormField';\nimport { FormControlProps, StyledFormControl } from '../FormControl';\nimport StyledInput from '../Input/Input.styles';\nimport Select, { Option } from '../Select';\nimport Input from '../Input';\nimport { StyledSelect } from '../Select/Select';\nimport Flex from '../Flex';\n\nimport callingCodes from './callingCodes';\nimport {\n  calculateCursorPosition,\n  convertToCallbackParameter,\n  formatPhoneNumber,\n  getPhoneNumberParts\n} from './utils';\n\nexport interface PhoneInputProps extends FormControlProps, BaseProps, NoChildrenProp {\n  /**\n   * Display select with countries calling codes\n   * @default false\n   */\n  showCountryCode?: boolean;\n  /** Changes lists of countries calling codes */\n  callingCodesList?: string[];\n  /** Callback fired on input value change */\n  onChange?: (value: string) => void;\n  /** Callback fired when the component loses focus */\n  onBlur?: (value: string) => void;\n  /** CCallback fired when the component gets focus */\n  onFocus?: (value: string) => void;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\ntype PhoneInputPropsWithDefaults = PropsWithDefaults<PhoneInputProps>;\n\nconst StyledPhoneInput = styled.div<PhoneInputPropsWithDefaults>(() => {\n  const { start, end } = useDirection();\n  return css`\n    border: 0;\n    > ${StyledSelect} {\n      max-width: max-content;\n      border-inline-end: none;\n      ${`border-top-${end}-radius`}: 0;\n      ${`border-bottom-${end}-radius`}: 0;\n    }\n\n    > ${StyledSelect} + ${StyledInput} {\n      ${`border-top-${start}-radius`}: 0;\n      ${`border-bottom-${start}-radius`}: 0;\n    }\n  `;\n});\n\nStyledPhoneInput.defaultProps = defaultThemeProp;\n\nconst PhoneInput: FunctionComponent<PhoneInputProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<PhoneInputProps>, ref: PhoneInputProps['ref']) => {\n    const {\n      defaultValue,\n      value = defaultValue,\n      id,\n      label,\n      labelHidden,\n      info,\n      status,\n      required,\n      readOnly,\n      disabled,\n      showCountryCode = false,\n      callingCodesList = callingCodes,\n      onChange,\n      onBlur,\n      onFocus,\n      ...restProps\n    } = props;\n\n    const phoneNumberParts = useMemo(() => {\n      return value ? getPhoneNumberParts(value, callingCodesList) : undefined;\n    }, [callingCodesList, value]);\n\n    const [countryCode, setCountryCode] = useState(\n      showCountryCode ? phoneNumberParts?.[0] || callingCodesList[0] : phoneNumberParts?.[0]\n    );\n\n    const [phoneNumber, setPhoneNumber] = useState(\n      phoneNumberParts ? formatPhoneNumber(phoneNumberParts[1], countryCode) : ''\n    );\n\n    useAfterInitialEffect(() => {\n      setCountryCode(phoneNumberParts?.[0]);\n      setPhoneNumber(phoneNumberParts ? formatPhoneNumber(phoneNumberParts[1], countryCode) : '');\n    }, [phoneNumberParts]);\n\n    const [cursor, setCursor] = useState<number | undefined>(undefined);\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    useEffect(() => {\n      if (cursor !== undefined) inputRef.current?.setSelectionRange(cursor, cursor);\n    }, [cursor, inputRef.current]);\n\n    const onFocusChange = (focused: boolean) => {\n      const callbackParam = convertToCallbackParameter(countryCode, phoneNumber);\n      if (focused) onFocus?.(callbackParam);\n      else onBlur?.(callbackParam);\n    };\n\n    const containerRef = useRef<HTMLElement>(null);\n    useFocusWithin([containerRef], onFocusChange);\n\n    const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n      const inputValue = e.target.value;\n      const selectionStart = e.target.selectionStart;\n      const formatted = formatPhoneNumber(inputValue, countryCode);\n      setPhoneNumber(formatted);\n      if (countryCode) {\n        setCursor(calculateCursorPosition(formatted, phoneNumber, countryCode, selectionStart));\n      }\n      onChange?.(convertToCallbackParameter(countryCode, formatted));\n    };\n\n    const onSelectChange = (e: ChangeEvent<HTMLSelectElement>) => {\n      const selectValue = e.target.value;\n      setCountryCode(selectValue);\n      setPhoneNumber(formatPhoneNumber(phoneNumber, selectValue));\n      onChange?.(convertToCallbackParameter(selectValue, phoneNumber));\n    };\n\n    const codesOptions = (\n      <>\n        {callingCodesList.map(code => (\n          <Option key={code} value={code}>\n            {code}\n          </Option>\n        ))}\n      </>\n    );\n\n    const Comp = (\n      <StyledPhoneInput\n        as={StyledFormControl}\n        forwardedAs={Flex as any}\n        container={{ alignItems: 'center', wrap: 'nowrap' }}\n        ref={containerRef}\n        status={status}\n        readOnly={readOnly}\n        disabled={disabled}\n      >\n        {showCountryCode && (\n          <Select\n            value={countryCode}\n            onChange={onSelectChange}\n            required={required}\n            status={status}\n            readOnly={readOnly}\n            disabled={disabled}\n          >\n            {codesOptions}\n          </Select>\n        )}\n        <Input\n          {...restProps}\n          inputMode='tel'\n          ref={inputRef}\n          value={phoneNumber}\n          onChange={onInputChange}\n          required={required}\n          status={status}\n          readOnly={readOnly}\n          disabled={disabled}\n        />\n      </StyledPhoneInput>\n    );\n\n    return label ? (\n      <FormField\n        as='fieldset'\n        labelAs='legend'\n        {...{ label, labelHidden, id, info, ref, status, required, disabled }}\n      >\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default PhoneInput;\n"]}

package/lib/components/Phone/utils.js

@@ -3,17 +3,16 @@ export const getPhoneNumberParts = (phoneNumber, codesList) => {
     if (!phoneNumber.startsWith('+') || phoneNumber.startsWith('+0'))
         return [undefined, phoneNumber];
     const countryCode = codesList.find(code => phoneNumber.startsWith(code));
-    const subscriberNumber = phoneNumber.substring((countryCode === null || countryCode === void 0 ? void 0 : countryCode.length) || 0);
+    const subscriberNumber = phoneNumber.substring(countryCode?.length || 0);
     return [countryCode, subscriberNumber];
 };
 export const cleanNumber = (phoneNumber) => {
     return phoneNumber.replace(/\D/g, '');
 };
 export const getCountry = (countryCode, number) => {
-    var _a;
     const asYouTypeCode = new AsYouType();
     asYouTypeCode.input(countryCode + number);
-    return countryCode === '+1' ? 'US' : (_a = asYouTypeCode.getNumber()) === null || _a === void 0 ? void 0 : _a.country;
+    return countryCode === '+1' ? 'US' : asYouTypeCode.getNumber()?.country;
 };
 export const formatPhoneNumber = (numberToFormat, countryCode = '') => {
     let formatted = cleanNumber(numberToFormat);

package/lib/components/Phone/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/Phone/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,2BAA2B,EAAE,MAAM,mBAAmB,CAAC;AAE3E,MAAM,CAAC,MAAM,mBAAmB,GAAG,CACjC,WAAmB,EACnB,SAAmB,EACW,EAAE;IAChC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,WAAW,CAAC,UAAU,CAAC,IAAI,CAAC;QAAE,OAAO,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;IAClG,MAAM,WAAW,GAAG,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC;IACzE,MAAM,gBAAgB,GAAG,WAAW,CAAC,SAAS,CAAC,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,MAAM,KAAI,CAAC,CAAC,CAAC;IACzE,OAAO,CAAC,WAAW,EAAE,gBAAgB,CAAC,CAAC;AACzC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,WAAmB,EAAE,EAAE;IACjD,OAAO,WAAW,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;AACxC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,WAAmB,EAAE,MAAc,EAAE,EAAE;;IAChE,MAAM,aAAa,GAAG,IAAI,SAAS,EAAE,CAAC;IACtC,aAAa,CAAC,KAAK,CAAC,WAAW,GAAG,MAAM,CAAC,CAAC;IAC1C,OAAO,WAAW,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAA,aAAa,CAAC,SAAS,EAAE,0CAAE,OAAO,CAAC;AAC1E,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,cAAsB,EAAE,cAAsB,EAAE,EAAE,EAAE;IACpF,IAAI,SAAS,GAAG,WAAW,CAAC,cAAc,CAAC,CAAC;IAC5C,IAAI,WAAW,EAAE;QACf,MAAM,OAAO,GAAG,UAAU,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;QACnD,SAAS,GAAG,2BAA2B,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;KAC7D;IACD,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,QAA4B,EAAE,UAAkB,EAAE,EAAE;IAC7F,OAAO,CAAC,QAAQ,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACtD,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,CACrC,QAAgB,EAChB,SAAiB,EACjB,WAAmB,EACnB,kBAAiC,EACjC,EAAE;IACF,IAAI,kBAAkB,KAAK,SAAS,IAAI,kBAAkB,KAAK,IAAI,EAAE;QACnE,MAAM,OAAO,GAAG,UAAU,CAAC,WAAW,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC;QAC/D,IAAI,YAAY,GAAG,WAAW,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,EAAE,kBAAkB,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;QAEtF,IAAI,WAAW,CAAC,SAAS,CAAC,CAAC,MAAM,GAAG,WAAW,CAAC,QAAQ,CAAC,CAAC,MAAM,EAAE;YAChE,YAAY,GAAG,WAAW,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,EAAE,kBAAkB,CAAC,CAAC,CAAC,MAAM,CAAC;SAC3E;QAED,IAAI,iBAAiB,GAAG,CAAC,CAAC;QAC1B,IAAI,KAAK,GAAG,CAAC,CAAC;QACd,MAAM,YAAY,GAAG,IAAI,SAAS,CAAC,OAAO,CAAC,CAAC;QAC5C,YAAY,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QAC7B,OAAO,iBAAiB,GAAG,YAAY,CAAC,WAAW,EAAE,CAAC,MAAM,EAAE;YAC5D,IAAI,KAAK,KAAK,YAAY,EAAE;gBAC1B,MAAM;aACP;YACD,IAAI,YAAY,CAAC,WAAW,EAAE,CAAC,iBAAiB,CAAC,KAAK,GAAG,EAAE;gBACzD,KAAK,IAAI,CAAC,CAAC;aACZ;YACD,iBAAiB,IAAI,CAAC,CAAC;SACxB;QACD,OAAO,iBAAiB,CAAC;KAC1B;AACH,CAAC,CAAC;AAEF,eAAe,mBAAmB,CAAC","sourcesContent":["import { AsYouType, formatIncompletePhoneNumber } from 'libphonenumber-js';\n\nexport const getPhoneNumberParts = (\n  phoneNumber: string,\n  codesList: string[]\n): [string | undefined, string] => {\n  if (!phoneNumber.startsWith('+') || phoneNumber.startsWith('+0')) return [undefined, phoneNumber];\n  const countryCode = codesList.find(code => phoneNumber.startsWith(code));\n  const subscriberNumber = phoneNumber.substring(countryCode?.length || 0);\n  return [countryCode, subscriberNumber];\n};\n\nexport const cleanNumber = (phoneNumber: string) => {\n  return phoneNumber.replace(/\\D/g, '');\n};\n\nexport const getCountry = (countryCode: string, number: string) => {\n  const asYouTypeCode = new AsYouType();\n  asYouTypeCode.input(countryCode + number);\n  return countryCode === '+1' ? 'US' : asYouTypeCode.getNumber()?.country;\n};\n\nexport const formatPhoneNumber = (numberToFormat: string, countryCode: string = '') => {\n  let formatted = cleanNumber(numberToFormat);\n  if (countryCode) {\n    const country = getCountry(countryCode, formatted);\n    formatted = formatIncompletePhoneNumber(formatted, country);\n  }\n  return formatted;\n};\n\nexport const convertToCallbackParameter = (codePart: string | undefined, numberPart: string) => {\n  return [codePart, cleanNumber(numberPart)].join('');\n};\n\nexport const calculateCursorPosition = (\n  newValue: string,\n  prevValue: string,\n  countryCode: string,\n  prevCursorPosition: number | null\n) => {\n  if (prevCursorPosition !== undefined && prevCursorPosition !== null) {\n    const country = getCountry(countryCode, cleanNumber(newValue));\n    let numbersCount = cleanNumber(prevValue.slice(0, prevCursorPosition - 1)).length + 1;\n\n    if (cleanNumber(prevValue).length > cleanNumber(newValue).length) {\n      numbersCount = cleanNumber(prevValue.slice(0, prevCursorPosition)).length;\n    }\n\n    let newCursorPosition = 0;\n    let count = 0;\n    const asYouTypeNew = new AsYouType(country);\n    asYouTypeNew.input(newValue);\n    while (newCursorPosition < asYouTypeNew.getTemplate().length) {\n      if (count === numbersCount) {\n        break;\n      }\n      if (asYouTypeNew.getTemplate()[newCursorPosition] === 'x') {\n        count += 1;\n      }\n      newCursorPosition += 1;\n    }\n    return newCursorPosition;\n  }\n};\n\nexport default getPhoneNumberParts;\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/Phone/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import { AsYouType, formatIncompletePhoneNumber } from 'libphonenumber-js';\n\nexport const getPhoneNumberParts = (\n  phoneNumber: string,\n  codesList: string[]\n): [string | undefined, string] => {\n  if (!phoneNumber.startsWith('+') || phoneNumber.startsWith('+0')) return [undefined, phoneNumber];\n  const countryCode = codesList.find(code => phoneNumber.startsWith(code));\n  const subscriberNumber = phoneNumber.substring(countryCode?.length || 0);\n  return [countryCode, subscriberNumber];\n};\n\nexport const cleanNumber = (phoneNumber: string) => {\n  return phoneNumber.replace(/\\D/g, '');\n};\n\nexport const getCountry = (countryCode: string, number: string) => {\n  const asYouTypeCode = new AsYouType();\n  asYouTypeCode.input(countryCode + number);\n  return countryCode === '+1' ? 'US' : asYouTypeCode.getNumber()?.country;\n};\n\nexport const formatPhoneNumber = (numberToFormat: string, countryCode: string = '') => {\n  let formatted = cleanNumber(numberToFormat);\n  if (countryCode) {\n    const country = getCountry(countryCode, formatted);\n    formatted = formatIncompletePhoneNumber(formatted, country);\n  }\n  return formatted;\n};\n\nexport const convertToCallbackParameter = (codePart: string | undefined, numberPart: string) => {\n  return [codePart, cleanNumber(numberPart)].join('');\n};\n\nexport const calculateCursorPosition = (\n  newValue: string,\n  prevValue: string,\n  countryCode: string,\n  prevCursorPosition: number | null\n) => {\n  if (prevCursorPosition !== undefined && prevCursorPosition !== null) {\n    const country = getCountry(countryCode, cleanNumber(newValue));\n    let numbersCount = cleanNumber(prevValue.slice(0, prevCursorPosition - 1)).length + 1;\n\n    if (cleanNumber(prevValue).length > cleanNumber(newValue).length) {\n      numbersCount = cleanNumber(prevValue.slice(0, prevCursorPosition)).length;\n    }\n\n    let newCursorPosition = 0;\n    let count = 0;\n    const asYouTypeNew = new AsYouType(country);\n    asYouTypeNew.input(newValue);\n    while (newCursorPosition < asYouTypeNew.getTemplate().length) {\n      if (count === numbersCount) {\n        break;\n      }\n      if (asYouTypeNew.getTemplate()[newCursorPosition] === 'x') {\n        count += 1;\n      }\n      newCursorPosition += 1;\n    }\n    return newCursorPosition;\n  }\n};\n\nexport default getPhoneNumberParts;\n"]}

package/lib/components/Popover/Popover.d.ts

@@ -57,10 +57,6 @@ export interface PopoverProps<Modifiers extends string = string> extends BasePro
     /** The ref of the wrapping element. */
     ref?: Ref<HTMLDivElement>;
 }
-export declare const StyledPopoverArrow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledPopover: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    offset?: number | undefined;
-}, never>;
 declare const Popover: <Modifiers extends string = string>(props: PopoverProps<Modifiers> & ForwardProps) => ReactElement | null;
 export default Popover;
 //# sourceMappingURL=Popover.d.ts.map

package/lib/components/Popover/Popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,GAAG,EAEH,YAAY,EAEZ,SAAS,EAIV,MAAM,OAAO,CAAC;AAEf,OAAO,EAAa,WAAW,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAIhD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAOtD,oBAAY,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAC9C,MAAM,WAAW,YAAY,CAAC,SAAS,SAAS,MAAM,GAAG,MAAM,CAAE,SAAQ,SAAS;IAChF,2IAA2I;IAC3I,MAAM,EAAE,OAAO,GAAG,cAAc,GAAG,IAAI,CAAC;IACxC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC,CAAC;IAChD;;;OAGG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC;IAC9C;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC,CAAC;IAChD;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yGAAyG;IACzG,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,kCAAkC;IAClC,QAAQ,EAAE,SAAS,CAAC;IACpB,uCAAuC;IACvC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,kBAAkB,yGAa9B,CAAC;AAEF,eAAO,MAAM,aAAa;;SA+GzB,CAAC;AAUF,QAAA,MAAM,OAAO,EAAE,CAAC,SAAS,SAAS,MAAM,GAAG,MAAM,EAC/C,KAAK,EAAE,YAAY,CAAC,SAAS,CAAC,GAAG,YAAY,KAC1C,YAAY,GAAG,IA6GnB,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,GAAG,EAEH,YAAY,EAEZ,SAAS,EAIV,MAAM,OAAO,CAAC;AAEf,OAAO,EAAa,WAAW,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAGhD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAOtD,oBAAY,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAC9C,MAAM,WAAW,YAAY,CAAC,SAAS,SAAS,MAAM,GAAG,MAAM,CAAE,SAAQ,SAAS;IAChF,2IAA2I;IAC3I,MAAM,EAAE,OAAO,GAAG,cAAc,GAAG,IAAI,CAAC;IACxC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC,CAAC;IAChD;;;OAGG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC;IAC9C;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC,CAAC;IAChD;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yGAAyG;IACzG,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,kCAAkC;IAClC,QAAQ,EAAE,SAAS,CAAC;IACpB,uCAAuC;IACvC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAQD,QAAA,MAAM,OAAO,EAAE,CAAC,SAAS,SAAS,MAAM,GAAG,MAAM,EAC/C,KAAK,EAAE,YAAY,CAAC,SAAS,CAAC,GAAG,YAAY,KAC1C,YAAY,GAAG,IAmHnB,CAAC;AAEF,eAAe,OAAO,CAAC"}