@pega/cosmos-react-core 3.0.0-dev.1.0 → 3.0.0-dev.4.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} 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"]}
+{"version":3,"file":"PageTemplates.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplates.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,QAAQ,EAKR,MAAM,EAEN,UAAU,EACV,SAAS,EACV,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,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAE5F,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,CAA2B,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE;IAClF,OAAO,GAAG,CAAA;;;MAGN,UAAU;QACZ,GAAG,CAAA;;KAEF;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAmB,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3E,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC;IAEnC,OAAO,GAAG,CAAA;;;;MAIN,GAAG;QACL,GAAG,CAAA;4BACqB,OAAO,cAAc,OAAO;KACnD;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,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,CAGvC,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,gBAAgB,EAAE,EAAE,EAAE;IAChD,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,CAAC,CAAC,GAAG,gBAAgB,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IAElF,OAAO,GAAG,CAAA;gCACoB,kBAAkB;;;wBAG1B,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC;;MAEtD,aAAa;QACf,GAAG,CAAA;QACC,aAAa;;;;QAIb,aAAa;;;;;;KAMhB;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,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,qBAAqB,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAC;IAC7D,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,MAAM,kBAAkB,GAAG,OAAO,EAAE,MAAM,KAAK,CAAC,CAAC;IAEjD,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,EAAsB,CAAC;IAE/E,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,qBAAqB,IAAI,qBAAqB,CAAC,OAAO,EAAE;YAC1D,MAAM,UAAU,GAAG,qBAAqB,CAAC,OAAO,CAAC;YACjD,MAAM,0BAA0B,GAAG,MAAM,CAAC,QAAQ,CAChD,MAAM,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,EACtE,EAAE,CACH,CAAC;YAEF,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;gBAC7C,MAAM,YAAY,GAAG,QAAQ,EAAE,YAAY,IAAI,CAAC,CAAC;gBACjD,MAAM,WAAW,GACf,QAAQ,CAAC,eAAe,CAAC,YAAY;oBACrC,CAAC,YAAY,GAAG,UAAU,EAAE,SAAS,CAAC;oBACtC,0BAA0B,CAAC;gBAE7B,mBAAmB,CAAC,WAAW,CAAC,CAAC;YACnC,CAAC,CAAC,CAAC;YAEH,cAAc,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;YAEnC,OAAO,GAAG,EAAE;gBACV,cAAc,CAAC,UAAU,EAAE,CAAC;YAC9B,CAAC,CAAC;SACH;IACH,CAAC,EAAE,CAAC,qBAAqB,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtC,OAAO,CACL,MAAC,IAAI,OACC,SAAS,EACb,SAAS,EAAE;YACT,SAAS,EAAE,QAAQ;YACnB,UAAU,EAAE,SAAS;YACrB,GAAG,EAAE,CAAC;SACP,EACD,aAAa,EAAE,aAAa,EAC5B,EAAE,EAAE,gBAAgB,EACpB,WAAW,EAAE,EAAE,EACf,GAAG,EAAE,GAAG,EACR,gBAAgB,EAAE,gBAAgB,aAElC,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,MAAC,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,aAE5C,kBAAkB,IAAI,CACrB,KAAC,aAAa,IAAC,GAAG,EAAE,qBAAqB,EAAE,GAAG,kBAC5C,KAAC,IAAI,IACH,SAAS,EAAE;gCACT,SAAS,EAAE,QAAQ;gCACnB,GAAG,EAAE,CAAC;6BACP,EACD,EAAE,EAAE,YAAY,EAChB,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,EACD,UAAU,kBAET,OAAO,CAAC,CAAC,CAAC,WACN,WACO,CACjB,EAEA,CAAC,kBAAkB,IAAI,CACtB,KAAC,IAAI,IACH,SAAS,EAAE;4BACT,IAAI,EAAE,gBAAgB;4BACtB,UAAU,EAAE,OAAO;4BACnB,GAAG,EAAE,CAAC;4BACN,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;yBACf,EACD,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,EAAE,EAC3B,EAAE,EAAE,aAAa,EACjB,GAAG,EAAE,qBAAqB,YAEzB,OAAO,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,CAAC,EAAE,EAAE;4BAC3B,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE;oCACT,SAAS,EAAE,QAAQ;oCACnB,GAAG,EAAE,CAAC;iCACP,EACD,EAAE,EAAE,YAAY,EAGhB,GAAG,EAAE,CAAC,EAAyB,EAAE,EAAE;oCACjC,IAAI,EAAE,EAAE;wCACN,kBAAkB,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC;qCAC7C;gCACH,CAAC,YAEA,QAAQ,IAPJ,CAAC,CAQD,CACR,CAAC;wBACJ,CAAC,CAAC,WACG,CACR,YACI,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  useEffect\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, 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 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<{ fillHeight?: boolean }>(({ fillHeight }) => {\n  return css`\n    flex-grow: 1;\n\n    ${fillHeight &&\n    css`\n      height: 100%;\n    `}\n  `;\n});\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                fillHeight\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, 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/Popover/Popover.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,kBAAkB,yGAuB9B,CAAC;AAIF,eAAO,MAAM,aAAa;;SA2HzB,CAAC"}
+{"version":3,"file":"Popover.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,kBAAkB,yGAwB9B,CAAC;AAIF,eAAO,MAAM,aAAa;;SAmJzB,CAAC"}

package/lib/components/Popover/Popover.styles.js

@@ -2,17 +2,18 @@ import styled, { css } from 'styled-components';
 import { defaultThemeProp } from '../../theme';
 export const StyledPopoverArrow = styled.div(({ theme: { base: { shadow: { 'low-filter': low } } } }) => css `
     background-color: inherit;
-    height: 0;
-    width: 0;
-    filter: ${low};
-    z-index: -1; /* Make sure it's under the Popover. */
 
+    ::before,
     ::after {
       content: '';
       display: block;
+      position: absolute;
       background-color: inherit;
-      height: 0.5rem;
-      width: 0.5rem;
+    }
+
+    ::before {
+      inset: -0.25rem;
+      filter: ${low};
       transform: rotate(45deg);
     }
   `);
