@pega/cosmos-react-work 5.0.0-dev.5.0 → 5.0.0-dev.6.1

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

@@ -1 +1 @@
-{"version":3,"file":"CaseView.types.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode, MouseEvent, MouseEventHandler } from 'react';\n\nimport {\n  Tab,\n  NoChildrenProp,\n  FieldValueListItemProps,\n  ForwardProps,\n  MenuItemProps,\n  Action,\n  BaseProps,\n  TestIdProp\n} from '@pega/cosmos-react-core';\n\nimport type { getCaseViewTestIds } from './CaseView.test-ids';\n\nexport type CaseSummaryFieldsProps = {\n  primary?: SummaryField[];\n  secondary?: SummaryField[];\n  inSummaryPanel?: boolean;\n};\n\nexport type SummaryField = {\n  name: FieldValueListItemProps['name'];\n  value: FieldValueListItemProps['value'];\n  simpleValue?: string | number | ReactNode;\n  variant?: FieldValueListItemProps['variant'];\n};\n\nexport type UtilitySummaryItem = {\n  iconName: string;\n  name: string;\n  count?: number;\n  onClick?: MouseEventHandler<HTMLButtonElement>;\n};\n\nexport interface CaseViewProps extends NoChildrenProp, BaseProps, TestIdProp {\n  /** A unique identifier for the case instance. */\n  caseId: string;\n\n  /** Text to quickly identify a case instance. */\n  heading: string;\n\n  /** Supplemental text to identify a case instance. */\n  subheading?: string;\n\n  /** @internal */\n  caseLink?: CaseViewContextValue['caseLink'];\n\n  /** A set of Link props representing the case parents, rendered as Breadcrumbs. */\n  parentCases?: MenuItemProps[];\n\n  /** An icon name to render as a visual in the case view header. */\n  icon?: string;\n\n  /** Indicates if the current user is following the case. This should be updated based on onFollowedChange. */\n  followed?: boolean;\n\n  /** Called when user chooses to follow or unfollow the case. Use this to update followed. */\n  onFollowedChange?: (following: boolean) => void;\n\n  /** Case level actions available in an action menu. */\n  actions?: Action[];\n\n  /** Visually promoted case level actions available outside the menu. */\n  promotedActions?: Action[];\n\n  /** A callback for when the edit button is clicked */\n  onEdit?: () => void;\n\n  /** Field data to render in summary areas. */\n  summaryFields: CaseSummaryFieldsProps;\n\n  /**\n   * Determines the layout state of the summary region.\n   * @default true\n   */\n  summaryExpanded?: boolean;\n\n  /** Callback to toggle the case summary's layout. */\n  onToggleSummary?: () => void;\n\n  /** An object handling the rendering and functionality of the Tabs in CaseSummary. */\n  tabs: {\n    items: Tab[];\n    onClick: (id: string, event?: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;\n    currentTabId: string;\n  };\n\n  /** A region within the center column that is controlled by tabs in CaseSummary. */\n  tabContent?: { content: ReactNode; id: string }[];\n\n  /** A region to hold a Stages component. */\n  stages?: ReactNode;\n\n  /** A region to hold a Tasks component. */\n  tasks?: ReactNode;\n\n  /** A region above the center column to display banners. */\n  banners?: ReactNode;\n\n  /** A region to the right reserved for persistent utilities. */\n  persistentUtility?: { content: ReactNode; title: string };\n\n  /** Provide an instance of IntelligentGuidance to be rendered for a case. */\n  intelligentGuidance?: ReactNode;\n\n  /** A region for case widgets. */\n  utilities?: ReactNode;\n\n  /** An indicator of case widgets when the utilities are collapsed. */\n  utilitiesSummaryItems?: UtilitySummaryItem[];\n\n  /**\n   * Determines the layout state of the utilities.\n   * @default true\n   */\n  utilitiesExpanded?: boolean;\n\n  /** Callback to toggle the utilities. */\n  onToggleUtilities?: () => void;\n\n  /**\n   * Indicates CaseView is rendered within a CasePreview.\n   * @internal\n   */\n  isPreview?: boolean;\n}\n\nexport interface CaseViewContextValue\n  extends Pick<\n    CaseViewProps,\n    | 'caseId'\n    | 'heading'\n    | 'subheading'\n    | 'parentCases'\n    | 'icon'\n    | 'followed'\n    | 'onFollowedChange'\n    | 'actions'\n    | 'promotedActions'\n    | 'onEdit'\n    | 'tabs'\n    | 'summaryExpanded'\n    | 'summaryFields'\n    | 'onToggleSummary'\n    | 'utilitiesExpanded'\n    | 'stages'\n    | 'tasks'\n    | 'persistentUtility'\n    | 'intelligentGuidance'\n  > {\n  testIds: Partial<ReturnType<typeof getCaseViewTestIds>>;\n  aboveSM: boolean;\n  aboveMD: boolean;\n  aboveLG: boolean;\n  aboveXL: boolean;\n  isPreview: boolean;\n  caseLink?: { href: string } & ForwardProps;\n}\n"]}
+{"version":3,"file":"CaseView.types.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactNode, MouseEvent, MouseEventHandler } from 'react';\n\nimport type {\n  Tab,\n  NoChildrenProp,\n  FieldValueListItemProps,\n  ForwardProps,\n  MenuItemProps,\n  Action,\n  BaseProps,\n  TestIdProp\n} from '@pega/cosmos-react-core';\n\nimport type { getCaseViewTestIds } from './CaseView.test-ids';\n\nexport type CaseSummaryFieldsProps = {\n  primary?: SummaryField[];\n  secondary?: SummaryField[];\n  inSummaryPanel?: boolean;\n};\n\nexport type SummaryField = {\n  name: FieldValueListItemProps['name'];\n  value: FieldValueListItemProps['value'];\n  simpleValue?: string | number | ReactNode;\n  variant?: FieldValueListItemProps['variant'];\n};\n\nexport type UtilitySummaryItem = {\n  iconName: string;\n  name: string;\n  count?: number;\n  onClick?: MouseEventHandler<HTMLButtonElement>;\n};\n\nexport interface CaseViewProps extends NoChildrenProp, BaseProps, TestIdProp {\n  /** A unique identifier for the case instance. */\n  caseId: string;\n\n  /** Text to quickly identify a case instance. */\n  heading: string;\n\n  /** Supplemental text to identify a case instance. */\n  subheading?: string;\n\n  /** @internal */\n  caseLink?: CaseViewContextValue['caseLink'];\n\n  /** A set of Link props representing the case parents, rendered as Breadcrumbs. */\n  parentCases?: MenuItemProps[];\n\n  /** An icon name to render as a visual in the case view header. */\n  icon?: string;\n\n  /** Indicates if the current user is following the case. This should be updated based on onFollowedChange. */\n  followed?: boolean;\n\n  /** Called when user chooses to follow or unfollow the case. Use this to update followed. */\n  onFollowedChange?: (following: boolean) => void;\n\n  /** Case level actions available in an action menu. */\n  actions?: Action[];\n\n  /** Visually promoted case level actions available outside the menu. */\n  promotedActions?: Action[];\n\n  /** A callback for when the edit button is clicked */\n  onEdit?: () => void;\n\n  /** Field data to render in summary areas. */\n  summaryFields: CaseSummaryFieldsProps;\n\n  /**\n   * Determines the layout state of the summary region.\n   * @default true\n   */\n  summaryExpanded?: boolean;\n\n  /** Callback to toggle the case summary's layout. */\n  onToggleSummary?: () => void;\n\n  /** An object handling the rendering and functionality of the Tabs in CaseSummary. */\n  tabs: {\n    items: Tab[];\n    onClick: (id: string, event?: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;\n    currentTabId: string;\n  };\n\n  /** A region within the center column that is controlled by tabs in CaseSummary. */\n  tabContent?: { content: ReactNode; id: string }[];\n\n  /** A region to hold a Stages component. */\n  stages?: ReactNode;\n\n  /** A region to hold a Tasks component. */\n  tasks?: ReactNode;\n\n  /** A region above the center column to display banners. */\n  banners?: ReactNode;\n\n  /** A region to the right reserved for persistent utilities. */\n  persistentUtility?: { content: ReactNode; title: string };\n\n  /** Provide an instance of IntelligentGuidance to be rendered for a case. */\n  intelligentGuidance?: ReactNode;\n\n  /** A region for case widgets. */\n  utilities?: ReactNode;\n\n  /** An indicator of case widgets when the utilities are collapsed. */\n  utilitiesSummaryItems?: UtilitySummaryItem[];\n\n  /**\n   * Determines the layout state of the utilities.\n   * @default true\n   */\n  utilitiesExpanded?: boolean;\n\n  /** Callback to toggle the utilities. */\n  onToggleUtilities?: () => void;\n\n  /**\n   * Indicates CaseView is rendered within a CasePreview.\n   * @internal\n   */\n  isPreview?: boolean;\n}\n\nexport interface CaseViewContextValue\n  extends Pick<\n    CaseViewProps,\n    | 'caseId'\n    | 'heading'\n    | 'subheading'\n    | 'parentCases'\n    | 'icon'\n    | 'followed'\n    | 'onFollowedChange'\n    | 'actions'\n    | 'promotedActions'\n    | 'onEdit'\n    | 'tabs'\n    | 'summaryExpanded'\n    | 'summaryFields'\n    | 'onToggleSummary'\n    | 'utilitiesExpanded'\n    | 'stages'\n    | 'tasks'\n    | 'persistentUtility'\n    | 'intelligentGuidance'\n  > {\n  testIds: Partial<ReturnType<typeof getCaseViewTestIds>>;\n  aboveSM: boolean;\n  aboveMD: boolean;\n  aboveLG: boolean;\n  aboveXL: boolean;\n  isPreview: boolean;\n  caseLink?: { href: string } & ForwardProps;\n}\n"]}

package/lib/components/CaseView/UtilitiesSummary.d.ts

@@ -1,5 +1,5 @@
-import { FunctionComponent } from 'react';
-import { CaseViewProps } from './CaseView.types';
+import type { FunctionComponent } from 'react';
+import type { CaseViewProps } from './CaseView.types';
 export interface UtilitiesSummaryProps {
     items?: CaseViewProps['utilitiesSummaryItems'];
 }

