@pega/cosmos-react-work 3.0.0-dev.4.1 → 3.0.0-dev.6.0

package/lib/components/CaseView/UtilitiesSummary.js

@@ -14,8 +14,8 @@ const UtilitiesSummary = ({ items = [], ...restProps }) => {
                     direction: 'column',
                     alignItems: 'center',
                     gap: 0.5
-                }, item: { grow: 1 }, children: [_jsx(Icon, { name: item.iconName }, void 0), item.count !== undefined && _jsx(Count, { variant: 'default', children: item.count }, void 0)] }, item.iconName));
-        }) }, void 0)) : null;
+                }, item: { grow: 1 }, children: [_jsx(Icon, { name: item.iconName }), item.count !== undefined && _jsx(Count, { variant: 'default', children: item.count })] }, item.iconName));
+        }) })) : null;
 };
 export default UtilitiesSummary;
 //# sourceMappingURL=UtilitiesSummary.js.map

package/lib/components/CaseView/UtilitiesSummary.js.map

@@ -1 +1 @@
-{"version":3,"file":"UtilitiesSummary.js","sourceRoot":"","sources":["../../../src/components/CaseView/UtilitiesSummary.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAgB,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAMzF,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7D,OAAO,GAAG,CAAA;;eAEG,KAAK,CAAC,IAAI,CAAC,OAAO;GAC9B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,gBAAgB,GAA4D,CAAC,EACjF,KAAK,GAAG,EAAE,EACV,GAAG,SAAS,EACU,EAAE,EAAE;IAC1B,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CACpB,KAAC,IAAI,OACC,SAAS,EACb,WAAW,QACX,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,gBACpD,GAAG,CAAC,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC,wBAAwB,CAAC,EAAE,EACvE,EAAE,EAAE,sBAAsB,YAEzB,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAChB,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE;oBACT,SAAS,EAAE,QAAQ;oBACnB,UAAU,EAAE,QAAQ;oBACpB,GAAG,EAAE,GAAG;iBACT,EACD,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,aAGjB,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,WAAI,EAC5B,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,KAAC,KAAK,IAAC,OAAO,EAAC,SAAS,YAAE,IAAI,CAAC,KAAK,WAAS,KAHrE,IAAI,CAAC,QAAQ,CAIb,CACR,CAAC;QACJ,CAAC,CAAC,WACG,CACR,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import { FunctionComponent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Card, Count, Flex, Icon, ForwardProps, useI18n } from '@pega/cosmos-react-core';\n\nexport interface UtilitiesSummaryProps {\n  items: { iconName: string; count?: number }[];\n}\n\nexport const StyledUtilitiesSummary = styled.div(({ theme }) => {\n  return css`\n    width: 2.75rem;\n    padding: ${theme.base.spacing} 0;\n  `;\n});\n\nconst UtilitiesSummary: FunctionComponent<UtilitiesSummaryProps & ForwardProps> = ({\n  items = [],\n  ...restProps\n}: UtilitiesSummaryProps) => {\n  const t = useI18n();\n  return items.length ? (\n    <Card\n      {...restProps}\n      interactive\n      tabIndex={0}\n      role='button'\n      container={{ direction: 'column', alignItems: 'center', gap: 3 }}\n      aria-label={`${t('utilities_summary')}. ${t('expand_utilities_panel')}`}\n      as={StyledUtilitiesSummary}\n    >\n      {items.map(item => {\n        return (\n          <Flex\n            container={{\n              direction: 'column',\n              alignItems: 'center',\n              gap: 0.5\n            }}\n            item={{ grow: 1 }}\n            key={item.iconName}\n          >\n            <Icon name={item.iconName} />\n            {item.count !== undefined && <Count variant='default'>{item.count}</Count>}\n          </Flex>\n        );\n      })}\n    </Card>\n  ) : null;\n};\n\nexport default UtilitiesSummary;\n"]}
+{"version":3,"file":"UtilitiesSummary.js","sourceRoot":"","sources":["../../../src/components/CaseView/UtilitiesSummary.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAgB,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAMzF,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7D,OAAO,GAAG,CAAA;;eAEG,KAAK,CAAC,IAAI,CAAC,OAAO;GAC9B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,gBAAgB,GAA4D,CAAC,EACjF,KAAK,GAAG,EAAE,EACV,GAAG,SAAS,EACU,EAAE,EAAE;IAC1B,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CACpB,KAAC,IAAI,OACC,SAAS,EACb,WAAW,QACX,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,gBACpD,GAAG,CAAC,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC,wBAAwB,CAAC,EAAE,EACvE,EAAE,EAAE,sBAAsB,YAEzB,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAChB,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE;oBACT,SAAS,EAAE,QAAQ;oBACnB,UAAU,EAAE,QAAQ;oBACpB,GAAG,EAAE,GAAG;iBACT,EACD,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,aAGjB,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAI,EAC5B,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,KAAC,KAAK,IAAC,OAAO,EAAC,SAAS,YAAE,IAAI,CAAC,KAAK,GAAS,KAHrE,IAAI,CAAC,QAAQ,CAIb,CACR,CAAC;QACJ,CAAC,CAAC,GACG,CACR,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import { FunctionComponent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Card, Count, Flex, Icon, ForwardProps, useI18n } from '@pega/cosmos-react-core';\n\nexport interface UtilitiesSummaryProps {\n  items: { iconName: string; count?: number }[];\n}\n\nexport const StyledUtilitiesSummary = styled.div(({ theme }) => {\n  return css`\n    width: 2.75rem;\n    padding: ${theme.base.spacing} 0;\n  `;\n});\n\nconst UtilitiesSummary: FunctionComponent<UtilitiesSummaryProps & ForwardProps> = ({\n  items = [],\n  ...restProps\n}: UtilitiesSummaryProps) => {\n  const t = useI18n();\n  return items.length ? (\n    <Card\n      {...restProps}\n      interactive\n      tabIndex={0}\n      role='button'\n      container={{ direction: 'column', alignItems: 'center', gap: 3 }}\n      aria-label={`${t('utilities_summary')}. ${t('expand_utilities_panel')}`}\n      as={StyledUtilitiesSummary}\n    >\n      {items.map(item => {\n        return (\n          <Flex\n            container={{\n              direction: 'column',\n              alignItems: 'center',\n              gap: 0.5\n            }}\n            item={{ grow: 1 }}\n            key={item.iconName}\n          >\n            <Icon name={item.iconName} />\n            {item.count !== undefined && <Count variant='default'>{item.count}</Count>}\n          </Flex>\n        );\n      })}\n    </Card>\n  ) : null;\n};\n\nexport default UtilitiesSummary;\n"]}

package/lib/components/ConfigurableLayout/ConfigurableLayout.js

@@ -87,7 +87,7 @@ const ConfigurableLayout = forwardRef(({ items, arrangement }, ref) => {
         }
         return null;
     }, [items, renderMode]);
-    return (_jsx(StyledConfigurableLayout, { children: _jsxs(Flex, { as: StyledCellGrid, container: { wrap: 'wrap', justify: 'stretch', alignItems: 'stretch' }, item: { basis: containerMinWidth, grow: 1 }, ref: ref, children: [_jsx(StyledContainerRuler, { ref: containerRulerRef }, void 0), content] }, void 0) }, void 0));
+    return (_jsx(StyledConfigurableLayout, { children: _jsxs(Flex, { as: StyledCellGrid, container: { wrap: 'wrap', justify: 'stretch', alignItems: 'stretch' }, item: { basis: containerMinWidth, grow: 1 }, ref: ref, children: [_jsx(StyledContainerRuler, { ref: containerRulerRef }), content] }) }));
 });
 export default ConfigurableLayout;
 //# sourceMappingURL=ConfigurableLayout.js.map

package/lib/components/ConfigurableLayout/ConfigurableLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfigurableLayout.js","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/ConfigurableLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, PropsWithoutRef, Ref, useState, useEffect, useRef, useMemo } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Flex, defaultThemeProp } from '@pega/cosmos-react-core';\n\nimport type { ConfigurableLayoutProps } from './ConfigurableLayout.types';\nimport { containerMinWidth, cellGap } from './defaults';\nimport widthConfigOptions from './options';\nimport LayoutCell from './LayoutCell';\n\nconst StyledConfigurableLayout = styled.div(() => {\n  return css`\n    overflow: hidden;\n  `;\n});\n\nconst StyledCellGrid = styled.div(({ theme }) => {\n  return css`\n    /* Note: inset position used to negate \"column\" inline margin on items */\n    position: relative;\n    width: calc(100% + ${cellGap * 2} * ${theme.base.spacing});\n    max-width: calc(100% + ${cellGap * 2} * ${theme.base.spacing});\n    inset-inline: calc(-${cellGap} * ${theme.base.spacing});\n    margin-block-end: calc(-2 * ${cellGap} * ${theme.base.spacing});\n  `;\n});\nStyledCellGrid.defaultProps = defaultThemeProp;\n\nconst StyledContainerRuler = styled.div(({ theme }) => {\n  return css`\n    margin-inline: calc(${cellGap} * ${theme.base.spacing});\n    width: calc(100% - ${cellGap * 2} * ${theme.base.spacing});\n  `;\n});\nStyledContainerRuler.defaultProps = defaultThemeProp;\n\nconst ConfigurableLayout = forwardRef(\n  ({ items, arrangement }: PropsWithoutRef<ConfigurableLayoutProps>, ref: Ref<HTMLElement>) => {\n    const [renderMode, setRenderMode] = useState<'direct' | 'double' | 'full'>('direct');\n    const containerRulerRef = useRef<HTMLDivElement>(null);\n\n    // Update render mode when arrangement wraps\n    useEffect(() => {\n      const activeArrangement = arrangement?.hasWrapped !== undefined && !arrangement.hasWrapped;\n\n      if (activeArrangement) {\n        switch (arrangement.size) {\n          case 'main':\n            setRenderMode('direct');\n            break;\n          case 'half':\n            setRenderMode('double');\n            break;\n          case 'narrow':\n            setRenderMode('full');\n            break;\n          default:\n            setRenderMode('direct');\n            break;\n        }\n\n        return;\n      }\n\n      // Use direct by default\n      setRenderMode('direct');\n    }, [arrangement?.hasWrapped]);\n\n    const content = useMemo(() => {\n      if (items && !!items.length) {\n        return items.map(itemConfig => {\n          const config = {\n            ...itemConfig,\n            layoutConfig: { ...itemConfig.layoutConfig }\n          };\n\n          if (renderMode !== 'direct') {\n            switch (renderMode) {\n              case 'double': {\n                const doubleWidth: { [key: string]: keyof typeof widthConfigOptions } = {\n                  '1/4': '1/2',\n                  '1/3': '2/3',\n                  '1/2': 'full',\n                  '2/3': 'full',\n                  '3/4': 'full',\n                  full: 'full'\n                };\n\n                config.layoutConfig.width = doubleWidth[config.layoutConfig.width];\n\n                break;\n              }\n              case 'full':\n                config.layoutConfig.width = 'full';\n                break;\n              default:\n                config.layoutConfig.width = 'full';\n                break;\n            }\n          }\n\n          return <LayoutCell key={`${itemConfig.id}--${renderMode}`} config={config} />;\n        });\n      }\n\n      return null;\n    }, [items, renderMode]);\n\n    return (\n      <StyledConfigurableLayout>\n        <Flex\n          as={StyledCellGrid}\n          container={{ wrap: 'wrap', justify: 'stretch', alignItems: 'stretch' }}\n          item={{ basis: containerMinWidth, grow: 1 }}\n          ref={ref}\n        >\n          <StyledContainerRuler ref={containerRulerRef} />\n          {content}\n        </Flex>\n      </StyledConfigurableLayout>\n    );\n  }\n);\n\nexport default ConfigurableLayout;\n"]}
+{"version":3,"file":"ConfigurableLayout.js","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/ConfigurableLayout.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAwB,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC/F,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAGjE,OAAO,EAAE,iBAAiB,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAExD,OAAO,UAAU,MAAM,cAAc,CAAC;AAEtC,MAAM,wBAAwB,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE;IAC/C,OAAO,GAAG,CAAA;;GAET,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC9C,OAAO,GAAG,CAAA;;;yBAGa,OAAO,GAAG,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,OAAO;6BAC/B,OAAO,GAAG,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,OAAO;0BACtC,OAAO,MAAM,KAAK,CAAC,IAAI,CAAC,OAAO;kCACvB,OAAO,MAAM,KAAK,CAAC,IAAI,CAAC,OAAO;GAC9D,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACpD,OAAO,GAAG,CAAA;0BACc,OAAO,MAAM,KAAK,CAAC,IAAI,CAAC,OAAO;yBAChC,OAAO,GAAG,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,OAAO;GACzD,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,kBAAkB,GAAG,UAAU,CACnC,CAAC,EAAE,KAAK,EAAE,WAAW,EAA4C,EAAE,GAAqB,EAAE,EAAE;IAC1F,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAA+B,QAAQ,CAAC,CAAC;IACrF,MAAM,iBAAiB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEvD,4CAA4C;IAC5C,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,iBAAiB,GAAG,WAAW,EAAE,UAAU,KAAK,SAAS,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC;QAE3F,IAAI,iBAAiB,EAAE;YACrB,QAAQ,WAAW,CAAC,IAAI,EAAE;gBACxB,KAAK,MAAM;oBACT,aAAa,CAAC,QAAQ,CAAC,CAAC;oBACxB,MAAM;gBACR,KAAK,MAAM;oBACT,aAAa,CAAC,QAAQ,CAAC,CAAC;oBACxB,MAAM;gBACR,KAAK,QAAQ;oBACX,aAAa,CAAC,MAAM,CAAC,CAAC;oBACtB,MAAM;gBACR;oBACE,aAAa,CAAC,QAAQ,CAAC,CAAC;oBACxB,MAAM;aACT;YAED,OAAO;SACR;QAED,wBAAwB;QACxB,aAAa,CAAC,QAAQ,CAAC,CAAC;IAC1B,CAAC,EAAE,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC,CAAC;IAE9B,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;QAC3B,IAAI,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC,MAAM,EAAE;YAC3B,OAAO,KAAK,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;gBAC5B,MAAM,MAAM,GAAG;oBACb,GAAG,UAAU;oBACb,YAAY,EAAE,EAAE,GAAG,UAAU,CAAC,YAAY,EAAE;iBAC7C,CAAC;gBAEF,IAAI,UAAU,KAAK,QAAQ,EAAE;oBAC3B,QAAQ,UAAU,EAAE;wBAClB,KAAK,QAAQ,CAAC,CAAC;4BACb,MAAM,WAAW,GAAuD;gCACtE,KAAK,EAAE,KAAK;gCACZ,KAAK,EAAE,KAAK;gCACZ,KAAK,EAAE,MAAM;gCACb,KAAK,EAAE,MAAM;gCACb,KAAK,EAAE,MAAM;gCACb,IAAI,EAAE,MAAM;6BACb,CAAC;4BAEF,MAAM,CAAC,YAAY,CAAC,KAAK,GAAG,WAAW,CAAC,MAAM,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;4BAEnE,MAAM;yBACP;wBACD,KAAK,MAAM;4BACT,MAAM,CAAC,YAAY,CAAC,KAAK,GAAG,MAAM,CAAC;4BACnC,MAAM;wBACR;4BACE,MAAM,CAAC,YAAY,CAAC,KAAK,GAAG,MAAM,CAAC;4BACnC,MAAM;qBACT;iBACF;gBAED,OAAO,KAAC,UAAU,IAAyC,MAAM,EAAE,MAAM,IAAjD,GAAG,UAAU,CAAC,EAAE,KAAK,UAAU,EAAE,CAAoB,CAAC;YAChF,CAAC,CAAC,CAAC;SACJ;QAED,OAAO,IAAI,CAAC;IACd,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC;IAExB,OAAO,CACL,KAAC,wBAAwB,cACvB,MAAC,IAAI,IACH,EAAE,EAAE,cAAc,EAClB,SAAS,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,EACtE,IAAI,EAAE,EAAE,KAAK,EAAE,iBAAiB,EAAE,IAAI,EAAE,CAAC,EAAE,EAC3C,GAAG,EAAE,GAAG,aAER,KAAC,oBAAoB,IAAC,GAAG,EAAE,iBAAiB,GAAI,EAC/C,OAAO,IACH,GACkB,CAC5B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["import { forwardRef, PropsWithoutRef, Ref, useState, useEffect, useRef, useMemo } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Flex, defaultThemeProp } from '@pega/cosmos-react-core';\n\nimport type { ConfigurableLayoutProps } from './ConfigurableLayout.types';\nimport { containerMinWidth, cellGap } from './defaults';\nimport widthConfigOptions from './options';\nimport LayoutCell from './LayoutCell';\n\nconst StyledConfigurableLayout = styled.div(() => {\n  return css`\n    overflow: hidden;\n  `;\n});\n\nconst StyledCellGrid = styled.div(({ theme }) => {\n  return css`\n    /* Note: inset position used to negate \"column\" inline margin on items */\n    position: relative;\n    width: calc(100% + ${cellGap * 2} * ${theme.base.spacing});\n    max-width: calc(100% + ${cellGap * 2} * ${theme.base.spacing});\n    inset-inline: calc(-${cellGap} * ${theme.base.spacing});\n    margin-block-end: calc(-2 * ${cellGap} * ${theme.base.spacing});\n  `;\n});\nStyledCellGrid.defaultProps = defaultThemeProp;\n\nconst StyledContainerRuler = styled.div(({ theme }) => {\n  return css`\n    margin-inline: calc(${cellGap} * ${theme.base.spacing});\n    width: calc(100% - ${cellGap * 2} * ${theme.base.spacing});\n  `;\n});\nStyledContainerRuler.defaultProps = defaultThemeProp;\n\nconst ConfigurableLayout = forwardRef(\n  ({ items, arrangement }: PropsWithoutRef<ConfigurableLayoutProps>, ref: Ref<HTMLElement>) => {\n    const [renderMode, setRenderMode] = useState<'direct' | 'double' | 'full'>('direct');\n    const containerRulerRef = useRef<HTMLDivElement>(null);\n\n    // Update render mode when arrangement wraps\n    useEffect(() => {\n      const activeArrangement = arrangement?.hasWrapped !== undefined && !arrangement.hasWrapped;\n\n      if (activeArrangement) {\n        switch (arrangement.size) {\n          case 'main':\n            setRenderMode('direct');\n            break;\n          case 'half':\n            setRenderMode('double');\n            break;\n          case 'narrow':\n            setRenderMode('full');\n            break;\n          default:\n            setRenderMode('direct');\n            break;\n        }\n\n        return;\n      }\n\n      // Use direct by default\n      setRenderMode('direct');\n    }, [arrangement?.hasWrapped]);\n\n    const content = useMemo(() => {\n      if (items && !!items.length) {\n        return items.map(itemConfig => {\n          const config = {\n            ...itemConfig,\n            layoutConfig: { ...itemConfig.layoutConfig }\n          };\n\n          if (renderMode !== 'direct') {\n            switch (renderMode) {\n              case 'double': {\n                const doubleWidth: { [key: string]: keyof typeof widthConfigOptions } = {\n                  '1/4': '1/2',\n                  '1/3': '2/3',\n                  '1/2': 'full',\n                  '2/3': 'full',\n                  '3/4': 'full',\n                  full: 'full'\n                };\n\n                config.layoutConfig.width = doubleWidth[config.layoutConfig.width];\n\n                break;\n              }\n              case 'full':\n                config.layoutConfig.width = 'full';\n                break;\n              default:\n                config.layoutConfig.width = 'full';\n                break;\n            }\n          }\n\n          return <LayoutCell key={`${itemConfig.id}--${renderMode}`} config={config} />;\n        });\n      }\n\n      return null;\n    }, [items, renderMode]);\n\n    return (\n      <StyledConfigurableLayout>\n        <Flex\n          as={StyledCellGrid}\n          container={{ wrap: 'wrap', justify: 'stretch', alignItems: 'stretch' }}\n          item={{ basis: containerMinWidth, grow: 1 }}\n          ref={ref}\n        >\n          <StyledContainerRuler ref={containerRulerRef} />\n          {content}\n        </Flex>\n      </StyledConfigurableLayout>\n    );\n  }\n);\n\nexport default ConfigurableLayout;\n"]}

package/lib/components/ConfigurableLayout/LayoutCell.js

@@ -58,7 +58,7 @@ const LayoutCell = ({ config }) => {
     }, [layoutConfig.minWidth]);
     return config?.content ? (_jsx(Flex, { as: StyledCell, item: {
             grow: 1
-        }, container: { justify: 'stretch', alignItems: 'start' }, fillAvailable: layoutConfig.fillAvailable, percentageWidth: percentageWidth, minWidth: minWidth, children: config.content }, void 0)) : null;
+        }, container: { justify: 'stretch', alignItems: 'start' }, fillAvailable: layoutConfig.fillAvailable, percentageWidth: percentageWidth, minWidth: minWidth, children: config.content })) : null;
 };
 export default LayoutCell;
 //# sourceMappingURL=LayoutCell.js.map

