@pega/cosmos-react-build 8.0.0-build.9.0 → 8.0.0

package/lib/components/AppShell/AppShell.styles.d.ts

@@ -1,5 +1,5 @@
 export declare const StyledUtils: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledAppShellToggleButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ButtonProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledAppShellToggleButton: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").ButtonProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledScrollWrap: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledMain: import("styled-components").StyledComponent<"main", import("styled-components").DefaultTheme, {
     navOpen: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"AppShell.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":"AAyBA,eAAO,MAAM,WAAW,yGAStB,CAAC;AAIH,eAAO,MAAM,0BAA0B,qOAiBrC,CAAC;AAIH,eAAO,MAAM,gBAAgB,yGAK3B,CAAC;AAIH,eAAO,MAAM,UAAU;aACZ,OAAO;aACP,OAAO;SAoCjB,CAAC;AAIF,eAAO,MAAM,SAAS,yGAkIrB,CAAC;AAIF,eAAO,MAAM,uBAAuB;0BAAwC,OAAO;SAgBjF,CAAC;AAIH,eAAO,MAAM,iBAAiB;qBAAgC,OAAO;SAwEpE,CAAC;AAIF,eAAO,MAAM,aAAa,wGAAc,CAAC"}
+{"version":3,"file":"AppShell.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":"AAyBA,eAAO,MAAM,WAAW,yGAStB,CAAC;AAIH,eAAO,MAAM,0BAA0B,oNAiBrC,CAAC;AAIH,eAAO,MAAM,gBAAgB,yGAK3B,CAAC;AAIH,eAAO,MAAM,UAAU;aACZ,OAAO;aACP,OAAO;SAoCjB,CAAC;AAIF,eAAO,MAAM,SAAS,yGAoFrB,CAAC;AAIF,eAAO,MAAM,uBAAuB;0BAAwC,OAAO;SAgBjF,CAAC;AAIH,eAAO,MAAM,iBAAiB;qBAAgC,OAAO;SAwEpE,CAAC;AAIF,eAAO,MAAM,aAAa,wGAAc,CAAC"}

package/lib/components/AppShell/AppShell.styles.js

