@pega/cosmos-react-core 8.0.0-build.44.0 → 8.0.0-build.44.2

package/lib/components/Checkbox/CheckboxCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxCard.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/CheckboxCard.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAE7D,OAAO,KAAK,EAAE,UAAU,EAAc,MAAM,aAAa,CAAC;AAK1D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAwC/E,MAAM,MAAM,iBAAiB,GAAG,UAAU,CAAC,kBAAkB,EAAE,SAAS,CAAC,GACvE,UAAU,CAAC,aAAa,EAAE,OAAO,GAAG,SAAS,CAAC,CAAC;;;;AAgEjD,wBAAiE"}
+{"version":3,"file":"CheckboxCard.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/CheckboxCard.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAE7D,OAAO,KAAK,EAAE,UAAU,EAAc,MAAM,aAAa,CAAC;AAK1D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAkC/E,MAAM,MAAM,iBAAiB,GAAG,UAAU,CAAC,kBAAkB,EAAE,SAAS,CAAC,GACvE,UAAU,CAAC,aAAa,EAAE,OAAO,GAAG,SAAS,CAAC,CAAC;;;;AAgEjD,wBAAiE"}

package/lib/components/Checkbox/CheckboxCard.js

@@ -6,9 +6,8 @@ import SelectionCard, { focusableSelector } from '../SelectionCard/SelectionCard
 import Text from '../Text';
 import { useConsolidatedRef, useTestIds, useUID } from '../../hooks';
 import { getActiveElement, withTestIds } from '../../utils';
-import { StyledRadioCheck } from '../RadioCheck/RadioCheck';
 import { getCheckboxCardTestIds } from './Checkbox.test-ids';
-const StyledSelectionCard = styled.div(({ disabled, readOnly, theme: { components: { input, 'form-control': { ':hover': { 'border-color': hoverBorderColor } } } } }) => {
+const StyledSelectionCard = styled.div(({ disabled, readOnly, theme: { components: { 'form-control': { ':hover': { 'border-color': hoverBorderColor } } } } }) => {
     return css `
       ${!disabled &&
         css `
@@ -21,10 +20,6 @@ const StyledSelectionCard = styled.div(({ disabled, readOnly, theme: { component
           border-color: ${hoverBorderColor};
         }
       `}
-
-      ${StyledRadioCheck} {
-        min-height: ${input.height};
-      }
     `;
 });
 StyledSelectionCard.defaultProps = defaultThemeProp;

package/lib/components/Checkbox/CheckboxCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxCard.js","sourceRoot":"","sources":["../../../src/components/Checkbox/CheckboxCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useRef } from 'react';\nimport type { PropsWithoutRef, MouseEvent, KeyboardEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Checkbox, defaultThemeProp } from '@pega/cosmos-react-core';\nimport type { CheckboxProps } from '@pega/cosmos-react-core';\n\nimport type { OmitStrict, RefElement } from '../../types';\nimport SelectionCard, { focusableSelector } from '../SelectionCard/SelectionCard';\nimport Text from '../Text';\nimport { useConsolidatedRef, useTestIds, useUID } from '../../hooks';\nimport { getActiveElement, withTestIds } from '../../utils';\nimport type { SelectionCardProps } from '../SelectionCard/SelectionCard.types';\nimport { StyledRadioCheck } from '../RadioCheck/RadioCheck';\n\nimport { getCheckboxCardTestIds } from './Checkbox.test-ids';\n\nconst StyledSelectionCard = styled.div<Pick<CheckboxProps, 'disabled' | 'readOnly'>>(\n  ({\n    disabled,\n    readOnly,\n    theme: {\n      components: {\n        input,\n        'form-control': {\n          ':hover': { 'border-color': hoverBorderColor }\n        }\n      }\n    }\n  }) => {\n    return css`\n      ${!disabled &&\n      css`\n        cursor: pointer;\n      `}\n\n      ${!(disabled || readOnly) &&\n      css`\n        :hover:not(:focus-within) {\n          border-color: ${hoverBorderColor};\n        }\n      `}\n\n      ${StyledRadioCheck} {\n        min-height: ${input.height};\n      }\n    `;\n  }\n);\n\nStyledSelectionCard.defaultProps = defaultThemeProp;\n\nexport type CheckboxCardProps = OmitStrict<SelectionCardProps, 'heading'> &\n  OmitStrict<CheckboxProps, 'label' | 'variant'>;\n\nconst CheckboxCard = forwardRef<RefElement<CheckboxProps>, PropsWithoutRef<CheckboxCardProps>>(\n  function CheckboxCard(props, ref) {\n    const uid = useUID();\n    const { testId, id = uid, label, disabled, readOnly, ...restProps } = props;\n\n    const testIds = useTestIds(testId, getCheckboxCardTestIds);\n    const contentId = `${id}-content`;\n    const inputRef = useConsolidatedRef(ref);\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    return (\n      <StyledSelectionCard\n        {...restProps}\n        as={SelectionCard}\n        testId={testIds}\n        label={label}\n        heading={\n          <Checkbox\n            testId={testIds.root}\n            {...restProps}\n            id={id}\n            disabled={disabled}\n            readOnly={readOnly}\n            label={\n              <Text variant='h4' as='span'>\n                {label}\n              </Text>\n            }\n            variant='simple'\n            aria-details={contentId}\n            ref={inputRef}\n          />\n        }\n        readOnly={readOnly}\n        disabled={disabled}\n        onClick={(e: MouseEvent<HTMLDivElement>) => {\n          const target = e.target as HTMLElement;\n          if (readOnly || !containerRef.current?.contains(target)) return;\n          if (\n            containerRef.current &&\n            [...containerRef.current.querySelectorAll(focusableSelector)].includes(target)\n          )\n            return;\n          e.preventDefault();\n          inputRef.current?.click();\n          (inputRef.current?.hasAttribute('data-main-focus')\n            ? inputRef\n            : containerRef\n          ).current?.focus();\n        }}\n        onKeyDown={(e: KeyboardEvent) => {\n          if (e.key === ' ' && containerRef.current === getActiveElement()) {\n            e.preventDefault();\n            inputRef.current?.click();\n          }\n        }}\n        ref={containerRef}\n      />\n    );\n  }\n);\n\nexport default withTestIds(CheckboxCard, getCheckboxCardTestIds);\n"]}
+{"version":3,"file":"CheckboxCard.js","sourceRoot":"","sources":["../../../src/components/Checkbox/CheckboxCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useRef } from 'react';\nimport type { PropsWithoutRef, MouseEvent, KeyboardEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Checkbox, defaultThemeProp } from '@pega/cosmos-react-core';\nimport type { CheckboxProps } from '@pega/cosmos-react-core';\n\nimport type { OmitStrict, RefElement } from '../../types';\nimport SelectionCard, { focusableSelector } from '../SelectionCard/SelectionCard';\nimport Text from '../Text';\nimport { useConsolidatedRef, useTestIds, useUID } from '../../hooks';\nimport { getActiveElement, withTestIds } from '../../utils';\nimport type { SelectionCardProps } from '../SelectionCard/SelectionCard.types';\n\nimport { getCheckboxCardTestIds } from './Checkbox.test-ids';\n\nconst StyledSelectionCard = styled.div<Pick<CheckboxProps, 'disabled' | 'readOnly'>>(\n  ({\n    disabled,\n    readOnly,\n    theme: {\n      components: {\n        'form-control': {\n          ':hover': { 'border-color': hoverBorderColor }\n        }\n      }\n    }\n  }) => {\n    return css`\n      ${!disabled &&\n      css`\n        cursor: pointer;\n      `}\n\n      ${!(disabled || readOnly) &&\n      css`\n        :hover:not(:focus-within) {\n          border-color: ${hoverBorderColor};\n        }\n      `}\n    `;\n  }\n);\n\nStyledSelectionCard.defaultProps = defaultThemeProp;\n\nexport type CheckboxCardProps = OmitStrict<SelectionCardProps, 'heading'> &\n  OmitStrict<CheckboxProps, 'label' | 'variant'>;\n\nconst CheckboxCard = forwardRef<RefElement<CheckboxProps>, PropsWithoutRef<CheckboxCardProps>>(\n  function CheckboxCard(props, ref) {\n    const uid = useUID();\n    const { testId, id = uid, label, disabled, readOnly, ...restProps } = props;\n\n    const testIds = useTestIds(testId, getCheckboxCardTestIds);\n    const contentId = `${id}-content`;\n    const inputRef = useConsolidatedRef(ref);\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    return (\n      <StyledSelectionCard\n        {...restProps}\n        as={SelectionCard}\n        testId={testIds}\n        label={label}\n        heading={\n          <Checkbox\n            testId={testIds.root}\n            {...restProps}\n            id={id}\n            disabled={disabled}\n            readOnly={readOnly}\n            label={\n              <Text variant='h4' as='span'>\n                {label}\n              </Text>\n            }\n            variant='simple'\n            aria-details={contentId}\n            ref={inputRef}\n          />\n        }\n        readOnly={readOnly}\n        disabled={disabled}\n        onClick={(e: MouseEvent<HTMLDivElement>) => {\n          const target = e.target as HTMLElement;\n          if (readOnly || !containerRef.current?.contains(target)) return;\n          if (\n            containerRef.current &&\n            [...containerRef.current.querySelectorAll(focusableSelector)].includes(target)\n          )\n            return;\n          e.preventDefault();\n          inputRef.current?.click();\n          (inputRef.current?.hasAttribute('data-main-focus')\n            ? inputRef\n            : containerRef\n          ).current?.focus();\n        }}\n        onKeyDown={(e: KeyboardEvent) => {\n          if (e.key === ' ' && containerRef.current === getActiveElement()) {\n            e.preventDefault();\n            inputRef.current?.click();\n          }\n        }}\n        ref={containerRef}\n      />\n    );\n  }\n);\n\nexport default withTestIds(CheckboxCard, getCheckboxCardTestIds);\n"]}

package/lib/components/CompositeInput/CompositeInput.js

@@ -48,7 +48,7 @@ export default withTestIds(forwardRef(function CompositeInput(props, ref) {
                                 e.preventDefault();
                                 setOpen(true);
                             }
-                        }, value: value ?? '', ref: buttonRef }), _jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, style: { pointerEvents: value ? '' : 'none' }, children: value && !open ? (_jsx(Button, { icon: true, compact: true, variant: 'simple', label: t('clear'), onClick: onClear, children: _jsx(Icon, { name: 'times' }) })) : (_jsx(Icon, { name: 'caret-down' })) })] }), open && containerRef.current && (_jsx(FormDialog, { arrow: false, "aria-label": label, ref: setPopoverEl, target: containerRef.current, placement: 'bottom-start', onCancel: () => onCancel({ close: closePopover }), onSubmit: {
+                        }, value: value ?? '', ref: buttonRef }), _jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, style: { pointerEvents: value ? '' : 'none' }, children: onClear && value && !open ? (_jsx(Button, { icon: true, compact: true, variant: 'simple', label: t('clear'), onClick: onClear, children: _jsx(Icon, { name: 'times' }) })) : (_jsx(Icon, { name: 'caret-down' })) })] }), open && containerRef.current && (_jsx(FormDialog, { arrow: false, "aria-label": label, ref: setPopoverEl, target: containerRef.current, placement: 'bottom-start', onCancel: () => onCancel({ close: closePopover }), onSubmit: {
                     text: t('apply'),
                     handler: () => onApply({ close: closePopover })
                 }, children: _jsx(Flex, { container: { direction: 'column' }, ref: formContentRef, children: _jsx(Renderer, { ...rendererProps }) }) }))] }));

package/lib/components/CompositeInput/CompositeInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"CompositeInput.js","sourceRoot":"","sources":["../../../src/components/CompositeInput/CompositeInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useRef, useState } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport Icon, { registerIcon } from '../Icon';\nimport * as caretDownIcon from '../Icon/icons/caret-down.icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport type { RefElement } from '../../types';\nimport {\n  useConsolidatedRef,\n  useElement,\n  useI18n,\n  useOuterEvent,\n  useTestIds,\n  useUID\n} from '../../hooks';\nimport { StyledFormControl } from '../FormControl';\nimport { createClassName, getFocusables, withTestIds } from '../../utils';\nimport Flex from '../Flex';\nimport Button from '../Button';\nimport FormField from '../FormField';\nimport { FormDialog } from '../Dialog';\n\nimport {\n  StyledCompositeInput,\n  StyledInputButton,\n  StyledInputContainer\n} from './CompositeInput.styles';\nimport type { CompositeInputProps } from './CompositeInput.types';\nimport { getCompositeInputTestIds } from './CompositeInput.test-ids';\n\nregisterIcon(caretDownIcon, timesIcon);\n\nexport default withTestIds(\n  forwardRef<RefElement<CompositeInputProps>, PropsWithoutRef<CompositeInputProps>>(\n    function CompositeInput(props, ref) {\n      const uid = useUID();\n      const {\n        testId,\n        id = uid,\n        disabled,\n        value,\n        onClear,\n        required,\n        status,\n        info,\n        label,\n        labelHidden,\n        additionalInfo,\n        dialog: { renderer: Renderer, rendererProps, onApply, onCancel },\n        className,\n        ...restProps\n      } = props;\n\n      const testIds = useTestIds(testId, getCompositeInputTestIds);\n      const t = useI18n();\n\n      const [open, setOpen] = useState(false);\n\n      const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n      const containerRef = useConsolidatedRef<HTMLDivElement>(ref);\n      const buttonRef = useRef<HTMLInputElement>(null);\n      const formContentRef = useRef<HTMLElement>(null);\n\n      const closePopover = () => {\n        setOpen(false);\n        buttonRef.current?.focus();\n      };\n\n      useOuterEvent('mousedown', [popoverEl, buttonRef], () => {\n        if (open) onCancel({ close: closePopover });\n      });\n\n      useEffect(() => {\n        if (open) {\n          getFocusables(formContentRef)[0]?.focus();\n        }\n      }, [open, formContentRef.current]);\n\n      const labelId = `${id}-label`;\n\n      const Comp = (\n        <Flex\n          as={StyledCompositeInput}\n          forwardedAs={StyledFormControl}\n          container={{ alignItems: 'center' }}\n          status={status}\n          disabled={disabled}\n          ref={containerRef}\n        >\n          <Flex container={{ alignItems: 'center' }} item={{ grow: 1 }} as={StyledInputContainer}>\n            <StyledInputButton\n              data-testid={testIds.control}\n              {...restProps}\n              id={id}\n              disabled={disabled}\n              aria-haspopup='dialog'\n              aria-expanded={!disabled && open}\n              aria-describedby={info ? `${id}-info` : undefined}\n              className={createClassName('composite-input', className, {\n                status\n              })}\n              readOnly\n              required={required}\n              onClick={() => {\n                if (!disabled) {\n                  setOpen(true);\n                }\n              }}\n              onKeyDown={e => {\n                if (e.key === 'Enter') {\n                  e.preventDefault();\n                  setOpen(true);\n                }\n              }}\n              value={value ?? ''}\n              ref={buttonRef}\n            />\n            <Flex\n              container={{ justify: 'center', alignItems: 'center' }}\n              style={{ pointerEvents: value ? '' : 'none' }}\n            >\n              {value && !open ? (\n                <Button icon compact variant='simple' label={t('clear')} onClick={onClear}>\n                  <Icon name='times' />\n                </Button>\n              ) : (\n                <Icon name='caret-down' />\n              )}\n            </Flex>\n          </Flex>\n\n          {open && containerRef.current && (\n            <FormDialog\n              arrow={false}\n              // FIXME: The wrath of optional labels, as a ReactNode, strikes again...\n              aria-label={label as string}\n              ref={setPopoverEl}\n              target={containerRef.current}\n              placement='bottom-start'\n              onCancel={() => onCancel({ close: closePopover })}\n              onSubmit={{\n                text: t('apply'),\n                handler: () => onApply({ close: closePopover })\n              }}\n            >\n              <Flex container={{ direction: 'column' }} ref={formContentRef}>\n                <Renderer {...rendererProps} />\n              </Flex>\n            </FormDialog>\n          )}\n        </Flex>\n      );\n\n      return label ? (\n        <FormField\n          testId={testIds}\n          label={label}\n          labelHidden={labelHidden}\n          id={id}\n          info={info}\n          status={status}\n          required={required}\n          disabled={disabled}\n          labelId={labelId}\n          additionalInfo={additionalInfo}\n        >\n          {Comp}\n        </FormField>\n      ) : (\n        Comp\n      );\n    }\n  ) as <P extends object>(props: CompositeInputProps<P>) => JSX.Element | null,\n  getCompositeInputTestIds\n);\n"]}
+{"version":3,"file":"CompositeInput.js","sourceRoot":"","sources":["../../../src/components/CompositeInput/CompositeInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useRef, useState } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport Icon, { registerIcon } from '../Icon';\nimport * as caretDownIcon from '../Icon/icons/caret-down.icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport type { RefElement } from '../../types';\nimport {\n  useConsolidatedRef,\n  useElement,\n  useI18n,\n  useOuterEvent,\n  useTestIds,\n  useUID\n} from '../../hooks';\nimport { StyledFormControl } from '../FormControl';\nimport { createClassName, getFocusables, withTestIds } from '../../utils';\nimport Flex from '../Flex';\nimport Button from '../Button';\nimport FormField from '../FormField';\nimport { FormDialog } from '../Dialog';\n\nimport {\n  StyledCompositeInput,\n  StyledInputButton,\n  StyledInputContainer\n} from './CompositeInput.styles';\nimport type { CompositeInputProps } from './CompositeInput.types';\nimport { getCompositeInputTestIds } from './CompositeInput.test-ids';\n\nregisterIcon(caretDownIcon, timesIcon);\n\nexport default withTestIds(\n  forwardRef<RefElement<CompositeInputProps>, PropsWithoutRef<CompositeInputProps>>(\n    function CompositeInput(props, ref) {\n      const uid = useUID();\n      const {\n        testId,\n        id = uid,\n        disabled,\n        value,\n        onClear,\n        required,\n        status,\n        info,\n        label,\n        labelHidden,\n        additionalInfo,\n        dialog: { renderer: Renderer, rendererProps, onApply, onCancel },\n        className,\n        ...restProps\n      } = props;\n\n      const testIds = useTestIds(testId, getCompositeInputTestIds);\n      const t = useI18n();\n\n      const [open, setOpen] = useState(false);\n\n      const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n      const containerRef = useConsolidatedRef<HTMLDivElement>(ref);\n      const buttonRef = useRef<HTMLInputElement>(null);\n      const formContentRef = useRef<HTMLElement>(null);\n\n      const closePopover = () => {\n        setOpen(false);\n        buttonRef.current?.focus();\n      };\n\n      useOuterEvent('mousedown', [popoverEl, buttonRef], () => {\n        if (open) onCancel({ close: closePopover });\n      });\n\n      useEffect(() => {\n        if (open) {\n          getFocusables(formContentRef)[0]?.focus();\n        }\n      }, [open, formContentRef.current]);\n\n      const labelId = `${id}-label`;\n\n      const Comp = (\n        <Flex\n          as={StyledCompositeInput}\n          forwardedAs={StyledFormControl}\n          container={{ alignItems: 'center' }}\n          status={status}\n          disabled={disabled}\n          ref={containerRef}\n        >\n          <Flex container={{ alignItems: 'center' }} item={{ grow: 1 }} as={StyledInputContainer}>\n            <StyledInputButton\n              data-testid={testIds.control}\n              {...restProps}\n              id={id}\n              disabled={disabled}\n              aria-haspopup='dialog'\n              aria-expanded={!disabled && open}\n              aria-describedby={info ? `${id}-info` : undefined}\n              className={createClassName('composite-input', className, {\n                status\n              })}\n              readOnly\n              required={required}\n              onClick={() => {\n                if (!disabled) {\n                  setOpen(true);\n                }\n              }}\n              onKeyDown={e => {\n                if (e.key === 'Enter') {\n                  e.preventDefault();\n                  setOpen(true);\n                }\n              }}\n              value={value ?? ''}\n              ref={buttonRef}\n            />\n            <Flex\n              container={{ justify: 'center', alignItems: 'center' }}\n              style={{ pointerEvents: value ? '' : 'none' }}\n            >\n              {onClear && value && !open ? (\n                <Button icon compact variant='simple' label={t('clear')} onClick={onClear}>\n                  <Icon name='times' />\n                </Button>\n              ) : (\n                <Icon name='caret-down' />\n              )}\n            </Flex>\n          </Flex>\n\n          {open && containerRef.current && (\n            <FormDialog\n              arrow={false}\n              // FIXME: The wrath of optional labels, as a ReactNode, strikes again...\n              aria-label={label as string}\n              ref={setPopoverEl}\n              target={containerRef.current}\n              placement='bottom-start'\n              onCancel={() => onCancel({ close: closePopover })}\n              onSubmit={{\n                text: t('apply'),\n                handler: () => onApply({ close: closePopover })\n              }}\n            >\n              <Flex container={{ direction: 'column' }} ref={formContentRef}>\n                <Renderer {...rendererProps} />\n              </Flex>\n            </FormDialog>\n          )}\n        </Flex>\n      );\n\n      return label ? (\n        <FormField\n          testId={testIds}\n          label={label}\n          labelHidden={labelHidden}\n          id={id}\n          info={info}\n          status={status}\n          required={required}\n          disabled={disabled}\n          labelId={labelId}\n          additionalInfo={additionalInfo}\n        >\n          {Comp}\n        </FormField>\n      ) : (\n        Comp\n      );\n    }\n  ) as <P extends object>(props: CompositeInputProps<P>) => JSX.Element | null,\n  getCompositeInputTestIds\n);\n"]}

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