package/lib/components/ConfigurableLayout/LayoutCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutCell.js","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/LayoutCell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAgB,MAAM,mBAAmB,CAAC;AAE9D,OAAO,EAAE,IAAI,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAG3E,OAAO,kBAAkB,MAAM,WAAW,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAEnD,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAC3B,CAAC,EACC,aAAa,GAAG,IAAI,EACpB,eAAe,EACf,QAAQ,EACR,KAAK,EAMN,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;0BAEY,OAAO,MAAM,KAAK,CAAC,IAAI,CAAC,OAAO;;gCAEzB,eAAe;;;;;;wCAMP,QAAQ,IAAI,YAAY;;;;;QAKxD,CAAC,aAAa;QAChB,GAAG,CAAA;;OAEF;;QAEC,qBAAqB;;;;;;;;;KASxB,CAAC;AACJ,CAAC,CACF,CAAC;AACF,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,eAAe,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;AAElD,MAAM,UAAU,GAAG,CAAC,EAAE,MAAM,EAAsB,EAAE,EAAE;IACpD,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,YAAY,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAClE,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,OAAO,kBAAkB,CAAC,YAAY,CAAC,KAAwC,CAAC,IAAI,MAAM,CAAC;IAC7F,CAAC,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;IACzB,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC5B,MAAM,KAAK,GAAG,YAAY,CAAC,QAAQ,CAAC;QAEpC,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;YAC7B,OAAO,GAAG,KAAK,IAAI,CAAC;SACrB;QAED,IACE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;YACpB,KAAK,CAAC,MAAM,IAAI,CAAC;YACjB,OAAO,KAAK,CAAC,CAAC,CAAC,KAAK,QAAQ;YAC5B,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAClC;YACA,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;SACjC;IACH,CAAC,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC;IAE5B,OAAO,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CACvB,KAAC,IAAI,IACH,EAAE,EAAE,UAAU,EACd,IAAI,EAAE;YACJ,IAAI,EAAE,CAAC;SACR,EACD,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,EACtD,aAAa,EAAE,YAAY,CAAC,aAAa,EACzC,eAAe,EAAE,eAAe,EAChC,QAAQ,EAAE,QAAQ,YAEjB,MAAM,CAAC,OAAO,WACV,CACR,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { useMemo } from 'react';\nimport styled, { css, DefaultTheme } from 'styled-components';\n\nimport { Flex, defaultThemeProp } from '@pega/cosmos-react-core';\n\nimport { StyledAppAnnouncement } from '../AppAnnouncement/AppAnnouncement';\n\nimport type { Config } from './ConfigurableLayout.types';\nimport widthConfigOptions from './options';\nimport { itemMinWidth, cellGap } from './defaults';\n\nconst StyledCell = styled.div(\n  ({\n    fillAvailable = true,\n    percentageWidth,\n    minWidth,\n    theme\n  }: {\n    fillAvailable: boolean;\n    percentageWidth?: string;\n    minWidth?: string | undefined;\n    theme: DefaultTheme;\n  }) => {\n    return css`\n      /* variables */\n      --marginGap: calc(${cellGap} * ${theme.base.spacing});\n      --totalMargin: calc(2 * var(--marginGap));\n      --percentageBasis: calc(${percentageWidth} - var(--totalMargin));\n      --maxWidth: calc(100% - var(--totalMargin));\n\n      /* styles */\n      flex-wrap: wrap;\n      flex-basis: var(--percentageBasis);\n      min-width: min(var(--maxWidth), ${minWidth || itemMinWidth});\n      max-width: var(--maxWidth);\n      margin-block-end: var(--totalMargin);\n      margin-inline: var(--marginGap);\n\n      ${!fillAvailable &&\n      css`\n        flex-grow: 0;\n      `}\n\n      ${StyledAppAnnouncement} {\n        align-self: stretch;\n      }\n\n      > * {\n        width: 100%;\n        height: auto;\n        overflow-x: auto;\n      }\n    `;\n  }\n);\nStyledCell.defaultProps = defaultThemeProp;\n\nconst validWidthUnits = ['px', 'ch', 'rem', 'em'];\n\nconst LayoutCell = ({ config }: { config: Config }) => {\n  const layoutConfig = useMemo(() => config.layoutConfig, [config]);\n  const percentageWidth = useMemo(() => {\n    return widthConfigOptions[layoutConfig.width as keyof typeof widthConfigOptions] || '100%';\n  }, [layoutConfig.width]);\n  const minWidth = useMemo(() => {\n    const value = layoutConfig.minWidth;\n\n    if (typeof value === 'number') {\n      return `${value}px`;\n    }\n\n    if (\n      Array.isArray(value) &&\n      value.length >= 2 &&\n      typeof value[0] === 'number' &&\n      validWidthUnits.includes(value[1])\n    ) {\n      return `${value[0]}${value[1]}`;\n    }\n  }, [layoutConfig.minWidth]);\n\n  return config?.content ? (\n    <Flex\n      as={StyledCell}\n      item={{\n        grow: 1\n      }}\n      container={{ justify: 'stretch', alignItems: 'start' }}\n      fillAvailable={layoutConfig.fillAvailable}\n      percentageWidth={percentageWidth}\n      minWidth={minWidth}\n    >\n      {config.content}\n    </Flex>\n  ) : null;\n};\n\nexport default LayoutCell;\n"]}
+{"version":3,"file":"LayoutCell.js","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/LayoutCell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAgB,MAAM,mBAAmB,CAAC;AAE9D,OAAO,EAAE,IAAI,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAG3E,OAAO,kBAAkB,MAAM,WAAW,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAEnD,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAC3B,CAAC,EACC,aAAa,GAAG,IAAI,EACpB,eAAe,EACf,QAAQ,EACR,KAAK,EAMN,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;0BAEY,OAAO,MAAM,KAAK,CAAC,IAAI,CAAC,OAAO;;gCAEzB,eAAe;;;;;;wCAMP,QAAQ,IAAI,YAAY;;;;;QAKxD,CAAC,aAAa;QAChB,GAAG,CAAA;;OAEF;;QAEC,qBAAqB;;;;;;;;;KASxB,CAAC;AACJ,CAAC,CACF,CAAC;AACF,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,eAAe,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;AAElD,MAAM,UAAU,GAAG,CAAC,EAAE,MAAM,EAAsB,EAAE,EAAE;IACpD,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,YAAY,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAClE,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,OAAO,kBAAkB,CAAC,YAAY,CAAC,KAAwC,CAAC,IAAI,MAAM,CAAC;IAC7F,CAAC,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;IACzB,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC5B,MAAM,KAAK,GAAG,YAAY,CAAC,QAAQ,CAAC;QAEpC,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;YAC7B,OAAO,GAAG,KAAK,IAAI,CAAC;SACrB;QAED,IACE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;YACpB,KAAK,CAAC,MAAM,IAAI,CAAC;YACjB,OAAO,KAAK,CAAC,CAAC,CAAC,KAAK,QAAQ;YAC5B,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAClC;YACA,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;SACjC;IACH,CAAC,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC;IAE5B,OAAO,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CACvB,KAAC,IAAI,IACH,EAAE,EAAE,UAAU,EACd,IAAI,EAAE;YACJ,IAAI,EAAE,CAAC;SACR,EACD,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,EACtD,aAAa,EAAE,YAAY,CAAC,aAAa,EACzC,eAAe,EAAE,eAAe,EAChC,QAAQ,EAAE,QAAQ,YAEjB,MAAM,CAAC,OAAO,GACV,CACR,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { useMemo } from 'react';\nimport styled, { css, DefaultTheme } from 'styled-components';\n\nimport { Flex, defaultThemeProp } from '@pega/cosmos-react-core';\n\nimport { StyledAppAnnouncement } from '../AppAnnouncement/AppAnnouncement';\n\nimport type { Config } from './ConfigurableLayout.types';\nimport widthConfigOptions from './options';\nimport { itemMinWidth, cellGap } from './defaults';\n\nconst StyledCell = styled.div(\n  ({\n    fillAvailable = true,\n    percentageWidth,\n    minWidth,\n    theme\n  }: {\n    fillAvailable: boolean;\n    percentageWidth?: string;\n    minWidth?: string | undefined;\n    theme: DefaultTheme;\n  }) => {\n    return css`\n      /* variables */\n      --marginGap: calc(${cellGap} * ${theme.base.spacing});\n      --totalMargin: calc(2 * var(--marginGap));\n      --percentageBasis: calc(${percentageWidth} - var(--totalMargin));\n      --maxWidth: calc(100% - var(--totalMargin));\n\n      /* styles */\n      flex-wrap: wrap;\n      flex-basis: var(--percentageBasis);\n      min-width: min(var(--maxWidth), ${minWidth || itemMinWidth});\n      max-width: var(--maxWidth);\n      margin-block-end: var(--totalMargin);\n      margin-inline: var(--marginGap);\n\n      ${!fillAvailable &&\n      css`\n        flex-grow: 0;\n      `}\n\n      ${StyledAppAnnouncement} {\n        align-self: stretch;\n      }\n\n      > * {\n        width: 100%;\n        height: auto;\n        overflow-x: auto;\n      }\n    `;\n  }\n);\nStyledCell.defaultProps = defaultThemeProp;\n\nconst validWidthUnits = ['px', 'ch', 'rem', 'em'];\n\nconst LayoutCell = ({ config }: { config: Config }) => {\n  const layoutConfig = useMemo(() => config.layoutConfig, [config]);\n  const percentageWidth = useMemo(() => {\n    return widthConfigOptions[layoutConfig.width as keyof typeof widthConfigOptions] || '100%';\n  }, [layoutConfig.width]);\n  const minWidth = useMemo(() => {\n    const value = layoutConfig.minWidth;\n\n    if (typeof value === 'number') {\n      return `${value}px`;\n    }\n\n    if (\n      Array.isArray(value) &&\n      value.length >= 2 &&\n      typeof value[0] === 'number' &&\n      validWidthUnits.includes(value[1])\n    ) {\n      return `${value[0]}${value[1]}`;\n    }\n  }, [layoutConfig.minWidth]);\n\n  return config?.content ? (\n    <Flex\n      as={StyledCell}\n      item={{\n        grow: 1\n      }}\n      container={{ justify: 'stretch', alignItems: 'start' }}\n      fillAvailable={layoutConfig.fillAvailable}\n      percentageWidth={percentageWidth}\n      minWidth={minWidth}\n    >\n      {config.content}\n    </Flex>\n  ) : null;\n};\n\nexport default LayoutCell;\n"]}

