@pega/cosmos-react-core 7.0.0-build.9.1 → 7.0.0-rc.1

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

@@ -1 +1 @@
-{"version":3,"file":"CategorySubPage.styles.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/CategorySubPage.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAEhF,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC/D,MAAM,EACJ,IAAI,EAAE,EACJ,OAAO,EAAE,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,EACpD,OAAO,EACR,EACF,GAAG,KAAK,CAAC;IAEV,OAAO,GAAG,CAAA;;WAED,OAAO;;wBAEM,iBAAiB;wBACjB,OAAO;;;;cAIjB,OAAO;;GAElB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3D,MAAM,EACJ,IAAI,EAAE,EACJ,WAAW,EACX,OAAO,EAAE,EAAE,WAAW,EAAE,gBAAgB,EAAE,SAAS,EAAE,EACrD,OAAO,EACR,EACF,GAAG,KAAK,CAAC;IACV,MAAM,WAAW,GAAG,cAAc,CAAC,SAAS,CAAC,CAAC;IAE9C,OAAO,GAAG,CAAA;;;;;;;4BAOgB,OAAO,cAAc,OAAO;;;;;iBAKvC,WAAW;;;;sBAIN,WAAW;;;;;sCAKK,WAAW,CAAC,EAAE;;;;8BAItB,OAAO;;;;;;;;;iCASJ,WAAW,CAAC,EAAE;;;;;;;;;;;;;wBAavB,WAAW,CAAC,UAAU;mBAC3B,WAAW,CAAC,UAAU;;;;;GAKtC,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7D,MAAM,EACJ,IAAI,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE,EAC/B,GAAG,KAAK,CAAC;IAEV,OAAO,GAAG,CAAA;0BACc,OAAO,cAAc,OAAO;;;sCAGhB,WAAW,CAAC,EAAE;;;GAGjD,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,EAAE,CAAA,EAAE,CAAC;AAE9C,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACrD,MAAM,EACJ,IAAI,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,EAC/B,GAAG,KAAK,CAAC;IAEV,OAAO,GAAG,CAAA;uBACW,OAAO;;;sCAGQ,WAAW,CAAC,EAAE;;;GAGjD,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACnD,MAAM,EACJ,IAAI,EAAE,EAAE,WAAW,EAAE,EACtB,GAAG,KAAK,CAAC;IAEV,OAAO,GAAG,CAAA;;;;;;sCAM0B,WAAW,CAAC,EAAE;;;;;;;;;QAS5C,cAAc;;;GAGnB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAEtC,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC9D,MAAM,EACJ,IAAI,EAAE,EACJ,OAAO,EAAE,EAAE,eAAe,EAAE,YAAY,EAAE,EAC1C,eAAe,EAAE,gBAAgB,EACjC,OAAO,EACR,EACF,GAAG,KAAK,CAAC;IAEV,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC;IAE1D,OAAO,GAAG,CAAA;kBACM,YAAY;;;yBAGL,OAAO;gCACA,gBAAgB;;;eAGjC,KAAK;;GAEjB,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,wBAAwB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC/D,MAAM,EACJ,IAAI,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,EAC/B,GAAG,KAAK,CAAC;IAEV,OAAO,GAAG,CAAA;0BACc,OAAO;8BACH,OAAO;;;;oBAIjB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;;;sCAIL,WAAW,CAAC,EAAE;uBAC7B,OAAO;;GAE3B,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,wBAAwB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEzD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvD,MAAM,EACJ,IAAI,EAAE,EACJ,OAAO,EAAE,EAAE,gBAAgB,EAAE,aAAa,EAAE,EAC5C,WAAW,EACX,OAAO,EACR,EACF,GAAG,KAAK,CAAC;IAEV,OAAO,GAAG,CAAA;wBACY,aAAa;;;;;;wBAMb,OAAO;;;sCAGO,WAAW,CAAC,EAAE;;;;;;iCAMnB,WAAW,CAAC,EAAE;;;;;iCAKd,WAAW,CAAC,EAAE;;;;;iCAKd,WAAW,CAAC,EAAE;;;GAG5C,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACrD,MAAM,EACJ,IAAI,EAAE,EACJ,aAAa,EAAE,EAAE,WAAW,EAAE,UAAU,EAAE,EAC1C,WAAW,EAAE,QAAQ,EACrB,YAAY,EAAE,SAAS,EACxB,EACF,GAAG,KAAK,CAAC;IAEV,MAAM,SAAS,GAAG,iBAAiB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IAEzD,OAAO,GAAG,CAAA;iBACK,SAAS,CAAC,GAAe,CAAC;mBACxB,UAAU;GAC1B,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAEhD,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7D,MAAM,EACJ,IAAI,EAAE,EACJ,OAAO,EAAE,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,EACpD,OAAO,EACR,EACF,GAAG,KAAK,CAAC;IAEV,OAAO,GAAG,CAAA;;;;wBAIY,iBAAiB;wBACjB,OAAO,gBAAgB,OAAO;GACnD,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC5D,MAAM,EACJ,IAAI,EAAE,EACJ,WAAW,EACX,OAAO,EAAE,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,EACpD,OAAO,EACR,EACF,GAAG,KAAK,CAAC;IAEV,OAAO,GAAG,CAAA;;wBAEY,iBAAiB;;;;0BAIf,OAAO,cAAc,OAAO;;;;;;;sCAOhB,WAAW,CAAC,EAAE;4BACxB,OAAO,cAAc,OAAO;;GAErD,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACxD,MAAM,EACJ,IAAI,EAAE,EAAE,WAAW,EAAE,EACtB,GAAG,KAAK,CAAC;IAEV,OAAO,GAAG,CAAA;;;;;sCAK0B,WAAW,CAAC,EAAE;;;;GAIjD,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGvC,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport Text from '../Text';\nimport Button from '../Button';\nimport { StyledTab } from '../Tabs/Tab';\nimport { calculateFontSize, getHoverColors, readableColor } from '../../styles';\nimport type { FontSize } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\n\nexport const StyledSkipNavigation = styled(Button)(({ theme }) => {\n  const {\n    base: {\n      palette: { 'primary-background': primaryBackground },\n      spacing\n    }\n  } = theme;\n\n  return css`\n    position: absolute;\n    top: ${spacing};\n    left: -200vw;\n    background-color: ${primaryBackground};\n    padding: calc(2 * ${spacing});\n\n    &:focus,\n    &:active {\n      left: ${spacing};\n    }\n  `;\n});\n\nexport const StyledNavItem = styled(StyledTab)(({ theme }) => {\n  const {\n    base: {\n      breakpoints,\n      palette: { interactive, 'app-background': hoverBase },\n      spacing\n    }\n  } = theme;\n  const hoverColors = getHoverColors(hoverBase);\n\n  return css`\n    height: auto;\n\n    a,\n    button {\n      display: block;\n      width: 100%;\n      padding: calc(0.8 * ${spacing}) calc(2 * ${spacing});\n    }\n\n    &[aria-current='page'] {\n      a {\n        color: ${interactive};\n      }\n\n      &::after {\n        background: ${interactive};\n      }\n    }\n\n    /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      a,\n      button {\n        text-transform: uppercase;\n        padding: calc(1.5 * ${spacing}) 0;\n\n        &:hover {\n          text-decoration: none;\n        }\n      }\n    }\n\n    /* md or above / \"Desktop\" */\n    @media all and (min-width: ${breakpoints.md}) {\n      padding-left: 0;\n      padding-right: 0;\n      border: none;\n\n      &::after {\n        content: none;\n      }\n\n      a,\n      button {\n        &:hover,\n        &:focus {\n          background: ${hoverColors.background};\n          color: ${hoverColors.foreground};\n          text-decoration: none;\n        }\n      }\n    }\n  `;\n});\nStyledNavItem.defaultProps = defaultThemeProp;\n\nexport const StyledNavGroupHeader = styled(Text)(({ theme }) => {\n  const {\n    base: { spacing, breakpoints }\n  } = theme;\n\n  return css`\n    padding: calc(1.5 * ${spacing}) calc(2 * ${spacing});\n\n    /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      display: none;\n    }\n  `;\n});\nStyledNavGroupHeader.defaultProps = defaultThemeProp;\n\nexport const StyledNavGroupList = styled.ul``;\n\nexport const StyledNavGroup = styled.div(({ theme }) => {\n  const {\n    base: { breakpoints, spacing }\n  } = theme;\n\n  return css`\n    margin: calc(2 * ${spacing}) 0;\n\n    /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      margin: 0;\n    }\n  `;\n});\nStyledNavGroup.defaultProps = defaultThemeProp;\n\nexport const StyledNavList = styled.ul(({ theme }) => {\n  const {\n    base: { breakpoints }\n  } = theme;\n\n  return css`\n    &&,\n    li {\n      list-style-type: none;\n    }\n\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      white-space: nowrap;\n\n      li,\n      > div {\n        display: inline-block;\n      }\n    }\n\n    > ${StyledNavGroup}:first-child {\n      margin-top: 0;\n    }\n  `;\n});\n\nexport const StyledNav = styled.nav``;\n\nexport const StyledCategoryIconBlock = styled.div(({ theme }) => {\n  const {\n    base: {\n      palette: { 'brand-primary': brandPrimary },\n      'border-radius': baseBorderRadius,\n      spacing\n    }\n  } = theme;\n\n  const color = tryCatch(() => readableColor(brandPrimary));\n\n  return css`\n    background: ${brandPrimary};\n    width: 2rem;\n    height: 2rem;\n    margin-inline-end: ${spacing};\n    border-radius: calc(0.5 * ${baseBorderRadius});\n\n    svg {\n      color: ${color};\n    }\n  `;\n});\nStyledCategoryIconBlock.defaultProps = defaultThemeProp;\n\nexport const StyledCategoryHeadingRow = styled.div(({ theme }) => {\n  const {\n    base: { breakpoints, spacing }\n  } = theme;\n\n  return css`\n    padding: 0 calc(2 * ${spacing});\n    margin-bottom: calc(2 * ${spacing});\n\n    h1:focus-visible {\n      outline: transparent;\n      box-shadow: ${theme.base.shadow.focus};\n    }\n\n    /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      margin-bottom: ${spacing};\n    }\n  `;\n});\nStyledCategoryHeadingRow.defaultProps = defaultThemeProp;\n\nexport const StyledMenuColumn = styled.div(({ theme }) => {\n  const {\n    base: {\n      palette: { 'app-background': appBackground },\n      breakpoints,\n      spacing\n    }\n  } = theme;\n\n  return css`\n    background-color: ${appBackground};\n    position: sticky;\n    top: 0;\n    overflow-y: auto;\n    max-height: 100%;\n    width: 100%;\n    padding: calc(2 * ${spacing}) 0;\n\n    /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      position: static;\n      padding-bottom: 0;\n    }\n\n    /* md or above */\n    @media all and (min-width: ${breakpoints.md}) {\n      max-width: 14.438rem;\n    }\n\n    /* lg or above */\n    @media all and (min-width: ${breakpoints.lg}) {\n      max-width: 17.563rem;\n    }\n\n    /* xl or above */\n    @media all and (min-width: ${breakpoints.xl}) {\n      max-width: 20.75rem;\n    }\n  `;\n});\nStyledMenuColumn.defaultProps = defaultThemeProp;\n\nexport const StyledPageTitle = styled.h2(({ theme }) => {\n  const {\n    base: {\n      'font-weight': { 'semi-bold': fontWeight },\n      'font-size': fontSize,\n      'font-scale': fontScale\n    }\n  } = theme;\n\n  const fontSizes = calculateFontSize(fontSize, fontScale);\n\n  return css`\n    font-size: ${fontSizes['m' as FontSize]};\n    font-weight: ${fontWeight};\n  `;\n});\nStyledPageTitle.defaultProps = defaultThemeProp;\n\nexport const StyledPageActionCol = styled.div``;\n\nexport const StyledArticleHeader = styled.header(({ theme }) => {\n  const {\n    base: {\n      palette: { 'primary-background': primaryBackground },\n      spacing\n    }\n  } = theme;\n\n  return css`\n    position: sticky;\n    top: 0;\n    z-index: 1;\n    background-color: ${primaryBackground};\n    padding: calc(2 * ${spacing}) 0 calc(3 * ${spacing});\n  `;\n});\nStyledArticleHeader.defaultProps = defaultThemeProp;\n\nexport const StyledPageArticle = styled.article(({ theme }) => {\n  const {\n    base: {\n      breakpoints,\n      palette: { 'primary-background': primaryBackground },\n      spacing\n    }\n  } = theme;\n\n  return css`\n    position: relative;\n    background-color: ${primaryBackground};\n    width: 100%;\n    max-height: 100%;\n    overflow-y: auto;\n    padding: 0 calc(3 * ${spacing}) calc(2 * ${spacing});\n\n    &:focus {\n      outline: none;\n    }\n\n    /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      padding: 0 calc(2 * ${spacing}) calc(2 * ${spacing});\n    }\n  `;\n});\nStyledPageArticle.defaultProps = defaultThemeProp;\n\nexport const StyledTemplateRow = styled.div(({ theme }) => {\n  const {\n    base: { breakpoints }\n  } = theme;\n\n  return css`\n    position: relative;\n    height: 100%;\n\n    /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      flex-direction: column;\n      height: auto;\n    }\n  `;\n});\nStyledTemplateRow.defaultProps = defaultThemeProp;\n\nexport const StyledTemplate = styled.div`\n  height: 0;\n  min-height: inherit;\n`;\n"]}
+{"version":3,"file":"CategorySubPage.styles.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/CategorySubPage.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport Text from '../Text';\nimport Button from '../Button';\nimport { StyledTab } from '../Tabs/Tab';\nimport { calculateFontSize, getHoverColors, readableColor } from '../../styles';\nimport type { FontSize } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\n\nexport const StyledSkipNavigation = styled(Button)(({ theme }) => {\n  const {\n    base: {\n      palette: { 'primary-background': primaryBackground },\n      spacing\n    }\n  } = theme;\n\n  return css`\n    position: absolute;\n    top: ${spacing};\n    left: -200vw;\n    background-color: ${primaryBackground};\n    padding: calc(2 * ${spacing});\n\n    &:focus,\n    &:active {\n      left: ${spacing};\n    }\n  `;\n});\nStyledSkipNavigation.defaultProps = defaultThemeProp;\n\nexport const StyledNavItem = styled(StyledTab)(({ theme }) => {\n  const {\n    base: {\n      breakpoints,\n      palette: { interactive, 'app-background': hoverBase },\n      spacing\n    }\n  } = theme;\n  const hoverColors = getHoverColors(hoverBase);\n\n  return css`\n    height: auto;\n\n    a,\n    button {\n      display: block;\n      width: 100%;\n      padding: calc(0.8 * ${spacing}) calc(2 * ${spacing});\n    }\n\n    &[aria-current='page'] {\n      a {\n        color: ${interactive};\n      }\n\n      &::after {\n        background: ${interactive};\n      }\n    }\n\n    /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      a,\n      button {\n        text-transform: uppercase;\n        padding: calc(1.5 * ${spacing}) 0;\n\n        &:hover {\n          text-decoration: none;\n        }\n      }\n    }\n\n    /* md or above / \"Desktop\" */\n    @media all and (min-width: ${breakpoints.md}) {\n      padding-left: 0;\n      padding-right: 0;\n      border: none;\n\n      &::after {\n        content: none;\n      }\n\n      a,\n      button {\n        &:hover,\n        &:focus {\n          background: ${hoverColors.background};\n          color: ${hoverColors.foreground};\n          text-decoration: none;\n        }\n      }\n    }\n  `;\n});\nStyledNavItem.defaultProps = defaultThemeProp;\n\nexport const StyledNavGroupHeader = styled(Text)(({ theme }) => {\n  const {\n    base: { spacing, breakpoints }\n  } = theme;\n\n  return css`\n    padding: calc(1.5 * ${spacing}) calc(2 * ${spacing});\n\n    /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      display: none;\n    }\n  `;\n});\nStyledNavGroupHeader.defaultProps = defaultThemeProp;\n\nexport const StyledNavGroupList = styled.ul``;\n\nexport const StyledNavGroup = styled.div(({ theme }) => {\n  const {\n    base: { breakpoints, spacing }\n  } = theme;\n\n  return css`\n    margin: calc(2 * ${spacing}) 0;\n\n    /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      margin: 0;\n    }\n  `;\n});\nStyledNavGroup.defaultProps = defaultThemeProp;\n\nexport const StyledNavList = styled.ul(({ theme }) => {\n  const {\n    base: { breakpoints }\n  } = theme;\n\n  return css`\n    &&,\n    li {\n      list-style-type: none;\n    }\n\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      white-space: nowrap;\n\n      li,\n      > div {\n        display: inline-block;\n      }\n    }\n\n    > ${StyledNavGroup}:first-child {\n      margin-top: 0;\n    }\n  `;\n});\nStyledNavList.defaultProps = defaultThemeProp;\n\nexport const StyledNav = styled.nav``;\n\nexport const StyledCategoryIconBlock = styled.div(({ theme }) => {\n  const {\n    base: {\n      palette: { 'brand-primary': brandPrimary },\n      'border-radius': baseBorderRadius,\n      spacing\n    }\n  } = theme;\n\n  const color = tryCatch(() => readableColor(brandPrimary));\n\n  return css`\n    background: ${brandPrimary};\n    width: 2rem;\n    height: 2rem;\n    margin-inline-end: ${spacing};\n    border-radius: calc(0.5 * ${baseBorderRadius});\n\n    svg {\n      color: ${color};\n    }\n  `;\n});\nStyledCategoryIconBlock.defaultProps = defaultThemeProp;\n\nexport const StyledCategoryHeadingRow = styled.div(({ theme }) => {\n  const {\n    base: { breakpoints, spacing }\n  } = theme;\n\n  return css`\n    padding: 0 calc(2 * ${spacing});\n    margin-bottom: calc(2 * ${spacing});\n\n    h1:focus-visible {\n      outline: transparent;\n      box-shadow: ${theme.base.shadow.focus};\n    }\n\n    /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      margin-bottom: ${spacing};\n    }\n  `;\n});\nStyledCategoryHeadingRow.defaultProps = defaultThemeProp;\n\nexport const StyledMenuColumn = styled.div(({ theme }) => {\n  const {\n    base: {\n      palette: { 'app-background': appBackground },\n      breakpoints,\n      spacing\n    }\n  } = theme;\n\n  return css`\n    background-color: ${appBackground};\n    position: sticky;\n    top: 0;\n    overflow-y: auto;\n    max-height: 100%;\n    width: 100%;\n    padding: calc(2 * ${spacing}) 0;\n\n    /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      position: static;\n      padding-bottom: 0;\n    }\n\n    /* md or above */\n    @media all and (min-width: ${breakpoints.md}) {\n      max-width: 14.438rem;\n    }\n\n    /* lg or above */\n    @media all and (min-width: ${breakpoints.lg}) {\n      max-width: 17.563rem;\n    }\n\n    /* xl or above */\n    @media all and (min-width: ${breakpoints.xl}) {\n      max-width: 20.75rem;\n    }\n  `;\n});\nStyledMenuColumn.defaultProps = defaultThemeProp;\n\nexport const StyledPageTitle = styled.h2(({ theme }) => {\n  const {\n    base: {\n      'font-weight': { 'semi-bold': fontWeight },\n      'font-size': fontSize,\n      'font-scale': fontScale\n    }\n  } = theme;\n\n  const fontSizes = calculateFontSize(fontSize, fontScale);\n\n  return css`\n    font-size: ${fontSizes['m' as FontSize]};\n    font-weight: ${fontWeight};\n  `;\n});\nStyledPageTitle.defaultProps = defaultThemeProp;\n\nexport const StyledPageActionCol = styled.div``;\n\nexport const StyledArticleHeader = styled.header(({ theme }) => {\n  const {\n    base: {\n      palette: { 'primary-background': primaryBackground },\n      spacing\n    }\n  } = theme;\n\n  return css`\n    position: sticky;\n    top: 0;\n    z-index: 1;\n    background-color: ${primaryBackground};\n    padding: calc(2 * ${spacing}) 0 calc(3 * ${spacing});\n  `;\n});\nStyledArticleHeader.defaultProps = defaultThemeProp;\n\nexport const StyledPageArticle = styled.article(({ theme }) => {\n  const {\n    base: {\n      breakpoints,\n      palette: { 'primary-background': primaryBackground },\n      spacing\n    }\n  } = theme;\n\n  return css`\n    position: relative;\n    background-color: ${primaryBackground};\n    width: 100%;\n    max-height: 100%;\n    overflow-y: auto;\n    padding: 0 calc(3 * ${spacing}) calc(2 * ${spacing});\n\n    &:focus {\n      outline: none;\n    }\n\n    /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      padding: 0 calc(2 * ${spacing}) calc(2 * ${spacing});\n    }\n  `;\n});\nStyledPageArticle.defaultProps = defaultThemeProp;\n\nexport const StyledTemplateRow = styled.div(({ theme }) => {\n  const {\n    base: { breakpoints }\n  } = theme;\n\n  return css`\n    position: relative;\n    height: 100%;\n\n    /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      flex-direction: column;\n      height: auto;\n    }\n  `;\n});\nStyledTemplateRow.defaultProps = defaultThemeProp;\n\nexport const StyledTemplate = styled.div`\n  height: 0;\n  min-height: inherit;\n`;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"DashboardPage.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/DashboardPage.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAwB,SAAS,EAAE,MAAM,OAAO,CAAC;AAIhF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAWhD,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAE1E,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB;IAC3D,CAAC,EAAE,SAAS,CAAC;IACb,CAAC,EAAE,SAAS,CAAC;IACb,CAAC,EAAE,SAAS,CAAC;IACb,OAAO,CAAC,EAAE,SAAS,EAAE,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,wBAAyB,SAAQ,eAAe;IAC/D,OAAO,CAAC,EAAE,SAAS,EAAE,CAAC;IACtB,cAAc,CAAC,EAAE,aAAa,GAAG,cAAc,GAAG,YAAY,CAAC;IAC/D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,EAAE,SAAS,EAAE,CAAC;CAC9B;AAED,eAAO,MAAM,kBAAkB,yGAAyB,CAAC;AAIzD,eAAO,MAAM,qBAAqB,yGAEjC,CAAC;AAIF,eAAO,MAAM,yBAAyB;;;qDAYpC,CAAC;AAyMH,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAiBvE,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"DashboardPage.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/DashboardPage.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAwB,SAAS,EAAE,MAAM,OAAO,CAAC;AAIhF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAYhD,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAE1E,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB;IAC3D,CAAC,EAAE,SAAS,CAAC;IACb,CAAC,EAAE,SAAS,CAAC;IACb,CAAC,EAAE,SAAS,CAAC;IACb,OAAO,CAAC,EAAE,SAAS,EAAE,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,wBAAyB,SAAQ,eAAe;IAC/D,OAAO,CAAC,EAAE,SAAS,EAAE,CAAC;IACtB,cAAc,CAAC,EAAE,aAAa,GAAG,cAAc,GAAG,YAAY,CAAC;IAC/D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,EAAE,SAAS,EAAE,CAAC;CAC9B;AAED,eAAO,MAAM,kBAAkB,yGAAyB,CAAC;AAIzD,eAAO,MAAM,qBAAqB,yGAEjC,CAAC;AAIF,eAAO,MAAM,yBAAyB;;;qDAYpC,CAAC;AA2NH,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAgGvE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/PageTemplates/DashboardPage.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useMemo, useEffect } from 'react';
+import { forwardRef, useMemo, useEffect, useRef, useState } from 'react';
 import styled, { css } from 'styled-components';
 import { defaultThemeProp } from '../../theme';
 import Flex from '../Flex';
@@ -8,8 +8,9 @@ import Text from '../Text';
 import SummaryItem from '../SummaryItem';
 import Icon from '../Icon';
 import Breadcrumbs from '../Breadcrumbs';
-import { useConfiguration, useConsolidatedRef } from '../../hooks';
+import { useBreakpoint, useConfiguration, useConsolidatedRef, useI18n } from '../../hooks';
 import { focusHeadingOrContainer } from '../../utils';
+import Tabs, { TabPanel } from '../Tabs';
 import { StyledPageHeader, StyledPageLayout, StyledPageIcon, StyledRegion } from './PageTemplates';
 export const StyledFilterRegion = styled(StyledRegion) ``;
 StyledFilterRegion.defaultProps = defaultThemeProp;
@@ -28,9 +29,10 @@ export const StyledDashboardPageLayout = styled(StyledPageLayout)(({ fitToViewpo
   `;
 });
 StyledDashboardPageLayout.defaultProps = defaultThemeProp;
-const DashboardPageLayout = forwardRef(function DashboardPageLayout({ regions, regionFullWidth, cols = `repeat(${regions.length}, minmax(0, 1fr))`, filters, filterPosition = 'block-start', fitToViewport = false, title, icon, actions, banners, path, as, ...restProps }, ref) {
+const DashboardPageLayout = forwardRef(function DashboardPageLayout({ regions, regionFullWidth, cols = `repeat(${regions.length}, minmax(0, 1fr))`, filters, filterPosition = 'block-start', fitToViewport = false, title, icon, actions, banners, path, as, utilities, ...restProps }, ref) {
     const pageRef = useConsolidatedRef(ref);
     const { loadedRef } = useConfiguration();
+    const isMediumOrAbove = useBreakpoint('md');
     useEffect(() => {
         if (!pageRef.current)
             return;
@@ -107,7 +109,7 @@ const DashboardPageLayout = forwardRef(function DashboardPageLayout({ regions, r
                 rows: pageRows,
                 cols
             }
-        }, ref: pageRef, children: [_jsxs(Grid, { as: StyledPageHeader, md: { item: { area: 'header' } }, children: [path && path.length > 0 && _jsx(Breadcrumbs, { path: path }), _jsx(SummaryItem, { visual: icon && (_jsx(StyledPageIcon, { container: { alignItems: 'center', justify: 'center' }, children: _jsx(Icon, { name: icon }) })), primary: _jsx(Text, { variant: 'h1', children: title }), actions: actions })] }), banners && _jsx(Grid, { md: { item: { area: 'banner' } }, children: banners }), filters && Object.keys(filters).length !== 0 && (_jsx(Grid, { as: StyledFilterRegion, container: {
+        }, ref: pageRef, children: [(isMediumOrAbove || (!isMediumOrAbove && !utilities)) && (_jsxs(Grid, { as: StyledPageHeader, md: { item: { area: 'header' } }, children: [path && path.length > 0 && _jsx(Breadcrumbs, { path: path }), _jsx(SummaryItem, { visual: icon && (_jsx(StyledPageIcon, { container: { alignItems: 'center', justify: 'center' }, children: _jsx(Icon, { name: icon }) })), primary: _jsx(Text, { variant: 'h1', children: title }), actions: actions })] })), banners && _jsx(Grid, { md: { item: { area: 'banner' } }, children: banners }), filters && Object.keys(filters).length !== 0 && (_jsx(Grid, { as: StyledFilterRegion, container: {
                     autoRows: 'max-content',
                     gap: 2
                 }, md: {
@@ -133,8 +135,41 @@ const DashboardPageLayout = forwardRef(function DashboardPageLayout({ regions, r
                     }, md: { item: { area: 'col-full-width' } }, as: StyledDashboardRegion, children: colItems }, key));
             })] }));
 });
-const DashboardPage = forwardRef(function DashboardPage({ a, b, c, filters, fitToViewport, ...restProps }, ref) {
-    return (_jsx(DashboardPageLayout, { ...restProps, cols: '1fr 1fr', filters: filters, fitToViewport: fitToViewport, regions: [a, b], regionFullWidth: [c], ref: ref }));
+const StylePageTabContent = styled.div(({ theme }) => {
+    return css `
+    padding: calc(2 * ${theme.base.spacing});
+    ${StyledDashboardPageLayout} {
+      padding: 0;
+      min-height: unset;
+      height: unset;
+    }
+  `;
+});
+StylePageTabContent.defaultProps = defaultThemeProp;
+const DashboardPage = forwardRef(function DashboardPage({ a, b, c, filters, fitToViewport, utilities, path, icon, title, actions, ...restProps }, ref) {
+    const isMediumOrAbove = useBreakpoint('md');
+    const [panel, setPanel] = useState('content');
+    const pageTabsRef = useRef(null);
+    const t = useI18n();
+    const pageContent = (_jsx(DashboardPageLayout, { ...restProps, cols: '1fr 1fr', filters: filters, fitToViewport: fitToViewport, regions: [a, b], regionFullWidth: [c], utilities: utilities, path: path, icon: icon, title: title, actions: actions, ref: ref }));
+    const pageTabs = [
+        { name: t('content'), id: 'content', content: pageContent },
+        {
+            name: t('coach', ['Pega GenAI™']),
+            id: 'coach',
+            content: utilities
+        }
+    ];
+    const handleTabChange = (id) => {
+        setPanel(id);
+    };
+    if (utilities) {
+        if (isMediumOrAbove) {
+            return (_jsxs(Flex, { container: { gap: 0.5 }, children: [_jsx(Flex, { item: { grow: 1 }, children: pageContent }), _jsx("div", { children: utilities })] }));
+        }
+        return (_jsxs(Flex, { container: { direction: 'column' }, children: [_jsxs(Flex, { container: { direction: 'column', pad: [2, 2, undefined] }, as: StyledPageHeader, children: [path && path.length > 0 && _jsx(Breadcrumbs, { path: path }), _jsx(SummaryItem, { visual: icon && (_jsx(StyledPageIcon, { container: { alignItems: 'center', justify: 'center' }, children: _jsx(Icon, { name: icon }) })), primary: _jsx(Text, { variant: 'h1', children: title }), actions: actions }), _jsx(Tabs, { tabs: pageTabs, onTabClick: handleTabChange, currentTabId: panel, ref: pageTabsRef })] }), pageTabs.map(tab => (_jsx(TabPanel, { tabId: tab.id, currentTabId: panel, tablistRef: pageTabsRef, children: _jsx(StylePageTabContent, { children: tab.content }) }, tab.id)))] }));
+    }
+    return pageContent;
 });
 export default DashboardPage;
 //# sourceMappingURL=DashboardPage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DashboardPage.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/DashboardPage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useMemo, useEffect } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport type { ForwardProps } from '../../types';\nimport Flex from '../Flex';\nimport Grid from '../Grid';\nimport Text from '../Text';\nimport SummaryItem from '../SummaryItem';\nimport Icon from '../Icon';\nimport Breadcrumbs from '../Breadcrumbs';\nimport { useConfiguration, useConsolidatedRef } from '../../hooks';\nimport { focusHeadingOrContainer } from '../../utils';\n\nimport { StyledPageHeader, StyledPageLayout, StyledPageIcon, StyledRegion } from './PageTemplates';\nimport type { PageTemplateProps, PageLayoutProps } from './PageTemplates';\n\nexport interface DashboardPageProps extends PageTemplateProps {\n  a: ReactNode;\n  b: ReactNode;\n  c: ReactNode;\n  filters?: ReactNode[];\n  fitToViewport?: boolean;\n}\n\nexport interface DashboardPageLayoutProps extends PageLayoutProps {\n  filters?: ReactNode[];\n  filterPosition?: 'block-start' | 'inline-start' | 'inline-end';\n  fitToViewport?: boolean;\n  regionFullWidth: ReactNode[];\n}\n\nexport const StyledFilterRegion = styled(StyledRegion)``;\n\nStyledFilterRegion.defaultProps = defaultThemeProp;\n\nexport const StyledDashboardRegion = styled(StyledRegion)`\n  overflow: auto;\n`;\n\nStyledDashboardRegion.defaultProps = defaultThemeProp;\n\nexport const StyledDashboardPageLayout = styled(StyledPageLayout)<\n  Pick<DashboardPageProps, 'fitToViewport'>\n>(({ fitToViewport }) => {\n  const height = 'calc(100vh - var(--appshell-offset, 0))';\n\n  return css`\n    min-height: ${height};\n    ${fitToViewport &&\n    css`\n      height: ${height};\n    `}\n  `;\n});\n\nStyledDashboardPageLayout.defaultProps = defaultThemeProp;\n\nconst DashboardPageLayout: FunctionComponent<DashboardPageLayoutProps & ForwardProps> = forwardRef(\n  function DashboardPageLayout(\n    {\n      regions,\n      regionFullWidth,\n      cols = `repeat(${regions.length}, minmax(0, 1fr))`,\n      filters,\n      filterPosition = 'block-start',\n      fitToViewport = false,\n      title,\n      icon,\n      actions,\n      banners,\n      path,\n      as,\n      ...restProps\n    }: PropsWithoutRef<DashboardPageLayoutProps>,\n    ref: PageLayoutProps['ref']\n  ) {\n    const pageRef = useConsolidatedRef(ref);\n    const { loadedRef } = useConfiguration();\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    const headerArea = useMemo(() => {\n      if (filterPosition === 'block-start' || !filters || Object.keys(filters).length === 0) {\n        return `'${Array.from({ length: regions.length }, () => 'header').join(' ')}'`;\n      }\n      return `'${Array.from({ length: regions.length + 1 }, () => 'header').join(' ')}'`;\n    }, [filterPosition, filters, regions.length]);\n\n    const bannerArea = `'${Array.from({ length: regions.length }, () => 'banner').join(' ')}'`;\n    const filterArea = `'${Array.from({ length: regions.length }, () => 'filter').join(' ')}'`;\n\n    const regionArea = useMemo(() => {\n      if (filters && Object.keys(filters).length !== 0) {\n        if (filterPosition === 'inline-start') {\n          return `'filter ${Array.from({ length: regions.length }, (_, i) => `col-${i + 1}`).join(\n            ' '\n          )}'`;\n        }\n        if (filterPosition === 'inline-end') {\n          return `'${Array.from({ length: regions.length }, (_, i) => `col-${i + 1}`).join(\n            ' '\n          )} filter'`;\n        }\n      }\n      return `'${Array.from({ length: regions.length }, (_, i) => `col-${i + 1}`).join(' ')}'`;\n    }, [filterPosition, filters, regions.length]);\n\n    const regionFullWidthArea = useMemo(() => {\n      if (filters && Object.keys(filters).length !== 0) {\n        if (filterPosition === 'inline-start') {\n          return `'filter ${Array.from({ length: regions.length }, () => 'col-full-width').join(\n            ' '\n          )}'`;\n        }\n        if (filterPosition === 'inline-end') {\n          return `'${Array.from({ length: regions.length }, () => 'col-full-width').join(\n            ' '\n          )} filter'`;\n        }\n      }\n      return `'${Array.from({ length: regions.length }, () => 'col-full-width').join(' ')}'`;\n    }, [filterPosition, filters, regions.length]);\n\n    const gridAreas = useMemo(() => {\n      if (filterPosition === 'block-start' && filters && Object.keys(filters).length !== 0) {\n        return banners\n          ? `${headerArea}\\n${bannerArea}\\n${filterArea}\\n${regionArea}\\n${regionFullWidthArea}`\n          : `${headerArea}\\n${filterArea}\\n${regionArea}\\n${regionFullWidthArea}`;\n      }\n      return banners\n        ? `${headerArea}\\n${bannerArea}\\n${regionArea}\\n${regionFullWidthArea}`\n        : `${headerArea}\\n${regionArea}\\n${regionFullWidthArea}`;\n    }, [filterPosition, filters, banners]);\n\n    const pageRows = useMemo(() => {\n      if (fitToViewport) {\n        if (filterPosition === 'block-start' && filters && Object.keys(filters).length !== 0) {\n          return banners ? 'auto auto auto 1fr 1fr' : 'auto auto 1fr 1fr';\n        }\n        return banners ? 'auto auto 1fr 1fr' : 'auto 1fr 1fr';\n      }\n      return 'fit-content(100%)';\n    }, [filterPosition, banners]);\n\n    if (filterPosition === 'inline-start' && filters && Object.keys(filters).length !== 0) {\n      cols = '1fr 2fr 2fr';\n    }\n\n    if (filterPosition === 'inline-end' && filters && Object.keys(filters).length !== 0) {\n      cols = '2fr 2fr 1fr';\n    }\n\n    return (\n      <Grid\n        {...restProps}\n        as={StyledDashboardPageLayout}\n        forwardedAs={as}\n        fitToViewport={fitToViewport}\n        container={{\n          autoRows: 'max-content',\n          cols: '1fr',\n          gap: 2,\n          pad: 2\n        }}\n        md={{\n          container: {\n            areas: gridAreas,\n            rows: pageRows,\n            cols\n          }\n        }}\n        ref={pageRef}\n      >\n        <Grid as={StyledPageHeader} md={{ item: { area: 'header' } }}>\n          {path && path.length > 0 && <Breadcrumbs path={path} />}\n          <SummaryItem\n            visual={\n              icon && (\n                <StyledPageIcon container={{ alignItems: 'center', justify: 'center' }}>\n                  <Icon name={icon} />\n                </StyledPageIcon>\n              )\n            }\n            primary={<Text variant='h1'>{title}</Text>}\n            actions={actions}\n          />\n        </Grid>\n        {banners && <Grid md={{ item: { area: 'banner' } }}>{banners}</Grid>}\n        {filters && Object.keys(filters).length !== 0 && (\n          <Grid\n            as={StyledFilterRegion}\n            container={{\n              autoRows: 'max-content',\n              gap: 2\n            }}\n            md={{\n              container: {\n                cols:\n                  filterPosition === 'block-start'\n                    ? 'repeat(4, minmax(min(20ch, 100%), 1fr))'\n                    : 'repeat(auto-fit, minmax(min(20ch, 100%), 1fr))'\n              },\n              item: { area: 'filter' }\n            }}\n          >\n            {filters}\n          </Grid>\n        )}\n        {regions.map((colItems: ReactNode, i: number) => {\n          const key = `${i}`;\n          return (\n            <Flex\n              container={{\n                direction: 'column',\n                justify: 'start',\n                gap: 2\n              }}\n              as={StyledDashboardRegion}\n              key={key}\n            >\n              {colItems}\n            </Flex>\n          );\n        })}\n        {regionFullWidth.map((colItems: ReactNode, i: number) => {\n          const key = `${i}`;\n          return (\n            <Grid\n              container={{\n                cols: 'minmax(0, 1fr)',\n                alignItems: 'start',\n                gap: 2\n              }}\n              md={{ item: { area: 'col-full-width' } }}\n              as={StyledDashboardRegion}\n              key={key}\n            >\n              {colItems}\n            </Grid>\n          );\n        })}\n      </Grid>\n    );\n  }\n);\n\nconst DashboardPage: FunctionComponent<DashboardPageProps & ForwardProps> = forwardRef(\n  function DashboardPage(\n    { a, b, c, filters, fitToViewport, ...restProps }: PropsWithoutRef<DashboardPageProps>,\n    ref: Ref<HTMLDivElement>\n  ) {\n    return (\n      <DashboardPageLayout\n        {...restProps}\n        cols='1fr 1fr'\n        filters={filters}\n        fitToViewport={fitToViewport}\n        regions={[a, b]}\n        regionFullWidth={[c]}\n        ref={ref}\n      />\n    );\n  }\n);\n\nexport default DashboardPage;\n"]}
+{"version":3,"file":"DashboardPage.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/DashboardPage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useMemo, useEffect, useRef, useState } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport type { ForwardProps } from '../../types';\nimport Flex from '../Flex';\nimport Grid from '../Grid';\nimport Text from '../Text';\nimport SummaryItem from '../SummaryItem';\nimport Icon from '../Icon';\nimport Breadcrumbs from '../Breadcrumbs';\nimport { useBreakpoint, useConfiguration, useConsolidatedRef, useI18n } from '../../hooks';\nimport { focusHeadingOrContainer } from '../../utils';\nimport Tabs, { TabPanel } from '../Tabs';\n\nimport { StyledPageHeader, StyledPageLayout, StyledPageIcon, StyledRegion } from './PageTemplates';\nimport type { PageTemplateProps, PageLayoutProps } from './PageTemplates';\n\nexport interface DashboardPageProps extends PageTemplateProps {\n  a: ReactNode;\n  b: ReactNode;\n  c: ReactNode;\n  filters?: ReactNode[];\n  fitToViewport?: boolean;\n}\n\nexport interface DashboardPageLayoutProps extends PageLayoutProps {\n  filters?: ReactNode[];\n  filterPosition?: 'block-start' | 'inline-start' | 'inline-end';\n  fitToViewport?: boolean;\n  regionFullWidth: ReactNode[];\n}\n\nexport const StyledFilterRegion = styled(StyledRegion)``;\n\nStyledFilterRegion.defaultProps = defaultThemeProp;\n\nexport const StyledDashboardRegion = styled(StyledRegion)`\n  overflow: auto;\n`;\n\nStyledDashboardRegion.defaultProps = defaultThemeProp;\n\nexport const StyledDashboardPageLayout = styled(StyledPageLayout)<\n  Pick<DashboardPageProps, 'fitToViewport'>\n>(({ fitToViewport }) => {\n  const height = 'calc(100vh - var(--appshell-offset, 0))';\n\n  return css`\n    min-height: ${height};\n    ${fitToViewport &&\n    css`\n      height: ${height};\n    `}\n  `;\n});\n\nStyledDashboardPageLayout.defaultProps = defaultThemeProp;\n\nconst DashboardPageLayout: FunctionComponent<DashboardPageLayoutProps & ForwardProps> = forwardRef(\n  function DashboardPageLayout(\n    {\n      regions,\n      regionFullWidth,\n      cols = `repeat(${regions.length}, minmax(0, 1fr))`,\n      filters,\n      filterPosition = 'block-start',\n      fitToViewport = false,\n      title,\n      icon,\n      actions,\n      banners,\n      path,\n      as,\n      utilities,\n      ...restProps\n    }: PropsWithoutRef<DashboardPageLayoutProps>,\n    ref: PageLayoutProps['ref']\n  ) {\n    const pageRef = useConsolidatedRef(ref);\n    const { loadedRef } = useConfiguration();\n\n    const isMediumOrAbove = useBreakpoint('md');\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    const headerArea = useMemo(() => {\n      if (filterPosition === 'block-start' || !filters || Object.keys(filters).length === 0) {\n        return `'${Array.from({ length: regions.length }, () => 'header').join(' ')}'`;\n      }\n      return `'${Array.from({ length: regions.length + 1 }, () => 'header').join(' ')}'`;\n    }, [filterPosition, filters, regions.length]);\n\n    const bannerArea = `'${Array.from({ length: regions.length }, () => 'banner').join(' ')}'`;\n    const filterArea = `'${Array.from({ length: regions.length }, () => 'filter').join(' ')}'`;\n\n    const regionArea = useMemo(() => {\n      if (filters && Object.keys(filters).length !== 0) {\n        if (filterPosition === 'inline-start') {\n          return `'filter ${Array.from({ length: regions.length }, (_, i) => `col-${i + 1}`).join(\n            ' '\n          )}'`;\n        }\n        if (filterPosition === 'inline-end') {\n          return `'${Array.from({ length: regions.length }, (_, i) => `col-${i + 1}`).join(\n            ' '\n          )} filter'`;\n        }\n      }\n      return `'${Array.from({ length: regions.length }, (_, i) => `col-${i + 1}`).join(' ')}'`;\n    }, [filterPosition, filters, regions.length]);\n\n    const regionFullWidthArea = useMemo(() => {\n      if (filters && Object.keys(filters).length !== 0) {\n        if (filterPosition === 'inline-start') {\n          return `'filter ${Array.from({ length: regions.length }, () => 'col-full-width').join(\n            ' '\n          )}'`;\n        }\n        if (filterPosition === 'inline-end') {\n          return `'${Array.from({ length: regions.length }, () => 'col-full-width').join(\n            ' '\n          )} filter'`;\n        }\n      }\n      return `'${Array.from({ length: regions.length }, () => 'col-full-width').join(' ')}'`;\n    }, [filterPosition, filters, regions.length]);\n\n    const gridAreas = useMemo(() => {\n      if (filterPosition === 'block-start' && filters && Object.keys(filters).length !== 0) {\n        return banners\n          ? `${headerArea}\\n${bannerArea}\\n${filterArea}\\n${regionArea}\\n${regionFullWidthArea}`\n          : `${headerArea}\\n${filterArea}\\n${regionArea}\\n${regionFullWidthArea}`;\n      }\n      return banners\n        ? `${headerArea}\\n${bannerArea}\\n${regionArea}\\n${regionFullWidthArea}`\n        : `${headerArea}\\n${regionArea}\\n${regionFullWidthArea}`;\n    }, [filterPosition, filters, banners]);\n\n    const pageRows = useMemo(() => {\n      if (fitToViewport) {\n        if (filterPosition === 'block-start' && filters && Object.keys(filters).length !== 0) {\n          return banners ? 'auto auto auto 1fr 1fr' : 'auto auto 1fr 1fr';\n        }\n        return banners ? 'auto auto 1fr 1fr' : 'auto 1fr 1fr';\n      }\n      return 'fit-content(100%)';\n    }, [filterPosition, banners]);\n\n    if (filterPosition === 'inline-start' && filters && Object.keys(filters).length !== 0) {\n      cols = '1fr 2fr 2fr';\n    }\n\n    if (filterPosition === 'inline-end' && filters && Object.keys(filters).length !== 0) {\n      cols = '2fr 2fr 1fr';\n    }\n\n    return (\n      <Grid\n        {...restProps}\n        as={StyledDashboardPageLayout}\n        forwardedAs={as}\n        fitToViewport={fitToViewport}\n        container={{\n          autoRows: 'max-content',\n          cols: '1fr',\n          gap: 2,\n          pad: 2\n        }}\n        md={{\n          container: {\n            areas: gridAreas,\n            rows: pageRows,\n            cols\n          }\n        }}\n        ref={pageRef}\n      >\n        {(isMediumOrAbove || (!isMediumOrAbove && !utilities)) && (\n          <Grid as={StyledPageHeader} md={{ item: { area: 'header' } }}>\n            {path && path.length > 0 && <Breadcrumbs path={path} />}\n            <SummaryItem\n              visual={\n                icon && (\n                  <StyledPageIcon container={{ alignItems: 'center', justify: 'center' }}>\n                    <Icon name={icon} />\n                  </StyledPageIcon>\n                )\n              }\n              primary={<Text variant='h1'>{title}</Text>}\n              actions={actions}\n            />\n          </Grid>\n        )}\n        {banners && <Grid md={{ item: { area: 'banner' } }}>{banners}</Grid>}\n        {filters && Object.keys(filters).length !== 0 && (\n          <Grid\n            as={StyledFilterRegion}\n            container={{\n              autoRows: 'max-content',\n              gap: 2\n            }}\n            md={{\n              container: {\n                cols:\n                  filterPosition === 'block-start'\n                    ? 'repeat(4, minmax(min(20ch, 100%), 1fr))'\n                    : 'repeat(auto-fit, minmax(min(20ch, 100%), 1fr))'\n              },\n              item: { area: 'filter' }\n            }}\n          >\n            {filters}\n          </Grid>\n        )}\n        {regions.map((colItems: ReactNode, i: number) => {\n          const key = `${i}`;\n          return (\n            <Flex\n              container={{\n                direction: 'column',\n                justify: 'start',\n                gap: 2\n              }}\n              as={StyledDashboardRegion}\n              key={key}\n            >\n              {colItems}\n            </Flex>\n          );\n        })}\n        {regionFullWidth.map((colItems: ReactNode, i: number) => {\n          const key = `${i}`;\n          return (\n            <Grid\n              container={{\n                cols: 'minmax(0, 1fr)',\n                alignItems: 'start',\n                gap: 2\n              }}\n              md={{ item: { area: 'col-full-width' } }}\n              as={StyledDashboardRegion}\n              key={key}\n            >\n              {colItems}\n            </Grid>\n          );\n        })}\n      </Grid>\n    );\n  }\n);\n\nconst StylePageTabContent = styled.div(({ theme }) => {\n  return css`\n    padding: calc(2 * ${theme.base.spacing});\n    ${StyledDashboardPageLayout} {\n      padding: 0;\n      min-height: unset;\n      height: unset;\n    }\n  `;\n});\n\nStylePageTabContent.defaultProps = defaultThemeProp;\n\nconst DashboardPage: FunctionComponent<DashboardPageProps & ForwardProps> = forwardRef(\n  function DashboardPage(\n    {\n      a,\n      b,\n      c,\n      filters,\n      fitToViewport,\n      utilities,\n      path,\n      icon,\n      title,\n      actions,\n      ...restProps\n    }: PropsWithoutRef<DashboardPageProps>,\n    ref: Ref<HTMLDivElement>\n  ) {\n    const isMediumOrAbove = useBreakpoint('md');\n    const [panel, setPanel] = useState('content');\n    const pageTabsRef = useRef<HTMLElement>(null);\n    const t = useI18n();\n\n    const pageContent = (\n      <DashboardPageLayout\n        {...restProps}\n        cols='1fr 1fr'\n        filters={filters}\n        fitToViewport={fitToViewport}\n        regions={[a, b]}\n        regionFullWidth={[c]}\n        utilities={utilities}\n        path={path}\n        icon={icon}\n        title={title}\n        actions={actions}\n        ref={ref}\n      />\n    );\n\n    const pageTabs = [\n      { name: t('content'), id: 'content', content: pageContent },\n      {\n        name: t('coach', ['Pega GenAI™']),\n        id: 'coach',\n        content: utilities\n      }\n    ];\n\n    const handleTabChange = (id: string) => {\n      setPanel(id);\n    };\n\n    if (utilities) {\n      if (isMediumOrAbove) {\n        return (\n          <Flex container={{ gap: 0.5 }}>\n            <Flex item={{ grow: 1 }}>{pageContent}</Flex>\n            <div>{utilities}</div>\n          </Flex>\n        );\n      }\n\n      return (\n        <Flex container={{ direction: 'column' }}>\n          <Flex container={{ direction: 'column', pad: [2, 2, undefined] }} as={StyledPageHeader}>\n            {path && path.length > 0 && <Breadcrumbs path={path} />}\n            <SummaryItem\n              visual={\n                icon && (\n                  <StyledPageIcon container={{ alignItems: 'center', justify: 'center' }}>\n                    <Icon name={icon} />\n                  </StyledPageIcon>\n                )\n              }\n              primary={<Text variant='h1'>{title}</Text>}\n              actions={actions}\n            />\n            <Tabs\n              tabs={pageTabs}\n              onTabClick={handleTabChange}\n              currentTabId={panel}\n              ref={pageTabsRef}\n            />\n          </Flex>\n\n          {pageTabs.map(tab => (\n            <TabPanel tabId={tab.id} currentTabId={panel} tablistRef={pageTabsRef} key={tab.id}>\n              <StylePageTabContent>{tab.content}</StylePageTabContent>\n            </TabPanel>\n          ))}\n        </Flex>\n      );\n    }\n\n    return pageContent;\n  }\n);\n\nexport default DashboardPage;\n"]}

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

@@ -10,6 +10,7 @@ export interface PageTemplateProps extends BaseProps, AsProp, NoChildrenProp {
     banners?: ReactNode;
     path?: BreadcrumbsProps['path'];
     header?: ReactNode;
+    utilities?: ReactNode;
     scrollContent?: boolean;
     ref?: Ref<HTMLDivElement>;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"PageTemplates.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplates.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"PageTemplates.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplates.tsx"],"names":[],"mappings":"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"}

package/lib/components/PageTemplates/PageTemplates.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, useState, useRef, useContext, useEffect } from 'react';
+import { forwardRef, useState, useRef, useContext, useEffect, useMemo } from 'react';
 import styled, { css } from 'styled-components';
 import { defaultThemeProp } from '../../theme';
 import Grid from '../Grid';
@@ -9,11 +9,11 @@ import Icon from '../Icon';
 import { focusHeadingOrContainer, tryCatch } from '../../utils';
 import Tabs, { TabPanel } from '../Tabs';
 import Flex from '../Flex';
-import { useBreakpoint, useElement, useScrollStick, useConsolidatedRef, useConfiguration } from '../../hooks';
+import { useBreakpoint, useElement, useScrollStick, useConsolidatedRef, useConfiguration, useI18n } from '../../hooks';
 import Breadcrumbs, { StyledBreadcrumbs } from '../Breadcrumbs';
 import AppShellContext from '../AppShell/AppShellContext';
 import { StyledBanner } from '../Banner/Banner';
-import { StyledTabs } from '../Tabs/Tabs';
+import { StyledTabs, StylesAllTabsButtonWrapper } from '../Tabs/Tabs.styles';
 import { readableColor } from '../../styles';
 export const StyledPageIcon = styled(Flex)(({ theme }) => {
     const bgColor = theme.base.palette['brand-primary'];
@@ -39,7 +39,8 @@ export const StyledPageHeader = styled.header(({ theme }) => {
     }
 
     ${StyledBanner},
-    ${StyledTabs} {
+    ${StyledTabs},
+    ${StylesAllTabsButtonWrapper} {
       margin-block-start: calc(2 * ${theme.base.spacing});
     }
   `;
@@ -93,13 +94,24 @@ export const StyledPageLayout = styled.div(({ theme, scrollContent, minContentHe
   `;
 });
 StyledPageLayout.defaultProps = defaultThemeProp;
-const PageLayout = forwardRef(function PageLayout({ regions, cols = `repeat(${regions.length}, minmax(0, 1fr))`, title, icon, path, actions, banners, tabs, as, header, regionsRef, scrollContent = false, ...restProps }, ref) {
-    const pageRef = useConsolidatedRef(ref);
+const StyledPageLayoutWrapper = styled.div `
+  height: 100%;
+`;
+const StylePageTabContent = styled.div `
+  ${StyledRegions} {
+    padding: 0;
+  }
+`;
+const PageLayout = forwardRef(function PageLayout({ regions, cols = `repeat(${regions.length}, minmax(0, 1fr))`, title, icon, path, actions, banners, tabs, utilities, as, header, regionsRef, scrollContent = false, ...restProps }, ref) {
+    const t = useI18n();
     const [contentEl, setContentEl] = useElement();
     const isMediumOrAbove = useBreakpoint('md');
     const hasSideBySideColumns = regions.length > 1 && isMediumOrAbove;
     const { headerEl } = useContext(AppShellContext);
     const { loadedRef } = useConfiguration();
+    const [panel, setPanel] = useState('content');
+    const pageRef = useConsolidatedRef(ref);
+    const pageTabsRef = useRef(null);
     const consolidatedRegionRef = useConsolidatedRef(regionsRef);
     const scrollStickOptions = useRef({
         elements: []
@@ -136,39 +148,81 @@ const PageLayout = forwardRef(function PageLayout({ regions, cols = `repeat(${re
             };
         }
     }, [consolidatedRegionRef, headerEl]);
+    const pageContent = (_jsxs(Flex, { container: true, item: { grow: 1 }, as: StyledContent, ref: scrollContent ? setContentEl : undefined, children: [renderSingleRegion && (_jsx(StyledRegions, { ref: consolidatedRegionRef, pad: true, children: _jsx(Flex, { container: {
+                        direction: 'column',
+                        gap: 2
+                    }, as: StyledRegion, ref: (el) => {
+                        if (el) {
+                            scrollStickOptions.current.elements[0] = el;
+                        }
+                    }, children: regions[0] }) })), !renderSingleRegion && (_jsx(Grid, { container: {
+                    cols: 'minmax(0, 1fr)',
+                    alignItems: 'start',
+                    gap: 2,
+                    pad: [0, 2, 2]
+                }, md: { container: { cols } }, as: StyledRegions, ref: consolidatedRegionRef, children: regions.map((colItems, i) => {
+                    return (_jsx(Flex, { container: {
+                            direction: 'column',
+                            gap: 2
+                        }, as: StyledRegion, ref: (el) => {
+                            if (el) {
+                                scrollStickOptions.current.elements[i] = el;
+                            }
+                        }, children: colItems }, i));
+                }) }))] }));
+    const pageTabs = [
+        { name: t('content'), id: 'content', content: pageContent },
+        {
+            name: t('coach', ['Pega GenAI™']),
+            id: 'coach',
+            content: utilities
+        }
+    ];
+    const pageHeader = (_jsxs(Flex, { container: { direction: 'column', pad: [2, 2, 0] }, item: { grow: 0, shrink: 0 }, as: StyledPageHeader, children: [path && path.length > 0 && _jsx(Breadcrumbs, { path: path }), header || (_jsx(SummaryItem, { visual: icon && (_jsx(StyledPageIcon, { container: { alignItems: 'center', justify: 'center' }, children: _jsx(Icon, { name: icon }) })), primary: _jsx(Text, { variant: 'h1', children: title }), actions: actions })), banners, tabs] }));
+    const handleTabChange = (id) => {
+        setPanel(id);
+    };
+    if (utilities) {
+        if (isMediumOrAbove || tabs) {
+            return (_jsxs(Flex, { container: { gap: 2 }, as: StyledPageLayoutWrapper, children: [_jsxs(Flex, { ...restProps, container: {
+                            direction: 'column',
+                            alignItems: 'stretch',
+                            gap: 2
+                        }, item: { grow: 1 }, scrollContent: scrollContent, as: StyledPageLayout, forwardedAs: as, ref: pageRef, minContentHeight: minContentHeight, children: [pageHeader, pageContent] }), (isMediumOrAbove || !tabs) && _jsx("div", { children: utilities })] }));
+        }
+        return (_jsxs(Flex, { ...restProps, as: StyledPageLayout, forwardedAs: as, container: { direction: 'column' }, children: [pageHeader, _jsxs(Flex, { container: { direction: 'column', pad: [2, 2, 0], gap: 2 }, children: [_jsx(Tabs, { tabs: pageTabs, onTabClick: handleTabChange, currentTabId: panel, ref: pageTabsRef }), pageTabs.map(tab => (_jsx(TabPanel, { tabId: tab.id, currentTabId: panel, tablistRef: pageTabsRef, children: _jsx(StylePageTabContent, { children: tab.content }) }, tab.id)))] })] }));
+    }
     return (_jsxs(Flex, { ...restProps, container: {
             direction: 'column',
             alignItems: 'stretch',
             gap: 2
-        }, scrollContent: scrollContent, as: StyledPageLayout, forwardedAs: as, ref: pageRef, minContentHeight: minContentHeight, children: [_jsxs(Flex, { container: { direction: 'column', pad: [2, 2, 0] }, item: { grow: 0, shrink: 0 }, as: StyledPageHeader, children: [path && path.length > 0 && _jsx(Breadcrumbs, { path: path }), header || (_jsx(SummaryItem, { visual: icon && (_jsx(StyledPageIcon, { container: { alignItems: 'center', justify: 'center' }, children: _jsx(Icon, { name: icon }) })), primary: _jsx(Text, { variant: 'h1', children: title }), actions: actions })), banners, tabs] }), _jsxs(Flex, { container: true, item: { grow: 1 }, as: StyledContent, ref: scrollContent ? setContentEl : undefined, children: [renderSingleRegion && (_jsx(StyledRegions, { ref: consolidatedRegionRef, pad: true, children: _jsx(Flex, { container: {
-                                direction: 'column',
-                                gap: 2
-                            }, as: StyledRegion, ref: (el) => {
-                                if (el) {
-                                    scrollStickOptions.current.elements[0] = el;
-                                }
-                            }, children: regions[0] }) })), !renderSingleRegion && (_jsx(Grid, { container: {
-                            cols: 'minmax(0, 1fr)',
-                            alignItems: 'start',
-                            gap: 2,
-                            pad: [0, 2, 2]
-                        }, md: { container: { cols } }, as: StyledRegions, ref: consolidatedRegionRef, children: regions.map((colItems, i) => {
-                            return (_jsx(Flex, { container: {
-                                    direction: 'column',
-                                    gap: 2
-                                }, as: StyledRegion, ref: (el) => {
-                                    if (el) {
-                                        scrollStickOptions.current.elements[i] = el;
-                                    }
-                                }, children: colItems }, i));
-                        }) }))] })] }));
-});
-export const TabbedPage = forwardRef(function TabbedPage({ tabs, ...restProps }, ref) {
+        }, item: { grow: 1 }, scrollContent: scrollContent, as: StyledPageLayout, forwardedAs: as, ref: pageRef, minContentHeight: minContentHeight, children: [pageHeader, pageContent] }));
+});
+export const TabbedPage = forwardRef(function TabbedPage({ tabs: tabsProps, utilities, ...restProps }, ref) {
+    const isMediumOrAbove = useBreakpoint('md');
+    const t = useI18n();
+    const tabs = useMemo(() => {
+        if (utilities && !isMediumOrAbove) {
+            return {
+                ...tabsProps,
+                tabs: [
+                    ...tabsProps.tabs,
+                    { id: 'coach', name: t('coach', ['Pega GenAI™']), content: utilities }
+                ]
+            };
+        }
+        return tabsProps;
+    }, [tabsProps, utilities, isMediumOrAbove]);
     const [tabId, setTabId] = useState(tabs.defaultTabId || tabs.tabs[0]?.id);
+    useEffect(() => {
+        const currentTabId = tabs.defaultTabId || tabs.tabs[0]?.id;
+        if (currentTabId && tabId === 'coach')
+            setTabId(currentTabId);
+    }, [tabsProps, isMediumOrAbove]);
     const tabPanels = tabs.tabs.map(tab => {
         return (_jsx(Flex, { container: { direction: 'column', gap: 2 }, as: TabPanel, tabId: tab.id, currentTabId: tabId, children: tab.content }, tab.id));
     });
-    return (_jsx(PageLayout, { ...restProps, tabs: _jsx(Tabs, { ...tabs, onTabClick: (id, e) => {
+    return (_jsx(PageLayout, { ...restProps, utilities: utilities, tabs: _jsx(Tabs, { ...tabs, onTabClick: (id, e) => {
                 setTabId(id);
                 tabs.onTabClick?.(id, e);
             }, currentTabId: tabId }), regions: [_jsx(_Fragment, { children: tabPanels })], ref: ref }));

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

@@ -1 +1 @@
-{"version":3,"file":"PageTemplates.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplates.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,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,uBAAuB,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAChE,OAAO,IAAI,EAAE,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEzC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EACL,aAAa,EACb,UAAU,EACV,cAAc,EACd,kBAAkB,EAClB,gBAAgB,EACjB,MAAM,aAAa,CAAC;AAErB,OAAO,WAAW,EAAE,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEhE,OAAO,eAAe,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAiF7C,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;;;oBAGQ,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;;MAGrC,iBAAiB;0BACG,KAAK,CAAC,IAAI,CAAC,OAAO;;;MAGtC,YAAY;MACZ,UAAU;qCACqB,KAAK,CAAC,IAAI,CAAC,OAAO;;GAEpD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AACzC,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,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,SAAS,UAAU,CACjB,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;IAE3B,MAAM,OAAO,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IACxC,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;IACjD,MAAM,EAAE,SAAS,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAEzC,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,CAAC,OAAO,CAAC,OAAO;YAAE,OAAO;QAE7B,IAAI,SAAS,CAAC,OAAO,EAAE;YACrB,uBAAuB,CAAC,OAAO,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;SACjD;aAAM;YACL,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;SAC1B;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,qBAAqB,CAAC,OAAO,EAAE;YACjC,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,CAAC,SAAS,CAAC;oBACrC,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,OAAO,EACZ,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,EAAE,IAAI,GAAI,EAEtD,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,GAAI,GACL,CAClB,EAEH,OAAO,EAAE,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,KAAK,GAAQ,EAC1C,OAAO,EAAE,OAAO,GAChB,CACH,EAEA,OAAO,EACP,IAAI,IACA,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,YAEA,OAAO,CAAC,CAAC,CAAC,GACN,GACO,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,GACG,CACR,IACI,IACF,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAsD,UAAU,CACrF,SAAS,UAAU,CACjB,EAAE,IAAI,EAAE,GAAG,SAAS,EAAoC,EACxD,GAAwB;IAExB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAE1E,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;QACpC,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAC1C,EAAE,EAAE,QAAQ,EACZ,KAAK,EAAE,GAAG,CAAC,EAAE,EACb,YAAY,EAAE,KAAK,YAGlB,GAAG,CAAC,OAAO,IAFP,GAAG,CAAC,EAAE,CAGN,CACR,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,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,EACD,YAAY,EAAE,KAAK,GACnB,EAEJ,OAAO,EAAE,CAAC,4BAAG,SAAS,GAAI,CAAC,EAC3B,GAAG,EAAE,GAAG,GACR,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAyD,UAAU,CAC3F,SAAS,aAAa,CACpB,EAAE,CAAC,EAAE,GAAG,SAAS,EAAuC,EACxD,GAAwB;IAExB,OAAO,KAAC,UAAU,IAAC,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,KAAM,SAAS,EAAE,IAAI,EAAC,gBAAgB,GAAG,CAAC;AACrF,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAyD,UAAU,CAC3F,SAAS,aAAa,CACpB,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,SAAS,EAAuC,EAC3D,GAAwB;IAExB,OAAO,CACL,KAAC,UAAU,IAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,KAAM,SAAS,EAAE,IAAI,EAAC,2BAA2B,GAAG,CAC1F,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAA2D,UAAU,CAC/F,SAAS,eAAe,CACtB,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,SAAS,EAAyC,EAChE,GAAwB;IAExB,OAAO,CACL,KAAC,UAAU,IAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,KAAM,SAAS,EAAE,IAAI,EAAC,2BAA2B,GAAG,CAC7F,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAA0D,UAAU,CAC7F,SAAS,cAAc,CACrB,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,SAAS,EAAwC,EAClE,GAAwB;IAExB,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,GAChC,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAA0D,UAAU,CAC7F,SAAS,cAAc,CACrB,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,SAAS,EAAwC,EAC5D,GAAwB;IAExB,OAAO,CACL,KAAC,UAAU,IAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,KAAM,SAAS,EAAE,IAAI,EAAC,+BAA+B,GAAG,CAC9F,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAA0D,UAAU,CAC7F,SAAS,cAAc,CACrB,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,SAAS,EAAwC,EAC5D,GAAwB;IAExB,OAAO,CACL,KAAC,UAAU,IAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,KAAM,SAAS,EAAE,IAAI,EAAC,+BAA+B,GAAG,CAC9F,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAC7B,UAAU,CAAC,SAAS,kBAAkB,CACpC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,SAAS,EAA4C,EACnE,GAAwB;IAExB,OAAO,CACL,KAAC,UAAU,IACT,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAClB,GAAG,EAAE,GAAG,KACJ,SAAS,EACb,IAAI,EAAC,0CAA0C,GAC/C,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AAEL,MAAM,CAAC,MAAM,kBAAkB,GAC7B,UAAU,CAAC,SAAS,kBAAkB,CACpC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,SAAS,EAA4C,EACnE,GAAwB;IAExB,OAAO,CACL,KAAC,UAAU,IACT,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAClB,GAAG,EAAE,GAAG,KACJ,SAAS,EACb,IAAI,EAAC,0CAA0C,GAC/C,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AAEL,MAAM,CAAC,MAAM,oBAAoB,GAC/B,UAAU,CAAC,SAAS,oBAAoB,CACtC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,SAAS,EAA8C,EACrE,GAAwB;IAExB,OAAO,CACL,KAAC,UAAU,IACT,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAClB,GAAG,EAAE,GAAG,KACJ,SAAS,EACb,IAAI,EAAC,8CAA8C,GACnD,CACH,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import { forwardRef, useState, useRef, useContext, useEffect } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, Ref, ReactNode, ReactElement } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport type { 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 } from '../Tabs';\nimport type { 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, { StyledBreadcrumbs } from '../Breadcrumbs';\nimport type { BreadcrumbsProps } from '../Breadcrumbs';\nimport AppShellContext from '../AppShell/AppShellContext';\nimport { StyledBanner } from '../Banner/Banner';\nimport { StyledTabs } from '../Tabs/Tabs';\nimport { readableColor } from '../../styles';\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  function PageLayout(\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  function TabbedPage(\n    { tabs, ...restProps }: PropsWithoutRef<TabbedPageProps>,\n    ref: Ref<HTMLDivElement>\n  ) {\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  function OneColumnPage(\n    { a, ...restProps }: PropsWithoutRef<OneColumnPageProps>,\n    ref: Ref<HTMLDivElement>\n  ) {\n    return <PageLayout regions={[a]} ref={ref} {...restProps} cols='minmax(0, 1fr)' />;\n  }\n);\n\nexport const TwoColumnPage: FunctionComponent<TwoColumnPageProps & ForwardProps> = forwardRef(\n  function TwoColumnPage(\n    { a, b, ...restProps }: PropsWithoutRef<TwoColumnPageProps>,\n    ref: Ref<HTMLDivElement>\n  ) {\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  function ThreeColumnPage(\n    { a, b, c, ...restProps }: PropsWithoutRef<ThreeColumnPageProps>,\n    ref: Ref<HTMLDivElement>\n  ) {\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  function FourColumnPage(\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  function WideNarrowPage(\n    { a, b, ...restProps }: PropsWithoutRef<WideNarrowPageProps>,\n    ref: Ref<HTMLDivElement>\n  ) {\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  function NarrowWidePage(\n    { a, b, ...restProps }: PropsWithoutRef<WideNarrowPageProps>,\n    ref: Ref<HTMLDivElement>\n  ) {\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(function WideWideNarrowPage(\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\nexport const NarrowWideWidePage: FunctionComponent<NarrowWideWidePageProps & ForwardProps> =\n  forwardRef(function NarrowWideWidePage(\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\nexport const NarrowWideNarrowPage: FunctionComponent<NarrowWideNarrowPageProps & ForwardProps> =\n  forwardRef(function NarrowWideNarrowPage(\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"]}
+{"version":3,"file":"PageTemplates.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplates.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useRef, useContext, useEffect, useMemo } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, Ref, ReactNode, ReactElement } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport type { 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 } from '../Tabs';\nimport type { TabsProps, Tab } from '../Tabs';\nimport Flex from '../Flex';\nimport {\n  useBreakpoint,\n  useElement,\n  useScrollStick,\n  useConsolidatedRef,\n  useConfiguration,\n  useI18n\n} from '../../hooks';\nimport type { ScrollStickOptions } from '../../hooks/useScrollStick';\nimport Breadcrumbs, { StyledBreadcrumbs } from '../Breadcrumbs';\nimport type { BreadcrumbsProps } from '../Breadcrumbs';\nimport AppShellContext from '../AppShell/AppShellContext';\nimport { StyledBanner } from '../Banner/Banner';\nimport { StyledTabs, StylesAllTabsButtonWrapper } from '../Tabs/Tabs.styles';\nimport { readableColor } from '../../styles';\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  utilities?: 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    ${StylesAllTabsButtonWrapper} {\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 StyledPageLayoutWrapper = styled.div`\n  height: 100%;\n`;\n\nconst StylePageTabContent = styled.div`\n  ${StyledRegions} {\n    padding: 0;\n  }\n`;\n\nconst PageLayout: FunctionComponent<PageLayoutProps & ForwardProps> = forwardRef(\n  function PageLayout(\n    {\n      regions,\n      cols = `repeat(${regions.length}, minmax(0, 1fr))`,\n      title,\n      icon,\n      path,\n      actions,\n      banners,\n      tabs,\n      utilities,\n      as,\n      header,\n      regionsRef,\n      scrollContent = false,\n      ...restProps\n    }: PropsWithoutRef<PageLayoutProps>,\n    ref: PageLayoutProps['ref']\n  ) {\n    const t = useI18n();\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    const [panel, setPanel] = useState('content');\n\n    const pageRef = useConsolidatedRef(ref);\n    const pageTabsRef = useRef<HTMLElement>(null);\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    const pageContent = (\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    );\n\n    const pageTabs = [\n      { name: t('content'), id: 'content', content: pageContent },\n      {\n        name: t('coach', ['Pega GenAI™']),\n        id: 'coach',\n        content: utilities\n      }\n    ];\n\n    const pageHeader = (\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\n    const handleTabChange = (id: string) => {\n      setPanel(id);\n    };\n\n    if (utilities) {\n      if (isMediumOrAbove || tabs) {\n        return (\n          <Flex container={{ gap: 2 }} as={StyledPageLayoutWrapper}>\n            <Flex\n              {...restProps}\n              container={{\n                direction: 'column',\n                alignItems: 'stretch',\n                gap: 2\n              }}\n              item={{ grow: 1 }}\n              scrollContent={scrollContent}\n              as={StyledPageLayout}\n              forwardedAs={as}\n              ref={pageRef}\n              minContentHeight={minContentHeight}\n            >\n              {pageHeader}\n              {pageContent}\n            </Flex>\n            {(isMediumOrAbove || !tabs) && <div>{utilities}</div>}\n          </Flex>\n        );\n      }\n\n      return (\n        <Flex\n          {...restProps}\n          as={StyledPageLayout}\n          forwardedAs={as}\n          container={{ direction: 'column' }}\n        >\n          {pageHeader}\n          <Flex container={{ direction: 'column', pad: [2, 2, 0], gap: 2 }}>\n            <Tabs\n              tabs={pageTabs}\n              onTabClick={handleTabChange}\n              currentTabId={panel}\n              ref={pageTabsRef}\n            />\n            {pageTabs.map(tab => (\n              <TabPanel tabId={tab.id} currentTabId={panel} tablistRef={pageTabsRef} key={tab.id}>\n                <StylePageTabContent>{tab.content}</StylePageTabContent>\n              </TabPanel>\n            ))}\n          </Flex>\n        </Flex>\n      );\n    }\n    return (\n      <Flex\n        {...restProps}\n        container={{\n          direction: 'column',\n          alignItems: 'stretch',\n          gap: 2\n        }}\n        item={{ grow: 1 }}\n        scrollContent={scrollContent}\n        as={StyledPageLayout}\n        forwardedAs={as}\n        ref={pageRef}\n        minContentHeight={minContentHeight}\n      >\n        {pageHeader}\n        {pageContent}\n      </Flex>\n    );\n  }\n);\n\nexport const TabbedPage: FunctionComponent<TabbedPageProps & ForwardProps> = forwardRef(\n  function TabbedPage(\n    { tabs: tabsProps, utilities, ...restProps }: PropsWithoutRef<TabbedPageProps>,\n    ref: Ref<HTMLDivElement>\n  ) {\n    const isMediumOrAbove = useBreakpoint('md');\n\n    const t = useI18n();\n\n    const tabs = useMemo(() => {\n      if (utilities && !isMediumOrAbove) {\n        return {\n          ...tabsProps,\n          tabs: [\n            ...tabsProps.tabs,\n            { id: 'coach', name: t('coach', ['Pega GenAI™']), content: utilities }\n          ]\n        };\n      }\n      return tabsProps;\n    }, [tabsProps, utilities, isMediumOrAbove]);\n\n    const [tabId, setTabId] = useState(tabs.defaultTabId || tabs.tabs[0]?.id);\n\n    useEffect(() => {\n      const currentTabId = tabs.defaultTabId || tabs.tabs[0]?.id;\n      if (currentTabId && tabId === 'coach') setTabId(currentTabId);\n    }, [tabsProps, isMediumOrAbove]);\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        utilities={utilities}\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  function OneColumnPage(\n    { a, ...restProps }: PropsWithoutRef<OneColumnPageProps>,\n    ref: Ref<HTMLDivElement>\n  ) {\n    return <PageLayout regions={[a]} ref={ref} {...restProps} cols='minmax(0, 1fr)' />;\n  }\n);\n\nexport const TwoColumnPage: FunctionComponent<TwoColumnPageProps & ForwardProps> = forwardRef(\n  function TwoColumnPage(\n    { a, b, ...restProps }: PropsWithoutRef<TwoColumnPageProps>,\n    ref: Ref<HTMLDivElement>\n  ) {\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  function ThreeColumnPage(\n    { a, b, c, ...restProps }: PropsWithoutRef<ThreeColumnPageProps>,\n    ref: Ref<HTMLDivElement>\n  ) {\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  function FourColumnPage(\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  function WideNarrowPage(\n    { a, b, ...restProps }: PropsWithoutRef<WideNarrowPageProps>,\n    ref: Ref<HTMLDivElement>\n  ) {\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  function NarrowWidePage(\n    { a, b, ...restProps }: PropsWithoutRef<WideNarrowPageProps>,\n    ref: Ref<HTMLDivElement>\n  ) {\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(function WideWideNarrowPage(\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\nexport const NarrowWideWidePage: FunctionComponent<NarrowWideWidePageProps & ForwardProps> =\n  forwardRef(function NarrowWideWidePage(\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\nexport const NarrowWideNarrowPage: FunctionComponent<NarrowWideNarrowPageProps & ForwardProps> =\n  forwardRef(function NarrowWideNarrowPage(\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"]}

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

@@ -1,2 +1,2 @@
-export declare const getPhoneInputTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly ["control", "country-code", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
+export declare const getPhoneInputTestIds: (testIdProp?: string | null | 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

@@ -1 +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"}
+{"version":3,"file":"Phone.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Phone/Phone.test-ids.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,oBAAoB,+LAItB,CAAC"}

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":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAErE,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"}
+{"version":3,"file":"PhoneDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/Phone/PhoneDisplay.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAErE,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,CAgCrE,CAAC;AAEF,eAAe,YAAY,CAAC"}