@pega/cosmos-react-core 4.0.0-dev.2.0 → 4.0.0-dev.21.0

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

@@ -1 +1 @@
-{"version":3,"file":"PageTemplates.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplates.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  useState,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  ReactNode,\n  useRef,\n  ReactElement,\n  useContext,\n  useEffect\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps, NoChildrenProp, AsProp, OmitStrict } 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, Tab } from '../Tabs';\nimport Flex from '../Flex';\nimport { useBreakpoint, useElement, useScrollStick, useConsolidatedRef } 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 TabbedPageTab extends Tab {\n  content: ReactNode;\n}\n\nexport interface TabbedPageProps extends PageTemplateProps {\n  tabs: OmitStrict<TabsProps, 'tabs' | 'currentTabId'> & {\n    tabs: TabbedPageTab[];\n    defaultTabId?: string;\n  };\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<{ pad: boolean }>(({ pad, theme }) => {\n  const spacing = theme.base.spacing;\n\n  return css`\n    flex-grow: 1;\n    max-width: 100%;\n\n    ${pad &&\n    css`\n      padding: 0 calc(2 * ${spacing}) calc(2 * ${spacing});\n    `}\n  `;\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  minContentHeight?: number;\n}>(({ theme, scrollContent, minContentHeight }) => {\n  const emptyContentHeight = minContentHeight ? `${minContentHeight}px` : undefined;\n\n  return css`\n    --content-height-in-view: ${emptyContentHeight};\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 consolidatedRegionRef = useConsolidatedRef(regionsRef);\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    const renderSingleRegion = regions?.length === 1;\n\n    const [minContentHeight, setMinContentHeight] = useState<number | undefined>();\n\n    useEffect(() => {\n      if (consolidatedRegionRef && consolidatedRegionRef.current) {\n        const refElement = consolidatedRegionRef.current;\n        const regionsPaddingBottomPixels = Number.parseInt(\n          window.getComputedStyle(refElement).getPropertyValue('padding-bottom'),\n          10\n        );\n\n        const resizeObserver = new ResizeObserver(() => {\n          const headerOffset = headerEl?.offsetHeight ?? 0;\n          const emptyHeight =\n            document.documentElement.offsetHeight -\n            (headerOffset + refElement?.offsetTop) -\n            regionsPaddingBottomPixels;\n\n          setMinContentHeight(emptyHeight);\n        });\n\n        resizeObserver.observe(refElement);\n\n        return () => {\n          resizeObserver.disconnect();\n        };\n      }\n    }, [consolidatedRegionRef, headerEl]);\n\n    return (\n      <Flex\n        {...restProps}\n        container={{\n          direction: 'column',\n          alignItems: 'stretch',\n          gap: 2\n        }}\n        scrollContent={scrollContent}\n        as={StyledPageLayout}\n        forwardedAs={as}\n        ref={ref}\n        minContentHeight={minContentHeight}\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          {renderSingleRegion && (\n            <StyledRegions ref={consolidatedRegionRef} pad>\n              <Flex\n                container={{\n                  direction: 'column',\n                  gap: 2\n                }}\n                as={StyledRegion}\n                ref={(el: HTMLDivElement | null) => {\n                  if (el) {\n                    scrollStickOptions.current.elements[0] = el;\n                  }\n                }}\n              >\n                {regions[0]}\n              </Flex>\n            </StyledRegions>\n          )}\n\n          {!renderSingleRegion && (\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={consolidatedRegionRef}\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          )}\n        </Flex>\n      </Flex>\n    );\n  }\n);\n\nexport const TabbedPage: FunctionComponent<TabbedPageProps & ForwardProps> = forwardRef(\n  ({ tabs, ...restProps }: PropsWithoutRef<TabbedPageProps>, ref: Ref<HTMLDivElement>) => {\n    const [tabId, setTabId] = useState(tabs.defaultTabId || tabs.tabs[0]?.id);\n\n    const tabPanels = tabs.tabs.map(tab => {\n      return (\n        <Flex\n          container={{ direction: 'column', gap: 2 }}\n          as={TabPanel}\n          tabId={tab.id}\n          currentTabId={tabId}\n          key={tab.id}\n        >\n          {tab.content}\n        </Flex>\n      );\n    });\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            currentTabId={tabId}\n          />\n        }\n        regions={[<>{tabPanels}</>]}\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"]}
+{"version":3,"file":"PageTemplates.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplates.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  useState,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  ReactNode,\n  useRef,\n  ReactElement,\n  useContext,\n  useEffect\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps, NoChildrenProp, AsProp, OmitStrict } from '../../types';\nimport Grid from '../Grid';\nimport Text from '../Text';\nimport SummaryItem from '../SummaryItem';\nimport Icon from '../Icon';\nimport { focusHeadingOrContainer, tryCatch } from '../../utils';\nimport Tabs, { TabPanel, TabsProps, Tab } from '../Tabs';\nimport Flex from '../Flex';\nimport {\n  useBreakpoint,\n  useElement,\n  useScrollStick,\n  useConsolidatedRef,\n  useConfiguration\n} 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 TabbedPageTab extends Tab {\n  content: ReactNode;\n}\n\nexport interface TabbedPageProps extends PageTemplateProps {\n  tabs: OmitStrict<TabsProps, 'tabs' | 'currentTabId'> & {\n    tabs: TabbedPageTab[];\n    defaultTabId?: string;\n  };\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    h1:focus-visible {\n      outline: transparent;\n      box-shadow: ${theme.base.shadow.focus};\n    }\n\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<{ pad: boolean }>(({ pad, theme }) => {\n  const spacing = theme.base.spacing;\n\n  return css`\n    flex-grow: 1;\n    max-width: 100%;\n\n    ${pad &&\n    css`\n      padding: 0 calc(2 * ${spacing}) calc(2 * ${spacing});\n    `}\n  `;\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  minContentHeight?: number;\n}>(({ theme, scrollContent, minContentHeight }) => {\n  const emptyContentHeight = minContentHeight ? `${minContentHeight}px` : undefined;\n\n  return css`\n    --content-height-in-view: ${emptyContentHeight};\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 pageRef = useConsolidatedRef(ref);\n    const [contentEl, setContentEl] = useElement<HTMLElement>();\n    const isMediumOrAbove = useBreakpoint('md');\n    const hasSideBySideColumns = regions.length > 1 && isMediumOrAbove;\n    const { headerEl } = useContext(AppShellContext);\n    const { loadedRef } = useConfiguration();\n\n    const consolidatedRegionRef = useConsolidatedRef(regionsRef);\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    const renderSingleRegion = regions?.length === 1;\n\n    const [minContentHeight, setMinContentHeight] = useState<number | undefined>();\n\n    useEffect(() => {\n      if (!pageRef.current) return;\n\n      if (loadedRef.current) {\n        focusHeadingOrContainer(pageRef.current, title);\n      } else {\n        loadedRef.current = true;\n      }\n    }, [title]);\n\n    useEffect(() => {\n      if (consolidatedRegionRef.current) {\n        const refElement = consolidatedRegionRef.current;\n        const regionsPaddingBottomPixels = Number.parseInt(\n          window.getComputedStyle(refElement).getPropertyValue('padding-bottom'),\n          10\n        );\n\n        const resizeObserver = new ResizeObserver(() => {\n          const headerOffset = headerEl?.offsetHeight ?? 0;\n          const emptyHeight =\n            document.documentElement.offsetHeight -\n            (headerOffset + refElement.offsetTop) -\n            regionsPaddingBottomPixels;\n\n          setMinContentHeight(emptyHeight);\n        });\n\n        resizeObserver.observe(refElement);\n\n        return () => {\n          resizeObserver.disconnect();\n        };\n      }\n    }, [consolidatedRegionRef, headerEl]);\n\n    return (\n      <Flex\n        {...restProps}\n        container={{\n          direction: 'column',\n          alignItems: 'stretch',\n          gap: 2\n        }}\n        scrollContent={scrollContent}\n        as={StyledPageLayout}\n        forwardedAs={as}\n        ref={pageRef}\n        minContentHeight={minContentHeight}\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          {renderSingleRegion && (\n            <StyledRegions ref={consolidatedRegionRef} pad>\n              <Flex\n                container={{\n                  direction: 'column',\n                  gap: 2\n                }}\n                as={StyledRegion}\n                ref={(el: HTMLDivElement | null) => {\n                  if (el) {\n                    scrollStickOptions.current.elements[0] = el;\n                  }\n                }}\n              >\n                {regions[0]}\n              </Flex>\n            </StyledRegions>\n          )}\n\n          {!renderSingleRegion && (\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={consolidatedRegionRef}\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          )}\n        </Flex>\n      </Flex>\n    );\n  }\n);\n\nexport const TabbedPage: FunctionComponent<TabbedPageProps & ForwardProps> = forwardRef(\n  ({ tabs, ...restProps }: PropsWithoutRef<TabbedPageProps>, ref: Ref<HTMLDivElement>) => {\n    const [tabId, setTabId] = useState(tabs.defaultTabId || tabs.tabs[0]?.id);\n\n    const tabPanels = tabs.tabs.map(tab => {\n      return (\n        <Flex\n          container={{ direction: 'column', gap: 2 }}\n          as={TabPanel}\n          tabId={tab.id}\n          currentTabId={tabId}\n          key={tab.id}\n        >\n          {tab.content}\n        </Flex>\n      );\n    });\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            currentTabId={tabId}\n          />\n        }\n        regions={[<>{tabPanels}</>]}\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

@@ -1,27 +1,7 @@
-export { OneColumnPage } from './PageTemplates';
-export { OneColumnPageProps } from './PageTemplates';
-export { TwoColumnPage } from './PageTemplates';
-export { TwoColumnPageProps } from './PageTemplates';
-export { ThreeColumnPage } from './PageTemplates';
-export { ThreeColumnPageProps } from './PageTemplates';
-export { FourColumnPage } from './PageTemplates';
-export { FourColumnPageProps } from './PageTemplates';
-export { WideNarrowPage } from './PageTemplates';
-export { WideNarrowPageProps } from './PageTemplates';
-export { NarrowWidePage } from './PageTemplates';
-export { NarrowWidePageProps } from './PageTemplates';
-export { NarrowWideWidePage } from './PageTemplates';
-export { NarrowWideWidePageProps } from './PageTemplates';
-export { WideWideNarrowPage } from './PageTemplates';
-export { WideWideNarrowPageProps } from './PageTemplates';
-export { NarrowWideNarrowPage } from './PageTemplates';
-export { NarrowWideNarrowPageProps } from './PageTemplates';
-export { TabbedPage } from './PageTemplates';
-export { StyledPageLayout } from './PageTemplates';
-export { StyledPageHeader } from './PageTemplates';
-export { default as DashboardPage, DashboardPageProps, DashboardPageLayoutProps, StyledFilterRegion } from './DashboardPage';
-export { default as CategorySubPage, TemplateProps } from './CategorySubPage';
-export { TabbedPageProps } from './PageTemplates';
-export { PageTemplateProps } from './PageTemplates';
-export { StyledRegion } from './PageTemplates';
+export { OneColumnPage, TwoColumnPage, ThreeColumnPage, FourColumnPage, WideNarrowPage, NarrowWidePage, NarrowWideWidePage, WideWideNarrowPage, NarrowWideNarrowPage, TabbedPage, StyledPageLayout, StyledPageHeader, StyledRegion } from './PageTemplates';
+export type { OneColumnPageProps, TwoColumnPageProps, ThreeColumnPageProps, FourColumnPageProps, WideNarrowPageProps, NarrowWidePageProps, NarrowWideWidePageProps, WideWideNarrowPageProps, NarrowWideNarrowPageProps, TabbedPageProps, PageTemplateProps } from './PageTemplates';
+export { default as DashboardPage, StyledFilterRegion } from './DashboardPage';
+export type { DashboardPageProps, DashboardPageLayoutProps } from './DashboardPage';
+export { default as CategorySubPage } from './CategorySubPage';
+export type { TemplateProps } from './CategorySubPage';
 //# 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,EACL,OAAO,IAAI,aAAa,EACxB,kBAAkB,EAClB,wBAAwB,EACxB,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAC9E,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,aAAa,EACb,eAAe,EACf,cAAc,EACd,cAAc,EACd,cAAc,EACd,kBAAkB,EAClB,kBAAkB,EAClB,oBAAoB,EACpB,UAAU,EACV,gBAAgB,EAChB,gBAAgB,EAChB,YAAY,EACb,MAAM,iBAAiB,CAAC;AACzB,YAAY,EACV,kBAAkB,EAClB,kBAAkB,EAClB,oBAAoB,EACpB,mBAAmB,EACnB,mBAAmB,EACnB,mBAAmB,EACnB,uBAAuB,EACvB,uBAAuB,EACvB,yBAAyB,EACzB,eAAe,EACf,iBAAiB,EAClB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC/E,YAAY,EAAE,kBAAkB,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,YAAY,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC"}

package/lib/components/PageTemplates/index.js

@@ -1,16 +1,4 @@
-export { OneColumnPage } from './PageTemplates';
-export { TwoColumnPage } from './PageTemplates';
-export { ThreeColumnPage } from './PageTemplates';
-export { FourColumnPage } from './PageTemplates';
-export { WideNarrowPage } from './PageTemplates';
-export { NarrowWidePage } from './PageTemplates';
-export { NarrowWideWidePage } from './PageTemplates';
-export { WideWideNarrowPage } from './PageTemplates';
-export { NarrowWideNarrowPage } from './PageTemplates';
-export { TabbedPage } from './PageTemplates';
-export { StyledPageLayout } from './PageTemplates';
-export { StyledPageHeader } from './PageTemplates';
+export { OneColumnPage, TwoColumnPage, ThreeColumnPage, FourColumnPage, WideNarrowPage, NarrowWidePage, NarrowWideWidePage, WideWideNarrowPage, NarrowWideNarrowPage, TabbedPage, StyledPageLayout, StyledPageHeader, StyledRegion } from './PageTemplates';
 export { default as DashboardPage, StyledFilterRegion } 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,EACL,OAAO,IAAI,aAAa,EAGxB,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,OAAO,IAAI,eAAe,EAAiB,MAAM,mBAAmB,CAAC;AAG9E,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 {\n  default as DashboardPage,\n  DashboardPageProps,\n  DashboardPageLayoutProps,\n  StyledFilterRegion\n} from './DashboardPage';\nexport { default as CategorySubPage, TemplateProps } from './CategorySubPage';\nexport { TabbedPageProps } from './PageTemplates';\nexport { PageTemplateProps } from './PageTemplates';\nexport { StyledRegion } from './PageTemplates';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,aAAa,EACb,eAAe,EACf,cAAc,EACd,cAAc,EACd,cAAc,EACd,kBAAkB,EAClB,kBAAkB,EAClB,oBAAoB,EACpB,UAAU,EACV,gBAAgB,EAChB,gBAAgB,EAChB,YAAY,EACb,MAAM,iBAAiB,CAAC;AAczB,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE/E,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC","sourcesContent":["export {\n  OneColumnPage,\n  TwoColumnPage,\n  ThreeColumnPage,\n  FourColumnPage,\n  WideNarrowPage,\n  NarrowWidePage,\n  NarrowWideWidePage,\n  WideWideNarrowPage,\n  NarrowWideNarrowPage,\n  TabbedPage,\n  StyledPageLayout,\n  StyledPageHeader,\n  StyledRegion\n} from './PageTemplates';\nexport type {\n  OneColumnPageProps,\n  TwoColumnPageProps,\n  ThreeColumnPageProps,\n  FourColumnPageProps,\n  WideNarrowPageProps,\n  NarrowWidePageProps,\n  NarrowWideWidePageProps,\n  WideWideNarrowPageProps,\n  NarrowWideNarrowPageProps,\n  TabbedPageProps,\n  PageTemplateProps\n} from './PageTemplates';\nexport { default as DashboardPage, StyledFilterRegion } from './DashboardPage';\nexport type { DashboardPageProps, DashboardPageLayoutProps } from './DashboardPage';\nexport { default as CategorySubPage } from './CategorySubPage';\nexport type { TemplateProps } from './CategorySubPage';\n"]}

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

@@ -1,3 +1,3 @@
 export { default } from './Pagination';
-export { PaginationProps } from './Pagination';
+export type { PaginationProps } from './Pagination';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Pagination/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC","sourcesContent":["export { default } from './Pagination';\nexport { PaginationProps } from './Pagination';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Pagination/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC","sourcesContent":["export { default } from './Pagination';\nexport type { PaginationProps } from './Pagination';\n"]}

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

@@ -1 +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"}
+{"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;AAGtD,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

@@ -1,11 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import styled from 'styled-components';
+import NoValue from '../NoValue/NoValue';
 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" }) }));
+    return (_jsx(StyledParagraphDisplay, { ref: ref, ...restProps, children: value !== undefined ? value : _jsx(NoValue, {}) }));
 });
 export default ParagraphDisplay;
 //# sourceMappingURL=ParagraphDisplay.js.map

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