package/lib/components/Confirmation/Confirmation.js

@@ -8,7 +8,7 @@ const StyledWhatsNextList = styled(UnorderedList) `
 StyledWhatsNextList.defaultProps = defaultThemeProp;
 const Confirmation = forwardRef(({ title, details, whatsNext, tasks, onClose, ...restProps }, ref) => {
     const t = useI18n();
-    return (_jsx(Card, { ...restProps, ref: ref, children: _jsx(CardContent, { children: _jsxs(Flex, { container: { gap: 3, direction: 'column' }, children: [_jsx(Text, { variant: 'h2', children: title }, void 0), _jsxs(Flex, { container: { gap: 1, direction: 'column' }, children: [_jsx(Text, { variant: 'h3', children: t('confirmation_details') }, void 0), details] }, void 0), whatsNext && (_jsxs(Flex, { container: { gap: 1, direction: 'column' }, children: [_jsx(Text, { variant: 'h3', children: t('confirmation_whats_next') }, void 0), _jsx(StyledWhatsNextList, { items: whatsNext, as: StyledWhatsNextList }, void 0)] }, void 0)), tasks && (_jsxs(Flex, { container: { gap: 1, direction: 'column' }, children: [_jsx(Text, { variant: 'h3', children: t('confirmation_open_tasks') }, void 0), tasks] }, void 0)), onClose && (_jsx(Flex, { container: { justify: 'end' }, children: _jsx(Button, { onClick: onClose, variant: 'primary', children: t('done') }, void 0) }, void 0))] }, void 0) }, void 0) }, void 0));
+    return (_jsx(Card, { ...restProps, ref: ref, children: _jsx(CardContent, { children: _jsxs(Flex, { container: { gap: 3, direction: 'column' }, children: [_jsx(Text, { variant: 'h2', children: title }), _jsxs(Flex, { container: { gap: 1, direction: 'column' }, children: [_jsx(Text, { variant: 'h3', children: t('confirmation_details') }), details] }), whatsNext && (_jsxs(Flex, { container: { gap: 1, direction: 'column' }, children: [_jsx(Text, { variant: 'h3', children: t('confirmation_whats_next') }), _jsx(StyledWhatsNextList, { items: whatsNext, as: StyledWhatsNextList })] })), tasks && (_jsxs(Flex, { container: { gap: 1, direction: 'column' }, children: [_jsx(Text, { variant: 'h3', children: t('confirmation_open_tasks') }), tasks] })), onClose && (_jsx(Flex, { container: { justify: 'end' }, children: _jsx(Button, { onClick: onClose, variant: 'primary', children: t('done') }) }))] }) }) }));
 });
 export default Confirmation;
 //# sourceMappingURL=Confirmation.js.map

package/lib/components/Confirmation/Confirmation.js.map

@@ -1 +1 @@
-{"version":3,"file":"Confirmation.js","sourceRoot":"","sources":["../../../src/components/Confirmation/Confirmation.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsD,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,IAAI,EACJ,WAAW,EAEX,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,aAAa,EACb,MAAM,EACN,gBAAgB,EAGjB,MAAM,yBAAyB,CAAC;AAEjC,MAAM,mBAAmB,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA;;CAEhD,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAiBpD,MAAM,YAAY,GAAwD,UAAU,CAClF,CACE,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,SAAS,EAAsC,EAC/F,GAAG,EACH,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,KAAC,IAAI,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,YAC3B,KAAC,WAAW,cACV,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAC9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,KAAK,WAAQ,EACjC,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAC9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,sBAAsB,CAAC,WAAQ,EACpD,OAAO,YACH,EACN,SAAS,IAAI,CACZ,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAC9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,yBAAyB,CAAC,WAAQ,EACxD,KAAC,mBAAmB,IAAC,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,mBAAmB,WAAI,YAC7D,CACR,EACA,KAAK,IAAI,CACR,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAC9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,yBAAyB,CAAC,WAAQ,EACvD,KAAK,YACD,CACR,EACA,OAAO,IAAI,CACV,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,YACjC,KAAC,MAAM,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAC,SAAS,YACxC,CAAC,CAAC,MAAM,CAAC,WACH,WACJ,CACR,YACI,WACK,WACT,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, ReactNode, Ref } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  Card,\n  CardContent,\n  ForwardProps,\n  Flex,\n  Text,\n  useI18n,\n  UnorderedList,\n  Button,\n  defaultThemeProp,\n  UnorderedListProps,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\n\nconst StyledWhatsNextList = styled(UnorderedList)`\n  padding-inline-start: 0;\n`;\n\nStyledWhatsNextList.defaultProps = defaultThemeProp;\n\nexport interface ConfirmationProps extends NoChildrenProp {\n  /** The title of the confirmation */\n  title: string;\n  /** Region for a Field Value List component */\n  details: ReactNode;\n  /** Array of React nodes to be put into a list  */\n  whatsNext?: UnorderedListProps['items'];\n  /** Region for a Tasks component */\n  tasks?: ReactNode;\n  /** Called when the done/close button is clicked */\n  onClose?: () => void;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLElement>;\n}\n\nconst Confirmation: FunctionComponent<ConfirmationProps & ForwardProps> = forwardRef(\n  (\n    { title, details, whatsNext, tasks, onClose, ...restProps }: PropsWithoutRef<ConfirmationProps>,\n    ref\n  ) => {\n    const t = useI18n();\n\n    return (\n      <Card {...restProps} ref={ref}>\n        <CardContent>\n          <Flex container={{ gap: 3, direction: 'column' }}>\n            <Text variant='h2'>{title}</Text>\n            <Flex container={{ gap: 1, direction: 'column' }}>\n              <Text variant='h3'>{t('confirmation_details')}</Text>\n              {details}\n            </Flex>\n            {whatsNext && (\n              <Flex container={{ gap: 1, direction: 'column' }}>\n                <Text variant='h3'>{t('confirmation_whats_next')}</Text>\n                <StyledWhatsNextList items={whatsNext} as={StyledWhatsNextList} />\n              </Flex>\n            )}\n            {tasks && (\n              <Flex container={{ gap: 1, direction: 'column' }}>\n                <Text variant='h3'>{t('confirmation_open_tasks')}</Text>\n                {tasks}\n              </Flex>\n            )}\n            {onClose && (\n              <Flex container={{ justify: 'end' }}>\n                <Button onClick={onClose} variant='primary'>\n                  {t('done')}\n                </Button>\n              </Flex>\n            )}\n          </Flex>\n        </CardContent>\n      </Card>\n    );\n  }\n);\n\nexport default Confirmation;\n"]}
+{"version":3,"file":"Confirmation.js","sourceRoot":"","sources":["../../../src/components/Confirmation/Confirmation.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsD,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,IAAI,EACJ,WAAW,EAEX,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,aAAa,EACb,MAAM,EACN,gBAAgB,EAGjB,MAAM,yBAAyB,CAAC;AAEjC,MAAM,mBAAmB,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA;;CAEhD,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAiBpD,MAAM,YAAY,GAAwD,UAAU,CAClF,CACE,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,SAAS,EAAsC,EAC/F,GAAG,EACH,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,KAAC,IAAI,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,YAC3B,KAAC,WAAW,cACV,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAC9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,KAAK,GAAQ,EACjC,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAC9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,sBAAsB,CAAC,GAAQ,EACpD,OAAO,IACH,EACN,SAAS,IAAI,CACZ,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAC9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,yBAAyB,CAAC,GAAQ,EACxD,KAAC,mBAAmB,IAAC,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,mBAAmB,GAAI,IAC7D,CACR,EACA,KAAK,IAAI,CACR,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAC9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,yBAAyB,CAAC,GAAQ,EACvD,KAAK,IACD,CACR,EACA,OAAO,IAAI,CACV,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,YACjC,KAAC,MAAM,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAC,SAAS,YACxC,CAAC,CAAC,MAAM,CAAC,GACH,GACJ,CACR,IACI,GACK,GACT,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, ReactNode, Ref } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  Card,\n  CardContent,\n  ForwardProps,\n  Flex,\n  Text,\n  useI18n,\n  UnorderedList,\n  Button,\n  defaultThemeProp,\n  UnorderedListProps,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\n\nconst StyledWhatsNextList = styled(UnorderedList)`\n  padding-inline-start: 0;\n`;\n\nStyledWhatsNextList.defaultProps = defaultThemeProp;\n\nexport interface ConfirmationProps extends NoChildrenProp {\n  /** The title of the confirmation */\n  title: string;\n  /** Region for a Field Value List component */\n  details: ReactNode;\n  /** Array of React nodes to be put into a list  */\n  whatsNext?: UnorderedListProps['items'];\n  /** Region for a Tasks component */\n  tasks?: ReactNode;\n  /** Called when the done/close button is clicked */\n  onClose?: () => void;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLElement>;\n}\n\nconst Confirmation: FunctionComponent<ConfirmationProps & ForwardProps> = forwardRef(\n  (\n    { title, details, whatsNext, tasks, onClose, ...restProps }: PropsWithoutRef<ConfirmationProps>,\n    ref\n  ) => {\n    const t = useI18n();\n\n    return (\n      <Card {...restProps} ref={ref}>\n        <CardContent>\n          <Flex container={{ gap: 3, direction: 'column' }}>\n            <Text variant='h2'>{title}</Text>\n            <Flex container={{ gap: 1, direction: 'column' }}>\n              <Text variant='h3'>{t('confirmation_details')}</Text>\n              {details}\n            </Flex>\n            {whatsNext && (\n              <Flex container={{ gap: 1, direction: 'column' }}>\n                <Text variant='h3'>{t('confirmation_whats_next')}</Text>\n                <StyledWhatsNextList items={whatsNext} as={StyledWhatsNextList} />\n              </Flex>\n            )}\n            {tasks && (\n              <Flex container={{ gap: 1, direction: 'column' }}>\n                <Text variant='h3'>{t('confirmation_open_tasks')}</Text>\n                {tasks}\n              </Flex>\n            )}\n            {onClose && (\n              <Flex container={{ justify: 'end' }}>\n                <Button onClick={onClose} variant='primary'>\n                  {t('done')}\n                </Button>\n              </Flex>\n            )}\n          </Flex>\n        </CardContent>\n      </Card>\n    );\n  }\n);\n\nexport default Confirmation;\n"]}

package/lib/components/Details/Details.js

@@ -24,7 +24,7 @@ export const StyledHighlightedFields = styled.div(({ theme }) => {
 });
 StyledHighlightedFields.defaultProps = defaultThemeProp;
 const Details = ({ highlightedFields, regions }) => {
-    return (_jsxs(StyledDetails, { children: [highlightedFields && (_jsx(StyledHighlightedFields, { children: _jsx(FieldValueList, { variant: 'stacked', fields: highlightedFields }, void 0) }, void 0)), regions && regions.length > 0 && (_jsx(Grid, { container: {
+    return (_jsxs(StyledDetails, { children: [highlightedFields && (_jsx(StyledHighlightedFields, { children: _jsx(FieldValueList, { variant: 'stacked', fields: highlightedFields }) })), regions && regions.length > 0 && (_jsx(Grid, { container: {
                     cols: 'repeat(auto-fit, minmax(30ch, 1fr))',
                     alignItems: 'start',
                     alignContent: 'start',
@@ -32,7 +32,7 @@ const Details = ({ highlightedFields, regions }) => {
                 }, children: regions?.map((colItem, i) => {
                     // eslint-disable-next-line react/no-array-index-key
                     return _jsx("div", { children: colItem }, i);
-                }) }, void 0))] }, void 0));
+                }) }))] }));
 };
 export default Details;
 //# sourceMappingURL=Details.js.map

package/lib/components/Details/Details.js.map

@@ -1 +1 @@
-{"version":3,"file":"Details.js","sourceRoot":"","sources":["../../../src/components/Details/Details.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,gBAAgB,EAChB,cAAc,EACd,oBAAoB,EAIpB,iBAAiB,EAGlB,MAAM,yBAAyB,CAAC;AASjC,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAE1C,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC9D,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IACtF,OAAO,GAAG,CAAA;MACN,oBAAoB;;;sCAGY,KAAK,CAAC,IAAI,CAAC,OAAO;uCACjB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;6BAC3C,KAAK,CAAC,IAAI,CAAC,OAAO;;qBAE1B,QAAQ,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;uBACzD,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;;;;;wCAKtB,KAAK,CAAC,IAAI,CAAC,OAAO;;GAEvD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,OAAO,GAAmD,CAAC,EAC/D,iBAAiB,EACjB,OAAO,EACM,EAAE,EAAE;IACjB,OAAO,CACL,MAAC,aAAa,eACX,iBAAiB,IAAI,CACpB,KAAC,uBAAuB,cACtB,KAAC,cAAc,IAAC,OAAO,EAAC,SAAS,EAAC,MAAM,EAAE,iBAAiB,WAAI,WACvC,CAC3B,EACA,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,CAChC,KAAC,IAAI,IACH,SAAS,EAAE;oBACT,IAAI,EAAE,qCAAqC;oBAC3C,UAAU,EAAE,OAAO;oBACnB,YAAY,EAAE,OAAO;oBACrB,GAAG,EAAE,CAAC;iBACP,YAEA,OAAO,EAAE,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE;oBAC3B,oDAAoD;oBACpD,OAAO,wBAAc,OAAO,IAAX,CAAC,CAAiB,CAAC;gBACtC,CAAC,CAAC,WACG,CACR,YACa,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import { FunctionComponent, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Grid,\n  defaultThemeProp,\n  FieldValueList,\n  StyledFieldValueList,\n  FieldValueListProps,\n  ForwardProps,\n  BaseProps,\n  calculateFontSize,\n  FontSize,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\n\nexport interface DetailsProps extends BaseProps, NoChildrenProp {\n  /** The set of field values to render in the Highlighted Data list. */\n  highlightedFields?: FieldValueListProps['fields'];\n  /** List of React components below the highlighted data and line seperation. */\n  regions?: [ReactNode] | [ReactNode, ReactNode] | [ReactNode, ReactNode, ReactNode];\n}\n\nexport const StyledDetails = styled.div``;\n\nexport const StyledHighlightedFields = styled.div(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n  return css`\n    ${StyledFieldValueList} {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(20ch, 1fr));\n      padding-block-end: calc(1.5 * ${theme.base.spacing});\n      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n      column-gap: calc(5 * ${theme.base.spacing});\n      dd {\n        font-size: ${fontSize[theme.components.text.h1['font-size'] as FontSize]};\n        font-weight: ${theme.components.text.h1['font-weight']};\n      }\n    }\n\n    & + div {\n      padding-block-start: calc(1.5 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledHighlightedFields.defaultProps = defaultThemeProp;\n\nconst Details: FunctionComponent<DetailsProps & ForwardProps> = ({\n  highlightedFields,\n  regions\n}: DetailsProps) => {\n  return (\n    <StyledDetails>\n      {highlightedFields && (\n        <StyledHighlightedFields>\n          <FieldValueList variant='stacked' fields={highlightedFields} />\n        </StyledHighlightedFields>\n      )}\n      {regions && regions.length > 0 && (\n        <Grid\n          container={{\n            cols: 'repeat(auto-fit, minmax(30ch, 1fr))',\n            alignItems: 'start',\n            alignContent: 'start',\n            gap: 2\n          }}\n        >\n          {regions?.map((colItem, i) => {\n            // eslint-disable-next-line react/no-array-index-key\n            return <div key={i}>{colItem}</div>;\n          })}\n        </Grid>\n      )}\n    </StyledDetails>\n  );\n};\n\nexport default Details;\n"]}
+{"version":3,"file":"Details.js","sourceRoot":"","sources":["../../../src/components/Details/Details.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,gBAAgB,EAChB,cAAc,EACd,oBAAoB,EAIpB,iBAAiB,EAGlB,MAAM,yBAAyB,CAAC;AASjC,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAE1C,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC9D,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IACtF,OAAO,GAAG,CAAA;MACN,oBAAoB;;;sCAGY,KAAK,CAAC,IAAI,CAAC,OAAO;uCACjB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;6BAC3C,KAAK,CAAC,IAAI,CAAC,OAAO;;qBAE1B,QAAQ,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;uBACzD,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;;;;;wCAKtB,KAAK,CAAC,IAAI,CAAC,OAAO;;GAEvD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,OAAO,GAAmD,CAAC,EAC/D,iBAAiB,EACjB,OAAO,EACM,EAAE,EAAE;IACjB,OAAO,CACL,MAAC,aAAa,eACX,iBAAiB,IAAI,CACpB,KAAC,uBAAuB,cACtB,KAAC,cAAc,IAAC,OAAO,EAAC,SAAS,EAAC,MAAM,EAAE,iBAAiB,GAAI,GACvC,CAC3B,EACA,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,CAChC,KAAC,IAAI,IACH,SAAS,EAAE;oBACT,IAAI,EAAE,qCAAqC;oBAC3C,UAAU,EAAE,OAAO;oBACnB,YAAY,EAAE,OAAO;oBACrB,GAAG,EAAE,CAAC;iBACP,YAEA,OAAO,EAAE,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE;oBAC3B,oDAAoD;oBACpD,OAAO,wBAAc,OAAO,IAAX,CAAC,CAAiB,CAAC;gBACtC,CAAC,CAAC,GACG,CACR,IACa,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import { FunctionComponent, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Grid,\n  defaultThemeProp,\n  FieldValueList,\n  StyledFieldValueList,\n  FieldValueListProps,\n  ForwardProps,\n  BaseProps,\n  calculateFontSize,\n  FontSize,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\n\nexport interface DetailsProps extends BaseProps, NoChildrenProp {\n  /** The set of field values to render in the Highlighted Data list. */\n  highlightedFields?: FieldValueListProps['fields'];\n  /** List of React components below the highlighted data and line seperation. */\n  regions?: [ReactNode] | [ReactNode, ReactNode] | [ReactNode, ReactNode, ReactNode];\n}\n\nexport const StyledDetails = styled.div``;\n\nexport const StyledHighlightedFields = styled.div(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n  return css`\n    ${StyledFieldValueList} {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(20ch, 1fr));\n      padding-block-end: calc(1.5 * ${theme.base.spacing});\n      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n      column-gap: calc(5 * ${theme.base.spacing});\n      dd {\n        font-size: ${fontSize[theme.components.text.h1['font-size'] as FontSize]};\n        font-weight: ${theme.components.text.h1['font-weight']};\n      }\n    }\n\n    & + div {\n      padding-block-start: calc(1.5 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledHighlightedFields.defaultProps = defaultThemeProp;\n\nconst Details: FunctionComponent<DetailsProps & ForwardProps> = ({\n  highlightedFields,\n  regions\n}: DetailsProps) => {\n  return (\n    <StyledDetails>\n      {highlightedFields && (\n        <StyledHighlightedFields>\n          <FieldValueList variant='stacked' fields={highlightedFields} />\n        </StyledHighlightedFields>\n      )}\n      {regions && regions.length > 0 && (\n        <Grid\n          container={{\n            cols: 'repeat(auto-fit, minmax(30ch, 1fr))',\n            alignItems: 'start',\n            alignContent: 'start',\n            gap: 2\n          }}\n        >\n          {regions?.map((colItem, i) => {\n            // eslint-disable-next-line react/no-array-index-key\n            return <div key={i}>{colItem}</div>;\n          })}\n        </Grid>\n      )}\n    </StyledDetails>\n  );\n};\n\nexport default Details;\n"]}

package/lib/components/Glimpse/Glimpse.js

@@ -16,7 +16,7 @@ export const StyledGlimpse = styled(Card)(({ theme }) => {
 });
 StyledGlimpse.defaultProps = defaultThemeProp;
 const Glimpse = forwardRef(({ primary, visual, secondary = [], fields = [] }, ref) => {
-    return (_jsxs(StyledGlimpse, { ref: ref, children: [_jsx(CardHeader, { children: _jsx(SummaryItem, { primary: primary, secondary: _jsx(MetaList, { items: secondary }, void 0), visual: visual }, void 0) }, void 0), !!fields.length && (_jsx(CardContent, { children: _jsx(FieldValueList, { fields: fields }, void 0) }, void 0))] }, void 0));
+    return (_jsxs(StyledGlimpse, { ref: ref, children: [_jsx(CardHeader, { children: _jsx(SummaryItem, { primary: primary, secondary: _jsx(MetaList, { items: secondary }), visual: visual }) }), !!fields.length && (_jsx(CardContent, { children: _jsx(FieldValueList, { fields: fields }) }))] }));
 });
 export default Glimpse;
 //# sourceMappingURL=Glimpse.js.map

package/lib/components/Glimpse/Glimpse.js.map

@@ -1 +1 @@
-{"version":3,"file":"Glimpse.js","sourceRoot":"","sources":["../../../src/components/Glimpse/Glimpse.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAEL,IAAI,EACJ,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,cAAc,EAId,QAAQ,EAER,oBAAoB,EACpB,WAAW,EACZ,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,yDAAyD,CAAC;AAiB5F,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACtD,OAAO,GAAG,CAAA;MACN,iBAAiB;oCACa,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;;MAG/D,oBAAoB;gCACM,KAAK,CAAC,IAAI,CAAC,OAAO;;GAE/C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,OAAO,GAAmD,UAAU,CACxE,CACE,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,MAAM,GAAG,EAAE,EAAiC,EAC/E,GAAwB,EACxB,EAAE;IACF,OAAO,CACL,MAAC,aAAa,IAAC,GAAG,EAAE,GAAG,aACrB,KAAC,UAAU,cACT,KAAC,WAAW,IACV,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,KAAC,QAAQ,IAAC,KAAK,EAAE,SAAS,WAAI,EACzC,MAAM,EAAE,MAAM,WACd,WACS,EACZ,CAAC,CAAC,MAAM,CAAC,MAAM,IAAI,CAClB,KAAC,WAAW,cACV,KAAC,cAAc,IAAC,MAAM,EAAE,MAAM,WAAI,WACtB,CACf,YACa,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  BaseProps,\n  Card,\n  CardContent,\n  CardHeader,\n  defaultThemeProp,\n  FieldValueList,\n  FieldValueListProps,\n  ForwardProps,\n  MenuItemProps,\n  MetaList,\n  NoChildrenProp,\n  StyledFieldValueList,\n  SummaryItem\n} from '@pega/cosmos-react-core';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\n\nexport interface GlimpseProps extends BaseProps, NoChildrenProp {\n  /** The unique id for the operator. */\n  id: string;\n  /** The primary piece of item information as a string. */\n  primary: MenuItemProps['primary'];\n  /** Secondary info about an item. Useful for additional metadata or context. */\n  secondary?: MenuItemProps['secondary'];\n  /** A visual to assist identifying an item. e.g. Avatar or Icon. */\n  visual?: MenuItemProps['visual'];\n  /** The set of field values to render in the list. */\n  fields?: FieldValueListProps['fields'];\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledGlimpse = styled(Card)(({ theme }) => {\n  return css`\n    ${StyledCardContent} {\n      border-top: solid 0.0625rem ${theme.base.palette['border-line']};\n    }\n\n    ${StyledFieldValueList} {\n      padding-top: calc(1.5 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledGlimpse.defaultProps = defaultThemeProp;\n\nconst Glimpse: FunctionComponent<GlimpseProps & ForwardProps> = forwardRef(\n  (\n    { primary, visual, secondary = [], fields = [] }: PropsWithoutRef<GlimpseProps>,\n    ref: GlimpseProps['ref']\n  ) => {\n    return (\n      <StyledGlimpse ref={ref}>\n        <CardHeader>\n          <SummaryItem\n            primary={primary}\n            secondary={<MetaList items={secondary} />}\n            visual={visual}\n          />\n        </CardHeader>\n        {!!fields.length && (\n          <CardContent>\n            <FieldValueList fields={fields} />\n          </CardContent>\n        )}\n      </StyledGlimpse>\n    );\n  }\n);\n\nexport default Glimpse;\n"]}
+{"version":3,"file":"Glimpse.js","sourceRoot":"","sources":["../../../src/components/Glimpse/Glimpse.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAEL,IAAI,EACJ,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,cAAc,EAId,QAAQ,EAER,oBAAoB,EACpB,WAAW,EACZ,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,yDAAyD,CAAC;AAiB5F,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACtD,OAAO,GAAG,CAAA;MACN,iBAAiB;oCACa,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;;MAG/D,oBAAoB;gCACM,KAAK,CAAC,IAAI,CAAC,OAAO;;GAE/C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,OAAO,GAAmD,UAAU,CACxE,CACE,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,MAAM,GAAG,EAAE,EAAiC,EAC/E,GAAwB,EACxB,EAAE;IACF,OAAO,CACL,MAAC,aAAa,IAAC,GAAG,EAAE,GAAG,aACrB,KAAC,UAAU,cACT,KAAC,WAAW,IACV,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,KAAC,QAAQ,IAAC,KAAK,EAAE,SAAS,GAAI,EACzC,MAAM,EAAE,MAAM,GACd,GACS,EACZ,CAAC,CAAC,MAAM,CAAC,MAAM,IAAI,CAClB,KAAC,WAAW,cACV,KAAC,cAAc,IAAC,MAAM,EAAE,MAAM,GAAI,GACtB,CACf,IACa,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  BaseProps,\n  Card,\n  CardContent,\n  CardHeader,\n  defaultThemeProp,\n  FieldValueList,\n  FieldValueListProps,\n  ForwardProps,\n  MenuItemProps,\n  MetaList,\n  NoChildrenProp,\n  StyledFieldValueList,\n  SummaryItem\n} from '@pega/cosmos-react-core';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\n\nexport interface GlimpseProps extends BaseProps, NoChildrenProp {\n  /** The unique id for the operator. */\n  id: string;\n  /** The primary piece of item information as a string. */\n  primary: MenuItemProps['primary'];\n  /** Secondary info about an item. Useful for additional metadata or context. */\n  secondary?: MenuItemProps['secondary'];\n  /** A visual to assist identifying an item. e.g. Avatar or Icon. */\n  visual?: MenuItemProps['visual'];\n  /** The set of field values to render in the list. */\n  fields?: FieldValueListProps['fields'];\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledGlimpse = styled(Card)(({ theme }) => {\n  return css`\n    ${StyledCardContent} {\n      border-top: solid 0.0625rem ${theme.base.palette['border-line']};\n    }\n\n    ${StyledFieldValueList} {\n      padding-top: calc(1.5 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledGlimpse.defaultProps = defaultThemeProp;\n\nconst Glimpse: FunctionComponent<GlimpseProps & ForwardProps> = forwardRef(\n  (\n    { primary, visual, secondary = [], fields = [] }: PropsWithoutRef<GlimpseProps>,\n    ref: GlimpseProps['ref']\n  ) => {\n    return (\n      <StyledGlimpse ref={ref}>\n        <CardHeader>\n          <SummaryItem\n            primary={primary}\n            secondary={<MetaList items={secondary} />}\n            visual={visual}\n          />\n        </CardHeader>\n        {!!fields.length && (\n          <CardContent>\n            <FieldValueList fields={fields} />\n          </CardContent>\n        )}\n      </StyledGlimpse>\n    );\n  }\n);\n\nexport default Glimpse;\n"]}

package/lib/components/SearchResults/Filter.js

@@ -33,13 +33,13 @@ const Filter = ({ onFilterChange, onClearFilter, name, expanded = true, ...contr
                     if (filterOption.checked)
                         filterActive = true;
                     return (_jsx(SelectFilter, { id: filterOption.id, name: filterOption.name, label: filterOption.label, checked: filterOption.checked }, filterOption.id));
-                }) }, void 0));
+                }) }));
             break;
         }
         default:
             filterControl = null;
     }