package/lib/components/CaseView/UtilitiesSummary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UtilitiesSummary.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/UtilitiesSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAe1C,OAAO,EAAE,aAAa,EAAsB,MAAM,kBAAkB,CAAC;AAErE,MAAM,WAAW,qBAAqB;IACpC,KAAK,CAAC,EAAE,aAAa,CAAC,uBAAuB,CAAC,CAAC;CAChD;AAED,eAAO,MAAM,sBAAsB,yGAIjC,CAAC;AAkEH,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,CAe9D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"UtilitiesSummary.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/UtilitiesSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAe/C,OAAO,KAAK,EAAE,aAAa,EAAsB,MAAM,kBAAkB,CAAC;AAE1E,MAAM,WAAW,qBAAqB;IACpC,KAAK,CAAC,EAAE,aAAa,CAAC,uBAAuB,CAAC,CAAC;CAChD;AAED,eAAO,MAAM,sBAAsB,yGAIjC,CAAC;AAkEH,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,CAe9D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

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,EACL,MAAM,EACN,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,OAAO,EACP,kBAAkB,EAClB,UAAU,EACX,MAAM,yBAAyB,CAAC;AAQjC,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE;IACpD,OAAO,GAAG,CAAA;;GAET,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,0BAA0B,GAAG,MAAM,CAAC,MAAM,CAAC,CAC/C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;qBACC,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BpC,CACF,CAAC;AAEF,MAAM,cAAc,GAA0C,CAAC,EAC7D,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,OAAO,EACR,EAAE,EAAE;IACH,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,UAAU,EAAe,CAAC;IAC9E,OAAO,CACL,8BACE,MAAC,IAAI,IACH,SAAS,EAAE;oBACT,SAAS,EAAE,QAAQ;oBACnB,UAAU,EAAE,QAAQ;oBACpB,GAAG,EAAE,GAAG;iBACT,EACD,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,qBAAqB,EAC1B,EAAE,EAAE,0BAA0B,aAE9B,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,GAAI,EACvB,KAAK,KAAK,SAAS,IAAI,KAAC,KAAK,mCAAc,KAAK,GAAS,EAC1D,KAAC,kBAAkB,IAAC,IAAI,EAAC,UAAU,YAAE,GAAG,KAAK,IAAI,EAAE,IAAI,IAAI,EAAE,GAAsB,IAC9E,EAEP,KAAC,OAAO,IAAC,MAAM,EAAE,kBAAkB,EAAE,SAAS,EAAC,MAAM,EAAC,SAAS,EAAC,MAAM,YACnE,IAAI,GACG,IACT,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,gBAAgB,GAA6C,CAAC,EAAE,KAAK,GAAG,EAAE,EAAE,EAAE,EAAE;IACpF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,EACxD,EAAE,EAAE,sBAAsB,gBACd,CAAC,CAAC,mBAAmB,CAAC,EAClC,IAAI,EAAC,MAAM,YAEV,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACjB,eAAC,cAAc,OAAK,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,QAAQ,GAAI,CACjD,CAAC,GACG,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import { FunctionComponent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Card,\n  Count,\n  Flex,\n  Icon,\n  Tooltip,\n  useI18n,\n  VisuallyHiddenText,\n  useElement\n} from '@pega/cosmos-react-core';\n\nimport { CaseViewProps, UtilitySummaryItem } from './CaseView.types';\n\nexport interface UtilitiesSummaryProps {\n  items?: CaseViewProps['utilitiesSummaryItems'];\n}\n\nexport const StyledUtilitiesSummary = styled.div(() => {\n  return css`\n    width: 2.75rem;\n  `;\n});\n\nconst StyledUtilitySummaryButton = styled(Button)(\n  ({ theme }) => css`\n    padding-block: ${theme.base.spacing};\n    padding-inline: 0;\n    width: 100%;\n    color: currentColor;\n    border-radius: unset;\n    border: none;\n\n    &:hover {\n      color: currentColor;\n    }\n\n    &:focus {\n      z-index: 1;\n    }\n\n    &:first-child {\n      border-start-start-radius: inherit;\n      border-start-end-radius: inherit;\n    }\n\n    &:last-child {\n      border-end-start-radius: inherit;\n      border-end-end-radius: inherit;\n    }\n\n    & + & {\n      margin: 0;\n    }\n  `\n);\n\nconst UtilitySummary: FunctionComponent<UtilitySummaryItem> = ({\n  name,\n  iconName,\n  count,\n  onClick\n}) => {\n  const [utilSummaryTooltip, setUtilSummaryTooltip] = useElement<HTMLElement>();\n  return (\n    <>\n      <Flex\n        container={{\n          direction: 'column',\n          alignItems: 'center',\n          gap: 0.5\n        }}\n        onClick={onClick}\n        ref={setUtilSummaryTooltip}\n        as={StyledUtilitySummaryButton}\n      >\n        <Icon name={iconName} />\n        {count !== undefined && <Count aria-hidden>{count}</Count>}\n        <VisuallyHiddenText role='listitem'>{`${count ?? ''} ${name}`}</VisuallyHiddenText>\n      </Flex>\n\n      <Tooltip target={utilSummaryTooltip} showDelay='none' hideDelay='none'>\n        {name}\n      </Tooltip>\n    </>\n  );\n};\n\nconst UtilitiesSummary: FunctionComponent<UtilitiesSummaryProps> = ({ items = [] }) => {\n  const t = useI18n();\n\n  return (\n    <Card\n      container={{ direction: 'column', alignItems: 'center' }}\n      as={StyledUtilitiesSummary}\n      aria-label={t('utilities_summary')}\n      role='list'\n    >\n      {items.map(item => (\n        <UtilitySummary {...item} key={item.iconName} />\n      ))}\n    </Card>\n  );\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,EACL,MAAM,EACN,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,OAAO,EACP,kBAAkB,EAClB,UAAU,EACX,MAAM,yBAAyB,CAAC;AAQjC,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE;IACpD,OAAO,GAAG,CAAA;;GAET,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,0BAA0B,GAAG,MAAM,CAAC,MAAM,CAAC,CAC/C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;qBACC,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BpC,CACF,CAAC;AAEF,MAAM,cAAc,GAA0C,CAAC,EAC7D,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,OAAO,EACR,EAAE,EAAE;IACH,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,UAAU,EAAe,CAAC;IAC9E,OAAO,CACL,8BACE,MAAC,IAAI,IACH,SAAS,EAAE;oBACT,SAAS,EAAE,QAAQ;oBACnB,UAAU,EAAE,QAAQ;oBACpB,GAAG,EAAE,GAAG;iBACT,EACD,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,qBAAqB,EAC1B,EAAE,EAAE,0BAA0B,aAE9B,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,GAAI,EACvB,KAAK,KAAK,SAAS,IAAI,KAAC,KAAK,mCAAc,KAAK,GAAS,EAC1D,KAAC,kBAAkB,IAAC,IAAI,EAAC,UAAU,YAAE,GAAG,KAAK,IAAI,EAAE,IAAI,IAAI,EAAE,GAAsB,IAC9E,EAEP,KAAC,OAAO,IAAC,MAAM,EAAE,kBAAkB,EAAE,SAAS,EAAC,MAAM,EAAC,SAAS,EAAC,MAAM,YACnE,IAAI,GACG,IACT,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,gBAAgB,GAA6C,CAAC,EAAE,KAAK,GAAG,EAAE,EAAE,EAAE,EAAE;IACpF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,EACxD,EAAE,EAAE,sBAAsB,gBACd,CAAC,CAAC,mBAAmB,CAAC,EAClC,IAAI,EAAC,MAAM,YAEV,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACjB,eAAC,cAAc,OAAK,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,QAAQ,GAAI,CACjD,CAAC,GACG,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import type { FunctionComponent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Card,\n  Count,\n  Flex,\n  Icon,\n  Tooltip,\n  useI18n,\n  VisuallyHiddenText,\n  useElement\n} from '@pega/cosmos-react-core';\n\nimport type { CaseViewProps, UtilitySummaryItem } from './CaseView.types';\n\nexport interface UtilitiesSummaryProps {\n  items?: CaseViewProps['utilitiesSummaryItems'];\n}\n\nexport const StyledUtilitiesSummary = styled.div(() => {\n  return css`\n    width: 2.75rem;\n  `;\n});\n\nconst StyledUtilitySummaryButton = styled(Button)(\n  ({ theme }) => css`\n    padding-block: ${theme.base.spacing};\n    padding-inline: 0;\n    width: 100%;\n    color: currentColor;\n    border-radius: unset;\n    border: none;\n\n    &:hover {\n      color: currentColor;\n    }\n\n    &:focus {\n      z-index: 1;\n    }\n\n    &:first-child {\n      border-start-start-radius: inherit;\n      border-start-end-radius: inherit;\n    }\n\n    &:last-child {\n      border-end-start-radius: inherit;\n      border-end-end-radius: inherit;\n    }\n\n    & + & {\n      margin: 0;\n    }\n  `\n);\n\nconst UtilitySummary: FunctionComponent<UtilitySummaryItem> = ({\n  name,\n  iconName,\n  count,\n  onClick\n}) => {\n  const [utilSummaryTooltip, setUtilSummaryTooltip] = useElement<HTMLElement>();\n  return (\n    <>\n      <Flex\n        container={{\n          direction: 'column',\n          alignItems: 'center',\n          gap: 0.5\n        }}\n        onClick={onClick}\n        ref={setUtilSummaryTooltip}\n        as={StyledUtilitySummaryButton}\n      >\n        <Icon name={iconName} />\n        {count !== undefined && <Count aria-hidden>{count}</Count>}\n        <VisuallyHiddenText role='listitem'>{`${count ?? ''} ${name}`}</VisuallyHiddenText>\n      </Flex>\n\n      <Tooltip target={utilSummaryTooltip} showDelay='none' hideDelay='none'>\n        {name}\n      </Tooltip>\n    </>\n  );\n};\n\nconst UtilitiesSummary: FunctionComponent<UtilitiesSummaryProps> = ({ items = [] }) => {\n  const t = useI18n();\n\n  return (\n    <Card\n      container={{ direction: 'column', alignItems: 'center' }}\n      as={StyledUtilitiesSummary}\n      aria-label={t('utilities_summary')}\n      role='list'\n    >\n      {items.map(item => (\n        <UtilitySummary {...item} key={item.iconName} />\n      ))}\n    </Card>\n  );\n};\n\nexport default UtilitiesSummary;\n"]}

package/lib/components/CaseView/UtilitySummaryItemDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UtilitySummaryItemDialog.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/UtilitySummaryItemDialog.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAc,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE1E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4DAA4D,CAAC;AAQlG,KAAK,6BAA6B,GAAG,cAAc,CACjD,KAAK,EACL;IACE,MAAM,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CACF,CAAC;AAEF,QAAA,MAAM,wBAAwB,uIAmC5B,CAAC;AAEH,eAAe,wBAAwB,CAAC"}
+{"version":3,"file":"UtilitySummaryItemDialog.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/UtilitySummaryItemDialog.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAc,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE1E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4DAA4D,CAAC;AAQlG,KAAK,6BAA6B,GAAG,cAAc,CACjD,KAAK,EACL;IACE,MAAM,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CACF,CAAC;AAEF,QAAA,MAAM,wBAAwB,uIAwC5B,CAAC;AAEH,eAAe,wBAAwB,CAAC"}

package/lib/components/CaseView/UtilitySummaryItemDialog.js

@@ -9,7 +9,11 @@ const StyledUtilitySummaryItemDialog = styled(Dialog) `
 StyledUtilitySummaryItemDialog.defaultProps = defaultThemeProp;
 const UtilitySummaryItemDialog = forwardRef(function UtilitySummaryItemDialog({ children, target, onDismiss }, ref) {
     const dialogRef = useConsolidatedRef(ref);
-    useOuterEvent('mousedown', [dialogRef], () => {
+    useOuterEvent('mousedown', [dialogRef], e => {
+        // FIXME: This targets the modal backdrop. We need a better solution.
+        if (e.target.closest('[opacity="1"]')) {
+            return;
+        }
         onDismiss?.();
         target.focus();
     });

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

@@ -1 +1 @@
-{"version":3,"file":"UtilitySummaryItemDialog.js","sourceRoot":"","sources":["../../../src/components/CaseView/UtilitySummaryItemDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9C,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,gBAAgB,EAChB,aAAa,EACb,kBAAkB,EAClB,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,aAAa,EACd,MAAM,yBAAyB,CAAC;AAEjC,OAAO,MAAM,MAAM,sDAAsD,CAAC;AAG1E,MAAM,8BAA8B,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;;CAEpD,CAAC;AAEF,8BAA8B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAU/D,MAAM,wBAAwB,GAAG,UAAU,CAGzC,SAAS,wBAAwB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,GAAG;IACtE,MAAM,SAAS,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAE1C,aAAa,CAAC,WAAW,EAAE,CAAC,SAAS,CAAC,EAAE,GAAG,EAAE;QAC3C,SAAS,EAAE,EAAE,CAAC;QACd,MAAM,CAAC,KAAK,EAAE,CAAC;IACjB,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,EAAE,EAAE,CAAC;QACd,MAAM,CAAC,KAAK,EAAE,CAAC;IACjB,CAAC,EAAE,SAAS,CAAC,CAAC;IAEd,YAAY,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IAE/B,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,UAAU,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;QAC5C,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;IACzB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,EAAE,CAAC;IAEjC,OAAO,CACL,KAAC,8BAA8B,IAC7B,GAAG,EAAE,SAAS,EACd,MAAM,EAAE,MAAM,EACd,KAAK,QACL,SAAS,EAAE,GAAG,KAAK,QAAQ,YAE1B,QAAQ,GACsB,CAClC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,wBAAwB,CAAC","sourcesContent":["import { forwardRef, useEffect } from 'react';\nimport type { PropsWithoutRef } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  defaultThemeProp,\n  getFocusables,\n  useConsolidatedRef,\n  useDirection,\n  useFocusTrap,\n  useEscape,\n  useOuterEvent\n} from '@pega/cosmos-react-core';\nimport type { RefElement, WithAttributes } from '@pega/cosmos-react-core';\nimport Dialog from '@pega/cosmos-react-core/lib/components/Dialog/Dialog';\nimport type { BaseDialogProps } from '@pega/cosmos-react-core/lib/components/Dialog/Dialog.types';\n\nconst StyledUtilitySummaryItemDialog = styled(Dialog)`\n  width: 25rem;\n`;\n\nStyledUtilitySummaryItemDialog.defaultProps = defaultThemeProp;\n\ntype UtilitySummaryItemDialogProps = WithAttributes<\n  'div',\n  {\n    target: BaseDialogProps['target'];\n    onDismiss?: () => void;\n  }\n>;\n\nconst UtilitySummaryItemDialog = forwardRef<\n  RefElement<UtilitySummaryItemDialogProps>,\n  PropsWithoutRef<UtilitySummaryItemDialogProps>\n>(function UtilitySummaryItemDialog({ children, target, onDismiss }, ref) {\n  const dialogRef = useConsolidatedRef(ref);\n\n  useOuterEvent('mousedown', [dialogRef], () => {\n    onDismiss?.();\n    target.focus();\n  });\n\n  useEscape(() => {\n    onDismiss?.();\n    target.focus();\n  }, dialogRef);\n\n  useFocusTrap(dialogRef, false);\n\n  useEffect(() => {\n    const focusables = getFocusables(dialogRef);\n    focusables[0]?.focus();\n  }, []);\n\n  const { start } = useDirection();\n\n  return (\n    <StyledUtilitySummaryItemDialog\n      ref={dialogRef}\n      target={target}\n      arrow\n      placement={`${start}-start`}\n    >\n      {children}\n    </StyledUtilitySummaryItemDialog>\n  );\n});\n\nexport default UtilitySummaryItemDialog;\n"]}
+{"version":3,"file":"UtilitySummaryItemDialog.js","sourceRoot":"","sources":["../../../src/components/CaseView/UtilitySummaryItemDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9C,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,gBAAgB,EAChB,aAAa,EACb,kBAAkB,EAClB,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,aAAa,EACd,MAAM,yBAAyB,CAAC;AAEjC,OAAO,MAAM,MAAM,sDAAsD,CAAC;AAG1E,MAAM,8BAA8B,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;;CAEpD,CAAC;AAEF,8BAA8B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAU/D,MAAM,wBAAwB,GAAG,UAAU,CAGzC,SAAS,wBAAwB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,GAAG;IACtE,MAAM,SAAS,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAE1C,aAAa,CAAC,WAAW,EAAE,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE;QAC1C,qEAAqE;QACrE,IAAK,CAAC,CAAC,MAAkB,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE;YAClD,OAAO;SACR;QAED,SAAS,EAAE,EAAE,CAAC;QACd,MAAM,CAAC,KAAK,EAAE,CAAC;IACjB,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,EAAE,EAAE,CAAC;QACd,MAAM,CAAC,KAAK,EAAE,CAAC;IACjB,CAAC,EAAE,SAAS,CAAC,CAAC;IAEd,YAAY,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IAE/B,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,UAAU,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;QAC5C,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;IACzB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,EAAE,CAAC;IAEjC,OAAO,CACL,KAAC,8BAA8B,IAC7B,GAAG,EAAE,SAAS,EACd,MAAM,EAAE,MAAM,EACd,KAAK,QACL,SAAS,EAAE,GAAG,KAAK,QAAQ,YAE1B,QAAQ,GACsB,CAClC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,wBAAwB,CAAC","sourcesContent":["import { forwardRef, useEffect } from 'react';\nimport type { PropsWithoutRef } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  defaultThemeProp,\n  getFocusables,\n  useConsolidatedRef,\n  useDirection,\n  useFocusTrap,\n  useEscape,\n  useOuterEvent\n} from '@pega/cosmos-react-core';\nimport type { RefElement, WithAttributes } from '@pega/cosmos-react-core';\nimport Dialog from '@pega/cosmos-react-core/lib/components/Dialog/Dialog';\nimport type { BaseDialogProps } from '@pega/cosmos-react-core/lib/components/Dialog/Dialog.types';\n\nconst StyledUtilitySummaryItemDialog = styled(Dialog)`\n  width: 25rem;\n`;\n\nStyledUtilitySummaryItemDialog.defaultProps = defaultThemeProp;\n\ntype UtilitySummaryItemDialogProps = WithAttributes<\n  'div',\n  {\n    target: BaseDialogProps['target'];\n    onDismiss?: () => void;\n  }\n>;\n\nconst UtilitySummaryItemDialog = forwardRef<\n  RefElement<UtilitySummaryItemDialogProps>,\n  PropsWithoutRef<UtilitySummaryItemDialogProps>\n>(function UtilitySummaryItemDialog({ children, target, onDismiss }, ref) {\n  const dialogRef = useConsolidatedRef(ref);\n\n  useOuterEvent('mousedown', [dialogRef], e => {\n    // FIXME: This targets the modal backdrop. We need a better solution.\n    if ((e.target as Element).closest('[opacity=\"1\"]')) {\n      return;\n    }\n\n    onDismiss?.();\n    target.focus();\n  });\n\n  useEscape(() => {\n    onDismiss?.();\n    target.focus();\n  }, dialogRef);\n\n  useFocusTrap(dialogRef, false);\n\n  useEffect(() => {\n    const focusables = getFocusables(dialogRef);\n    focusables[0]?.focus();\n  }, []);\n\n  const { start } = useDirection();\n\n  return (\n    <StyledUtilitySummaryItemDialog\n      ref={dialogRef}\n      target={target}\n      arrow\n      placement={`${start}-start`}\n    >\n      {children}\n    </StyledUtilitySummaryItemDialog>\n  );\n});\n\nexport default UtilitySummaryItemDialog;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"ConfigurableLayout.d.ts","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/ConfigurableLayout.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AA+B1E,QAAA,MAAM,kBAAkB,iHA+EtB,CAAC;AAEH,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"ConfigurableLayout.d.ts","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/ConfigurableLayout.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AA+B1E,QAAA,MAAM,kBAAkB,iHA+EtB,CAAC;AAEH,eAAe,kBAAkB,CAAC"}

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, 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(function ConfigurableLayout(\n  { items, arrangement }: PropsWithoutRef<ConfigurableLayoutProps>,\n  ref: Ref<HTMLElement>\n) {\n  const containerRulerRef = useRef<HTMLDivElement>(null);\n\n  const renderMode = useMemo(() => {\n    const activeArrangement = arrangement?.hasWrapped !== undefined && !arrangement.hasWrapped;\n\n    if (activeArrangement) {\n      switch (arrangement.size) {\n        case 'main':\n          return 'direct';\n        case 'half':\n          return 'double';\n        case 'narrow':\n          return 'full';\n        default:\n          return 'direct';\n      }\n    }\n\n    // Use direct by default\n    return 'direct';\n  }, [arrangement]);\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}`} 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\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, useRef, useMemo } from 'react';\nimport type { PropsWithoutRef, Ref } 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 type 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(function ConfigurableLayout(\n  { items, arrangement }: PropsWithoutRef<ConfigurableLayoutProps>,\n  ref: Ref<HTMLElement>\n) {\n  const containerRulerRef = useRef<HTMLDivElement>(null);\n\n  const renderMode = useMemo(() => {\n    const activeArrangement = arrangement?.hasWrapped !== undefined && !arrangement.hasWrapped;\n\n    if (activeArrangement) {\n      switch (arrangement.size) {\n        case 'main':\n          return 'direct';\n        case 'half':\n          return 'double';\n        case 'narrow':\n          return 'full';\n        default:\n          return 'direct';\n      }\n    }\n\n    // Use direct by default\n    return 'direct';\n  }, [arrangement]);\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}`} 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\nexport default ConfigurableLayout;\n"]}

package/lib/components/ConfigurableLayout/LayoutCell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutCell.d.ts","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/LayoutCell.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAoDzD,QAAA,MAAM,UAAU;YAA0B,MAAM;wBAoC/C,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"LayoutCell.d.ts","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/LayoutCell.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAoDzD,QAAA,MAAM,UAAU;YAA0B,MAAM;wBAoC/C,CAAC;AAEF,eAAe,UAAU,CAAC"}

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

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

@@ -1,4 +1,4 @@
-import { Ref } from 'react';
+import type { Ref } from 'react';
 declare const useTrackWrappedRegions: (regionElArray: (HTMLElement | null)[], disabled?: boolean) => {
     containerRef: Ref<HTMLElement | null>;
     regionWrappedStates: boolean[];

package/lib/components/ConfigurableLayout/useTrackWrappedRegions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTrackWrappedRegions.d.ts","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/useTrackWrappedRegions.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+B,GAAG,EAAE,MAAM,OAAO,CAAC;AAIzD,QAAA,MAAM,sBAAsB,kBACX,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,aAC1B,OAAO;kBACD,IAAI,WAAW,GAAG,IAAI,CAAC;yBAAuB,OAAO,EAAE;CA2CzE,CAAC;AAEF,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"useTrackWrappedRegions.d.ts","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/useTrackWrappedRegions.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAIjC,QAAA,MAAM,sBAAsB,kBACX,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,aAC1B,OAAO;kBACD,IAAI,WAAW,GAAG,IAAI,CAAC;yBAAuB,OAAO,EAAE;CA2CzE,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"useTrackWrappedRegions.js","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/useTrackWrappedRegions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAO,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEnD,MAAM,sBAAsB,GAAG,CAC7B,aAAqC,EACrC,QAAkB,EACyD,EAAE;IAC7E,MAAM,YAAY,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;IACtD,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAC5D,IAAI,KAAK,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAC5C,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,QAAQ;YAAE,OAAO;QAErB,IAAI,SAAS,GAAG,IAAI,CAAC;QAErB,MAAM,QAAQ,GAAG,IAAI,cAAc,CACjC,QAAQ,CAAC,OAAO,CAAC,EAAE;YACjB,IAAI,SAAS,EAAE;gBACb,MAAM,cAAc,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC;gBACpD,MAAM,gBAAgB,GAAG,CAAC,GAAG,mBAAmB,CAAC,CAAC;gBAElD,aAAa,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE;oBACxC,MAAM,WAAW,GAAG,QAAQ,EAAE,qBAAqB,EAAE,CAAC,KAAK,CAAC;oBAE5D,IAAI,WAAW,KAAK,SAAS,IAAI,WAAW,IAAI,cAAc,EAAE;wBAC9D,gBAAgB,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;qBAChC;yBAAM;wBACL,gBAAgB,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC;qBACjC;gBACH,CAAC,CAAC,CAAC;gBAEH,sBAAsB,CAAC,gBAAgB,CAAC,CAAC;aAC1C;QACH,CAAC,EAAE,GAAG,CAAC,CACR,CAAC;QAEF,IAAI,YAAY,CAAC,OAAO,IAAI,aAAa,CAAC,MAAM,EAAE;YAChD,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;SACxC;QAED,OAAO,GAAG,EAAE;YACV,SAAS,GAAG,KAAK,CAAC;YAClB,QAAQ,CAAC,UAAU,EAAE,CAAC;QACxB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC;IAElC,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,CAAC;AAC/C,CAAC,CAAC;AAEF,eAAe,sBAAsB,CAAC","sourcesContent":["import { useRef, useEffect, useState, Ref } from 'react';\n\nimport { debounce } from '@pega/cosmos-react-core';\n\nconst useTrackWrappedRegions = (\n  regionElArray: (HTMLElement | null)[],\n  disabled?: boolean\n): { containerRef: Ref<HTMLElement | null>; regionWrappedStates: boolean[] } => {\n  const containerRef = useRef<HTMLElement | null>(null);\n  const [regionWrappedStates, setRegionWrappedStates] = useState(\n    new Array(regionElArray.length).fill(false)\n  );\n\n  useEffect(() => {\n    if (disabled) return;\n\n    let isMounted = true;\n\n    const observer = new ResizeObserver(\n      debounce(entries => {\n        if (isMounted) {\n          const containerWidth = entries[0].contentRect.width;\n          const newWrappedStates = [...regionWrappedStates];\n\n          regionElArray.forEach((regionEl, index) => {\n            const regionWidth = regionEl?.getBoundingClientRect().width;\n\n            if (regionWidth !== undefined && regionWidth >= containerWidth) {\n              newWrappedStates[index] = true;\n            } else {\n              newWrappedStates[index] = false;\n            }\n          });\n\n          setRegionWrappedStates(newWrappedStates);\n        }\n      }, 100)\n    );\n\n    if (containerRef.current && regionElArray.length) {\n      observer.observe(containerRef.current);\n    }\n\n    return () => {\n      isMounted = false;\n      observer.disconnect();\n    };\n  }, [containerRef, regionElArray]);\n\n  return { containerRef, regionWrappedStates };\n};\n\nexport default useTrackWrappedRegions;\n"]}
+{"version":3,"file":"useTrackWrappedRegions.js","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/useTrackWrappedRegions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGpD,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEnD,MAAM,sBAAsB,GAAG,CAC7B,aAAqC,EACrC,QAAkB,EACyD,EAAE;IAC7E,MAAM,YAAY,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;IACtD,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAC5D,IAAI,KAAK,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAC5C,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,QAAQ;YAAE,OAAO;QAErB,IAAI,SAAS,GAAG,IAAI,CAAC;QAErB,MAAM,QAAQ,GAAG,IAAI,cAAc,CACjC,QAAQ,CAAC,OAAO,CAAC,EAAE;YACjB,IAAI,SAAS,EAAE;gBACb,MAAM,cAAc,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC;gBACpD,MAAM,gBAAgB,GAAG,CAAC,GAAG,mBAAmB,CAAC,CAAC;gBAElD,aAAa,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE;oBACxC,MAAM,WAAW,GAAG,QAAQ,EAAE,qBAAqB,EAAE,CAAC,KAAK,CAAC;oBAE5D,IAAI,WAAW,KAAK,SAAS,IAAI,WAAW,IAAI,cAAc,EAAE;wBAC9D,gBAAgB,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;qBAChC;yBAAM;wBACL,gBAAgB,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC;qBACjC;gBACH,CAAC,CAAC,CAAC;gBAEH,sBAAsB,CAAC,gBAAgB,CAAC,CAAC;aAC1C;QACH,CAAC,EAAE,GAAG,CAAC,CACR,CAAC;QAEF,IAAI,YAAY,CAAC,OAAO,IAAI,aAAa,CAAC,MAAM,EAAE;YAChD,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;SACxC;QAED,OAAO,GAAG,EAAE;YACV,SAAS,GAAG,KAAK,CAAC;YAClB,QAAQ,CAAC,UAAU,EAAE,CAAC;QACxB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC;IAElC,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,CAAC;AAC/C,CAAC,CAAC;AAEF,eAAe,sBAAsB,CAAC","sourcesContent":["import { useRef, useEffect, useState } from 'react';\nimport type { Ref } from 'react';\n\nimport { debounce } from '@pega/cosmos-react-core';\n\nconst useTrackWrappedRegions = (\n  regionElArray: (HTMLElement | null)[],\n  disabled?: boolean\n): { containerRef: Ref<HTMLElement | null>; regionWrappedStates: boolean[] } => {\n  const containerRef = useRef<HTMLElement | null>(null);\n  const [regionWrappedStates, setRegionWrappedStates] = useState(\n    new Array(regionElArray.length).fill(false)\n  );\n\n  useEffect(() => {\n    if (disabled) return;\n\n    let isMounted = true;\n\n    const observer = new ResizeObserver(\n      debounce(entries => {\n        if (isMounted) {\n          const containerWidth = entries[0].contentRect.width;\n          const newWrappedStates = [...regionWrappedStates];\n\n          regionElArray.forEach((regionEl, index) => {\n            const regionWidth = regionEl?.getBoundingClientRect().width;\n\n            if (regionWidth !== undefined && regionWidth >= containerWidth) {\n              newWrappedStates[index] = true;\n            } else {\n              newWrappedStates[index] = false;\n            }\n          });\n\n          setRegionWrappedStates(newWrappedStates);\n        }\n      }, 100)\n    );\n\n    if (containerRef.current && regionElArray.length) {\n      observer.observe(containerRef.current);\n    }\n\n    return () => {\n      isMounted = false;\n      observer.disconnect();\n    };\n  }, [containerRef, regionElArray]);\n\n  return { containerRef, regionWrappedStates };\n};\n\nexport default useTrackWrappedRegions;\n"]}

package/lib/components/Confirmation/Confirmation.d.ts

@@ -1,5 +1,5 @@
-import { FunctionComponent, ReactNode, Ref } from 'react';
-import { ForwardProps, UnorderedListProps, NoChildrenProp } from '@pega/cosmos-react-core';
+import type { FunctionComponent, ReactNode, Ref } from 'react';
+import type { ForwardProps, UnorderedListProps, NoChildrenProp } from '@pega/cosmos-react-core';
 export interface ConfirmationProps extends NoChildrenProp {
     /** The title of the confirmation */
     title?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"Confirmation.d.ts","sourceRoot":"","sources":["../../../src/components/Confirmation/Confirmation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,SAAS,EACT,GAAG,EAGJ,MAAM,OAAO,CAAC;AAGf,OAAO,EAGL,YAAY,EAOZ,kBAAkB,EAClB,cAAc,EAEf,MAAM,yBAAyB,CAAC;AAUjC,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACvD,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,iDAAiD;IACjD,SAAS,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACxC,mCAAmC;IACnC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,mDAAmD;IACnD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAUD,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAiDrE,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"Confirmation.d.ts","sourceRoot":"","sources":["../../../src/components/Confirmation/Confirmation.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAmB,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAchF,OAAO,KAAK,EAAE,YAAY,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAUhG,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACvD,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,iDAAiD;IACjD,SAAS,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACxC,mCAAmC;IACnC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,mDAAmD;IACnD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAUD,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAiDrE,CAAC;AAEF,eAAe,YAAY,CAAC"}

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,EACL,UAAU,EAKV,UAAU,EACV,OAAO,EACR,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,WAAW,EAEX,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,aAAa,EACb,MAAM,EACN,gBAAgB,EAGhB,kBAAkB,EACnB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,aAAa,EAAE,0BAA0B,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEvF,MAAM,mBAAmB,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA;;CAEhD,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAiBpD,MAAM,yBAAyB,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE;IAChD,OAAO,GAAG,CAAA;QACJ,aAAa,MAAM,0BAA0B;;;GAGlD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,YAAY,GAAwD,UAAU,CAClF,SAAS,YAAY,CACnB,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,SAAS,EAAsC,EAC/F,GAAG;IAEH,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,cAAc,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAElD,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,OAAO;YACL,GAAG,cAAc;YACjB,KAAK,EAAE,CAAC;SACT,CAAC;IACJ,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAErB,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,aAC7C,KAAK,IAAI,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,KAAK,GAAQ,EAE1C,OAAO,IAAI,CACV,KAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,eAAe,YAC7C,KAAC,yBAAyB,cAAE,OAAO,GAA6B,GACxC,CAC3B,EAEA,SAAS,IAAI,CACZ,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAC9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,yBAAyB,CAAC,GAAQ,EACxD,KAAC,mBAAmB,IAAC,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,mBAAmB,GAAI,IAC7D,CACR,EAEA,KAAK,EAEL,OAAO,IAAI,CACV,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,YACjC,MAAC,MAAM,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAC,SAAS,aACxC,CAAC,CAAC,MAAM,CAAC,EACT,KAAK,CAAC,CAAC,CAAC,KAAC,kBAAkB,cAAE,KAAK,KAAK,EAAE,GAAsB,CAAC,CAAC,CAAC,IAAI,IAChE,GACJ,CACR,IACI,GACK,GACT,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  ReactNode,\n  Ref,\n  useContext,\n  useMemo\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Card,\n  CardContent,\n  ForwardProps,\n  Flex,\n  Text,\n  useI18n,\n  UnorderedList,\n  Button,\n  defaultThemeProp,\n  UnorderedListProps,\n  NoChildrenProp,\n  VisuallyHiddenText\n} from '@pega/cosmos-react-core';\n\nimport { StyledDetails, StyledFieldValueGroupLabel, DetailsContext } from '../Details';\n\nconst StyledWhatsNextList = styled(UnorderedList)`\n  padding-inline-start: 0;\n`;\n\nStyledWhatsNextList.defaultProps = defaultThemeProp;\n\nexport interface ConfirmationProps extends NoChildrenProp {\n  /** The title of the confirmation */\n  title?: string;\n  /** Region for a Field Value List component */\n  details?: ReactNode;\n  /** Array of React nodes to be put into a list */\n  whatsNext?: UnorderedListProps['items'];\n  /** Region for a Tasks component */\n  tasks?: ReactNode;\n  /** Called when the done/close button is clicked */\n  onClose?: () => void;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLElement>;\n}\n\nconst StyledConfirmationDetails = styled.div(() => {\n  return css`\n    > ${StyledDetails} > ${StyledFieldValueGroupLabel}:first-child {\n      margin-block-start: 0;\n    }\n  `;\n});\n\nconst Confirmation: FunctionComponent<ConfirmationProps & ForwardProps> = forwardRef(\n  function Confirmation(\n    { title, details, whatsNext, tasks, onClose, ...restProps }: PropsWithoutRef<ConfirmationProps>,\n    ref\n  ) {\n    const t = useI18n();\n    const detailsContext = useContext(DetailsContext);\n\n    const detailsCtxValue = useMemo(() => {\n      return {\n        ...detailsContext,\n        depth: 4\n      };\n    }, [detailsContext]);\n\n    return (\n      <Card {...restProps} ref={ref}>\n        <CardContent>\n          <Flex container={{ gap: 3, direction: 'column' }}>\n            {title && <Text variant='h3'>{title}</Text>}\n\n            {details && (\n              <DetailsContext.Provider value={detailsCtxValue}>\n                <StyledConfirmationDetails>{details}</StyledConfirmationDetails>\n              </DetailsContext.Provider>\n            )}\n\n            {whatsNext && (\n              <Flex container={{ gap: 1, direction: 'column' }}>\n                <Text variant='h4'>{t('confirmation_whats_next')}</Text>\n                <StyledWhatsNextList items={whatsNext} as={StyledWhatsNextList} />\n              </Flex>\n            )}\n\n            {tasks}\n\n            {onClose && (\n              <Flex container={{ justify: 'end' }}>\n                <Button onClick={onClose} variant='primary'>\n                  {t('done')}\n                  {title ? <VisuallyHiddenText>{`- ${title}`}</VisuallyHiddenText> : null}\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,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAExD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,WAAW,EACX,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,aAAa,EACb,MAAM,EACN,gBAAgB,EAChB,kBAAkB,EACnB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,aAAa,EAAE,0BAA0B,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEvF,MAAM,mBAAmB,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA;;CAEhD,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAiBpD,MAAM,yBAAyB,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE;IAChD,OAAO,GAAG,CAAA;QACJ,aAAa,MAAM,0BAA0B;;;GAGlD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,YAAY,GAAwD,UAAU,CAClF,SAAS,YAAY,CACnB,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,SAAS,EAAsC,EAC/F,GAAG;IAEH,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,cAAc,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAElD,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,OAAO;YACL,GAAG,cAAc;YACjB,KAAK,EAAE,CAAC;SACT,CAAC;IACJ,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAErB,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,aAC7C,KAAK,IAAI,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,KAAK,GAAQ,EAE1C,OAAO,IAAI,CACV,KAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,eAAe,YAC7C,KAAC,yBAAyB,cAAE,OAAO,GAA6B,GACxC,CAC3B,EAEA,SAAS,IAAI,CACZ,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAC9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,yBAAyB,CAAC,GAAQ,EACxD,KAAC,mBAAmB,IAAC,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,mBAAmB,GAAI,IAC7D,CACR,EAEA,KAAK,EAEL,OAAO,IAAI,CACV,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,YACjC,MAAC,MAAM,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAC,SAAS,aACxC,CAAC,CAAC,MAAM,CAAC,EACT,KAAK,CAAC,CAAC,CAAC,KAAC,kBAAkB,cAAE,KAAK,KAAK,EAAE,GAAsB,CAAC,CAAC,CAAC,IAAI,IAChE,GACJ,CACR,IACI,GACK,GACT,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef, useContext, useMemo } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, ReactNode, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Card,\n  CardContent,\n  Flex,\n  Text,\n  useI18n,\n  UnorderedList,\n  Button,\n  defaultThemeProp,\n  VisuallyHiddenText\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, UnorderedListProps, NoChildrenProp } from '@pega/cosmos-react-core';\n\nimport { StyledDetails, StyledFieldValueGroupLabel, DetailsContext } from '../Details';\n\nconst StyledWhatsNextList = styled(UnorderedList)`\n  padding-inline-start: 0;\n`;\n\nStyledWhatsNextList.defaultProps = defaultThemeProp;\n\nexport interface ConfirmationProps extends NoChildrenProp {\n  /** The title of the confirmation */\n  title?: string;\n  /** Region for a Field Value List component */\n  details?: ReactNode;\n  /** Array of React nodes to be put into a list */\n  whatsNext?: UnorderedListProps['items'];\n  /** Region for a Tasks component */\n  tasks?: ReactNode;\n  /** Called when the done/close button is clicked */\n  onClose?: () => void;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLElement>;\n}\n\nconst StyledConfirmationDetails = styled.div(() => {\n  return css`\n    > ${StyledDetails} > ${StyledFieldValueGroupLabel}:first-child {\n      margin-block-start: 0;\n    }\n  `;\n});\n\nconst Confirmation: FunctionComponent<ConfirmationProps & ForwardProps> = forwardRef(\n  function Confirmation(\n    { title, details, whatsNext, tasks, onClose, ...restProps }: PropsWithoutRef<ConfirmationProps>,\n    ref\n  ) {\n    const t = useI18n();\n    const detailsContext = useContext(DetailsContext);\n\n    const detailsCtxValue = useMemo(() => {\n      return {\n        ...detailsContext,\n        depth: 4\n      };\n    }, [detailsContext]);\n\n    return (\n      <Card {...restProps} ref={ref}>\n        <CardContent>\n          <Flex container={{ gap: 3, direction: 'column' }}>\n            {title && <Text variant='h3'>{title}</Text>}\n\n            {details && (\n              <DetailsContext.Provider value={detailsCtxValue}>\n                <StyledConfirmationDetails>{details}</StyledConfirmationDetails>\n              </DetailsContext.Provider>\n            )}\n\n            {whatsNext && (\n              <Flex container={{ gap: 1, direction: 'column' }}>\n                <Text variant='h4'>{t('confirmation_whats_next')}</Text>\n                <StyledWhatsNextList items={whatsNext} as={StyledWhatsNextList} />\n              </Flex>\n            )}\n\n            {tasks}\n\n            {onClose && (\n              <Flex container={{ justify: 'end' }}>\n                <Button onClick={onClose} variant='primary'>\n                  {t('done')}\n                  {title ? <VisuallyHiddenText>{`- ${title}`}</VisuallyHiddenText> : null}\n                </Button>\n              </Flex>\n            )}\n          </Flex>\n        </CardContent>\n      </Card>\n    );\n  }\n);\n\nexport default Confirmation;\n"]}

package/lib/components/Details/Details.d.ts

@@ -1,5 +1,5 @@
-import { FC, ReactNode, Ref } from 'react';
-import { ForwardProps, TestIdProp, AdditionalInfoProps } from '@pega/cosmos-react-core';
+import type { FC, ReactNode, Ref } from 'react';
+import type { AdditionalInfoProps, ForwardProps, TestIdProp } from '@pega/cosmos-react-core';
 export interface DetailsProps extends TestIdProp {
     highlightedData?: ReactNode[];
     children?: ReactNode;

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

@@ -1 +1 @@
-{"version":3,"file":"Details.d.ts","sourceRoot":"","sources":["../../../src/components/Details/Details.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,EAAE,EAEF,SAAS,EACT,GAAG,EAKJ,MAAM,OAAO,CAAC;AAGf,OAAO,EAML,YAAY,EASZ,UAAU,EAGV,mBAAmB,EACpB,MAAM,yBAAyB,CAAC;AAajC,MAAM,WAAW,YAAa,SAAQ,UAAU;IAC9C,eAAe,CAAC,EAAE,SAAS,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,6EAA6E;IAC7E,cAAc,CAAC,EAAE;QACf,OAAO,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;QACxC,OAAO,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;KAC1C,CAAC;IACF,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;;;;AAqND,wBAAuD"}
+{"version":3,"file":"Details.d.ts","sourceRoot":"","sources":["../../../src/components/Details/Details.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAmBhD,OAAO,KAAK,EACV,mBAAmB,EACnB,YAAY,EAEZ,UAAU,EACX,MAAM,yBAAyB,CAAC;AAajC,MAAM,WAAW,YAAa,SAAQ,UAAU;IAC9C,eAAe,CAAC,EAAE,SAAS,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,6EAA6E;IAC7E,cAAc,CAAC,EAAE;QACf,OAAO,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;QACxC,OAAO,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;KAC1C,CAAC;IACF,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;;;;AAqND,wBAAuD"}

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

@@ -1 +1 @@
-{"version":3,"file":"Details.js","sourceRoot":"","sources":["../../../src/components/Details/Details.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FC,\n  Fragment,\n  ReactNode,\n  Ref,\n  useState,\n  useContext,\n  useEffect,\n  useMemo\n} from 'react';\nimport { remToPx } from 'polished';\n\nimport {\n  AdditionalInfo,\n  Text,\n  useBreakpoint,\n  useConsolidatedRef,\n  useTheme,\n  ForwardProps,\n  ExpandCollapse,\n  Button,\n  Flex,\n  Icon,\n  useChToPxConversionFactor,\n  useI18n,\n  HeadingTag,\n  HTML,\n  TestIdProp,\n  useTestIds,\n  withTestIds,\n  AdditionalInfoProps\n} from '@pega/cosmos-react-core';\n\nimport { getDetailsTestIds } from './Details.test-ids';\nimport DetailsContext from './DetailsContext';\nimport {\n  StyledFieldValueGroupLabel,\n  StyledDetails,\n  StyledDetailList,\n  StyledHighlightedDetailList,\n  flexGapProp,\n  StyledDetailDescription\n} from './Details.styles';\n\nexport interface DetailsProps extends TestIdProp {\n  highlightedData?: ReactNode[];\n  children?: ReactNode;\n  /** Text used as heading of list */\n  name?: string;\n  /** Copy placed in paragraph below the name */\n  description?: string;\n  /**\n   * Whether the items children can be collapsed (only applies if name is provided)\n   * @default false\n   */\n  collapsible?: boolean;\n  /**\n   * Number of columns in detail layout\n   * @default 1\n   */\n  columnCount?: 1 | 2 | 3;\n  /** Whether detail list is rendering within another detail list\n   * @default false\n   */\n  nested?: boolean;\n  /** Whether detail list is rendering multiple sub-lists in columns (passed as children)\n   * @default false\n   */\n  asFlex?: boolean;\n  /** Whether to apply `value-comparison` styles to list items\n   * @default false\n   */\n  valueComparison?: boolean;\n  /** Pass a heading and content to show additional information on the list. */\n  additionalInfo?: {\n    heading: AdditionalInfoProps['heading'];\n    content: AdditionalInfoProps['children'];\n  };\n  ref?: Ref<HTMLDListElement>;\n}\n\nconst Details: FC<DetailsProps & ForwardProps> = forwardRef(function Details(\n  {\n    testId,\n    highlightedData,\n    children,\n    name,\n    description,\n    columnCount = 1,\n    nested = false,\n    asFlex = false,\n    valueComparison = false,\n    collapsible = false,\n    additionalInfo: additionalInfoProp\n  },\n  ref\n) {\n  const {\n    longestLabelLength,\n    mobileView: inMobileView,\n    depth,\n    ...context\n  } = useContext(DetailsContext);\n  const {\n    base: {\n      'content-width': { sm: smContentWidth }\n    }\n  } = useTheme();\n  const isSmallOrAbove = useBreakpoint('sm');\n  const listRef = useConsolidatedRef<HTMLDListElement>(ref);\n  const isXsContentWidthOrAbove = useBreakpoint('xs', {\n    breakpointRef: listRef,\n    themeProp: 'content-width'\n  });\n  const isMdContentWidthOrAbove = useBreakpoint('md', {\n    breakpointRef: listRef,\n    themeProp: 'content-width'\n  });\n  const flexRow = useBreakpoint(columnCount > 2 ? 'lg' : 'md', {\n    breakpointRef: listRef,\n    themeProp: 'content-width'\n  });\n  const t = useI18n();\n  const testIds = useTestIds(testId, getDetailsTestIds);\n\n  const [flexContextMobileView, setFlexContextMobileView] = useState(false);\n  const [open, setOpen] = useState(true);\n\n  const labelLength = Math.max(14, Math.min(longestLabelLength ?? 16, 40));\n  const headingDepth = depth ?? 1;\n  const applyMobileView =\n    inMobileView ||\n    !isSmallOrAbove ||\n    !isXsContentWidthOrAbove ||\n    (asFlex && flexRow && flexContextMobileView);\n\n  const chToPxConversionFactor = useChToPxConversionFactor();\n\n  // Mount resize observer to update flex context mobile view & run initial check.\n  useEffect(() => {\n    const checkBreakpoint = (elementWidth: number) => {\n      const minWidthPx = parseInt(smContentWidth, 10) * chToPxConversionFactor;\n      const oneRemInPx = parseInt(remToPx(1), 10);\n      const colGapPxAllowance = oneRemInPx * (0.5 * flexGapProp) * (columnCount - 1);\n      const mobileViewBreakpoint = minWidthPx * columnCount + colGapPxAllowance;\n\n      setFlexContextMobileView(elementWidth < mobileViewBreakpoint);\n    };\n    const resizeObserver = new ResizeObserver(entries => {\n      const containerPxWidth = entries[0].contentRect.width;\n      checkBreakpoint(containerPxWidth);\n    });\n\n    if (listRef.current) {\n      checkBreakpoint(listRef.current.offsetWidth);\n      resizeObserver.observe(listRef.current);\n    }\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [listRef, columnCount]);\n\n  const contextValue = useMemo(() => {\n    return {\n      mobileView: applyMobileView,\n      depth: name ? headingDepth + 1 : headingDepth,\n      longestLabelLength,\n      ...context\n    };\n  }, [applyMobileView, name, headingDepth, longestLabelLength, context]);\n\n  const nameText = useMemo(() => {\n    return <Text variant={`h${Math.min(headingDepth, 6)}` as HeadingTag}>{name}</Text>;\n  }, [name, headingDepth]);\n\n  const additionalInfo = useMemo(() => {\n    return additionalInfoProp ? (\n      <AdditionalInfo heading={additionalInfoProp.heading}>\n        {additionalInfoProp.content}\n      </AdditionalInfo>\n    ) : undefined;\n  }, [additionalInfoProp?.heading, additionalInfoProp?.content]);\n\n  const details = useMemo(() => {\n    return (\n      <>\n        {highlightedData && (\n          <>\n            <Flex\n              data-testid={testIds.highlightedData}\n              as={StyledHighlightedDetailList}\n              forwardedAs={nested ? 'div' : 'dl'}\n              container={{ wrap: 'wrap', colGap: 10, rowGap: 1, alignItems: 'start' }}\n            >\n              {highlightedData.map((child, i) => (\n                // eslint-disable-next-line react/no-array-index-key\n                <Fragment key={i}>{child}</Fragment>\n              ))}\n            </Flex>\n\n            <hr />\n          </>\n        )}\n\n        {children ? (\n          <StyledDetailList\n            data-testid={testIds.data}\n            ref={listRef}\n            as={nested ? 'div' : 'dl'}\n            columnCount={columnCount}\n            labelLength={labelLength}\n            stacked={applyMobileView}\n            nested={nested}\n            flex={asFlex}\n            wrapped={asFlex ? !flexRow : false}\n            variant={valueComparison ? 'value-comparison' : undefined}\n            narrow={!isMdContentWidthOrAbove}\n          >\n            {children}\n          </StyledDetailList>\n        ) : null}\n      </>\n    );\n  }, [\n    highlightedData,\n    nested,\n    columnCount,\n    labelLength,\n    applyMobileView,\n    name,\n    asFlex,\n    flexRow,\n    valueComparison,\n    children,\n    testIds\n  ]);\n\n  if (!name && !children && !highlightedData && !description) return null;\n\n  return (\n    <DetailsContext.Provider value={contextValue}>\n      <StyledDetails data-testid={testIds.root}>\n        {name && (\n          <StyledFieldValueGroupLabel data-testid={testIds.heading}>\n            <Flex container={{ alignItems: 'center', gap: 0.5 }} as='span'>\n              {collapsible ? (\n                <>\n                  <Button\n                    type='button'\n                    variant='text'\n                    onClick={() => {\n                      setOpen(cur => !cur);\n                    }}\n                    aria-expanded={open ? 'true' : 'false'}\n                    aria-label={t(open ? 'collapse_noun' : 'expand_noun', [name])}\n                  >\n                    <Flex container={{ alignItems: 'center', gap: 0.5 }} as='span'>\n                      <Icon name='caret-right' />\n                      {nameText}\n                    </Flex>\n                  </Button>\n                  {additionalInfo}\n                </>\n              ) : (\n                <>\n                  {nameText}\n                  {additionalInfo}\n                </>\n              )}\n            </Flex>\n          </StyledFieldValueGroupLabel>\n        )}\n\n        {description && (\n          <StyledDetailDescription data-testid={testIds.description}>\n            <HTML as='p' content={description} />\n          </StyledDetailDescription>\n        )}\n\n        {collapsible ? (\n          <ExpandCollapse data-testid={testIds.expandCollapse} collapsed={!open}>\n            {details}\n          </ExpandCollapse>\n        ) : (\n          details\n        )}\n      </StyledDetails>\n    </DetailsContext.Provider>\n  );\n});\n\nexport default withTestIds(Details, getDetailsTestIds);\n"]}
+{"version":3,"file":"Details.js","sourceRoot":"","sources":["../../../src/components/Details/Details.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, Fragment, useState, useContext, useEffect, useMemo } from 'react';\nimport type { FC, ReactNode, Ref } from 'react';\nimport { remToPx } from 'polished';\n\nimport {\n  AdditionalInfo,\n  Text,\n  useBreakpoint,\n  useConsolidatedRef,\n  useTheme,\n  ExpandCollapse,\n  Button,\n  Flex,\n  Icon,\n  useChToPxConversionFactor,\n  useI18n,\n  HTML,\n  useTestIds,\n  withTestIds\n} from '@pega/cosmos-react-core';\nimport type {\n  AdditionalInfoProps,\n  ForwardProps,\n  HeadingTag,\n  TestIdProp\n} from '@pega/cosmos-react-core';\n\nimport { getDetailsTestIds } from './Details.test-ids';\nimport DetailsContext from './DetailsContext';\nimport {\n  StyledFieldValueGroupLabel,\n  StyledDetails,\n  StyledDetailList,\n  StyledHighlightedDetailList,\n  flexGapProp,\n  StyledDetailDescription\n} from './Details.styles';\n\nexport interface DetailsProps extends TestIdProp {\n  highlightedData?: ReactNode[];\n  children?: ReactNode;\n  /** Text used as heading of list */\n  name?: string;\n  /** Copy placed in paragraph below the name */\n  description?: string;\n  /**\n   * Whether the items children can be collapsed (only applies if name is provided)\n   * @default false\n   */\n  collapsible?: boolean;\n  /**\n   * Number of columns in detail layout\n   * @default 1\n   */\n  columnCount?: 1 | 2 | 3;\n  /** Whether detail list is rendering within another detail list\n   * @default false\n   */\n  nested?: boolean;\n  /** Whether detail list is rendering multiple sub-lists in columns (passed as children)\n   * @default false\n   */\n  asFlex?: boolean;\n  /** Whether to apply `value-comparison` styles to list items\n   * @default false\n   */\n  valueComparison?: boolean;\n  /** Pass a heading and content to show additional information on the list. */\n  additionalInfo?: {\n    heading: AdditionalInfoProps['heading'];\n    content: AdditionalInfoProps['children'];\n  };\n  ref?: Ref<HTMLDListElement>;\n}\n\nconst Details: FC<DetailsProps & ForwardProps> = forwardRef(function Details(\n  {\n    testId,\n    highlightedData,\n    children,\n    name,\n    description,\n    columnCount = 1,\n    nested = false,\n    asFlex = false,\n    valueComparison = false,\n    collapsible = false,\n    additionalInfo: additionalInfoProp\n  },\n  ref\n) {\n  const {\n    longestLabelLength,\n    mobileView: inMobileView,\n    depth,\n    ...context\n  } = useContext(DetailsContext);\n  const {\n    base: {\n      'content-width': { sm: smContentWidth }\n    }\n  } = useTheme();\n  const isSmallOrAbove = useBreakpoint('sm');\n  const listRef = useConsolidatedRef<HTMLDListElement>(ref);\n  const isXsContentWidthOrAbove = useBreakpoint('xs', {\n    breakpointRef: listRef,\n    themeProp: 'content-width'\n  });\n  const isMdContentWidthOrAbove = useBreakpoint('md', {\n    breakpointRef: listRef,\n    themeProp: 'content-width'\n  });\n  const flexRow = useBreakpoint(columnCount > 2 ? 'lg' : 'md', {\n    breakpointRef: listRef,\n    themeProp: 'content-width'\n  });\n  const t = useI18n();\n  const testIds = useTestIds(testId, getDetailsTestIds);\n\n  const [flexContextMobileView, setFlexContextMobileView] = useState(false);\n  const [open, setOpen] = useState(true);\n\n  const labelLength = Math.max(14, Math.min(longestLabelLength ?? 16, 40));\n  const headingDepth = depth ?? 1;\n  const applyMobileView =\n    inMobileView ||\n    !isSmallOrAbove ||\n    !isXsContentWidthOrAbove ||\n    (asFlex && flexRow && flexContextMobileView);\n\n  const chToPxConversionFactor = useChToPxConversionFactor();\n\n  // Mount resize observer to update flex context mobile view & run initial check.\n  useEffect(() => {\n    const checkBreakpoint = (elementWidth: number) => {\n      const minWidthPx = parseInt(smContentWidth, 10) * chToPxConversionFactor;\n      const oneRemInPx = parseInt(remToPx(1), 10);\n      const colGapPxAllowance = oneRemInPx * (0.5 * flexGapProp) * (columnCount - 1);\n      const mobileViewBreakpoint = minWidthPx * columnCount + colGapPxAllowance;\n\n      setFlexContextMobileView(elementWidth < mobileViewBreakpoint);\n    };\n    const resizeObserver = new ResizeObserver(entries => {\n      const containerPxWidth = entries[0].contentRect.width;\n      checkBreakpoint(containerPxWidth);\n    });\n\n    if (listRef.current) {\n      checkBreakpoint(listRef.current.offsetWidth);\n      resizeObserver.observe(listRef.current);\n    }\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [listRef, columnCount]);\n\n  const contextValue = useMemo(() => {\n    return {\n      mobileView: applyMobileView,\n      depth: name ? headingDepth + 1 : headingDepth,\n      longestLabelLength,\n      ...context\n    };\n  }, [applyMobileView, name, headingDepth, longestLabelLength, context]);\n\n  const nameText = useMemo(() => {\n    return <Text variant={`h${Math.min(headingDepth, 6)}` as HeadingTag}>{name}</Text>;\n  }, [name, headingDepth]);\n\n  const additionalInfo = useMemo(() => {\n    return additionalInfoProp ? (\n      <AdditionalInfo heading={additionalInfoProp.heading}>\n        {additionalInfoProp.content}\n      </AdditionalInfo>\n    ) : undefined;\n  }, [additionalInfoProp?.heading, additionalInfoProp?.content]);\n\n  const details = useMemo(() => {\n    return (\n      <>\n        {highlightedData && (\n          <>\n            <Flex\n              data-testid={testIds.highlightedData}\n              as={StyledHighlightedDetailList}\n              forwardedAs={nested ? 'div' : 'dl'}\n              container={{ wrap: 'wrap', colGap: 10, rowGap: 1, alignItems: 'start' }}\n            >\n              {highlightedData.map((child, i) => (\n                // eslint-disable-next-line react/no-array-index-key\n                <Fragment key={i}>{child}</Fragment>\n              ))}\n            </Flex>\n\n            <hr />\n          </>\n        )}\n\n        {children ? (\n          <StyledDetailList\n            data-testid={testIds.data}\n            ref={listRef}\n            as={nested ? 'div' : 'dl'}\n            columnCount={columnCount}\n            labelLength={labelLength}\n            stacked={applyMobileView}\n            nested={nested}\n            flex={asFlex}\n            wrapped={asFlex ? !flexRow : false}\n            variant={valueComparison ? 'value-comparison' : undefined}\n            narrow={!isMdContentWidthOrAbove}\n          >\n            {children}\n          </StyledDetailList>\n        ) : null}\n      </>\n    );\n  }, [\n    highlightedData,\n    nested,\n    columnCount,\n    labelLength,\n    applyMobileView,\n    name,\n    asFlex,\n    flexRow,\n    valueComparison,\n    children,\n    testIds\n  ]);\n\n  if (!name && !children && !highlightedData && !description) return null;\n\n  return (\n    <DetailsContext.Provider value={contextValue}>\n      <StyledDetails data-testid={testIds.root}>\n        {name && (\n          <StyledFieldValueGroupLabel data-testid={testIds.heading}>\n            <Flex container={{ alignItems: 'center', gap: 0.5 }} as='span'>\n              {collapsible ? (\n                <>\n                  <Button\n                    type='button'\n                    variant='text'\n                    onClick={() => {\n                      setOpen(cur => !cur);\n                    }}\n                    aria-expanded={open ? 'true' : 'false'}\n                    aria-label={t(open ? 'collapse_noun' : 'expand_noun', [name])}\n                  >\n                    <Flex container={{ alignItems: 'center', gap: 0.5 }} as='span'>\n                      <Icon name='caret-right' />\n                      {nameText}\n                    </Flex>\n                  </Button>\n                  {additionalInfo}\n                </>\n              ) : (\n                <>\n                  {nameText}\n                  {additionalInfo}\n                </>\n              )}\n            </Flex>\n          </StyledFieldValueGroupLabel>\n        )}\n\n        {description && (\n          <StyledDetailDescription data-testid={testIds.description}>\n            <HTML as='p' content={description} />\n          </StyledDetailDescription>\n        )}\n\n        {collapsible ? (\n          <ExpandCollapse data-testid={testIds.expandCollapse} collapsed={!open}>\n            {details}\n          </ExpandCollapse>\n        ) : (\n          details\n        )}\n      </StyledDetails>\n    </DetailsContext.Provider>\n  );\n});\n\nexport default withTestIds(Details, getDetailsTestIds);\n"]}

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

@@ -1,5 +1,5 @@
-import { DefaultTheme } from 'styled-components';
-import { StyledFieldValueListProps } from '@pega/cosmos-react-core';
+import type { DefaultTheme } from 'styled-components';
+import type { StyledFieldValueListProps } from '@pega/cosmos-react-core';
 interface StyledDetailListProps extends StyledFieldValueListProps {
     /** Whether individual list items all have labels stacks on top */
     stacked?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"Details.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Details/Details.styles.ts"],"names":[],"mappings":"AAAA,OAAe,EAAO,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE9D,OAAO,EAML,yBAAyB,EAM1B,MAAM,yBAAyB,CAAC;AAEjC,UAAU,qBAAsB,SAAQ,yBAAyB;IAC/D,kEAAkE;IAClE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oDAAoD;IACpD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,iCAAiC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,YAAY,CAAC;CACrB;AAUD,eAAO,MAAM,eAAe;;;;;;;;;;;;;CAa3B,CAAC;AAEF,eAAO,MAAM,WAAW,MAAM,CAAC;AAE/B,eAAO,MAAM,0BAA0B,6EAyBrC,CAAC;AAIH,eAAO,MAAM,uBAAuB,6EAYlC,CAAC;AAIH,eAAO,MAAM,2BAA2B,4EAuBtC,CAAC;AAIH,eAAO,MAAM,aAAa,6EAAe,CAAC;AAE1C,eAAO,MAAM,gBAAgB,oRA+I5B,CAAC"}
+{"version":3,"file":"Details.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Details/Details.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAYtD,OAAO,KAAK,EACV,yBAAyB,EAG1B,MAAM,yBAAyB,CAAC;AAEjC,UAAU,qBAAsB,SAAQ,yBAAyB;IAC/D,kEAAkE;IAClE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oDAAoD;IACpD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,iCAAiC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,YAAY,CAAC;CACrB;AAUD,eAAO,MAAM,eAAe;;;;;;;;;;;;;CAa3B,CAAC;AAEF,eAAO,MAAM,WAAW,MAAM,CAAC;AAE/B,eAAO,MAAM,0BAA0B,6EAyBrC,CAAC;AAIH,eAAO,MAAM,uBAAuB,6EAYlC,CAAC;AAIH,eAAO,MAAM,2BAA2B,4EAuBtC,CAAC;AAIH,eAAO,MAAM,aAAa,6EAAe,CAAC;AAE1C,eAAO,MAAM,gBAAgB,oRA+I5B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Details.styles.js","sourceRoot":"","sources":["../../../src/components/Details/Details.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css, DefaultTheme } from 'styled-components';\n\nimport {\n  calculateFontSize,\n  defaultThemeProp,\n  StyledFieldValue,\n  StyledStackedFieldValue,\n  StyledFieldValueList,\n  StyledFieldValueListProps,\n  StyledIcon,\n  FontSize,\n  PropsWithDefaults,\n  useDirection,\n  StyledButton\n} from '@pega/cosmos-react-core';\n\ninterface StyledDetailListProps extends StyledFieldValueListProps {\n  /** Whether individual list items all have labels stacks on top */\n  stacked?: boolean;\n  /** Whether the list is a flex row of other lists */\n  flex?: boolean;\n  /** Whether the list is nested */\n  nested?: boolean;\n  /** The character length applied to all list labels */\n  labelLength?: number;\n  /**\n   * Whether the list is wrapped to 1 column\n   * @default false\n   */\n  wrapped?: boolean;\n  /**\n   * Number of columns in the list\n   * @default 1\n   */\n  columnCount?: 1 | 2 | 3;\n  /**\n   * Whether to apply narrow list styles\n   * @default false\n   */\n  narrow?: boolean;\n  theme: DefaultTheme;\n}\n\ntype StyledDetailListPropsWithDefaults = PropsWithDefaults<\n  StyledDetailListProps,\n  'wrapped' | 'columnCount'\n>;\n\nconst verticalGapSpacingMultiplier = 1;\n\n// colWidth reduces by 20% as column count increases\nexport const colCountChWidth = {\n  '1': {\n    containerWidth: 100,\n    colWidth: 100\n  },\n  '2': {\n    containerWidth: 80 * 2,\n    colWidth: 80\n  },\n  '3': {\n    containerWidth: 64 * 3,\n    colWidth: 64\n  }\n};\n\nexport const flexGapProp = 5.5;\n\nexport const StyledFieldValueGroupLabel = styled.div(({ theme }) => {\n  const {\n    base: { spacing, animation }\n  } = theme;\n  const { rtl } = useDirection();\n\n  return css`\n    width: 100%;\n    grid-column-start: 1;\n    grid-column-end: -1;\n    margin-block-end: calc(0.5 * ${spacing});\n    margin-block-start: calc(1.5 * ${spacing});\n\n    ${StyledButton} ${StyledIcon} {\n      transition: transform ${animation.speed} ${animation.timing.ease};\n    }\n\n    ${StyledButton}[aria-expanded='true'] ${StyledIcon} {\n      transform: rotate(90deg);\n    }\n\n    ${StyledButton}[aria-expanded='false'] ${StyledIcon} {\n      transform: rotate(${rtl ? 180 : 0}deg);\n    }\n  `;\n});\n\nStyledFieldValueGroupLabel.defaultProps = defaultThemeProp;\n\nexport const StyledDetailDescription = styled.div(({ theme }) => {\n  const {\n    base: {\n      spacing,\n      'content-width': { xl }\n    }\n  } = theme;\n\n  return css`\n    max-width: ${xl};\n    margin-block: calc(1.5 * ${spacing});\n  `;\n});\n\nStyledDetailDescription.defaultProps = defaultThemeProp;\n\nexport const StyledHighlightedDetailList = styled.dl(({ theme }) => {\n  const {\n    base: { spacing, palette }\n  } = theme;\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    max-width: ${colCountChWidth[3].containerWidth}ch;\n    padding-block-end: calc(1.5 * ${spacing});\n\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    + hr {\n      border-top: unset;\n      border-radius: unset;\n      border-style: unset;\n      border-bottom: 0.0625rem solid ${palette['border-line']};\n      margin-block-end: calc(1.5 * ${spacing});\n    }\n  `;\n});\n\nStyledHighlightedDetailList.defaultProps = defaultThemeProp;\n\nexport const StyledDetails = styled.div``;\n\nexport const StyledDetailList = styled(StyledFieldValueList)<StyledDetailListPropsWithDefaults>(\n  ({\n    stacked,\n    flex,\n    nested,\n    labelLength,\n    variant,\n    theme,\n    wrapped = false,\n    columnCount = 1,\n    narrow = false\n  }): any => {\n    const {\n      base: { spacing }\n    } = theme;\n\n    const isValueComparison = variant === 'value-comparison';\n    const containerWidthCh = colCountChWidth[columnCount].containerWidth;\n    const columnWidthCh = colCountChWidth[columnCount].colWidth;\n    const containerWidthMinusLabel = `${containerWidthCh - (labelLength ?? 0)}ch`;\n\n    return css`\n      /* Top Level Styles */\n      ${!nested &&\n      css`\n        ${StyledFieldValue} {\n          word-break: break-word;\n          overflow: auto;\n        }\n\n        ${StyledStackedFieldValue} {\n          grid-column: 1 / -1;\n        }\n      `}\n\n      /* Nested List */\n      ${nested &&\n      css`\n        grid-column: 1 / -1;\n      `}\n\n      /* As Field Grid */\n      ${!flex &&\n      css`\n        display: grid;\n        grid-template-columns: minmax(14ch, ${labelLength}ch) minmax(14ch, 1fr);\n        column-gap: calc(2 * ${spacing});\n        row-gap: calc(${verticalGapSpacingMultiplier} * ${spacing});\n\n        ${stacked &&\n        css`\n          grid-template-columns: minmax(0, 1fr);\n          row-gap: 0;\n\n          ${!isValueComparison &&\n          css`\n            > dt,\n            ${StyledStackedFieldValue} {\n              margin-block-start: calc(${verticalGapSpacingMultiplier} * ${spacing});\n            }\n          `}\n        `}\n\n        > ${StyledStackedFieldValue} {\n          max-width: ${containerWidthCh}ch;\n        }\n\n        > ${StyledFieldValue} {\n          max-width: calc(${containerWidthMinusLabel} - calc(2 * ${spacing}));\n\n          ${!isValueComparison &&\n          css`\n            width: 100%;\n          `}\n        }\n\n        ${isValueComparison &&\n        css`\n          grid-template-columns: auto auto;\n          column-gap: 0;\n          row-gap: calc(0.5 * ${spacing});\n          max-width: ${containerWidthCh}ch;\n\n          > dd {\n            display: flex;\n            flex-direction: column;\n            justify-content: flex-end;\n          }\n        `}\n\n        > ${StyledDetails} {\n          grid-column: 1 / -1;\n        }\n      `}\n\n      /* As Flex Container */\n      ${flex &&\n      css`\n        display: flex;\n        flex-direction: ${wrapped ? 'column' : 'row'};\n        column-gap: calc(${flexGapProp} * ${spacing});\n        align-items: flex-start;\n        max-width: ${containerWidthCh}ch;\n\n        ${!wrapped &&\n        css`\n          > * {\n            width: 100%;\n            max-width: ${columnWidthCh}%;\n          }\n        `}\n\n        > ${StyledDetails} {\n          width: 100%;\n\n          ${wrapped &&\n          !stacked &&\n          css`\n            + ${StyledDetails} > ${StyledDetailList}:first-child {\n              margin-block-start: ${theme.base.spacing};\n            }\n          `}\n        }\n      `}\n\n      /* Key / Group Label Spacing */\n      ${stacked &&\n      !isValueComparison &&\n      css`\n        > dt {\n          margin-block-start: calc(${verticalGapSpacingMultiplier} * ${spacing});\n        }\n      `}\n\n      /* Responsive behavior */\n      ${narrow &&\n      !stacked &&\n      !isValueComparison &&\n      css`\n        grid-template-columns: minmax(14ch, ${labelLength}ch) minmax(50%, 1fr);\n      `}\n    `;\n  }\n);\n\nStyledDetailList.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"Details.styles.js","sourceRoot":"","sources":["../../../src/components/Details/Details.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EACL,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,uBAAuB,EACvB,oBAAoB,EACpB,UAAU,EACV,YAAY,EACZ,YAAY,EACb,MAAM,yBAAyB,CAAC;AAuCjC,MAAM,4BAA4B,GAAG,CAAC,CAAC;AAEvC,oDAAoD;AACpD,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,GAAG,EAAE;QACH,cAAc,EAAE,GAAG;QACnB,QAAQ,EAAE,GAAG;KACd;IACD,GAAG,EAAE;QACH,cAAc,EAAE,EAAE,GAAG,CAAC;QACtB,QAAQ,EAAE,EAAE;KACb;IACD,GAAG,EAAE;QACH,cAAc,EAAE,EAAE,GAAG,CAAC;QACtB,QAAQ,EAAE,EAAE;KACb;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAC;AAE/B,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACjE,MAAM,EACJ,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,EAC7B,GAAG,KAAK,CAAC;IACV,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAE/B,OAAO,GAAG,CAAA;;;;mCAIuB,OAAO;qCACL,OAAO;;MAEtC,YAAY,IAAI,UAAU;8BACF,SAAS,CAAC,KAAK,IAAI,SAAS,CAAC,MAAM,CAAC,IAAI;;;MAGhE,YAAY,0BAA0B,UAAU;;;;MAIhD,YAAY,2BAA2B,UAAU;0BAC7B,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;;GAEpC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,0BAA0B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3D,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC9D,MAAM,EACJ,IAAI,EAAE,EACJ,OAAO,EACP,eAAe,EAAE,EAAE,EAAE,EAAE,EACxB,EACF,GAAG,KAAK,CAAC;IAEV,OAAO,GAAG,CAAA;iBACK,EAAE;+BACY,OAAO;GACnC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,2BAA2B,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACjE,MAAM,EACJ,IAAI,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,EAC3B,GAAG,KAAK,CAAC;IACV,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAEtF,OAAO,GAAG,CAAA;iBACK,eAAe,CAAC,CAAC,CAAC,CAAC,cAAc;oCACd,OAAO;;;mBAGxB,QAAQ,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;qBACzD,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;;;;;;;uCAOrB,OAAO,CAAC,aAAa,CAAC;qCACxB,OAAO;;GAEzC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,2BAA2B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5D,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAE1C,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,oBAAoB,CAAC,CAC1D,CAAC,EACC,OAAO,EACP,IAAI,EACJ,MAAM,EACN,WAAW,EACX,OAAO,EACP,KAAK,EACL,OAAO,GAAG,KAAK,EACf,WAAW,GAAG,CAAC,EACf,MAAM,GAAG,KAAK,EACf,EAAO,EAAE;IACR,MAAM,EACJ,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,GAAG,KAAK,CAAC;IAEV,MAAM,iBAAiB,GAAG,OAAO,KAAK,kBAAkB,CAAC;IACzD,MAAM,gBAAgB,GAAG,eAAe,CAAC,WAAW,CAAC,CAAC,cAAc,CAAC;IACrE,MAAM,aAAa,GAAG,eAAe,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC;IAC5D,MAAM,wBAAwB,GAAG,GAAG,gBAAgB,GAAG,CAAC,WAAW,IAAI,CAAC,CAAC,IAAI,CAAC;IAE9E,OAAO,GAAG,CAAA;;QAEN,CAAC,MAAM;QACT,GAAG,CAAA;UACC,gBAAgB;;;;;UAKhB,uBAAuB;;;OAG1B;;;QAGC,MAAM;QACR,GAAG,CAAA;;OAEF;;;QAGC,CAAC,IAAI;QACP,GAAG,CAAA;;8CAEqC,WAAW;+BAC1B,OAAO;wBACd,4BAA4B,MAAM,OAAO;;UAEvD,OAAO;YACT,GAAG,CAAA;;;;YAIC,CAAC,iBAAiB;gBACpB,GAAG,CAAA;;cAEC,uBAAuB;yCACI,4BAA4B,MAAM,OAAO;;WAEvE;SACF;;YAEG,uBAAuB;uBACZ,gBAAgB;;;YAG3B,gBAAgB;4BACA,wBAAwB,eAAe,OAAO;;YAE9D,CAAC,iBAAiB;YACpB,GAAG,CAAA;;WAEF;;;UAGD,iBAAiB;YACnB,GAAG,CAAA;;;gCAGqB,OAAO;uBAChB,gBAAgB;;;;;;;SAO9B;;YAEG,aAAa;;;OAGlB;;;QAGC,IAAI;QACN,GAAG,CAAA;;0BAEiB,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK;2BACzB,WAAW,MAAM,OAAO;;qBAE9B,gBAAgB;;UAE3B,CAAC,OAAO;YACV,GAAG,CAAA;;;yBAGc,aAAa;;SAE7B;;YAEG,aAAa;;;YAGb,OAAO;YACT,CAAC,OAAO;YACR,GAAG,CAAA;gBACG,aAAa,MAAM,gBAAgB;oCACf,KAAK,CAAC,IAAI,CAAC,OAAO;;WAE3C;;OAEJ;;;QAGC,OAAO;QACT,CAAC,iBAAiB;QAClB,GAAG,CAAA;;qCAE4B,4BAA4B,MAAM,OAAO;;OAEvE;;;QAGC,MAAM;QACR,CAAC,OAAO;QACR,CAAC,iBAAiB;QAClB,GAAG,CAAA;8CACqC,WAAW;OAClD;KACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\n\nimport {\n  calculateFontSize,\n  defaultThemeProp,\n  StyledFieldValue,\n  StyledStackedFieldValue,\n  StyledFieldValueList,\n  StyledIcon,\n  useDirection,\n  StyledButton\n} from '@pega/cosmos-react-core';\nimport type {\n  StyledFieldValueListProps,\n  FontSize,\n  PropsWithDefaults\n} from '@pega/cosmos-react-core';\n\ninterface StyledDetailListProps extends StyledFieldValueListProps {\n  /** Whether individual list items all have labels stacks on top */\n  stacked?: boolean;\n  /** Whether the list is a flex row of other lists */\n  flex?: boolean;\n  /** Whether the list is nested */\n  nested?: boolean;\n  /** The character length applied to all list labels */\n  labelLength?: number;\n  /**\n   * Whether the list is wrapped to 1 column\n   * @default false\n   */\n  wrapped?: boolean;\n  /**\n   * Number of columns in the list\n   * @default 1\n   */\n  columnCount?: 1 | 2 | 3;\n  /**\n   * Whether to apply narrow list styles\n   * @default false\n   */\n  narrow?: boolean;\n  theme: DefaultTheme;\n}\n\ntype StyledDetailListPropsWithDefaults = PropsWithDefaults<\n  StyledDetailListProps,\n  'wrapped' | 'columnCount'\n>;\n\nconst verticalGapSpacingMultiplier = 1;\n\n// colWidth reduces by 20% as column count increases\nexport const colCountChWidth = {\n  '1': {\n    containerWidth: 100,\n    colWidth: 100\n  },\n  '2': {\n    containerWidth: 80 * 2,\n    colWidth: 80\n  },\n  '3': {\n    containerWidth: 64 * 3,\n    colWidth: 64\n  }\n};\n\nexport const flexGapProp = 5.5;\n\nexport const StyledFieldValueGroupLabel = styled.div(({ theme }) => {\n  const {\n    base: { spacing, animation }\n  } = theme;\n  const { rtl } = useDirection();\n\n  return css`\n    width: 100%;\n    grid-column-start: 1;\n    grid-column-end: -1;\n    margin-block-end: calc(0.5 * ${spacing});\n    margin-block-start: calc(1.5 * ${spacing});\n\n    ${StyledButton} ${StyledIcon} {\n      transition: transform ${animation.speed} ${animation.timing.ease};\n    }\n\n    ${StyledButton}[aria-expanded='true'] ${StyledIcon} {\n      transform: rotate(90deg);\n    }\n\n    ${StyledButton}[aria-expanded='false'] ${StyledIcon} {\n      transform: rotate(${rtl ? 180 : 0}deg);\n    }\n  `;\n});\n\nStyledFieldValueGroupLabel.defaultProps = defaultThemeProp;\n\nexport const StyledDetailDescription = styled.div(({ theme }) => {\n  const {\n    base: {\n      spacing,\n      'content-width': { xl }\n    }\n  } = theme;\n\n  return css`\n    max-width: ${xl};\n    margin-block: calc(1.5 * ${spacing});\n  `;\n});\n\nStyledDetailDescription.defaultProps = defaultThemeProp;\n\nexport const StyledHighlightedDetailList = styled.dl(({ theme }) => {\n  const {\n    base: { spacing, palette }\n  } = theme;\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    max-width: ${colCountChWidth[3].containerWidth}ch;\n    padding-block-end: calc(1.5 * ${spacing});\n\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    + hr {\n      border-top: unset;\n      border-radius: unset;\n      border-style: unset;\n      border-bottom: 0.0625rem solid ${palette['border-line']};\n      margin-block-end: calc(1.5 * ${spacing});\n    }\n  `;\n});\n\nStyledHighlightedDetailList.defaultProps = defaultThemeProp;\n\nexport const StyledDetails = styled.div``;\n\nexport const StyledDetailList = styled(StyledFieldValueList)<StyledDetailListPropsWithDefaults>(\n  ({\n    stacked,\n    flex,\n    nested,\n    labelLength,\n    variant,\n    theme,\n    wrapped = false,\n    columnCount = 1,\n    narrow = false\n  }): any => {\n    const {\n      base: { spacing }\n    } = theme;\n\n    const isValueComparison = variant === 'value-comparison';\n    const containerWidthCh = colCountChWidth[columnCount].containerWidth;\n    const columnWidthCh = colCountChWidth[columnCount].colWidth;\n    const containerWidthMinusLabel = `${containerWidthCh - (labelLength ?? 0)}ch`;\n\n    return css`\n      /* Top Level Styles */\n      ${!nested &&\n      css`\n        ${StyledFieldValue} {\n          word-break: break-word;\n          overflow: auto;\n        }\n\n        ${StyledStackedFieldValue} {\n          grid-column: 1 / -1;\n        }\n      `}\n\n      /* Nested List */\n      ${nested &&\n      css`\n        grid-column: 1 / -1;\n      `}\n\n      /* As Field Grid */\n      ${!flex &&\n      css`\n        display: grid;\n        grid-template-columns: minmax(14ch, ${labelLength}ch) minmax(14ch, 1fr);\n        column-gap: calc(2 * ${spacing});\n        row-gap: calc(${verticalGapSpacingMultiplier} * ${spacing});\n\n        ${stacked &&\n        css`\n          grid-template-columns: minmax(0, 1fr);\n          row-gap: 0;\n\n          ${!isValueComparison &&\n          css`\n            > dt,\n            ${StyledStackedFieldValue} {\n              margin-block-start: calc(${verticalGapSpacingMultiplier} * ${spacing});\n            }\n          `}\n        `}\n\n        > ${StyledStackedFieldValue} {\n          max-width: ${containerWidthCh}ch;\n        }\n\n        > ${StyledFieldValue} {\n          max-width: calc(${containerWidthMinusLabel} - calc(2 * ${spacing}));\n\n          ${!isValueComparison &&\n          css`\n            width: 100%;\n          `}\n        }\n\n        ${isValueComparison &&\n        css`\n          grid-template-columns: auto auto;\n          column-gap: 0;\n          row-gap: calc(0.5 * ${spacing});\n          max-width: ${containerWidthCh}ch;\n\n          > dd {\n            display: flex;\n            flex-direction: column;\n            justify-content: flex-end;\n          }\n        `}\n\n        > ${StyledDetails} {\n          grid-column: 1 / -1;\n        }\n      `}\n\n      /* As Flex Container */\n      ${flex &&\n      css`\n        display: flex;\n        flex-direction: ${wrapped ? 'column' : 'row'};\n        column-gap: calc(${flexGapProp} * ${spacing});\n        align-items: flex-start;\n        max-width: ${containerWidthCh}ch;\n\n        ${!wrapped &&\n        css`\n          > * {\n            width: 100%;\n            max-width: ${columnWidthCh}%;\n          }\n        `}\n\n        > ${StyledDetails} {\n          width: 100%;\n\n          ${wrapped &&\n          !stacked &&\n          css`\n            + ${StyledDetails} > ${StyledDetailList}:first-child {\n              margin-block-start: ${theme.base.spacing};\n            }\n          `}\n        }\n      `}\n\n      /* Key / Group Label Spacing */\n      ${stacked &&\n      !isValueComparison &&\n      css`\n        > dt {\n          margin-block-start: calc(${verticalGapSpacingMultiplier} * ${spacing});\n        }\n      `}\n\n      /* Responsive behavior */\n      ${narrow &&\n      !stacked &&\n      !isValueComparison &&\n      css`\n        grid-template-columns: minmax(14ch, ${labelLength}ch) minmax(50%, 1fr);\n      `}\n    `;\n  }\n);\n\nStyledDetailList.defaultProps = defaultThemeProp;\n"]}

package/lib/components/Glimpse/Glimpse.d.ts

@@ -1,5 +1,5 @@
-import { FunctionComponent, MouseEventHandler, Ref } from 'react';
-import { BaseProps, ButtonProps, FieldValueListProps, ForwardProps, InfoDialogProps, NoChildrenProp, OmitStrict } from '@pega/cosmos-react-core';
+import type { FunctionComponent, MouseEventHandler, Ref } from 'react';
+import type { BaseProps, ButtonProps, FieldValueListProps, ForwardProps, InfoDialogProps, NoChildrenProp, OmitStrict } from '@pega/cosmos-react-core';
 type InfoDialogSummaryHeading = Extract<InfoDialogProps['heading'], object>;
 export interface GlimpseProps extends BaseProps, OmitStrict<InfoDialogProps, 'children'>, NoChildrenProp {
     /** The unique id for the operator. */

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

@@ -1 +1 @@
-{"version":3,"file":"Glimpse.d.ts","sourceRoot":"","sources":["../../../src/components/Glimpse/Glimpse.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,iBAAiB,EAEjB,GAAG,EACJ,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,SAAS,EAET,WAAW,EAEX,mBAAmB,EAEnB,YAAY,EAEZ,eAAe,EACf,cAAc,EACd,UAAU,EAEX,MAAM,yBAAyB,CAAC;AAEjC,KAAK,wBAAwB,GAAG,OAAO,CAAC,eAAe,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC,CAAC;AAE5E,MAAM,WAAW,YACf,SAAQ,SAAS,EACf,UAAU,CAAC,eAAe,EAAE,UAAU,CAAC,EACvC,cAAc;IAChB,sCAAsC;IACtC,EAAE,EAAE,MAAM,CAAC;IACX,qDAAqD;IACrD,OAAO,CAAC,EAAE,wBAAwB,CAAC;IACnC,qDAAqD;IACrD,MAAM,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACvC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,oGAAoG;IACpG,aAAa,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACrD,gGAAgG;IAChG,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CAC5B;AAED,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,CA0C1D,CAAC;AAEH,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Glimpse.d.ts","sourceRoot":"","sources":["../../../src/components/Glimpse/Glimpse.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAGpG,OAAO,KAAK,EACV,SAAS,EACT,WAAW,EACX,mBAAmB,EACnB,YAAY,EACZ,eAAe,EACf,cAAc,EACd,UAAU,EACX,MAAM,yBAAyB,CAAC;AAEjC,KAAK,wBAAwB,GAAG,OAAO,CAAC,eAAe,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC,CAAC;AAE5E,MAAM,WAAW,YACf,SAAQ,SAAS,EACf,UAAU,CAAC,eAAe,EAAE,UAAU,CAAC,EACvC,cAAc;IAChB,sCAAsC;IACtC,EAAE,EAAE,MAAM,CAAC;IACX,qDAAqD;IACrD,OAAO,CAAC,EAAE,wBAAwB,CAAC;IACnC,qDAAqD;IACrD,MAAM,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACvC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,oGAAoG;IACpG,aAAa,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACrD,gGAAgG;IAChG,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CAC5B;AAED,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,CA0C1D,CAAC;AAEH,eAAe,OAAO,CAAC"}

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,EACL,UAAU,EAMX,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,MAAM,EAEN,cAAc,EAEd,IAAI,EAEJ,UAAU,EAIV,OAAO,EACR,MAAM,yBAAyB,CAAC;AAsBjC,MAAM,OAAO,GAAmD,UAAU,CAAC,SAAS,OAAO,CACzF,EACE,OAAO,EACP,MAAM,GAAG,EAAE,EACX,MAAM,EACN,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,aAAa,EACb,GAAG,SAAS,EACkB,EAChC,GAAwB;IAExB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,KAAC,UAAU,OACL,SAAS,EACb,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,GAAG,YAEP,CAAC,OAAO,IAAI,QAAQ,IAAI,MAAM,CAAC,MAAM,IAAI,aAAa,IAAI,IAAI,CAAC,CAAC,CAAC,CAChE,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,aAClE,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,KAAC,cAAc,IAAC,MAAM,EAAE,MAAM,GAAI,EACvD,CAAC,aAAa,IAAI,IAAI,CAAC,IAAI,CAC1B,KAAC,MAAM,IACL,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE;wBAC5C,aAAa,EAAE,CAAC,CAAC,CAAC,CAAC;wBACnB,SAAS,EAAE,CAAC;oBACd,CAAC,YAEA,CAAC,CAAC,cAAc,CAAC,GACX,CACV,IACI,CACR,CAAC,CAAC,CAAC,IAAI,GACG,CACd,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,OAAO,CAAC","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  MouseEvent,\n  MouseEventHandler,\n  PropsWithoutRef,\n  Ref\n} from 'react';\n\nimport {\n  BaseProps,\n  Button,\n  ButtonProps,\n  FieldValueList,\n  FieldValueListProps,\n  Flex,\n  ForwardProps,\n  InfoDialog,\n  InfoDialogProps,\n  NoChildrenProp,\n  OmitStrict,\n  useI18n\n} from '@pega/cosmos-react-core';\n\ntype InfoDialogSummaryHeading = Extract<InfoDialogProps['heading'], object>;\n\nexport interface GlimpseProps\n  extends BaseProps,\n    OmitStrict<InfoDialogProps, 'children'>,\n    NoChildrenProp {\n  /** The unique id for the operator. */\n  id: string;\n  /** Primary, secondary and avatar for the glimpse. */\n  heading?: InfoDialogSummaryHeading;\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  /** Callback for click event on View profile button. Passing this will render View profile button */\n  onViewProfile?: MouseEventHandler<HTMLButtonElement>;\n  /** A URL location to navigate to. Passing an href will render View profile button as a link. */\n  href?: ButtonProps['href'];\n}\n\nconst Glimpse: FunctionComponent<GlimpseProps & ForwardProps> = forwardRef(function Glimpse(\n  {\n    heading,\n    fields = [],\n    target,\n    onDismiss,\n    href,\n    progress,\n    onViewProfile,\n    ...restProps\n  }: PropsWithoutRef<GlimpseProps>,\n  ref: GlimpseProps['ref']\n) {\n  const t = useI18n();\n\n  return (\n    <InfoDialog\n      {...restProps}\n      target={target}\n      heading={heading}\n      progress={progress}\n      onDismiss={onDismiss}\n      ref={ref}\n    >\n      {!heading || progress || fields.length || onViewProfile || href ? (\n        <Flex container={{ direction: 'column', alignItems: 'start', gap: 2 }}>\n          {fields.length > 0 && <FieldValueList fields={fields} />}\n          {(onViewProfile || href) && (\n            <Button\n              href={href}\n              onClick={(e: MouseEvent<HTMLButtonElement>) => {\n                onViewProfile?.(e);\n                onDismiss();\n              }}\n            >\n              {t('view_profile')}\n            </Button>\n          )}\n        </Flex>\n      ) : null}\n    </InfoDialog>\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,EAAE,MAAM,OAAO,CAAC;AAGnC,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AA+B5F,MAAM,OAAO,GAAmD,UAAU,CAAC,SAAS,OAAO,CACzF,EACE,OAAO,EACP,MAAM,GAAG,EAAE,EACX,MAAM,EACN,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,aAAa,EACb,GAAG,SAAS,EACkB,EAChC,GAAwB;IAExB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,KAAC,UAAU,OACL,SAAS,EACb,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,GAAG,YAEP,CAAC,OAAO,IAAI,QAAQ,IAAI,MAAM,CAAC,MAAM,IAAI,aAAa,IAAI,IAAI,CAAC,CAAC,CAAC,CAChE,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,aAClE,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,KAAC,cAAc,IAAC,MAAM,EAAE,MAAM,GAAI,EACvD,CAAC,aAAa,IAAI,IAAI,CAAC,IAAI,CAC1B,KAAC,MAAM,IACL,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE;wBAC5C,aAAa,EAAE,CAAC,CAAC,CAAC,CAAC;wBACnB,SAAS,EAAE,CAAC;oBACd,CAAC,YAEA,CAAC,CAAC,cAAc,CAAC,GACX,CACV,IACI,CACR,CAAC,CAAC,CAAC,IAAI,GACG,CACd,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,OAAO,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { FunctionComponent, MouseEvent, MouseEventHandler, PropsWithoutRef, Ref } from 'react';\n\nimport { Button, FieldValueList, Flex, InfoDialog, useI18n } from '@pega/cosmos-react-core';\nimport type {\n  BaseProps,\n  ButtonProps,\n  FieldValueListProps,\n  ForwardProps,\n  InfoDialogProps,\n  NoChildrenProp,\n  OmitStrict\n} from '@pega/cosmos-react-core';\n\ntype InfoDialogSummaryHeading = Extract<InfoDialogProps['heading'], object>;\n\nexport interface GlimpseProps\n  extends BaseProps,\n    OmitStrict<InfoDialogProps, 'children'>,\n    NoChildrenProp {\n  /** The unique id for the operator. */\n  id: string;\n  /** Primary, secondary and avatar for the glimpse. */\n  heading?: InfoDialogSummaryHeading;\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  /** Callback for click event on View profile button. Passing this will render View profile button */\n  onViewProfile?: MouseEventHandler<HTMLButtonElement>;\n  /** A URL location to navigate to. Passing an href will render View profile button as a link. */\n  href?: ButtonProps['href'];\n}\n\nconst Glimpse: FunctionComponent<GlimpseProps & ForwardProps> = forwardRef(function Glimpse(\n  {\n    heading,\n    fields = [],\n    target,\n    onDismiss,\n    href,\n    progress,\n    onViewProfile,\n    ...restProps\n  }: PropsWithoutRef<GlimpseProps>,\n  ref: GlimpseProps['ref']\n) {\n  const t = useI18n();\n\n  return (\n    <InfoDialog\n      {...restProps}\n      target={target}\n      heading={heading}\n      progress={progress}\n      onDismiss={onDismiss}\n      ref={ref}\n    >\n      {!heading || progress || fields.length || onViewProfile || href ? (\n        <Flex container={{ direction: 'column', alignItems: 'start', gap: 2 }}>\n          {fields.length > 0 && <FieldValueList fields={fields} />}\n          {(onViewProfile || href) && (\n            <Button\n              href={href}\n              onClick={(e: MouseEvent<HTMLButtonElement>) => {\n                onViewProfile?.(e);\n                onDismiss();\n              }}\n            >\n              {t('view_profile')}\n            </Button>\n          )}\n        </Flex>\n      ) : null}\n    </InfoDialog>\n  );\n});\n\nexport default Glimpse;\n"]}

package/lib/components/IntelligentGuidance/IntelligentGuidance.d.ts

@@ -1,5 +1,5 @@
-import { FunctionComponent } from 'react';
-import { ForwardProps } from '@pega/cosmos-react-core';
+import type { FunctionComponent } from 'react';
+import type { ForwardProps } from '@pega/cosmos-react-core';
 import type IntelligentGuidanceProps from './IntelligentGuidance.types';
 declare const IntelligentGuidance: FunctionComponent<IntelligentGuidanceProps & ForwardProps>;
 export default IntelligentGuidance;

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

@@ -1 +1 @@
-{"version":3,"file":"IntelligentGuidance.d.ts","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAMlB,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,YAAY,EAYb,MAAM,yBAAyB,CAAC;AAQjC,OAAO,KAAK,wBAAwB,MAAM,6BAA6B,CAAC;AAExE,QAAA,MAAM,mBAAmB,EAAE,iBAAiB,CAAC,wBAAwB,GAAG,YAAY,CA8InF,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"IntelligentGuidance.d.ts","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiB,iBAAiB,EAAkC,MAAM,OAAO,CAAC;AAc9F,OAAO,KAAK,EAAE,YAAY,EAAmB,MAAM,yBAAyB,CAAC;AAQ7E,OAAO,KAAK,wBAAwB,MAAM,6BAA6B,CAAC;AAExE,QAAA,MAAM,mBAAmB,EAAE,iBAAiB,CAAC,wBAAwB,GAAG,YAAY,CA8InF,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/lib/components/IntelligentGuidance/IntelligentGuidance.js.map

@@ -1 +1 @@
-{"version":3,"file":"IntelligentGuidance.js","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  CSSProperties,\n  forwardRef,\n  FunctionComponent,\n  KeyboardEvent,\n  PropsWithoutRef,\n  useLayoutEffect,\n  useRef,\n  useState\n} from 'react';\n\nimport {\n  ForwardProps,\n  Icon,\n  SummaryListItem,\n  useI18n,\n  useAfterInitialEffect,\n  Text,\n  Tabs,\n  CardHeader,\n  TabPanel,\n  Flex,\n  Count,\n  Actions\n} from '@pega/cosmos-react-core';\n\nimport {\n  StyledIntelligentGuidanceList,\n  StyledIntelligentGuidance,\n  StyledNew,\n  StyledBorderLine\n} from './IntelligentGuidance.styles';\nimport type IntelligentGuidanceProps from './IntelligentGuidance.types';\n\nconst IntelligentGuidance: FunctionComponent<IntelligentGuidanceProps & ForwardProps> = forwardRef(\n  function IntelligentGuidance(\n    {\n      items,\n      previousItems,\n      heading,\n      isCollapsed,\n      onExpandCollapse,\n      ...restProps\n    }: PropsWithoutRef<IntelligentGuidanceProps>,\n    ref: IntelligentGuidanceProps['ref']\n  ) {\n    const t = useI18n();\n    const headerRef = useRef<HTMLDivElement>(null);\n    const toggleButtonRef = useRef<HTMLButtonElement>(null);\n    const [currentTab, setCurrentTab] = useState('current');\n\n    const listItems: SummaryListItem[] = (\n      currentTab === 'current' ? items : previousItems ?? []\n    ).map(item => {\n      return {\n        id: item.id,\n        visual: <Icon name={item.icon} />,\n        primary: (\n          <>\n            {item.label}\n            {item.new && (\n              <>\n                <StyledNew>{t('new')}</StyledNew>\n                {/* Can remove StyledBorderLine when Firefox supports :has selector. */}\n                <StyledBorderLine />\n              </>\n            )}\n          </>\n        ),\n        secondary: <Text variant='secondary'>{item.type}</Text>,\n        contextualLabel: item.label,\n        actions: item.onDismiss\n          ? [\n              {\n                text: t('dismiss'),\n                id: item.id,\n                icon: 'times',\n                onClick: (id, e) => {\n                  e.stopPropagation();\n                  item.onDismiss?.(id, e);\n                }\n              }\n            ]\n          : undefined,\n        container: { colGap: 1 },\n        role: 'button',\n        tabIndex: 0,\n        'aria-label': t('continue_label_a11y', [item.label]),\n        onClick: item.onClick,\n        onKeyDown: (e: KeyboardEvent) => {\n          if (e.key === 'Enter') {\n            item.onClick(e);\n          }\n        }\n      };\n    });\n\n    const [headerHeight, setHeaderHeight] = useState(0);\n\n    useLayoutEffect(() => {\n      if (headerRef.current) {\n        setHeaderHeight(headerRef.current?.offsetHeight || 0);\n      }\n    }, [headerRef.current]);\n\n    // FIXME: This is a hack to get the Tooltip to reset its position when the list is toggled.\n    useAfterInitialEffect(() => {\n      if (toggleButtonRef.current && toggleButtonRef.current === document.activeElement) {\n        toggleButtonRef.current.blur();\n        setTimeout(() => {\n          toggleButtonRef.current?.focus();\n        }, 1000);\n      }\n    }, [isCollapsed]);\n\n    const intelligentGuidanceList = (\n      <StyledIntelligentGuidanceList items={listItems} noItemsText={t('no_recommendations')} />\n    );\n\n    return (\n      <StyledIntelligentGuidance\n        {...restProps}\n        ref={ref}\n        role='region'\n        aria-live='polite'\n        aria-relevant='all'\n        isCollapsed={isCollapsed}\n        hasItems={!!items.length}\n        style={{ '--headerHeight': `${headerHeight}px` } as CSSProperties}\n      >\n        <CardHeader ref={headerRef}>\n          <Flex container={{ alignItems: 'center', gap: 1 }}>\n            <Text variant='h2'>{heading}</Text>\n            <Count>{items.length + (previousItems?.length ?? 0)}</Count>\n          </Flex>\n          <Actions\n            items={[\n              {\n                text: t(isCollapsed ? 'expand' : 'collapse'),\n                id: 'IntelligentGuidanceButton',\n                icon: 'caret-down',\n                'aria-label': isCollapsed\n                  ? t('expand_noun', [heading])\n                  : t('collapse_noun', [heading]),\n                onClick: onExpandCollapse,\n                ref: toggleButtonRef\n              }\n            ]}\n          />\n        </CardHeader>\n        {previousItems ? (\n          <>\n            <Tabs\n              tabs={[\n                {\n                  id: 'current',\n                  name: t('current'),\n                  count: items.filter(item => item.new).length || undefined\n                },\n                {\n                  id: 'previous',\n                  name: t('previous'),\n                  count: previousItems.filter(item => item.new).length || undefined\n                }\n              ]}\n              currentTabId={currentTab}\n              onTabClick={setCurrentTab}\n            />\n            <TabPanel tabId={currentTab}>{intelligentGuidanceList}</TabPanel>\n          </>\n        ) : (\n          intelligentGuidanceList\n        )}\n      </StyledIntelligentGuidance>\n    );\n  }\n);\n\nexport default IntelligentGuidance;\n"]}
+{"version":3,"file":"IntelligentGuidance.js","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useLayoutEffect, useRef, useState } from 'react';\nimport type { CSSProperties, FunctionComponent, KeyboardEvent, PropsWithoutRef } from 'react';\n\nimport {\n  Icon,\n  useI18n,\n  useAfterInitialEffect,\n  Text,\n  Tabs,\n  CardHeader,\n  TabPanel,\n  Flex,\n  Count,\n  Actions\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, SummaryListItem } from '@pega/cosmos-react-core';\n\nimport {\n  StyledIntelligentGuidanceList,\n  StyledIntelligentGuidance,\n  StyledNew,\n  StyledBorderLine\n} from './IntelligentGuidance.styles';\nimport type IntelligentGuidanceProps from './IntelligentGuidance.types';\n\nconst IntelligentGuidance: FunctionComponent<IntelligentGuidanceProps & ForwardProps> = forwardRef(\n  function IntelligentGuidance(\n    {\n      items,\n      previousItems,\n      heading,\n      isCollapsed,\n      onExpandCollapse,\n      ...restProps\n    }: PropsWithoutRef<IntelligentGuidanceProps>,\n    ref: IntelligentGuidanceProps['ref']\n  ) {\n    const t = useI18n();\n    const headerRef = useRef<HTMLDivElement>(null);\n    const toggleButtonRef = useRef<HTMLButtonElement>(null);\n    const [currentTab, setCurrentTab] = useState('current');\n\n    const listItems: SummaryListItem[] = (\n      currentTab === 'current' ? items : previousItems ?? []\n    ).map(item => {\n      return {\n        id: item.id,\n        visual: <Icon name={item.icon} />,\n        primary: (\n          <>\n            {item.label}\n            {item.new && (\n              <>\n                <StyledNew>{t('new')}</StyledNew>\n                {/* Can remove StyledBorderLine when Firefox supports :has selector. */}\n                <StyledBorderLine />\n              </>\n            )}\n          </>\n        ),\n        secondary: <Text variant='secondary'>{item.type}</Text>,\n        contextualLabel: item.label,\n        actions: item.onDismiss\n          ? [\n              {\n                text: t('dismiss'),\n                id: item.id,\n                icon: 'times',\n                onClick: (id, e) => {\n                  e.stopPropagation();\n                  item.onDismiss?.(id, e);\n                }\n              }\n            ]\n          : undefined,\n        container: { colGap: 1 },\n        role: 'button',\n        tabIndex: 0,\n        'aria-label': t('continue_label_a11y', [item.label]),\n        onClick: item.onClick,\n        onKeyDown: (e: KeyboardEvent) => {\n          if (e.key === 'Enter') {\n            item.onClick(e);\n          }\n        }\n      };\n    });\n\n    const [headerHeight, setHeaderHeight] = useState(0);\n\n    useLayoutEffect(() => {\n      if (headerRef.current) {\n        setHeaderHeight(headerRef.current?.offsetHeight || 0);\n      }\n    }, [headerRef.current]);\n\n    // FIXME: This is a hack to get the Tooltip to reset its position when the list is toggled.\n    useAfterInitialEffect(() => {\n      if (toggleButtonRef.current && toggleButtonRef.current === document.activeElement) {\n        toggleButtonRef.current.blur();\n        setTimeout(() => {\n          toggleButtonRef.current?.focus();\n        }, 1000);\n      }\n    }, [isCollapsed]);\n\n    const intelligentGuidanceList = (\n      <StyledIntelligentGuidanceList items={listItems} noItemsText={t('no_recommendations')} />\n    );\n\n    return (\n      <StyledIntelligentGuidance\n        {...restProps}\n        ref={ref}\n        role='region'\n        aria-live='polite'\n        aria-relevant='all'\n        isCollapsed={isCollapsed}\n        hasItems={!!items.length}\n        style={{ '--headerHeight': `${headerHeight}px` } as CSSProperties}\n      >\n        <CardHeader ref={headerRef}>\n          <Flex container={{ alignItems: 'center', gap: 1 }}>\n            <Text variant='h2'>{heading}</Text>\n            <Count>{items.length + (previousItems?.length ?? 0)}</Count>\n          </Flex>\n          <Actions\n            items={[\n              {\n                text: t(isCollapsed ? 'expand' : 'collapse'),\n                id: 'IntelligentGuidanceButton',\n                icon: 'caret-down',\n                'aria-label': isCollapsed\n                  ? t('expand_noun', [heading])\n                  : t('collapse_noun', [heading]),\n                onClick: onExpandCollapse,\n                ref: toggleButtonRef\n              }\n            ]}\n          />\n        </CardHeader>\n        {previousItems ? (\n          <>\n            <Tabs\n              tabs={[\n                {\n                  id: 'current',\n                  name: t('current'),\n                  count: items.filter(item => item.new).length || undefined\n                },\n                {\n                  id: 'previous',\n                  name: t('previous'),\n                  count: previousItems.filter(item => item.new).length || undefined\n                }\n              ]}\n              currentTabId={currentTab}\n              onTabClick={setCurrentTab}\n            />\n            <TabPanel tabId={currentTab}>{intelligentGuidanceList}</TabPanel>\n          </>\n        ) : (\n          intelligentGuidanceList\n        )}\n      </StyledIntelligentGuidance>\n    );\n  }\n);\n\nexport default IntelligentGuidance;\n"]}

package/lib/components/IntelligentGuidance/IntelligentGuidance.types.d.ts

@@ -1,5 +1,5 @@
-import { MouseEvent, KeyboardEvent, Ref } from 'react';
-import { BaseProps, IconProps, NoChildrenProp } from '@pega/cosmos-react-core';
+import type { MouseEvent, KeyboardEvent, Ref } from 'react';
+import type { BaseProps, IconProps, NoChildrenProp } from '@pega/cosmos-react-core';
 export interface IntelligentGuidanceItemProps {
     /** Unique id for item */
     id: string;

package/lib/components/IntelligentGuidance/IntelligentGuidance.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IntelligentGuidance.types.d.ts","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE/E,MAAM,WAAW,4BAA4B;IAC3C,yBAAyB;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,mEAAmE;IACnE,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACxB,kCAAkC;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,2CAA2C;IAC3C,OAAO,EAAE,CAAC,CAAC,EAAE,UAAU,GAAG,aAAa,KAAK,IAAI,CAAC;IACjD,6CAA6C;IAC7C,SAAS,CAAC,EAAE,CACV,EAAE,EAAE,4BAA4B,CAAC,IAAI,CAAC,EACtC,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,GAAG,gBAAgB,CAAC,KACpE,IAAI,CAAC;IACV;;OAEG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC;CACf;AAED,MAAM,CAAC,OAAO,WAAW,wBAAyB,SAAQ,SAAS,EAAE,cAAc;IACjF,8BAA8B;IAC9B,KAAK,EAAE,4BAA4B,EAAE,CAAC;IACtC,uCAAuC;IACvC,aAAa,CAAC,EAAE,4BAA4B,EAAE,CAAC;IAC/C,mBAAmB;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,+DAA+D;IAC/D,WAAW,EAAE,OAAO,CAAC;IACrB,sDAAsD;IACtD,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B"}
+{"version":3,"file":"IntelligentGuidance.types.d.ts","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5D,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAEpF,MAAM,WAAW,4BAA4B;IAC3C,yBAAyB;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,mEAAmE;IACnE,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACxB,kCAAkC;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,2CAA2C;IAC3C,OAAO,EAAE,CAAC,CAAC,EAAE,UAAU,GAAG,aAAa,KAAK,IAAI,CAAC;IACjD,6CAA6C;IAC7C,SAAS,CAAC,EAAE,CACV,EAAE,EAAE,4BAA4B,CAAC,IAAI,CAAC,EACtC,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,GAAG,gBAAgB,CAAC,KACpE,IAAI,CAAC;IACV;;OAEG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC;CACf;AAED,MAAM,CAAC,OAAO,WAAW,wBAAyB,SAAQ,SAAS,EAAE,cAAc;IACjF,8BAA8B;IAC9B,KAAK,EAAE,4BAA4B,EAAE,CAAC;IACtC,uCAAuC;IACvC,aAAa,CAAC,EAAE,4BAA4B,EAAE,CAAC;IAC/C,mBAAmB;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,+DAA+D;IAC/D,WAAW,EAAE,OAAO,CAAC;IACrB,sDAAsD;IACtD,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B"}

package/lib/components/IntelligentGuidance/IntelligentGuidance.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"IntelligentGuidance.types.js","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.types.ts"],"names":[],"mappings":"","sourcesContent":["import { MouseEvent, KeyboardEvent, Ref } from 'react';\n\nimport { BaseProps, IconProps, NoChildrenProp } from '@pega/cosmos-react-core';\n\nexport interface IntelligentGuidanceItemProps {\n  /** Unique id for item */\n  id: string;\n  /** The label text of the item. */\n  label: string;\n  /** Name of the icon (to be selected from default Pega icon set) */\n  icon: IconProps['name'];\n  /** Represents the type of task */\n  type: string;\n  /** Click handler for the action button. */\n  onClick: (e: MouseEvent | KeyboardEvent) => void;\n  /** Dismiss handler for the action button. */\n  onDismiss?: (\n    id: IntelligentGuidanceItemProps['id'],\n    e: MouseEvent<HTMLButtonElement | HTMLAnchorElement | HTMLInputElement>\n  ) => void;\n  /** Flag that indicates if item is new\n   * @default false\n   */\n  new?: boolean;\n}\n\nexport default interface IntelligentGuidanceProps extends BaseProps, NoChildrenProp {\n  /** List of guidance items. */\n  items: IntelligentGuidanceItemProps[];\n  /** List of guidance previous items. */\n  previousItems?: IntelligentGuidanceItemProps[];\n  /** Header text. */\n  heading: string;\n  /** Flag that indicates if intelligent guidance is collapsed */\n  isCollapsed: boolean;\n  /** Callback when expand/collapse button is clicked */\n  onExpandCollapse: () => void;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n"]}
+{"version":3,"file":"IntelligentGuidance.types.js","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { MouseEvent, KeyboardEvent, Ref } from 'react';\n\nimport type { BaseProps, IconProps, NoChildrenProp } from '@pega/cosmos-react-core';\n\nexport interface IntelligentGuidanceItemProps {\n  /** Unique id for item */\n  id: string;\n  /** The label text of the item. */\n  label: string;\n  /** Name of the icon (to be selected from default Pega icon set) */\n  icon: IconProps['name'];\n  /** Represents the type of task */\n  type: string;\n  /** Click handler for the action button. */\n  onClick: (e: MouseEvent | KeyboardEvent) => void;\n  /** Dismiss handler for the action button. */\n  onDismiss?: (\n    id: IntelligentGuidanceItemProps['id'],\n    e: MouseEvent<HTMLButtonElement | HTMLAnchorElement | HTMLInputElement>\n  ) => void;\n  /** Flag that indicates if item is new\n   * @default false\n   */\n  new?: boolean;\n}\n\nexport default interface IntelligentGuidanceProps extends BaseProps, NoChildrenProp {\n  /** List of guidance items. */\n  items: IntelligentGuidanceItemProps[];\n  /** List of guidance previous items. */\n  previousItems?: IntelligentGuidanceItemProps[];\n  /** Header text. */\n  heading: string;\n  /** Flag that indicates if intelligent guidance is collapsed */\n  isCollapsed: boolean;\n  /** Callback when expand/collapse button is clicked */\n  onExpandCollapse: () => void;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n"]}

package/lib/components/Predictions/Predictions.d.ts

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