@pega/cosmos-react-work 2.0.0-dev.19.0 → 2.0.0-dev.21.0

package/lib/components/CaseView/MobileCaseView.js

@@ -19,7 +19,7 @@ StyledMobileCaseViewHeader.defaultProps = defaultThemeProp;
 /** @deprecated */
 const MobileCaseView = (props) => {
     const { tabs, tabContent, title, ...restProps } = props;
-    return (_jsxs(Flex, Object.assign({ container: { direction: 'column' }, as: StyledMobileCaseView }, restProps, { children: [_jsxs(Flex, Object.assign({ container: { direction: 'column' }, item: { shrink: 0 }, as: StyledMobileCaseViewHeader }, { children: [_jsx(Text, Object.assign({ as: 'h1' }, { children: title }), void 0), _jsx(Tabs, Object.assign({}, tabs, { type: 'horizontal', inverted: true }), void 0)] }), void 0), tabContent] }), void 0));
+    return (_jsxs(Flex, { container: { direction: 'column' }, as: StyledMobileCaseView, ...restProps, children: [_jsxs(Flex, { container: { direction: 'column' }, item: { shrink: 0 }, as: StyledMobileCaseViewHeader, children: [_jsx(Text, { as: 'h1', children: title }, void 0), _jsx(Tabs, { ...tabs, type: 'horizontal', inverted: true }, void 0)] }, void 0), tabContent] }, void 0));
 };
 export default MobileCaseView;
 //# sourceMappingURL=MobileCaseView.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MobileCaseView.js","sourceRoot":"","sources":["../../../src/components/CaseView/MobileCaseView.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,IAAI,EACJ,IAAI,EAEJ,IAAI,EACJ,gBAAgB,EAEjB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,kDAAkD,CAAC;AAQ9E,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAG7C,CAAC;AAEF,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,MAAM,CAAA;WAC5C,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK;sBAC5B,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW;;IAE/D,UAAU;eACC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;;CAE/C,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AACrD,0BAA0B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3D,kBAAkB;AAClB,MAAM,cAAc,GAA2C,CAAC,KAA0B,EAAE,EAAE;IAC5F,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAExD,OAAO,CACL,MAAC,IAAI,kBAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,oBAAoB,IAAM,SAAS,eAC/E,MAAC,IAAI,kBACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAClC,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EACnB,EAAE,EAAE,0BAA0B,iBAE9B,KAAC,IAAI,kBAAC,EAAE,EAAC,IAAI,gBAAE,KAAK,YAAQ,EAC5B,KAAC,IAAI,oBAAK,IAAI,IAAE,IAAI,EAAC,YAAY,EAAC,QAAQ,kBAAG,aACxC,EACN,UAAU,aACN,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { FC, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  Flex,\n  Tabs,\n  TabsProps,\n  Text,\n  defaultThemeProp,\n  ForwardProps\n} from '@pega/cosmos-react-core';\nimport { StyledText } from '@pega/cosmos-react-core/lib/components/Text/Text';\n\nexport interface MobileCaseViewProps {\n  title: string;\n  tabs: TabsProps;\n  tabContent: ReactNode;\n}\n\nexport const StyledMobileCaseView = styled.div`\n  min-height: 100vh;\n  background-color: #e9eef3;\n`;\n\nexport const StyledMobileCaseViewHeader = styled.header`\n  color: ${props => props.theme.base.palette.light};\n  background-color: ${props => props.theme.base.palette.interactive};\n\n  ${StyledText} {\n    padding: ${props => props.theme.base.spacing};\n  }\n`;\n\nStyledMobileCaseView.defaultProps = defaultThemeProp;\nStyledMobileCaseViewHeader.defaultProps = defaultThemeProp;\n\n/** @deprecated */\nconst MobileCaseView: FC<ForwardProps & MobileCaseViewProps> = (props: MobileCaseViewProps) => {\n  const { tabs, tabContent, title, ...restProps } = props;\n\n  return (\n    <Flex container={{ direction: 'column' }} as={StyledMobileCaseView} {...restProps}>\n      <Flex\n        container={{ direction: 'column' }}\n        item={{ shrink: 0 }}\n        as={StyledMobileCaseViewHeader}\n      >\n        <Text as='h1'>{title}</Text>\n        <Tabs {...tabs} type='horizontal' inverted />\n      </Flex>\n      {tabContent}\n    </Flex>\n  );\n};\n\nexport default MobileCaseView;\n"]}