-    return (_jsxs(StyledFilter, { children: [_jsxs(Flex, { container: { justify: 'between' }, children: [_jsxs(Flex, { as: StyledFilterButton, container: { gap: 1, alignItems: 'center' }, variant: 'text', onClick: () => setFilterExpanded(curr => !curr), "aria-expanded": filterExpanded, "aria-label": t(filterExpanded ? 'collapse_noun' : 'expand_noun', [name]), children: [_jsx(Icon, { name: 'caret-down' }, void 0), _jsx(Text, { variant: 'h3', as: 'span', children: name }, void 0)] }, void 0), filterActive && (_jsx(Button, { variant: 'link', onClick: () => onClearFilter?.(name), children: t('clear') }, void 0))] }, void 0), _jsx(ExpandCollapse, { collapsed: !filterExpanded, children: filterControl }, void 0)] }, void 0));
+    return (_jsxs(StyledFilter, { children: [_jsxs(Flex, { container: { justify: 'between' }, children: [_jsxs(Flex, { as: StyledFilterButton, container: { gap: 1, alignItems: 'center' }, variant: 'text', onClick: () => setFilterExpanded(curr => !curr), "aria-expanded": filterExpanded, "aria-label": t(filterExpanded ? 'collapse_noun' : 'expand_noun', [name]), children: [_jsx(Icon, { name: 'caret-down' }), _jsx(Text, { variant: 'h3', as: 'span', children: name })] }), filterActive && (_jsx(Button, { variant: 'link', onClick: () => onClearFilter?.(name), children: t('clear') }))] }), _jsx(ExpandCollapse, { collapsed: !filterExpanded, children: filterControl })] }));
 };
 export default Filter;
 //# sourceMappingURL=Filter.js.map

package/lib/components/SearchResults/Filter.js.map