@@ -12,7 +12,7 @@ export type CompositeInputProps<P extends object = object> = WithAttributes<'inp
     info?: FormControlProps['info'];
     /** Indicate if the field is required. The browser defaults to false. */
     /** Callback when clear button is clicked. */
-    onClear: () => void;
+    onClear?: () => void;
     /** Button when clicked will show additional information for the composite input */
     additionalInfo?: FormControlProps['additionalInfo'];
     /** Value form options. */

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

@@ -1 +1 @@
-{"version":3,"file":"CompositeInput.types.d.ts","sourceRoot":"","sources":["../../../src/components/CompositeInput/CompositeInput.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC1F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAEvD,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,cAAc,CACzE,OAAO,EACP,UAAU,GACR,cAAc,GAAG;IACf,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,6CAA6C;IAC7C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,mFAAmF;IACnF,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,0BAA0B;IAC1B,MAAM,EAAE;QACN,0DAA0D;QAC1D,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;QAC3B,+DAA+D;QAC/D,aAAa,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;QAC9B,8CAA8C;QAC9C,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE;YAAE,KAAK,EAAE,MAAM,IAAI,CAAA;SAAE,KAAK,IAAI,CAAC;QACrD,6CAA6C;QAC7C,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE;YAAE,KAAK,EAAE,MAAM,IAAI,CAAA;SAAE,KAAK,IAAI,CAAC;KACrD,CAAC;CACH,CACJ,CAAC"}
+{"version":3,"file":"CompositeInput.types.d.ts","sourceRoot":"","sources":["../../../src/components/CompositeInput/CompositeInput.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC1F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAEvD,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,cAAc,CACzE,OAAO,EACP,UAAU,GACR,cAAc,GAAG;IACf,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mFAAmF;IACnF,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,0BAA0B;IAC1B,MAAM,EAAE;QACN,0DAA0D;QAC1D,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;QAC3B,+DAA+D;QAC/D,aAAa,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;QAC9B,8CAA8C;QAC9C,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE;YAAE,KAAK,EAAE,MAAM,IAAI,CAAA;SAAE,KAAK,IAAI,CAAC;QACrD,6CAA6C;QAC7C,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE;YAAE,KAAK,EAAE,MAAM,IAAI,CAAA;SAAE,KAAK,IAAI,CAAC;KACrD,CAAC;CACH,CACJ,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"CompositeInput.types.js","sourceRoot":"","sources":["../../../src/components/CompositeInput/CompositeInput.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentType } from 'react';\n\nimport type { DeferInfer, NoChildrenProp, TestIdProp, WithAttributes } from '../../types';\nimport type { FormControlProps } from '../FormControl';\n\nexport type CompositeInputProps<P extends object = object> = WithAttributes<\n  'input',\n  TestIdProp &\n    NoChildrenProp & {\n      /** Set visual state based on a validation state. */\n      status?: FormControlProps['status'];\n      /** Pass a string or a fragment with an Icon and string. */\n      label?: FormControlProps['label'];\n      /** Visually hides the label region. */\n      labelHidden?: FormControlProps['labelHidden'];\n      /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n      info?: FormControlProps['info'];\n      /** Indicate if the field is required. The browser defaults to false. */\n      /** Callback when clear button is clicked. */\n      onClear: () => void;\n      /** Button when clicked will show additional information for the composite input */\n      additionalInfo?: FormControlProps['additionalInfo'];\n      /** Value form options. */\n      dialog: {\n        /** A component to render the main portion of the form. */\n        renderer: ComponentType<P>;\n        /** A props object that will be passed to the form renderer. */\n        rendererProps?: DeferInfer<P>;\n        /** Callback when cancel button is clicked. */\n        onCancel: ({ close }: { close: () => void }) => void;\n        /** Callback when apply button is clicked. */\n        onApply: ({ close }: { close: () => void }) => void;\n      };\n    }\n>;\n"]}
+{"version":3,"file":"CompositeInput.types.js","sourceRoot":"","sources":["../../../src/components/CompositeInput/CompositeInput.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentType } from 'react';\n\nimport type { DeferInfer, NoChildrenProp, TestIdProp, WithAttributes } from '../../types';\nimport type { FormControlProps } from '../FormControl';\n\nexport type CompositeInputProps<P extends object = object> = WithAttributes<\n  'input',\n  TestIdProp &\n    NoChildrenProp & {\n      /** Set visual state based on a validation state. */\n      status?: FormControlProps['status'];\n      /** Pass a string or a fragment with an Icon and string. */\n      label?: FormControlProps['label'];\n      /** Visually hides the label region. */\n      labelHidden?: FormControlProps['labelHidden'];\n      /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n      info?: FormControlProps['info'];\n      /** Indicate if the field is required. The browser defaults to false. */\n      /** Callback when clear button is clicked. */\n      onClear?: () => void;\n      /** Button when clicked will show additional information for the composite input */\n      additionalInfo?: FormControlProps['additionalInfo'];\n      /** Value form options. */\n      dialog: {\n        /** A component to render the main portion of the form. */\n        renderer: ComponentType<P>;\n        /** A props object that will be passed to the form renderer. */\n        rendererProps?: DeferInfer<P>;\n        /** Callback when cancel button is clicked. */\n        onCancel: ({ close }: { close: () => void }) => void;\n        /** Callback when apply button is clicked. */\n        onApply: ({ close }: { close: () => void }) => void;\n      };\n    }\n>;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Progress.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/Progress.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAKnE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAetD,QAAA,MAAM,QAAQ,EAAE,+BAA+B,CAAC,aAAa,CAkL3D,CAAC;AAEH,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Progress.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/Progress.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAKnE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAetD,QAAA,MAAM,QAAQ,EAAE,+BAA+B,CAAC,aAAa,CAuL3D,CAAC;AAEH,eAAe,QAAQ,CAAC"}

package/lib/components/Progress/Progress.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useState, useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
+import { getLuminance } from 'polished';
 import Text from '../Text';
-import { useConfiguration, useConsolidatedRef, useI18n, useLiveLog } from '../../hooks';
+import { useConfiguration, useConsolidatedRef, useI18n, useLiveLog, useTheme } from '../../hooks';
 import Flex from '../Flex';
 import Bar from './Bar';
 import Ellipsis from './Ellipsis';
@@ -19,6 +20,7 @@ const Progress = forwardRef(function Progress({ variant = 'ring', placement = 'g
     const t = useI18n();
     const { portalTarget } = useConfiguration();
     const { announcePolite } = useLiveLog();
+    const theme = useTheme();
     const progressEl = useConsolidatedRef(ref);
     // Rendering states. Both are needed due to Backdrop's transition phase where isVisibleState is false but nullRender is true until onAfterTransitionOut.
     const [isVisibleState, setIsVisibleState] = useState(delay ? false : visibleProp);
@@ -110,7 +112,9 @@ const Progress = forwardRef(function Progress({ variant = 'ring', placement = 'g
     if (placement !== 'inline') {
         indicator = (_jsxs(Flex, { container: { direction: 'column', alignItems: 'center', gap: 0.5 }, as: StyledProgress, placement: placement, children: [indicator, message && (_jsx(Text, { as: StyledMessage, variant: 'secondary', "aria-hidden": true, children: message }))] }));
     }
-    const content = hasBackdrop ? (_jsx(StyledProgressBackdrop, { open: isVisibleState, container: { direction: 'column' }, position: placement === 'global' ? 'fixed' : 'absolute', variant: 'light', alpha: 0.8, onBeforeTransitionIn: onTransitionStartIn, onAfterTransitionIn: onTransitionEndIn, onBeforeTransitionOut: onTransitionStartOut, onAfterTransitionOut: () => {
+    // generate background variant based on theme text color
+    const progressBackdropVariant = getLuminance(theme.base.palette['foreground-color']) > 0.5 ? 'dark' : 'light';
+    const content = hasBackdrop ? (_jsx(StyledProgressBackdrop, { open: isVisibleState, container: { direction: 'column' }, position: placement === 'global' ? 'fixed' : 'absolute', variant: progressBackdropVariant, alpha: 0.8, onBeforeTransitionIn: onTransitionStartIn, onAfterTransitionIn: onTransitionEndIn, onBeforeTransitionOut: onTransitionStartOut, onAfterTransitionOut: () => {
             setNullRender(true);
             onTransitionEndOut?.();
         }, children: indicator })) : (indicator);

package/lib/components/Progress/Progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"Progress.js","sourceRoot":"","sources":["../../../src/components/Progress/Progress.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useEffect, useRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport type { ForwardRefForwardPropsComponent } from '../../types';\nimport Text from '../Text';\nimport { useConfiguration, useConsolidatedRef, useI18n, useLiveLog } from '../../hooks';\nimport Flex from '../Flex';\n\nimport type { ProgressProps } from './Progress.types';\nimport Bar from './Bar';\nimport Ellipsis from './Ellipsis';\nimport Ring from './Ring';\nimport { StyledMessage, StyledProgress, StyledProgressBackdrop } from './Progress.styles';\n\nconst variantMap = {\n  ring: Ring,\n  bar: Bar,\n  ellipsis: Ellipsis\n} as const;\n\nconst delayDuration = 100;\nconst minVisibleDuration = 1000;\n\nconst Progress: ForwardRefForwardPropsComponent<ProgressProps> = forwardRef(function Progress(\n  {\n    variant = 'ring',\n    placement = 'global',\n    visible: visibleProp = true,\n    focusOnVisible = false,\n    delay = false,\n    onTransitionStartIn,\n    onTransitionEndIn,\n    onTransitionStartOut,\n    onTransitionEndOut,\n    value,\n    message,\n    liveConfig,\n    ...restProps\n  }: PropsWithoutRef<ProgressProps>,\n  ref: ProgressProps['ref']\n) {\n  const t = useI18n();\n  const { portalTarget } = useConfiguration();\n  const { announcePolite } = useLiveLog();\n  const progressEl = useConsolidatedRef<HTMLDivElement>(ref);\n\n  // Rendering states. Both are needed due to Backdrop's transition phase where isVisibleState is false but nullRender is true until onAfterTransitionOut.\n  const [isVisibleState, setIsVisibleState] = useState(delay ? false : visibleProp);\n  const [nullRender, setNullRender] = useState(!isVisibleState);\n\n  // Refs for timestamps and timeout ids.\n  const timeBeforeVisibleRender = useRef<number>();\n  const timeAfterVisibleRender = useRef<number>();\n  const delayTimer = useRef<number>();\n  const minVisibleTimer = useRef<number>();\n\n  const hasBackdrop = placement === 'global' || placement === 'local';\n  const valString = typeof value === 'number' ? `${value}%` : undefined;\n  const label = message && valString ? `${message} - ${valString}` : message || valString;\n\n  const renderVisible = () => {\n    setIsVisibleState(true);\n    setNullRender(false);\n  };\n\n  const renderNotVisible = () => {\n    setIsVisibleState(false);\n    // With a transition, setNullRender needs to be called in Backdrop's onAfterTransitionOut.\n    if (!hasBackdrop) {\n      setNullRender(true);\n    }\n  };\n\n  // Handle render and visible state.\n  useEffect(\n    () => {\n      if (visibleProp) {\n        // Capture a timestamp for additional timers.\n        timeBeforeVisibleRender.current = Date.now();\n\n        if (delay) {\n          delayTimer.current = window.setTimeout(renderVisible, delayDuration);\n        } else {\n          renderVisible();\n        }\n      } else if (\n        // A timer was started to render visible either avoid it or render null.\n        delayTimer.current !== undefined\n      ) {\n        // If a timeout has started to render visible, clear it.\n        clearTimeout(delayTimer.current);\n\n        // If the indicator has already rendered visible.\n        if (timeAfterVisibleRender.current !== undefined) {\n          const timeElapsedSinceLastVisibleRender = Date.now() - timeAfterVisibleRender.current;\n\n          // If the indicator has been visible for long enough we can remove it.\n          if (timeElapsedSinceLastVisibleRender >= minVisibleDuration) {\n            renderNotVisible();\n          } else {\n            // Hold off removing until we hit the minimum visible time.\n            minVisibleTimer.current = window.setTimeout(\n              renderNotVisible,\n              minVisibleDuration - timeElapsedSinceLastVisibleRender\n            );\n          }\n        } else {\n          renderNotVisible();\n        }\n      } else {\n        renderNotVisible();\n      }\n    },\n    // visibleProp is the only triggerable dependency. Others values will be captured.\n    [visibleProp]\n  );\n\n  // Live announcement\n  useEffect(\n    () => {\n      if (liveConfig?.contextualLabel && isVisibleState) {\n        announcePolite({\n          message: `${liveConfig.contextualLabel}, ${label ?? t('loading')}`,\n          type: 'status'\n        });\n      }\n    },\n    // isVisibleState is the only triggerable dependency. Others values will be captured.\n    [isVisibleState]\n  );\n\n  // Auto focusing and render timestamping.\n  useEffect(\n    () => {\n      if (!nullRender && isVisibleState) {\n        // After a visible render set a timestamp for timers above.\n        timeAfterVisibleRender.current = Date.now();\n\n        if (focusOnVisible) progressEl.current?.focus();\n      }\n    },\n    // nullRender is the only triggerable dependency. Others values will be captured.\n    [nullRender]\n  );\n\n  if (nullRender) return null;\n\n  const CompVariant = variantMap[variant];\n\n  let indicator = (\n    <CompVariant\n      aria-label={typeof value !== 'number' ? label : t('loading')}\n      as={placement === 'inline' ? 'span' : undefined}\n      {...restProps}\n      placement={placement}\n      value={value}\n      aria-valuetext={typeof value === 'number' ? label : undefined}\n      ref={progressEl}\n      tabIndex={-1}\n    />\n  );\n\n  if (placement !== 'inline') {\n    indicator = (\n      <Flex\n        container={{ direction: 'column', alignItems: 'center', gap: 0.5 }}\n        as={StyledProgress}\n        placement={placement}\n      >\n        {indicator}\n        {message && (\n          <Text as={StyledMessage} variant='secondary' aria-hidden>\n            {message}\n          </Text>\n        )}\n      </Flex>\n    );\n  }\n\n  const content = hasBackdrop ? (\n    <StyledProgressBackdrop\n      open={isVisibleState}\n      container={{ direction: 'column' }}\n      position={placement === 'global' ? 'fixed' : 'absolute'}\n      variant='light'\n      alpha={0.8}\n      onBeforeTransitionIn={onTransitionStartIn}\n      onAfterTransitionIn={onTransitionEndIn}\n      onBeforeTransitionOut={onTransitionStartOut}\n      onAfterTransitionOut={() => {\n        setNullRender(true);\n        onTransitionEndOut?.();\n      }}\n    >\n      {indicator}\n    </StyledProgressBackdrop>\n  ) : (\n    indicator\n  );\n\n  return placement === 'global' && portalTarget ? createPortal(content, portalTarget) : content;\n});\n\nexport default Progress;\n"]}
+{"version":3,"file":"Progress.js","sourceRoot":"","sources":["../../../src/components/Progress/Progress.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useEffect, useRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport { getLuminance } from 'polished';\n\nimport type { ForwardRefForwardPropsComponent } from '../../types';\nimport Text from '../Text';\nimport { useConfiguration, useConsolidatedRef, useI18n, useLiveLog, useTheme } from '../../hooks';\nimport Flex from '../Flex';\n\nimport type { ProgressProps } from './Progress.types';\nimport Bar from './Bar';\nimport Ellipsis from './Ellipsis';\nimport Ring from './Ring';\nimport { StyledMessage, StyledProgress, StyledProgressBackdrop } from './Progress.styles';\n\nconst variantMap = {\n  ring: Ring,\n  bar: Bar,\n  ellipsis: Ellipsis\n} as const;\n\nconst delayDuration = 100;\nconst minVisibleDuration = 1000;\n\nconst Progress: ForwardRefForwardPropsComponent<ProgressProps> = forwardRef(function Progress(\n  {\n    variant = 'ring',\n    placement = 'global',\n    visible: visibleProp = true,\n    focusOnVisible = false,\n    delay = false,\n    onTransitionStartIn,\n    onTransitionEndIn,\n    onTransitionStartOut,\n    onTransitionEndOut,\n    value,\n    message,\n    liveConfig,\n    ...restProps\n  }: PropsWithoutRef<ProgressProps>,\n  ref: ProgressProps['ref']\n) {\n  const t = useI18n();\n  const { portalTarget } = useConfiguration();\n  const { announcePolite } = useLiveLog();\n  const theme = useTheme();\n  const progressEl = useConsolidatedRef<HTMLDivElement>(ref);\n\n  // Rendering states. Both are needed due to Backdrop's transition phase where isVisibleState is false but nullRender is true until onAfterTransitionOut.\n  const [isVisibleState, setIsVisibleState] = useState(delay ? false : visibleProp);\n  const [nullRender, setNullRender] = useState(!isVisibleState);\n\n  // Refs for timestamps and timeout ids.\n  const timeBeforeVisibleRender = useRef<number>();\n  const timeAfterVisibleRender = useRef<number>();\n  const delayTimer = useRef<number>();\n  const minVisibleTimer = useRef<number>();\n\n  const hasBackdrop = placement === 'global' || placement === 'local';\n  const valString = typeof value === 'number' ? `${value}%` : undefined;\n  const label = message && valString ? `${message} - ${valString}` : message || valString;\n\n  const renderVisible = () => {\n    setIsVisibleState(true);\n    setNullRender(false);\n  };\n\n  const renderNotVisible = () => {\n    setIsVisibleState(false);\n    // With a transition, setNullRender needs to be called in Backdrop's onAfterTransitionOut.\n    if (!hasBackdrop) {\n      setNullRender(true);\n    }\n  };\n\n  // Handle render and visible state.\n  useEffect(\n    () => {\n      if (visibleProp) {\n        // Capture a timestamp for additional timers.\n        timeBeforeVisibleRender.current = Date.now();\n\n        if (delay) {\n          delayTimer.current = window.setTimeout(renderVisible, delayDuration);\n        } else {\n          renderVisible();\n        }\n      } else if (\n        // A timer was started to render visible either avoid it or render null.\n        delayTimer.current !== undefined\n      ) {\n        // If a timeout has started to render visible, clear it.\n        clearTimeout(delayTimer.current);\n\n        // If the indicator has already rendered visible.\n        if (timeAfterVisibleRender.current !== undefined) {\n          const timeElapsedSinceLastVisibleRender = Date.now() - timeAfterVisibleRender.current;\n\n          // If the indicator has been visible for long enough we can remove it.\n          if (timeElapsedSinceLastVisibleRender >= minVisibleDuration) {\n            renderNotVisible();\n          } else {\n            // Hold off removing until we hit the minimum visible time.\n            minVisibleTimer.current = window.setTimeout(\n              renderNotVisible,\n              minVisibleDuration - timeElapsedSinceLastVisibleRender\n            );\n          }\n        } else {\n          renderNotVisible();\n        }\n      } else {\n        renderNotVisible();\n      }\n    },\n    // visibleProp is the only triggerable dependency. Others values will be captured.\n    [visibleProp]\n  );\n\n  // Live announcement\n  useEffect(\n    () => {\n      if (liveConfig?.contextualLabel && isVisibleState) {\n        announcePolite({\n          message: `${liveConfig.contextualLabel}, ${label ?? t('loading')}`,\n          type: 'status'\n        });\n      }\n    },\n    // isVisibleState is the only triggerable dependency. Others values will be captured.\n    [isVisibleState]\n  );\n\n  // Auto focusing and render timestamping.\n  useEffect(\n    () => {\n      if (!nullRender && isVisibleState) {\n        // After a visible render set a timestamp for timers above.\n        timeAfterVisibleRender.current = Date.now();\n\n        if (focusOnVisible) progressEl.current?.focus();\n      }\n    },\n    // nullRender is the only triggerable dependency. Others values will be captured.\n    [nullRender]\n  );\n\n  if (nullRender) return null;\n\n  const CompVariant = variantMap[variant];\n\n  let indicator = (\n    <CompVariant\n      aria-label={typeof value !== 'number' ? label : t('loading')}\n      as={placement === 'inline' ? 'span' : undefined}\n      {...restProps}\n      placement={placement}\n      value={value}\n      aria-valuetext={typeof value === 'number' ? label : undefined}\n      ref={progressEl}\n      tabIndex={-1}\n    />\n  );\n\n  if (placement !== 'inline') {\n    indicator = (\n      <Flex\n        container={{ direction: 'column', alignItems: 'center', gap: 0.5 }}\n        as={StyledProgress}\n        placement={placement}\n      >\n        {indicator}\n        {message && (\n          <Text as={StyledMessage} variant='secondary' aria-hidden>\n            {message}\n          </Text>\n        )}\n      </Flex>\n    );\n  }\n\n  // generate background variant based on theme text color\n  const progressBackdropVariant =\n    getLuminance(theme.base.palette['foreground-color']) > 0.5 ? 'dark' : 'light';\n\n  const content = hasBackdrop ? (\n    <StyledProgressBackdrop\n      open={isVisibleState}\n      container={{ direction: 'column' }}\n      position={placement === 'global' ? 'fixed' : 'absolute'}\n      variant={progressBackdropVariant}\n      alpha={0.8}\n      onBeforeTransitionIn={onTransitionStartIn}\n      onAfterTransitionIn={onTransitionEndIn}\n      onBeforeTransitionOut={onTransitionStartOut}\n      onAfterTransitionOut={() => {\n        setNullRender(true);\n        onTransitionEndOut?.();\n      }}\n    >\n      {indicator}\n    </StyledProgressBackdrop>\n  ) : (\n    indicator\n  );\n\n  return placement === 'global' && portalTarget ? createPortal(content, portalTarget) : content;\n});\n\nexport default Progress;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Progress.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/Progress.styles.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtD,eAAO,MAAM,sBAAsB;;uDAAqB,CAAC;AAczD,eAAO,MAAM,kBAAkB;iBACqB,OAAO;SAkDzD,CAAC;AAIH,eAAO,MAAM,iBAAiB;iBACG,OAAO;SAwDtC,CAAC;AAIH,eAAO,MAAM,sBAAsB,uIAsEjC,CAAC;AAIH,eAAO,MAAM,aAAa,0GAexB,CAAC;AAIH,eAAO,MAAM,cAAc,8MAezB,CAAC"}
+{"version":3,"file":"Progress.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/Progress.styles.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtD,eAAO,MAAM,sBAAsB;;uDAAqB,CAAC;AAczD,eAAO,MAAM,kBAAkB;iBACqB,OAAO;SAsDzD,CAAC;AAIH,eAAO,MAAM,iBAAiB;iBACG,OAAO;SA6DtC,CAAC;AAIH,eAAO,MAAM,sBAAsB,uIAqEjC,CAAC;AAIH,eAAO,MAAM,aAAa,0GAexB,CAAC;AAIH,eAAO,MAAM,cAAc,8MAezB,CAAC"}

package/lib/components/Progress/Progress.styles.js

@@ -1,4 +1,4 @@
-import { rgba } from 'polished';
+import { getLuminance, rgba } from 'polished';
 import styled, { css } from 'styled-components';
 import { calculateFontSize, readableColor } from '../../styles';
 import { defaultThemeProp } from '../../theme';
@@ -18,6 +18,9 @@ const StyledProgressVisual = styled.div(({ theme }) => {
 StyledProgressVisual.defaultProps = defaultThemeProp;
 export const StyledProgressRing = styled(StyledProgressVisual)(({ theme, placement, determinate }) => {
     const size = placement === 'inline' ? '1em' : '2rem';
+    const progressTrackColor = getLuminance(theme.base.palette['foreground-color']) > 0.5
+        ? theme.base.colors.gray['extra-dark']
+        : theme.base.colors.gray.light;
     return css `
     position: relative;
 
@@ -28,7 +31,7 @@ export const StyledProgressRing = styled(StyledProgressVisual)(({ theme, placeme
 
       circle {
         fill: transparent;
-        stroke: ${theme.base.colors.gray['extra-light']};
+        stroke: ${progressTrackColor};
         stroke-width: 2;
         r: 45%;
         cx: 50%;
@@ -67,8 +70,11 @@ export const StyledProgressRing = styled(StyledProgressVisual)(({ theme, placeme
 });
 StyledProgressRing.defaultProps = defaultThemeProp;
 export const StyledProgressBar = styled(StyledProgressVisual)(({ theme, placement, determinate }) => {
+    const progressTrackColor = getLuminance(theme.base.palette['foreground-color']) > 0.5
+        ? theme.base.colors.gray['extra-dark']
+        : theme.base.colors.gray.light;
     return css `
-    background-color: ${theme.base.colors.gray['extra-light']};
+    background-color: ${progressTrackColor};
     border-radius: ${theme.base['border-radius']};
     ${placement === 'local'
         ? css `
@@ -148,7 +154,6 @@ export const StyledProgressEllipsis = styled(StyledProgressVisual)(({ theme, pla
     > span {
       display: flex;
       justify-content: center;
-      mix-blend-mode: multiply;
 
       ${placement === 'inline' &&
         css `

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

@@ -1 +1 @@
-{"version":3,"file":"Progress.styles.js","sourceRoot":"","sources":["../../../src/components/Progress/Progress.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { rgba } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { calculateFontSize, readableColor } from '../../styles';\nimport type { FontSize } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport Backdrop from '../Backdrop';\nimport Flex from '../Flex';\n\nimport type { ProgressProps } from './Progress.types';\n\nexport const StyledProgressBackdrop = styled(Backdrop)``;\n\nconst StyledProgressVisual = styled.div(({ theme }) => {\n  return css`\n    &:focus-visible {\n      box-shadow: ${theme.components.button['focus-shadow']};\n      outline: none;\n      border-radius: calc(9999 * ${theme.base['border-radius']});\n    }\n  `;\n});\n\nStyledProgressVisual.defaultProps = defaultThemeProp;\n\nexport const StyledProgressRing = styled(StyledProgressVisual)<\n  Pick<ProgressProps, 'placement'> & { determinate: boolean }\n>(({ theme, placement, determinate }) => {\n  const size = placement === 'inline' ? '1em' : '2rem';\n\n  return css`\n    position: relative;\n\n    svg {\n      display: block;\n      width: ${size};\n      height: ${size};\n\n      circle {\n        fill: transparent;\n        stroke: ${theme.base.colors.gray['extra-light']};\n        stroke-width: 2;\n        r: 45%;\n        cx: 50%;\n        cy: 50%;\n        transform: rotate(-90deg);\n        transform-origin: 50% 50%;\n\n        &:nth-child(2) {\n          stroke: ${theme.components.progress['progress-color']};\n          transition: stroke-dashoffset calc(0.5 * ${theme.base.animation.speed})\n            ${theme.base.animation.timing.ease};\n\n          ${!determinate &&\n          css`\n            @keyframes LoadingRing {\n              0% {\n                transform: rotate(0deg);\n              }\n\n              100% {\n                transform: rotate(360deg);\n              }\n            }\n            animation: LoadingRing calc(4 * ${theme.base.animation.speed}) linear infinite;\n          `}\n        }\n      }\n    }\n\n    ${placement === 'inline' &&\n    css`\n      display: inline-flex;\n      vertical-align: top;\n    `}\n  `;\n});\n\nStyledProgressRing.defaultProps = defaultThemeProp;\n\nexport const StyledProgressBar = styled(StyledProgressVisual)<\n  ProgressProps & { determinate: boolean }\n>(({ theme, placement, determinate }) => {\n  return css`\n    background-color: ${theme.base.colors.gray['extra-light']};\n    border-radius: ${theme.base['border-radius']};\n    ${placement === 'local'\n      ? css`\n          width: calc(100% - 4 * ${theme.base.spacing});\n        `\n      : css`\n          width: 100%;\n        `}\n    height: 0.375rem;\n    min-width: 2rem;\n    max-width: min(calc(100vw - 4 * ${theme.base.spacing}), ${theme.base['content-width'].lg});\n    overflow: hidden;\n\n    ::before {\n      content: '';\n      display: block;\n      height: 100%;\n      width: 100%;\n      left: 0;\n      border-radius: ${theme.base['border-radius']};\n      background-color: ${theme.components.progress['progress-color']};\n      ${determinate &&\n      css`\n        transform: translateX(var(--progress, 0));\n        transform-origin: 0 50%;\n        transition: transform calc(0.5 * ${theme.base.animation.speed})\n          ${theme.base.animation.timing.ease};\n      `}\n\n      ${!determinate &&\n      css`\n        @keyframes LoadingBar {\n          0% {\n            transform: translateX(-100%);\n          }\n\n          100% {\n            transform: translateX(200%);\n          }\n        }\n        animation: LoadingBar calc(8 * ${theme.base.animation.speed}) linear infinite;\n        width: 50%;\n      `}\n    }\n\n    ${placement === 'inline' &&\n    css`\n      width: 3rem;\n      display: inline-block;\n      position: relative;\n    `}\n  `;\n});\n\nStyledProgressBar.defaultProps = defaultThemeProp;\n\nexport const StyledProgressEllipsis = styled(StyledProgressVisual)<\n  Pick<ProgressProps, 'placement'>\n>(({ theme, placement }) => {\n  return css`\n    line-height: 1;\n    display: ${placement === 'inline' ? 'inline-flex' : 'block'};\n\n    @keyframes LoadingEllipsis {\n      0% {\n        transform: scale(0);\n        opacity: 0;\n      }\n\n      50% {\n        transform: scale(1);\n        opacity: 1;\n      }\n\n      100% {\n        transform: scale(0);\n        opacity: 0;\n      }\n    }\n\n    > span {\n      display: flex;\n      justify-content: center;\n      mix-blend-mode: multiply;\n\n      ${placement === 'inline' &&\n      css`\n        display: inline-flex;\n      `}\n    }\n\n    > span span {\n      margin: 0 0.3125rem;\n      background: ${theme.components.progress['progress-color']};\n      border-radius: 50%;\n      animation: LoadingEllipsis calc(4 * ${theme.base.animation.speed}) infinite;\n\n      ${placement === 'global' &&\n      css`\n        width: 1.25rem;\n        height: 1.25rem;\n      `}\n\n      ${(placement === 'local' || placement === 'block') &&\n      css`\n        width: 0.625rem;\n        height: 0.625rem;\n      `}\n\n      ${placement === 'inline' &&\n      css`\n        width: 0.1875rem;\n        height: 0.1875rem;\n        margin: 0 0.1875rem;\n        animation-duration: calc(4 * ${theme.base.animation.speed});\n      `}\n\n      &:nth-child(2) {\n        animation-delay: 0.1667s;\n      }\n\n      &:nth-child(3) {\n        animation-delay: ${0.1667 * 2}s;\n      }\n    }\n  `;\n});\n\nStyledProgressEllipsis.defaultProps = defaultThemeProp;\n\nexport const StyledMessage = styled.span(({ theme }) => {\n  const color = tryCatch(() => {\n    return rgba(\n      readableColor(theme.base.palette['primary-background']),\n      theme.base.transparency['transparent-3']\n    );\n  });\n\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    font-size: ${fontSize[theme.components.label['font-size'] as FontSize]};\n    font-weight: ${theme.base['font-weight']['semi-bold']};\n    color: ${color};\n  `;\n});\n\nStyledMessage.defaultProps = defaultThemeProp;\n\nexport const StyledProgress = styled(Flex)<Pick<ProgressProps, 'placement'>>(({\n  theme,\n  placement\n}) => {\n  return css`\n    ${placement !== 'inline' &&\n    css`\n      width: 100%;\n    `}\n\n    ${placement === 'block' &&\n    css`\n      margin-block: calc(2 * ${theme.base.spacing});\n    `}\n  `;\n});\n\nStyledProgress.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"Progress.styles.js","sourceRoot":"","sources":["../../../src/components/Progress/Progress.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { getLuminance, rgba } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { calculateFontSize, readableColor } from '../../styles';\nimport type { FontSize } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport Backdrop from '../Backdrop';\nimport Flex from '../Flex';\n\nimport type { ProgressProps } from './Progress.types';\n\nexport const StyledProgressBackdrop = styled(Backdrop)``;\n\nconst StyledProgressVisual = styled.div(({ theme }) => {\n  return css`\n    &:focus-visible {\n      box-shadow: ${theme.components.button['focus-shadow']};\n      outline: none;\n      border-radius: calc(9999 * ${theme.base['border-radius']});\n    }\n  `;\n});\n\nStyledProgressVisual.defaultProps = defaultThemeProp;\n\nexport const StyledProgressRing = styled(StyledProgressVisual)<\n  Pick<ProgressProps, 'placement'> & { determinate: boolean }\n>(({ theme, placement, determinate }) => {\n  const size = placement === 'inline' ? '1em' : '2rem';\n  const progressTrackColor =\n    getLuminance(theme.base.palette['foreground-color']) > 0.5\n      ? theme.base.colors.gray['extra-dark']\n      : theme.base.colors.gray.light;\n\n  return css`\n    position: relative;\n\n    svg {\n      display: block;\n      width: ${size};\n      height: ${size};\n\n      circle {\n        fill: transparent;\n        stroke: ${progressTrackColor};\n        stroke-width: 2;\n        r: 45%;\n        cx: 50%;\n        cy: 50%;\n        transform: rotate(-90deg);\n        transform-origin: 50% 50%;\n\n        &:nth-child(2) {\n          stroke: ${theme.components.progress['progress-color']};\n          transition: stroke-dashoffset calc(0.5 * ${theme.base.animation.speed})\n            ${theme.base.animation.timing.ease};\n\n          ${!determinate &&\n          css`\n            @keyframes LoadingRing {\n              0% {\n                transform: rotate(0deg);\n              }\n\n              100% {\n                transform: rotate(360deg);\n              }\n            }\n            animation: LoadingRing calc(4 * ${theme.base.animation.speed}) linear infinite;\n          `}\n        }\n      }\n    }\n\n    ${placement === 'inline' &&\n    css`\n      display: inline-flex;\n      vertical-align: top;\n    `}\n  `;\n});\n\nStyledProgressRing.defaultProps = defaultThemeProp;\n\nexport const StyledProgressBar = styled(StyledProgressVisual)<\n  ProgressProps & { determinate: boolean }\n>(({ theme, placement, determinate }) => {\n  const progressTrackColor =\n    getLuminance(theme.base.palette['foreground-color']) > 0.5\n      ? theme.base.colors.gray['extra-dark']\n      : theme.base.colors.gray.light;\n\n  return css`\n    background-color: ${progressTrackColor};\n    border-radius: ${theme.base['border-radius']};\n    ${placement === 'local'\n      ? css`\n          width: calc(100% - 4 * ${theme.base.spacing});\n        `\n      : css`\n          width: 100%;\n        `}\n    height: 0.375rem;\n    min-width: 2rem;\n    max-width: min(calc(100vw - 4 * ${theme.base.spacing}), ${theme.base['content-width'].lg});\n    overflow: hidden;\n\n    ::before {\n      content: '';\n      display: block;\n      height: 100%;\n      width: 100%;\n      left: 0;\n      border-radius: ${theme.base['border-radius']};\n      background-color: ${theme.components.progress['progress-color']};\n      ${determinate &&\n      css`\n        transform: translateX(var(--progress, 0));\n        transform-origin: 0 50%;\n        transition: transform calc(0.5 * ${theme.base.animation.speed})\n          ${theme.base.animation.timing.ease};\n      `}\n\n      ${!determinate &&\n      css`\n        @keyframes LoadingBar {\n          0% {\n            transform: translateX(-100%);\n          }\n\n          100% {\n            transform: translateX(200%);\n          }\n        }\n        animation: LoadingBar calc(8 * ${theme.base.animation.speed}) linear infinite;\n        width: 50%;\n      `}\n    }\n\n    ${placement === 'inline' &&\n    css`\n      width: 3rem;\n      display: inline-block;\n      position: relative;\n    `}\n  `;\n});\n\nStyledProgressBar.defaultProps = defaultThemeProp;\n\nexport const StyledProgressEllipsis = styled(StyledProgressVisual)<\n  Pick<ProgressProps, 'placement'>\n>(({ theme, placement }) => {\n  return css`\n    line-height: 1;\n    display: ${placement === 'inline' ? 'inline-flex' : 'block'};\n\n    @keyframes LoadingEllipsis {\n      0% {\n        transform: scale(0);\n        opacity: 0;\n      }\n\n      50% {\n        transform: scale(1);\n        opacity: 1;\n      }\n\n      100% {\n        transform: scale(0);\n        opacity: 0;\n      }\n    }\n\n    > span {\n      display: flex;\n      justify-content: center;\n\n      ${placement === 'inline' &&\n      css`\n        display: inline-flex;\n      `}\n    }\n\n    > span span {\n      margin: 0 0.3125rem;\n      background: ${theme.components.progress['progress-color']};\n      border-radius: 50%;\n      animation: LoadingEllipsis calc(4 * ${theme.base.animation.speed}) infinite;\n\n      ${placement === 'global' &&\n      css`\n        width: 1.25rem;\n        height: 1.25rem;\n      `}\n\n      ${(placement === 'local' || placement === 'block') &&\n      css`\n        width: 0.625rem;\n        height: 0.625rem;\n      `}\n\n      ${placement === 'inline' &&\n      css`\n        width: 0.1875rem;\n        height: 0.1875rem;\n        margin: 0 0.1875rem;\n        animation-duration: calc(4 * ${theme.base.animation.speed});\n      `}\n\n      &:nth-child(2) {\n        animation-delay: 0.1667s;\n      }\n\n      &:nth-child(3) {\n        animation-delay: ${0.1667 * 2}s;\n      }\n    }\n  `;\n});\n\nStyledProgressEllipsis.defaultProps = defaultThemeProp;\n\nexport const StyledMessage = styled.span(({ theme }) => {\n  const color = tryCatch(() => {\n    return rgba(\n      readableColor(theme.base.palette['primary-background']),\n      theme.base.transparency['transparent-3']\n    );\n  });\n\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    font-size: ${fontSize[theme.components.label['font-size'] as FontSize]};\n    font-weight: ${theme.base['font-weight']['semi-bold']};\n    color: ${color};\n  `;\n});\n\nStyledMessage.defaultProps = defaultThemeProp;\n\nexport const StyledProgress = styled(Flex)<Pick<ProgressProps, 'placement'>>(({\n  theme,\n  placement\n}) => {\n  return css`\n    ${placement !== 'inline' &&\n    css`\n      width: 100%;\n    `}\n\n    ${placement === 'block' &&\n    css`\n      margin-block: calc(2 * ${theme.base.spacing});\n    `}\n  `;\n});\n\nStyledProgress.defaultProps = defaultThemeProp;\n"]}

package/lib/components/RadioButton/RadioButtonCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButtonCard.d.ts","sourceRoot":"","sources":["../../../src/components/RadioButton/RadioButtonCard.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,OAAO,KAAK,EAAE,UAAU,EAAc,MAAM,aAAa,CAAC;AAK1D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAwC/E,MAAM,MAAM,oBAAoB,GAAG,UAAU,CAAC,kBAAkB,EAAE,SAAS,CAAC,GAC1E,UAAU,CAAC,gBAAgB,EAAE,OAAO,GAAG,SAAS,CAAC,CAAC;;;;AAoEpD,wBAAuE"}
+{"version":3,"file":"RadioButtonCard.d.ts","sourceRoot":"","sources":["../../../src/components/RadioButton/RadioButtonCard.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,OAAO,KAAK,EAAE,UAAU,EAAc,MAAM,aAAa,CAAC;AAK1D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAkC/E,MAAM,MAAM,oBAAoB,GAAG,UAAU,CAAC,kBAAkB,EAAE,SAAS,CAAC,GAC1E,UAAU,CAAC,gBAAgB,EAAE,OAAO,GAAG,SAAS,CAAC,CAAC;;;;AAoEpD,wBAAuE"}

package/lib/components/RadioButton/RadioButtonCard.js

@@ -6,9 +6,8 @@ import SelectionCard, { focusableSelector } from '../SelectionCard/SelectionCard
 import Text from '../Text';
 import { useConsolidatedRef, useTestIds, useUID } from '../../hooks';
 import { getActiveElement, withTestIds } from '../../utils';
-import { StyledRadioCheck } from '../RadioCheck/RadioCheck';
 import { getRadioButtonCardTestIds } from './RadioButton.test-ids';
-const StyledSelectionCard = styled.div(({ disabled, readOnly, theme: { components: { input, 'form-control': { ':hover': { 'border-color': hoverBorderColor } } } } }) => {
+const StyledSelectionCard = styled.div(({ disabled, readOnly, theme: { components: { 'form-control': { ':hover': { 'border-color': hoverBorderColor } } } } }) => {
     return css `
       ${!disabled &&
         css `
@@ -21,10 +20,6 @@ const StyledSelectionCard = styled.div(({ disabled, readOnly, theme: { component
           border-color: ${hoverBorderColor};
         }
       `}
-
-      ${StyledRadioCheck} {
-        min-height: ${input.height};
-      }
     `;
 });
 StyledSelectionCard.defaultProps = defaultThemeProp;

package/lib/components/RadioButton/RadioButtonCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButtonCard.js","sourceRoot":"","sources":["../../../src/components/RadioButton/RadioButtonCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useRef } from 'react';\nimport type { PropsWithoutRef, MouseEvent, KeyboardEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, RadioButton } from '@pega/cosmos-react-core';\nimport type { RadioButtonProps } from '@pega/cosmos-react-core';\n\nimport type { OmitStrict, RefElement } from '../../types';\nimport SelectionCard, { focusableSelector } from '../SelectionCard/SelectionCard';\nimport Text from '../Text';\nimport { useConsolidatedRef, useTestIds, useUID } from '../../hooks';\nimport { getActiveElement, withTestIds } from '../../utils';\nimport type { SelectionCardProps } from '../SelectionCard/SelectionCard.types';\nimport { StyledRadioCheck } from '../RadioCheck/RadioCheck';\n\nimport { getRadioButtonCardTestIds } from './RadioButton.test-ids';\n\nconst StyledSelectionCard = styled.div<Pick<RadioButtonProps, 'disabled' | 'readOnly'>>(\n  ({\n    disabled,\n    readOnly,\n    theme: {\n      components: {\n        input,\n        'form-control': {\n          ':hover': { 'border-color': hoverBorderColor }\n        }\n      }\n    }\n  }) => {\n    return css`\n      ${!disabled &&\n      css`\n        cursor: pointer;\n      `}\n\n      ${!(disabled || readOnly) &&\n      css`\n        :hover:not(:focus-within) {\n          border-color: ${hoverBorderColor};\n        }\n      `}\n\n      ${StyledRadioCheck} {\n        min-height: ${input.height};\n      }\n    `;\n  }\n);\n\nStyledSelectionCard.defaultProps = defaultThemeProp;\n\nexport type RadioButtonCardProps = OmitStrict<SelectionCardProps, 'heading'> &\n  OmitStrict<RadioButtonProps, 'label' | 'variant'>;\n\nconst RadioButtonCard = forwardRef<\n  RefElement<RadioButtonProps>,\n  PropsWithoutRef<RadioButtonCardProps>\n>(function RadioButtonCard(prop, ref) {\n  const uid = useUID();\n  const { testId, id = uid, label, disabled, readOnly, ...restProps } = prop;\n\n  const testIds = useTestIds(testId, getRadioButtonCardTestIds);\n  const contentId = `${id}-content`;\n  const inputRef = useConsolidatedRef(ref);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  return (\n    <StyledSelectionCard\n      {...restProps}\n      as={SelectionCard}\n      testId={testIds}\n      label={label}\n      heading={\n        <RadioButton\n          testId={testIds.root}\n          {...restProps}\n          id={id}\n          disabled={disabled}\n          readOnly={readOnly}\n          label={\n            <Text variant='h4' as='span'>\n              {label}\n            </Text>\n          }\n          variant='simple'\n          aria-details={contentId}\n          ref={inputRef}\n          onKeyDown={(e: KeyboardEvent) => {\n            if (e.key.includes('arrow')) e.preventDefault();\n          }}\n        />\n      }\n      readOnly={readOnly}\n      disabled={disabled}\n      onClick={(e: MouseEvent<HTMLDivElement>) => {\n        const target = e.target as HTMLElement;\n        if (readOnly || !containerRef.current?.contains(target)) return;\n        if (\n          containerRef.current &&\n          [...containerRef.current.querySelectorAll(focusableSelector)].includes(target)\n        )\n          return;\n        e.preventDefault();\n        inputRef.current?.click();\n        (inputRef.current?.hasAttribute('data-main-focus')\n          ? inputRef\n          : containerRef\n        ).current?.focus();\n      }}\n      onKeyDown={(e: KeyboardEvent) => {\n        if (e.key === ' ' && containerRef.current === getActiveElement()) {\n          e.preventDefault();\n          inputRef.current?.click();\n        }\n      }}\n      ref={containerRef}\n    />\n  );\n});\n\nexport default withTestIds(RadioButtonCard, getRadioButtonCardTestIds);\n"]}
+{"version":3,"file":"RadioButtonCard.js","sourceRoot":"","sources":["../../../src/components/RadioButton/RadioButtonCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useRef } from 'react';\nimport type { PropsWithoutRef, MouseEvent, KeyboardEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, RadioButton } from '@pega/cosmos-react-core';\nimport type { RadioButtonProps } from '@pega/cosmos-react-core';\n\nimport type { OmitStrict, RefElement } from '../../types';\nimport SelectionCard, { focusableSelector } from '../SelectionCard/SelectionCard';\nimport Text from '../Text';\nimport { useConsolidatedRef, useTestIds, useUID } from '../../hooks';\nimport { getActiveElement, withTestIds } from '../../utils';\nimport type { SelectionCardProps } from '../SelectionCard/SelectionCard.types';\n\nimport { getRadioButtonCardTestIds } from './RadioButton.test-ids';\n\nconst StyledSelectionCard = styled.div<Pick<RadioButtonProps, 'disabled' | 'readOnly'>>(\n  ({\n    disabled,\n    readOnly,\n    theme: {\n      components: {\n        'form-control': {\n          ':hover': { 'border-color': hoverBorderColor }\n        }\n      }\n    }\n  }) => {\n    return css`\n      ${!disabled &&\n      css`\n        cursor: pointer;\n      `}\n\n      ${!(disabled || readOnly) &&\n      css`\n        :hover:not(:focus-within) {\n          border-color: ${hoverBorderColor};\n        }\n      `}\n    `;\n  }\n);\n\nStyledSelectionCard.defaultProps = defaultThemeProp;\n\nexport type RadioButtonCardProps = OmitStrict<SelectionCardProps, 'heading'> &\n  OmitStrict<RadioButtonProps, 'label' | 'variant'>;\n\nconst RadioButtonCard = forwardRef<\n  RefElement<RadioButtonProps>,\n  PropsWithoutRef<RadioButtonCardProps>\n>(function RadioButtonCard(prop, ref) {\n  const uid = useUID();\n  const { testId, id = uid, label, disabled, readOnly, ...restProps } = prop;\n\n  const testIds = useTestIds(testId, getRadioButtonCardTestIds);\n  const contentId = `${id}-content`;\n  const inputRef = useConsolidatedRef(ref);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  return (\n    <StyledSelectionCard\n      {...restProps}\n      as={SelectionCard}\n      testId={testIds}\n      label={label}\n      heading={\n        <RadioButton\n          testId={testIds.root}\n          {...restProps}\n          id={id}\n          disabled={disabled}\n          readOnly={readOnly}\n          label={\n            <Text variant='h4' as='span'>\n              {label}\n            </Text>\n          }\n          variant='simple'\n          aria-details={contentId}\n          ref={inputRef}\n          onKeyDown={(e: KeyboardEvent) => {\n            if (e.key.includes('arrow')) e.preventDefault();\n          }}\n        />\n      }\n      readOnly={readOnly}\n      disabled={disabled}\n      onClick={(e: MouseEvent<HTMLDivElement>) => {\n        const target = e.target as HTMLElement;\n        if (readOnly || !containerRef.current?.contains(target)) return;\n        if (\n          containerRef.current &&\n          [...containerRef.current.querySelectorAll(focusableSelector)].includes(target)\n        )\n          return;\n        e.preventDefault();\n        inputRef.current?.click();\n        (inputRef.current?.hasAttribute('data-main-focus')\n          ? inputRef\n          : containerRef\n        ).current?.focus();\n      }}\n      onKeyDown={(e: KeyboardEvent) => {\n        if (e.key === ' ' && containerRef.current === getActiveElement()) {\n          e.preventDefault();\n          inputRef.current?.click();\n        }\n      }}\n      ref={containerRef}\n    />\n  );\n});\n\nexport default withTestIds(RadioButtonCard, getRadioButtonCardTestIds);\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"RadioCheckGroup.d.ts","sourceRoot":"","sources":["../../../src/components/RadioCheckGroup/RadioCheckGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAmB,YAAY,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAG7E,OAAO,KAAK,EAAE,+BAA+B,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE/E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAgBrD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAIhE,MAAM,WAAW,oBAAqB,SAAQ,UAAU,CAAC,OAAO,QAAQ,CAAC;IACvE,sDAAsD;IACtD,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACtD,mGAAmG;IACnG,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IACpC,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC;;;OAGG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,GAAG,WAAW,CAAC;IACnD,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,eAAO,MAAM,qBAAqB,8GAajC,CAAC;;;;AAuIF,wBAAuE"}
+{"version":3,"file":"RadioCheckGroup.d.ts","sourceRoot":"","sources":["../../../src/components/RadioCheckGroup/RadioCheckGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAmB,YAAY,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAG7E,OAAO,KAAK,EAAE,+BAA+B,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE/E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAiBrD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAIhE,MAAM,WAAW,oBAAqB,SAAQ,UAAU,CAAC,OAAO,QAAQ,CAAC;IACvE,sDAAsD;IACtD,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACtD,mGAAmG;IACnG,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IACpC,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC;;;OAGG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,GAAG,WAAW,CAAC;IACnD,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,eAAO,MAAM,qBAAqB,8GAiBjC,CAAC;;;;AAuIF,wBAAuE"}

package/lib/components/RadioCheckGroup/RadioCheckGroup.js

@@ -6,7 +6,7 @@ import { StyledFormField } from '../FormField/FormField';
 import Flex from '../Flex';
 import { useArrows, useConsolidatedRef, useElement, useTestIds, useTheme, useUID } from '../../hooks';
 import Grid from '../Grid';
-import { StyledImageContainer, StyledSelectionCardInline } from '../SelectionCard/SelectionCard.styles';
+import { StyledImageContainer, StyledSelectionCard, StyledSelectionCardInline } from '../SelectionCard/SelectionCard.styles';
 import { withTestIds } from '../../utils';
 import { getRadioCheckGroupTestIds } from './RadioCheckGroup.test-ids';
 export const StyledRadioCheckGroup = styled.fieldset `
@@ -18,6 +18,10 @@ export const StyledRadioCheckGroup = styled.fieldset `
     }
   }
 
+  ${StyledSelectionCard} {
+    max-width: 100%;
+  }
+
   ${StyledSelectionCardInline} ${StyledImageContainer} {
     /* To enlarge the image containers to the size of the biggest one */
     min-height: 100%;
@@ -81,7 +85,7 @@ const RadioCheckGroup = forwardRef(function RadioCheckGroup(props, ref) {
                 gap: 1,
                 cols: (() => {
                     if (!renderInline)
-                        return '1fr';
+                        return 'minmax(min-content, max-content)';
                     if (autoStack)
                         return `repeat(auto-fit, minmax(min(100%, ${theme.base['content-width'].sm}), 1fr))`;
                     return `repeat(${Children.count(children)}, 1fr)`;

package/lib/components/RadioCheckGroup/RadioCheckGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioCheckGroup.js","sourceRoot":"","sources":["../../../src/components/RadioCheckGroup/RadioCheckGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, Children, cloneElement, useState, useEffect, useRef, useMemo } from 'react';\nimport type { Ref, PropsWithoutRef, ReactElement, ChangeEvent } from 'react';\nimport styled from 'styled-components';\n\nimport type { ForwardRefForwardPropsComponent, TestIdProp } from '../../types';\nimport FormField from '../FormField';\nimport type { FormFieldProps } from '../FormField';\nimport { StyledFormField } from '../FormField/FormField';\nimport type { FormControlProps } from '../FormControl';\nimport type { RadioCheckProps } from '../RadioCheck';\nimport Flex from '../Flex';\nimport {\n  useArrows,\n  useConsolidatedRef,\n  useElement,\n  useTestIds,\n  useTheme,\n  useUID\n} from '../../hooks';\nimport Grid from '../Grid';\nimport {\n  StyledImageContainer,\n  StyledSelectionCardInline\n} from '../SelectionCard/SelectionCard.styles';\nimport { withTestIds } from '../../utils';\nimport type { elements } from '../FormField/FormField.test-ids';\n\nimport { getRadioCheckGroupTestIds } from './RadioCheckGroup.test-ids';\n\nexport interface RadioCheckGroupProps extends TestIdProp<typeof elements> {\n  /** Accepts Checkboxes or RadioButtons as children. */\n  children: ReactElement | ReactElement[];\n  /**\n   * Conveniently pass an onChange handler to the group to be notified when any of the inputs change.\n   * Additionally, onChange can be passed to individual children.\n   * Both handlers will be called, child followed by group.\n   */\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n  /** Callback invoked when the clear button is clicked. If provided will render the clear button. */\n  onClear?: FormFieldProps['onClear'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /** Visually hides the label region. */\n  labelHidden?: FormControlProps['labelHidden'];\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: FormControlProps['info'];\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: FormControlProps['readOnly'];\n  /**\n   * Layout field elements inline in a row.\n   * @default false\n   */\n  inline?: FormFieldProps['inline'];\n  /** Used to toggle the auto stacking feature of an inlined group.\n   * @default true\n   */\n  autoStack?: boolean;\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /**\n   * Controls the styling of the child RadioChecks.\n   * @default 'simple'\n   */\n  variant?: RadioCheckProps['variant'] | 'card-grid';\n  /** Pass a heading and content to show additional information on the field. */\n  additionalInfo?: FormControlProps['additionalInfo'];\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLElement>;\n}\n\nexport const StyledRadioCheckGroup = styled.fieldset`\n  flex-wrap: nowrap;\n\n  &[disabled] {\n    > ${StyledFormField} {\n      opacity: unset;\n    }\n  }\n\n  ${StyledSelectionCardInline} ${StyledImageContainer} {\n    /* To enlarge the image containers to the size of the biggest one */\n    min-height: 100%;\n  }\n`;\n\nconst RadioCheckGroup: ForwardRefForwardPropsComponent<RadioCheckGroupProps> = forwardRef(\n  function RadioCheckGroup(\n    props: PropsWithoutRef<RadioCheckGroupProps>,\n    ref: RadioCheckGroupProps['ref']\n  ) {\n    const uid = useUID();\n    const {\n      testId,\n      children,\n      name = uid,\n      disabled = false,\n      required = false,\n      onChange,\n      readOnly,\n      inline = false,\n      autoStack = true,\n      variant = 'simple',\n      onClear,\n      ...restProps\n    } = props;\n\n    const testIds = useTestIds(testId, getRadioCheckGroupTestIds);\n    const theme = useTheme();\n    const [optionsEl, setOptionsEl] = useElement<HTMLDivElement>();\n    const [renderInline, setRenderInline] = useState(inline);\n    const renderInlineRef = useRef(inline);\n    const minInlineWidth = useRef(0);\n    const containerRef = useConsolidatedRef(ref);\n\n    useArrows(containerRef, {\n      selector: '[data-main-focus]',\n      cycle: false,\n      dir: 'left-right'\n    });\n\n    useEffect(() => {\n      setRenderInline(inline);\n      if (inline && optionsEl && optionsEl.lastChild && autoStack) {\n        const intersectionObserver = new IntersectionObserver(\n          entries => {\n            if (entries[0].intersectionRatio < 1) {\n              if (entries[0].rootBounds) minInlineWidth.current = entries[0].rootBounds.width + 1;\n              renderInlineRef.current = false;\n              setRenderInline(false);\n            }\n          },\n          { root: optionsEl, threshold: 1 }\n        );\n\n        const resizeObserver = new ResizeObserver(entries => {\n          if (!renderInlineRef.current && entries[0].contentRect.width > minInlineWidth.current) {\n            renderInlineRef.current = true;\n            setRenderInline(true);\n          }\n        });\n\n        intersectionObserver.observe(optionsEl.lastChild as Element);\n        resizeObserver.observe(optionsEl);\n\n        return () => {\n          intersectionObserver.disconnect();\n          resizeObserver.disconnect();\n        };\n      }\n    }, [optionsEl, inline, autoStack]);\n\n    const mapChildren = useMemo(\n      () =>\n        Children.map(children, child =>\n          cloneElement(child, {\n            name,\n            disabled: disabled || child.props.disabled,\n            readOnly: readOnly || child.props.readOnly,\n            variant: variant === 'card-grid' ? 'card' : variant,\n            onChange: onChange\n              ? (e: ChangeEvent<HTMLInputElement>) => {\n                  if (!(readOnly || child.props.readOnly)) {\n                    child.props.onChange?.(e);\n                    onChange(e);\n                  }\n                }\n              : child.props.onChange\n          })\n        ),\n      [children, name, disabled, readOnly, variant, onChange]\n    );\n\n    return (\n      <FormField\n        testId={testIds}\n        as={StyledRadioCheckGroup}\n        labelAs='legend'\n        ref={containerRef}\n        name={name}\n        disabled={disabled}\n        required={required}\n        {...restProps}\n        isRadioCheck\n        onClear={onClear}\n      >\n        {variant === 'card-grid' ? (\n          <Grid\n            container={{\n              gap: 1,\n              cols: (() => {\n                if (!renderInline) return '1fr';\n                if (autoStack)\n                  return `repeat(auto-fit, minmax(min(100%, ${theme.base['content-width'].sm}), 1fr))`;\n                return `repeat(${Children.count(children)}, 1fr)`;\n              })(),\n              autoRows: '1fr'\n            }}\n          >\n            {mapChildren}\n          </Grid>\n        ) : (\n          <Flex\n            ref={setOptionsEl}\n            container={{\n              direction: renderInline ? 'row' : 'column',\n              colGap: renderInline ? 1.5 : 2,\n              rowGap: variant === 'card' ? 1 : 0,\n              wrap: 'wrap'\n            }}\n          >\n            {mapChildren}\n          </Flex>\n        )}\n      </FormField>\n    );\n  }\n);\n\nexport default withTestIds(RadioCheckGroup, getRadioCheckGroupTestIds);\n"]}
+{"version":3,"file":"RadioCheckGroup.js","sourceRoot":"","sources":["../../../src/components/RadioCheckGroup/RadioCheckGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,YAAY,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEjG,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAGvC,OAAO,SAAS,MAAM,cAAc,CAAC;AAErC,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAGzD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EACL,SAAS,EACT,kBAAkB,EAClB,UAAU,EACV,UAAU,EACV,QAAQ,EACR,MAAM,EACP,MAAM,aAAa,CAAC;AACrB,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EACL,oBAAoB,EACpB,mBAAmB,EACnB,yBAAyB,EAC1B,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG1C,OAAO,EAAE,yBAAyB,EAAE,MAAM,4BAA4B,CAAC;AAiDvE,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,QAAQ,CAAA;;;;QAI5C,eAAe;;;;;IAKnB,mBAAmB;;;;IAInB,yBAAyB,IAAI,oBAAoB;;;;CAIpD,CAAC;AAEF,MAAM,eAAe,GAA0D,UAAU,CACvF,SAAS,eAAe,CACtB,KAA4C,EAC5C,GAAgC;IAEhC,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IACrB,MAAM,EACJ,MAAM,EACN,QAAQ,EACR,IAAI,GAAG,GAAG,EACV,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,QAAQ,EACR,MAAM,GAAG,KAAK,EACd,SAAS,GAAG,IAAI,EAChB,OAAO,GAAG,QAAQ,EAClB,OAAO,EACP,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,yBAAyB,CAAC,CAAC;IAC9D,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,UAAU,EAAkB,CAAC;IAC/D,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC;IACzD,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;IACvC,MAAM,cAAc,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IACjC,MAAM,YAAY,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAE7C,SAAS,CAAC,YAAY,EAAE;QACtB,QAAQ,EAAE,mBAAmB;QAC7B,KAAK,EAAE,KAAK;QACZ,GAAG,EAAE,YAAY;KAClB,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,eAAe,CAAC,MAAM,CAAC,CAAC;QACxB,IAAI,MAAM,IAAI,SAAS,IAAI,SAAS,CAAC,SAAS,IAAI,SAAS,EAAE,CAAC;YAC5D,MAAM,oBAAoB,GAAG,IAAI,oBAAoB,CACnD,OAAO,CAAC,EAAE;gBACR,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,iBAAiB,GAAG,CAAC,EAAE,CAAC;oBACrC,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,UAAU;wBAAE,cAAc,CAAC,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,GAAG,CAAC,CAAC;oBACpF,eAAe,CAAC,OAAO,GAAG,KAAK,CAAC;oBAChC,eAAe,CAAC,KAAK,CAAC,CAAC;gBACzB,CAAC;YACH,CAAC,EACD,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,EAAE,CAClC,CAAC;YAEF,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,OAAO,CAAC,EAAE;gBAClD,IAAI,CAAC,eAAe,CAAC,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,GAAG,cAAc,CAAC,OAAO,EAAE,CAAC;oBACtF,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC;oBAC/B,eAAe,CAAC,IAAI,CAAC,CAAC;gBACxB,CAAC;YACH,CAAC,CAAC,CAAC;YAEH,oBAAoB,CAAC,OAAO,CAAC,SAAS,CAAC,SAAoB,CAAC,CAAC;YAC7D,cAAc,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;YAElC,OAAO,GAAG,EAAE;gBACV,oBAAoB,CAAC,UAAU,EAAE,CAAC;gBAClC,cAAc,CAAC,UAAU,EAAE,CAAC;YAC9B,CAAC,CAAC;QACJ,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC;IAEnC,MAAM,WAAW,GAAG,OAAO,CACzB,GAAG,EAAE,CACH,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,KAAK,CAAC,EAAE,CAC7B,YAAY,CAAC,KAAK,EAAE;QAClB,IAAI;QACJ,QAAQ,EAAE,QAAQ,IAAI,KAAK,CAAC,KAAK,CAAC,QAAQ;QAC1C,QAAQ,EAAE,QAAQ,IAAI,KAAK,CAAC,KAAK,CAAC,QAAQ;QAC1C,OAAO,EAAE,OAAO,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;QACnD,QAAQ,EAAE,QAAQ;YAChB,CAAC,CAAC,CAAC,CAAgC,EAAE,EAAE;gBACnC,IAAI,CAAC,CAAC,QAAQ,IAAI,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC;oBACxC,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC;oBAC1B,QAAQ,CAAC,CAAC,CAAC,CAAC;gBACd,CAAC;YACH,CAAC;YACH,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ;KACzB,CAAC,CACH,EACH,CAAC,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,CAAC,CACxD,CAAC;IAEF,OAAO,CACL,KAAC,SAAS,IACR,MAAM,EAAE,OAAO,EACf,EAAE,EAAE,qBAAqB,EACzB,OAAO,EAAC,QAAQ,EAChB,GAAG,EAAE,YAAY,EACjB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,KACd,SAAS,EACb,YAAY,QACZ,OAAO,EAAE,OAAO,YAEf,OAAO,KAAK,WAAW,CAAC,CAAC,CAAC,CACzB,KAAC,IAAI,IACH,SAAS,EAAE;gBACT,GAAG,EAAE,CAAC;gBACN,IAAI,EAAE,CAAC,GAAG,EAAE;oBACV,IAAI,CAAC,YAAY;wBAAE,OAAO,kCAAkC,CAAC;oBAC7D,IAAI,SAAS;wBACX,OAAO,qCAAqC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE,UAAU,CAAC;oBACvF,OAAO,UAAU,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC;gBACpD,CAAC,CAAC,EAAE;gBACJ,QAAQ,EAAE,KAAK;aAChB,YAEA,WAAW,GACP,CACR,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IACH,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE;gBACT,SAAS,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ;gBAC1C,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;gBAC9B,MAAM,EAAE,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBAClC,IAAI,EAAE,MAAM;aACb,YAEA,WAAW,GACP,CACR,GACS,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC,eAAe,EAAE,yBAAyB,CAAC,CAAC","sourcesContent":["import { forwardRef, Children, cloneElement, useState, useEffect, useRef, useMemo } from 'react';\nimport type { Ref, PropsWithoutRef, ReactElement, ChangeEvent } from 'react';\nimport styled from 'styled-components';\n\nimport type { ForwardRefForwardPropsComponent, TestIdProp } from '../../types';\nimport FormField from '../FormField';\nimport type { FormFieldProps } from '../FormField';\nimport { StyledFormField } from '../FormField/FormField';\nimport type { FormControlProps } from '../FormControl';\nimport type { RadioCheckProps } from '../RadioCheck';\nimport Flex from '../Flex';\nimport {\n  useArrows,\n  useConsolidatedRef,\n  useElement,\n  useTestIds,\n  useTheme,\n  useUID\n} from '../../hooks';\nimport Grid from '../Grid';\nimport {\n  StyledImageContainer,\n  StyledSelectionCard,\n  StyledSelectionCardInline\n} from '../SelectionCard/SelectionCard.styles';\nimport { withTestIds } from '../../utils';\nimport type { elements } from '../FormField/FormField.test-ids';\n\nimport { getRadioCheckGroupTestIds } from './RadioCheckGroup.test-ids';\n\nexport interface RadioCheckGroupProps extends TestIdProp<typeof elements> {\n  /** Accepts Checkboxes or RadioButtons as children. */\n  children: ReactElement | ReactElement[];\n  /**\n   * Conveniently pass an onChange handler to the group to be notified when any of the inputs change.\n   * Additionally, onChange can be passed to individual children.\n   * Both handlers will be called, child followed by group.\n   */\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n  /** Callback invoked when the clear button is clicked. If provided will render the clear button. */\n  onClear?: FormFieldProps['onClear'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /** Visually hides the label region. */\n  labelHidden?: FormControlProps['labelHidden'];\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: FormControlProps['info'];\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: FormControlProps['readOnly'];\n  /**\n   * Layout field elements inline in a row.\n   * @default false\n   */\n  inline?: FormFieldProps['inline'];\n  /** Used to toggle the auto stacking feature of an inlined group.\n   * @default true\n   */\n  autoStack?: boolean;\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /**\n   * Controls the styling of the child RadioChecks.\n   * @default 'simple'\n   */\n  variant?: RadioCheckProps['variant'] | 'card-grid';\n  /** Pass a heading and content to show additional information on the field. */\n  additionalInfo?: FormControlProps['additionalInfo'];\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLElement>;\n}\n\nexport const StyledRadioCheckGroup = styled.fieldset`\n  flex-wrap: nowrap;\n\n  &[disabled] {\n    > ${StyledFormField} {\n      opacity: unset;\n    }\n  }\n\n  ${StyledSelectionCard} {\n    max-width: 100%;\n  }\n\n  ${StyledSelectionCardInline} ${StyledImageContainer} {\n    /* To enlarge the image containers to the size of the biggest one */\n    min-height: 100%;\n  }\n`;\n\nconst RadioCheckGroup: ForwardRefForwardPropsComponent<RadioCheckGroupProps> = forwardRef(\n  function RadioCheckGroup(\n    props: PropsWithoutRef<RadioCheckGroupProps>,\n    ref: RadioCheckGroupProps['ref']\n  ) {\n    const uid = useUID();\n    const {\n      testId,\n      children,\n      name = uid,\n      disabled = false,\n      required = false,\n      onChange,\n      readOnly,\n      inline = false,\n      autoStack = true,\n      variant = 'simple',\n      onClear,\n      ...restProps\n    } = props;\n\n    const testIds = useTestIds(testId, getRadioCheckGroupTestIds);\n    const theme = useTheme();\n    const [optionsEl, setOptionsEl] = useElement<HTMLDivElement>();\n    const [renderInline, setRenderInline] = useState(inline);\n    const renderInlineRef = useRef(inline);\n    const minInlineWidth = useRef(0);\n    const containerRef = useConsolidatedRef(ref);\n\n    useArrows(containerRef, {\n      selector: '[data-main-focus]',\n      cycle: false,\n      dir: 'left-right'\n    });\n\n    useEffect(() => {\n      setRenderInline(inline);\n      if (inline && optionsEl && optionsEl.lastChild && autoStack) {\n        const intersectionObserver = new IntersectionObserver(\n          entries => {\n            if (entries[0].intersectionRatio < 1) {\n              if (entries[0].rootBounds) minInlineWidth.current = entries[0].rootBounds.width + 1;\n              renderInlineRef.current = false;\n              setRenderInline(false);\n            }\n          },\n          { root: optionsEl, threshold: 1 }\n        );\n\n        const resizeObserver = new ResizeObserver(entries => {\n          if (!renderInlineRef.current && entries[0].contentRect.width > minInlineWidth.current) {\n            renderInlineRef.current = true;\n            setRenderInline(true);\n          }\n        });\n\n        intersectionObserver.observe(optionsEl.lastChild as Element);\n        resizeObserver.observe(optionsEl);\n\n        return () => {\n          intersectionObserver.disconnect();\n          resizeObserver.disconnect();\n        };\n      }\n    }, [optionsEl, inline, autoStack]);\n\n    const mapChildren = useMemo(\n      () =>\n        Children.map(children, child =>\n          cloneElement(child, {\n            name,\n            disabled: disabled || child.props.disabled,\n            readOnly: readOnly || child.props.readOnly,\n            variant: variant === 'card-grid' ? 'card' : variant,\n            onChange: onChange\n              ? (e: ChangeEvent<HTMLInputElement>) => {\n                  if (!(readOnly || child.props.readOnly)) {\n                    child.props.onChange?.(e);\n                    onChange(e);\n                  }\n                }\n              : child.props.onChange\n          })\n        ),\n      [children, name, disabled, readOnly, variant, onChange]\n    );\n\n    return (\n      <FormField\n        testId={testIds}\n        as={StyledRadioCheckGroup}\n        labelAs='legend'\n        ref={containerRef}\n        name={name}\n        disabled={disabled}\n        required={required}\n        {...restProps}\n        isRadioCheck\n        onClear={onClear}\n      >\n        {variant === 'card-grid' ? (\n          <Grid\n            container={{\n              gap: 1,\n              cols: (() => {\n                if (!renderInline) return 'minmax(min-content, max-content)';\n                if (autoStack)\n                  return `repeat(auto-fit, minmax(min(100%, ${theme.base['content-width'].sm}), 1fr))`;\n                return `repeat(${Children.count(children)}, 1fr)`;\n              })(),\n              autoRows: '1fr'\n            }}\n          >\n            {mapChildren}\n          </Grid>\n        ) : (\n          <Flex\n            ref={setOptionsEl}\n            container={{\n              direction: renderInline ? 'row' : 'column',\n              colGap: renderInline ? 1.5 : 2,\n              rowGap: variant === 'card' ? 1 : 0,\n              wrap: 'wrap'\n            }}\n          >\n            {mapChildren}\n          </Flex>\n        )}\n      </FormField>\n    );\n  }\n);\n\nexport default withTestIds(RadioCheckGroup, getRadioCheckGroupTestIds);\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"SelectionCard.d.ts","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCard.tsx"],"names":[],"mappings":"AA0CA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAIhE,eAAO,MAAM,iBAAiB,wFACyD,CAAC;;;;AA+LxF,wBAAmE"}
+{"version":3,"file":"SelectionCard.d.ts","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCard.tsx"],"names":[],"mappings":"AA2CA,OAAO,KAAK,EAA+B,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAI7F,eAAO,MAAM,iBAAiB,wFACyD,CAAC;;;;AAqMxF,wBAAmE"}

package/lib/components/SelectionCard/SelectionCard.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useRef, useState, useMemo, useLayoutEffect, useCallback, cloneElement } from 'react';
-import { debounce, getActiveElement, withTestIds, isValidElement } from '../../utils';
+import { debounce, getActiveElement, withTestIds, isValidElement, hasProp } from '../../utils';
 import Icon, { registerIcon } from '../Icon';
 import { useConsolidatedRef, useEscape, useFocusTrap, useFocusWithin, useI18n, usePrevious, useTestIds, useUID } from '../../hooks';
 import Grid from '../Grid';
@@ -65,17 +65,20 @@ const SelectionCard = forwardRef(function SelectionCard(props, ref) {
         onKeyDown?.(event);
     }, [containerRef, contentRef]);
     const imageContent = useMemo(() => {
-        if (image?.src) {
-            const imagery = isBrokenImage && image.src === prevImageSrc ? (_jsx(Icon, { name: 'picture', "aria-label": t('image_load_error') })) : (_jsx(StyledImage, { "data-testid": testIds.image, ...image, onError: () => setIsBrokenImage(true), onLoad: () => setIsBrokenImage(false) }));
+        if (image) {
+            const imagery = (isBrokenImage && image.src === prevImageSrc) || image.src === undefined ? (_jsx(Icon, { name: 'picture', "aria-label": t('image_load_error') })) : (_jsx(StyledImage, { "data-testid": testIds.image, ...image, onError: () => setIsBrokenImage(true), onLoad: () => setIsBrokenImage(false) }));
             return (_jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledImageContainer, placement: image.placement, size: image.size, children: imagery }));
         }
     }, [isBrokenImage, image?.src, prevImageSrc, image?.placement, image?.size]);
     let asProp = StyledSelectionCard;
     if (image) {
-        asProp = image.placement?.startsWith('inline')
-            ? StyledSelectionCardInline
-            : StyledSelectionCardStacked;
+        asProp = image.placement?.startsWith('block')
+            ? StyledSelectionCardStacked
+            : StyledSelectionCardInline;
     }
+    const isFieldValueListItemProps = (item) => {
+        return hasProp(item, 'name');
+    };
     return (_jsxs(Grid, { "data-testid": testIds.root, ...restProps, onClick: onClick, as: asProp, placement: image?.placement, size: image?.size, container: { cols: '1fr', rows: 'auto' }, disabled: disabled, role: hasInteractiveElements ? 'group' : 'article', "aria-label": label, ref: containerRef, "data-main-focus": focusOnInput ? undefined : true, tabIndex: focusOnInput ? undefined : 0, onKeyDown: handleKeyDown, style: { '--content-height': `${contentHeight}px` }, children: [image && image.placement !== 'inline-end' && imageContent, _jsx("div", { children: _jsxs(Flex, { as: StyledContentContainer, container: { wrap: 'wrap', alignContent: 'start', justify: 'between' }, ref: contentRef, children: [isValidElement(heading)
                             ? cloneElement(heading, {
                                 ...{
@@ -85,7 +88,7 @@ const SelectionCard = forwardRef(function SelectionCard(props, ref) {
                                 }
                             })
                             : heading, actions && (_jsx(Actions, { "data-testid": testIds.actions, items: actions, menuAt: 1, disabled: disabled, contextualLabel: label })), fields.length > 0 &&
-                            (fields.every(field => 'name' in field) ? (_jsx(FieldValueList, { id: contentId, "data-testid": testIds.content, fields: fields })) : (_jsx(Flex, { container: { direction: 'column', gap: 1 }, as: StyledValueList, id: contentId, "data-testid": testIds.content, children: fields.map(field => (_jsx("li", { children: field.value }, field.id))) })))] }) }), image?.placement === 'inline-end' && imageContent] }));
+                            (fields.every(field => isFieldValueListItemProps(field)) ? (_jsx(FieldValueList, { id: contentId, "data-testid": testIds.content, fields: fields })) : (_jsx(Flex, { container: { direction: 'column', gap: 1 }, as: StyledValueList, id: contentId, "data-testid": testIds.content, children: fields.map(field => (_jsx("li", { children: field.value }, field.id))) })))] }) }), image?.placement === 'inline-end' && imageContent] }));
 });
 export default withTestIds(SelectionCard, getSelectionCardTestIds);
 //# sourceMappingURL=SelectionCard.js.map

package/lib/components/SelectionCard/SelectionCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectionCard.js","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCard.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,SAAS,EACT,MAAM,EACN,QAAQ,EACR,OAAO,EACP,eAAe,EACf,WAAW,EACX,YAAY,EACb,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACtF,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE7C,OAAO,EACL,kBAAkB,EAClB,SAAS,EACT,YAAY,EACZ,cAAc,EACd,OAAO,EACP,WAAW,EACX,UAAU,EACV,MAAM,EACP,MAAM,aAAa,CAAC;AACrB,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAC/C,OAAO,OAAO,MAAM,YAAY,CAAC;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,KAAK,WAAW,MAAM,4BAA4B,CAAC;AAE1D,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,EACL,mBAAmB,EACnB,sBAAsB,EACtB,oBAAoB,EACpB,yBAAyB,EACzB,0BAA0B,EAC1B,eAAe,EAChB,MAAM,wBAAwB,CAAC;AAGhC,YAAY,CAAC,WAAW,CAAC,CAAC;AAE1B,MAAM,CAAC,MAAM,iBAAiB,GAC5B,qFAAqF,CAAC;AAExF,MAAM,gBAAgB,GAAG,CAAC,GAA2B,EAAE,EAAE;IACvD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,EAAsB,CAAC;IAE3D,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,GAAG,CAAC,OAAO;YAAE,OAAO;QAEzB,MAAM,cAAc,GAAG,IAAI,cAAc,CACvC,QAAQ,CAAC,GAAG,EAAE;YACZ,SAAS,CAAC,GAAG,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;QACvC,CAAC,EAAE,GAAG,CAAC,CACR,CAAC;QAEF,cAAc,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QAEpC,OAAO,GAAG,EAAE;YACV,cAAc,CAAC,UAAU,EAAE,CAAC;QAC9B,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAEF,MAAM,aAAa,GAAG,UAAU,CAG9B,SAAS,aAAa,CAAC,KAAK,EAAE,GAAG;IACjC,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,EACJ,MAAM,EACN,KAAK,EACL,OAAO,EACP,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,MAAM,GAAG,EAAE,EACX,OAAO,EACP,SAAS,EACT,OAAO,EACP,cAAc,EACd,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAChD,MAAM,YAAY,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAE7C,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,CAAC,sBAAsB,EAAE,yBAAyB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACxE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,YAAY,GAAG,WAAW,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IAC7C,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,uBAAuB,CAAC,CAAC;IAC5D,MAAM,SAAS,GAAG,MAAM,EAAE,CAAC;IAC3B,MAAM,aAAa,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;IAEnD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,UAAU,GAAG,YAAY,CAAC,OAAO,EAAE,gBAAgB,CAAC,iBAAiB,CAAC,CAAC;QAC7E,yBAAyB,CAAC,UAAU,EAAE,MAAM,IAAI,CAAC,CAAC,CAAC;QACnD,eAAe,CAAC,UAAU,EAAE,MAAM,KAAK,CAAC,IAAI,UAAU,EAAE,CAAC,CAAC,CAAC,YAAY,gBAAgB,CAAC,CAAC;QACzF,UAAU,EAAE,OAAO,CAAC,EAAE,CAAC,EAAE,CACvB,EAAE,CAAC,YAAY,CAAC,iBAAiB,CAAC;YAChC,CAAC,CAAC,EAAE,CAAC,eAAe,CAAC,UAAU,CAAC;YAChC,CAAC,CAAC,EAAE,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CACtC,CAAC;IACJ,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC;IAErD,YAAY,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,EAAE,KAAK,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEpE,cAAc,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC,EAAE,CAC3D,UAAU,CAAC,OAAO;QAChB,EAAE,gBAAgB,CAAC,iBAAiB,CAAC;SACpC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC,CACjG,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,EAAE;QACjF,YAAY;KACb,CAAC,CAAC;IAEH,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,KAAoB,EAAE,EAAE;QACvB,IACE,KAAK,CAAC,GAAG,KAAK,OAAO;YACrB,YAAY,CAAC,OAAO,KAAK,gBAAgB,EAAE;YAC3C,CAAC,CAAC,YAAY,IAAI,CAAC,YAAY,IAAI,sBAAsB,GAAG,CAAC,CAAC,CAAC,EAC/D,CAAC;YACD,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,UAAU,CAAC,OAAO,EAAE,gBAAgB,CAAc,iBAAiB,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;QACnF,CAAC;QACD,SAAS,EAAE,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC,EACD,CAAC,YAAY,EAAE,UAAU,CAAC,CAC3B,CAAC;IAEF,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE;QAChC,IAAI,KAAK,EAAE,GAAG,EAAE,CAAC;YACf,MAAM,OAAO,GACX,aAAa,IAAI,KAAK,CAAC,GAAG,KAAK,YAAY,CAAC,CAAC,CAAC,CAC5C,KAAC,IAAI,IAAC,IAAI,EAAC,SAAS,gBAAa,CAAC,CAAC,kBAAkB,CAAC,GAAI,CAC3D,CAAC,CAAC,CAAC,CACF,KAAC,WAAW,mBACG,OAAO,CAAC,KAAK,KACtB,KAAK,EACT,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC,EACrC,MAAM,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,KAAK,CAAC,GACrC,CACH,CAAC;YACJ,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,EACtD,EAAE,EAAE,oBAAoB,EACxB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,IAAI,EAAE,KAAK,CAAC,IAAI,YAEf,OAAO,GACH,CACR,CAAC;QACJ,CAAC;IACH,CAAC,EAAE,CAAC,aAAa,EAAE,KAAK,EAAE,GAAG,EAAE,YAAY,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC;IAE7E,IAAI,MAAM,GAAoB,mBAAmB,CAAC;IAClD,IAAI,KAAK,EAAE,CAAC;QACV,MAAM,GAAG,KAAK,CAAC,SAAS,EAAE,UAAU,CAAC,QAAQ,CAAC;YAC5C,CAAC,CAAC,yBAAyB;YAC3B,CAAC,CAAC,0BAA0B,CAAC;IACjC,CAAC;IAED,OAAO,CACL,MAAC,IAAI,mBACU,OAAO,CAAC,IAAI,KACrB,SAAS,EACb,OAAO,EAAE,OAAO,EAChB,EAAE,EAAE,MAAM,EACV,SAAS,EAAE,KAAK,EAAE,SAAS,EAC3B,IAAI,EAAE,KAAK,EAAE,IAAI,EACjB,SAAS,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,EACxC,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,sBAAsB,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,gBACtC,KAAK,EACjB,GAAG,EAAE,YAAY,qBACA,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,EAChD,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EACtC,SAAS,EAAE,aAAa,EACxB,KAAK,EAAE,EAAE,kBAAkB,EAAE,GAAG,aAAa,IAAI,EAAE,aAElD,KAAK,IAAI,KAAK,CAAC,SAAS,KAAK,YAAY,IAAI,YAAY,EAC1D,wBACE,MAAC,IAAI,IACH,EAAE,EAAE,sBAAsB,EAC1B,SAAS,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,EACtE,GAAG,EAAE,UAAU,aAEd,cAAc,CAAC,OAAO,CAAC;4BACtB,CAAC,CAAC,YAAY,CAAC,OAAO,EAAE;gCACpB,GAAG;oCACD,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;oCACvC,cAAc;oCACd,iBAAiB,EAAE,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;iCACnD;6BACF,CAAC;4BACJ,CAAC,CAAC,OAAO,EACV,OAAO,IAAI,CACV,KAAC,OAAO,mBACO,OAAO,CAAC,OAAO,EAC5B,KAAK,EAAE,OAAO,EACd,MAAM,EAAE,CAAC,EACT,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAE,KAAK,GACtB,CACH,EACA,MAAM,CAAC,MAAM,GAAG,CAAC;4BAChB,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,MAAM,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,CACxC,KAAC,cAAc,IAAC,EAAE,EAAE,SAAS,iBAAe,OAAO,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,GAAI,CAChF,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAC1C,EAAE,EAAE,eAAe,EACnB,EAAE,EAAE,SAAS,iBACA,OAAO,CAAC,OAAO,YAE3B,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CACnB,uBAAoB,KAAK,CAAC,KAAK,IAAtB,KAAK,CAAC,EAAE,CAAoB,CACtC,CAAC,GACG,CACR,CAAC,IACC,GACH,EACL,KAAK,EAAE,SAAS,KAAK,YAAY,IAAI,YAAY,IAC7C,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC,aAAa,EAAE,uBAAuB,CAAC,CAAC","sourcesContent":["import {\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n  useMemo,\n  useLayoutEffect,\n  useCallback,\n  cloneElement\n} from 'react';\nimport type { KeyboardEvent, PropsWithoutRef, RefObject } from 'react';\n\nimport { debounce, getActiveElement, withTestIds, isValidElement } from '../../utils';\nimport Icon, { registerIcon } from '../Icon';\nimport type { RefElement } from '../../types';\nimport {\n  useConsolidatedRef,\n  useEscape,\n  useFocusTrap,\n  useFocusWithin,\n  useI18n,\n  usePrevious,\n  useTestIds,\n  useUID\n} from '../../hooks';\nimport Grid from '../Grid';\nimport type { GridProps } from '../Grid';\nimport Flex from '../Flex';\nimport FieldValueList from '../FieldValueList';\nimport Actions from '../Actions';\nimport { StyledImage } from '../Image';\nimport * as pictureIcon from '../Icon/icons/picture.icon';\n\nimport { getSelectionCardTestIds } from './SelectionCard.test-ids';\nimport {\n  StyledSelectionCard,\n  StyledContentContainer,\n  StyledImageContainer,\n  StyledSelectionCardInline,\n  StyledSelectionCardStacked,\n  StyledValueList\n} from './SelectionCard.styles';\nimport type { SelectionCardProps } from './SelectionCard.types';\n\nregisterIcon(pictureIcon);\n\nexport const focusableSelector =\n  'a[href], button, input, textarea, select, details, video[controls], audio[controls]';\n\nconst useContentHeight = (ref: RefObject<HTMLElement>) => {\n  const [height, setHeight] = useState<number | undefined>();\n\n  useLayoutEffect(() => {\n    if (!ref.current) return;\n\n    const resizeObserver = new ResizeObserver(\n      debounce(() => {\n        setHeight(ref.current?.scrollHeight);\n      }, 100)\n    );\n\n    resizeObserver.observe(ref.current);\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, []);\n\n  return height;\n};\n\nconst SelectionCard = forwardRef<\n  RefElement<SelectionCardProps>,\n  PropsWithoutRef<SelectionCardProps>\n>(function SelectionCard(props, ref) {\n  const t = useI18n();\n\n  const {\n    testId,\n    label,\n    heading,\n    disabled = false,\n    image,\n    fields = [],\n    onClick,\n    onKeyDown,\n    actions,\n    additionalInfo,\n    ...restProps\n  } = props;\n\n  const contentRef = useRef<HTMLDivElement>(null);\n  const containerRef = useConsolidatedRef(ref);\n\n  const [focusOnInput, setFocusOnInput] = useState(false);\n  const [hasInteractiveElements, setHasInteractiveElements] = useState(0);\n  const [isBrokenImage, setIsBrokenImage] = useState(false);\n  const prevImageSrc = usePrevious(image?.src);\n  const testIds = useTestIds(testId, getSelectionCardTestIds);\n  const contentId = useUID();\n  const contentHeight = useContentHeight(contentRef);\n\n  useEffect(() => {\n    const focusables = containerRef.current?.querySelectorAll(focusableSelector);\n    setHasInteractiveElements(focusables?.length || 0);\n    setFocusOnInput(focusables?.length === 1 && focusables?.[0] instanceof HTMLInputElement);\n    focusables?.forEach(el =>\n      el.hasAttribute('data-main-focus')\n        ? el.removeAttribute('tabindex')\n        : el.setAttribute('tabindex', '-1')\n    );\n  }, [additionalInfo, fields, actions, contentHeight]);\n\n  useFocusTrap(focusOnInput ? null : contentRef, false, [contentRef]);\n\n  useFocusWithin([focusOnInput ? null : contentRef], focused =>\n    contentRef.current\n      ?.querySelectorAll(focusableSelector)\n      .forEach(el => (focused ? el.removeAttribute('tabindex') : el.setAttribute('tabindex', '-1')))\n  );\n\n  useEscape(() => containerRef.current?.focus(), focusOnInput ? null : containerRef, [\n    containerRef\n  ]);\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (\n        event.key === 'Enter' &&\n        containerRef.current === getActiveElement() &&\n        (!focusOnInput || (focusOnInput && hasInteractiveElements > 1))\n      ) {\n        event.preventDefault();\n        contentRef.current?.querySelectorAll<HTMLElement>(focusableSelector)[0]?.focus();\n      }\n      onKeyDown?.(event);\n    },\n    [containerRef, contentRef]\n  );\n\n  const imageContent = useMemo(() => {\n    if (image?.src) {\n      const imagery =\n        isBrokenImage && image.src === prevImageSrc ? (\n          <Icon name='picture' aria-label={t('image_load_error')} />\n        ) : (\n          <StyledImage\n            data-testid={testIds.image}\n            {...image}\n            onError={() => setIsBrokenImage(true)}\n            onLoad={() => setIsBrokenImage(false)}\n          />\n        );\n      return (\n        <Flex\n          container={{ justify: 'center', alignItems: 'center' }}\n          as={StyledImageContainer}\n          placement={image.placement}\n          size={image.size}\n        >\n          {imagery}\n        </Flex>\n      );\n    }\n  }, [isBrokenImage, image?.src, prevImageSrc, image?.placement, image?.size]);\n\n  let asProp: GridProps['as'] = StyledSelectionCard;\n  if (image) {\n    asProp = image.placement?.startsWith('inline')\n      ? StyledSelectionCardInline\n      : StyledSelectionCardStacked;\n  }\n\n  return (\n    <Grid\n      data-testid={testIds.root}\n      {...restProps}\n      onClick={onClick}\n      as={asProp}\n      placement={image?.placement}\n      size={image?.size}\n      container={{ cols: '1fr', rows: 'auto' }}\n      disabled={disabled}\n      role={hasInteractiveElements ? 'group' : 'article'}\n      aria-label={label}\n      ref={containerRef}\n      data-main-focus={focusOnInput ? undefined : true}\n      tabIndex={focusOnInput ? undefined : 0}\n      onKeyDown={handleKeyDown}\n      style={{ '--content-height': `${contentHeight}px` }}\n    >\n      {image && image.placement !== 'inline-end' && imageContent}\n      <div>\n        <Flex\n          as={StyledContentContainer}\n          container={{ wrap: 'wrap', alignContent: 'start', justify: 'between' }}\n          ref={contentRef}\n        >\n          {isValidElement(heading)\n            ? cloneElement(heading, {\n                ...{\n                  tabIndex: focusOnInput ? undefined : -1,\n                  additionalInfo,\n                  'data-main-focus': focusOnInput ? true : undefined\n                }\n              })\n            : heading}\n          {actions && (\n            <Actions\n              data-testid={testIds.actions}\n              items={actions}\n              menuAt={1}\n              disabled={disabled}\n              contextualLabel={label}\n            />\n          )}\n          {fields.length > 0 &&\n            (fields.every(field => 'name' in field) ? (\n              <FieldValueList id={contentId} data-testid={testIds.content} fields={fields} />\n            ) : (\n              <Flex\n                container={{ direction: 'column', gap: 1 }}\n                as={StyledValueList}\n                id={contentId}\n                data-testid={testIds.content}\n              >\n                {fields.map(field => (\n                  <li key={field.id}>{field.value}</li>\n                ))}\n              </Flex>\n            ))}\n        </Flex>\n      </div>\n      {image?.placement === 'inline-end' && imageContent}\n    </Grid>\n  );\n});\n\nexport default withTestIds(SelectionCard, getSelectionCardTestIds);\n"]}
+{"version":3,"file":"SelectionCard.js","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n  useMemo,\n  useLayoutEffect,\n  useCallback,\n  cloneElement\n} from 'react';\nimport type { KeyboardEvent, PropsWithoutRef, RefObject } from 'react';\n\nimport { debounce, getActiveElement, withTestIds, isValidElement, hasProp } from '../../utils';\nimport Icon, { registerIcon } from '../Icon';\nimport type { RefElement } from '../../types';\nimport {\n  useConsolidatedRef,\n  useEscape,\n  useFocusTrap,\n  useFocusWithin,\n  useI18n,\n  usePrevious,\n  useTestIds,\n  useUID\n} from '../../hooks';\nimport Grid from '../Grid';\nimport type { GridProps } from '../Grid';\nimport Flex from '../Flex';\nimport FieldValueList from '../FieldValueList';\nimport type { FieldValueListItemProps } from '../FieldValueList';\nimport Actions from '../Actions';\nimport { StyledImage } from '../Image';\nimport * as pictureIcon from '../Icon/icons/picture.icon';\n\nimport { getSelectionCardTestIds } from './SelectionCard.test-ids';\nimport {\n  StyledSelectionCard,\n  StyledContentContainer,\n  StyledImageContainer,\n  StyledSelectionCardInline,\n  StyledSelectionCardStacked,\n  StyledValueList\n} from './SelectionCard.styles';\nimport type { FieldValueItemPropsOmitName, SelectionCardProps } from './SelectionCard.types';\n\nregisterIcon(pictureIcon);\n\nexport const focusableSelector =\n  'a[href], button, input, textarea, select, details, video[controls], audio[controls]';\n\nconst useContentHeight = (ref: RefObject<HTMLElement>) => {\n  const [height, setHeight] = useState<number | undefined>();\n\n  useLayoutEffect(() => {\n    if (!ref.current) return;\n\n    const resizeObserver = new ResizeObserver(\n      debounce(() => {\n        setHeight(ref.current?.scrollHeight);\n      }, 100)\n    );\n\n    resizeObserver.observe(ref.current);\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, []);\n\n  return height;\n};\n\nconst SelectionCard = forwardRef<\n  RefElement<SelectionCardProps>,\n  PropsWithoutRef<SelectionCardProps>\n>(function SelectionCard(props, ref) {\n  const t = useI18n();\n\n  const {\n    testId,\n    label,\n    heading,\n    disabled = false,\n    image,\n    fields = [],\n    onClick,\n    onKeyDown,\n    actions,\n    additionalInfo,\n    ...restProps\n  } = props;\n\n  const contentRef = useRef<HTMLDivElement>(null);\n  const containerRef = useConsolidatedRef(ref);\n\n  const [focusOnInput, setFocusOnInput] = useState(false);\n  const [hasInteractiveElements, setHasInteractiveElements] = useState(0);\n  const [isBrokenImage, setIsBrokenImage] = useState(false);\n  const prevImageSrc = usePrevious(image?.src);\n  const testIds = useTestIds(testId, getSelectionCardTestIds);\n  const contentId = useUID();\n  const contentHeight = useContentHeight(contentRef);\n\n  useEffect(() => {\n    const focusables = containerRef.current?.querySelectorAll(focusableSelector);\n    setHasInteractiveElements(focusables?.length || 0);\n    setFocusOnInput(focusables?.length === 1 && focusables?.[0] instanceof HTMLInputElement);\n    focusables?.forEach(el =>\n      el.hasAttribute('data-main-focus')\n        ? el.removeAttribute('tabindex')\n        : el.setAttribute('tabindex', '-1')\n    );\n  }, [additionalInfo, fields, actions, contentHeight]);\n\n  useFocusTrap(focusOnInput ? null : contentRef, false, [contentRef]);\n\n  useFocusWithin([focusOnInput ? null : contentRef], focused =>\n    contentRef.current\n      ?.querySelectorAll(focusableSelector)\n      .forEach(el => (focused ? el.removeAttribute('tabindex') : el.setAttribute('tabindex', '-1')))\n  );\n\n  useEscape(() => containerRef.current?.focus(), focusOnInput ? null : containerRef, [\n    containerRef\n  ]);\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (\n        event.key === 'Enter' &&\n        containerRef.current === getActiveElement() &&\n        (!focusOnInput || (focusOnInput && hasInteractiveElements > 1))\n      ) {\n        event.preventDefault();\n        contentRef.current?.querySelectorAll<HTMLElement>(focusableSelector)[0]?.focus();\n      }\n      onKeyDown?.(event);\n    },\n    [containerRef, contentRef]\n  );\n\n  const imageContent = useMemo(() => {\n    if (image) {\n      const imagery =\n        (isBrokenImage && image.src === prevImageSrc) || image.src === undefined ? (\n          <Icon name='picture' aria-label={t('image_load_error')} />\n        ) : (\n          <StyledImage\n            data-testid={testIds.image}\n            {...image}\n            onError={() => setIsBrokenImage(true)}\n            onLoad={() => setIsBrokenImage(false)}\n          />\n        );\n      return (\n        <Flex\n          container={{ justify: 'center', alignItems: 'center' }}\n          as={StyledImageContainer}\n          placement={image.placement}\n          size={image.size}\n        >\n          {imagery}\n        </Flex>\n      );\n    }\n  }, [isBrokenImage, image?.src, prevImageSrc, image?.placement, image?.size]);\n\n  let asProp: GridProps['as'] = StyledSelectionCard;\n  if (image) {\n    asProp = image.placement?.startsWith('block')\n      ? StyledSelectionCardStacked\n      : StyledSelectionCardInline;\n  }\n\n  const isFieldValueListItemProps = (\n    item: FieldValueListItemProps | FieldValueItemPropsOmitName\n  ): item is FieldValueListItemProps => {\n    return hasProp(item, 'name');\n  };\n\n  return (\n    <Grid\n      data-testid={testIds.root}\n      {...restProps}\n      onClick={onClick}\n      as={asProp}\n      placement={image?.placement}\n      size={image?.size}\n      container={{ cols: '1fr', rows: 'auto' }}\n      disabled={disabled}\n      role={hasInteractiveElements ? 'group' : 'article'}\n      aria-label={label}\n      ref={containerRef}\n      data-main-focus={focusOnInput ? undefined : true}\n      tabIndex={focusOnInput ? undefined : 0}\n      onKeyDown={handleKeyDown}\n      style={{ '--content-height': `${contentHeight}px` }}\n    >\n      {image && image.placement !== 'inline-end' && imageContent}\n      <div>\n        <Flex\n          as={StyledContentContainer}\n          container={{ wrap: 'wrap', alignContent: 'start', justify: 'between' }}\n          ref={contentRef}\n        >\n          {isValidElement(heading)\n            ? cloneElement(heading, {\n                ...{\n                  tabIndex: focusOnInput ? undefined : -1,\n                  additionalInfo,\n                  'data-main-focus': focusOnInput ? true : undefined\n                }\n              })\n            : heading}\n          {actions && (\n            <Actions\n              data-testid={testIds.actions}\n              items={actions}\n              menuAt={1}\n              disabled={disabled}\n              contextualLabel={label}\n            />\n          )}\n          {fields.length > 0 &&\n            (fields.every(field => isFieldValueListItemProps(field)) ? (\n              <FieldValueList id={contentId} data-testid={testIds.content} fields={fields} />\n            ) : (\n              <Flex\n                container={{ direction: 'column', gap: 1 }}\n                as={StyledValueList}\n                id={contentId}\n                data-testid={testIds.content}\n              >\n                {fields.map(field => (\n                  <li key={field.id}>{field.value}</li>\n                ))}\n              </Flex>\n            ))}\n        </Flex>\n      </div>\n      {image?.placement === 'inline-end' && imageContent}\n    </Grid>\n  );\n});\n\nexport default withTestIds(SelectionCard, getSelectionCardTestIds);\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"SelectionCard.styles.d.ts","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCard.styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAMjD,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAE3F,eAAO,MAAM,mBAAmB,2IAwC/B,CAAC;AAIF,eAAO,MAAM,yBAAyB;gBACxB,aAAa,CAAC,cAAc,EAAE,aAAa,CAAC;WACjD,SAAS;SAwBhB,CAAC;AAEH,eAAO,MAAM,0BAA0B;WAAwC,SAAS;SAkBtF,CAAC;AAEH,eAAO,MAAM,oBAAoB;gBACnB,cAAc;WACnB,SAAS;SA0EjB,CAAC;AAIF,eAAO,MAAM,eAAe,wGAG3B,CAAC;AAEF,eAAO,MAAM,sBAAsB,yGAsBjC,CAAC"}
+{"version":3,"file":"SelectionCard.styles.d.ts","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCard.styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAMjD,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAE3F,eAAO,MAAM,mBAAmB,2IAyC/B,CAAC;AAIF,eAAO,MAAM,yBAAyB;gBACxB,aAAa,CAAC,cAAc,EAAE,aAAa,CAAC;WACjD,SAAS;SAsBhB,CAAC;AAEH,eAAO,MAAM,0BAA0B;WAAwC,SAAS;SAkBtF,CAAC;AAEH,eAAO,MAAM,oBAAoB;gBACnB,cAAc;WACnB,SAAS;SA8EjB,CAAC;AAIF,eAAO,MAAM,eAAe,wGAG3B,CAAC;AAEF,eAAO,MAAM,sBAAsB,yGAqBjC,CAAC"}

package/lib/components/SelectionCard/SelectionCard.styles.js

@@ -1,11 +1,12 @@
 import styled, { css } from 'styled-components';
 import { defaultThemeProp } from '../../theme';
 import { StyledPseudoRadioCheck } from '../RadioCheck/RadioCheck';
-import { StyledFieldValue, StyledFieldValueList } from '../FieldValueList';
+import { StyledFieldValue, StyledFieldValueList, StyledStackedFieldValue } from '../FieldValueList';
 import { StyledIcon } from '../Icon';
 export const StyledSelectionCard = styled.div(({ disabled, theme: { base: { palette, 'disabled-opacity': disabledOpacity }, components: { card, 'form-control': { ':focus': { 'box-shadow': shadow, 'border-color': focusBorderColor } } } } }) => {
     return css `
       min-width: min-content;
+      max-width: max-content;
       background-color: ${card.background};
       border-radius: ${card['border-radius']};
       border: 0.0625rem solid ${palette['border-line']};
@@ -41,11 +42,9 @@ export const StyledSelectionCardInline = styled(StyledSelectionCard)(({ placemen
         case 'large':
             imageContainerSize = '8.875rem';
             break;
-        case 'flexible':
+        default:
             imageContainerSize = 'minmax(2.5rem, auto)';
             break;
-        default:
-            imageContainerSize = '';
     }
     return css `
     /* stylelint-disable unit-allowed-list -- "Unexpected unit "fr\`" */
@@ -76,27 +75,22 @@ export const StyledSelectionCardStacked = styled(StyledSelectionCard)(({ size })
 export const StyledImageContainer = styled.div(({ theme: { base: { palette, transparency }, components: { card: { 'border-radius': borderRadius } } }, placement = 'inline-start', size = 'flexible' }) => {
     return css `
       background-color: ${palette['app-background']};
+      overflow: hidden;
 
       img {
         height: 100%;
         object-fit: contain;
       }
 
-      ${placement === 'block-start'
-        ? css `
-            border-start-start-radius: ${borderRadius};
-            border-start-end-radius: ${borderRadius};
-
-            > img {
-              aspect-ratio: 16 / 9;
-              max-height: 100%;
-            }
-          `
-        : css `
-            > img {
-              aspect-ratio: 4 / 5;
-            }
-          `}
+      > img {
+        aspect-ratio: 4 / 5;
+
+        ${placement === 'block-start' &&
+        css `
+          aspect-ratio: 16 / 9;
+          max-height: 100%;
+        `}
+      }
 
       ${size === 'flexible' &&
         placement !== 'block-start' &&
@@ -121,17 +115,26 @@ export const StyledImageContainer = styled.div(({ theme: { base: { palette, tran
         }
       `}
 
+      /* Recalculation of the border radius by substracting border width */
       ${placement === 'inline-start' &&
         css `
-        border-start-start-radius: ${borderRadius};
-        border-end-start-radius: ${borderRadius};
+        border-start-start-radius: calc(${borderRadius} - 0.0625rem);
+        border-end-start-radius: calc(${borderRadius} - 0.0625rem);
       `}
-        ${placement === 'inline-end' &&
+
+      ${placement === 'inline-end' &&
         css `
-        border-end-end-radius: ${borderRadius};
-        border-start-end-radius: ${borderRadius};
+        border-end-end-radius: calc(${borderRadius} - 0.0625rem);
+        border-start-end-radius: calc(${borderRadius} - 0.0625rem);
       `}
-        ${StyledIcon} {
+
+      ${placement === 'block-start' &&
+        css `
+        border-start-start-radius: calc(${borderRadius} - 0.0625rem);
+        border-start-end-radius: calc(${borderRadius} - 0.0625rem);
+      `}
+
+      ${StyledIcon} {
         opacity: ${transparency['transparent-3']};
       }
     `;
@@ -145,10 +148,6 @@ export const StyledContentContainer = styled.div(({ theme }) => {
     return css `
     padding: ${theme.base.spacing};
 
-    & > * {
-      min-height: ${theme.base['hit-area']['mouse-min']};
-    }
-
     ${StyledFieldValueList}, ${StyledValueList} {
       margin-block-start: ${theme.base.spacing};
     }
@@ -162,6 +161,9 @@ export const StyledContentContainer = styled.div(({ theme }) => {
         text-overflow: ellipsis;
       }
     }
+    ${StyledStackedFieldValue} {
+      grid-column: 1 / -1;
+    }
   `;
 });
 StyledContentContainer.defaultProps = defaultThemeProp;

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

@@ -1 +1 @@
-{"version":3,"file":"SelectionCard.styles.js","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCard.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport type { ExcludeStrict } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { StyledPseudoRadioCheck } from '../RadioCheck/RadioCheck';\nimport { StyledFieldValue, StyledFieldValueList } from '../FieldValueList';\nimport { StyledIcon } from '../Icon';\n\nimport type { ImagePlacement, ImageSize, SelectionCardProps } from './SelectionCard.types';\n\nexport const StyledSelectionCard = styled.div<Pick<SelectionCardProps, 'disabled'>>(\n  ({\n    disabled,\n    theme: {\n      base: { palette, 'disabled-opacity': disabledOpacity },\n      components: {\n        card,\n        'form-control': {\n          ':focus': { 'box-shadow': shadow, 'border-color': focusBorderColor }\n        }\n      }\n    }\n  }) => {\n    return css`\n      min-width: min-content;\n      background-color: ${card.background};\n      border-radius: ${card['border-radius']};\n      border: 0.0625rem solid ${palette['border-line']};\n\n      ${disabled &&\n      css`\n        cursor: not-allowed;\n        opacity: ${disabledOpacity};\n      `}\n\n      ${!disabled &&\n      css`\n        :focus {\n          box-shadow: ${shadow};\n          border-color: transparent;\n          outline: none;\n\n          & ${StyledPseudoRadioCheck} {\n            box-shadow: ${shadow};\n            border-color: ${focusBorderColor};\n          }\n        }\n      `}\n    `;\n  }\n);\n\nStyledSelectionCard.defaultProps = defaultThemeProp;\n\nexport const StyledSelectionCardInline = styled(StyledSelectionCard)<{\n  placement?: ExcludeStrict<ImagePlacement, 'block-start'>;\n  size?: ImageSize;\n}>(({ placement, size }) => {\n  let imageContainerSize;\n  switch (size) {\n    case 'small':\n      imageContainerSize = '2.5rem';\n      break;\n    case 'large':\n      imageContainerSize = '8.875rem';\n      break;\n    case 'flexible':\n      imageContainerSize = 'minmax(2.5rem, auto)';\n      break;\n    default:\n      imageContainerSize = '';\n  }\n  return css`\n    /* stylelint-disable unit-allowed-list -- \"Unexpected unit \"fr\\`\" */\n    grid-template-columns: ${placement === 'inline-end'\n      ? `1fr ${imageContainerSize}`\n      : `${imageContainerSize} 1fr`};\n    /* stylelint-enable unit-allowed-list */\n    grid-template-rows: minmax(2.75rem, 1fr);\n  `;\n});\n\nexport const StyledSelectionCardStacked = styled(StyledSelectionCard)<{ size?: ImageSize }>(({\n  size\n}) => {\n  let containerSize;\n  switch (size) {\n    case 'small':\n      containerSize = '2.5rem';\n      break;\n    case 'large':\n      containerSize = '15.125rem';\n      break;\n    default:\n      containerSize = 'minmax(2.5rem, 15.125rem)';\n  }\n  return css`\n    grid-template-rows: ${containerSize} 1fr;\n    grid-template-columns: minmax(2.75rem, 1fr);\n  `;\n});\n\nexport const StyledImageContainer = styled.div<{\n  placement?: ImagePlacement;\n  size?: ImageSize;\n}>(\n  ({\n    theme: {\n      base: { palette, transparency },\n      components: {\n        card: { 'border-radius': borderRadius }\n      }\n    },\n    placement = 'inline-start',\n    size = 'flexible'\n  }) => {\n    return css`\n      background-color: ${palette['app-background']};\n\n      img {\n        height: 100%;\n        object-fit: contain;\n      }\n\n      ${placement === 'block-start'\n        ? css`\n            border-start-start-radius: ${borderRadius};\n            border-start-end-radius: ${borderRadius};\n\n            > img {\n              aspect-ratio: 16 / 9;\n              max-height: 100%;\n            }\n          `\n        : css`\n            > img {\n              aspect-ratio: 4 / 5;\n            }\n          `}\n\n      ${size === 'flexible' &&\n      placement !== 'block-start' &&\n      css`\n        max-width: 8.875rem;\n        height: var(--content-height);\n      `};\n\n      ${size === 'large' &&\n      css`\n        min-height: 11.0625rem;\n      `}\n\n      ${size === 'small' &&\n      css`\n        aspect-ratio: unset;\n\n        > img {\n          max-width: 2rem;\n          max-height: 2rem;\n          aspect-ratio: 1 / 1;\n        }\n      `}\n\n      ${placement === 'inline-start' &&\n      css`\n        border-start-start-radius: ${borderRadius};\n        border-end-start-radius: ${borderRadius};\n      `}\n        ${placement === 'inline-end' &&\n      css`\n        border-end-end-radius: ${borderRadius};\n        border-start-end-radius: ${borderRadius};\n      `}\n        ${StyledIcon} {\n        opacity: ${transparency['transparent-3']};\n      }\n    `;\n  }\n);\n\nStyledImageContainer.defaultProps = defaultThemeProp;\n\nexport const StyledValueList = styled.ul`\n  width: 100%;\n  list-style-type: none;\n`;\n\nexport const StyledContentContainer = styled.div(({ theme }) => {\n  return css`\n    padding: ${theme.base.spacing};\n\n    & > * {\n      min-height: ${theme.base['hit-area']['mouse-min']};\n    }\n\n    ${StyledFieldValueList}, ${StyledValueList} {\n      margin-block-start: ${theme.base.spacing};\n    }\n\n    ${StyledFieldValue} {\n      white-space: nowrap;\n\n      &,\n      div {\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n    }\n  `;\n});\n\nStyledContentContainer.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"SelectionCard.styles.js","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCard.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAC;AACpG,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAIrC,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAC3C,CAAC,EACC,QAAQ,EACR,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,EACtD,UAAU,EAAE,EACV,IAAI,EACJ,cAAc,EAAE,EACd,QAAQ,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,cAAc,EAAE,gBAAgB,EAAE,EACrE,EACF,EACF,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;0BAGY,IAAI,CAAC,UAAU;uBAClB,IAAI,CAAC,eAAe,CAAC;gCACZ,OAAO,CAAC,aAAa,CAAC;;QAE9C,QAAQ;QACV,GAAG,CAAA;;mBAEU,eAAe;OAC3B;;QAEC,CAAC,QAAQ;QACX,GAAG,CAAA;;wBAEe,MAAM;;;;cAIhB,sBAAsB;0BACV,MAAM;4BACJ,gBAAgB;;;OAGrC;KACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,yBAAyB,GAAG,MAAM,CAAC,mBAAmB,CAAC,CAGjE,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,EAAE;IACzB,IAAI,kBAAkB,CAAC;IACvB,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,OAAO;YACV,kBAAkB,GAAG,QAAQ,CAAC;YAC9B,MAAM;QACR,KAAK,OAAO;YACV,kBAAkB,GAAG,UAAU,CAAC;YAChC,MAAM;QACR;YACE,kBAAkB,GAAG,sBAAsB,CAAC;YAC5C,MAAM;IACV,CAAC;IACD,OAAO,GAAG,CAAA;;6BAEiB,SAAS,KAAK,YAAY;QACjD,CAAC,CAAC,OAAO,kBAAkB,EAAE;QAC7B,CAAC,CAAC,GAAG,kBAAkB,MAAM;;;GAGhC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,mBAAmB,CAAC,CAAuB,CAAC,EAC3F,IAAI,EACL,EAAE,EAAE;IACH,IAAI,aAAa,CAAC;IAClB,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,OAAO;YACV,aAAa,GAAG,QAAQ,CAAC;YACzB,MAAM;QACR,KAAK,OAAO;YACV,aAAa,GAAG,WAAW,CAAC;YAC5B,MAAM;QACR;YACE,aAAa,GAAG,2BAA2B,CAAC;IAChD,CAAC;IACD,OAAO,GAAG,CAAA;0BACc,aAAa;;GAEpC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAI5C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,YAAY,EAAE,EAC/B,UAAU,EAAE,EACV,IAAI,EAAE,EAAE,eAAe,EAAE,YAAY,EAAE,EACxC,EACF,EACD,SAAS,GAAG,cAAc,EAC1B,IAAI,GAAG,UAAU,EAClB,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;0BACY,OAAO,CAAC,gBAAgB,CAAC;;;;;;;;;;;UAWzC,SAAS,KAAK,aAAa;QAC7B,GAAG,CAAA;;;SAGF;;;QAGD,IAAI,KAAK,UAAU;QACrB,SAAS,KAAK,aAAa;QAC3B,GAAG,CAAA;;;OAGF;;QAEC,IAAI,KAAK,OAAO;QAClB,GAAG,CAAA;;OAEF;;QAEC,IAAI,KAAK,OAAO;QAClB,GAAG,CAAA;;;;;;;;OAQF;;;QAGC,SAAS,KAAK,cAAc;QAC9B,GAAG,CAAA;0CACiC,YAAY;wCACd,YAAY;OAC7C;;QAEC,SAAS,KAAK,YAAY;QAC5B,GAAG,CAAA;sCAC6B,YAAY;wCACV,YAAY;OAC7C;;QAEC,SAAS,KAAK,aAAa;QAC7B,GAAG,CAAA;0CACiC,YAAY;wCACd,YAAY;OAC7C;;QAEC,UAAU;mBACC,YAAY,CAAC,eAAe,CAAC;;KAE3C,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,EAAE,CAAA;;;CAGvC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7D,OAAO,GAAG,CAAA;eACG,KAAK,CAAC,IAAI,CAAC,OAAO;;MAE3B,oBAAoB,KAAK,eAAe;4BAClB,KAAK,CAAC,IAAI,CAAC,OAAO;;;MAGxC,gBAAgB;;;;;;;;;MAShB,uBAAuB;;;GAG1B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport type { ExcludeStrict } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { StyledPseudoRadioCheck } from '../RadioCheck/RadioCheck';\nimport { StyledFieldValue, StyledFieldValueList, StyledStackedFieldValue } from '../FieldValueList';\nimport { StyledIcon } from '../Icon';\n\nimport type { ImagePlacement, ImageSize, SelectionCardProps } from './SelectionCard.types';\n\nexport const StyledSelectionCard = styled.div<Pick<SelectionCardProps, 'disabled'>>(\n  ({\n    disabled,\n    theme: {\n      base: { palette, 'disabled-opacity': disabledOpacity },\n      components: {\n        card,\n        'form-control': {\n          ':focus': { 'box-shadow': shadow, 'border-color': focusBorderColor }\n        }\n      }\n    }\n  }) => {\n    return css`\n      min-width: min-content;\n      max-width: max-content;\n      background-color: ${card.background};\n      border-radius: ${card['border-radius']};\n      border: 0.0625rem solid ${palette['border-line']};\n\n      ${disabled &&\n      css`\n        cursor: not-allowed;\n        opacity: ${disabledOpacity};\n      `}\n\n      ${!disabled &&\n      css`\n        :focus {\n          box-shadow: ${shadow};\n          border-color: transparent;\n          outline: none;\n\n          & ${StyledPseudoRadioCheck} {\n            box-shadow: ${shadow};\n            border-color: ${focusBorderColor};\n          }\n        }\n      `}\n    `;\n  }\n);\n\nStyledSelectionCard.defaultProps = defaultThemeProp;\n\nexport const StyledSelectionCardInline = styled(StyledSelectionCard)<{\n  placement?: ExcludeStrict<ImagePlacement, 'block-start'>;\n  size?: ImageSize;\n}>(({ placement, size }) => {\n  let imageContainerSize;\n  switch (size) {\n    case 'small':\n      imageContainerSize = '2.5rem';\n      break;\n    case 'large':\n      imageContainerSize = '8.875rem';\n      break;\n    default:\n      imageContainerSize = 'minmax(2.5rem, auto)';\n      break;\n  }\n  return css`\n    /* stylelint-disable unit-allowed-list -- \"Unexpected unit \"fr\\`\" */\n    grid-template-columns: ${placement === 'inline-end'\n      ? `1fr ${imageContainerSize}`\n      : `${imageContainerSize} 1fr`};\n    /* stylelint-enable unit-allowed-list */\n    grid-template-rows: minmax(2.75rem, 1fr);\n  `;\n});\n\nexport const StyledSelectionCardStacked = styled(StyledSelectionCard)<{ size?: ImageSize }>(({\n  size\n}) => {\n  let containerSize;\n  switch (size) {\n    case 'small':\n      containerSize = '2.5rem';\n      break;\n    case 'large':\n      containerSize = '15.125rem';\n      break;\n    default:\n      containerSize = 'minmax(2.5rem, 15.125rem)';\n  }\n  return css`\n    grid-template-rows: ${containerSize} 1fr;\n    grid-template-columns: minmax(2.75rem, 1fr);\n  `;\n});\n\nexport const StyledImageContainer = styled.div<{\n  placement?: ImagePlacement;\n  size?: ImageSize;\n}>(\n  ({\n    theme: {\n      base: { palette, transparency },\n      components: {\n        card: { 'border-radius': borderRadius }\n      }\n    },\n    placement = 'inline-start',\n    size = 'flexible'\n  }) => {\n    return css`\n      background-color: ${palette['app-background']};\n      overflow: hidden;\n\n      img {\n        height: 100%;\n        object-fit: contain;\n      }\n\n      > img {\n        aspect-ratio: 4 / 5;\n\n        ${placement === 'block-start' &&\n        css`\n          aspect-ratio: 16 / 9;\n          max-height: 100%;\n        `}\n      }\n\n      ${size === 'flexible' &&\n      placement !== 'block-start' &&\n      css`\n        max-width: 8.875rem;\n        height: var(--content-height);\n      `};\n\n      ${size === 'large' &&\n      css`\n        min-height: 11.0625rem;\n      `}\n\n      ${size === 'small' &&\n      css`\n        aspect-ratio: unset;\n\n        > img {\n          max-width: 2rem;\n          max-height: 2rem;\n          aspect-ratio: 1 / 1;\n        }\n      `}\n\n      /* Recalculation of the border radius by substracting border width */\n      ${placement === 'inline-start' &&\n      css`\n        border-start-start-radius: calc(${borderRadius} - 0.0625rem);\n        border-end-start-radius: calc(${borderRadius} - 0.0625rem);\n      `}\n\n      ${placement === 'inline-end' &&\n      css`\n        border-end-end-radius: calc(${borderRadius} - 0.0625rem);\n        border-start-end-radius: calc(${borderRadius} - 0.0625rem);\n      `}\n\n      ${placement === 'block-start' &&\n      css`\n        border-start-start-radius: calc(${borderRadius} - 0.0625rem);\n        border-start-end-radius: calc(${borderRadius} - 0.0625rem);\n      `}\n\n      ${StyledIcon} {\n        opacity: ${transparency['transparent-3']};\n      }\n    `;\n  }\n);\n\nStyledImageContainer.defaultProps = defaultThemeProp;\n\nexport const StyledValueList = styled.ul`\n  width: 100%;\n  list-style-type: none;\n`;\n\nexport const StyledContentContainer = styled.div(({ theme }) => {\n  return css`\n    padding: ${theme.base.spacing};\n\n    ${StyledFieldValueList}, ${StyledValueList} {\n      margin-block-start: ${theme.base.spacing};\n    }\n\n    ${StyledFieldValue} {\n      white-space: nowrap;\n\n      &,\n      div {\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n    }\n    ${StyledStackedFieldValue} {\n      grid-column: 1 / -1;\n    }\n  `;\n});\n\nStyledContentContainer.defaultProps = defaultThemeProp;\n"]}

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

@@ -1,11 +1,12 @@
 import type { Ref, MouseEventHandler, KeyboardEventHandler, ReactNode } from 'react';
 import type { ImageProps } from '../Image';
-import type { FieldValueListProps } from '../FieldValueList';
+import type { FieldValueListItemProps, FieldValueListProps } from '../FieldValueList';
 import type { FormControlProps } from '../FormControl';
-import type { Action, WithAttributes, NoChildrenProp, TestIdProp } from '../../types';
+import type { Action, WithAttributes, NoChildrenProp, TestIdProp, OmitStrict } from '../../types';
 import type { selectionCardElements } from './SelectionCard.test-ids';
 export type ImagePlacement = 'block-start' | 'inline-end' | 'inline-start';
 export type ImageSize = 'flexible' | 'large' | 'small';
+export type FieldValueItemPropsOmitName = OmitStrict<FieldValueListItemProps, 'name'>;
 export type SelectionCardProps = WithAttributes<'div', NoChildrenProp & TestIdProp<typeof selectionCardElements> & {
     /** Pass a string or a fragment with a string. */
     label: string;
@@ -29,10 +30,7 @@ export type SelectionCardProps = WithAttributes<'div', NoChildrenProp & TestIdPr
     /** Called when user presses a key. */
     onKeyDown?: KeyboardEventHandler;
     /** The set of field values to render in the card. */
-    fields?: FieldValueListProps['fields'] | {
-        id: string;
-        value: ReactNode;
-    }[];
+    fields?: FieldValueListProps['fields'] | FieldValueItemPropsOmitName[];
     /** Pass a heading and content to show additional information on the field. */
     additionalInfo?: FormControlProps['additionalInfo'];
     /** Set the card to disabled state, ie. non-interactive. */

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

@@ -1 +1 @@
-{"version":3,"file":"SelectionCard.types.d.ts","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCard.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErF,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,KAAK,EAAE,MAAM,EAAE,cAAc,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEtF,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEtE,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG,YAAY,GAAG,cAAc,CAAC;AAC3E,MAAM,MAAM,SAAS,GAAG,UAAU,GAAG,OAAO,GAAG,OAAO,CAAC;AAEvD,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAC7C,KAAK,EACL,cAAc,GACZ,UAAU,CAAC,OAAO,qBAAqB,CAAC,GAAG;IACzC,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,OAAO,EAAE,SAAS,CAAC;IACnB,uCAAuC;IACvC,KAAK,CAAC,EAAE,UAAU,GAAG;QACnB;;;WAGG;QACH,SAAS,CAAC,EAAE,cAAc,CAAC;QAC3B;;;WAGG;QACH,IAAI,CAAC,EAAE,SAAS,CAAC;KAClB,CAAC;IACF,wCAAwC;IACxC,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,sCAAsC;IACtC,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,qDAAqD;IACrD,MAAM,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,GAAG;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,SAAS,CAAA;KAAE,EAAE,CAAC;IAC5E,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yBAAyB;IACzB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,kDAAkD;IAClD,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B,CACJ,CAAC"}
+{"version":3,"file":"SelectionCard.types.d.ts","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCard.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErF,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,KAAK,EAAE,uBAAuB,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AACtF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,KAAK,EAAE,MAAM,EAAE,cAAc,EAAE,cAAc,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAElG,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEtE,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG,YAAY,GAAG,cAAc,CAAC;AAC3E,MAAM,MAAM,SAAS,GAAG,UAAU,GAAG,OAAO,GAAG,OAAO,CAAC;AAEvD,MAAM,MAAM,2BAA2B,GAAG,UAAU,CAAC,uBAAuB,EAAE,MAAM,CAAC,CAAC;AAEtF,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAC7C,KAAK,EACL,cAAc,GACZ,UAAU,CAAC,OAAO,qBAAqB,CAAC,GAAG;IACzC,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,OAAO,EAAE,SAAS,CAAC;IACnB,uCAAuC;IACvC,KAAK,CAAC,EAAE,UAAU,GAAG;QACnB;;;WAGG;QACH,SAAS,CAAC,EAAE,cAAc,CAAC;QAC3B;;;WAGG;QACH,IAAI,CAAC,EAAE,SAAS,CAAC;KAClB,CAAC;IACF,wCAAwC;IACxC,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,sCAAsC;IACtC,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,qDAAqD;IACrD,MAAM,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,GAAG,2BAA2B,EAAE,CAAC;IACvE,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yBAAyB;IACzB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,kDAAkD;IAClD,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B,CACJ,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"SelectionCard.types.js","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCard.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Ref, MouseEventHandler, KeyboardEventHandler, ReactNode } from 'react';\n\nimport type { ImageProps } from '../Image';\nimport type { FieldValueListProps } from '../FieldValueList';\nimport type { FormControlProps } from '../FormControl';\nimport type { Action, WithAttributes, NoChildrenProp, TestIdProp } from '../../types';\n\nimport type { selectionCardElements } from './SelectionCard.test-ids';\n\nexport type ImagePlacement = 'block-start' | 'inline-end' | 'inline-start';\nexport type ImageSize = 'flexible' | 'large' | 'small';\n\nexport type SelectionCardProps = WithAttributes<\n  'div',\n  NoChildrenProp &\n    TestIdProp<typeof selectionCardElements> & {\n      /** Pass a string or a fragment with a string. */\n      label: string;\n      /** Content to be rendered as a card heading */\n      heading: ReactNode;\n      /** The image to render in the card. */\n      image?: ImageProps & {\n        /**\n         * Used to determine image placement\n         * @default 'inline-start'\n         */\n        placement?: ImagePlacement;\n        /**\n         * Used to determine image size\n         * @default 'large'\n         */\n        size?: ImageSize;\n      };\n      /** The onClick handler for the item. */\n      onClick?: MouseEventHandler;\n      /** Called when user presses a key. */\n      onKeyDown?: KeyboardEventHandler;\n      /** The set of field values to render in the card. */\n      fields?: FieldValueListProps['fields'] | { id: string; value: ReactNode }[];\n      /** Pass a heading and content to show additional information on the field. */\n      additionalInfo?: FormControlProps['additionalInfo'];\n      /** Set the card to disabled state, ie. non-interactive. */\n      disabled?: boolean;\n      /** Additional actions */\n      actions?: Action[];\n      /** Reference to the component's input element. */\n      ref?: Ref<HTMLDivElement>;\n    }\n>;\n"]}
+{"version":3,"file":"SelectionCard.types.js","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCard.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Ref, MouseEventHandler, KeyboardEventHandler, ReactNode } from 'react';\n\nimport type { ImageProps } from '../Image';\nimport type { FieldValueListItemProps, FieldValueListProps } from '../FieldValueList';\nimport type { FormControlProps } from '../FormControl';\nimport type { Action, WithAttributes, NoChildrenProp, TestIdProp, OmitStrict } from '../../types';\n\nimport type { selectionCardElements } from './SelectionCard.test-ids';\n\nexport type ImagePlacement = 'block-start' | 'inline-end' | 'inline-start';\nexport type ImageSize = 'flexible' | 'large' | 'small';\n\nexport type FieldValueItemPropsOmitName = OmitStrict<FieldValueListItemProps, 'name'>;\n\nexport type SelectionCardProps = WithAttributes<\n  'div',\n  NoChildrenProp &\n    TestIdProp<typeof selectionCardElements> & {\n      /** Pass a string or a fragment with a string. */\n      label: string;\n      /** Content to be rendered as a card heading */\n      heading: ReactNode;\n      /** The image to render in the card. */\n      image?: ImageProps & {\n        /**\n         * Used to determine image placement\n         * @default 'inline-start'\n         */\n        placement?: ImagePlacement;\n        /**\n         * Used to determine image size\n         * @default 'large'\n         */\n        size?: ImageSize;\n      };\n      /** The onClick handler for the item. */\n      onClick?: MouseEventHandler;\n      /** Called when user presses a key. */\n      onKeyDown?: KeyboardEventHandler;\n      /** The set of field values to render in the card. */\n      fields?: FieldValueListProps['fields'] | FieldValueItemPropsOmitName[];\n      /** Pass a heading and content to show additional information on the field. */\n      additionalInfo?: FormControlProps['additionalInfo'];\n      /** Set the card to disabled state, ie. non-interactive. */\n      disabled?: boolean;\n      /** Additional actions */\n      actions?: Action[];\n      /** Reference to the component's input element. */\n      ref?: Ref<HTMLDivElement>;\n    }\n>;\n"]}

package/lib/hooks/useBreakpoint.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useBreakpoint.d.ts","sourceRoot":"","sources":["../../src/hooks/useBreakpoint.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAYvC;;;;;GAKG;AACH,QAAA,MAAM,aAAa,eACL,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,+CAKzC;IACD,aAAa,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,GAAG,SAAS,CAAC;IAC/C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,aAAa,GAAG,eAAe,CAAC;CAC7C,YAsEF,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"useBreakpoint.d.ts","sourceRoot":"","sources":["../../src/hooks/useBreakpoint.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAYvC;;;;;GAKG;AACH,QAAA,MAAM,aAAa,eACL,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,+CAKzC;IACD,aAAa,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,GAAG,SAAS,CAAC;IAC/C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,aAAa,GAAG,eAAe,CAAC;CAC7C,YAuEF,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/hooks/useBreakpoint.js

@@ -24,6 +24,8 @@ const useBreakpoint = (breakpoint, { breakpointRef, defaultValue = false, themeP
         // Breakpoint handling for contained elements
         if (breakpointRef && breakpointRef.current) {
             const debouncedResize = debounce((entries) => {
+                if (!breakpointRef.current?.checkVisibility())
+                    return;
                 const matchesBreakpoint = entries.some(({ target, contentRect }) => {
                     if (target !== breakpointRef.current)
                         return;

package/lib/hooks/useBreakpoint.js.map

@@ -1 +1 @@
-{"version":3,"file":"useBreakpoint.js","sourceRoot":"","sources":["../../src/hooks/useBreakpoint.ts"],"names":[],"mappings":"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","sourcesContent":["import { useState, useLayoutEffect, useCallback } from 'react';\nimport type { RefObject } from 'react';\n\nimport { windowIsAvailable, debounce } from '../utils';\n\nimport useChToPxConversionFactor from './useChToPxConversionFactor';\nimport useTheme from './useTheme';\n\n// We should be able to safely capture once as the computed root font size is unlikely to change during normal runtime.\nconst rootFontSize = windowIsAvailable\n  ? window.getComputedStyle(document.documentElement).fontSize\n  : '16px';\n\n/**\n * @example const breakpointActive = useBreakpoint(breakpoint);\n * @param breakpoint The string indicator for the breakpoint that should be checked for validity.\n * @param options\n * @returns breakpointActive:: A boolean indicating if the given breakpoint is active or not. If false, the breakpoint is too big for the screen size.\n */\nconst useBreakpoint = (\n  breakpoint: 'xs' | 'sm' | 'md' | 'lg' | 'xl',\n  {\n    breakpointRef,\n    defaultValue = false,\n    themeProp = 'breakpoints'\n  }: {\n    breakpointRef?: RefObject<Element> | undefined;\n    defaultValue?: boolean;\n    themeProp?: 'breakpoints' | 'content-width';\n  } = {}\n) => {\n  const {\n    base: { breakpoints, 'content-width': contentWidth }\n  } = useTheme();\n  const breakpointVal =\n    themeProp === 'content-width' ? contentWidth[breakpoint] : breakpoints[breakpoint];\n\n  const [matches, setMatches] = useState(\n    windowIsAvailable ? window.matchMedia(`(min-width: ${breakpointVal})`).matches : !!defaultValue\n  );\n\n  const chToPxConversionFactor = useChToPxConversionFactor();\n\n  const onResize = useCallback((e: MediaQueryListEvent) => {\n    setMatches(e.matches);\n  }, []);\n\n  useLayoutEffect(() => {\n    // Breakpoint handling for contained elements\n    if (breakpointRef && breakpointRef.current) {\n      const debouncedResize = debounce((entries: ResizeObserverEntry[]) => {\n        const matchesBreakpoint = entries.some(({ target, contentRect }) => {\n          if (target !== breakpointRef.current) return;\n\n          const multiplier =\n            themeProp === 'breakpoints' ? parseFloat(rootFontSize) : chToPxConversionFactor;\n          return contentRect.width >= parseFloat(breakpointVal) * multiplier;\n        });\n\n        setMatches(matchesBreakpoint);\n      }, 100);\n\n      const observer = new ResizeObserver(debouncedResize);\n\n      observer.observe(breakpointRef.current);\n\n      return () => {\n        observer.disconnect();\n      };\n    }\n\n    // Breakpoint handling for viewport\n    if (windowIsAvailable) {\n      const mediaMatch = window.matchMedia(`(min-width: ${breakpointVal})`);\n      const mediaMatchAvailable = 'addEventListener' in mediaMatch;\n      const resizeHandler = debounce(() => {\n        setMatches(window.innerWidth >= parseInt(breakpointVal, 10));\n      }, 100);\n\n      // Need to check useMatchMedia in order to support unit testing\n      if (mediaMatchAvailable) {\n        mediaMatch.addEventListener('change', onResize);\n        setMatches(mediaMatch.matches);\n      } else {\n        window.addEventListener('resize', resizeHandler);\n        setMatches(window.innerWidth >= parseInt(breakpointVal, 10));\n      }\n\n      return () => {\n        // Need to check useMatchMedia in order to support unit testing\n        if (mediaMatchAvailable) mediaMatch.removeEventListener('change', onResize);\n        else {\n          window.removeEventListener('resize', resizeHandler);\n        }\n      };\n    }\n  }, [breakpointRef?.current]);\n\n  return matches;\n};\n\nexport default useBreakpoint;\n"]}
+{"version":3,"file":"useBreakpoint.js","sourceRoot":"","sources":["../../src/hooks/useBreakpoint.ts"],"names":[],"mappings":"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","sourcesContent":["import { useState, useLayoutEffect, useCallback } from 'react';\nimport type { RefObject } from 'react';\n\nimport { windowIsAvailable, debounce } from '../utils';\n\nimport useChToPxConversionFactor from './useChToPxConversionFactor';\nimport useTheme from './useTheme';\n\n// We should be able to safely capture once as the computed root font size is unlikely to change during normal runtime.\nconst rootFontSize = windowIsAvailable\n  ? window.getComputedStyle(document.documentElement).fontSize\n  : '16px';\n\n/**\n * @example const breakpointActive = useBreakpoint(breakpoint);\n * @param breakpoint The string indicator for the breakpoint that should be checked for validity.\n * @param options\n * @returns breakpointActive:: A boolean indicating if the given breakpoint is active or not. If false, the breakpoint is too big for the screen size.\n */\nconst useBreakpoint = (\n  breakpoint: 'xs' | 'sm' | 'md' | 'lg' | 'xl',\n  {\n    breakpointRef,\n    defaultValue = false,\n    themeProp = 'breakpoints'\n  }: {\n    breakpointRef?: RefObject<Element> | undefined;\n    defaultValue?: boolean;\n    themeProp?: 'breakpoints' | 'content-width';\n  } = {}\n) => {\n  const {\n    base: { breakpoints, 'content-width': contentWidth }\n  } = useTheme();\n  const breakpointVal =\n    themeProp === 'content-width' ? contentWidth[breakpoint] : breakpoints[breakpoint];\n\n  const [matches, setMatches] = useState(\n    windowIsAvailable ? window.matchMedia(`(min-width: ${breakpointVal})`).matches : !!defaultValue\n  );\n\n  const chToPxConversionFactor = useChToPxConversionFactor();\n\n  const onResize = useCallback((e: MediaQueryListEvent) => {\n    setMatches(e.matches);\n  }, []);\n\n  useLayoutEffect(() => {\n    // Breakpoint handling for contained elements\n    if (breakpointRef && breakpointRef.current) {\n      const debouncedResize = debounce((entries: ResizeObserverEntry[]) => {\n        if (!breakpointRef.current?.checkVisibility()) return;\n        const matchesBreakpoint = entries.some(({ target, contentRect }) => {\n          if (target !== breakpointRef.current) return;\n\n          const multiplier =\n            themeProp === 'breakpoints' ? parseFloat(rootFontSize) : chToPxConversionFactor;\n          return contentRect.width >= parseFloat(breakpointVal) * multiplier;\n        });\n\n        setMatches(matchesBreakpoint);\n      }, 100);\n\n      const observer = new ResizeObserver(debouncedResize);\n\n      observer.observe(breakpointRef.current);\n\n      return () => {\n        observer.disconnect();\n      };\n    }\n\n    // Breakpoint handling for viewport\n    if (windowIsAvailable) {\n      const mediaMatch = window.matchMedia(`(min-width: ${breakpointVal})`);\n      const mediaMatchAvailable = 'addEventListener' in mediaMatch;\n      const resizeHandler = debounce(() => {\n        setMatches(window.innerWidth >= parseInt(breakpointVal, 10));\n      }, 100);\n\n      // Need to check useMatchMedia in order to support unit testing\n      if (mediaMatchAvailable) {\n        mediaMatch.addEventListener('change', onResize);\n        setMatches(mediaMatch.matches);\n      } else {\n        window.addEventListener('resize', resizeHandler);\n        setMatches(window.innerWidth >= parseInt(breakpointVal, 10));\n      }\n\n      return () => {\n        // Need to check useMatchMedia in order to support unit testing\n        if (mediaMatchAvailable) mediaMatch.removeEventListener('change', onResize);\n        else {\n          window.removeEventListener('resize', resizeHandler);\n        }\n      };\n    }\n  }, [breakpointRef?.current]);\n\n  return matches;\n};\n\nexport default useBreakpoint;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-core",
-  "version": "8.0.0-build.44.0",
+  "version": "8.0.0-build.44.2",
   "description": "Cosmos is a visual design system and UI component collection. Its goal is to empower application developers in their pursuit to create engaging and rewarding user experiences.",
   "repository": {
     "type": "git",