@@ -1 +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,6BAAsB,GACtD,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"]}
+{"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;AAGvC,OAAO,OAAO,MAAM,oBAAoB,CAAC;AASzC,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,KAAC,OAAO,KAAG,GACnB,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';\nimport NoValue from '../NoValue/NoValue';\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 : <NoValue />}\n      </StyledParagraphDisplay>\n    );\n  }\n);\n\nexport default ParagraphDisplay;\n"]}

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

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

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

@@ -1 +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"}
+{"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,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC"}

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

@@ -1 +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"]}
+{"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 type { ParagraphDisplayProps } from './ParagraphDisplay';\n"]}

package/lib/components/Phone/Phone.test-ids.d.ts

@@ -0,0 +1,2 @@
+export declare const getPhoneInputTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly ["control", "country-code", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
+//# sourceMappingURL=Phone.test-ids.d.ts.map

package/lib/components/Phone/Phone.test-ids.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Phone.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Phone/Phone.test-ids.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,oBAAoB,wLAItB,CAAC"}

package/lib/components/Phone/Phone.test-ids.js

@@ -0,0 +1,8 @@
+import { createTestIds } from '../../utils';
+import { elements } from '../FormField/FormField.test-ids';
+export const getPhoneInputTestIds = createTestIds('phone-input', [
+    'control',
+    'country-code',
+    ...elements
+]);
+//# sourceMappingURL=Phone.test-ids.js.map

package/lib/components/Phone/Phone.test-ids.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Phone.test-ids.js","sourceRoot":"","sources":["../../../src/components/Phone/Phone.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAE3D,MAAM,CAAC,MAAM,oBAAoB,GAAG,aAAa,CAAC,aAAa,EAAE;IAC/D,SAAS;IACT,cAAc;IACd,GAAG,QAAQ;CACH,CAAC,CAAC","sourcesContent":["import { createTestIds } from '../../utils';\nimport { elements } from '../FormField/FormField.test-ids';\n\nexport const getPhoneInputTestIds = createTestIds('phone-input', [\n  'control',\n  'country-code',\n  ...elements\n] as const);\n"]}

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

@@ -7,7 +7,7 @@ export interface PhoneDisplayProps extends BaseProps, NoChildrenProp {
     displayText?: string;
     /**
      * Controls styling of the field.
-     * @default "link"
+     * @default 'link'
      */
     variant?: 'link' | 'text';
     /** Options to define formatting. */

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;AAE5E,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAK3E,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,iBAAiB,CAAC,EAAE;QAClB;;;WAGG;QACH,eAAe,CAAC,EAAE,OAAO,CAAC;KAC3B,CAAC;IACF,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,GAAG,eAAe,CAAC,CAAC;CAChD;AAED,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CA2BrE,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;AAE5E,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAM3E,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,iBAAiB,CAAC,EAAE;QAClB;;;WAGG;QACH,eAAe,CAAC,EAAE,OAAO,CAAC;KAC3B,CAAC;IACF,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,GAAG,eAAe,CAAC,CAAC;CAChD;AAED,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CA2BrE,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Phone/PhoneDisplay.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import Link from '../Link';
+import NoValue from '../NoValue/NoValue';
 import { formatPhone } from './utils';
 const PhoneDisplay = forwardRef(({ value, displayText, variant = 'link', formattingOptions: { showCountryCode = true } = {}, ...restProps }, ref) => {
-    const displayValue = value ? (displayText || formatPhone(value || '', { nationalFormat: !showCountryCode }) || value) : (_jsx("span", { "aria-hidden": 'true', children: "\u2013\u2013" }));
+    const displayValue = value ? (displayText || formatPhone(value || '', { nationalFormat: !showCountryCode }) || value) : (_jsx(NoValue, {}));
     return variant === 'text' || !value ? (_jsx("span", { ref: ref, ...restProps, children: displayValue })) : (_jsx(Link, { ref: ref, ...restProps, href: `tel:${value}`, children: displayValue }));
 });
 export default PhoneDisplay;

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;AAG5E,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAwBtC,MAAM,YAAY,GAAwD,UAAU,CAClF,CACE,EACE,KAAK,EACL,WAAW,EACX,OAAO,GAAG,MAAM,EAChB,iBAAiB,EAAE,EAAE,eAAe,GAAG,IAAI,EAAE,GAAG,EAAE,EAClD,GAAG,SAAS,EACuB,EACrC,GAA6B,EAC7B,EAAE;IACF,MAAM,YAAY,GAAG,KAAK,CAAC,CAAC,CAAC,CAC3B,WAAW,IAAI,WAAW,CAAC,KAAK,IAAI,EAAE,EAAE,EAAE,cAAc,EAAE,CAAC,eAAe,EAAE,CAAC,IAAI,KAAK,CACvF,CAAC,CAAC,CAAC,CACF,8BAAkB,MAAM,6BAAsB,CAC/C,CAAC;IAEF,OAAO,OAAO,KAAK,MAAM,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CACpC,eAAM,GAAG,EAAE,GAA2B,KAAM,SAAS,YAClD,YAAY,GACR,CACR,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,GAAG,EAAE,GAA6B,KAAM,SAAS,EAAE,IAAI,EAAE,OAAO,KAAK,EAAE,YAC1E,YAAY,GACR,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\n\nimport type { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport Link from '../Link';\n\nimport { formatPhone } from './utils';\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  /** Options to define formatting. */\n  formattingOptions?: {\n    /**\n     * Display phone number with country calling code\n     * @default true\n     */\n    showCountryCode?: boolean;\n  };\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLAnchorElement | HTMLSpanElement>;\n}\n\nconst PhoneDisplay: FunctionComponent<PhoneDisplayProps & ForwardProps> = forwardRef(\n  (\n    {\n      value,\n      displayText,\n      variant = 'link',\n      formattingOptions: { showCountryCode = true } = {},\n      ...restProps\n    }: PropsWithoutRef<PhoneDisplayProps>,\n    ref: PhoneDisplayProps['ref']\n  ) => {\n    const displayValue = value ? (\n      displayText || formatPhone(value || '', { nationalFormat: !showCountryCode }) || 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;AAG5E,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,OAAO,MAAM,oBAAoB,CAAC;AAEzC,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAwBtC,MAAM,YAAY,GAAwD,UAAU,CAClF,CACE,EACE,KAAK,EACL,WAAW,EACX,OAAO,GAAG,MAAM,EAChB,iBAAiB,EAAE,EAAE,eAAe,GAAG,IAAI,EAAE,GAAG,EAAE,EAClD,GAAG,SAAS,EACuB,EACrC,GAA6B,EAC7B,EAAE;IACF,MAAM,YAAY,GAAG,KAAK,CAAC,CAAC,CAAC,CAC3B,WAAW,IAAI,WAAW,CAAC,KAAK,IAAI,EAAE,EAAE,EAAE,cAAc,EAAE,CAAC,eAAe,EAAE,CAAC,IAAI,KAAK,CACvF,CAAC,CAAC,CAAC,CACF,KAAC,OAAO,KAAG,CACZ,CAAC;IAEF,OAAO,OAAO,KAAK,MAAM,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CACpC,eAAM,GAAG,EAAE,GAA2B,KAAM,SAAS,YAClD,YAAY,GACR,CACR,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,GAAG,EAAE,GAA6B,KAAM,SAAS,EAAE,IAAI,EAAE,OAAO,KAAK,EAAE,YAC1E,YAAY,GACR,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\n\nimport type { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport Link from '../Link';\nimport NoValue from '../NoValue/NoValue';\n\nimport { formatPhone } from './utils';\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  /** Options to define formatting. */\n  formattingOptions?: {\n    /**\n     * Display phone number with country calling code\n     * @default true\n     */\n    showCountryCode?: boolean;\n  };\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLAnchorElement | HTMLSpanElement>;\n}\n\nconst PhoneDisplay: FunctionComponent<PhoneDisplayProps & ForwardProps> = forwardRef(\n  (\n    {\n      value,\n      displayText,\n      variant = 'link',\n      formattingOptions: { showCountryCode = true } = {},\n      ...restProps\n    }: PropsWithoutRef<PhoneDisplayProps>,\n    ref: PhoneDisplayProps['ref']\n  ) => {\n    const displayValue = value ? (\n      displayText || formatPhone(value || '', { nationalFormat: !showCountryCode }) || value\n    ) : (\n      <NoValue />\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, NoChildrenProp } from '../../types';
+import { BaseProps, ForwardProps, NoChildrenProp, TestIdProp } from '../../types';
 import { FormControlProps } from '../FormControl';
-export interface PhoneInputProps extends FormControlProps, BaseProps, NoChildrenProp {
+export interface PhoneInputProps extends FormControlProps, BaseProps, NoChildrenProp, TestIdProp {
     /**
      * Display select with countries calling codes
      * @default false
@@ -18,6 +18,8 @@ export interface PhoneInputProps extends FormControlProps, BaseProps, NoChildren
     /** Ref for the wrapping element. */
     ref?: Ref<HTMLInputElement>;
 }
-declare const PhoneInput: FunctionComponent<PhoneInputProps & ForwardProps>;
-export default PhoneInput;
+declare const _default: FunctionComponent<PhoneInputProps & ForwardProps> & {
+    getTestIds: (testIdProp?: string | undefined) => import("../../types").TestIdsRecord<readonly ["control", "country-code", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
+};
+export default _default;
 //# sourceMappingURL=PhoneInput.d.ts.map

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,EAGJ,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAqB,MAAM,aAAa,CAAC;AAEzF,OAAO,EAAE,gBAAgB,EAAqB,MAAM,gBAAgB,CAAC;AAUrE,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,gBAAgB,CAAC,CAAC;CAC7B;AAuBD,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,EAGJ,MAAM,OAAO,CAAC;AAWf,OAAO,EACL,SAAS,EACT,YAAY,EACZ,cAAc,EAEd,UAAU,EACX,MAAM,aAAa,CAAC;AAErB,OAAO,EAAE,gBAAgB,EAAqB,MAAM,gBAAgB,CAAC;AAYrE,MAAM,WAAW,eAAgB,SAAQ,gBAAgB,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU;IAC9F;;;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,gBAAgB,CAAC,CAAC;CAC7B;;;;AAiKD,wBAA6D"}

package/lib/components/Phone/PhoneInput.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useRef } from 'react';
 import styled, { css } from 'styled-components';
-import { useConsolidatedRef, useFocusWithin, useI18n, useInputFormatter } from '../../hooks';
+import { useConsolidatedRef, useFocusWithin, useI18n, useInputFormatter, useTestIds } from '../../hooks';
 import { defaultThemeProp } from '../../theme';
 import FormField from '../FormField';
 import { StyledFormControl } from '../FormControl';
@@ -10,8 +10,10 @@ import Select, { Option } from '../Select';
 import Input from '../Input';
 import { StyledSelect } from '../Select/Select';
 import Flex from '../Flex';
+import { withTestIds } from '../../utils';
 import callingCodes from './callingCodes';
 import { convertToCallbackParameter, formatPhoneNumber, getPhoneNumberParts } from './utils';
+import { getPhoneInputTestIds } from './Phone.test-ids';
 const StyledPhoneInput = styled.div(() => {
     return css `
     border: 0;
@@ -30,7 +32,8 @@ const StyledPhoneInput = styled.div(() => {
 });
 StyledPhoneInput.defaultProps = defaultThemeProp;
 const PhoneInput = forwardRef((props, ref) => {
-    const { value, id, label, labelHidden, info, status, required, readOnly, disabled, showCountryCode = false, callingCodesList = callingCodes, onChange, onBlur, onFocus, onResolveSuggestion, additionalInfo, ...restProps } = props;
+    const { testId, value, id, label, labelHidden, info, status, required, readOnly, disabled, showCountryCode = false, callingCodesList = callingCodes, onChange, onBlur, onFocus, onResolveSuggestion, additionalInfo, ...restProps } = props;
+    const testIds = useTestIds(testId, getPhoneInputTestIds);
     const t = useI18n();
     const [countryCode = callingCodesList[0], subscriberNumber = ''] = value
         ? getPhoneNumberParts(value, callingCodesList)
@@ -56,8 +59,9 @@ const PhoneInput = forwardRef((props, ref) => {
     }, [countryCode]);
     const formatted = useInputFormatter(inputRef, subscriberNumber, formatter);
     const codesOptions = (_jsx(_Fragment, { children: callingCodesList.map(code => (_jsx(Option, { value: code, children: code }, code))) }));
-    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, "aria-label": t('select_country_code'), onChange: onSelectChange, required: required, status: status, readOnly: readOnly, disabled: disabled, autoComplete: 'tel-country-code', hasSuggestion: status === 'pending' && !!onResolveSuggestion, children: codesOptions })), _jsx(Input, { ...restProps, inputMode: 'tel', ref: inputRef, value: formatted, "aria-label": t('enter_a_number'), onChange: onInputChange, required: required, status: status, readOnly: readOnly, disabled: disabled, autoComplete: 'tel-national', hasSuggestion: status === 'pending' && !!onResolveSuggestion })] }));
+    const Comp = (_jsxs(StyledPhoneInput, { "data-testid": testIds.root, as: StyledFormControl, forwardedAs: Flex, container: { alignItems: 'center', wrap: 'nowrap' }, ref: containerRef, status: status, readOnly: readOnly, disabled: disabled, children: [showCountryCode && (_jsx(Select, { "data-testid": testIds.countryCode, value: countryCode, "aria-label": t('select_country_code'), onChange: onSelectChange, required: required, status: status, readOnly: readOnly, disabled: disabled, autoComplete: 'tel-country-code', hasSuggestion: status === 'pending' && !!onResolveSuggestion, children: codesOptions })), _jsx(Input, { "data-testid": testIds.control, ...restProps, inputMode: 'tel', ref: inputRef, value: formatted, "aria-label": t('enter_a_number'), onChange: onInputChange, required: required, status: status, readOnly: readOnly, disabled: disabled, autoComplete: 'tel-national', hasSuggestion: status === 'pending' && !!onResolveSuggestion })] }));
     return label ? (_jsx(FormField, { as: 'fieldset', labelAs: 'legend', ...{
+            testId: testIds,
             additionalInfo,
             label,
             labelHidden,
@@ -69,5 +73,5 @@ const PhoneInput = forwardRef((props, ref) => {
             onResolveSuggestion
         }, children: Comp })) : (Comp);
 });
-export default PhoneInput;
+export default withTestIds(PhoneInput, getPhoneInputTestIds);
 //# 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  useCallback,\n  useRef\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useConsolidatedRef, useFocusWithin, useI18n, useInputFormatter } 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 { convertToCallbackParameter, formatPhoneNumber, getPhoneNumberParts } 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<HTMLInputElement>;\n}\n\ntype PhoneInputPropsWithDefaults = PropsWithDefaults<PhoneInputProps>;\n\nconst StyledPhoneInput = styled.div<PhoneInputPropsWithDefaults>(() => {\n  return css`\n    border: 0;\n    > ${StyledSelect} {\n      max-width: max-content;\n      border-inline-end: none;\n      border-start-end-radius: 0;\n      border-end-end-radius: 0;\n    }\n\n    > ${StyledSelect} + ${StyledInput} {\n      border-start-start-radius: 0;\n      border-end-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      value,\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      onResolveSuggestion,\n      additionalInfo,\n      ...restProps\n    } = props;\n\n    const t = useI18n();\n    const [countryCode = callingCodesList[0], subscriberNumber = ''] = value\n      ? getPhoneNumberParts(value, callingCodesList)\n      : [];\n\n    const onFocusChange = (focused: boolean) => {\n      const callbackParam = convertToCallbackParameter(countryCode, subscriberNumber);\n      if (focused) onFocus?.(callbackParam);\n      else onBlur?.(callbackParam);\n    };\n\n    const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n      onChange?.(convertToCallbackParameter(countryCode, e.target.value));\n    };\n\n    const onSelectChange = (e: ChangeEvent<HTMLSelectElement>) => {\n      onChange?.(convertToCallbackParameter(e.target.value, subscriberNumber));\n    };\n\n    const inputRef = useConsolidatedRef<HTMLInputElement>(ref);\n    const containerRef = useRef<HTMLElement>(null);\n    useFocusWithin([containerRef], onFocusChange);\n\n    const formatter = useCallback(\n      number => {\n        return formatPhoneNumber(number.replace(/\\D+/g, ''), countryCode);\n      },\n      [countryCode]\n    );\n\n    const formatted = useInputFormatter(inputRef, subscriberNumber, formatter);\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            aria-label={t('select_country_code')}\n            onChange={onSelectChange}\n            required={required}\n            status={status}\n            readOnly={readOnly}\n            disabled={disabled}\n            autoComplete='tel-country-code'\n            hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n          >\n            {codesOptions}\n          </Select>\n        )}\n        <Input\n          {...restProps}\n          inputMode='tel'\n          ref={inputRef}\n          value={formatted}\n          aria-label={t('enter_a_number')}\n          onChange={onInputChange}\n          required={required}\n          status={status}\n          readOnly={readOnly}\n          disabled={disabled}\n          autoComplete='tel-national'\n          hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n        />\n      </StyledPhoneInput>\n    );\n\n    return label ? (\n      <FormField\n        as='fieldset'\n        labelAs='legend'\n        {...{\n          additionalInfo,\n          label,\n          labelHidden,\n          id,\n          info,\n          status,\n          required,\n          disabled,\n          onResolveSuggestion\n        }}\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  useCallback,\n  useRef\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  useConsolidatedRef,\n  useFocusWithin,\n  useI18n,\n  useInputFormatter,\n  useTestIds\n} from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport {\n  BaseProps,\n  ForwardProps,\n  NoChildrenProp,\n  PropsWithDefaults,\n  TestIdProp\n} 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 { withTestIds } from '../../utils';\n\nimport callingCodes from './callingCodes';\nimport { convertToCallbackParameter, formatPhoneNumber, getPhoneNumberParts } from './utils';\nimport { getPhoneInputTestIds } from './Phone.test-ids';\n\nexport interface PhoneInputProps extends FormControlProps, BaseProps, NoChildrenProp, TestIdProp {\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<HTMLInputElement>;\n}\n\ntype PhoneInputPropsWithDefaults = PropsWithDefaults<PhoneInputProps>;\n\nconst StyledPhoneInput = styled.div<PhoneInputPropsWithDefaults>(() => {\n  return css`\n    border: 0;\n    > ${StyledSelect} {\n      max-width: max-content;\n      border-inline-end: none;\n      border-start-end-radius: 0;\n      border-end-end-radius: 0;\n    }\n\n    > ${StyledSelect} + ${StyledInput} {\n      border-start-start-radius: 0;\n      border-end-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      testId,\n      value,\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      onResolveSuggestion,\n      additionalInfo,\n      ...restProps\n    } = props;\n\n    const testIds = useTestIds(testId, getPhoneInputTestIds);\n\n    const t = useI18n();\n\n    const [countryCode = callingCodesList[0], subscriberNumber = ''] = value\n      ? getPhoneNumberParts(value, callingCodesList)\n      : [];\n\n    const onFocusChange = (focused: boolean) => {\n      const callbackParam = convertToCallbackParameter(countryCode, subscriberNumber);\n      if (focused) onFocus?.(callbackParam);\n      else onBlur?.(callbackParam);\n    };\n\n    const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n      onChange?.(convertToCallbackParameter(countryCode, e.target.value));\n    };\n\n    const onSelectChange = (e: ChangeEvent<HTMLSelectElement>) => {\n      onChange?.(convertToCallbackParameter(e.target.value, subscriberNumber));\n    };\n\n    const inputRef = useConsolidatedRef<HTMLInputElement>(ref);\n    const containerRef = useRef<HTMLElement>(null);\n    useFocusWithin([containerRef], onFocusChange);\n\n    const formatter = useCallback(\n      number => {\n        return formatPhoneNumber(number.replace(/\\D+/g, ''), countryCode);\n      },\n      [countryCode]\n    );\n\n    const formatted = useInputFormatter(inputRef, subscriberNumber, formatter);\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        data-testid={testIds.root}\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            data-testid={testIds.countryCode}\n            value={countryCode}\n            aria-label={t('select_country_code')}\n            onChange={onSelectChange}\n            required={required}\n            status={status}\n            readOnly={readOnly}\n            disabled={disabled}\n            autoComplete='tel-country-code'\n            hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n          >\n            {codesOptions}\n          </Select>\n        )}\n        <Input\n          data-testid={testIds.control}\n          {...restProps}\n          inputMode='tel'\n          ref={inputRef}\n          value={formatted}\n          aria-label={t('enter_a_number')}\n          onChange={onInputChange}\n          required={required}\n          status={status}\n          readOnly={readOnly}\n          disabled={disabled}\n          autoComplete='tel-national'\n          hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n        />\n      </StyledPhoneInput>\n    );\n\n    return label ? (\n      <FormField\n        as='fieldset'\n        labelAs='legend'\n        {...{\n          testId: testIds,\n          additionalInfo,\n          label,\n          labelHidden,\n          id,\n          info,\n          status,\n          required,\n          disabled,\n          onResolveSuggestion\n        }}\n      >\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default withTestIds(PhoneInput, getPhoneInputTestIds);\n"]}

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

@@ -1,7 +1,7 @@
 export { default as PhoneInput } from './PhoneInput';
-export { PhoneInputProps } from './PhoneInput';
+export type { PhoneInputProps } from './PhoneInput';
 export { default as getPhoneNumberParts } from './utils';
 export { default as PhoneDisplay } from './PhoneDisplay';
-export { PhoneDisplayProps } from './PhoneDisplay';
+export type { PhoneDisplayProps } from './PhoneDisplay';
 export { formatPhone } from './utils';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Phone/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Phone/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Phone/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AAErD,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEzD,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC","sourcesContent":["export { default as PhoneInput } from './PhoneInput';\nexport { PhoneInputProps } from './PhoneInput';\nexport { default as getPhoneNumberParts } from './utils';\nexport { default as PhoneDisplay } from './PhoneDisplay';\nexport { PhoneDisplayProps } from './PhoneDisplay';\nexport { formatPhone } from './utils';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Phone/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AAErD,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEzD,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC","sourcesContent":["export { default as PhoneInput } from './PhoneInput';\nexport type { PhoneInputProps } from './PhoneInput';\nexport { default as getPhoneNumberParts } from './utils';\nexport { default as PhoneDisplay } from './PhoneDisplay';\nexport type { PhoneDisplayProps } from './PhoneDisplay';\nexport { formatPhone } from './utils';\n"]}

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

@@ -3,7 +3,7 @@ import { PopperProps } from 'react-popper';
 import { VirtualElement } from '@popperjs/core';
 import { BaseProps, ForwardProps } from '../../types';
 import { ConfigurationProps } from '../Configuration';
-export declare type Delay = 'none' | 'short' | 'long';
+export type Delay = 'none' | 'short' | 'long';
 export interface PopoverProps<Modifiers extends string = string> extends BaseProps {
     /** The DOM element or [virtual element](https://popper.js.org/docs/v2/virtual-elements) that the Popover is positioned in reference to. */
     target: Element | VirtualElement | null;
@@ -19,21 +19,22 @@ export interface PopoverProps<Modifiers extends string = string> extends BasePro
     portal?: boolean | ConfigurationProps['portalTarget'];
     /**
      * Delay on showing the Popover.
-     * @default "none"
+     * @default 'none'
      */
     showDelay?: Delay;
     /**
      * Delay on hiding the Popover.
-     * @default "none"
+     * @default 'none'
      */
     hideDelay?: Delay;
     /**
      * [React Popper Placement](https://popper.js.org/react-popper/v2/render-props/#placement)
+     * @default 'bottom'
      */
     placement?: PopperProps<Modifiers>['placement'];
     /**
      * [React Popper Strategy](https://popper.js.org/react-popper/v2/render-props/#strategy)
-     * @default "absolute"
+     * @default 'absolute'
      */
     strategy?: PopperProps<Modifiers>['strategy'];
     /**

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;AAGhD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAStD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAMtD,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,GAAG,kBAAkB,CAAC,cAAc,CAAC,CAAC;IACtD;;;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,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,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,IA0InB,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,EAKV,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;AAStD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAMtD,MAAM,MAAM,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,GAAG,kBAAkB,CAAC,cAAc,CAAC,CAAC;IACtD;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB;;;OAGG;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,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,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,IAyNnB,CAAC;AAEF,eAAe,OAAO,CAAC"}