@@ -1 +1 @@
-{"version":3,"file":"Filter.js","sourceRoot":"","sources":["../../../src/components/SearchResults/Filter.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from 'react';\n\nimport {\n  Button,\n  Checkbox,\n  CheckboxGroup,\n  ExpandCollapse,\n  Flex,\n  Icon,\n  registerIcon,\n  RadioButton,\n  RadioButtonGroup,\n  Text,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';\n\nimport { FilterProps, SearchResultsProps, SelectFilterItemProps } from './SearchResults.types';\nimport { StyledFilter, StyledFilterButton } from './SearchResults.styles';\n\nregisterIcon(caretDownIcon);\n\ninterface FilterComponentProps {\n  onFilterChange?: SearchResultsProps['onFilterChange'];\n  onClearFilter?: SearchResultsProps['onClearFilter'];\n}\n\nconst Filter = ({\n  onFilterChange,\n  onClearFilter,\n  name,\n  expanded = true,\n  ...control\n}: FilterProps & FilterComponentProps): JSX.Element => {\n  const t = useI18n();\n  const [filterExpanded, setFilterExpanded] = useState(expanded);\n\n  let filterControl;\n  let filterActive = false;\n  // eslint-disable-next-line sonarjs/no-small-switch\n  switch (control.type) {\n    case 'select': {\n      const { selectType, items } = control;\n      let SelectFilterGroup = CheckboxGroup;\n      let SelectFilter = Checkbox;\n      if (selectType === 'single-select') {\n        SelectFilterGroup = RadioButtonGroup;\n        SelectFilter = RadioButton;\n      }\n      filterControl = (\n        <SelectFilterGroup\n          label={name}\n          labelHidden\n          onChange={e => {\n            const item = items.find((x: SelectFilterItemProps) => x.id === e.target.id);\n            if (!item) return;\n            const newItem = { ...item, checked: !item.checked };\n\n            onFilterChange?.({\n              name,\n              type: control.type,\n              value: newItem\n            });\n          }}\n        >\n          {control.items.map((filterOption: SelectFilterItemProps) => {\n            if (filterOption.checked) filterActive = true;\n            return (\n              <SelectFilter\n                key={filterOption.id}\n                id={filterOption.id}\n                name={filterOption.name}\n                label={filterOption.label}\n                checked={filterOption.checked}\n              />\n            );\n          })}\n        </SelectFilterGroup>\n      );\n      break;\n    }\n    default:\n      filterControl = null;\n  }\n\n  return (\n    <StyledFilter>\n      <Flex container={{ justify: 'between' }}>\n        <Flex\n          as={StyledFilterButton}\n          container={{ gap: 1, alignItems: 'center' }}\n          variant='text'\n          onClick={() => setFilterExpanded(curr => !curr)}\n          aria-expanded={filterExpanded}\n          aria-label={t(filterExpanded ? 'collapse_noun' : 'expand_noun', [name])}\n        >\n          <Icon name='caret-down' />\n          <Text variant='h3' as='span'>\n            {name}\n          </Text>\n        </Flex>\n        {filterActive && (\n          <Button variant='link' onClick={() => onClearFilter?.(name)}>\n            {t('clear')}\n          </Button>\n        )}\n      </Flex>\n      <ExpandCollapse collapsed={!filterExpanded}>{filterControl}</ExpandCollapse>\n    </StyledFilter>\n  );\n};\n\nexport default Filter;\n"]}
+{"version":3,"file":"Filter.js","sourceRoot":"","sources":["../../../src/components/SearchResults/Filter.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from 'react';\n\nimport {\n  Button,\n  Checkbox,\n  CheckboxGroup,\n  ExpandCollapse,\n  Flex,\n  Icon,\n  registerIcon,\n  RadioButton,\n  RadioButtonGroup,\n  Text,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';\n\nimport { FilterProps, SearchResultsProps, SelectFilterItemProps } from './SearchResults.types';\nimport { StyledFilter, StyledFilterButton } from './SearchResults.styles';\n\nregisterIcon(caretDownIcon);\n\ninterface FilterComponentProps {\n  onFilterChange?: SearchResultsProps['onFilterChange'];\n  onClearFilter?: SearchResultsProps['onClearFilter'];\n}\n\nconst Filter = ({\n  onFilterChange,\n  onClearFilter,\n  name,\n  expanded = true,\n  ...control\n}: FilterProps & FilterComponentProps): JSX.Element => {\n  const t = useI18n();\n  const [filterExpanded, setFilterExpanded] = useState(expanded);\n\n  let filterControl;\n  let filterActive = false;\n  // eslint-disable-next-line sonarjs/no-small-switch\n  switch (control.type) {\n    case 'select': {\n      const { selectType, items } = control;\n      let SelectFilterGroup = CheckboxGroup;\n      let SelectFilter = Checkbox;\n      if (selectType === 'single-select') {\n        SelectFilterGroup = RadioButtonGroup;\n        SelectFilter = RadioButton;\n      }\n      filterControl = (\n        <SelectFilterGroup\n          label={name}\n          labelHidden\n          onChange={e => {\n            const item = items.find((x: SelectFilterItemProps) => x.id === e.target.id);\n            if (!item) return;\n            const newItem = { ...item, checked: !item.checked };\n\n            onFilterChange?.({\n              name,\n              type: control.type,\n              value: newItem\n            });\n          }}\n        >\n          {control.items.map((filterOption: SelectFilterItemProps) => {\n            if (filterOption.checked) filterActive = true;\n            return (\n              <SelectFilter\n                key={filterOption.id}\n                id={filterOption.id}\n                name={filterOption.name}\n                label={filterOption.label}\n                checked={filterOption.checked}\n              />\n            );\n          })}\n        </SelectFilterGroup>\n      );\n      break;\n    }\n    default:\n      filterControl = null;\n  }\n\n  return (\n    <StyledFilter>\n      <Flex container={{ justify: 'between' }}>\n        <Flex\n          as={StyledFilterButton}\n          container={{ gap: 1, alignItems: 'center' }}\n          variant='text'\n          onClick={() => setFilterExpanded(curr => !curr)}\n          aria-expanded={filterExpanded}\n          aria-label={t(filterExpanded ? 'collapse_noun' : 'expand_noun', [name])}\n        >\n          <Icon name='caret-down' />\n          <Text variant='h3' as='span'>\n            {name}\n          </Text>\n        </Flex>\n        {filterActive && (\n          <Button variant='link' onClick={() => onClearFilter?.(name)}>\n            {t('clear')}\n          </Button>\n        )}\n      </Flex>\n      <ExpandCollapse collapsed={!filterExpanded}>{filterControl}</ExpandCollapse>\n    </StyledFilter>\n  );\n};\n\nexport default Filter;\n"]}

package/lib/components/SearchResults/SearchResult.js

@@ -15,7 +15,7 @@ const StyledDescription = styled(Text) `
   word-break: break-word;
 `;
 const SearchResult = ({ id, title, link, description, meta = [] }) => {
-    return (_jsxs(Flex, { as: StyledSearchResult, container: { direction: 'column', gap: 1 }, children: [_jsxs(Flex, { container: { direction: 'column-reverse' }, children: [_jsx(Text, { variant: 'h2', children: _jsx(Link, { ...link, children: title }, void 0) }, void 0), _jsx(Text, { variant: 'secondary', as: 'div', children: id }, void 0)] }, void 0), description && _jsx(StyledDescription, { forwardedAs: 'p', children: description }, void 0), !!meta.length && _jsx(MetaList, { items: meta }, void 0)] }, void 0));
+    return (_jsxs(Flex, { as: StyledSearchResult, container: { direction: 'column', gap: 1 }, children: [_jsxs(Flex, { container: { direction: 'column-reverse' }, children: [_jsx(Text, { variant: 'h2', children: _jsx(Link, { ...link, children: title }) }), _jsx(Text, { variant: 'secondary', as: 'div', children: id })] }), description && _jsx(StyledDescription, { forwardedAs: 'p', children: description }), !!meta.length && _jsx(MetaList, { items: meta })] }));
 };
 export default SearchResult;
 //# sourceMappingURL=SearchResult.js.map

package/lib/components/SearchResults/SearchResult.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchResult.js","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResult.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,gBAAgB,EAChB,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,aAAa,EACb,iBAAiB,EAClB,MAAM,yBAAyB,CAAC;AAIjC,MAAM,kBAAkB,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACtD,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAEtF,OAAO,GAAG,CAAA;SACH,aAAa;mBACH,QAAQ,CAAC,CAAC;qBACR,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,MAAM;;GAElD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAErC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,EACpB,EAAE,EACF,KAAK,EACL,IAAI,EACJ,WAAW,EACX,IAAI,GAAG,EAAE,EACS,EAAe,EAAE;IACnC,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,kBAAkB,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aACtE,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,aAC9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAChB,KAAC,IAAI,OAAK,IAAI,YAAG,KAAK,WAAQ,WACzB,EACP,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,EAAC,EAAE,EAAC,KAAK,YAC/B,EAAE,WACE,YACF,EACN,WAAW,IAAI,KAAC,iBAAiB,IAAC,WAAW,EAAC,GAAG,YAAE,WAAW,WAAqB,EACnF,CAAC,CAAC,IAAI,CAAC,MAAM,IAAI,KAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,WAAI,YACtC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n  defaultThemeProp,\n  Text,\n  MetaList,\n  Link,\n  Flex,\n  StyledPopover,\n  calculateFontSize\n} from '@pega/cosmos-react-core';\n\nimport { SearchResultProps } from './SearchResults.types';\n\nconst StyledSearchResult = styled.article(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    h2 ${StyledPopover} {\n      font-size: ${fontSize.s};\n      font-weight: ${theme.base['font-weight'].normal};\n    }\n  `;\n});\n\nStyledSearchResult.defaultProps = defaultThemeProp;\n\nconst StyledDescription = styled(Text)`\n  word-break: break-word;\n`;\n\nconst SearchResult = ({\n  id,\n  title,\n  link,\n  description,\n  meta = []\n}: SearchResultProps): JSX.Element => {\n  return (\n    <Flex as={StyledSearchResult} container={{ direction: 'column', gap: 1 }}>\n      <Flex container={{ direction: 'column-reverse' }}>\n        <Text variant='h2'>\n          <Link {...link}>{title}</Link>\n        </Text>\n        <Text variant='secondary' as='div'>\n          {id}\n        </Text>\n      </Flex>\n      {description && <StyledDescription forwardedAs='p'>{description}</StyledDescription>}\n      {!!meta.length && <MetaList items={meta} />}\n    </Flex>\n  );\n};\n\nexport default SearchResult;\n"]}
+{"version":3,"file":"SearchResult.js","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResult.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,gBAAgB,EAChB,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,aAAa,EACb,iBAAiB,EAClB,MAAM,yBAAyB,CAAC;AAIjC,MAAM,kBAAkB,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACtD,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAEtF,OAAO,GAAG,CAAA;SACH,aAAa;mBACH,QAAQ,CAAC,CAAC;qBACR,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,MAAM;;GAElD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAErC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,EACpB,EAAE,EACF,KAAK,EACL,IAAI,EACJ,WAAW,EACX,IAAI,GAAG,EAAE,EACS,EAAe,EAAE;IACnC,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,kBAAkB,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aACtE,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,aAC9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAChB,KAAC,IAAI,OAAK,IAAI,YAAG,KAAK,GAAQ,GACzB,EACP,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,EAAC,EAAE,EAAC,KAAK,YAC/B,EAAE,GACE,IACF,EACN,WAAW,IAAI,KAAC,iBAAiB,IAAC,WAAW,EAAC,GAAG,YAAE,WAAW,GAAqB,EACnF,CAAC,CAAC,IAAI,CAAC,MAAM,IAAI,KAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,GAAI,IACtC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n  defaultThemeProp,\n  Text,\n  MetaList,\n  Link,\n  Flex,\n  StyledPopover,\n  calculateFontSize\n} from '@pega/cosmos-react-core';\n\nimport { SearchResultProps } from './SearchResults.types';\n\nconst StyledSearchResult = styled.article(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    h2 ${StyledPopover} {\n      font-size: ${fontSize.s};\n      font-weight: ${theme.base['font-weight'].normal};\n    }\n  `;\n});\n\nStyledSearchResult.defaultProps = defaultThemeProp;\n\nconst StyledDescription = styled(Text)`\n  word-break: break-word;\n`;\n\nconst SearchResult = ({\n  id,\n  title,\n  link,\n  description,\n  meta = []\n}: SearchResultProps): JSX.Element => {\n  return (\n    <Flex as={StyledSearchResult} container={{ direction: 'column', gap: 1 }}>\n      <Flex container={{ direction: 'column-reverse' }}>\n        <Text variant='h2'>\n          <Link {...link}>{title}</Link>\n        </Text>\n        <Text variant='secondary' as='div'>\n          {id}\n        </Text>\n      </Flex>\n      {description && <StyledDescription forwardedAs='p'>{description}</StyledDescription>}\n      {!!meta.length && <MetaList items={meta} />}\n    </Flex>\n  );\n};\n\nexport default SearchResult;\n"]}

package/lib/components/SearchResults/SearchResults.js