+{"version":3,"file":"MobileCaseView.js","sourceRoot":"","sources":["../../../src/components/CaseView/MobileCaseView.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,IAAI,EACJ,IAAI,EAEJ,IAAI,EACJ,gBAAgB,EAEjB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,kDAAkD,CAAC;AAQ9E,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAG7C,CAAC;AAEF,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,MAAM,CAAA;WAC5C,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK;sBAC5B,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW;;IAE/D,UAAU;eACC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;;CAE/C,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AACrD,0BAA0B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3D,kBAAkB;AAClB,MAAM,cAAc,GAA2C,CAAC,KAA0B,EAAE,EAAE;IAC5F,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAExD,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,oBAAoB,KAAM,SAAS,aAC/E,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAClC,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EACnB,EAAE,EAAE,0BAA0B,aAE9B,KAAC,IAAI,IAAC,EAAE,EAAC,IAAI,YAAE,KAAK,WAAQ,EAC5B,KAAC,IAAI,OAAK,IAAI,EAAE,IAAI,EAAC,YAAY,EAAC,QAAQ,iBAAG,YACxC,EACN,UAAU,YACN,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { FC, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  Flex,\n  Tabs,\n  TabsProps,\n  Text,\n  defaultThemeProp,\n  ForwardProps\n} from '@pega/cosmos-react-core';\nimport { StyledText } from '@pega/cosmos-react-core/lib/components/Text/Text';\n\nexport interface MobileCaseViewProps {\n  title: string;\n  tabs: TabsProps;\n  tabContent: ReactNode;\n}\n\nexport const StyledMobileCaseView = styled.div`\n  min-height: 100vh;\n  background-color: #e9eef3;\n`;\n\nexport const StyledMobileCaseViewHeader = styled.header`\n  color: ${props => props.theme.base.palette.light};\n  background-color: ${props => props.theme.base.palette.interactive};\n\n  ${StyledText} {\n    padding: ${props => props.theme.base.spacing};\n  }\n`;\n\nStyledMobileCaseView.defaultProps = defaultThemeProp;\nStyledMobileCaseViewHeader.defaultProps = defaultThemeProp;\n\n/** @deprecated */\nconst MobileCaseView: FC<ForwardProps & MobileCaseViewProps> = (props: MobileCaseViewProps) => {\n  const { tabs, tabContent, title, ...restProps } = props;\n\n  return (\n    <Flex container={{ direction: 'column' }} as={StyledMobileCaseView} {...restProps}>\n      <Flex\n        container={{ direction: 'column' }}\n        item={{ shrink: 0 }}\n        as={StyledMobileCaseViewHeader}\n      >\n        <Text as='h1'>{title}</Text>\n        <Tabs {...tabs} type='horizontal' inverted />\n      </Flex>\n      {tabContent}\n    </Flex>\n  );\n};\n\nexport default MobileCaseView;\n"]}

package/lib/components/CaseView/UtilitiesSummary.js

@@ -9,13 +9,13 @@ export const StyledUtilitiesSummary = styled.div(({ theme }) => {
 });
 const UtilitiesSummary = ({ items = [], ...restProps }) => {
     const t = useI18n();
-    return items.length ? (_jsx(Card, Object.assign({}, restProps, { interactive: true, tabIndex: 0, role: 'button', container: { direction: 'column', alignItems: 'center', gap: 3 }, "aria-label": `${t('utilities_summary')}, ${t('expand_noun', [t('utilities_panel')])}`, as: StyledUtilitiesSummary }, { children: items.map(item => {
-            return (_jsxs(Flex, Object.assign({ container: {
+    return items.length ? (_jsx(Card, { ...restProps, interactive: true, tabIndex: 0, role: 'button', container: { direction: 'column', alignItems: 'center', gap: 3 }, "aria-label": `${t('utilities_summary')}, ${t('expand_noun', [t('utilities_panel')])}`, as: StyledUtilitiesSummary, children: items.map(item => {
+            return (_jsxs(Flex, { container: {
                     direction: 'column',
                     alignItems: 'center',
                     gap: 0.5
-                }, item: { grow: 1 } }, { children: [_jsx(Icon, { name: item.iconName }, void 0), item.count !== undefined && _jsx(Count, Object.assign({ variant: 'default' }, { children: item.count }), void 0)] }), item.iconName));
-        }) }), void 0)) : null;
+                }, 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;
 };
 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,oBACC,SAAS,IACb,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,aAAa,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,EACpF,EAAE,EAAE,sBAAsB,gBAEzB,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAChB,OAAO,CACL,MAAC,IAAI,kBACH,SAAS,EAAE;oBACT,SAAS,EAAE,QAAQ;oBACnB,UAAU,EAAE,QAAQ;oBACpB,GAAG,EAAE,GAAG;iBACT,EACD,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,iBAGjB,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,WAAI,EAC5B,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,KAAC,KAAK,kBAAC,OAAO,EAAC,SAAS,gBAAE,IAAI,CAAC,KAAK,YAAS,MAHrE,IAAI,CAAC,QAAQ,CAIb,CACR,CAAC;QACJ,CAAC,CAAC,YACG,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_noun', [t('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,aAAa,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,EACpF,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_noun', [t('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, Object.assign({ 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 }, void 0), content] }, void 0) }, void 0));
 });
 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":"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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"]}