@@ -69,7 +69,7 @@ export const StyledMain = styled.main(({ navOpen, hideNav, theme: { base: { anim
     `;
 });
 StyledMain.defaultProps = defaultThemeProp;
-export const StyledNav = styled.nav(({ theme: { base: { breakpoints, colors, palette, animation, spacing, shadow, 'custom-scrollbar': customScrollbar, 'border-radius': borderRadius, 'font-size': fontSize, 'font-scale': fontScale }, components: { 'app-shell': appShell } } }) => {
+export const StyledNav = styled.nav(({ theme: { base: { breakpoints, colors, palette, animation, spacing, shadow, 'custom-scrollbar': customScrollbar, 'font-size': fontSize, 'font-scale': fontScale }, components: { 'app-shell': appShell } } }) => {
     const { navState } = useContext(AppShellContext);
     const fontSizes = calculateFontSize(fontSize, fontScale);
     return css `
@@ -123,53 +123,8 @@ export const StyledNav = styled.nav(({ theme: { base: { breakpoints, colors, pal
       ${customScrollbar &&
         css `
         * {
-          scrollbar-color: rgba(255, 255, 255, 0.6) rgba(0, 0, 0, 0.2);
           scrollbar-width: thin;
         }
-
-        @supports not ((scrollbar-width: thin) or (scrollbar-color: black white)) {
-          /* stylelint-disable unit-allowed-list */
-
-          *::-webkit-scrollbar {
-            width: 12px;
-            height: 12px;
-          }
-
-          *::-webkit-scrollbar-track {
-            background-color: rgba(0, 0, 0, 0.2);
-          }
-
-          *::-webkit-scrollbar-corner {
-            background-color: rgba(0, 0, 0, 0.2);
-            border-bottom-right-radius: inherit;
-          }
-
-          *::-webkit-scrollbar-thumb {
-            background-color: transparent;
-            border: 3px solid transparent;
-            border-radius: calc(1.125 * ${borderRadius});
-            box-shadow: inset 0 0 2px 4px rgba(255, 255, 255, 0.6);
-          }
-
-          *::-webkit-scrollbar-thumb:hover {
-            box-shadow: inset 0 0 2px 4px rgba(255, 255, 255, 0.7);
-          }
-
-          *::-webkit-scrollbar-track:horizontal {
-            border-bottom-left-radius: inherit;
-          }
-
-          *::-webkit-scrollbar-track:vertical {
-            border-top-right-radius: inherit;
-          }
-
-          /* stylelint-disable-next-line selector-pseudo-class-no-unknown */
-          *::-webkit-scrollbar-track:not(:corner-present) {
-            border-bottom-right-radius: inherit;
-          }
-
-          /* stylelint-enable unit-allowed-list */
-        }
       `}
 
       @media (pointer: coarse) {

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

@@ -1 +1 @@
-{"version":3,"file":"AppShell.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { lighten, rgba } from 'polished';\nimport { useContext } from 'react';\n\nimport {\n  tryCatch,\n  defaultThemeProp,\n  Button,\n  StyledIcon,\n  useDirection,\n  calculateFontSize,\n  Icon\n} from '@pega/cosmos-react-core';\nimport {\n  StyledToggleIcon,\n  StyledNodeText,\n  StyledNodeInteraction,\n  StyledStandardTree\n} from '@pega/cosmos-react-core/lib/components/Tree/StandardTree.styles';\n\nimport AppShellContext from './AppShellContext';\n\nconst navWidth = '3rem';\nconst navOpenWidth = '14rem';\n\nexport const StyledUtils = styled.div(({ theme }) => {\n  const borderColor = tryCatch(() =>\n    lighten(0.1, theme.components['app-shell'].nav['background-color'])\n  );\n\n  return css`\n    padding-block: ${theme.base.spacing};\n    border-block-start: 0.0625rem solid ${borderColor};\n  `;\n});\n\nStyledUtils.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellToggleButton = styled(Button)(({ theme }) => {\n  return css`\n    background-color: ${theme.base.palette.dark};\n    color: ${theme.base.palette.light};\n    border: none;\n\n    ${StyledIcon} {\n      width: 1.25rem;\n      height: 1.25rem;\n      font-weight: bold;\n    }\n\n    &:enabled:focus,\n    :not([disabled]):focus {\n      box-shadow: ${theme.base.shadow.focus};\n    }\n  `;\n});\n\nStyledAppShellToggleButton.defaultProps = defaultThemeProp;\n\nexport const StyledScrollWrap = styled.div(() => {\n  return css`\n    height: 100%;\n    overflow-y: auto;\n  `;\n});\n\nStyledScrollWrap.defaultProps = defaultThemeProp;\n\nexport const StyledMain = styled.main<{\n  navOpen: boolean;\n  hideNav: boolean;\n}>(\n  ({\n    navOpen,\n    hideNav,\n    theme: {\n      base: { animation, breakpoints, palette }\n    }\n  }) => {\n    return css`\n      position: relative;\n      min-height: calc(100vh - 6rem);\n      background-color: ${palette['app-background']};\n      margin-inline-start: ${navWidth};\n      transition: margin-inline-start ${`${animation.speed} ${animation.timing.ease}`};\n\n      @media (pointer: coarse) {\n        min-height: calc(100vh - 8rem);\n      }\n\n      @media (min-width: ${breakpoints.md}) {\n        min-height: calc(100vh - 3rem);\n      }\n\n      ${navOpen &&\n      css`\n        margin-inline-start: ${navOpenWidth};\n      `}\n\n      ${hideNav &&\n      css`\n        transition-duration: 0s;\n        margin-inline-start: 0;\n      `}\n    `;\n  }\n);\n\nStyledMain.defaultProps = defaultThemeProp;\n\nexport const StyledNav = styled.nav(\n  ({\n    theme: {\n      base: {\n        breakpoints,\n        colors,\n        palette,\n        animation,\n        spacing,\n        shadow,\n        'custom-scrollbar': customScrollbar,\n        'border-radius': borderRadius,\n        'font-size': fontSize,\n        'font-scale': fontScale\n      },\n      components: { 'app-shell': appShell }\n    }\n  }) => {\n    const { navState } = useContext(AppShellContext);\n    const fontSizes = calculateFontSize(fontSize, fontScale);\n\n    return css`\n      position: fixed;\n      z-index: 1;\n      height: calc(100vh - 6rem);\n      background: ${appShell.nav['background-color']};\n      width: ${navState === 'opening' || navState === 'open' ? navOpenWidth : navWidth};\n      transition: width ${animation.speed} ${animation.timing.ease};\n      display: flex;\n\n      ${StyledStandardTree} {\n        background-color: ${palette.dark};\n\n        ${StyledNodeText}, ${StyledToggleIcon} {\n          color: rgba(255, 255, 255, 0.7);\n          font-size: ${fontSizes.s};\n        }\n\n        ${StyledNodeInteraction} {\n          padding-block-start: calc(0.5 * ${spacing});\n          padding-block-end: calc(0.5 * ${spacing});\n\n          &:hover {\n            background: rgba(255, 255, 255, 0.1);\n\n            ${StyledNodeText} {\n              color: ${palette.light};\n            }\n          }\n\n          &:focus {\n            box-shadow: ${shadow['focus-inset']};\n          }\n\n          &[aria-current='page'],\n          &[aria-current='true'] {\n            background: rgba(255, 255, 255, 0.05);\n\n            ${StyledNodeText} {\n              color: ${colors.blue.light};\n            }\n          }\n        }\n\n        &:has(:focus-visible) {\n          box-shadow: inset 0 0 0 0.125rem #71c1ff99;\n        }\n      }\n\n      ${customScrollbar &&\n      css`\n        * {\n          scrollbar-color: rgba(255, 255, 255, 0.6) rgba(0, 0, 0, 0.2);\n          scrollbar-width: thin;\n        }\n\n        @supports not ((scrollbar-width: thin) or (scrollbar-color: black white)) {\n          /* stylelint-disable unit-allowed-list */\n\n          *::-webkit-scrollbar {\n            width: 12px;\n            height: 12px;\n          }\n\n          *::-webkit-scrollbar-track {\n            background-color: rgba(0, 0, 0, 0.2);\n          }\n\n          *::-webkit-scrollbar-corner {\n            background-color: rgba(0, 0, 0, 0.2);\n            border-bottom-right-radius: inherit;\n          }\n\n          *::-webkit-scrollbar-thumb {\n            background-color: transparent;\n            border: 3px solid transparent;\n            border-radius: calc(1.125 * ${borderRadius});\n            box-shadow: inset 0 0 2px 4px rgba(255, 255, 255, 0.6);\n          }\n\n          *::-webkit-scrollbar-thumb:hover {\n            box-shadow: inset 0 0 2px 4px rgba(255, 255, 255, 0.7);\n          }\n\n          *::-webkit-scrollbar-track:horizontal {\n            border-bottom-left-radius: inherit;\n          }\n\n          *::-webkit-scrollbar-track:vertical {\n            border-top-right-radius: inherit;\n          }\n\n          /* stylelint-disable-next-line selector-pseudo-class-no-unknown */\n          *::-webkit-scrollbar-track:not(:corner-present) {\n            border-bottom-right-radius: inherit;\n          }\n\n          /* stylelint-enable unit-allowed-list */\n        }\n      `}\n\n      @media (pointer: coarse) {\n        height: calc(100vh - 8rem);\n      }\n\n      @media (min-width: ${breakpoints.md}) {\n        height: calc(100vh - 3rem);\n      }\n    `;\n  }\n);\n\nStyledNav.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellCaretIcon = styled(Icon)<{ nestedListCollapsed?: boolean }>(({\n  nestedListCollapsed,\n  theme\n}) => {\n  const { rtl } = useDirection();\n\n  return css`\n    transition-property: transform;\n    transition-duration: ${theme.base.animation.speed};\n    transition-timing-function: ${theme.base.animation.timing.ease};\n\n    ${nestedListCollapsed === false &&\n    css`\n      transform: rotateZ(${rtl ? '-90deg' : '90deg'});\n    `}\n  `;\n});\n\nStyledAppShellCaretIcon.defaultProps = defaultThemeProp;\n\nexport const StyledNavListItem = styled.li<{ activeTreeRoot?: boolean }>(\n  ({ activeTreeRoot, theme }) => {\n    const { navOpen } = useContext(AppShellContext);\n    const activeBackground = tryCatch(() =>\n      rgba('#000000', theme.base.transparency['transparent-4'])\n    );\n\n    return css`\n      display: block;\n      position: relative;\n      ${StyledIcon} {\n        font-size: 1.25rem;\n      }\n\n      > :first-child {\n        position: relative;\n        display: flex;\n        align-items: center;\n        width: 100%;\n        padding: calc(1.25 * ${theme.base.spacing}) 0;\n        white-space: nowrap;\n        color: rgba(255, 255, 255, 0.7);\n        cursor: pointer;\n        font-weight: ${theme.base['font-weight']['semi-bold']};\n        text-decoration: none;\n\n        span {\n          overflow: hidden;\n          color: inherit;\n        }\n\n        &:hover,\n        &:focus {\n          color: ${theme.base.palette.light};\n          background: rgba(255, 255, 255, 0.05);\n        }\n\n        &:focus {\n          outline: none;\n          box-shadow: ${theme.base.shadow['focus-inset']};\n        }\n\n        ${activeTreeRoot &&\n        css`\n          color: ${theme.base.colors.blue.light};\n          background-color: ${activeBackground};\n        `}\n\n        ${StyledAppShellCaretIcon}:last-child {\n          position: absolute;\n          left: ${navOpen ? 'auto' : '100%'};\n          ${navOpen &&\n          css`\n            inset-inline-end: 1rem;\n          `}\n          margin: 0;\n          opacity: ${navOpen ? '1' : '0'};\n          transition-property: opacity;\n        }\n\n        ${StyledIcon}:first-child {\n          margin: 0 calc((${navWidth} - 1.125rem) / 2);\n        }\n      }\n\n      &[aria-current='page'] > :first-child,\n      &[aria-current='true'] > :first-child {\n        color: ${theme.base.colors.blue.light};\n        background-color: ${activeBackground};\n      }\n    `;\n  }\n);\n\nStyledNavListItem.defaultProps = defaultThemeProp;\n\nexport const StyledNavList = styled.ul``;\n"]}
+{"version":3,"file":"AppShell.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { lighten, rgba } from 'polished';\nimport { useContext } from 'react';\n\nimport {\n  tryCatch,\n  defaultThemeProp,\n  Button,\n  StyledIcon,\n  useDirection,\n  calculateFontSize,\n  Icon\n} from '@pega/cosmos-react-core';\nimport {\n  StyledToggleIcon,\n  StyledNodeText,\n  StyledNodeInteraction,\n  StyledStandardTree\n} from '@pega/cosmos-react-core/lib/components/Tree/StandardTree.styles';\n\nimport AppShellContext from './AppShellContext';\n\nconst navWidth = '3rem';\nconst navOpenWidth = '14rem';\n\nexport const StyledUtils = styled.div(({ theme }) => {\n  const borderColor = tryCatch(() =>\n    lighten(0.1, theme.components['app-shell'].nav['background-color'])\n  );\n\n  return css`\n    padding-block: ${theme.base.spacing};\n    border-block-start: 0.0625rem solid ${borderColor};\n  `;\n});\n\nStyledUtils.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellToggleButton = styled(Button)(({ theme }) => {\n  return css`\n    background-color: ${theme.base.palette.dark};\n    color: ${theme.base.palette.light};\n    border: none;\n\n    ${StyledIcon} {\n      width: 1.25rem;\n      height: 1.25rem;\n      font-weight: bold;\n    }\n\n    &:enabled:focus,\n    :not([disabled]):focus {\n      box-shadow: ${theme.base.shadow.focus};\n    }\n  `;\n});\n\nStyledAppShellToggleButton.defaultProps = defaultThemeProp;\n\nexport const StyledScrollWrap = styled.div(() => {\n  return css`\n    height: 100%;\n    overflow-y: auto;\n  `;\n});\n\nStyledScrollWrap.defaultProps = defaultThemeProp;\n\nexport const StyledMain = styled.main<{\n  navOpen: boolean;\n  hideNav: boolean;\n}>(\n  ({\n    navOpen,\n    hideNav,\n    theme: {\n      base: { animation, breakpoints, palette }\n    }\n  }) => {\n    return css`\n      position: relative;\n      min-height: calc(100vh - 6rem);\n      background-color: ${palette['app-background']};\n      margin-inline-start: ${navWidth};\n      transition: margin-inline-start ${`${animation.speed} ${animation.timing.ease}`};\n\n      @media (pointer: coarse) {\n        min-height: calc(100vh - 8rem);\n      }\n\n      @media (min-width: ${breakpoints.md}) {\n        min-height: calc(100vh - 3rem);\n      }\n\n      ${navOpen &&\n      css`\n        margin-inline-start: ${navOpenWidth};\n      `}\n\n      ${hideNav &&\n      css`\n        transition-duration: 0s;\n        margin-inline-start: 0;\n      `}\n    `;\n  }\n);\n\nStyledMain.defaultProps = defaultThemeProp;\n\nexport const StyledNav = styled.nav(\n  ({\n    theme: {\n      base: {\n        breakpoints,\n        colors,\n        palette,\n        animation,\n        spacing,\n        shadow,\n        'custom-scrollbar': customScrollbar,\n        'font-size': fontSize,\n        'font-scale': fontScale\n      },\n      components: { 'app-shell': appShell }\n    }\n  }) => {\n    const { navState } = useContext(AppShellContext);\n    const fontSizes = calculateFontSize(fontSize, fontScale);\n\n    return css`\n      position: fixed;\n      z-index: 1;\n      height: calc(100vh - 6rem);\n      background: ${appShell.nav['background-color']};\n      width: ${navState === 'opening' || navState === 'open' ? navOpenWidth : navWidth};\n      transition: width ${animation.speed} ${animation.timing.ease};\n      display: flex;\n\n      ${StyledStandardTree} {\n        background-color: ${palette.dark};\n\n        ${StyledNodeText}, ${StyledToggleIcon} {\n          color: rgba(255, 255, 255, 0.7);\n          font-size: ${fontSizes.s};\n        }\n\n        ${StyledNodeInteraction} {\n          padding-block-start: calc(0.5 * ${spacing});\n          padding-block-end: calc(0.5 * ${spacing});\n\n          &:hover {\n            background: rgba(255, 255, 255, 0.1);\n\n            ${StyledNodeText} {\n              color: ${palette.light};\n            }\n          }\n\n          &:focus {\n            box-shadow: ${shadow['focus-inset']};\n          }\n\n          &[aria-current='page'],\n          &[aria-current='true'] {\n            background: rgba(255, 255, 255, 0.05);\n\n            ${StyledNodeText} {\n              color: ${colors.blue.light};\n            }\n          }\n        }\n\n        &:has(:focus-visible) {\n          box-shadow: inset 0 0 0 0.125rem #71c1ff99;\n        }\n      }\n\n      ${customScrollbar &&\n      css`\n        * {\n          scrollbar-width: thin;\n        }\n      `}\n\n      @media (pointer: coarse) {\n        height: calc(100vh - 8rem);\n      }\n\n      @media (min-width: ${breakpoints.md}) {\n        height: calc(100vh - 3rem);\n      }\n    `;\n  }\n);\n\nStyledNav.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellCaretIcon = styled(Icon)<{ nestedListCollapsed?: boolean }>(({\n  nestedListCollapsed,\n  theme\n}) => {\n  const { rtl } = useDirection();\n\n  return css`\n    transition-property: transform;\n    transition-duration: ${theme.base.animation.speed};\n    transition-timing-function: ${theme.base.animation.timing.ease};\n\n    ${nestedListCollapsed === false &&\n    css`\n      transform: rotateZ(${rtl ? '-90deg' : '90deg'});\n    `}\n  `;\n});\n\nStyledAppShellCaretIcon.defaultProps = defaultThemeProp;\n\nexport const StyledNavListItem = styled.li<{ activeTreeRoot?: boolean }>(\n  ({ activeTreeRoot, theme }) => {\n    const { navOpen } = useContext(AppShellContext);\n    const activeBackground = tryCatch(() =>\n      rgba('#000000', theme.base.transparency['transparent-4'])\n    );\n\n    return css`\n      display: block;\n      position: relative;\n      ${StyledIcon} {\n        font-size: 1.25rem;\n      }\n\n      > :first-child {\n        position: relative;\n        display: flex;\n        align-items: center;\n        width: 100%;\n        padding: calc(1.25 * ${theme.base.spacing}) 0;\n        white-space: nowrap;\n        color: rgba(255, 255, 255, 0.7);\n        cursor: pointer;\n        font-weight: ${theme.base['font-weight']['semi-bold']};\n        text-decoration: none;\n\n        span {\n          overflow: hidden;\n          color: inherit;\n        }\n\n        &:hover,\n        &:focus {\n          color: ${theme.base.palette.light};\n          background: rgba(255, 255, 255, 0.05);\n        }\n\n        &:focus {\n          outline: none;\n          box-shadow: ${theme.base.shadow['focus-inset']};\n        }\n\n        ${activeTreeRoot &&\n        css`\n          color: ${theme.base.colors.blue.light};\n          background-color: ${activeBackground};\n        `}\n\n        ${StyledAppShellCaretIcon}:last-child {\n          position: absolute;\n          left: ${navOpen ? 'auto' : '100%'};\n          ${navOpen &&\n          css`\n            inset-inline-end: 1rem;\n          `}\n          margin: 0;\n          opacity: ${navOpen ? '1' : '0'};\n          transition-property: opacity;\n        }\n\n        ${StyledIcon}:first-child {\n          margin: 0 calc((${navWidth} - 1.125rem) / 2);\n        }\n      }\n\n      &[aria-current='page'] > :first-child,\n      &[aria-current='true'] > :first-child {\n        color: ${theme.base.colors.blue.light};\n        background-color: ${activeBackground};\n      }\n    `;\n  }\n);\n\nStyledNavListItem.defaultProps = defaultThemeProp;\n\nexport const StyledNavList = styled.ul``;\n"]}

package/lib/components/AppShell/Header/AppHeader.d.ts

@@ -1,6 +1,5 @@
-import type { FunctionComponent } from 'react';
-import type { ForwardProps } from '@pega/cosmos-react-core';
+import type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';
 import type { AppHeaderProps } from './AppHeader.types';
-declare const AppHeader: FunctionComponent<AppHeaderProps & ForwardProps>;
+declare const AppHeader: ForwardRefForwardPropsComponent<AppHeaderProps>;
 export default AppHeader;
 //# sourceMappingURL=AppHeader.d.ts.map

package/lib/components/AppShell/Header/AppHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/AppHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,iBAAiB,EAMlB,MAAM,OAAO,CAAC;AAcf,OAAO,KAAK,EAAE,YAAY,EAAoB,MAAM,yBAAyB,CAAC;AAmB9E,OAAO,KAAK,EAAE,cAAc,EAAyB,MAAM,mBAAmB,CAAC;AAkJ/E,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAiG9D,CAAC;AAEH,eAAe,SAAS,CAAC"}
+{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/AppHeader.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,+BAA+B,EAAoB,MAAM,yBAAyB,CAAC;AAmBjG,OAAO,KAAK,EAAE,cAAc,EAAyB,MAAM,mBAAmB,CAAC;AAmJ/E,QAAA,MAAM,SAAS,EAAE,+BAA+B,CAAC,cAAc,CAkG7D,CAAC;AAEH,eAAe,SAAS,CAAC"}

package/lib/components/AppShell/Header/AppHeader.js

@@ -22,13 +22,13 @@ const Links = ({ links }) => {
 const AppHeaderSearch = ({ showSearchButton, setShowSearchButton, ...restProps }) => {
     const isMediumOrAbove = useBreakpoint('md');
     const t = useI18n();
-    const searchInputRef = useCallback(node => {
+    const searchInputRef = useCallback((node) => {
         if (!showSearchButton && node) {
             node.focus();
         }
     }, [showSearchButton]);
     const focusSearchBtn = useRef(false);
-    const searchButtonRef = useCallback(node => {
+    const searchButtonRef = useCallback((node) => {
         if (node && focusSearchBtn.current) {
             node.focus();
         }
@@ -42,7 +42,7 @@ const Utils = ({ operator, branch, action, appInfo }) => {
     const isMediumOrAbove = useBreakpoint('md');
     const isSmallOrAbove = useBreakpoint('sm');
     const [appInfoEl, setAppInfoEl] = useElement(null);
-    return (_jsxs(Flex, { container: { justify: 'between', alignItems: 'center' }, md: { container: { justify: 'end' } }, item: { shrink: 1 }, as: StyledUtilsContainer, children: [appInfo && (_jsxs(Flex, { container: { justify: 'between', alignItems: 'center', gap: 0.5 }, item: { shrink: 1 }, ref: setAppInfoEl, children: [_jsx(Flex, { as: StyledAppName, item: { shrink: 1 }, children: appInfo.name }), _jsx(StyledAppVersion, { children: appInfo.version }), _jsx(Tooltip, { target: appInfoEl, hideDelay: 'none', children: `${appInfo.name} ${appInfo.version}` })] })), _jsxs(Flex, { container: { alignItems: 'center' }, children: [branch && _jsx(BranchButton, { ...branch, compact: isSmallOrAbove ? branch.compact : true }), action && (_jsxs(Flex, { container: { justify: 'between', alignItems: 'center', gap: 0.5 }, item: { shrink: 0 }, as: Button, variant: 'secondary', icon: !isMediumOrAbove, label: isMediumOrAbove ? undefined : action.text, onClick: (e) => action.onClick?.(action.id, e), disabled: action.disabled, children: [action.icon && _jsx(Icon, { name: action.icon }), isMediumOrAbove && action.text] }))] }), isMediumOrAbove && (_jsx(AppShellOperator, { as: StyledAppHeaderOperator, actions: operator.actions, popover: { placement: 'bottom-end' }, children: _jsx(Avatar, { ...operator.avatar }) }))] }));
+    return (_jsxs(Flex, { container: { justify: 'between', alignItems: 'center' }, md: { container: { justify: 'end' } }, item: { shrink: 1 }, as: StyledUtilsContainer, children: [appInfo && (_jsxs(Flex, { container: { justify: 'between', alignItems: 'center', gap: 0.5 }, item: { shrink: 1 }, ref: setAppInfoEl, children: [_jsx(Flex, { as: StyledAppName, item: { shrink: 1 }, children: appInfo.name }), _jsx(StyledAppVersion, { children: appInfo.version }), _jsx(Tooltip, { target: appInfoEl, hideDelay: 'none', children: `${appInfo.name} ${appInfo.version}` })] })), _jsxs(Flex, { container: { alignItems: 'center' }, children: [branch && _jsx(BranchButton, { ...branch, compact: isSmallOrAbove ? branch.compact : true }), action && (_jsxs(Flex, { container: { justify: 'between', alignItems: 'center', gap: 0.5 }, item: { shrink: 0 }, as: Button, variant: 'secondary', icon: !isMediumOrAbove, label: isMediumOrAbove ? undefined : action.text, onClick: (e) => action.onClick?.(action.id, e), disabled: action.disabled, children: [action.icon && _jsx(Icon, { name: action.icon }), isMediumOrAbove && action.text] }))] }), isMediumOrAbove && (_jsx(AppShellOperator, { as: StyledAppHeaderOperator, actions: operator.actions, popover: { placement: 'bottom-end' }, name: operator.name, children: _jsx(Avatar, { ...operator.avatar }) }))] }));
 };
 const AppHeader = forwardRef(function AppHeader({ contextSwitcher: { contexts, onContextClick, label: contextSwitcherLabel } = {}, brand, utils, links }, ref) {
     const selectedContext = contexts?.length > 1 ? contexts.find(ctx => ctx.selected) : contexts[0];
@@ -67,7 +67,7 @@ const AppHeader = forwardRef(function AppHeader({ contextSwitcher: { contexts, o
                     gap: 1,
                     justify: 'center',
                     alignItems: 'center'
-                }, item: { grow: showSearchButton ? 0 : 1 }, md: { item: { grow: showSearchButton ? 1 : 0 } }, children: [utils?.search && (_jsx(AppHeaderSearch, { ...utils.search, showSearchButton: showSearchButton, setShowSearchButton: setShowSearchButton })), showSearchButton && !isMediumOrAbove && utils?.operator && (_jsx(AppShellOperator, { as: StyledAppHeaderOperator, actions: utils.operator.actions, popover: { placement: 'bottom-start' }, children: _jsx(Avatar, { ...utils.operator.avatar }) }))] }), utils && _jsx(Utils, { ...utils })] }));
+                }, item: { grow: showSearchButton ? 0 : 1 }, md: { item: { grow: showSearchButton ? 1 : 0 } }, children: [utils?.search && (_jsx(AppHeaderSearch, { ...utils.search, showSearchButton: showSearchButton, setShowSearchButton: setShowSearchButton })), showSearchButton && !isMediumOrAbove && utils?.operator && (_jsx(AppShellOperator, { as: StyledAppHeaderOperator, actions: utils.operator.actions, popover: { placement: 'bottom-start' }, name: utils.operator.name, children: _jsx(Avatar, { ...utils.operator.avatar }) }))] }), utils && _jsx(Utils, { ...utils })] }));
 });
 export default AppHeader;
 //# sourceMappingURL=AppHeader.js.map

package/lib/components/AppShell/Header/AppHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.js","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/AppHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useCallback, useEffect, useState, useRef } from 'react';\nimport type {\n  FunctionComponent,\n  MouseEvent,\n  FC,\n  PropsWithoutRef,\n  Dispatch,\n  SetStateAction\n} from 'react';\n\nimport {\n  ContextSwitcher,\n  Flex,\n  SearchInput,\n  useBreakpoint,\n  Button,\n  Icon,\n  useI18n,\n  Tooltip,\n  useElement,\n  Avatar\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, SearchInputProps } from '@pega/cosmos-react-core';\nimport AppShellOperator from '@pega/cosmos-react-core/lib/components/AppShell/Operator';\nimport {\n  StyledAppHeaderSearchForm,\n  StyledAppHeaderOperator\n} from '@pega/cosmos-react-core/lib/components/AppShell/AppHeader.styles';\n\nimport {\n  StyledAppHeader,\n  StyledTabs,\n  StyledUtilsContainer,\n  StyledBrandContainer,\n  StyledAppHeaderSearch,\n  StyledAppName,\n  StyledAppVersion,\n  StyledBrandButton,\n  StyledBrandImage,\n  StyledContext\n} from './AppHeader.styles';\nimport type { AppHeaderProps, LinkProps, UtilsProps } from './AppHeader.types';\nimport BranchButton from './BranchButton';\n\nconst Links: FC<{ links: LinkProps[] }> = ({ links }) => {\n  const [currentTabId, setCurrentTabId] = useState(links[0].id);\n\n  useEffect(() => {\n    setCurrentTabId(links[0].id);\n  }, [links]);\n\n  const handleTabClick = useCallback(\n    (id: string, e?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n      const newActiveTab = links.find(item => item.id === id);\n      if (newActiveTab) {\n        newActiveTab.onClick?.(id, e);\n        setCurrentTabId(newActiveTab.id);\n      }\n    },\n    [links]\n  );\n\n  return <StyledTabs tabs={links} currentTabId={currentTabId} onTabClick={handleTabClick} />;\n};\n\nconst AppHeaderSearch: FC<\n  SearchInputProps & {\n    showSearchButton: boolean;\n    setShowSearchButton: Dispatch<SetStateAction<boolean>>;\n  }\n> = ({ showSearchButton, setShowSearchButton, ...restProps }) => {\n  const isMediumOrAbove = useBreakpoint('md');\n  const t = useI18n();\n\n  const searchInputRef = useCallback(\n    node => {\n      if (!showSearchButton && node) {\n        node.focus();\n      }\n    },\n    [showSearchButton]\n  );\n  const focusSearchBtn = useRef(false);\n  const searchButtonRef = useCallback(node => {\n    if (node && focusSearchBtn.current) {\n      node.focus();\n    }\n  }, []);\n\n  return isMediumOrAbove || !showSearchButton ? (\n    <Flex\n      as={StyledAppHeaderSearch}\n      item={{ shrink: 0, grow: 1 }}\n      md={{ item: { grow: 0, shrink: 1 } }}\n      container={{ justify: 'between', alignItems: 'center', gap: 1 }}\n    >\n      <StyledAppHeaderSearchForm\n        role='search'\n        aria-label={t('sitewide')}\n        onSubmit={e => e.preventDefault()}\n        isMediumOrAbove={isMediumOrAbove}\n      >\n        <SearchInput {...restProps} ref={searchInputRef} />\n      </StyledAppHeaderSearchForm>\n      <Button\n        variant='simple'\n        icon\n        onClick={() => {\n          setShowSearchButton(true);\n          focusSearchBtn.current = true;\n        }}\n        label={t('collapse_search')}\n      >\n        <Icon name='times' />\n      </Button>\n    </Flex>\n  ) : (\n    <Button\n      variant='simple'\n      icon\n      onClick={() => setShowSearchButton(false)}\n      ref={searchButtonRef}\n      label={t('expand_search')}\n    >\n      <Icon name='search' />\n    </Button>\n  );\n};\n\nconst Utils: FC<UtilsProps> = ({ operator, branch, action, appInfo }) => {\n  const isMediumOrAbove = useBreakpoint('md');\n  const isSmallOrAbove = useBreakpoint('sm');\n  const [appInfoEl, setAppInfoEl] = useElement(null);\n\n  return (\n    <Flex\n      container={{ justify: 'between', alignItems: 'center' }}\n      md={{ container: { justify: 'end' } }}\n      item={{ shrink: 1 }}\n      as={StyledUtilsContainer}\n    >\n      {appInfo && (\n        <Flex\n          container={{ justify: 'between', alignItems: 'center', gap: 0.5 }}\n          item={{ shrink: 1 }}\n          ref={setAppInfoEl}\n        >\n          <Flex as={StyledAppName} item={{ shrink: 1 }}>\n            {appInfo.name}\n          </Flex>\n          <StyledAppVersion>{appInfo.version}</StyledAppVersion>\n          <Tooltip target={appInfoEl} hideDelay='none'>\n            {`${appInfo.name} ${appInfo.version}`}\n          </Tooltip>\n        </Flex>\n      )}\n      <Flex container={{ alignItems: 'center' }}>\n        {branch && <BranchButton {...branch} compact={isSmallOrAbove ? branch.compact : true} />}\n        {action && (\n          <Flex\n            container={{ justify: 'between', alignItems: 'center', gap: 0.5 }}\n            item={{ shrink: 0 }}\n            as={Button}\n            variant='secondary'\n            icon={!isMediumOrAbove}\n            label={isMediumOrAbove ? undefined : action.text}\n            onClick={(e: MouseEvent<HTMLButtonElement>) => action.onClick?.(action.id, e)}\n            disabled={action.disabled}\n          >\n            {action.icon && <Icon name={action.icon} />}\n            {isMediumOrAbove && action.text}\n          </Flex>\n        )}\n      </Flex>\n      {isMediumOrAbove && (\n        <AppShellOperator\n          as={StyledAppHeaderOperator}\n          actions={operator.actions}\n          popover={{ placement: 'bottom-end' }}\n        >\n          <Avatar {...operator.avatar} />\n        </AppShellOperator>\n      )}\n    </Flex>\n  );\n};\n\nconst AppHeader: FunctionComponent<AppHeaderProps & ForwardProps> = forwardRef(function AppHeader(\n  {\n    contextSwitcher: { contexts, onContextClick, label: contextSwitcherLabel } = {},\n    brand,\n    utils,\n    links\n  }: PropsWithoutRef<AppHeaderProps>,\n  ref: AppHeaderProps['ref']\n) {\n  const selectedContext = contexts?.length > 1 ? contexts.find(ctx => ctx.selected)! : contexts[0];\n\n  const isMediumOrAbove = useBreakpoint('md');\n  const [showSearchButton, setShowSearchButton] = useState(true);\n\n  useEffect(() => {\n    if (isMediumOrAbove && !showSearchButton) {\n      setShowSearchButton(true);\n    }\n  }, [isMediumOrAbove]);\n\n  return (\n    <Flex\n      as={StyledAppHeader}\n      container={{\n        justify: 'between',\n        alignItems: 'center',\n        colGap: 2,\n        wrap: 'wrap',\n        pad: [0, 1]\n      }}\n      md={{ container: { wrap: 'nowrap' } }}\n      ref={ref}\n    >\n      {showSearchButton && (\n        <Flex\n          as={StyledBrandContainer}\n          container={{\n            justify: 'between',\n            alignItems: 'center',\n            gap: 1\n          }}\n          item={{ shrink: 0, alignSelf: 'stretch' }}\n        >\n          {contexts && onContextClick && contexts.length > 1 && (\n            <ContextSwitcher\n              contexts={contexts}\n              onContextClick={onContextClick}\n              label={contextSwitcherLabel}\n            />\n          )}\n          <Flex\n            as={brand.onClick || brand.href ? StyledBrandButton : 'div'}\n            variant='simple'\n            container={{ alignItems: 'center', justify: 'between', gap: 2, pad: 1 }}\n            aria-label={`${brand.label} - ${selectedContext.primary}`}\n            onClick={brand.onClick}\n            href={brand.href}\n          >\n            <Flex item={{ shrink: 0 }} as={StyledBrandImage} src={brand.logo} alt={brand.label} />\n            <Flex container={{ justify: 'between', alignItems: 'center', gap: 1 }}>\n              {selectedContext.visual}\n              <StyledContext>{selectedContext.primary}</StyledContext>\n            </Flex>\n          </Flex>\n        </Flex>\n      )}\n      {links && links.length > 0 && <Links links={links} />}\n\n      <Flex\n        container={{\n          gap: 1,\n          justify: 'center',\n          alignItems: 'center'\n        }}\n        item={{ grow: showSearchButton ? 0 : 1 }}\n        md={{ item: { grow: showSearchButton ? 1 : 0 } }}\n      >\n        {utils?.search && (\n          <AppHeaderSearch\n            {...utils.search}\n            showSearchButton={showSearchButton}\n            setShowSearchButton={setShowSearchButton}\n          />\n        )}\n        {showSearchButton && !isMediumOrAbove && utils?.operator && (\n          <AppShellOperator\n            as={StyledAppHeaderOperator}\n            actions={utils.operator.actions}\n            popover={{ placement: 'bottom-start' }}\n          >\n            <Avatar {...utils.operator.avatar} />\n          </AppShellOperator>\n        )}\n      </Flex>\n      {utils && <Utils {...utils} />}\n    </Flex>\n  );\n});\n\nexport default AppHeader;\n"]}
+{"version":3,"file":"AppHeader.js","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/AppHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useCallback, useEffect, useState, useRef } from 'react';\nimport type { MouseEvent, FC, PropsWithoutRef, Dispatch, SetStateAction } from 'react';\n\nimport {\n  ContextSwitcher,\n  Flex,\n  SearchInput,\n  useBreakpoint,\n  Button,\n  Icon,\n  useI18n,\n  Tooltip,\n  useElement,\n  Avatar\n} from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent, SearchInputProps } from '@pega/cosmos-react-core';\nimport AppShellOperator from '@pega/cosmos-react-core/lib/components/AppShell/Operator';\nimport {\n  StyledAppHeaderSearchForm,\n  StyledAppHeaderOperator\n} from '@pega/cosmos-react-core/lib/components/AppShell/AppHeader.styles';\n\nimport {\n  StyledAppHeader,\n  StyledTabs,\n  StyledUtilsContainer,\n  StyledBrandContainer,\n  StyledAppHeaderSearch,\n  StyledAppName,\n  StyledAppVersion,\n  StyledBrandButton,\n  StyledBrandImage,\n  StyledContext\n} from './AppHeader.styles';\nimport type { AppHeaderProps, LinkProps, UtilsProps } from './AppHeader.types';\nimport BranchButton from './BranchButton';\n\nconst Links: FC<{ links: LinkProps[] }> = ({ links }) => {\n  const [currentTabId, setCurrentTabId] = useState(links[0].id);\n\n  useEffect(() => {\n    setCurrentTabId(links[0].id);\n  }, [links]);\n\n  const handleTabClick = useCallback(\n    (id: string, e?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n      const newActiveTab = links.find(item => item.id === id);\n      if (newActiveTab) {\n        newActiveTab.onClick?.(id, e);\n        setCurrentTabId(newActiveTab.id);\n      }\n    },\n    [links]\n  );\n\n  return <StyledTabs tabs={links} currentTabId={currentTabId} onTabClick={handleTabClick} />;\n};\n\nconst AppHeaderSearch: FC<\n  SearchInputProps & {\n    showSearchButton: boolean;\n    setShowSearchButton: Dispatch<SetStateAction<boolean>>;\n  }\n> = ({ showSearchButton, setShowSearchButton, ...restProps }) => {\n  const isMediumOrAbove = useBreakpoint('md');\n  const t = useI18n();\n\n  const searchInputRef = useCallback(\n    (node: HTMLInputElement | null) => {\n      if (!showSearchButton && node) {\n        node.focus();\n      }\n    },\n    [showSearchButton]\n  );\n  const focusSearchBtn = useRef(false);\n  const searchButtonRef = useCallback((node: HTMLButtonElement | null) => {\n    if (node && focusSearchBtn.current) {\n      node.focus();\n    }\n  }, []);\n\n  return isMediumOrAbove || !showSearchButton ? (\n    <Flex\n      as={StyledAppHeaderSearch}\n      item={{ shrink: 0, grow: 1 }}\n      md={{ item: { grow: 0, shrink: 1 } }}\n      container={{ justify: 'between', alignItems: 'center', gap: 1 }}\n    >\n      <StyledAppHeaderSearchForm\n        role='search'\n        aria-label={t('sitewide')}\n        onSubmit={e => e.preventDefault()}\n        isMediumOrAbove={isMediumOrAbove}\n      >\n        <SearchInput {...restProps} ref={searchInputRef} />\n      </StyledAppHeaderSearchForm>\n      <Button\n        variant='simple'\n        icon\n        onClick={() => {\n          setShowSearchButton(true);\n          focusSearchBtn.current = true;\n        }}\n        label={t('collapse_search')}\n      >\n        <Icon name='times' />\n      </Button>\n    </Flex>\n  ) : (\n    <Button\n      variant='simple'\n      icon\n      onClick={() => setShowSearchButton(false)}\n      ref={searchButtonRef}\n      label={t('expand_search')}\n    >\n      <Icon name='search' />\n    </Button>\n  );\n};\n\nconst Utils: FC<UtilsProps> = ({ operator, branch, action, appInfo }) => {\n  const isMediumOrAbove = useBreakpoint('md');\n  const isSmallOrAbove = useBreakpoint('sm');\n  const [appInfoEl, setAppInfoEl] = useElement(null);\n\n  return (\n    <Flex\n      container={{ justify: 'between', alignItems: 'center' }}\n      md={{ container: { justify: 'end' } }}\n      item={{ shrink: 1 }}\n      as={StyledUtilsContainer}\n    >\n      {appInfo && (\n        <Flex\n          container={{ justify: 'between', alignItems: 'center', gap: 0.5 }}\n          item={{ shrink: 1 }}\n          ref={setAppInfoEl}\n        >\n          <Flex as={StyledAppName} item={{ shrink: 1 }}>\n            {appInfo.name}\n          </Flex>\n          <StyledAppVersion>{appInfo.version}</StyledAppVersion>\n          <Tooltip target={appInfoEl} hideDelay='none'>\n            {`${appInfo.name} ${appInfo.version}`}\n          </Tooltip>\n        </Flex>\n      )}\n      <Flex container={{ alignItems: 'center' }}>\n        {branch && <BranchButton {...branch} compact={isSmallOrAbove ? branch.compact : true} />}\n        {action && (\n          <Flex\n            container={{ justify: 'between', alignItems: 'center', gap: 0.5 }}\n            item={{ shrink: 0 }}\n            as={Button}\n            variant='secondary'\n            icon={!isMediumOrAbove}\n            label={isMediumOrAbove ? undefined : action.text}\n            onClick={(e: MouseEvent<HTMLButtonElement>) => action.onClick?.(action.id, e)}\n            disabled={action.disabled}\n          >\n            {action.icon && <Icon name={action.icon} />}\n            {isMediumOrAbove && action.text}\n          </Flex>\n        )}\n      </Flex>\n      {isMediumOrAbove && (\n        <AppShellOperator\n          as={StyledAppHeaderOperator}\n          actions={operator.actions}\n          popover={{ placement: 'bottom-end' }}\n          name={operator.name}\n        >\n          <Avatar {...operator.avatar} />\n        </AppShellOperator>\n      )}\n    </Flex>\n  );\n};\n\nconst AppHeader: ForwardRefForwardPropsComponent<AppHeaderProps> = forwardRef(function AppHeader(\n  {\n    contextSwitcher: { contexts, onContextClick, label: contextSwitcherLabel } = {},\n    brand,\n    utils,\n    links\n  }: PropsWithoutRef<AppHeaderProps>,\n  ref: AppHeaderProps['ref']\n) {\n  const selectedContext = contexts?.length > 1 ? contexts.find(ctx => ctx.selected)! : contexts[0];\n\n  const isMediumOrAbove = useBreakpoint('md');\n  const [showSearchButton, setShowSearchButton] = useState(true);\n\n  useEffect(() => {\n    if (isMediumOrAbove && !showSearchButton) {\n      setShowSearchButton(true);\n    }\n  }, [isMediumOrAbove]);\n\n  return (\n    <Flex\n      as={StyledAppHeader}\n      container={{\n        justify: 'between',\n        alignItems: 'center',\n        colGap: 2,\n        wrap: 'wrap',\n        pad: [0, 1]\n      }}\n      md={{ container: { wrap: 'nowrap' } }}\n      ref={ref}\n    >\n      {showSearchButton && (\n        <Flex\n          as={StyledBrandContainer}\n          container={{\n            justify: 'between',\n            alignItems: 'center',\n            gap: 1\n          }}\n          item={{ shrink: 0, alignSelf: 'stretch' }}\n        >\n          {contexts && onContextClick && contexts.length > 1 && (\n            <ContextSwitcher\n              contexts={contexts}\n              onContextClick={onContextClick}\n              label={contextSwitcherLabel}\n            />\n          )}\n          <Flex\n            as={brand.onClick || brand.href ? StyledBrandButton : 'div'}\n            variant='simple'\n            container={{ alignItems: 'center', justify: 'between', gap: 2, pad: 1 }}\n            aria-label={`${brand.label} - ${selectedContext.primary}`}\n            onClick={brand.onClick}\n            href={brand.href}\n          >\n            <Flex item={{ shrink: 0 }} as={StyledBrandImage} src={brand.logo} alt={brand.label} />\n            <Flex container={{ justify: 'between', alignItems: 'center', gap: 1 }}>\n              {selectedContext.visual}\n              <StyledContext>{selectedContext.primary}</StyledContext>\n            </Flex>\n          </Flex>\n        </Flex>\n      )}\n      {links && links.length > 0 && <Links links={links} />}\n\n      <Flex\n        container={{\n          gap: 1,\n          justify: 'center',\n          alignItems: 'center'\n        }}\n        item={{ grow: showSearchButton ? 0 : 1 }}\n        md={{ item: { grow: showSearchButton ? 1 : 0 } }}\n      >\n        {utils?.search && (\n          <AppHeaderSearch\n            {...utils.search}\n            showSearchButton={showSearchButton}\n            setShowSearchButton={setShowSearchButton}\n          />\n        )}\n        {showSearchButton && !isMediumOrAbove && utils?.operator && (\n          <AppShellOperator\n            as={StyledAppHeaderOperator}\n            actions={utils.operator.actions}\n            popover={{ placement: 'bottom-start' }}\n            name={utils.operator.name}\n          >\n            <Avatar {...utils.operator.avatar} />\n          </AppShellOperator>\n        )}\n      </Flex>\n      {utils && <Utils {...utils} />}\n    </Flex>\n  );\n});\n\nexport default AppHeader;\n"]}

package/lib/components/AppShell/Header/AppHeader.styles.d.ts

@@ -1,8 +1,8 @@
 import { Text, Tabs } from '@pega/cosmos-react-core';
 export declare const StyledAppHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledBrandContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledBrandButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core/lib/components/Button/BareButton").BareButtonProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledBrandImage: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ImageProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledBrandButton: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core/lib/components/Button/BareButton").BareButtonProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledBrandImage: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").ImageProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledContext: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledTabs: typeof Tabs;
 export declare const StyledAppHeaderSearch: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/lib/components/AppShell/Header/AppHeader.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/AppHeader.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAoB,IAAI,EAAE,IAAI,EAAuB,MAAM,yBAAyB,CAAC;AAI5F,eAAO,MAAM,eAAe,4GA8B3B,CAAC;AAIF,eAAO,MAAM,oBAAoB,yGAkBhC,CAAC;AAIF,eAAO,MAAM,iBAAiB,0QAa5B,CAAC;AAIH,eAAO,MAAM,gBAAgB,oOAc3B,CAAC;AAEH,eAAO,MAAM,aAAa,0GAIzB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,OAAO,IA4B9B,CAAC;AAIH,eAAO,MAAM,qBAAqB,yGA0BjC,CAAC;AAIF,eAAO,MAAM,oBAAoB,yGAmBhC,CAAC;AAIF,eAAO,MAAM,aAAa,EAAE,OAAO,IAUjC,CAAC;AAIH,eAAO,MAAM,gBAAgB,EAAE,OAAO,IAKpC,CAAC"}
+{"version":3,"file":"AppHeader.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/AppHeader.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAoB,IAAI,EAAE,IAAI,EAAuB,MAAM,yBAAyB,CAAC;AAI5F,eAAO,MAAM,eAAe,4GA8B3B,CAAC;AAIF,eAAO,MAAM,oBAAoB,yGAkBhC,CAAC;AAIF,eAAO,MAAM,iBAAiB,yPAa5B,CAAC;AAIH,eAAO,MAAM,gBAAgB,mNAc3B,CAAC;AAEH,eAAO,MAAM,aAAa,0GAIzB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,OAAO,IA4B9B,CAAC;AAIH,eAAO,MAAM,qBAAqB,yGA0BjC,CAAC;AAIF,eAAO,MAAM,oBAAoB,yGAmBhC,CAAC;AAIF,eAAO,MAAM,aAAa,EAAE,OAAO,IAUjC,CAAC;AAIH,eAAO,MAAM,gBAAgB,EAAE,OAAO,IAKpC,CAAC"}

package/lib/components/BackgroundPicker/BackgroundPicker.d.ts

@@ -0,0 +1,6 @@
+import type { BackgroundPickerProps } from './BackgroundPicker.types';
+declare const _default: import("react").ForwardRefExoticComponent<Omit<BackgroundPickerProps, "ref"> & import("react").RefAttributes<HTMLInputElement>> & {
+    getTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["control", "overlay", "swatch-preview", "style", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
+};
+export default _default;
+//# sourceMappingURL=BackgroundPicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BackgroundPicker.d.ts","sourceRoot":"","sources":["../../../src/components/BackgroundPicker/BackgroundPicker.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EACV,qBAAqB,EAGtB,MAAM,0BAA0B,CAAC;;;;AAelC,wBA4ME"}

package/lib/components/BackgroundPicker/BackgroundPicker.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useMemo } from 'react';
+import { Flex, FormDialog, FormField, Select, Option, StyledFormControl, Tooltip, useConsolidatedRef, useElement, useI18n, useOuterEvent, useTestIds, useUID, withTestIds, Icon, registerIcon } from '@pega/cosmos-react-core';
+import * as layersIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/layers.icon';
+import { backgroundTypeTranslationKeyMap, positionTranslationKeyMap } from './BackgroundPicker.types';
+import { getBackgroundPickerTestIds } from './BackgroundPicker.test-ids';
+import { ColorSwatchPreview, StyledBackgroundPicker, StyledText } from './BackgroundPicker.styles';
+import GradientConfig from './GradientConfig';
+import ImageConfig from './ImageConfig';
+import SolidColorConfig from './SolidColorConfig';
+import { getBackgroundImageDetails, getBackgroundType, getParsedGradientDetails, supportedBackgroundOptions } from './utils';
+registerIcon(layersIcon);
+export default withTestIds(forwardRef(function BackgroundPicker(props, ref) {
+    const uid = useUID();
+    const { testId, id = uid, value, label, info, disabled, status, required, readOnly, labelHidden, swatchOnly = false, inline, onBeforeClose, onSubmit, additionalInfo, backgroundOptions, ...restProps } = props;
+    const t = useI18n();
+    const backgrounds = backgroundOptions ?? supportedBackgroundOptions;
+    const bgType = useMemo(() => {
+        return getBackgroundType(value, backgrounds) ?? backgrounds[0];
+    }, [value, backgrounds]);
+    const dialogRef = useConsolidatedRef(ref);
+    const swatchRef = useRef(null);
+    const [showDialog, setShowDialog] = useState(false);
+    const [backgroundType, setBackgroundType] = useState(bgType);
+    const testIds = useTestIds(testId, getBackgroundPickerTestIds);
+    const solidColorRef = useRef(null);
+    const imageRef = useRef(null);
+    const gradientRef = useRef(null);
+    const [tooltipEl, setTooltipEl] = useElement();
+    const hideBackgroundPicker = () => {
+        if (showDialog) {
+            onBeforeClose?.();
+        }
+        setShowDialog(false);
+    };
+    useOuterEvent('mousedown', [dialogRef], hideBackgroundPicker);
+    const handleSubmit = () => {
+        if (backgroundType === 'solid-color' && solidColorRef.current) {
+            onSubmit(solidColorRef.current.getValue());
+        }
+        else if (backgroundType === 'image' && imageRef.current) {
+            onSubmit(imageRef.current.getValue());
+        }
+        else if (backgroundType.includes('gradient') && gradientRef.current) {
+            onSubmit(gradientRef.current.getValue());
+        }
+        else if (backgroundType === 'transparent') {
+            onSubmit('transparent');
+        }
+        else if (backgroundType === 'automatic') {
+            onSubmit('auto');
+        }
+    };
+    const openDialog = () => {
+        setShowDialog(true);
+        setBackgroundType(bgType);
+    };
+    const tooltipText = useMemo(() => {
+        if (bgType === 'automatic') {
+            return `${t('color')}: ${t('automatic')}`;
+        }
+        if (['transparent', 'solid-color'].includes(bgType)) {
+            return `${t('color')}: ${value}`;
+        }
+        if (bgType === 'image') {
+            return `${t('image')}: ${t(positionTranslationKeyMap[getBackgroundImageDetails(value).backgroundPosition])}`;
+        }
+        if (bgType.includes('gradient')) {
+            const stops = getParsedGradientDetails(bgType, value).stops;
+            return `${t(backgroundTypeTranslationKeyMap[bgType])}: ${stops[0].color} - ${stops[stops.length - 1].color}`;
+        }
+    }, [t, value, bgType]);
+    return (_jsxs(_Fragment, { children: [_jsx(FormField, { testId: testIds, inline: inline, container: inline ? { justify: 'between' } : undefined, as: StyledBackgroundPicker, id: id, label: label, labelHidden: labelHidden, swatchOnly: swatchOnly, info: info, disabled: disabled, status: status, required: required, additionalInfo: additionalInfo, value: value, children: _jsxs(Flex, { container: { alignItems: 'center' }, item: swatchOnly ? { alignSelf: 'start' } : undefined, as: StyledFormControl, disabled: disabled, status: status, required: required, readOnly: readOnly, ref: swatchRef, onClick: readOnly || disabled ? undefined : openDialog, children: [_jsx("input", { "data-testid": testIds.control, ...restProps, id: id, type: readOnly ? undefined : 'color', value: value, disabled: disabled, required: required, readOnly: readOnly, onClick: e => e.preventDefault(), onChange: () => { } }), _jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, as: ColorSwatchPreview, "data-testid": testIds.swatchPreview, value: value, ref: setTooltipEl, children: bgType === 'automatic' && _jsx(Icon, { name: 'layers' }) }), !swatchOnly && _jsx(StyledText, { children: value })] }) }), swatchRef.current && showDialog && (_jsx(FormDialog, { ref: dialogRef, "data-testid": testIds.overlay, heading: t('edit_background_picker_label', typeof label === 'string' ? [label.toLocaleLowerCase()] : []), target: swatchRef.current, onCancel: hideBackgroundPicker, onSubmit: () => {
+                    hideBackgroundPicker();
+                    handleSubmit();
+                }, placement: 'auto-end', children: _jsxs(_Fragment, { children: [_jsx(Select, { testId: testIds.style, value: backgroundType, label: t('style'), onChange: e => {
+                                setBackgroundType(e.target.value);
+                            }, children: backgrounds.map(option => {
+                                return (_jsx(Option, { value: option, children: t(backgroundTypeTranslationKeyMap[option]) }, option));
+                            }) }), backgroundType.includes('gradient') && (_jsx(GradientConfig, { testId: testIds.root, type: backgroundType, value: value, ref: gradientRef })), backgroundType === 'image' && (_jsx(ImageConfig, { testId: testIds.root, value: value, ref: imageRef })), backgroundType === 'solid-color' && (_jsx(SolidColorConfig, { testId: testIds.root, value: value, ref: solidColorRef, disableOpacity: !backgrounds.includes('transparent') }))] }) })), tooltipEl && (_jsx(Tooltip, { target: tooltipEl, showDelay: 'none', hideDelay: 'none', children: tooltipText }))] }));
+}), getBackgroundPickerTestIds);
+//# sourceMappingURL=BackgroundPicker.js.map

package/lib/components/BackgroundPicker/BackgroundPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackgroundPicker.js","sourceRoot":"","sources":["../../../src/components/BackgroundPicker/BackgroundPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useRef, useMemo } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport {\n  Flex,\n  FormDialog,\n  FormField,\n  Select,\n  Option,\n  StyledFormControl,\n  Tooltip,\n  useConsolidatedRef,\n  useElement,\n  useI18n,\n  useOuterEvent,\n  useTestIds,\n  useUID,\n  withTestIds,\n  type RefElement,\n  Icon,\n  registerIcon\n} from '@pega/cosmos-react-core';\nimport * as layersIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/layers.icon';\n\nimport {\n  backgroundTypeTranslationKeyMap,\n  positionTranslationKeyMap\n} from './BackgroundPicker.types';\nimport type {\n  BackgroundPickerProps,\n  BackgroundType,\n  ComputedBackgroundRef\n} from './BackgroundPicker.types';\nimport { getBackgroundPickerTestIds } from './BackgroundPicker.test-ids';\nimport { ColorSwatchPreview, StyledBackgroundPicker, StyledText } from './BackgroundPicker.styles';\nimport GradientConfig from './GradientConfig';\nimport ImageConfig from './ImageConfig';\nimport SolidColorConfig from './SolidColorConfig';\nimport {\n  getBackgroundImageDetails,\n  getBackgroundType,\n  getParsedGradientDetails,\n  supportedBackgroundOptions\n} from './utils';\n\nregisterIcon(layersIcon);\n\nexport default withTestIds(\n  forwardRef<RefElement<BackgroundPickerProps>, PropsWithoutRef<BackgroundPickerProps>>(\n    function BackgroundPicker(props, ref) {\n      const uid = useUID();\n      const {\n        testId,\n        id = uid,\n        value,\n        label,\n        info,\n        disabled,\n        status,\n        required,\n        readOnly,\n        labelHidden,\n        swatchOnly = false,\n        inline,\n        onBeforeClose,\n        onSubmit,\n        additionalInfo,\n        backgroundOptions,\n        ...restProps\n      } = props;\n\n      const t = useI18n();\n      const backgrounds: BackgroundType[] = backgroundOptions ?? supportedBackgroundOptions;\n\n      const bgType = useMemo(() => {\n        return getBackgroundType(value, backgrounds) ?? backgrounds[0];\n      }, [value, backgrounds]);\n\n      const dialogRef = useConsolidatedRef(ref);\n      const swatchRef = useRef(null);\n      const [showDialog, setShowDialog] = useState(false);\n      const [backgroundType, setBackgroundType] = useState<BackgroundType>(bgType);\n      const testIds = useTestIds(testId, getBackgroundPickerTestIds);\n      const solidColorRef = useRef<ComputedBackgroundRef>(null);\n      const imageRef = useRef<ComputedBackgroundRef>(null);\n      const gradientRef = useRef<ComputedBackgroundRef>(null);\n      const [tooltipEl, setTooltipEl] = useElement();\n\n      const hideBackgroundPicker = () => {\n        if (showDialog) {\n          onBeforeClose?.();\n        }\n\n        setShowDialog(false);\n      };\n\n      useOuterEvent('mousedown', [dialogRef], hideBackgroundPicker);\n\n      const handleSubmit = () => {\n        if (backgroundType === 'solid-color' && solidColorRef.current) {\n          onSubmit(solidColorRef.current.getValue());\n        } else if (backgroundType === 'image' && imageRef.current) {\n          onSubmit(imageRef.current.getValue());\n        } else if (backgroundType.includes('gradient') && gradientRef.current) {\n          onSubmit(gradientRef.current.getValue());\n        } else if (backgroundType === 'transparent') {\n          onSubmit('transparent');\n        } else if (backgroundType === 'automatic') {\n          onSubmit('auto');\n        }\n      };\n\n      const openDialog = () => {\n        setShowDialog(true);\n        setBackgroundType(bgType);\n      };\n\n      const tooltipText = useMemo(() => {\n        if (bgType === 'automatic') {\n          return `${t('color')}: ${t('automatic')}`;\n        }\n        if (['transparent', 'solid-color'].includes(bgType)) {\n          return `${t('color')}: ${value}`;\n        }\n        if (bgType === 'image') {\n          return `${t('image')}: ${t(positionTranslationKeyMap[getBackgroundImageDetails(value).backgroundPosition])}`;\n        }\n        if (bgType.includes('gradient')) {\n          const stops = getParsedGradientDetails(bgType, value).stops;\n          return `${t(backgroundTypeTranslationKeyMap[bgType])}: ${stops[0].color} - ${stops[stops.length - 1].color}`;\n        }\n      }, [t, value, bgType]);\n\n      return (\n        <>\n          <FormField\n            testId={testIds}\n            inline={inline}\n            container={inline ? { justify: 'between' } : undefined}\n            as={StyledBackgroundPicker}\n            id={id}\n            label={label}\n            labelHidden={labelHidden}\n            swatchOnly={swatchOnly}\n            info={info}\n            disabled={disabled}\n            status={status}\n            required={required}\n            additionalInfo={additionalInfo}\n            value={value}\n          >\n            <Flex\n              container={{ alignItems: 'center' }}\n              item={swatchOnly ? { alignSelf: 'start' } : undefined}\n              as={StyledFormControl}\n              disabled={disabled}\n              status={status}\n              required={required}\n              readOnly={readOnly}\n              ref={swatchRef}\n              onClick={readOnly || disabled ? undefined : openDialog}\n            >\n              <input\n                data-testid={testIds.control}\n                {...restProps}\n                id={id}\n                type={readOnly ? undefined : 'color'}\n                value={value}\n                disabled={disabled}\n                required={required}\n                readOnly={readOnly}\n                onClick={e => e.preventDefault()}\n                onChange={() => {}}\n              />\n              <Flex\n                container={{ justify: 'center', alignItems: 'center' }}\n                as={ColorSwatchPreview}\n                data-testid={testIds.swatchPreview}\n                value={value}\n                ref={setTooltipEl}\n              >\n                {bgType === 'automatic' && <Icon name='layers' />}\n              </Flex>\n              {!swatchOnly && <StyledText>{value}</StyledText>}\n            </Flex>\n          </FormField>\n          {swatchRef.current && showDialog && (\n            <FormDialog\n              ref={dialogRef}\n              data-testid={testIds.overlay}\n              heading={t(\n                'edit_background_picker_label',\n                typeof label === 'string' ? [label.toLocaleLowerCase()] : []\n              )}\n              target={swatchRef.current}\n              onCancel={hideBackgroundPicker}\n              onSubmit={() => {\n                hideBackgroundPicker();\n                handleSubmit();\n              }}\n              placement='auto-end'\n            >\n              <>\n                <Select\n                  testId={testIds.style}\n                  value={backgroundType}\n                  label={t('style')}\n                  onChange={e => {\n                    setBackgroundType(e.target.value as BackgroundType);\n                  }}\n                >\n                  {backgrounds.map(option => {\n                    return (\n                      <Option key={option} value={option}>\n                        {t(backgroundTypeTranslationKeyMap[option])}\n                      </Option>\n                    );\n                  })}\n                </Select>\n                {backgroundType.includes('gradient') && (\n                  <GradientConfig\n                    testId={testIds.root}\n                    type={backgroundType}\n                    value={value}\n                    ref={gradientRef}\n                  />\n                )}\n                {backgroundType === 'image' && (\n                  <ImageConfig testId={testIds.root} value={value} ref={imageRef} />\n                )}\n                {backgroundType === 'solid-color' && (\n                  <SolidColorConfig\n                    testId={testIds.root}\n                    value={value}\n                    ref={solidColorRef}\n                    disableOpacity={!backgrounds.includes('transparent')}\n                  />\n                )}\n              </>\n            </FormDialog>\n          )}\n          {tooltipEl && (\n            <Tooltip target={tooltipEl} showDelay='none' hideDelay='none'>\n              {tooltipText}\n            </Tooltip>\n          )}\n        </>\n      );\n    }\n  ),\n  getBackgroundPickerTestIds\n);\n"]}

package/lib/components/BackgroundPicker/BackgroundPicker.styles.d.ts

@@ -0,0 +1,15 @@
+import { type DefaultTheme } from 'styled-components';
+import type { BackgroundPickerPropsWithDefaults } from './BackgroundPicker.types';
+export declare const StyledBackgroundPicker: import("styled-components").StyledComponent<"div", DefaultTheme, Pick<BackgroundPickerPropsWithDefaults, "value" | "swatchOnly">, never>;
+export declare const ColorSwatchPreview: import("styled-components").StyledComponent<"div", DefaultTheme, {
+    value: string;
+    theme: DefaultTheme;
+}, never>;
+export declare const StyledPreviewContainer: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
+export declare const StyledPreview: import("styled-components").StyledComponent<"div", DefaultTheme, {
+    background: string;
+}, never>;
+export declare const StyledFlex: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").FlexProps>, DefaultTheme, {}, never>;
+export declare const StyledTableWrapper: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").FlexProps>, DefaultTheme, {}, never>;
+export declare const StyledText: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").TextProps>, DefaultTheme, {}, never>;
+//# sourceMappingURL=BackgroundPicker.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BackgroundPicker.styles.d.ts","sourceRoot":"","sources":["../../../src/components/BackgroundPicker/BackgroundPicker.styles.ts"],"names":[],"mappings":"AAAA,OAAe,EAAO,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAkBnE,OAAO,KAAK,EAAE,iCAAiC,EAAE,MAAM,0BAA0B,CAAC;AAElF,eAAO,MAAM,sBAAsB,0IAiGlC,CAAC;AAIF,eAAO,MAAM,kBAAkB;WASpB,MAAM;WACN,YAAY;SAiCtB,CAAC;AAIF,eAAO,MAAM,sBAAsB,6EAOjC,CAAC;AAIH,eAAO,MAAM,aAAa;gBAA4B,MAAM;SAM1D,CAAC;AAEH,eAAO,MAAM,UAAU,sLAQtB,CAAC;AAEF,eAAO,MAAM,kBAAkB,sLAU7B,CAAC;AAIH,eAAO,MAAM,UAAU,sLAEtB,CAAC"}

package/lib/components/BackgroundPicker/BackgroundPicker.styles.js

@@ -0,0 +1,152 @@
+import styled, { css } from 'styled-components';
+import { hideVisually, parseToRgb } from 'polished';
+import { calculateFontSize, StyledFormControl, defaultThemeProp, Flex, StyledCard, Text, StyledIcon, tryCatch } from '@pega/cosmos-react-core';
+import { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';
+import StyledInput from '@pega/cosmos-react-core/lib/components/Input/Input.styles';
+import { ellipsisOverflow } from '@pega/cosmos-react-core/lib/styles/mixins';
+export const StyledBackgroundPicker = styled.div(({ theme: { base: { spacing, colors: { purple }, shadow: { focus }, 'font-family': fontFamily, 'font-size': fontSize, 'font-scale': fontScale }, components: { input: { height }, 'form-control': { 'border-width': borderWidth, 'border-color': borderColor } } }, swatchOnly, value }) => {
+    const fontSizes = calculateFontSize(fontSize, fontScale);
+    return css `
+      ${StyledFormControl} {
+        overflow: hidden;
+        border-width: ${value === 'auto' ? `calc(1.5 * ${borderWidth})` : borderWidth};
+        border-style: ${value === 'auto' ? 'dotted' : 'solid'};
+
+        ${value === 'auto' &&
+        css `
+          border-color: ${purple.medium};
+        `}
+
+        ${!swatchOnly &&
+        css `
+          min-width: calc(16 * ${spacing});
+        `}
+
+        ${!swatchOnly &&
+        css `
+          padding-inline-end: ${spacing};
+        `}
+
+        &:focus-within {
+          box-shadow: ${focus};
+          border: none;
+        }
+
+        &:hover:not([readonly]):not([disabled]):not(:focus, :focus-within) {
+          ${value === 'auto' &&
+        css `
+            border-color: ${purple.dark};
+          `}
+        }
+
+        & > input {
+          ${hideVisually}
+
+          & + div {
+            height: calc(${height} - (2 * ${borderWidth}));
+
+            ${swatchOnly
+        ? css `
+                  width: calc(${height} - (2 * ${borderWidth}));
+                `
+        : css `
+                  min-width: calc(${height} - ${borderWidth});
+                  margin-inline-end: ${spacing};
+                  border-inline-end: ${borderWidth} solid ${borderColor};
+                `}
+          }
+
+          &:focus + div {
+            width: ${height};
+            height: ${height};
+          }
+        }
+
+        & input {
+          height: 2rem;
+          min-height: 2rem;
+          color: #000000;
+          background-color: #ffffff;
+          font-size: ${fontSizes.s};
+          font-family: ${fontFamily};
+
+          & + label {
+            font-weight: 600;
+            color: rgba(0, 0, 0, 0.6);
+            font-size: ${fontSizes.s};
+            font-family: ${fontFamily};
+          }
+        }
+      }
+    `;
+});
+StyledBackgroundPicker.defaultProps = defaultThemeProp;
+export const ColorSwatchPreview = styled.div(({ value, theme: { base: { colors: { purple } } } }) => {
+    const rgb = tryCatch(() => parseToRgb(value));
+    let background = value;
+    if (value === 'auto') {
+        background = 'transparent';
+    }
+    else if (value === 'transparent' || (rgb && rgb.alpha === 0)) {
+        // Red slash to denote transparent or no color
+        background =
+            'linear-gradient(137deg,#ffffff 0%,#ffffff 50%,#ff0000 54%,#ffffff 58%,#ffffff 100%)';
+    }
+    return css `
+      background: repeating-conic-gradient(#dddddd 0% 25%, transparent 0% 50%) 0 0 / 0.5rem 0.5rem;
+      position: relative;
+
+      & ${StyledIcon} {
+        width: 50%;
+        height: 50%;
+        z-index: 1;
+        fill: ${purple.dark};
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background: ${background};
+      }
+    `;
+});
+ColorSwatchPreview.defaultProps = defaultThemeProp;
+export const StyledPreviewContainer = styled.div(({ theme }) => {
+    return css `
+    background: repeating-conic-gradient(#dddddd 0% 25%, transparent 0% 50%) 0 0 / 0.5rem 0.5rem;
+    height: ${theme.base['content-width'].xs};
+    border: 0.0625rem solid ${theme.base.palette['border-line']};
+    position: relative;
+  `;
+});
+StyledPreviewContainer.defaultProps = defaultThemeProp;
+export const StyledPreview = styled.div(({ background }) => {
+    return css `
+    background: ${background};
+    width: 100%;
+    height: 100%;
+  `;
+});
+export const StyledFlex = styled(Flex) `
+  ${StyledCard} {
+    width: 100%;
+  }
+
+  &&& ${StyledCardContent} {
+    padding: 0;
+  }
+`;
+export const StyledTableWrapper = styled(Flex)(({ theme: { base: { spacing } } }) => {
+    return css `
+    ${StyledInput} {
+      width: calc(6 * ${spacing});
+    }
+  `;
+});
+StyledTableWrapper.defaultProps = defaultThemeProp;
+export const StyledText = styled(Text) `
+  ${ellipsisOverflow}
+`;
+//# sourceMappingURL=BackgroundPicker.styles.js.map