@@ -10,15 +10,15 @@ registerIcon(filterIcon, filterOnIcon);
 const FilterModal = (props) => {
     const { activeFilters, count, filters, onFilterChange, onClearFilter, onClearAllFilters } = props;
     const t = useI18n();
-    return (_jsx(Modal, { heading: t('filters'), autoWidth: true, children: _jsxs(Grid, { as: StyledModalFilterContent, container: { rowGap: 2 }, children: [_jsxs(Flex, { container: { gap: 1, alignItems: 'center' }, children: [_jsx(Text, { as: StyledCountText, variant: 'secondary', children: t('results_count', [count], { count }) }, void 0), onClearAllFilters && !!activeFilters.length && (_jsx(Button, { variant: 'link', onClick: onClearAllFilters, children: t('clear_all') }, void 0))] }, void 0), !!activeFilters.length && (_jsx(Flex, { as: StyledSelectedFilters, container: { gap: 1 }, children: activeFilters.map(filter => {
+    return (_jsx(Modal, { heading: t('filters'), autoWidth: true, children: _jsxs(Grid, { as: StyledModalFilterContent, container: { rowGap: 2 }, children: [_jsxs(Flex, { container: { gap: 1, alignItems: 'center' }, children: [_jsx(Text, { as: StyledCountText, variant: 'secondary', children: t('results_count', [count], { count }) }), onClearAllFilters && !!activeFilters.length && (_jsx(Button, { variant: 'link', onClick: onClearAllFilters, children: t('clear_all') }))] }), !!activeFilters.length && (_jsx(Flex, { as: StyledSelectedFilters, container: { gap: 1 }, children: activeFilters.map(filter => {
                         return (_jsx(Selectable, { id: filter.id, onRemove: () => onFilterChange?.({
                                 name: filter.groupName,
                                 type: filter.type,
                                 value: filter.resetValue
                             }), children: `${filter.groupName}: ${filter.name}` }, filter.id));
-                    }) }, void 0)), _jsx("div", { children: filters.map((filter) => {
+                    }) })), _jsx("div", { children: filters.map((filter) => {
                         return (_jsx(Filter, { onFilterChange: onFilterChange, onClearFilter: onClearFilter, ...filter }, filter.name));
-                    }) }, void 0)] }, void 0) }, void 0));
+                    }) })] }) }));
 };
 const SearchResults = forwardRef(({ results, searchInputProps, count, filters, onFilterChange, onClearAllFilters, onClearFilter, onShowMore, ...restProps }, ref) => {
     const t = useI18n();
@@ -79,24 +79,24 @@ const SearchResults = forwardRef(({ results, searchInputProps, count, filters, o
                             cols: 'auto'
                         }
                     }
-                    : {}, container: { rows: '1fr auto', areas: '"search" "results"', rowGap: 2, colGap: 4 }, children: [_jsx(Grid, { item: { area: 'search' }, children: _jsx(SearchInput, { ...searchInputProps, placeholder: placeholder }, void 0) }, void 0), isMedium && !!filters.length && (_jsxs(Grid, { item: { area: 'filters', alignSelf: 'start' }, children: [_jsxs(Flex, { as: StyledFilterTitle, container: { justify: 'between' }, children: [_jsx(Text, { variant: 'h2', children: t('filters') }, void 0), onClearAllFilters && !!activeFilters.length && (_jsx(Button, { variant: 'link', onClick: onClearAllFilters, children: t('clear_all') }, void 0))] }, void 0), filters.map((filter) => {
+                    : {}, container: { rows: '1fr auto', areas: '"search" "results"', rowGap: 2, colGap: 4 }, children: [_jsx(Grid, { item: { area: 'search' }, children: _jsx(SearchInput, { ...searchInputProps, placeholder: placeholder }) }), isMedium && !!filters.length && (_jsxs(Grid, { item: { area: 'filters', alignSelf: 'start' }, children: [_jsxs(Flex, { as: StyledFilterTitle, container: { justify: 'between' }, children: [_jsx(Text, { variant: 'h2', children: t('filters') }), onClearAllFilters && !!activeFilters.length && (_jsx(Button, { variant: 'link', onClick: onClearAllFilters, children: t('clear_all') }))] }), filters.map((filter) => {
                                 return (_jsx(Filter, { onFilterChange: onFilterChange, onClearFilter: onClearFilter, ...filter }, filter.name));
-                            })] }, void 0)), _jsxs(Grid, { item: { area: 'results' }, container: {
+                            })] })), _jsxs(Grid, { item: { area: 'results' }, container: {
                             alignItems: 'center',
                             rowGap: 2,
                             rows: 'auto 1fr',
                             areas: '"meta" "items"'
                         }, children: [_jsxs(Grid, { item: { area: 'meta' }, container: { rowGap: 1 }, children: [_jsxs(Flex, { container: { justify: 'between', alignItems: 'center' }, children: [_jsx(Text, { as: StyledCountText, variant: 'secondary', children: searchInputProps.value !== '' || results.length > 0
                                                     ? t('results_count', [count], { count })
-                                                    : '' }, void 0), !isMedium && !!filters.length && (_jsxs(Button, { variant: 'simple', onClick: openFiltersModal, children: [_jsx(Icon, { name: activeFilters.length > 0 ? 'filter-on' : 'filter' }, void 0), "\u00A0", t('filters'), "\u00A0", _jsx(Count, { children: activeFilters.length }, void 0)] }, void 0))] }, void 0), !!activeFilters.length && (_jsx(Flex, { as: StyledSelectedFilters, container: { gap: 1 }, children: activeFilters.map(filter => {
+                                                    : '' }), !isMedium && !!filters.length && (_jsxs(Button, { variant: 'simple', onClick: openFiltersModal, children: [_jsx(Icon, { name: activeFilters.length > 0 ? 'filter-on' : 'filter' }), "\u00A0", t('filters'), "\u00A0", _jsx(Count, { children: activeFilters.length })] }))] }), !!activeFilters.length && (_jsx(Flex, { as: StyledSelectedFilters, container: { gap: 1 }, children: activeFilters.map(filter => {
                                             return (_jsx(Selectable, { id: filter.id, onRemove: () => onFilterChange?.({
                                                     name: filter.groupName,
                                                     type: filter.type,
                                                     value: filter.resetValue
                                                 }), children: `${filter.groupName}: ${filter.name}` }, filter.id));
-                                        }) }, void 0))] }, void 0), _jsx(Grid, { item: { area: 'items', alignSelf: results.length ? 'start' : 'center' }, container: { rowGap: 4 }, children: results.length ? (results.map((result) => {
+                                        }) }))] }), _jsx(Grid, { item: { area: 'items', alignSelf: results.length ? 'start' : 'center' }, container: { rowGap: 4 }, children: results.length ? (results.map((result) => {
                                     return _jsx(SearchResult, { ...result }, result.id);
-                                })) : (_jsx(Grid, { item: { alignSelf: 'stretch' }, children: _jsx(EmptyState, { message: searchInputProps.value === '' ? t('empty_search') : undefined }, void 0) }, void 0)) }, void 0), onShowMore && (_jsx(Flex, { container: { justify: 'center' }, children: _jsx(Button, { variant: 'link', onClick: onShowMore, children: t('show_more') }, void 0) }, void 0))] }, void 0)] }, void 0) }, void 0) }, void 0));
+                                })) : (_jsx(Grid, { item: { alignSelf: 'stretch' }, children: _jsx(EmptyState, { message: searchInputProps.value === '' ? t('empty_search') : undefined }) })) }), onShowMore && (_jsx(Flex, { container: { justify: 'center' }, children: _jsx(Button, { variant: 'link', onClick: onShowMore, children: t('show_more') }) }))] })] }) }) }));
 });
 export default SearchResults;
 //# sourceMappingURL=SearchResults.js.map

package/lib/components/SearchResults/SearchResults.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchResults.js","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResults.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  useContext,\n  useRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  ComponentProps\n} from 'react';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  Count,\n  Flex,\n  ForwardProps,\n  Grid,\n  Icon,\n  registerIcon,\n  Modal,\n  ModalMethods,\n  ModalManagerContext,\n  EmptyState,\n  SearchInput,\n  Selectable,\n  Text,\n  useI18n,\n  useBreakpoint,\n  useAfterInitialEffect\n} from '@pega/cosmos-react-core';\nimport * as filterIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter.icon';\nimport * as filterOnIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter-on.icon';\n\nimport {\n  SearchResultsProps,\n  SearchResultProps,\n  FilterProps,\n  ActiveFilters\n} from './SearchResults.types';\nimport SearchResult from './SearchResult';\nimport Filter from './Filter';\nimport {\n  StyledModalFilterContent,\n  StyledCountText,\n  StyledSelectedFilters,\n  StyledSearchResults,\n  StyledFilterTitle\n} from './SearchResults.styles';\n\nregisterIcon(filterIcon, filterOnIcon);\n\nconst FilterModal = (\n  props: Pick<\n    SearchResultsProps,\n    'count' | 'filters' | 'onFilterChange' | 'onClearFilter' | 'onClearAllFilters'\n  > & {\n    activeFilters: ActiveFilters[];\n  }\n) => {\n  const { activeFilters, count, filters, onFilterChange, onClearFilter, onClearAllFilters } = props;\n  const t = useI18n();\n\n  return (\n    <Modal heading={t('filters')} autoWidth>\n      <Grid as={StyledModalFilterContent} container={{ rowGap: 2 }}>\n        <Flex container={{ gap: 1, alignItems: 'center' }}>\n          <Text as={StyledCountText} variant='secondary'>\n            {t('results_count', [count], { count })}\n          </Text>\n          {onClearAllFilters && !!activeFilters.length && (\n            <Button variant='link' onClick={onClearAllFilters}>\n              {t('clear_all')}\n            </Button>\n          )}\n        </Flex>\n        {!!activeFilters.length && (\n          <Flex as={StyledSelectedFilters} container={{ gap: 1 }}>\n            {activeFilters.map(filter => {\n              return (\n                <Selectable\n                  key={filter.id}\n                  id={filter.id}\n                  onRemove={() =>\n                    onFilterChange?.({\n                      name: filter.groupName,\n                      type: filter.type,\n                      value: filter.resetValue\n                    })\n                  }\n                >\n                  {`${filter.groupName}: ${filter.name}`}\n                </Selectable>\n              );\n            })}\n          </Flex>\n        )}\n        <div>\n          {filters.map((filter: FilterProps) => {\n            return (\n              <Filter\n                key={filter.name}\n                onFilterChange={onFilterChange}\n                onClearFilter={onClearFilter}\n                {...filter}\n              />\n            );\n          })}\n        </div>\n      </Grid>\n    </Modal>\n  );\n};\n\nconst SearchResults: FunctionComponent<SearchResultsProps & ForwardProps> = forwardRef(\n  (\n    {\n      results,\n      searchInputProps,\n      count,\n      filters,\n      onFilterChange,\n      onClearAllFilters,\n      onClearFilter,\n      onShowMore,\n      ...restProps\n    }: PropsWithoutRef<SearchResultsProps>,\n    ref: SearchResultsProps['ref']\n  ) => {\n    const t = useI18n();\n    const isMedium = useBreakpoint('md');\n    const { create } = useContext(ModalManagerContext);\n    const filtersMethods = useRef<ModalMethods<ComponentProps<typeof FilterModal>>>();\n    const { placeholder = t('search_placeholder_default') } = searchInputProps;\n\n    const activeFilters: ActiveFilters[] = filters.flatMap(group => {\n      if (group.type === 'select') {\n        return group.items.flatMap(item => {\n          if (item.checked) {\n            return {\n              id: item.id,\n              name: item.name,\n              resetValue: { ...item, checked: false },\n              groupName: group.name,\n              type: group.type\n            };\n          }\n          return [];\n        });\n      }\n      return [];\n    });\n\n    const openFiltersModal = () => {\n      filtersMethods.current = create(FilterModal, {\n        activeFilters,\n        count,\n        filters,\n        onFilterChange,\n        onClearFilter,\n        onClearAllFilters\n      });\n    };\n\n    useAfterInitialEffect(() => {\n      if (filtersMethods.current) {\n        filtersMethods.current.update({\n          activeFilters,\n          count,\n          filters\n        });\n      }\n    }, [activeFilters, count, filters]);\n\n    useAfterInitialEffect(() => {\n      if (isMedium && filtersMethods.current) filtersMethods.current.dismiss();\n    }, [isMedium]);\n\n    return (\n      <Card>\n        <CardContent>\n          <Grid\n            {...restProps}\n            as={StyledSearchResults}\n            ref={ref}\n            md={\n              filters.length\n                ? {\n                    container: {\n                      cols: '15rem auto',\n                      areas: '\"search search\" \"filters results\"'\n                    }\n                  }\n                : {}\n            }\n            s={\n              filters.length\n                ? {\n                    container: {\n                      cols: 'auto'\n                    }\n                  }\n                : {}\n            }\n            container={{ rows: '1fr auto', areas: '\"search\" \"results\"', rowGap: 2, colGap: 4 }}\n          >\n            <Grid item={{ area: 'search' }}>\n              <SearchInput {...searchInputProps} placeholder={placeholder} />\n            </Grid>\n            {isMedium && !!filters.length && (\n              <Grid item={{ area: 'filters', alignSelf: 'start' }}>\n                <Flex as={StyledFilterTitle} container={{ justify: 'between' }}>\n                  <Text variant='h2'>{t('filters')}</Text>\n                  {onClearAllFilters && !!activeFilters.length && (\n                    <Button variant='link' onClick={onClearAllFilters}>\n                      {t('clear_all')}\n                    </Button>\n                  )}\n                </Flex>\n                {filters.map((filter: FilterProps) => {\n                  return (\n                    <Filter\n                      key={filter.name}\n                      onFilterChange={onFilterChange}\n                      onClearFilter={onClearFilter}\n                      {...filter}\n                    />\n                  );\n                })}\n              </Grid>\n            )}\n            <Grid\n              item={{ area: 'results' }}\n              container={{\n                alignItems: 'center',\n                rowGap: 2,\n                rows: 'auto 1fr',\n                areas: '\"meta\" \"items\"'\n              }}\n            >\n              <Grid item={{ area: 'meta' }} container={{ rowGap: 1 }}>\n                <Flex container={{ justify: 'between', alignItems: 'center' }}>\n                  <Text as={StyledCountText} variant='secondary'>\n                    {searchInputProps.value !== '' || results.length > 0\n                      ? t('results_count', [count], { count })\n                      : ''}\n                  </Text>\n                  {!isMedium && !!filters.length && (\n                    <Button variant='simple' onClick={openFiltersModal}>\n                      <Icon name={activeFilters.length > 0 ? 'filter-on' : 'filter'} />\n                      &nbsp;{t('filters')}&nbsp;\n                      <Count>{activeFilters.length}</Count>\n                    </Button>\n                  )}\n                </Flex>\n                {!!activeFilters.length && (\n                  <Flex as={StyledSelectedFilters} container={{ gap: 1 }}>\n                    {activeFilters.map(filter => {\n                      return (\n                        <Selectable\n                          key={filter.id}\n                          id={filter.id}\n                          onRemove={() =>\n                            onFilterChange?.({\n                              name: filter.groupName,\n                              type: filter.type,\n                              value: filter.resetValue\n                            })\n                          }\n                        >\n                          {`${filter.groupName}: ${filter.name}`}\n                        </Selectable>\n                      );\n                    })}\n                  </Flex>\n                )}\n              </Grid>\n              <Grid\n                item={{ area: 'items', alignSelf: results.length ? 'start' : 'center' }}\n                container={{ rowGap: 4 }}\n              >\n                {results.length ? (\n                  results.map((result: SearchResultProps) => {\n                    return <SearchResult key={result.id} {...result} />;\n                  })\n                ) : (\n                  <Grid item={{ alignSelf: 'stretch' }}>\n                    <EmptyState\n                      message={searchInputProps.value === '' ? t('empty_search') : undefined}\n                    />\n                  </Grid>\n                )}\n              </Grid>\n              {onShowMore && (\n                <Flex container={{ justify: 'center' }}>\n                  <Button variant='link' onClick={onShowMore}>\n                    {t('show_more')}\n                  </Button>\n                </Flex>\n              )}\n            </Grid>\n          </Grid>\n        </CardContent>\n      </Card>\n    );\n  }\n);\n\nexport default SearchResults;\n"]}
+{"version":3,"file":"SearchResults.js","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResults.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  useContext,\n  useRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  ComponentProps\n} from 'react';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  Count,\n  Flex,\n  ForwardProps,\n  Grid,\n  Icon,\n  registerIcon,\n  Modal,\n  ModalMethods,\n  ModalManagerContext,\n  EmptyState,\n  SearchInput,\n  Selectable,\n  Text,\n  useI18n,\n  useBreakpoint,\n  useAfterInitialEffect\n} from '@pega/cosmos-react-core';\nimport * as filterIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter.icon';\nimport * as filterOnIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter-on.icon';\n\nimport {\n  SearchResultsProps,\n  SearchResultProps,\n  FilterProps,\n  ActiveFilters\n} from './SearchResults.types';\nimport SearchResult from './SearchResult';\nimport Filter from './Filter';\nimport {\n  StyledModalFilterContent,\n  StyledCountText,\n  StyledSelectedFilters,\n  StyledSearchResults,\n  StyledFilterTitle\n} from './SearchResults.styles';\n\nregisterIcon(filterIcon, filterOnIcon);\n\nconst FilterModal = (\n  props: Pick<\n    SearchResultsProps,\n    'count' | 'filters' | 'onFilterChange' | 'onClearFilter' | 'onClearAllFilters'\n  > & {\n    activeFilters: ActiveFilters[];\n  }\n) => {\n  const { activeFilters, count, filters, onFilterChange, onClearFilter, onClearAllFilters } = props;\n  const t = useI18n();\n\n  return (\n    <Modal heading={t('filters')} autoWidth>\n      <Grid as={StyledModalFilterContent} container={{ rowGap: 2 }}>\n        <Flex container={{ gap: 1, alignItems: 'center' }}>\n          <Text as={StyledCountText} variant='secondary'>\n            {t('results_count', [count], { count })}\n          </Text>\n          {onClearAllFilters && !!activeFilters.length && (\n            <Button variant='link' onClick={onClearAllFilters}>\n              {t('clear_all')}\n            </Button>\n          )}\n        </Flex>\n        {!!activeFilters.length && (\n          <Flex as={StyledSelectedFilters} container={{ gap: 1 }}>\n            {activeFilters.map(filter => {\n              return (\n                <Selectable\n                  key={filter.id}\n                  id={filter.id}\n                  onRemove={() =>\n                    onFilterChange?.({\n                      name: filter.groupName,\n                      type: filter.type,\n                      value: filter.resetValue\n                    })\n                  }\n                >\n                  {`${filter.groupName}: ${filter.name}`}\n                </Selectable>\n              );\n            })}\n          </Flex>\n        )}\n        <div>\n          {filters.map((filter: FilterProps) => {\n            return (\n              <Filter\n                key={filter.name}\n                onFilterChange={onFilterChange}\n                onClearFilter={onClearFilter}\n                {...filter}\n              />\n            );\n          })}\n        </div>\n      </Grid>\n    </Modal>\n  );\n};\n\nconst SearchResults: FunctionComponent<SearchResultsProps & ForwardProps> = forwardRef(\n  (\n    {\n      results,\n      searchInputProps,\n      count,\n      filters,\n      onFilterChange,\n      onClearAllFilters,\n      onClearFilter,\n      onShowMore,\n      ...restProps\n    }: PropsWithoutRef<SearchResultsProps>,\n    ref: SearchResultsProps['ref']\n  ) => {\n    const t = useI18n();\n    const isMedium = useBreakpoint('md');\n    const { create } = useContext(ModalManagerContext);\n    const filtersMethods = useRef<ModalMethods<ComponentProps<typeof FilterModal>>>();\n    const { placeholder = t('search_placeholder_default') } = searchInputProps;\n\n    const activeFilters: ActiveFilters[] = filters.flatMap(group => {\n      if (group.type === 'select') {\n        return group.items.flatMap(item => {\n          if (item.checked) {\n            return {\n              id: item.id,\n              name: item.name,\n              resetValue: { ...item, checked: false },\n              groupName: group.name,\n              type: group.type\n            };\n          }\n          return [];\n        });\n      }\n      return [];\n    });\n\n    const openFiltersModal = () => {\n      filtersMethods.current = create(FilterModal, {\n        activeFilters,\n        count,\n        filters,\n        onFilterChange,\n        onClearFilter,\n        onClearAllFilters\n      });\n    };\n\n    useAfterInitialEffect(() => {\n      if (filtersMethods.current) {\n        filtersMethods.current.update({\n          activeFilters,\n          count,\n          filters\n        });\n      }\n    }, [activeFilters, count, filters]);\n\n    useAfterInitialEffect(() => {\n      if (isMedium && filtersMethods.current) filtersMethods.current.dismiss();\n    }, [isMedium]);\n\n    return (\n      <Card>\n        <CardContent>\n          <Grid\n            {...restProps}\n            as={StyledSearchResults}\n            ref={ref}\n            md={\n              filters.length\n                ? {\n                    container: {\n                      cols: '15rem auto',\n                      areas: '\"search search\" \"filters results\"'\n                    }\n                  }\n                : {}\n            }\n            s={\n              filters.length\n                ? {\n                    container: {\n                      cols: 'auto'\n                    }\n                  }\n                : {}\n            }\n            container={{ rows: '1fr auto', areas: '\"search\" \"results\"', rowGap: 2, colGap: 4 }}\n          >\n            <Grid item={{ area: 'search' }}>\n              <SearchInput {...searchInputProps} placeholder={placeholder} />\n            </Grid>\n            {isMedium && !!filters.length && (\n              <Grid item={{ area: 'filters', alignSelf: 'start' }}>\n                <Flex as={StyledFilterTitle} container={{ justify: 'between' }}>\n                  <Text variant='h2'>{t('filters')}</Text>\n                  {onClearAllFilters && !!activeFilters.length && (\n                    <Button variant='link' onClick={onClearAllFilters}>\n                      {t('clear_all')}\n                    </Button>\n                  )}\n                </Flex>\n                {filters.map((filter: FilterProps) => {\n                  return (\n                    <Filter\n                      key={filter.name}\n                      onFilterChange={onFilterChange}\n                      onClearFilter={onClearFilter}\n                      {...filter}\n                    />\n                  );\n                })}\n              </Grid>\n            )}\n            <Grid\n              item={{ area: 'results' }}\n              container={{\n                alignItems: 'center',\n                rowGap: 2,\n                rows: 'auto 1fr',\n                areas: '\"meta\" \"items\"'\n              }}\n            >\n              <Grid item={{ area: 'meta' }} container={{ rowGap: 1 }}>\n                <Flex container={{ justify: 'between', alignItems: 'center' }}>\n                  <Text as={StyledCountText} variant='secondary'>\n                    {searchInputProps.value !== '' || results.length > 0\n                      ? t('results_count', [count], { count })\n                      : ''}\n                  </Text>\n                  {!isMedium && !!filters.length && (\n                    <Button variant='simple' onClick={openFiltersModal}>\n                      <Icon name={activeFilters.length > 0 ? 'filter-on' : 'filter'} />\n                      &nbsp;{t('filters')}&nbsp;\n                      <Count>{activeFilters.length}</Count>\n                    </Button>\n                  )}\n                </Flex>\n                {!!activeFilters.length && (\n                  <Flex as={StyledSelectedFilters} container={{ gap: 1 }}>\n                    {activeFilters.map(filter => {\n                      return (\n                        <Selectable\n                          key={filter.id}\n                          id={filter.id}\n                          onRemove={() =>\n                            onFilterChange?.({\n                              name: filter.groupName,\n                              type: filter.type,\n                              value: filter.resetValue\n                            })\n                          }\n                        >\n                          {`${filter.groupName}: ${filter.name}`}\n                        </Selectable>\n                      );\n                    })}\n                  </Flex>\n                )}\n              </Grid>\n              <Grid\n                item={{ area: 'items', alignSelf: results.length ? 'start' : 'center' }}\n                container={{ rowGap: 4 }}\n              >\n                {results.length ? (\n                  results.map((result: SearchResultProps) => {\n                    return <SearchResult key={result.id} {...result} />;\n                  })\n                ) : (\n                  <Grid item={{ alignSelf: 'stretch' }}>\n                    <EmptyState\n                      message={searchInputProps.value === '' ? t('empty_search') : undefined}\n                    />\n                  </Grid>\n                )}\n              </Grid>\n              {onShowMore && (\n                <Flex container={{ justify: 'center' }}>\n                  <Button variant='link' onClick={onShowMore}>\n                    {t('show_more')}\n                  </Button>\n                </Flex>\n              )}\n            </Grid>\n          </Grid>\n        </CardContent>\n      </Card>\n    );\n  }\n);\n\nexport default SearchResults;\n"]}