package/lib/components/ConfigurableLayout/LayoutCell.js

@@ -56,9 +56,9 @@ const LayoutCell = ({ config }) => {
             return `${value[0]}${value[1]}`;
         }
     }, [layoutConfig.minWidth]);
-    return config?.content ? (_jsx(Flex, Object.assign({ as: StyledCell, item: {
+    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 }, void 0)) : 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,kBACH,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,gBAEjB,MAAM,CAAC,OAAO,YACV,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,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"]}

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, Object.assign({}, restProps, { ref: ref }, { children: _jsx(CardContent, { children: _jsxs(Flex, Object.assign({ container: { gap: 3, direction: 'column' } }, { children: [_jsx(Text, Object.assign({ variant: 'h2' }, { children: title }), void 0), _jsxs(Flex, Object.assign({ container: { gap: 1, direction: 'column' } }, { children: [_jsx(Text, Object.assign({ variant: 'h3' }, { children: t('confirmation_details') }), void 0), details] }), void 0), whatsNext && (_jsxs(Flex, Object.assign({ container: { gap: 1, direction: 'column' } }, { children: [_jsx(Text, Object.assign({ variant: 'h3' }, { children: t('confirmation_whats_next') }), void 0), _jsx(StyledWhatsNextList, { items: whatsNext, as: StyledWhatsNextList }, void 0)] }), void 0)), tasks && (_jsxs(Flex, Object.assign({ container: { gap: 1, direction: 'column' } }, { children: [_jsx(Text, Object.assign({ variant: 'h3' }, { children: t('confirmation_open_tasks') }), void 0), tasks] }), void 0)), onClose && (_jsx(Flex, Object.assign({ container: { justify: 'end' } }, { children: _jsx(Button, Object.assign({ 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 }, 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));
 });
 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,EAEjB,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,oBAAK,SAAS,IAAE,GAAG,EAAE,GAAG,gBAC3B,KAAC,WAAW,cACV,MAAC,IAAI,kBAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,iBAC9C,KAAC,IAAI,kBAAC,OAAO,EAAC,IAAI,gBAAE,KAAK,YAAQ,EACjC,MAAC,IAAI,kBAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,iBAC9C,KAAC,IAAI,kBAAC,OAAO,EAAC,IAAI,gBAAE,CAAC,CAAC,sBAAsB,CAAC,YAAQ,EACpD,OAAO,aACH,EACN,SAAS,IAAI,CACZ,MAAC,IAAI,kBAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,iBAC9C,KAAC,IAAI,kBAAC,OAAO,EAAC,IAAI,gBAAE,CAAC,CAAC,yBAAyB,CAAC,YAAQ,EACxD,KAAC,mBAAmB,IAAC,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,mBAAmB,WAAI,aAC7D,CACR,EACA,KAAK,IAAI,CACR,MAAC,IAAI,kBAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,iBAC9C,KAAC,IAAI,kBAAC,OAAO,EAAC,IAAI,gBAAE,CAAC,CAAC,yBAAyB,CAAC,YAAQ,EACvD,KAAK,aACD,CACR,EACA,OAAO,IAAI,CACV,KAAC,IAAI,kBAAC,SAAS,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,gBACjC,KAAC,MAAM,kBAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAC,SAAS,gBACxC,CAAC,CAAC,MAAM,CAAC,YACH,YACJ,CACR,aACI,WACK,YACT,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} from '@pega/cosmos-react-core';\n\nconst StyledWhatsNextList = styled(UnorderedList)`\n  padding-inline-start: 0;\n`;\n\nStyledWhatsNextList.defaultProps = defaultThemeProp;\n\nexport interface ConfirmationProps {\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,EAEjB,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} from '@pega/cosmos-react-core';\n\nconst StyledWhatsNextList = styled(UnorderedList)`\n  padding-inline-start: 0;\n`;\n\nStyledWhatsNextList.defaultProps = defaultThemeProp;\n\nexport interface ConfirmationProps {\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,15 +24,15 @@ 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, Object.assign({ container: {
+    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: {
                     cols: 'repeat(auto-fit, minmax(30ch, 1fr))',
                     alignItems: 'start',
                     alignContent: 'start',
                     gap: 2
-                } }, { children: regions?.map((colItem, i) => {
+                }, children: regions?.map((colItem, i) => {
                     // eslint-disable-next-line react/no-array-index-key
                     return _jsx("div", { children: colItem }, i);
-                }) }), void 0))] }, void 0));
+                }) }, 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,EAElB,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,kBACH,SAAS,EAAE;oBACT,IAAI,EAAE,qCAAqC;oBAC3C,UAAU,EAAE,OAAO;oBACnB,YAAY,EAAE,OAAO;oBACrB,GAAG,EAAE,CAAC;iBACP,gBAEA,OAAO,EAAE,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE;oBAC3B,oDAAoD;oBACpD,OAAO,wBAAc,OAAO,IAAX,CAAC,CAAiB,CAAC;gBACtC,CAAC,CAAC,YACG,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} from '@pega/cosmos-react-core';\n\nexport interface DetailsProps extends BaseProps {\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,EAElB,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} from '@pega/cosmos-react-core';\n\nexport interface DetailsProps extends BaseProps {\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, Object.assign({ 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 }, void 0), visual: visual }, void 0) }, void 0), !!fields.length && (_jsx(CardContent, { children: _jsx(FieldValueList, { fields: fields }, void 0) }, void 0))] }, void 0));
 });
 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,EACR,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,kBAAC,GAAG,EAAE,GAAG,iBACrB,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,aACa,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  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 {\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,EACR,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  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 {\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

@@ -19,7 +19,7 @@ const Filter = ({ onFilterChange, onClearFilter, name, expanded = true, ...contr
                 SelectFilterGroup = RadioButtonGroup;
                 SelectFilter = RadioButton;
             }
-            filterControl = (_jsx(SelectFilterGroup, Object.assign({ label: name, labelHidden: true, onChange: e => {
+            filterControl = (_jsx(SelectFilterGroup, { label: name, labelHidden: true, onChange: e => {
                     const item = items.find((x) => x.id === e.target.id);
                     if (!item)
                         return;
@@ -29,17 +29,17 @@ const Filter = ({ onFilterChange, onClearFilter, name, expanded = true, ...contr
                         type: control.type,
                         value: newItem
                     });
-                } }, { children: control.items.map((filterOption) => {
+                }, children: control.items.map((filterOption) => {
                     if (filterOption.checked)
                         filterActive = true;
                     return (_jsx(SelectFilter, { id: filterOption.id, name: filterOption.name, label: filterOption.label, checked: filterOption.checked }, filterOption.id));
-                }) }), void 0));
+                }) }, void 0));
             break;
         }
         default:
             filterControl = null;
     }
-    return (_jsxs(StyledFilter, { children: [_jsxs(Flex, Object.assign({ container: { justify: 'between' } }, { children: [_jsxs(Flex, Object.assign({ 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, Object.assign({ variant: 'h3', as: 'span' }, { children: name }), void 0)] }), void 0), filterActive && (_jsx(Button, Object.assign({ variant: 'link', onClick: () => onClearFilter?.(name) }, { children: t('clear') }), void 0))] }), void 0), _jsx(ExpandCollapse, Object.assign({ 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' }, 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));
 };
 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, Object.assign({ as: StyledSearchResult, container: { direction: 'column', gap: 1 } }, { children: [_jsxs(Flex, Object.assign({ container: { direction: 'column-reverse' } }, { children: [_jsx(Text, Object.assign({ variant: 'h2' }, { children: _jsx(Link, Object.assign({}, link, { children: title }), void 0) }), void 0), _jsx(Text, Object.assign({ variant: 'secondary', as: 'div' }, { children: id }), void 0)] }), void 0), description && _jsx(StyledDescription, Object.assign({ 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 }, 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));
 };
 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,kBAAC,EAAE,EAAE,kBAAkB,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,iBACtE,MAAC,IAAI,kBAAC,SAAS,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,iBAC9C,KAAC,IAAI,kBAAC,OAAO,EAAC,IAAI,gBAChB,KAAC,IAAI,oBAAK,IAAI,cAAG,KAAK,YAAQ,YACzB,EACP,KAAC,IAAI,kBAAC,OAAO,EAAC,WAAW,EAAC,EAAE,EAAC,KAAK,gBAC/B,EAAE,YACE,aACF,EACN,WAAW,IAAI,KAAC,iBAAiB,kBAAC,WAAW,EAAC,GAAG,gBAAE,WAAW,YAAqB,EACnF,CAAC,CAAC,IAAI,CAAC,MAAM,IAAI,KAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,WAAI,aACtC,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,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"]}

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, Object.assign({ heading: t('filters'), autoWidth: true }, { children: _jsxs(Grid, Object.assign({ as: StyledModalFilterContent, container: { rowGap: 2 } }, { children: [_jsxs(Flex, Object.assign({ container: { gap: 1, alignItems: 'center' } }, { children: [_jsx(Text, Object.assign({ as: StyledCountText, variant: 'secondary' }, { children: t('count_results', [count], { count }) }), void 0), onClearAllFilters && !!activeFilters.length && (_jsx(Button, Object.assign({ variant: 'link', onClick: onClearAllFilters }, { children: t('clear_all') }), void 0))] }), void 0), !!activeFilters.length && (_jsx(Flex, Object.assign({ as: StyledSelectedFilters, container: { gap: 1 } }, { children: activeFilters.map(filter => {
-                        return (_jsx(Selectable, Object.assign({ id: filter.id, onRemove: () => onFilterChange?.({
+    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('count_results', [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(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) => {
-                        return (_jsx(Filter, Object.assign({ onFilterChange: onFilterChange, onClearFilter: onClearFilter }, filter), filter.name));
-                    }) }, void 0)] }), void 0) }), void 0));
+                            }), children: `${filter.groupName}: ${filter.name}` }, filter.id));
+                    }) }, void 0)), _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();
@@ -66,7 +66,7 @@ const SearchResults = forwardRef(({ results, searchInputProps, count, filters, o
         if (isMedium && filtersMethods.current)
             filtersMethods.current.dismiss();
     }, [isMedium]);
-    return (_jsx(Card, { children: _jsx(CardContent, { children: _jsxs(Grid, Object.assign({}, restProps, { as: StyledSearchResults, ref: ref, md: filters.length
+    return (_jsx(Card, { children: _jsx(CardContent, { children: _jsxs(Grid, { ...restProps, as: StyledSearchResults, ref: ref, md: filters.length
                     ? {
                         container: {
                             cols: '15rem auto',
@@ -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, Object.assign({ item: { area: 'search' } }, { children: _jsx(SearchInput, Object.assign({}, searchInputProps, { placeholder: placeholder }), void 0) }), void 0), isMedium && !!filters.length && (_jsxs(Grid, Object.assign({ item: { area: 'filters', alignSelf: 'start' } }, { children: [_jsxs(Flex, Object.assign({ as: StyledFilterTitle, container: { justify: 'between' } }, { children: [_jsx(Text, Object.assign({ variant: 'h2' }, { children: t('filters') }), void 0), onClearAllFilters && !!activeFilters.length && (_jsx(Button, Object.assign({ variant: 'link', onClick: onClearAllFilters }, { children: t('clear_all') }), void 0))] }), void 0), filters.map((filter) => {
-                                return (_jsx(Filter, Object.assign({ onFilterChange: onFilterChange, onClearFilter: onClearFilter }, filter), filter.name));
-                            })] }), void 0)), _jsxs(Grid, Object.assign({ item: { area: 'results' }, container: {
+                    : {}, 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) => {
+                                return (_jsx(Filter, { onFilterChange: onFilterChange, onClearFilter: onClearFilter, ...filter }, filter.name));
+                            })] }, void 0)), _jsxs(Grid, { item: { area: 'results' }, container: {
                             alignItems: 'center',
                             rowGap: 2,
                             rows: 'auto 1fr',
                             areas: '"meta" "items"'
-                        } }, { children: [_jsxs(Grid, Object.assign({ item: { area: 'meta' }, container: { rowGap: 1 } }, { children: [_jsxs(Flex, Object.assign({ container: { justify: 'between', alignItems: 'center' } }, { children: [_jsx(Text, Object.assign({ as: StyledCountText, variant: 'secondary' }, { children: searchInputProps.value !== '' || results.length > 0
+                        }, 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('count_results', [results.length], { count: results.length })
-                                                    : '' }), void 0), !isMedium && !!filters.length && (_jsxs(Button, Object.assign({ 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, Object.assign({ as: StyledSelectedFilters, container: { gap: 1 } }, { children: activeFilters.map(filter => {
-                                            return (_jsx(Selectable, Object.assign({ id: filter.id, onRemove: () => onFilterChange?.({
+                                                    : '' }, 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 => {
+                                            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, Object.assign({ item: { area: 'items', alignSelf: results.length ? 'start' : 'center' }, container: { rowGap: 4 } }, { children: results.length ? (results.map((result) => {
-                                    return _jsx(SearchResult, Object.assign({}, result), result.id);
-                                })) : (_jsx(Grid, Object.assign({ item: { alignSelf: 'stretch' } }, { children: _jsx(EmptyState, { message: searchInputProps.value === '' ? t('empty_search') : undefined }, void 0) }), void 0)) }), void 0), onShowMore && (_jsx(Flex, Object.assign({ container: { justify: 'center' } }, { children: _jsx(Button, Object.assign({ variant: 'link', onClick: onShowMore }, { children: t('show_more') }), void 0) }), void 0))] }), void 0)] }), void 0) }, void 0) }, void 0));
+                                                }), 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) => {
+                                    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));
 });
 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('count_results', [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('count_results', [results.length], { count: results.length })\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('count_results', [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('count_results', [results.length], { count: results.length })\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,14 +97,14 @@ const Stages = (props) => {
         }
     }, [activeStageEl, requestDismiss]);
     const RenderModal = ({ heading = t('lifecycle', [caseTitle || 'Case']) }) => {
-        return (_jsx(Modal, Object.assign({}, 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()))) }, void 0));
     };
     const openModal = () => {
         setShowPopover(false);
         create(RenderModal);
     };
     const isCurrent = (stageId) => current === stageId;
-    return (_jsxs(_Fragment, { children: [_jsx(Flex, Object.assign({ container: true, as: StyledStages, ref: setStagesEl }, restProps, { children: stages.map((stage, index) => (_jsxs(Flex, Object.assign({ container: { justify: 'center', alignItems: 'center' }, as: StyledStage, item: { grow: compressedView && !isCurrent(stage.id) ? 0 : 1, shrink: 1 }, "aria-current": isCurrent(stage.id) ? 'step' : undefined, "aria-label": `Stage ${stage.name}`, ref: (el) => {
+    return (_jsxs(_Fragment, { children: [_jsx(Flex, { container: true, as: StyledStages, ref: setStagesEl, ...restProps, children: stages.map((stage, index) => (_jsxs(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledStage, item: { grow: compressedView && !isCurrent(stage.id) ? 0 : 1, shrink: 1 }, "aria-current": isCurrent(stage.id) ? 'step' : undefined, "aria-label": `Stage ${stage.name}`, ref: (el) => {
                         stagesRefs.current[index] = el;
                         if (isCurrent(stage.id))
                             setCurrentStageButtonEl(el);
@@ -116,14 +116,14 @@ const Stages = (props) => {
                         else {
                             openModal();
                         }
-                    } }, { children: [stage.complete && _jsx(Icon, { name: 'check' }, void 0), !(stage.complete && compressedView) && (_jsx(StyledInnerStage, Object.assign({ 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, Object.assign({ ref: popoverContentRef }, { children: _jsxs(Popover, Object.assign({ 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' }, 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: [
                         {
                             name: 'flip',
                             options: {
                                 fallbackPlacements: ['bottom-end', 'right', 'left']
                             }
                         }
-                    ] }, { children: [_jsx(StepsContainer, { currentStage: [activeStageObj] }, void 0), _jsx(Button, Object.assign({ variant: 'secondary', onClick: openModal }, { children: t('stage_see_full_lifecycle') }), void 0)] }), void 0) }), void 0)] }, void 0));
+                    ], 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));
 };
 export default Stages;
 //# sourceMappingURL=Stages.js.map