@@ -26,7 +27,7 @@ export const StyledPopover = styled.div(({ theme: { base: { 'border-radius': bor
       margin: 0 !important;
       z-index: ${zIndex};
       background-color: ${background};
-      border-radius: calc(${cardBorderRadius} / 2);
+      border-radius: calc(${cardBorderRadius});
 
       ::after {
         content: '';
@@ -48,12 +49,18 @@ export const StyledPopover = styled.div(({ theme: { base: { 'border-radius': bor
 
       &[data-popper-placement^='top'] {
         > ${StyledPopoverArrow} {
-          top: calc(100% - 0.25rem);
-          margin-inline-start: -0.25rem;
+          top: calc(100%);
 
-          ::after {
+          ::before {
             border-bottom-right-radius: calc(${borderRadius} / 4);
           }
+
+          ::after {
+            top: -0.75rem;
+            right: -0.75rem;
+            bottom: 0;
+            left: -0.75rem;
+          }
         }
 
         ::before {
@@ -68,12 +75,18 @@ export const StyledPopover = styled.div(({ theme: { base: { 'border-radius': bor
 
       &[data-popper-placement^='bottom'] {
         > ${StyledPopoverArrow} {
-          bottom: calc(100% + 0.25rem);
-          margin-inline-start: -0.25rem;
+          bottom: calc(100%);
 
-          ::after {
+          ::before {
             border-top-left-radius: calc(${borderRadius} / 4);
           }
+
+          ::after {
+            top: 0;
+            right: -0.75rem;
+            bottom: -0.75rem;
+            left: -0.75rem;
+          }
         }
 
         ::before {
@@ -88,12 +101,18 @@ export const StyledPopover = styled.div(({ theme: { base: { 'border-radius': bor
 
       &[data-popper-placement^='right'] {
         > ${StyledPopoverArrow} {
-          inset-inline-end: calc(100% + 0.25rem);
-          margin-block-start: -0.25rem;
+          right: calc(100%);
 
-          ::after {
+          ::before {
             border-bottom-left-radius: calc(${borderRadius} / 4);
           }
+
+          ::after {
+            top: -0.75rem;
+            right: -0.75rem;
+            bottom: -0.75rem;
+            left: 0;
+          }
         }
 
         ::before {
@@ -108,12 +127,18 @@ export const StyledPopover = styled.div(({ theme: { base: { 'border-radius': bor
 
       &[data-popper-placement^='left'] {
         > ${StyledPopoverArrow} {
-          left: calc(100% - 0.25rem);
-          margin-block-start: -0.25rem;
+          left: calc(100%);
 
-          ::after {
+          ::before {
             border-top-right-radius: calc(${borderRadius} / 4);
           }
+
+          ::after {
+            top: -0.75rem;
+            right: 0;
+            bottom: -0.75rem;
+            left: -0.75rem;
+          }
         }
 
         ::before {

package/lib/components/Popover/Popover.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.styles.js","sourceRoot":"","sources":["../../../src/components/Popover/Popover.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAC1C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,MAAM,EAAE,EAAE,YAAY,EAAE,GAAG,EAAE,EAC9B,EACF,EACF,EAAE,EAAE,CAAC,GAAG,CAAA;;;;cAIG,GAAG;;;;;;;;;;;GAWd,CACF,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CACrC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,eAAe,EAAE,YAAY,EAC7B,SAAS,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAC9B,MAAM,EAAE,EAAE,YAAY,EAAE,GAAG,EAAE,EAC9B,EACD,UAAU,EAAE,EACV,IAAI,EAAE,EAAE,UAAU,EAAE,eAAe,EAAE,gBAAgB,EAAE,EACxD,EACF,EACD,MAAM,EACP,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;;;;iBAMG,MAAM;0BACG,UAAU;4BACR,gBAAgB;;;;;;;kBAO1B,GAAG;;;;;;;;;;;;;;YAcT,kBAAkB;;;;;+CAKiB,YAAY;;;;;;;oBAOvC,MAAM;qBACL,MAAM;;;;;;;YAOf,kBAAkB;;;;;2CAKa,YAAY;;;;;;;oBAOnC,MAAM;kBACR,MAAM;;;;;;;YAOZ,kBAAkB;;;;;8CAKgB,YAAY;;;;;;;mBAOvC,MAAM;mBACN,MAAM;;;;;;;YAOb,kBAAkB;;;;;4CAKc,YAAY;;;;;;;mBAOrC,MAAM;oBACL,MAAM;;;;;KAKrB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\n\nexport const StyledPopoverArrow = styled.div(\n  ({\n    theme: {\n      base: {\n        shadow: { 'low-filter': low }\n      }\n    }\n  }) => css`\n    background-color: inherit;\n    height: 0;\n    width: 0;\n    filter: ${low};\n    z-index: -1; /* Make sure it's under the Popover. */\n\n    ::after {\n      content: '';\n      display: block;\n      background-color: inherit;\n      height: 0.5rem;\n      width: 0.5rem;\n      transform: rotate(45deg);\n    }\n  `\n);\n\nStyledPopoverArrow.defaultProps = defaultThemeProp;\n\nexport const StyledPopover = styled.div<{ offset?: number }>(\n  ({\n    theme: {\n      base: {\n        'border-radius': borderRadius,\n        'z-index': { popover: zIndex },\n        shadow: { 'low-filter': low }\n      },\n      components: {\n        card: { background, 'border-radius': cardBorderRadius }\n      }\n    },\n    offset\n  }) => {\n    return css`\n      /*\n        Margin should never be used with Popper.\n        https://popper.js.org/docs/v2/migration-guide/#4-remove-all-css-margins\n      */\n      margin: 0 !important;\n      z-index: ${zIndex};\n      background-color: ${background};\n      border-radius: calc(${cardBorderRadius} / 2);\n\n      ::after {\n        content: '';\n        background-color: inherit;\n        border-radius: inherit;\n        z-index: -2; /* Make sure it's under the arrow. */\n        filter: ${low};\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n      }\n\n      &[data-popper-reference-hidden='true'] {\n        visibility: hidden;\n        pointer-events: none;\n      }\n\n      &[data-popper-placement^='top'] {\n        > ${StyledPopoverArrow} {\n          top: calc(100% - 0.25rem);\n          margin-inline-start: -0.25rem;\n\n          ::after {\n            border-bottom-right-radius: calc(${borderRadius} / 4);\n          }\n        }\n\n        ::before {\n          content: '';\n          position: absolute;\n          height: ${offset}px;\n          bottom: -${offset}px;\n          left: 0;\n          right: 0;\n        }\n      }\n\n      &[data-popper-placement^='bottom'] {\n        > ${StyledPopoverArrow} {\n          bottom: calc(100% + 0.25rem);\n          margin-inline-start: -0.25rem;\n\n          ::after {\n            border-top-left-radius: calc(${borderRadius} / 4);\n          }\n        }\n\n        ::before {\n          content: '';\n          position: absolute;\n          height: ${offset}px;\n          top: -${offset}px;\n          left: 0;\n          right: 0;\n        }\n      }\n\n      &[data-popper-placement^='right'] {\n        > ${StyledPopoverArrow} {\n          inset-inline-end: calc(100% + 0.25rem);\n          margin-block-start: -0.25rem;\n\n          ::after {\n            border-bottom-left-radius: calc(${borderRadius} / 4);\n          }\n        }\n\n        ::before {\n          content: '';\n          position: absolute;\n          width: ${offset}px;\n          left: -${offset}px;\n          top: 0;\n          bottom: 0;\n        }\n      }\n\n      &[data-popper-placement^='left'] {\n        > ${StyledPopoverArrow} {\n          left: calc(100% - 0.25rem);\n          margin-block-start: -0.25rem;\n\n          ::after {\n            border-top-right-radius: calc(${borderRadius} / 4);\n          }\n        }\n\n        ::before {\n          content: '';\n          position: absolute;\n          width: ${offset}px;\n          right: -${offset}px;\n          top: 0;\n          bottom: 0;\n        }\n      }\n    `;\n  }\n);\n\nStyledPopover.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"Popover.styles.js","sourceRoot":"","sources":["../../../src/components/Popover/Popover.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAC1C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,MAAM,EAAE,EAAE,YAAY,EAAE,GAAG,EAAE,EAC9B,EACF,EACF,EAAE,EAAE,CAAC,GAAG,CAAA;;;;;;;;;;;;;gBAaK,GAAG;;;GAGhB,CACF,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CACrC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,eAAe,EAAE,YAAY,EAC7B,SAAS,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAC9B,MAAM,EAAE,EAAE,YAAY,EAAE,GAAG,EAAE,EAC9B,EACD,UAAU,EAAE,EACV,IAAI,EAAE,EAAE,UAAU,EAAE,eAAe,EAAE,gBAAgB,EAAE,EACxD,EACF,EACD,MAAM,EACP,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;;;;iBAMG,MAAM;0BACG,UAAU;4BACR,gBAAgB;;;;;;;kBAO1B,GAAG;;;;;;;;;;;;;;YAcT,kBAAkB;;;;+CAIiB,YAAY;;;;;;;;;;;;;;oBAcvC,MAAM;qBACL,MAAM;;;;;;;YAOf,kBAAkB;;;;2CAIa,YAAY;;;;;;;;;;;;;;oBAcnC,MAAM;kBACR,MAAM;;;;;;;YAOZ,kBAAkB;;;;8CAIgB,YAAY;;;;;;;;;;;;;;mBAcvC,MAAM;mBACN,MAAM;;;;;;;YAOb,kBAAkB;;;;4CAIc,YAAY;;;;;;;;;;;;;;mBAcrC,MAAM;oBACL,MAAM;;;;;KAKrB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\n\nexport const StyledPopoverArrow = styled.div(\n  ({\n    theme: {\n      base: {\n        shadow: { 'low-filter': low }\n      }\n    }\n  }) => css`\n    background-color: inherit;\n\n    ::before,\n    ::after {\n      content: '';\n      display: block;\n      position: absolute;\n      background-color: inherit;\n    }\n\n    ::before {\n      inset: -0.25rem;\n      filter: ${low};\n      transform: rotate(45deg);\n    }\n  `\n);\n\nStyledPopoverArrow.defaultProps = defaultThemeProp;\n\nexport const StyledPopover = styled.div<{ offset?: number }>(\n  ({\n    theme: {\n      base: {\n        'border-radius': borderRadius,\n        'z-index': { popover: zIndex },\n        shadow: { 'low-filter': low }\n      },\n      components: {\n        card: { background, 'border-radius': cardBorderRadius }\n      }\n    },\n    offset\n  }) => {\n    return css`\n      /*\n        Margin should never be used with Popper.\n        https://popper.js.org/docs/v2/migration-guide/#4-remove-all-css-margins\n      */\n      margin: 0 !important;\n      z-index: ${zIndex};\n      background-color: ${background};\n      border-radius: calc(${cardBorderRadius});\n\n      ::after {\n        content: '';\n        background-color: inherit;\n        border-radius: inherit;\n        z-index: -2; /* Make sure it's under the arrow. */\n        filter: ${low};\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n      }\n\n      &[data-popper-reference-hidden='true'] {\n        visibility: hidden;\n        pointer-events: none;\n      }\n\n      &[data-popper-placement^='top'] {\n        > ${StyledPopoverArrow} {\n          top: calc(100%);\n\n          ::before {\n            border-bottom-right-radius: calc(${borderRadius} / 4);\n          }\n\n          ::after {\n            top: -0.75rem;\n            right: -0.75rem;\n            bottom: 0;\n            left: -0.75rem;\n          }\n        }\n\n        ::before {\n          content: '';\n          position: absolute;\n          height: ${offset}px;\n          bottom: -${offset}px;\n          left: 0;\n          right: 0;\n        }\n      }\n\n      &[data-popper-placement^='bottom'] {\n        > ${StyledPopoverArrow} {\n          bottom: calc(100%);\n\n          ::before {\n            border-top-left-radius: calc(${borderRadius} / 4);\n          }\n\n          ::after {\n            top: 0;\n            right: -0.75rem;\n            bottom: -0.75rem;\n            left: -0.75rem;\n          }\n        }\n\n        ::before {\n          content: '';\n          position: absolute;\n          height: ${offset}px;\n          top: -${offset}px;\n          left: 0;\n          right: 0;\n        }\n      }\n\n      &[data-popper-placement^='right'] {\n        > ${StyledPopoverArrow} {\n          right: calc(100%);\n\n          ::before {\n            border-bottom-left-radius: calc(${borderRadius} / 4);\n          }\n\n          ::after {\n            top: -0.75rem;\n            right: -0.75rem;\n            bottom: -0.75rem;\n            left: 0;\n          }\n        }\n\n        ::before {\n          content: '';\n          position: absolute;\n          width: ${offset}px;\n          left: -${offset}px;\n          top: 0;\n          bottom: 0;\n        }\n      }\n\n      &[data-popper-placement^='left'] {\n        > ${StyledPopoverArrow} {\n          left: calc(100%);\n\n          ::before {\n            border-top-right-radius: calc(${borderRadius} / 4);\n          }\n\n          ::after {\n            top: -0.75rem;\n            right: 0;\n            bottom: -0.75rem;\n            left: -0.75rem;\n          }\n        }\n\n        ::before {\n          content: '';\n          position: absolute;\n          width: ${offset}px;\n          right: -${offset}px;\n          top: 0;\n          bottom: 0;\n        }\n      }\n    `;\n  }\n);\n\nStyledPopover.defaultProps = defaultThemeProp;\n"]}

package/lib/components/Table/Table.d.ts

@@ -44,6 +44,7 @@ export interface TableProps<RowData extends DefaultRowData = DefaultRowData> ext
     /** Ref for the wrapping element. */
     ref?: Ref<HTMLTableElement>;
 }
+export declare const StyledTableWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 declare const Table: <RowData extends DefaultRowData = DefaultRowData>(props: TableProps<RowData> & ForwardProps) => ReactElement | null;
 export default Table;
 //# sourceMappingURL=Table.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,GAAG,EAAE,SAAS,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAIjG,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAqB,MAAM,aAAa,CAAC;AAQ9F,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,WAAW,CAAC,OAAO,SAAS,cAAc,GAAG,cAAc;IAC1E,gIAAgI;IAChI,QAAQ,EAAE,aAAa,CAAC,OAAO,CAAC,GAAG,MAAM,OAAO,CAAC;IACjD,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,UAAU,CAAC,OAAO,SAAS,cAAc,GAAG,cAAc,CACzE,SAAQ,SAAS,EACf,cAAc;IAChB,wDAAwD;IACxD,OAAO,EAAE,WAAW,CAAC,OAAO,CAAC,EAAE,CAAC;IAChC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC;IACjB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4DAA4D;IAC5D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAgKD,QAAA,MAAM,KAAK,kGAiEN,YAAY,GAAG,IAAI,CAAC;AAEzB,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,GAAG,EAAE,SAAS,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAIjG,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAqB,MAAM,aAAa,CAAC;AAQ9F,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,WAAW,CAAC,OAAO,SAAS,cAAc,GAAG,cAAc;IAC1E,gIAAgI;IAChI,QAAQ,EAAE,aAAa,CAAC,OAAO,CAAC,GAAG,MAAM,OAAO,CAAC;IACjD,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,UAAU,CAAC,OAAO,SAAS,cAAc,GAAG,cAAc,CACzE,SAAQ,SAAS,EACf,cAAc;IAChB,wDAAwD;IACxD,OAAO,EAAE,WAAW,CAAC,OAAO,CAAC,EAAE,CAAC;IAChC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC;IACjB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4DAA4D;IAC5D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAmJD,eAAO,MAAM,kBAAkB,yGAG9B,CAAC;AAUF,QAAA,MAAM,KAAK,kGAiEN,YAAY,GAAG,IAAI,CAAC;AAEzB,eAAe,KAAK,CAAC"}

package/lib/components/Table/Table.js

@@ -105,7 +105,7 @@ const StyledLoadingCell = styled.td `
   position: relative;
   height: 6rem;
 `;
-const StyledTableWrapper = styled.div `
+export const StyledTableWrapper = styled.div `
   /* Setting it on a table element requires 'display: block' which breaks a11y. */
   overflow-x: auto;
 `;

package/lib/components/Table/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, PropsWithoutRef, Ref, ReactNode, ReactElement, ComponentType } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport type { BaseProps, ForwardProps, NoChildrenProp, PropsWithDefaults } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize, FontSize } from '../../styles';\nimport Progress from '../Progress';\nimport Text from '../Text';\nimport EmptyState from '../EmptyState';\nimport Card, { CardContent } from '../Card';\n\nexport interface DefaultRowData {\n  id: string | number;\n}\n\nexport interface ColumnProps<RowData extends DefaultRowData = DefaultRowData> {\n  /** Render cell content for a column with a component or by passing a property key on the row object to serve as an accessor. */\n  renderer: ComponentType<RowData> | keyof RowData;\n  /** The visual label for the column. */\n  label: string;\n  /**\n   * The text alignment of the column header and the row contents for the column.\n   * @default \"left\"\n   */\n  align?: 'left' | 'center' | 'right';\n  /**\n   * If true, this column will not wrap text on overflow.\n   * @default false\n   */\n  noWrap?: boolean;\n}\n\nexport interface TableProps<RowData extends DefaultRowData = DefaultRowData>\n  extends BaseProps,\n    NoChildrenProp {\n  /** The column headers that will structure the Table. */\n  columns: ColumnProps<RowData>[];\n  /**\n   * The content of the Table, represented as an array of objects with key value pairs.\n   * @default []\n   */\n  data?: RowData[];\n  /**\n   * Should the data rows highlight when the mouse hovers over them.\n   * @default false\n   */\n  hoverHighlight?: boolean;\n  /**\n   * Indicates if the data to populate the Table is still loading.\n   * @default false\n   */\n  loading?: boolean;\n  /** A message to be displayed when Table data is loading. */\n  loadingMessage?: string;\n  /** The title that will render above the Table if provided. */\n  title?: ReactNode;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLTableElement>;\n}\n\ntype TablePropsWithDefaults = PropsWithDefaults<TableProps, 'hoverHighlight' | 'loading'>;\n\nconst StyledTable = styled.table<Pick<TablePropsWithDefaults, 'hoverHighlight'>>(props => {\n  const {\n    hoverHighlight,\n    theme: {\n      base: {\n        palette: { 'secondary-background': hoverBg },\n        spacing\n      },\n      components: { table }\n    }\n  } = props;\n\n  const verticalSpacingHeader = `calc(${table.header['vertical-spacing']} * ${spacing})`;\n  const verticalSpacingBody = `calc(${table.body['vertical-spacing']} * ${spacing})`;\n  const horizontalSpacing = `calc(max(${table.header['horizontal-spacing']}, ${table.body['horizontal-spacing']}) * ${spacing})`;\n\n  const borderHeader = `${table.header['border-width']} solid ${table.header['border-color']}`;\n  const borderBody = `${table.body['border-width']} solid ${table.body['border-color']}`;\n\n  return css`\n    border-collapse: collapse;\n    width: 100%;\n    background-color: transparent;\n\n    thead {\n      tr th {\n        padding: ${`${table.spacing['vertical-inner'] ? verticalSpacingHeader : '0'} ${\n          table.spacing['horizontal-inner'] ? horizontalSpacing : '0'\n        }`};\n        border-bottom: ${table.border['horizontal-inner'] ? borderHeader : 'none'};\n        border-inline-end: ${table.border['vertical-inner'] ? borderHeader : 'none'};\n      }\n\n      tr:first-of-type th {\n        padding-top: ${table.spacing['vertical-outer'] ? verticalSpacingHeader : '0'};\n        border-top: ${table.border['horizontal-outer'] ? borderHeader : 'none'};\n      }\n\n      tr th:first-of-type {\n        padding-inline-start: ${table.spacing['horizontal-outer'] ? horizontalSpacing : '0'};\n        border-inline-start: ${table.border['vertical-outer'] ? borderHeader : 'none'};\n      }\n\n      tr th:last-of-type {\n        padding-inline-end: ${table.spacing['horizontal-outer'] ? horizontalSpacing : '0'};\n        border-inline-end: ${table.border['vertical-outer'] ? borderHeader : 'none'};\n      }\n    }\n\n    tbody {\n      tr td {\n        padding: ${`${table.spacing['vertical-inner'] ? verticalSpacingBody : '0'} ${\n          table.spacing['horizontal-inner'] ? horizontalSpacing : '0'\n        }`};\n        border-bottom: ${table.border['horizontal-inner'] ? borderBody : 'none'};\n        border-inline-end: ${table.border['vertical-inner'] ? borderBody : 'none'};\n      }\n\n      tr:last-of-type td {\n        padding-bottom: ${table.spacing['vertical-outer'] ? verticalSpacingBody : '0'};\n        border-bottom: ${table.border['horizontal-outer'] ? borderBody : 'none'};\n      }\n\n      tr td:first-of-type {\n        padding-inline-start: ${table.spacing['horizontal-outer'] ? horizontalSpacing : '0'};\n        border-inline-start: ${table.border['vertical-outer'] ? borderBody : 'none'};\n      }\n\n      tr td:last-of-type {\n        padding-inline-end: ${table.spacing['horizontal-outer'] ? horizontalSpacing : '0'};\n        border-inline-end: ${table.border['vertical-outer'] ? borderBody : 'none'};\n      }\n    }\n\n    ${hoverHighlight &&\n    css`\n      tbody tr:hover td,\n      tbody tr:focus-within td {\n        background-color: ${hoverBg};\n      }\n    `}\n  `;\n});\n\nStyledTable.defaultProps = defaultThemeProp;\n\nconst StyledCell = styled.td<Pick<ColumnProps, 'align' | 'noWrap'>>(\n  ({ align, noWrap = false }) => css`\n    text-align: ${align || 'left'};\n    white-space: ${noWrap ? 'nowrap' : null};\n  `\n);\n\nStyledCell.defaultProps = defaultThemeProp;\n\nconst StyledHeaderCell = styled.th(\n  ({\n    theme: {\n      base: { 'font-size': fontSize, 'font-scale': fontScale },\n      components: {\n        table: { header }\n      }\n    }\n  }) => {\n    const fontSizes = calculateFontSize(fontSize, fontScale);\n\n    return css`\n      font-size: ${fontSizes[header['font-size'] as FontSize]};\n      font-weight: ${header['font-weight']};\n      color: ${header['foreground-color']};\n      background-color: ${header['background-color']};\n    `;\n  }\n);\n\nStyledHeaderCell.defaultProps = defaultThemeProp;\n\nconst StyledBodyCell = styled.td(\n  ({\n    theme: {\n      components: {\n        table: { body }\n      }\n    }\n  }) => css`\n    color: ${body['foreground-color']};\n    background-color: ${body['background-color']};\n  `\n);\n\nStyledBodyCell.defaultProps = defaultThemeProp;\n\nconst StyledEmptyCell = styled.td`\n  padding: calc(2 * ${props => props.theme.base.spacing});\n`;\n\nStyledEmptyCell.defaultProps = defaultThemeProp;\n\nconst StyledLoadingCell = styled.td`\n  position: relative;\n  height: 6rem;\n`;\n\nconst StyledTableWrapper = styled.div`\n  /* Setting it on a table element requires 'display: block' which breaks a11y. */\n  overflow-x: auto;\n`;\n\nStyledTableWrapper.defaultProps = defaultThemeProp;\n\nconst StyledTableCaption = styled.caption`\n  ${hideVisually}\n`;\n\nStyledTableCaption.defaultProps = defaultThemeProp;\n\nconst Table = forwardRef((props: PropsWithoutRef<TableProps>, ref: Ref<HTMLTableElement>) => {\n  const {\n    columns,\n    data = [],\n    hoverHighlight = false,\n    loading = false,\n    loadingMessage = '',\n    title,\n    ...restProps\n  } = props;\n\n  return (\n    <Card>\n      <CardContent container={{ rowGap: 1 }}>\n        {title && (\n          <Text variant='h2' as='span' aria-hidden>\n            {title}\n          </Text>\n        )}\n        <StyledTableWrapper>\n          <StyledTable ref={ref} hoverHighlight={hoverHighlight} {...restProps}>\n            {title && <StyledTableCaption>{title}</StyledTableCaption>}\n            <thead>\n              <tr>\n                {columns.map(col => (\n                  <StyledCell as={StyledHeaderCell} {...col} scope='col' key={col.label}>\n                    {col.label}\n                  </StyledCell>\n                ))}\n              </tr>\n            </thead>\n            <tbody>\n              {loading && (\n                <tr>\n                  <StyledLoadingCell colSpan={columns.length}>\n                    <Progress placement='local' message={loadingMessage} />\n                  </StyledLoadingCell>\n                </tr>\n              )}\n              {data.length > 0 &&\n                !loading &&\n                data.map(row => (\n                  <tr key={row.id}>\n                    {columns.map(({ renderer: Renderer, ...col }) => (\n                      <StyledCell as={StyledBodyCell} {...col} key={`${col.label}-${row.id}`}>\n                        {typeof Renderer === 'function' ? <Renderer {...row} /> : row[Renderer]}\n                      </StyledCell>\n                    ))}\n                  </tr>\n                ))}\n              {data.length === 0 && !loading && (\n                <tr>\n                  <StyledEmptyCell colSpan={columns.length}>\n                    <EmptyState />\n                  </StyledEmptyCell>\n                </tr>\n              )}\n            </tbody>\n          </StyledTable>\n        </StyledTableWrapper>\n      </CardContent>\n    </Card>\n  );\n}) as <RowData extends DefaultRowData = DefaultRowData>(\n  props: TableProps<RowData> & ForwardProps\n) => ReactElement | null;\n\nexport default Table;\n"]}
+{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, PropsWithoutRef, Ref, ReactNode, ReactElement, ComponentType } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport type { BaseProps, ForwardProps, NoChildrenProp, PropsWithDefaults } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize, FontSize } from '../../styles';\nimport Progress from '../Progress';\nimport Text from '../Text';\nimport EmptyState from '../EmptyState';\nimport Card, { CardContent } from '../Card';\n\nexport interface DefaultRowData {\n  id: string | number;\n}\n\nexport interface ColumnProps<RowData extends DefaultRowData = DefaultRowData> {\n  /** Render cell content for a column with a component or by passing a property key on the row object to serve as an accessor. */\n  renderer: ComponentType<RowData> | keyof RowData;\n  /** The visual label for the column. */\n  label: string;\n  /**\n   * The text alignment of the column header and the row contents for the column.\n   * @default \"left\"\n   */\n  align?: 'left' | 'center' | 'right';\n  /**\n   * If true, this column will not wrap text on overflow.\n   * @default false\n   */\n  noWrap?: boolean;\n}\n\nexport interface TableProps<RowData extends DefaultRowData = DefaultRowData>\n  extends BaseProps,\n    NoChildrenProp {\n  /** The column headers that will structure the Table. */\n  columns: ColumnProps<RowData>[];\n  /**\n   * The content of the Table, represented as an array of objects with key value pairs.\n   * @default []\n   */\n  data?: RowData[];\n  /**\n   * Should the data rows highlight when the mouse hovers over them.\n   * @default false\n   */\n  hoverHighlight?: boolean;\n  /**\n   * Indicates if the data to populate the Table is still loading.\n   * @default false\n   */\n  loading?: boolean;\n  /** A message to be displayed when Table data is loading. */\n  loadingMessage?: string;\n  /** The title that will render above the Table if provided. */\n  title?: ReactNode;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLTableElement>;\n}\n\ntype TablePropsWithDefaults = PropsWithDefaults<TableProps, 'hoverHighlight' | 'loading'>;\n\nconst StyledTable = styled.table<Pick<TablePropsWithDefaults, 'hoverHighlight'>>(props => {\n  const {\n    hoverHighlight,\n    theme: {\n      base: {\n        palette: { 'secondary-background': hoverBg },\n        spacing\n      },\n      components: { table }\n    }\n  } = props;\n\n  const verticalSpacingHeader = `calc(${table.header['vertical-spacing']} * ${spacing})`;\n  const verticalSpacingBody = `calc(${table.body['vertical-spacing']} * ${spacing})`;\n  const horizontalSpacing = `calc(max(${table.header['horizontal-spacing']}, ${table.body['horizontal-spacing']}) * ${spacing})`;\n\n  const borderHeader = `${table.header['border-width']} solid ${table.header['border-color']}`;\n  const borderBody = `${table.body['border-width']} solid ${table.body['border-color']}`;\n\n  return css`\n    border-collapse: collapse;\n    width: 100%;\n    background-color: transparent;\n\n    thead {\n      tr th {\n        padding: ${`${table.spacing['vertical-inner'] ? verticalSpacingHeader : '0'} ${\n          table.spacing['horizontal-inner'] ? horizontalSpacing : '0'\n        }`};\n        border-bottom: ${table.border['horizontal-inner'] ? borderHeader : 'none'};\n        border-inline-end: ${table.border['vertical-inner'] ? borderHeader : 'none'};\n      }\n\n      tr:first-of-type th {\n        padding-top: ${table.spacing['vertical-outer'] ? verticalSpacingHeader : '0'};\n        border-top: ${table.border['horizontal-outer'] ? borderHeader : 'none'};\n      }\n\n      tr th:first-of-type {\n        padding-inline-start: ${table.spacing['horizontal-outer'] ? horizontalSpacing : '0'};\n        border-inline-start: ${table.border['vertical-outer'] ? borderHeader : 'none'};\n      }\n\n      tr th:last-of-type {\n        padding-inline-end: ${table.spacing['horizontal-outer'] ? horizontalSpacing : '0'};\n        border-inline-end: ${table.border['vertical-outer'] ? borderHeader : 'none'};\n      }\n    }\n\n    tbody {\n      tr td {\n        padding: ${`${table.spacing['vertical-inner'] ? verticalSpacingBody : '0'} ${\n          table.spacing['horizontal-inner'] ? horizontalSpacing : '0'\n        }`};\n        border-bottom: ${table.border['horizontal-inner'] ? borderBody : 'none'};\n        border-inline-end: ${table.border['vertical-inner'] ? borderBody : 'none'};\n      }\n\n      tr:last-of-type td {\n        padding-bottom: ${table.spacing['vertical-outer'] ? verticalSpacingBody : '0'};\n        border-bottom: ${table.border['horizontal-outer'] ? borderBody : 'none'};\n      }\n\n      tr td:first-of-type {\n        padding-inline-start: ${table.spacing['horizontal-outer'] ? horizontalSpacing : '0'};\n        border-inline-start: ${table.border['vertical-outer'] ? borderBody : 'none'};\n      }\n\n      tr td:last-of-type {\n        padding-inline-end: ${table.spacing['horizontal-outer'] ? horizontalSpacing : '0'};\n        border-inline-end: ${table.border['vertical-outer'] ? borderBody : 'none'};\n      }\n    }\n\n    ${hoverHighlight &&\n    css`\n      tbody tr:hover td,\n      tbody tr:focus-within td {\n        background-color: ${hoverBg};\n      }\n    `}\n  `;\n});\n\nStyledTable.defaultProps = defaultThemeProp;\n\nconst StyledCell = styled.td<Pick<ColumnProps, 'align' | 'noWrap'>>(\n  ({ align, noWrap = false }) => css`\n    text-align: ${align || 'left'};\n    white-space: ${noWrap ? 'nowrap' : null};\n  `\n);\n\nStyledCell.defaultProps = defaultThemeProp;\n\nconst StyledHeaderCell = styled.th(\n  ({\n    theme: {\n      base: { 'font-size': fontSize, 'font-scale': fontScale },\n      components: {\n        table: { header }\n      }\n    }\n  }) => {\n    const fontSizes = calculateFontSize(fontSize, fontScale);\n\n    return css`\n      font-size: ${fontSizes[header['font-size'] as FontSize]};\n      font-weight: ${header['font-weight']};\n      color: ${header['foreground-color']};\n      background-color: ${header['background-color']};\n    `;\n  }\n);\n\nStyledHeaderCell.defaultProps = defaultThemeProp;\n\nconst StyledBodyCell = styled.td(\n  ({\n    theme: {\n      components: {\n        table: { body }\n      }\n    }\n  }) => css`\n    color: ${body['foreground-color']};\n    background-color: ${body['background-color']};\n  `\n);\n\nStyledBodyCell.defaultProps = defaultThemeProp;\n\nconst StyledEmptyCell = styled.td`\n  padding: calc(2 * ${props => props.theme.base.spacing});\n`;\n\nStyledEmptyCell.defaultProps = defaultThemeProp;\n\nconst StyledLoadingCell = styled.td`\n  position: relative;\n  height: 6rem;\n`;\n\nexport const StyledTableWrapper = styled.div`\n  /* Setting it on a table element requires 'display: block' which breaks a11y. */\n  overflow-x: auto;\n`;\n\nStyledTableWrapper.defaultProps = defaultThemeProp;\n\nconst StyledTableCaption = styled.caption`\n  ${hideVisually}\n`;\n\nStyledTableCaption.defaultProps = defaultThemeProp;\n\nconst Table = forwardRef((props: PropsWithoutRef<TableProps>, ref: Ref<HTMLTableElement>) => {\n  const {\n    columns,\n    data = [],\n    hoverHighlight = false,\n    loading = false,\n    loadingMessage = '',\n    title,\n    ...restProps\n  } = props;\n\n  return (\n    <Card>\n      <CardContent container={{ rowGap: 1 }}>\n        {title && (\n          <Text variant='h2' as='span' aria-hidden>\n            {title}\n          </Text>\n        )}\n        <StyledTableWrapper>\n          <StyledTable ref={ref} hoverHighlight={hoverHighlight} {...restProps}>\n            {title && <StyledTableCaption>{title}</StyledTableCaption>}\n            <thead>\n              <tr>\n                {columns.map(col => (\n                  <StyledCell as={StyledHeaderCell} {...col} scope='col' key={col.label}>\n                    {col.label}\n                  </StyledCell>\n                ))}\n              </tr>\n            </thead>\n            <tbody>\n              {loading && (\n                <tr>\n                  <StyledLoadingCell colSpan={columns.length}>\n                    <Progress placement='local' message={loadingMessage} />\n                  </StyledLoadingCell>\n                </tr>\n              )}\n              {data.length > 0 &&\n                !loading &&\n                data.map(row => (\n                  <tr key={row.id}>\n                    {columns.map(({ renderer: Renderer, ...col }) => (\n                      <StyledCell as={StyledBodyCell} {...col} key={`${col.label}-${row.id}`}>\n                        {typeof Renderer === 'function' ? <Renderer {...row} /> : row[Renderer]}\n                      </StyledCell>\n                    ))}\n                  </tr>\n                ))}\n              {data.length === 0 && !loading && (\n                <tr>\n                  <StyledEmptyCell colSpan={columns.length}>\n                    <EmptyState />\n                  </StyledEmptyCell>\n                </tr>\n              )}\n            </tbody>\n          </StyledTable>\n        </StyledTableWrapper>\n      </CardContent>\n    </Card>\n  );\n}) as <RowData extends DefaultRowData = DefaultRowData>(\n  props: TableProps<RowData> & ForwardProps\n) => ReactElement | null;\n\nexport default Table;\n"]}

package/lib/components/Tabs/TabPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAE,SAAS,EAAE,GAAG,EAAmB,MAAM,OAAO,CAAC;AAGvF,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,UAAU,aAAa;IACrB,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd;;;SAGK;IACL,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gCAAgC;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAMD,eAAO,MAAM,cAAc;aAAyB,OAAO;SAczD,CAAC;AAEH,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAyB7D,CAAC;AAIF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"TabPanel.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAE,SAAS,EAAE,GAAG,EAAmB,MAAM,OAAO,CAAC;AAGvF,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,UAAU,aAAa;IACrB,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd;;;SAGK;IACL,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gCAAgC;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAMD,eAAO,MAAM,cAAc;aAChB,OAAO;SAgBhB,CAAC;AAEH,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAyB7D,CAAC;AAIF,eAAe,QAAQ,CAAC"}

package/lib/components/Tabs/TabPanel.js

@@ -8,6 +8,7 @@ export const StyledTabPanel = styled.div(({ current }) => {
     return css `
     min-width: 0;
     max-width: 100%;
+    height: 100%;
 
     :focus {
       outline: none;

package/lib/components/Tabs/TabPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.js","sourceRoot":"","sources":["../../../src/components/Tabs/TabPanel.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsD,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAkBhD,MAAM,YAAY,GAA2B;IAC3C,KAAK,EAAE,EAAE;CACV,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAuB,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;IAC7E,OAAO,GAAG,CAAA;;;;;;;;MAQN,CAAC,OAAO;QACV,GAAG,CAAA;;KAEF;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,QAAQ,GAAoD,UAAU,CAC1E,CACE,EAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAkC,EAC/E,GAAyB,EACzB,EAAE;IACF,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,YAAY,IAAI,KAAK,EAAE;YACzB,OAAO,YAAY,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;SAC/C;QACD,OAAO,CAAC,CAAC;IACX,CAAC,CAAC;IACF,OAAO,CACL,KAAC,cAAc,OACT,SAAS,EACb,OAAO,EAAE,YAAY,IAAI,KAAK,CAAC,CAAC,CAAC,YAAY,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,EAC9D,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,WAAW,EAAE,qBACN,GAAG,KAAK,EAAE,EAC3B,EAAE,EAAE,GAAG,KAAK,QAAQ,EACpB,GAAG,EAAE,GAAG,YAEP,QAAQ,WACM,CAClB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,QAAQ,CAAC,YAAY,GAAG,YAAY,CAAC;AAErC,eAAe,QAAQ,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, ReactNode, Ref, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ForwardProps } from '../../types';\n\ninterface TabPanelProps {\n  /** The id of the Tab that the tab panel is related to. */\n  tabId: string;\n  /**\n   * The current selected value of the tabs. Controls the visibility of the tab panel.\n   * The tabsValue must match the tabId in order for the TabPanel to show itself.\n   * */\n  currentTabId?: string;\n  /** Content of the tab panel. */\n  children: ReactNode;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst defaultProps: Partial<TabPanelProps> = {\n  tabId: ''\n};\n\nexport const StyledTabPanel = styled.div<{ current: boolean }>(({ current }) => {\n  return css`\n    min-width: 0;\n    max-width: 100%;\n\n    :focus {\n      outline: none;\n    }\n\n    ${!current &&\n    css`\n      display: none;\n    `}\n  `;\n});\n\nconst TabPanel: FunctionComponent<TabPanelProps & ForwardProps> = forwardRef(\n  (\n    { tabId, currentTabId, children, ...restProps }: PropsWithoutRef<TabPanelProps>,\n    ref: TabPanelProps['ref']\n  ) => {\n    const getTabIndex = () => {\n      if (currentTabId && tabId) {\n        return currentTabId === tabId ? 0 : undefined;\n      }\n      return 0;\n    };\n    return (\n      <StyledTabPanel\n        {...restProps}\n        current={currentTabId && tabId ? currentTabId === tabId : true}\n        role='tabpanel'\n        tabIndex={getTabIndex()}\n        aria-labelledby={`${tabId}`}\n        id={`${tabId}-panel`}\n        ref={ref}\n      >\n        {children}\n      </StyledTabPanel>\n    );\n  }\n);\n\nTabPanel.defaultProps = defaultProps;\n\nexport default TabPanel;\n"]}
+{"version":3,"file":"TabPanel.js","sourceRoot":"","sources":["../../../src/components/Tabs/TabPanel.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsD,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAkBhD,MAAM,YAAY,GAA2B;IAC3C,KAAK,EAAE,EAAE;CACV,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAErC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;IACjB,OAAO,GAAG,CAAA;;;;;;;;;MASN,CAAC,OAAO;QACV,GAAG,CAAA;;KAEF;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,QAAQ,GAAoD,UAAU,CAC1E,CACE,EAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAkC,EAC/E,GAAyB,EACzB,EAAE;IACF,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,YAAY,IAAI,KAAK,EAAE;YACzB,OAAO,YAAY,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;SAC/C;QACD,OAAO,CAAC,CAAC;IACX,CAAC,CAAC;IACF,OAAO,CACL,KAAC,cAAc,OACT,SAAS,EACb,OAAO,EAAE,YAAY,IAAI,KAAK,CAAC,CAAC,CAAC,YAAY,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,EAC9D,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,WAAW,EAAE,qBACN,GAAG,KAAK,EAAE,EAC3B,EAAE,EAAE,GAAG,KAAK,QAAQ,EACpB,GAAG,EAAE,GAAG,YAEP,QAAQ,WACM,CAClB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,QAAQ,CAAC,YAAY,GAAG,YAAY,CAAC;AAErC,eAAe,QAAQ,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, ReactNode, Ref, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ForwardProps } from '../../types';\n\ninterface TabPanelProps {\n  /** The id of the Tab that the tab panel is related to. */\n  tabId: string;\n  /**\n   * The current selected value of the tabs. Controls the visibility of the tab panel.\n   * The tabsValue must match the tabId in order for the TabPanel to show itself.\n   * */\n  currentTabId?: string;\n  /** Content of the tab panel. */\n  children: ReactNode;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst defaultProps: Partial<TabPanelProps> = {\n  tabId: ''\n};\n\nexport const StyledTabPanel = styled.div<{\n  current: boolean;\n}>(({ current }) => {\n  return css`\n    min-width: 0;\n    max-width: 100%;\n    height: 100%;\n\n    :focus {\n      outline: none;\n    }\n\n    ${!current &&\n    css`\n      display: none;\n    `}\n  `;\n});\n\nconst TabPanel: FunctionComponent<TabPanelProps & ForwardProps> = forwardRef(\n  (\n    { tabId, currentTabId, children, ...restProps }: PropsWithoutRef<TabPanelProps>,\n    ref: TabPanelProps['ref']\n  ) => {\n    const getTabIndex = () => {\n      if (currentTabId && tabId) {\n        return currentTabId === tabId ? 0 : undefined;\n      }\n      return 0;\n    };\n    return (\n      <StyledTabPanel\n        {...restProps}\n        current={currentTabId && tabId ? currentTabId === tabId : true}\n        role='tabpanel'\n        tabIndex={getTabIndex()}\n        aria-labelledby={`${tabId}`}\n        id={`${tabId}-panel`}\n        ref={ref}\n      >\n        {children}\n      </StyledTabPanel>\n    );\n  }\n);\n\nTabPanel.defaultProps = defaultProps;\n\nexport default TabPanel;\n"]}

package/lib/components/TextArea/TextArea.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.styles.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.styles.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,cAAc;eAAgC,OAAO;SAUzD,CAAC;AAIH,eAAe,cAAc,CAAC"}
+{"version":3,"file":"TextArea.styles.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.styles.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,cAAc;eAAgC,OAAO;SAWzD,CAAC;AAIH,eAAe,cAAc,CAAC"}

package/lib/components/TextArea/TextArea.styles.js

@@ -5,6 +5,7 @@ const StyledTextArea = styled.textarea(({ resizable }) => {
     width: 100%;
     min-height: ${props => props.theme.components['text-area']['min-height']};
     padding: ${props => props.theme.components['text-area'].padding};
+    -webkit-appearance: none;
     ${!resizable &&
         css `
       resize: none;

package/lib/components/TextArea/TextArea.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.styles.js","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,cAAc,GAAG,MAAM,CAAC,QAAQ,CAAyB,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE;IAC/E,OAAO,GAAG,CAAA;;kBAEM,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,YAAY,CAAC;eAC7D,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,OAAO;MAC7D,CAAC,SAAS;QACZ,GAAG,CAAA;;KAEF;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,eAAe,cAAc,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\n\nconst StyledTextArea = styled.textarea<{ resizable: boolean }>(({ resizable }) => {\n  return css`\n    width: 100%;\n    min-height: ${props => props.theme.components['text-area']['min-height']};\n    padding: ${props => props.theme.components['text-area'].padding};\n    ${!resizable &&\n    css`\n      resize: none;\n    `}\n  `;\n});\n\nStyledTextArea.defaultProps = defaultThemeProp;\n\nexport default StyledTextArea;\n"]}
+{"version":3,"file":"TextArea.styles.js","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,cAAc,GAAG,MAAM,CAAC,QAAQ,CAAyB,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE;IAC/E,OAAO,GAAG,CAAA;;kBAEM,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,YAAY,CAAC;eAC7D,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,OAAO;;MAE7D,CAAC,SAAS;QACZ,GAAG,CAAA;;KAEF;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,eAAe,cAAc,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\n\nconst StyledTextArea = styled.textarea<{ resizable: boolean }>(({ resizable }) => {\n  return css`\n    width: 100%;\n    min-height: ${props => props.theme.components['text-area']['min-height']};\n    padding: ${props => props.theme.components['text-area'].padding};\n    -webkit-appearance: none;\n    ${!resizable &&\n    css`\n      resize: none;\n    `}\n  `;\n});\n\nStyledTextArea.defaultProps = defaultThemeProp;\n\nexport default StyledTextArea;\n"]}

package/lib/hooks/useI18n.d.ts

@@ -8,6 +8,7 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
     status: string;
     additional_info: string;
     search_placeholder_default: string;
+    description: string;
     remove: string;
     follow: string;
     unfollow: string;
@@ -16,6 +17,7 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
     try_again: string;
     update: string;
     submit: string;
+    select: string;
     edit: string;
     preview: string;
     delete: string;
@@ -120,6 +122,7 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
     x_of_y: string;
     preview_link_arrow_navigation: string;
     go_to_main_content: string;
+    main_content: string;
     app_shell_create: string;
     app_shell_open_nav: string;
     combobox_open_close: string;
@@ -198,6 +201,7 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
     rte_anchor: string;
     rte_image: string;
     rte_invalid_html: string;
+    rte_insert_field: string;
     rte_invalid_url: string;
     rte_change_text_format: string;
     rte_toggle_unordered_list: string;
@@ -205,6 +209,12 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
     rte_unindent_selection: string;
     rte_toolbar_instructions: string;
     rte_text_formatting_toolbar: string;
+    rte_image_description_info: string;
+    rte_image_custom_size: string;
+    rte_width_in_pixels: string;
+    rte_height_in_pixels: string;
+    rte_image_settings: string;
+    rte_image_key_command: string;
     feed_new_post: string;
     feed_cancel_conversation: string;
     feed_context: string;
@@ -250,6 +260,14 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
     next_suggested_reply: string;
     prev_suggested_reply: string;
     dismiss_suggested_replies: string;
+    unique_entities: {
+        zero: string;
+        one: string;
+        two: string;
+        few: string;
+        many: string;
+        other: string;
+    };
     more_count: string;
     empty_search: string;
     new_messages: string;
@@ -602,6 +620,8 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
     add_node: string;
     search_nodes: string;
     zoom_level: string;
+    close_configuration_panel: string;
+    clear_object_summary: string;
 }>>;
 export default useI18n;
 //# sourceMappingURL=useI18n.d.ts.map

package/lib/hooks/useI18n.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useI18n.d.ts","sourceRoot":"","sources":["../../src/hooks/useI18n.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAGZ,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"useI18n.d.ts","sourceRoot":"","sources":["../../src/hooks/useI18n.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAGZ,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/lib/i18n/default.d.ts

@@ -4,6 +4,7 @@ declare const _default: {
     status: string;
     additional_info: string;
     search_placeholder_default: string;
+    description: string;
     remove: string;
     follow: string;
     unfollow: string;
@@ -12,6 +13,7 @@ declare const _default: {
     try_again: string;
     update: string;
     submit: string;
+    select: string;
     edit: string;
     preview: string;
     delete: string;
@@ -116,6 +118,7 @@ declare const _default: {
     x_of_y: string;
     preview_link_arrow_navigation: string;
     go_to_main_content: string;
+    main_content: string;
     app_shell_create: string;
     app_shell_open_nav: string;
     combobox_open_close: string;
@@ -194,6 +197,7 @@ declare const _default: {
     rte_anchor: string;
     rte_image: string;
     rte_invalid_html: string;
+    rte_insert_field: string;
     rte_invalid_url: string;
     rte_change_text_format: string;
     rte_toggle_unordered_list: string;
@@ -201,6 +205,12 @@ declare const _default: {
     rte_unindent_selection: string;
     rte_toolbar_instructions: string;
     rte_text_formatting_toolbar: string;
+    rte_image_description_info: string;
+    rte_image_custom_size: string;
+    rte_width_in_pixels: string;
+    rte_height_in_pixels: string;
+    rte_image_settings: string;
+    rte_image_key_command: string;
     feed_new_post: string;
     feed_cancel_conversation: string;
     feed_context: string;
@@ -246,6 +256,14 @@ declare const _default: {
     next_suggested_reply: string;
     prev_suggested_reply: string;
     dismiss_suggested_replies: string;
+    unique_entities: {
+        zero: string;
+        one: string;
+        two: string;
+        few: string;
+        many: string;
+        other: string;
+    };
     more_count: string;
     empty_search: string;
     new_messages: string;
@@ -598,6 +616,8 @@ declare const _default: {
     add_node: string;
     search_nodes: string;
     zoom_level: string;
+    close_configuration_panel: string;
+    clear_object_summary: string;
 };
 export default _default;
 //# sourceMappingURL=default.d.ts.map

package/lib/i18n/default.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../src/i18n/default.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,wBAwrBE"}
+{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../src/i18n/default.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,wBA8sBE"}