package/lib/components/Stages/Stages.js

@@ -97,7 +97,7 @@ const Stages = (props) => {
         }
     }, [activeStageEl, requestDismiss]);
     const RenderModal = ({ heading = t('lifecycle', [caseTitle || 'Case']) }) => {
-        return (_jsx(Modal, { ...restProps, heading: heading, onRequestDismiss: () => setRequestDismiss(true), children: stages.map((stage, id) => (_jsx(StepsContainer, { currentStage: [stage] }, id.toString()))) }, void 0));
+        return (_jsx(Modal, { ...restProps, heading: heading, onRequestDismiss: () => setRequestDismiss(true), children: stages.map((stage, id) => (_jsx(StepsContainer, { currentStage: [stage] }, id.toString()))) }));
     };
     const openModal = () => {
         setShowPopover(false);
@@ -116,14 +116,14 @@ const Stages = (props) => {
                         else {
                             openModal();
                         }
-                    }, children: [stage.complete && _jsx(Icon, { name: 'check' }, void 0), !(stage.complete && compressedView) && (_jsx(StyledInnerStage, { ref: isCurrent(stage.id) ? setCurrentStageNameEl : undefined, ellipsis: isCurrent(stage.id) && compressedView, children: !isCurrent(stage.id) && compressedView ? index + 1 : stage.name }, void 0))] }, `stage-${stage.id}`))) }, void 0), _jsx(Flex, { ref: popoverContentRef, children: _jsxs(Popover, { as: StyledStagePopover, show: showPopover && isSmallOrAbove, target: stagesRefs.current[activeStageIndex], id: 'id', ref: setPopoverRef, arrow: true, placement: 'bottom-start', onKeyDown: onKeyDownPopover, modifiers: [
+                    }, children: [stage.complete && _jsx(Icon, { name: 'check' }), !(stage.complete && compressedView) && (_jsx(StyledInnerStage, { ref: isCurrent(stage.id) ? setCurrentStageNameEl : undefined, ellipsis: isCurrent(stage.id) && compressedView, children: !isCurrent(stage.id) && compressedView ? index + 1 : stage.name }))] }, `stage-${stage.id}`))) }), _jsx(Flex, { ref: popoverContentRef, children: _jsxs(Popover, { as: StyledStagePopover, show: showPopover && isSmallOrAbove, target: stagesRefs.current[activeStageIndex], id: 'id', ref: setPopoverRef, arrow: true, placement: 'bottom-start', onKeyDown: onKeyDownPopover, modifiers: [
                         {
                             name: 'flip',
                             options: {
                                 fallbackPlacements: ['bottom-end', 'right', 'left']
                             }
                         }
-                    ], children: [_jsx(StepsContainer, { currentStage: [activeStageObj] }, void 0), _jsx(Button, { variant: 'secondary', onClick: openModal, children: t('stage_see_full_lifecycle') }, void 0)] }, void 0) }, void 0)] }, void 0));
+                    ], children: [_jsx(StepsContainer, { currentStage: [activeStageObj] }), _jsx(Button, { variant: 'secondary', onClick: openModal, children: t('stage_see_full_lifecycle') })] }) })] }));
 };
 export default Stages;
 //# sourceMappingURL=Stages.js.map

package/lib/components/Stages/Stages.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stages.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, useState, useRef, useEffect, useContext, useCallback } from 'react';\nimport { remToPx } from 'polished';\n\nimport {\n  Icon,\n  registerIcon,\n  Flex,\n  ForwardProps,\n  useElement,\n  useOuterEvent,\n  Popover,\n  useI18n,\n  Button,\n  ModalManagerContext,\n  ModalProps,\n  Modal,\n  getFocusables,\n  useBreakpoint,\n  debounce,\n  useTheme\n} from '@pega/cosmos-react-core';\nimport * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';\n\nimport { StagesProps } from './Stages.types';\nimport StepsContainer from './StepsContainer';\nimport { StyledInnerStage, StyledStage, StyledStagePopover, StyledStages } from './Stages.styles';\n\nregisterIcon(checkIcon);\n\nconst Stages: FunctionComponent<StagesProps & ForwardProps> = (props: StagesProps) => {\n  const { current, stages, caseTitle, ...restProps } = props;\n  const t = useI18n();\n\n  const [stagesEl, setStagesEl] = useElement<HTMLDivElement>();\n  const [currentStageNameEl, setCurrentStageNameEl] = useElement<HTMLSpanElement>();\n  const [currentStageButtonEl, setCurrentStageButtonEl] = useElement<HTMLButtonElement>();\n\n  const [activeStageIndex, setActiveStageIndex] = useState<number>(0);\n  const activeStageObj = stages[activeStageIndex];\n  const stagesRefs = useRef<HTMLElement[]>([]);\n  const activeStageEl = stagesRefs.current[activeStageIndex];\n  const { create } = useContext(ModalManagerContext);\n  const [popoverEl, setPopoverRef] = useElement<HTMLElement>();\n  const [showPopover, setShowPopover] = useState(false);\n  const popoverContentRef = useRef(null);\n  const isSmallOrAbove = useBreakpoint('sm');\n  const focusableElements = getFocusables(popoverContentRef);\n\n  const [compressedView, setCompressedView] = useState(false);\n  const [minExpandedWidth, setMinExpandedWidth] = useState(0);\n\n  const resizeObserver = new ResizeObserver(\n    debounce((entries: ResizeObserverEntry[]) => {\n      if (entries[0].contentRect.width > minExpandedWidth) setCompressedView(false);\n    }, 100)\n  );\n\n  const theme = useTheme();\n\n  const intersectionObserver = new IntersectionObserver(\n    entries => {\n      if (entries[0].intersectionRatio < 1) {\n        if (stagesEl) setMinExpandedWidth(Math.max(minExpandedWidth, stagesEl.offsetWidth + 1));\n        setCompressedView(true);\n      }\n    },\n    { root: currentStageButtonEl, rootMargin: `0px -${remToPx(theme.base.spacing)}`, threshold: 1 }\n  );\n\n  useEffect(() => {\n    if (stagesEl && currentStageNameEl) {\n      intersectionObserver.observe(currentStageNameEl as Element);\n      resizeObserver.observe(stagesEl);\n\n      return () => {\n        intersectionObserver.disconnect();\n        resizeObserver.disconnect();\n      };\n    }\n  }, [stagesEl, currentStageNameEl, compressedView]);\n\n  useOuterEvent('mousedown', [popoverEl, activeStageEl], e => {\n    if (showPopover) {\n      setShowPopover(false);\n      e.preventDefault();\n    }\n  });\n\n  const onMouseDown = (ev: React.MouseEvent<HTMLElement>) => {\n    if (!showPopover) ev.preventDefault();\n  };\n\n  const onKeyDown = useCallback(\n    ({ key }: KeyboardEvent) => {\n      if (key === 'Escape') {\n        setShowPopover(false);\n        activeStageEl?.focus();\n      }\n    },\n    [activeStageEl]\n  );\n\n  const onKeyDownPopover = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key === 'Tab' && event.shiftKey) {\n        const firstFocusable = focusableElements[0];\n\n        if (document.activeElement === firstFocusable) {\n          stagesRefs.current[activeStageIndex + 1]?.focus();\n          setShowPopover(false);\n        }\n      }\n\n      if (event.key === 'Tab' && !event.shiftKey) {\n        const lastFocusable = focusableElements[focusableElements.length - 1];\n\n        if (document.activeElement === lastFocusable) {\n          activeStageEl?.focus();\n          setShowPopover(false);\n        }\n      }\n    },\n    [activeStageEl, focusableElements, activeStageIndex]\n  );\n\n  useEffect(() => {\n    document.addEventListener('keydown', onKeyDown);\n    return () => {\n      document.removeEventListener('keydown', onKeyDown);\n    };\n  }, [onKeyDown]);\n\n  useEffect(() => {\n    if (focusableElements.length) focusableElements[0].focus();\n  }, [popoverEl]);\n\n  const [requestDismiss, setRequestDismiss] = useState(false);\n\n  useEffect(() => {\n    if (requestDismiss) {\n      setShowPopover(false);\n      activeStageEl?.focus();\n      setRequestDismiss(false);\n    }\n  }, [activeStageEl, requestDismiss]);\n\n  const RenderModal = ({\n    heading = t('lifecycle', [caseTitle || 'Case'])\n  }: Partial<ModalProps>) => {\n    return (\n      <Modal {...restProps} heading={heading} onRequestDismiss={() => setRequestDismiss(true)}>\n        {stages.map((stage, id) => (\n          <StepsContainer currentStage={[stage]} key={id.toString()} />\n        ))}\n      </Modal>\n    );\n  };\n\n  const openModal = () => {\n    setShowPopover(false);\n    create(RenderModal);\n  };\n\n  const isCurrent = (stageId: string) => current === stageId;\n\n  return (\n    <>\n      <Flex container as={StyledStages} ref={setStagesEl} {...restProps}>\n        {stages.map((stage, index) => (\n          <Flex\n            container={{ justify: 'center', alignItems: 'center' }}\n            as={StyledStage}\n            item={{ grow: compressedView && !isCurrent(stage.id) ? 0 : 1, shrink: 1 }}\n            aria-current={isCurrent(stage.id) ? 'step' : undefined}\n            aria-label={`Stage ${stage.name}`}\n            key={`stage-${stage.id}`}\n            ref={(el: HTMLButtonElement) => {\n              stagesRefs.current[index] = el;\n              if (isCurrent(stage.id)) setCurrentStageButtonEl(el);\n            }}\n            onMouseDown={onMouseDown}\n            onClick={() => {\n              setActiveStageIndex(index);\n              if (isSmallOrAbove) {\n                setShowPopover(!showPopover);\n              } else {\n                openModal();\n              }\n            }}\n          >\n            {stage.complete && <Icon name='check' />}\n            {!(stage.complete && compressedView) && (\n              <StyledInnerStage\n                ref={isCurrent(stage.id) ? setCurrentStageNameEl : undefined}\n                ellipsis={isCurrent(stage.id) && compressedView}\n              >\n                {!isCurrent(stage.id) && compressedView ? index + 1 : stage.name}\n              </StyledInnerStage>\n            )}\n          </Flex>\n        ))}\n      </Flex>\n      <Flex ref={popoverContentRef}>\n        <Popover\n          as={StyledStagePopover}\n          show={showPopover && isSmallOrAbove}\n          target={stagesRefs.current[activeStageIndex]}\n          id='id'\n          ref={setPopoverRef}\n          arrow\n          placement='bottom-start'\n          onKeyDown={onKeyDownPopover}\n          modifiers={[\n            {\n              name: 'flip',\n              options: {\n                fallbackPlacements: ['bottom-end', 'right', 'left']\n              }\n            }\n          ]}\n        >\n          <StepsContainer currentStage={[activeStageObj]} />\n          <Button variant='secondary' onClick={openModal}>\n            {t('stage_see_full_lifecycle')}\n          </Button>\n        </Popover>\n      </Flex>\n    </>\n  );\n};\n\nexport default Stages;\n"]}
+{"version":3,"file":"Stages.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, useState, useRef, useEffect, useContext, useCallback } from 'react';\nimport { remToPx } from 'polished';\n\nimport {\n  Icon,\n  registerIcon,\n  Flex,\n  ForwardProps,\n  useElement,\n  useOuterEvent,\n  Popover,\n  useI18n,\n  Button,\n  ModalManagerContext,\n  ModalProps,\n  Modal,\n  getFocusables,\n  useBreakpoint,\n  debounce,\n  useTheme\n} from '@pega/cosmos-react-core';\nimport * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';\n\nimport { StagesProps } from './Stages.types';\nimport StepsContainer from './StepsContainer';\nimport { StyledInnerStage, StyledStage, StyledStagePopover, StyledStages } from './Stages.styles';\n\nregisterIcon(checkIcon);\n\nconst Stages: FunctionComponent<StagesProps & ForwardProps> = (props: StagesProps) => {\n  const { current, stages, caseTitle, ...restProps } = props;\n  const t = useI18n();\n\n  const [stagesEl, setStagesEl] = useElement<HTMLDivElement>();\n  const [currentStageNameEl, setCurrentStageNameEl] = useElement<HTMLSpanElement>();\n  const [currentStageButtonEl, setCurrentStageButtonEl] = useElement<HTMLButtonElement>();\n\n  const [activeStageIndex, setActiveStageIndex] = useState<number>(0);\n  const activeStageObj = stages[activeStageIndex];\n  const stagesRefs = useRef<HTMLElement[]>([]);\n  const activeStageEl = stagesRefs.current[activeStageIndex];\n  const { create } = useContext(ModalManagerContext);\n  const [popoverEl, setPopoverRef] = useElement<HTMLElement>();\n  const [showPopover, setShowPopover] = useState(false);\n  const popoverContentRef = useRef(null);\n  const isSmallOrAbove = useBreakpoint('sm');\n  const focusableElements = getFocusables(popoverContentRef);\n\n  const [compressedView, setCompressedView] = useState(false);\n  const [minExpandedWidth, setMinExpandedWidth] = useState(0);\n\n  const resizeObserver = new ResizeObserver(\n    debounce((entries: ResizeObserverEntry[]) => {\n      if (entries[0].contentRect.width > minExpandedWidth) setCompressedView(false);\n    }, 100)\n  );\n\n  const theme = useTheme();\n\n  const intersectionObserver = new IntersectionObserver(\n    entries => {\n      if (entries[0].intersectionRatio < 1) {\n        if (stagesEl) setMinExpandedWidth(Math.max(minExpandedWidth, stagesEl.offsetWidth + 1));\n        setCompressedView(true);\n      }\n    },\n    { root: currentStageButtonEl, rootMargin: `0px -${remToPx(theme.base.spacing)}`, threshold: 1 }\n  );\n\n  useEffect(() => {\n    if (stagesEl && currentStageNameEl) {\n      intersectionObserver.observe(currentStageNameEl as Element);\n      resizeObserver.observe(stagesEl);\n\n      return () => {\n        intersectionObserver.disconnect();\n        resizeObserver.disconnect();\n      };\n    }\n  }, [stagesEl, currentStageNameEl, compressedView]);\n\n  useOuterEvent('mousedown', [popoverEl, activeStageEl], e => {\n    if (showPopover) {\n      setShowPopover(false);\n      e.preventDefault();\n    }\n  });\n\n  const onMouseDown = (ev: React.MouseEvent<HTMLElement>) => {\n    if (!showPopover) ev.preventDefault();\n  };\n\n  const onKeyDown = useCallback(\n    ({ key }: KeyboardEvent) => {\n      if (key === 'Escape') {\n        setShowPopover(false);\n        activeStageEl?.focus();\n      }\n    },\n    [activeStageEl]\n  );\n\n  const onKeyDownPopover = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key === 'Tab' && event.shiftKey) {\n        const firstFocusable = focusableElements[0];\n\n        if (document.activeElement === firstFocusable) {\n          stagesRefs.current[activeStageIndex + 1]?.focus();\n          setShowPopover(false);\n        }\n      }\n\n      if (event.key === 'Tab' && !event.shiftKey) {\n        const lastFocusable = focusableElements[focusableElements.length - 1];\n\n        if (document.activeElement === lastFocusable) {\n          activeStageEl?.focus();\n          setShowPopover(false);\n        }\n      }\n    },\n    [activeStageEl, focusableElements, activeStageIndex]\n  );\n\n  useEffect(() => {\n    document.addEventListener('keydown', onKeyDown);\n    return () => {\n      document.removeEventListener('keydown', onKeyDown);\n    };\n  }, [onKeyDown]);\n\n  useEffect(() => {\n    if (focusableElements.length) focusableElements[0].focus();\n  }, [popoverEl]);\n\n  const [requestDismiss, setRequestDismiss] = useState(false);\n\n  useEffect(() => {\n    if (requestDismiss) {\n      setShowPopover(false);\n      activeStageEl?.focus();\n      setRequestDismiss(false);\n    }\n  }, [activeStageEl, requestDismiss]);\n\n  const RenderModal = ({\n    heading = t('lifecycle', [caseTitle || 'Case'])\n  }: Partial<ModalProps>) => {\n    return (\n      <Modal {...restProps} heading={heading} onRequestDismiss={() => setRequestDismiss(true)}>\n        {stages.map((stage, id) => (\n          <StepsContainer currentStage={[stage]} key={id.toString()} />\n        ))}\n      </Modal>\n    );\n  };\n\n  const openModal = () => {\n    setShowPopover(false);\n    create(RenderModal);\n  };\n\n  const isCurrent = (stageId: string) => current === stageId;\n\n  return (\n    <>\n      <Flex container as={StyledStages} ref={setStagesEl} {...restProps}>\n        {stages.map((stage, index) => (\n          <Flex\n            container={{ justify: 'center', alignItems: 'center' }}\n            as={StyledStage}\n            item={{ grow: compressedView && !isCurrent(stage.id) ? 0 : 1, shrink: 1 }}\n            aria-current={isCurrent(stage.id) ? 'step' : undefined}\n            aria-label={`Stage ${stage.name}`}\n            key={`stage-${stage.id}`}\n            ref={(el: HTMLButtonElement) => {\n              stagesRefs.current[index] = el;\n              if (isCurrent(stage.id)) setCurrentStageButtonEl(el);\n            }}\n            onMouseDown={onMouseDown}\n            onClick={() => {\n              setActiveStageIndex(index);\n              if (isSmallOrAbove) {\n                setShowPopover(!showPopover);\n              } else {\n                openModal();\n              }\n            }}\n          >\n            {stage.complete && <Icon name='check' />}\n            {!(stage.complete && compressedView) && (\n              <StyledInnerStage\n                ref={isCurrent(stage.id) ? setCurrentStageNameEl : undefined}\n                ellipsis={isCurrent(stage.id) && compressedView}\n              >\n                {!isCurrent(stage.id) && compressedView ? index + 1 : stage.name}\n              </StyledInnerStage>\n            )}\n          </Flex>\n        ))}\n      </Flex>\n      <Flex ref={popoverContentRef}>\n        <Popover\n          as={StyledStagePopover}\n          show={showPopover && isSmallOrAbove}\n          target={stagesRefs.current[activeStageIndex]}\n          id='id'\n          ref={setPopoverRef}\n          arrow\n          placement='bottom-start'\n          onKeyDown={onKeyDownPopover}\n          modifiers={[\n            {\n              name: 'flip',\n              options: {\n                fallbackPlacements: ['bottom-end', 'right', 'left']\n              }\n            }\n          ]}\n        >\n          <StepsContainer currentStage={[activeStageObj]} />\n          <Button variant='secondary' onClick={openModal}>\n            {t('stage_see_full_lifecycle')}\n          </Button>\n        </Popover>\n      </Flex>\n    </>\n  );\n};\n\nexport default Stages;\n"]}

package/lib/components/Stages/Steps.js

@@ -6,7 +6,7 @@ import { StyledStep, StyledStepsContainer } from './Stages.styles';
 registerIcon(checkIcon, circleSolidIcon);
 const Steps = ({ steps }) => {
     return (_jsx(StyledStepsContainer, { children: steps &&
-            steps.map(({ id, name, complete }) => (_jsx(StyledStep, { complete: complete, children: _jsxs(Grid, { container: { cols: '1.625rem 1fr' }, children: [_jsx(Icon, { name: complete ? 'check' : 'circle-solid' }, void 0), _jsx(Text, { children: name }, void 0)] }, void 0) }, id))) }, void 0));
+            steps.map(({ id, name, complete }) => (_jsx(StyledStep, { complete: complete, children: _jsxs(Grid, { container: { cols: '1.625rem 1fr' }, children: [_jsx(Icon, { name: complete ? 'check' : 'circle-solid' }), _jsx(Text, { children: name })] }) }, id))) }));
 };
 export default Steps;
 //# sourceMappingURL=Steps.js.map

package/lib/components/Stages/Steps.js.map

@@ -1 +1 @@
-{"version":3,"file":"Steps.js","sourceRoot":"","sources":["../../../src/components/Stages/Steps.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACzE,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAC1F,OAAO,KAAK,eAAe,MAAM,qEAAqE,CAAC;AAGvG,OAAO,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAEnE,YAAY,CAAC,SAAS,EAAE,eAAe,CAAC,CAAC;AAMzC,MAAM,KAAK,GAAkC,CAAC,EAAE,KAAK,EAA+B,EAAE,EAAE;IACtF,OAAO,CACL,KAAC,oBAAoB,cAClB,KAAK;YACJ,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CACpC,KAAC,UAAU,IAAU,QAAQ,EAAE,QAAQ,YACrC,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,aACvC,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,cAAc,WAAI,EACnD,KAAC,IAAI,cAAE,IAAI,WAAQ,YACd,IAJQ,EAAE,CAKN,CACd,CAAC,WACiB,CACxB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["import { PropsWithoutRef, FunctionComponent } from 'react';\n\nimport { Icon, registerIcon, Text, Grid } from '@pega/cosmos-react-core';\nimport * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';\nimport * as circleSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/circle-solid.icon';\n\nimport { StepProps } from './Stages.types';\nimport { StyledStep, StyledStepsContainer } from './Stages.styles';\n\nregisterIcon(checkIcon, circleSolidIcon);\n\ninterface StepsProps {\n  steps?: StepProps[];\n}\n\nconst Steps: FunctionComponent<StepsProps> = ({ steps }: PropsWithoutRef<StepsProps>) => {\n  return (\n    <StyledStepsContainer>\n      {steps &&\n        steps.map(({ id, name, complete }) => (\n          <StyledStep key={id} complete={complete}>\n            <Grid container={{ cols: '1.625rem 1fr' }}>\n              <Icon name={complete ? 'check' : 'circle-solid'} />\n              <Text>{name}</Text>\n            </Grid>\n          </StyledStep>\n        ))}\n    </StyledStepsContainer>\n  );\n};\n\nexport default Steps;\n"]}
+{"version":3,"file":"Steps.js","sourceRoot":"","sources":["../../../src/components/Stages/Steps.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACzE,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAC1F,OAAO,KAAK,eAAe,MAAM,qEAAqE,CAAC;AAGvG,OAAO,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAEnE,YAAY,CAAC,SAAS,EAAE,eAAe,CAAC,CAAC;AAMzC,MAAM,KAAK,GAAkC,CAAC,EAAE,KAAK,EAA+B,EAAE,EAAE;IACtF,OAAO,CACL,KAAC,oBAAoB,cAClB,KAAK;YACJ,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CACpC,KAAC,UAAU,IAAU,QAAQ,EAAE,QAAQ,YACrC,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,aACvC,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,cAAc,GAAI,EACnD,KAAC,IAAI,cAAE,IAAI,GAAQ,IACd,IAJQ,EAAE,CAKN,CACd,CAAC,GACiB,CACxB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["import { PropsWithoutRef, FunctionComponent } from 'react';\n\nimport { Icon, registerIcon, Text, Grid } from '@pega/cosmos-react-core';\nimport * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';\nimport * as circleSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/circle-solid.icon';\n\nimport { StepProps } from './Stages.types';\nimport { StyledStep, StyledStepsContainer } from './Stages.styles';\n\nregisterIcon(checkIcon, circleSolidIcon);\n\ninterface StepsProps {\n  steps?: StepProps[];\n}\n\nconst Steps: FunctionComponent<StepsProps> = ({ steps }: PropsWithoutRef<StepsProps>) => {\n  return (\n    <StyledStepsContainer>\n      {steps &&\n        steps.map(({ id, name, complete }) => (\n          <StyledStep key={id} complete={complete}>\n            <Grid container={{ cols: '1.625rem 1fr' }}>\n              <Icon name={complete ? 'check' : 'circle-solid'} />\n              <Text>{name}</Text>\n            </Grid>\n          </StyledStep>\n        ))}\n    </StyledStepsContainer>\n  );\n};\n\nexport default Steps;\n"]}