@pega/cosmos-react-core 9.0.0-build.29.2 → 9.0.0-build.29.21

package/lib/components/MultiStepForm/HorizontalFormProgress.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalFormProgress.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/HorizontalFormProgress.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAiB,MAAM,OAAO,CAAC;AAG9D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAiBhD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAIhE,UAAU,iBAAiB;IACzB,KAAK,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACnC,aAAa,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;IACnD,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,QAAA,MAAM,sBAAsB,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAwM/E,CAAC;AAEF,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"HorizontalFormProgress.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/HorizontalFormProgress.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAiB,MAAM,OAAO,CAAC;AAG9D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAiBhD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAIhE,UAAU,iBAAiB;IACzB,KAAK,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACnC,aAAa,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;IACnD,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,QAAA,MAAM,sBAAsB,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAyM/E,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/lib/components/MultiStepForm/HorizontalFormProgress.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { remToPx, stripUnit } from 'polished';
 import { useEffect, useRef, useState } from 'react';
-import { useArrows, useElement, useI18n, useTheme } from '../../hooks';
+import { useArrows, useDirection, useElement, useI18n, useTheme } from '../../hooks';
 import { tryCatch } from '../../utils';
 import Flex from '../Flex';
 import Text from '../Text';
@@ -23,11 +23,12 @@ const HorizontalFormProgress = ({ steps, currentStepId, showStepNames = false, .
     const [stepEls, setStepEls] = useState({});
     const stepsRef = useRef(null);
     const theme = useTheme();
+    const { rtl } = useDirection();
     let popoverPlacement = 'bottom';
     if (curIdx === 0)
-        popoverPlacement = 'bottom-start';
+        popoverPlacement = rtl ? 'bottom-end' : 'bottom-start';
     else if (curIdx === steps.length - 1)
-        popoverPlacement = 'bottom-end';
+        popoverPlacement = rtl ? 'bottom-start' : 'bottom-end';
     useArrows(stepsRef, {
         selector: '[data-step-marker]',
         dir: 'left-right',

package/lib/components/MultiStepForm/HorizontalFormProgress.js.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalFormProgress.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/HorizontalFormProgress.tsx"],"names":[],"mappings":"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","sourcesContent":["import { remToPx, stripUnit } from 'polished';\nimport { useEffect, useRef, useState } from 'react';\nimport type { FunctionComponent, CSSProperties } from 'react';\n\nimport { useArrows, useElement, useI18n, useTheme } from '../../hooks';\nimport type { ForwardProps } from '../../types';\nimport { tryCatch } from '../../utils';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport Tooltip from '../Tooltip';\nimport Button from '../Button';\nimport InfoDialog from '../Dialog/InfoDialog';\n\nimport {\n  CurrentStepPopover,\n  StepMarker,\n  StyledBar,\n  StyledFill,\n  StyledFormProgress,\n  StyledHorizontalStepText,\n  StyleHorizontalStepMarkers\n} from './FormProgress.styles';\nimport type { MultiStepFormProps } from './MultiStepForm.types';\nimport VerticalFormProgress from './VerticalFormProgress';\nimport { useFormProgressOverflow } from './useFormProgressOverflow';\n\ninterface FormProgressProps {\n  steps: MultiStepFormProps['steps'];\n  currentStepId: MultiStepFormProps['currentStepId'];\n  showStepNames?: boolean;\n}\n\nconst HorizontalFormProgress: FunctionComponent<FormProgressProps & ForwardProps> = ({\n  steps,\n  currentStepId,\n  showStepNames = false,\n  ...restProps\n}) => {\n  const t = useI18n();\n\n  const [stepsDialogButtonEl, setStepsDialogButtonEl] = useElement<HTMLButtonElement>();\n  const [showStepsDialog, setShowStepsDialog] = useState(false);\n\n  const { ref: formProgressRef, state: stepsAreOverflowing } = useFormProgressOverflow(\n    steps.length,\n    showStepNames\n  );\n\n  const curIdx = steps.findIndex(step => step.id === currentStepId);\n  const curStep = steps[curIdx];\n  const fillScale = curIdx / (steps.length - 1);\n\n  const [currentStepEl, setCurrentStepEl] = useElement();\n  const [stepEls, setStepEls] = useState<Record<string, HTMLElement>>({});\n  const stepsRef = useRef(null);\n  const theme = useTheme();\n\n  let popoverPlacement: 'bottom' | 'bottom-start' | 'bottom-end' = 'bottom';\n  if (curIdx === 0) popoverPlacement = 'bottom-start';\n  else if (curIdx === steps.length - 1) popoverPlacement = 'bottom-end';\n\n  useArrows(stepsRef, {\n    selector: '[data-step-marker]',\n    dir: 'left-right',\n    initialFocusElement: currentStepEl\n  });\n\n  useArrows(stepsRef, {\n    selector: '[data-step-marker]',\n    cycle: false,\n    dir: 'up-down',\n    initialFocusElement: currentStepEl\n  });\n\n  useEffect(() => {\n    if (stepEls[curStep.id] && stepEls[curStep.id] !== currentStepEl) {\n      setCurrentStepEl(stepEls[curStep.id]);\n    }\n  }, [Object.keys(stepEls), curStep]);\n\n  useEffect(() => {\n    if (!stepsAreOverflowing) {\n      setShowStepsDialog(false);\n    }\n  }, [stepsAreOverflowing]);\n\n  const numberOfSteps = steps.length;\n\n  return (\n    <StyledFormProgress\n      ref={formProgressRef}\n      {...restProps}\n      container={{ alignItems: 'center' }}\n      showStepNames={showStepNames}\n    >\n      <CurrentStepPopover\n        show={!showStepNames}\n        target={currentStepEl}\n        placement={popoverPlacement}\n        strategy='absolute'\n        portal={false}\n        hideOnTargetHidden\n        modifiers={[\n          {\n            name: 'offset',\n            options: {\n              offset: [\n                0,\n                tryCatch(\n                  () => stripUnit(remToPx(theme.base.spacing)),\n                  () => 8\n                )\n              ]\n            }\n          },\n          {\n            name: 'placeAndContain',\n            enabled: false\n          },\n          {\n            name: 'flip',\n            enabled: false\n          },\n          {\n            name: 'preventOverflow',\n            options: {\n              padding: 0\n            }\n          }\n        ]}\n      >\n        <Text variant='h4'>{curStep.name}</Text>\n      </CurrentStepPopover>\n\n      {stepsAreOverflowing ? (\n        <div>\n          <Button\n            ref={setStepsDialogButtonEl}\n            variant='link'\n            onClick={() => {\n              setShowStepsDialog(true);\n            }}\n          >\n            {t('step_num', [curIdx + 1, numberOfSteps])}\n          </Button>\n          <Text variant='h4'>{curStep.name}</Text>\n          {stepsDialogButtonEl && showStepsDialog && (\n            <InfoDialog\n              heading={t('steps')}\n              target={stepsDialogButtonEl}\n              onDismiss={() => {\n                setShowStepsDialog(false);\n              }}\n              placement='bottom-start'\n            >\n              <VerticalFormProgress steps={steps} currentStepId={currentStepId} />\n            </InfoDialog>\n          )}\n        </div>\n      ) : (\n        <>\n          <Flex\n            ref={stepsRef}\n            as={StyleHorizontalStepMarkers}\n            container={{ justify: 'between', alignItems: 'start' }}\n            item={{ grow: 1 }}\n            showStepNames={showStepNames}\n          >\n            {steps.map((step, index) => {\n              const isCurrent = index === curIdx;\n              return (\n                <li key={step.id}>\n                  <StepMarker\n                    ref={(el: HTMLElement | null) => {\n                      setStepEls(curr => {\n                        const newEls = { ...curr };\n                        if (!el && newEls[step.id]) {\n                          delete newEls[step.id];\n                          return newEls;\n                        }\n                        if (el) return { ...newEls, [step.id]: el };\n                        return newEls;\n                      });\n                    }}\n                    id={step.id}\n                    data-step-marker=''\n                    aria-label={`${step.name} - ${t('step_num', [index + 1, steps.length])}`}\n                    aria-current={isCurrent ? 'step' : undefined}\n                    tabIndex={isCurrent ? 0 : -1}\n                    current={isCurrent}\n                    depth={step.depth}\n                    completed={step.completed}\n                    onClick={step.onMarkerClick}\n                    clickable={!!step.onMarkerClick && !isCurrent}\n                  >\n                    {!showStepNames && !isCurrent && (\n                      <Tooltip\n                        target={stepEls[step.id]}\n                        showDelay='none'\n                        hideDelay='short'\n                        describeTarget={false}\n                      >\n                        {step.name}\n                      </Tooltip>\n                    )}\n                  </StepMarker>\n                  {showStepNames &&\n                    (!!step.onMarkerClick && !isCurrent ? (\n                      <Button\n                        variant='link'\n                        onClick={step.onMarkerClick}\n                        as={StyledHorizontalStepText}\n                        tabIndex={-1}\n                      >\n                        {step.name}\n                      </Button>\n                    ) : (\n                      <Text variant={isCurrent ? 'h3' : undefined} as={StyledHorizontalStepText}>\n                        {step.name}\n                      </Text>\n                    ))}\n                </li>\n              );\n            })}\n          </Flex>\n          <StyledBar shifted={showStepNames}>\n            <StyledFill style={{ '--fillScale': fillScale } as CSSProperties} />\n          </StyledBar>\n        </>\n      )}\n    </StyledFormProgress>\n  );\n};\n\nexport default HorizontalFormProgress;\n"]}
+{"version":3,"file":"HorizontalFormProgress.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/HorizontalFormProgress.tsx"],"names":[],"mappings":"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","sourcesContent":["import { remToPx, stripUnit } from 'polished';\nimport { useEffect, useRef, useState } from 'react';\nimport type { FunctionComponent, CSSProperties } from 'react';\n\nimport { useArrows, useDirection, useElement, useI18n, useTheme } from '../../hooks';\nimport type { ForwardProps } from '../../types';\nimport { tryCatch } from '../../utils';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport Tooltip from '../Tooltip';\nimport Button from '../Button';\nimport InfoDialog from '../Dialog/InfoDialog';\n\nimport {\n  CurrentStepPopover,\n  StepMarker,\n  StyledBar,\n  StyledFill,\n  StyledFormProgress,\n  StyledHorizontalStepText,\n  StyleHorizontalStepMarkers\n} from './FormProgress.styles';\nimport type { MultiStepFormProps } from './MultiStepForm.types';\nimport VerticalFormProgress from './VerticalFormProgress';\nimport { useFormProgressOverflow } from './useFormProgressOverflow';\n\ninterface FormProgressProps {\n  steps: MultiStepFormProps['steps'];\n  currentStepId: MultiStepFormProps['currentStepId'];\n  showStepNames?: boolean;\n}\n\nconst HorizontalFormProgress: FunctionComponent<FormProgressProps & ForwardProps> = ({\n  steps,\n  currentStepId,\n  showStepNames = false,\n  ...restProps\n}) => {\n  const t = useI18n();\n\n  const [stepsDialogButtonEl, setStepsDialogButtonEl] = useElement<HTMLButtonElement>();\n  const [showStepsDialog, setShowStepsDialog] = useState(false);\n\n  const { ref: formProgressRef, state: stepsAreOverflowing } = useFormProgressOverflow(\n    steps.length,\n    showStepNames\n  );\n\n  const curIdx = steps.findIndex(step => step.id === currentStepId);\n  const curStep = steps[curIdx];\n  const fillScale = curIdx / (steps.length - 1);\n\n  const [currentStepEl, setCurrentStepEl] = useElement();\n  const [stepEls, setStepEls] = useState<Record<string, HTMLElement>>({});\n  const stepsRef = useRef(null);\n  const theme = useTheme();\n  const { rtl } = useDirection();\n\n  let popoverPlacement: 'bottom' | 'bottom-start' | 'bottom-end' = 'bottom';\n  if (curIdx === 0) popoverPlacement = rtl ? 'bottom-end' : 'bottom-start';\n  else if (curIdx === steps.length - 1) popoverPlacement = rtl ? 'bottom-start' : 'bottom-end';\n\n  useArrows(stepsRef, {\n    selector: '[data-step-marker]',\n    dir: 'left-right',\n    initialFocusElement: currentStepEl\n  });\n\n  useArrows(stepsRef, {\n    selector: '[data-step-marker]',\n    cycle: false,\n    dir: 'up-down',\n    initialFocusElement: currentStepEl\n  });\n\n  useEffect(() => {\n    if (stepEls[curStep.id] && stepEls[curStep.id] !== currentStepEl) {\n      setCurrentStepEl(stepEls[curStep.id]);\n    }\n  }, [Object.keys(stepEls), curStep]);\n\n  useEffect(() => {\n    if (!stepsAreOverflowing) {\n      setShowStepsDialog(false);\n    }\n  }, [stepsAreOverflowing]);\n\n  const numberOfSteps = steps.length;\n\n  return (\n    <StyledFormProgress\n      ref={formProgressRef}\n      {...restProps}\n      container={{ alignItems: 'center' }}\n      showStepNames={showStepNames}\n    >\n      <CurrentStepPopover\n        show={!showStepNames}\n        target={currentStepEl}\n        placement={popoverPlacement}\n        strategy='absolute'\n        portal={false}\n        hideOnTargetHidden\n        modifiers={[\n          {\n            name: 'offset',\n            options: {\n              offset: [\n                0,\n                tryCatch(\n                  () => stripUnit(remToPx(theme.base.spacing)),\n                  () => 8\n                )\n              ]\n            }\n          },\n          {\n            name: 'placeAndContain',\n            enabled: false\n          },\n          {\n            name: 'flip',\n            enabled: false\n          },\n          {\n            name: 'preventOverflow',\n            options: {\n              padding: 0\n            }\n          }\n        ]}\n      >\n        <Text variant='h4'>{curStep.name}</Text>\n      </CurrentStepPopover>\n\n      {stepsAreOverflowing ? (\n        <div>\n          <Button\n            ref={setStepsDialogButtonEl}\n            variant='link'\n            onClick={() => {\n              setShowStepsDialog(true);\n            }}\n          >\n            {t('step_num', [curIdx + 1, numberOfSteps])}\n          </Button>\n          <Text variant='h4'>{curStep.name}</Text>\n          {stepsDialogButtonEl && showStepsDialog && (\n            <InfoDialog\n              heading={t('steps')}\n              target={stepsDialogButtonEl}\n              onDismiss={() => {\n                setShowStepsDialog(false);\n              }}\n              placement='bottom-start'\n            >\n              <VerticalFormProgress steps={steps} currentStepId={currentStepId} />\n            </InfoDialog>\n          )}\n        </div>\n      ) : (\n        <>\n          <Flex\n            ref={stepsRef}\n            as={StyleHorizontalStepMarkers}\n            container={{ justify: 'between', alignItems: 'start' }}\n            item={{ grow: 1 }}\n            showStepNames={showStepNames}\n          >\n            {steps.map((step, index) => {\n              const isCurrent = index === curIdx;\n              return (\n                <li key={step.id}>\n                  <StepMarker\n                    ref={(el: HTMLElement | null) => {\n                      setStepEls(curr => {\n                        const newEls = { ...curr };\n                        if (!el && newEls[step.id]) {\n                          delete newEls[step.id];\n                          return newEls;\n                        }\n                        if (el) return { ...newEls, [step.id]: el };\n                        return newEls;\n                      });\n                    }}\n                    id={step.id}\n                    data-step-marker=''\n                    aria-label={`${step.name} - ${t('step_num', [index + 1, steps.length])}`}\n                    aria-current={isCurrent ? 'step' : undefined}\n                    tabIndex={isCurrent ? 0 : -1}\n                    current={isCurrent}\n                    depth={step.depth}\n                    completed={step.completed}\n                    onClick={step.onMarkerClick}\n                    clickable={!!step.onMarkerClick && !isCurrent}\n                  >\n                    {!showStepNames && !isCurrent && (\n                      <Tooltip\n                        target={stepEls[step.id]}\n                        showDelay='none'\n                        hideDelay='short'\n                        describeTarget={false}\n                      >\n                        {step.name}\n                      </Tooltip>\n                    )}\n                  </StepMarker>\n                  {showStepNames &&\n                    (!!step.onMarkerClick && !isCurrent ? (\n                      <Button\n                        variant='link'\n                        onClick={step.onMarkerClick}\n                        as={StyledHorizontalStepText}\n                        tabIndex={-1}\n                      >\n                        {step.name}\n                      </Button>\n                    ) : (\n                      <Text variant={isCurrent ? 'h3' : undefined} as={StyledHorizontalStepText}>\n                        {step.name}\n                      </Text>\n                    ))}\n                </li>\n              );\n            })}\n          </Flex>\n          <StyledBar shifted={showStepNames}>\n            <StyledFill style={{ '--fillScale': fillScale } as CSSProperties} />\n          </StyledBar>\n        </>\n      )}\n    </StyledFormProgress>\n  );\n};\n\nexport default HorizontalFormProgress;\n"]}

package/lib/components/PageTemplates/CategorySubPage.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CategorySubPage.styles.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/CategorySubPage.styles.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,oBAAoB;;2JAoB/B,CAAC;AAGH,eAAO,MAAM,aAAa;;uGAgExB,CAAC;AAGH,eAAO,MAAM,oBAAoB;;uJAa/B,CAAC;AAGH,eAAO,MAAM,kBAAkB,iOAAc,CAAC;AAE9C,eAAO,MAAM,cAAc,6NAazB,CAAC;AAGH,eAAO,MAAM,aAAa,iOAwBxB,CAAC;AAGH,eAAO,MAAM,SAAS,uNAAe,CAAC;AAEtC,eAAO,MAAM,uBAAuB,6NAsBlC,CAAC;AAGH,eAAO,MAAM,wBAAwB,6NAmBnC,CAAC;AAGH,eAAO,MAAM,gBAAgB,6NAuC3B,CAAC;AAGH,eAAO,MAAM,eAAe,qOAe1B,CAAC;AAGH,eAAO,MAAM,mBAAmB,6NAAe,CAAC;AAEhD,eAAO,MAAM,mBAAmB,uNAe9B,CAAC;AAGH,eAAO,MAAM,iBAAiB,uNA0B5B,CAAC;AAGH,eAAO,MAAM,iBAAiB,6NAe5B,CAAC;AAGH,eAAO,MAAM,cAAc,6NAG1B,CAAC"}
+{"version":3,"file":"CategorySubPage.styles.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/CategorySubPage.styles.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,oBAAoB;;2JAoB/B,CAAC;AAGH,eAAO,MAAM,aAAa;;uGAgExB,CAAC;AAGH,eAAO,MAAM,oBAAoB;;uJAa/B,CAAC;AAGH,eAAO,MAAM,kBAAkB,iOAAc,CAAC;AAE9C,eAAO,MAAM,cAAc,6NAazB,CAAC;AAGH,eAAO,MAAM,aAAa,iOAwBxB,CAAC;AAGH,eAAO,MAAM,SAAS,uNAAe,CAAC;AAEtC,eAAO,MAAM,uBAAuB,6NAsBlC,CAAC;AAGH,eAAO,MAAM,wBAAwB,6NAmBnC,CAAC;AAGH,eAAO,MAAM,gBAAgB,6NAyC3B,CAAC;AAGH,eAAO,MAAM,eAAe,qOAe1B,CAAC;AAGH,eAAO,MAAM,mBAAmB,6NAAe,CAAC;AAEhD,eAAO,MAAM,mBAAmB,uNAe9B,CAAC;AAGH,eAAO,MAAM,iBAAiB,uNA4B5B,CAAC;AAGH,eAAO,MAAM,iBAAiB,6NAiB5B,CAAC;AAGH,eAAO,MAAM,cAAc,6NAkBzB,CAAC"}

package/lib/components/PageTemplates/CategorySubPage.styles.js

@@ -169,8 +169,10 @@ export const StyledMenuColumn = styled.div(({ theme }) => {
     background-color: ${appBackground};
     position: sticky;
     top: 0;
-    overflow-y: auto;
+    height: 100%;
+    min-height: 0;
     max-height: 100%;
+    overflow-y: auto;
     width: 100%;
     padding: calc(2 * ${spacing}) 0;
 
@@ -224,6 +226,8 @@ export const StyledPageArticle = styled.article(({ theme }) => {
     position: relative;
     background-color: ${primaryBackground};
     width: 100%;
+    height: 100%;
+    min-height: 0;
     max-height: 100%;
     overflow-y: auto;
     padding: 0 calc(3 * ${spacing}) calc(2 * ${spacing});
@@ -244,17 +248,32 @@ export const StyledTemplateRow = styled.div(({ theme }) => {
     return css `
     position: relative;
     height: 100%;
+    min-height: 0;
 
     /* sm or below / "Mobile" (note: 0.0625em = 1px) */
     @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {
       flex-direction: column;
       height: auto;
+      min-height: inherit;
     }
   `;
 });
 StyledTemplateRow.defaultProps = defaultThemeProp;
-export const StyledTemplate = styled.div `
-  height: 0;
-  min-height: inherit;
-`;
+export const StyledTemplate = styled.div(({ theme }) => {
+    const { base: { breakpoints } } = theme;
+    const templateHeight = 'calc(100dvh - var(--appshell-offset, 0rem))';
+    return css `
+    height: 100%;
+    min-height: 0;
+
+    /* md or above / split-scroll layout */
+    @media all and (min-width: ${breakpoints.md}) {
+      height: ${templateHeight};
+      min-height: ${templateHeight};
+      max-height: ${templateHeight};
+      overflow: hidden;
+    }
+  `;
+});
+StyledTemplate.defaultProps = defaultThemeProp;
 //# sourceMappingURL=CategorySubPage.styles.js.map

package/lib/components/PageTemplates/CategorySubPage.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"CategorySubPage.styles.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/CategorySubPage.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport Text from '../Text';\nimport Button from '../Button';\nimport { StyledTab } from '../Tabs/Tab';\nimport { calculateFontSize, getHoverColors, readableColor } from '../../styles';\nimport type { FontSize } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\n\nexport const StyledSkipNavigation = styled(Button)(({ theme }) => {\n  const {\n    base: {\n      palette: { 'primary-background': primaryBackground },\n      spacing\n    }\n  } = theme;\n\n  return css`\n    position: absolute;\n    top: ${spacing};\n    left: -200vw;\n    background-color: ${primaryBackground};\n    padding: calc(2 * ${spacing});\n\n    &:focus,\n    &:active {\n      left: ${spacing};\n    }\n  `;\n});\nStyledSkipNavigation.defaultProps = defaultThemeProp;\n\nexport const StyledNavItem = styled(StyledTab)(({ theme }) => {\n  const {\n    base: {\n      breakpoints,\n      palette: { interactive, 'app-background': hoverBase },\n      spacing\n    }\n  } = theme;\n  const hoverColors = getHoverColors(hoverBase);\n\n  return css`\n    height: auto;\n\n    a,\n    button {\n      display: block;\n      width: 100%;\n      padding: calc(0.8 * ${spacing}) calc(2 * ${spacing});\n    }\n\n    &[aria-current='page'] {\n      a {\n        color: ${interactive};\n      }\n\n      &::after {\n        background: ${interactive};\n      }\n    }\n\n    /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      a,\n      button {\n        text-transform: uppercase;\n        padding: calc(1.5 * ${spacing}) 0;\n\n        &:hover {\n          text-decoration: none;\n        }\n      }\n    }\n\n    /* md or above / \"Desktop\" */\n    @media all and (min-width: ${breakpoints.md}) {\n      padding-left: 0;\n      padding-right: 0;\n      border: none;\n\n      &::after {\n        content: none;\n      }\n\n      a,\n      button {\n        &:hover,\n        &:focus {\n          background: ${hoverColors.background};\n          color: ${hoverColors.foreground};\n          text-decoration: none;\n        }\n      }\n    }\n  `;\n});\nStyledNavItem.defaultProps = defaultThemeProp;\n\nexport const StyledNavGroupHeader = styled(Text)(({ theme }) => {\n  const {\n    base: { spacing, breakpoints }\n  } = theme;\n\n  return css`\n    padding: calc(1.5 * ${spacing}) calc(2 * ${spacing});\n\n    /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      display: none;\n    }\n  `;\n});\nStyledNavGroupHeader.defaultProps = defaultThemeProp;\n\nexport const StyledNavGroupList = styled.ul``;\n\nexport const StyledNavGroup = styled.li(({ theme }) => {\n  const {\n    base: { breakpoints, spacing }\n  } = theme;\n\n  return css`\n    margin: calc(2 * ${spacing}) 0;\n\n    /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      margin: 0;\n    }\n  `;\n});\nStyledNavGroup.defaultProps = defaultThemeProp;\n\nexport const StyledNavList = styled.ul(({ theme }) => {\n  const {\n    base: { breakpoints }\n  } = theme;\n\n  return css`\n    &&,\n    li {\n      list-style-type: none;\n    }\n\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      white-space: nowrap;\n\n      li,\n      > div {\n        display: inline-block;\n      }\n    }\n\n    > ${StyledNavGroup}:first-child {\n      margin-top: 0;\n    }\n  `;\n});\nStyledNavList.defaultProps = defaultThemeProp;\n\nexport const StyledNav = styled.nav``;\n\nexport const StyledCategoryIconBlock = styled.div(({ theme }) => {\n  const {\n    base: {\n      palette: { 'brand-primary': brandPrimary },\n      'border-radius': baseBorderRadius,\n      spacing\n    }\n  } = theme;\n\n  const color = tryCatch(() => readableColor(brandPrimary));\n\n  return css`\n    background: ${brandPrimary};\n    width: 2rem;\n    height: 2rem;\n    margin-inline-end: ${spacing};\n    border-radius: calc(0.5 * ${baseBorderRadius});\n\n    svg {\n      color: ${color};\n    }\n  `;\n});\nStyledCategoryIconBlock.defaultProps = defaultThemeProp;\n\nexport const StyledCategoryHeadingRow = styled.div(({ theme }) => {\n  const {\n    base: { breakpoints, spacing }\n  } = theme;\n\n  return css`\n    padding: 0 calc(2 * ${spacing});\n    margin-bottom: calc(2 * ${spacing});\n\n    h1:focus-visible {\n      outline: transparent;\n      box-shadow: ${theme.base.shadow.focus};\n    }\n\n    /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      margin-bottom: ${spacing};\n    }\n  `;\n});\nStyledCategoryHeadingRow.defaultProps = defaultThemeProp;\n\nexport const StyledMenuColumn = styled.div(({ theme }) => {\n  const {\n    base: {\n      palette: { 'app-background': appBackground },\n      breakpoints,\n      spacing\n    }\n  } = theme;\n\n  return css`\n    background-color: ${appBackground};\n    position: sticky;\n    top: 0;\n    overflow-y: auto;\n    max-height: 100%;\n    width: 100%;\n    padding: calc(2 * ${spacing}) 0;\n\n    /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      position: static;\n      padding-bottom: 0;\n    }\n\n    /* md or above */\n    @media all and (min-width: ${breakpoints.md}) {\n      max-width: 14.438rem;\n    }\n\n    /* lg or above */\n    @media all and (min-width: ${breakpoints.lg}) {\n      max-width: 17.563rem;\n    }\n\n    /* xl or above */\n    @media all and (min-width: ${breakpoints.xl}) {\n      max-width: 20.75rem;\n    }\n  `;\n});\nStyledMenuColumn.defaultProps = defaultThemeProp;\n\nexport const StyledPageTitle = styled.h2(({ theme }) => {\n  const {\n    base: {\n      'font-weight': { 'semi-bold': fontWeight },\n      'font-size': fontSize,\n      'font-scale': fontScale\n    }\n  } = theme;\n\n  const fontSizes = calculateFontSize(fontSize, fontScale);\n\n  return css`\n    font-size: ${fontSizes['m' as FontSize]};\n    font-weight: ${fontWeight};\n  `;\n});\nStyledPageTitle.defaultProps = defaultThemeProp;\n\nexport const StyledPageActionCol = styled.div``;\n\nexport const StyledArticleHeader = styled.header(({ theme }) => {\n  const {\n    base: {\n      palette: { 'primary-background': primaryBackground },\n      spacing\n    }\n  } = theme;\n\n  return css`\n    position: sticky;\n    top: 0;\n    z-index: 1;\n    background-color: ${primaryBackground};\n    padding: calc(2 * ${spacing}) 0 calc(3 * ${spacing});\n  `;\n});\nStyledArticleHeader.defaultProps = defaultThemeProp;\n\nexport const StyledPageArticle = styled.article(({ theme }) => {\n  const {\n    base: {\n      breakpoints,\n      palette: { 'primary-background': primaryBackground },\n      spacing\n    }\n  } = theme;\n\n  return css`\n    position: relative;\n    background-color: ${primaryBackground};\n    width: 100%;\n    max-height: 100%;\n    overflow-y: auto;\n    padding: 0 calc(3 * ${spacing}) calc(2 * ${spacing});\n\n    &:focus {\n      outline: none;\n    }\n\n    /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      padding: 0 calc(2 * ${spacing}) calc(2 * ${spacing});\n    }\n  `;\n});\nStyledPageArticle.defaultProps = defaultThemeProp;\n\nexport const StyledTemplateRow = styled.div(({ theme }) => {\n  const {\n    base: { breakpoints }\n  } = theme;\n\n  return css`\n    position: relative;\n    height: 100%;\n\n    /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      flex-direction: column;\n      height: auto;\n    }\n  `;\n});\nStyledTemplateRow.defaultProps = defaultThemeProp;\n\nexport const StyledTemplate = styled.div`\n  height: 0;\n  min-height: inherit;\n`;\n"]}
+{"version":3,"file":"CategorySubPage.styles.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/CategorySubPage.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport Text from '../Text';\nimport Button from '../Button';\nimport { StyledTab } from '../Tabs/Tab';\nimport { calculateFontSize, getHoverColors, readableColor } from '../../styles';\nimport type { FontSize } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\n\nexport const StyledSkipNavigation = styled(Button)(({ theme }) => {\n  const {\n    base: {\n      palette: { 'primary-background': primaryBackground },\n      spacing\n    }\n  } = theme;\n\n  return css`\n    position: absolute;\n    top: ${spacing};\n    left: -200vw;\n    background-color: ${primaryBackground};\n    padding: calc(2 * ${spacing});\n\n    &:focus,\n    &:active {\n      left: ${spacing};\n    }\n  `;\n});\nStyledSkipNavigation.defaultProps = defaultThemeProp;\n\nexport const StyledNavItem = styled(StyledTab)(({ theme }) => {\n  const {\n    base: {\n      breakpoints,\n      palette: { interactive, 'app-background': hoverBase },\n      spacing\n    }\n  } = theme;\n  const hoverColors = getHoverColors(hoverBase);\n\n  return css`\n    height: auto;\n\n    a,\n    button {\n      display: block;\n      width: 100%;\n      padding: calc(0.8 * ${spacing}) calc(2 * ${spacing});\n    }\n\n    &[aria-current='page'] {\n      a {\n        color: ${interactive};\n      }\n\n      &::after {\n        background: ${interactive};\n      }\n    }\n\n    /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      a,\n      button {\n        text-transform: uppercase;\n        padding: calc(1.5 * ${spacing}) 0;\n\n        &:hover {\n          text-decoration: none;\n        }\n      }\n    }\n\n    /* md or above / \"Desktop\" */\n    @media all and (min-width: ${breakpoints.md}) {\n      padding-left: 0;\n      padding-right: 0;\n      border: none;\n\n      &::after {\n        content: none;\n      }\n\n      a,\n      button {\n        &:hover,\n        &:focus {\n          background: ${hoverColors.background};\n          color: ${hoverColors.foreground};\n          text-decoration: none;\n        }\n      }\n    }\n  `;\n});\nStyledNavItem.defaultProps = defaultThemeProp;\n\nexport const StyledNavGroupHeader = styled(Text)(({ theme }) => {\n  const {\n    base: { spacing, breakpoints }\n  } = theme;\n\n  return css`\n    padding: calc(1.5 * ${spacing}) calc(2 * ${spacing});\n\n    /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      display: none;\n    }\n  `;\n});\nStyledNavGroupHeader.defaultProps = defaultThemeProp;\n\nexport const StyledNavGroupList = styled.ul``;\n\nexport const StyledNavGroup = styled.li(({ theme }) => {\n  const {\n    base: { breakpoints, spacing }\n  } = theme;\n\n  return css`\n    margin: calc(2 * ${spacing}) 0;\n\n    /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      margin: 0;\n    }\n  `;\n});\nStyledNavGroup.defaultProps = defaultThemeProp;\n\nexport const StyledNavList = styled.ul(({ theme }) => {\n  const {\n    base: { breakpoints }\n  } = theme;\n\n  return css`\n    &&,\n    li {\n      list-style-type: none;\n    }\n\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      white-space: nowrap;\n\n      li,\n      > div {\n        display: inline-block;\n      }\n    }\n\n    > ${StyledNavGroup}:first-child {\n      margin-top: 0;\n    }\n  `;\n});\nStyledNavList.defaultProps = defaultThemeProp;\n\nexport const StyledNav = styled.nav``;\n\nexport const StyledCategoryIconBlock = styled.div(({ theme }) => {\n  const {\n    base: {\n      palette: { 'brand-primary': brandPrimary },\n      'border-radius': baseBorderRadius,\n      spacing\n    }\n  } = theme;\n\n  const color = tryCatch(() => readableColor(brandPrimary));\n\n  return css`\n    background: ${brandPrimary};\n    width: 2rem;\n    height: 2rem;\n    margin-inline-end: ${spacing};\n    border-radius: calc(0.5 * ${baseBorderRadius});\n\n    svg {\n      color: ${color};\n    }\n  `;\n});\nStyledCategoryIconBlock.defaultProps = defaultThemeProp;\n\nexport const StyledCategoryHeadingRow = styled.div(({ theme }) => {\n  const {\n    base: { breakpoints, spacing }\n  } = theme;\n\n  return css`\n    padding: 0 calc(2 * ${spacing});\n    margin-bottom: calc(2 * ${spacing});\n\n    h1:focus-visible {\n      outline: transparent;\n      box-shadow: ${theme.base.shadow.focus};\n    }\n\n    /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      margin-bottom: ${spacing};\n    }\n  `;\n});\nStyledCategoryHeadingRow.defaultProps = defaultThemeProp;\n\nexport const StyledMenuColumn = styled.div(({ theme }) => {\n  const {\n    base: {\n      palette: { 'app-background': appBackground },\n      breakpoints,\n      spacing\n    }\n  } = theme;\n\n  return css`\n    background-color: ${appBackground};\n    position: sticky;\n    top: 0;\n    height: 100%;\n    min-height: 0;\n    max-height: 100%;\n    overflow-y: auto;\n    width: 100%;\n    padding: calc(2 * ${spacing}) 0;\n\n    /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      position: static;\n      padding-bottom: 0;\n    }\n\n    /* md or above */\n    @media all and (min-width: ${breakpoints.md}) {\n      max-width: 14.438rem;\n    }\n\n    /* lg or above */\n    @media all and (min-width: ${breakpoints.lg}) {\n      max-width: 17.563rem;\n    }\n\n    /* xl or above */\n    @media all and (min-width: ${breakpoints.xl}) {\n      max-width: 20.75rem;\n    }\n  `;\n});\nStyledMenuColumn.defaultProps = defaultThemeProp;\n\nexport const StyledPageTitle = styled.h2(({ theme }) => {\n  const {\n    base: {\n      'font-weight': { 'semi-bold': fontWeight },\n      'font-size': fontSize,\n      'font-scale': fontScale\n    }\n  } = theme;\n\n  const fontSizes = calculateFontSize(fontSize, fontScale);\n\n  return css`\n    font-size: ${fontSizes['m' as FontSize]};\n    font-weight: ${fontWeight};\n  `;\n});\nStyledPageTitle.defaultProps = defaultThemeProp;\n\nexport const StyledPageActionCol = styled.div``;\n\nexport const StyledArticleHeader = styled.header(({ theme }) => {\n  const {\n    base: {\n      palette: { 'primary-background': primaryBackground },\n      spacing\n    }\n  } = theme;\n\n  return css`\n    position: sticky;\n    top: 0;\n    z-index: 1;\n    background-color: ${primaryBackground};\n    padding: calc(2 * ${spacing}) 0 calc(3 * ${spacing});\n  `;\n});\nStyledArticleHeader.defaultProps = defaultThemeProp;\n\nexport const StyledPageArticle = styled.article(({ theme }) => {\n  const {\n    base: {\n      breakpoints,\n      palette: { 'primary-background': primaryBackground },\n      spacing\n    }\n  } = theme;\n\n  return css`\n    position: relative;\n    background-color: ${primaryBackground};\n    width: 100%;\n    height: 100%;\n    min-height: 0;\n    max-height: 100%;\n    overflow-y: auto;\n    padding: 0 calc(3 * ${spacing}) calc(2 * ${spacing});\n\n    &:focus {\n      outline: none;\n    }\n\n    /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      padding: 0 calc(2 * ${spacing}) calc(2 * ${spacing});\n    }\n  `;\n});\nStyledPageArticle.defaultProps = defaultThemeProp;\n\nexport const StyledTemplateRow = styled.div(({ theme }) => {\n  const {\n    base: { breakpoints }\n  } = theme;\n\n  return css`\n    position: relative;\n    height: 100%;\n    min-height: 0;\n\n    /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      flex-direction: column;\n      height: auto;\n      min-height: inherit;\n    }\n  `;\n});\nStyledTemplateRow.defaultProps = defaultThemeProp;\n\nexport const StyledTemplate = styled.div(({ theme }) => {\n  const {\n    base: { breakpoints }\n  } = theme;\n  const templateHeight = 'calc(100dvh - var(--appshell-offset, 0rem))';\n\n  return css`\n    height: 100%;\n    min-height: 0;\n\n    /* md or above / split-scroll layout */\n    @media all and (min-width: ${breakpoints.md}) {\n      height: ${templateHeight};\n      min-height: ${templateHeight};\n      max-height: ${templateHeight};\n      overflow: hidden;\n    }\n  `;\n});\nStyledTemplate.defaultProps = defaultThemeProp;\n"]}

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

@@ -1,9 +1,14 @@
 import type { ReactNode } from 'react';
-import type { OmitStrict } from '../../types';
+import type { HeadingTag, OmitStrict } from '../../types';
 import type { SelectionCardProps } from '../SelectionCard/SelectionCard.types';
 import type { RadioButtonProps } from './RadioButton';
 export type RadioButtonCardProps = OmitStrict<SelectionCardProps, 'heading'> & OmitStrict<RadioButtonProps, 'label' | 'variant'> & {
     label: NonNullable<ReactNode>;
+    /**
+     * Uses specific heading tag for header.
+     * @default h4
+     */
+    headingTag?: HeadingTag;
 };
 declare const _default: import("react").ForwardRefExoticComponent<Omit<RadioButtonCardProps, "ref"> & import("react").RefAttributes<HTMLInputElement>> & {
     getTestIds: (testIdProp?: import("../../types").TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly ["control", "content", "image", "label", "actions"]>;

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":"AACA,OAAO,KAAK,EAA8C,SAAS,EAAE,MAAM,OAAO,CAAC;AAGnF,OAAO,KAAK,EAAE,UAAU,EAAc,MAAM,aAAa,CAAC;AAG1D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAI/E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAGtD,MAAM,MAAM,oBAAoB,GAAG,UAAU,CAAC,kBAAkB,EAAE,SAAS,CAAC,GAC1E,UAAU,CAAC,gBAAgB,EAAE,OAAO,GAAG,SAAS,CAAC,GAAG;IAClD,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CAC/B,CAAC;;;;AAyFJ,wBAAuE"}
+{"version":3,"file":"RadioButtonCard.d.ts","sourceRoot":"","sources":["../../../src/components/RadioButton/RadioButtonCard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAA8C,SAAS,EAAE,MAAM,OAAO,CAAC;AAGnF,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAc,MAAM,aAAa,CAAC;AAGtE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAI/E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAGtD,MAAM,MAAM,oBAAoB,GAAG,UAAU,CAAC,kBAAkB,EAAE,SAAS,CAAC,GAC1E,UAAU,CAAC,gBAAgB,EAAE,OAAO,GAAG,SAAS,CAAC,GAAG;IAClD,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IAC9B;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,CAAC;;;;AA0FJ,wBAAuE"}

package/lib/components/RadioButton/RadioButtonCard.js

@@ -8,13 +8,13 @@ import RadioButton from './RadioButton';
 import { getRadioButtonCardTestIds } from './RadioButton.test-ids';
 const RadioButtonCard = forwardRef(function RadioButtonCard(prop, ref) {
     const uid = useUID();
-    const { testId, id = uid, label, 'aria-label': ariaLabel, disabled, readOnly, onChange, onClick, onKeyDown, status, checked, value, ...restProps } = prop;
+    const { testId, id = uid, label, headingTag = 'h4', 'aria-label': ariaLabel, disabled, readOnly, onChange, onClick, onKeyDown, status, checked, value, ...restProps } = prop;
     const cardId = `${id}-card`;
     const labelId = `${id}-label`;
     const testIds = useTestIds(testId, getRadioButtonCardTestIds);
     const inputRef = useConsolidatedRef(ref);
     const containerRef = useRef(null);
-    return (_jsx(SelectionCard, { ...restProps, id: cardId, testId: testIds, "aria-labelledby": ariaLabel ? undefined : labelId, "aria-label": ariaLabel, heading: _jsx(RadioButton, { testId: testIds.root, onChange: onChange, onClick: onClick, status: status, checked: checked, value: value, id: id, disabled: disabled, readOnly: readOnly, "aria-labelledby": labelId, label: _jsx(Text, { variant: 'h4', as: 'span', id: labelId, "data-testid": testIds.label, children: label }), variant: 'simple', ref: inputRef, onKeyDown: (e) => {
+    return (_jsx(SelectionCard, { ...restProps, id: cardId, testId: testIds, "aria-labelledby": ariaLabel ? undefined : labelId, "aria-label": ariaLabel, heading: _jsx(RadioButton, { testId: testIds.root, onChange: onChange, onClick: onClick, status: status, checked: checked, value: value, id: id, disabled: disabled, readOnly: readOnly, "aria-labelledby": labelId, label: _jsx(Text, { variant: headingTag, as: 'span', id: labelId, "data-testid": testIds.label, children: label }), variant: 'simple', ref: inputRef, onKeyDown: (e) => {
                 if (e.key.includes('arrow'))
                     e.preventDefault();
                 onKeyDown?.(e);

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 { KeyboardEvent, MouseEvent, PropsWithoutRef, ReactNode } from 'react';\n\nimport { useConsolidatedRef, useTestIds, useUID } from '../../hooks';\nimport type { OmitStrict, RefElement } from '../../types';\nimport { getActiveElement, withTestIds } from '../../utils';\nimport SelectionCard, { focusableSelector } from '../SelectionCard/SelectionCard';\nimport type { SelectionCardProps } from '../SelectionCard/SelectionCard.types';\nimport Text from '../Text';\n\nimport RadioButton from './RadioButton';\nimport type { RadioButtonProps } from './RadioButton';\nimport { getRadioButtonCardTestIds } from './RadioButton.test-ids';\n\nexport type RadioButtonCardProps = OmitStrict<SelectionCardProps, 'heading'> &\n  OmitStrict<RadioButtonProps, 'label' | 'variant'> & {\n    label: NonNullable<ReactNode>;\n  };\n\nconst RadioButtonCard = forwardRef<\n  RefElement<RadioButtonProps>,\n  PropsWithoutRef<RadioButtonCardProps>\n>(function RadioButtonCard(prop, ref) {\n  const uid = useUID();\n  const {\n    testId,\n    id = uid,\n    label,\n    'aria-label': ariaLabel,\n    disabled,\n    readOnly,\n    onChange,\n    onClick,\n    onKeyDown,\n    status,\n    checked,\n    value,\n    ...restProps\n  } = prop;\n  const cardId = `${id}-card`;\n  const labelId = `${id}-label`;\n\n  const testIds = useTestIds(testId, getRadioButtonCardTestIds);\n  const inputRef = useConsolidatedRef(ref);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  return (\n    <SelectionCard\n      {...restProps}\n      id={cardId}\n      testId={testIds}\n      aria-labelledby={ariaLabel ? undefined : labelId}\n      aria-label={ariaLabel}\n      heading={\n        <RadioButton\n          testId={testIds.root}\n          onChange={onChange}\n          onClick={onClick}\n          status={status}\n          checked={checked}\n          value={value}\n          id={id}\n          disabled={disabled}\n          readOnly={readOnly}\n          aria-labelledby={labelId}\n          label={\n            <Text variant='h4' as='span' id={labelId} data-testid={testIds.label}>\n              {label}\n            </Text>\n          }\n          variant='simple'\n          ref={inputRef}\n          onKeyDown={(e: KeyboardEvent) => {\n            if (e.key.includes('arrow')) e.preventDefault();\n            onKeyDown?.(e);\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 { KeyboardEvent, MouseEvent, PropsWithoutRef, ReactNode } from 'react';\n\nimport { useConsolidatedRef, useTestIds, useUID } from '../../hooks';\nimport type { HeadingTag, OmitStrict, RefElement } from '../../types';\nimport { getActiveElement, withTestIds } from '../../utils';\nimport SelectionCard, { focusableSelector } from '../SelectionCard/SelectionCard';\nimport type { SelectionCardProps } from '../SelectionCard/SelectionCard.types';\nimport Text from '../Text';\n\nimport RadioButton from './RadioButton';\nimport type { RadioButtonProps } from './RadioButton';\nimport { getRadioButtonCardTestIds } from './RadioButton.test-ids';\n\nexport type RadioButtonCardProps = OmitStrict<SelectionCardProps, 'heading'> &\n  OmitStrict<RadioButtonProps, 'label' | 'variant'> & {\n    label: NonNullable<ReactNode>;\n    /**\n     * Uses specific heading tag for header.\n     * @default h4\n     */\n    headingTag?: HeadingTag;\n  };\n\nconst RadioButtonCard = forwardRef<\n  RefElement<RadioButtonProps>,\n  PropsWithoutRef<RadioButtonCardProps>\n>(function RadioButtonCard(prop, ref) {\n  const uid = useUID();\n  const {\n    testId,\n    id = uid,\n    label,\n    headingTag = 'h4',\n    'aria-label': ariaLabel,\n    disabled,\n    readOnly,\n    onChange,\n    onClick,\n    onKeyDown,\n    status,\n    checked,\n    value,\n    ...restProps\n  } = prop;\n  const cardId = `${id}-card`;\n  const labelId = `${id}-label`;\n\n  const testIds = useTestIds(testId, getRadioButtonCardTestIds);\n  const inputRef = useConsolidatedRef(ref);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  return (\n    <SelectionCard\n      {...restProps}\n      id={cardId}\n      testId={testIds}\n      aria-labelledby={ariaLabel ? undefined : labelId}\n      aria-label={ariaLabel}\n      heading={\n        <RadioButton\n          testId={testIds.root}\n          onChange={onChange}\n          onClick={onClick}\n          status={status}\n          checked={checked}\n          value={value}\n          id={id}\n          disabled={disabled}\n          readOnly={readOnly}\n          aria-labelledby={labelId}\n          label={\n            <Text variant={headingTag} as='span' id={labelId} data-testid={testIds.label}>\n              {label}\n            </Text>\n          }\n          variant='simple'\n          ref={inputRef}\n          onKeyDown={(e: KeyboardEvent) => {\n            if (e.key.includes('arrow')) e.preventDefault();\n            onKeyDown?.(e);\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,EACV,GAAG,EAEH,YAAY,EACZ,WAAW,EAEZ,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAc,UAAU,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE1E,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;AAUrD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAKhE,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAC/C,UAAU,EACV,UAAU,CAAC,OAAO,QAAQ,CAAC,GAAG;IAC5B,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;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB,CACF,CAAC;AAEF,eAAO,MAAM,qBAAqB,+OAwBhC,CAAC;;;;AAkMH,wBAAuE"}
+{"version":3,"file":"RadioCheckGroup.d.ts","sourceRoot":"","sources":["../../../src/components/RadioCheckGroup/RadioCheckGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,GAAG,EAEH,YAAY,EACZ,WAAW,EAEZ,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAc,UAAU,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE1E,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;AAUrD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAKhE,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAC/C,UAAU,EACV,UAAU,CAAC,OAAO,QAAQ,CAAC,GAAG;IAC5B,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;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB,CACF,CAAC;AAEF,eAAO,MAAM,qBAAqB,+OAwBhC,CAAC;;;;AA4MH,wBAAuE"}

package/lib/components/RadioCheckGroup/RadioCheckGroup.js

@@ -35,24 +35,32 @@ export const StyledRadioCheckGroup = styled.fieldset(() => {
     }
   `;
 });
+const getCardGridColumns = (cardWidth) => css `
+  @container (min-width: calc(2 * ${cardWidth})) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @container (min-width: calc(3 * ${cardWidth})) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  @container (min-width: calc(4 * ${cardWidth})) {
+    grid-template-columns: repeat(4, 1fr);
+  }
+`;
 const getCardGridContainerStyles = (theme) => {
-    const cardWidth = theme.base['content-width'].md;
+    const defaultCardWidth = theme.base['content-width'].sm;
+    const inlineImageCardWidth = theme.base['content-width'].md;
     return css `
     display: grid;
     gap: ${theme.base.spacing};
     grid-template-columns: 1fr;
     grid-auto-rows: 1fr;
 
-    @container (min-width: calc(2 * ${cardWidth})) {
-      grid-template-columns: repeat(2, 1fr);
-    }
-
-    @container (min-width: calc(3 * ${cardWidth})) {
-      grid-template-columns: repeat(3, 1fr);
-    }
+    ${getCardGridColumns(defaultCardWidth)}
 
-    @container (min-width: calc(4 * ${cardWidth})) {
-      grid-template-columns: repeat(4, 1fr);
+    &:has(${StyledSelectionCardInline}) {
+      ${getCardGridColumns(inlineImageCardWidth)}
     }
   `;
 };

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 {\n  Ref,\n  PropsWithoutRef,\n  ReactElement,\n  ChangeEvent,\n  MouseEvent as ReactMouseEvent\n} from 'react';\nimport styled, { css, type DefaultTheme } from 'styled-components';\n\nimport type { RefElement, TestIdProp, WithAttributes } from '../../types';\nimport FormField from '../FormField';\nimport type { FormFieldProps } from '../FormField';\nimport { StyledFormField, StyledFormFieldInfo } from '../FormField/FormField';\nimport type { FormControlProps } from '../FormControl';\nimport type { RadioCheckProps } from '../RadioCheck';\nimport Flex from '../Flex';\nimport { defaultThemeProp } from '../../theme';\nimport { useArrows, useConsolidatedRef, useElement, useTestIds, useUID } from '../../hooks';\nimport {\n  StyledImageContainer,\n  StyledSelectionCard,\n  StyledSelectionCardInline\n} from '../SelectionCard/SelectionCard.styles';\nimport { getActiveElement, withTestIds } from '../../utils';\nimport type { elements } from '../FormField/FormField.test-ids';\nimport { StyledRadioCheck } from '../RadioCheck/RadioCheck';\n\nimport { getRadioCheckGroupTestIds } from './RadioCheckGroup.test-ids';\n\nexport type RadioCheckGroupProps = WithAttributes<\n  'fieldset',\n  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    /**\n     * Enables arrow key navigation between options in the group.\n     * Disable for checkbox groups where each option is independently selectable.\n     * @default true\n     */\n    arrowNavigation?: boolean;\n    /** Ref forwarded to the wrapping element. */\n    ref?: Ref<HTMLElement>;\n  }\n>;\n\nexport const StyledRadioCheckGroup = styled.fieldset(() => {\n  return css`\n    container-type: inline-size;\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    ${StyledRadioCheck} > ${StyledFormFieldInfo} {\n      display: none;\n    }\n  `;\n});\n\nconst getCardGridContainerStyles = (theme: DefaultTheme) => {\n  const cardWidth = theme.base['content-width'].md;\n  return css`\n    display: grid;\n    gap: ${theme.base.spacing};\n    grid-template-columns: 1fr;\n    grid-auto-rows: 1fr;\n\n    @container (min-width: calc(2 * ${cardWidth})) {\n      grid-template-columns: repeat(2, 1fr);\n    }\n\n    @container (min-width: calc(3 * ${cardWidth})) {\n      grid-template-columns: repeat(3, 1fr);\n    }\n\n    @container (min-width: calc(4 * ${cardWidth})) {\n      grid-template-columns: repeat(4, 1fr);\n    }\n  `;\n};\n\nconst StyledCardGrid = styled.div<{\n  renderInline: boolean;\n  autoStack: boolean;\n  childCount: number;\n}>(({ theme, renderInline, autoStack, childCount }) => {\n  if (!renderInline) {\n    return css`\n      display: grid;\n      gap: ${theme.base.spacing};\n      grid-template-columns: minmax(min-content, max-content);\n      grid-auto-rows: 1fr;\n    `;\n  }\n\n  return autoStack\n    ? getCardGridContainerStyles(theme)\n    : css`\n        display: grid;\n        gap: ${theme.base.spacing};\n        grid-template-columns: repeat(${childCount}, 1fr);\n        grid-auto-rows: 1fr;\n      `;\n});\n\nStyledCardGrid.defaultProps = defaultThemeProp;\n\nconst RadioCheckGroup = forwardRef<\n  RefElement<RadioCheckGroupProps>,\n  PropsWithoutRef<RadioCheckGroupProps>\n>(function RadioCheckGroup(props, ref) {\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    arrowNavigation = true,\n    onClear,\n    ...restProps\n  } = props;\n\n  const testIds = useTestIds(testId, getRadioCheckGroupTestIds);\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  const skipRef = useRef<HTMLElement>(null);\n\n  useArrows(\n    arrowNavigation ? containerRef : skipRef,\n    {\n      selector: '[data-main-focus]',\n      cycle: false,\n      dir: 'both'\n    },\n    [children]\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          status: restProps.status,\n          disabled: disabled || child.props.disabled,\n          readOnly: readOnly || child.props.readOnly,\n          variant: variant === 'card-grid' ? 'card' : variant,\n          suppressAnnouncements: true,\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      ref={containerRef}\n      name={name}\n      disabled={disabled}\n      required={required}\n      {...restProps}\n      inline={false}\n      isRadioCheck\n      onClear={onClear}\n      // Prevents blur when any input within the group is actively focused.\n      onMouseDown={(e: ReactMouseEvent<HTMLFieldSetElement>) => {\n        restProps.onMouseDown?.(e);\n\n        if (!containerRef.current) return;\n\n        if (!containerRef.current.contains(getActiveElement())) return;\n\n        if (!(e.target instanceof Element) || !e.target.closest('label')) return;\n\n        e.preventDefault();\n      }}\n    >\n      {variant === 'card-grid' ? (\n        <StyledCardGrid\n          ref={setOptionsEl}\n          renderInline={renderInline}\n          autoStack={autoStack}\n          childCount={Children.count(children)}\n        >\n          {mapChildren}\n        </StyledCardGrid>\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\nexport default withTestIds(RadioCheckGroup, getRadioCheckGroupTestIds);\n"]}
+{"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 {\n  Ref,\n  PropsWithoutRef,\n  ReactElement,\n  ChangeEvent,\n  MouseEvent as ReactMouseEvent\n} from 'react';\nimport styled, { css, type DefaultTheme } from 'styled-components';\n\nimport type { RefElement, TestIdProp, WithAttributes } from '../../types';\nimport FormField from '../FormField';\nimport type { FormFieldProps } from '../FormField';\nimport { StyledFormField, StyledFormFieldInfo } from '../FormField/FormField';\nimport type { FormControlProps } from '../FormControl';\nimport type { RadioCheckProps } from '../RadioCheck';\nimport Flex from '../Flex';\nimport { defaultThemeProp } from '../../theme';\nimport { useArrows, useConsolidatedRef, useElement, useTestIds, useUID } from '../../hooks';\nimport {\n  StyledImageContainer,\n  StyledSelectionCard,\n  StyledSelectionCardInline\n} from '../SelectionCard/SelectionCard.styles';\nimport { getActiveElement, withTestIds } from '../../utils';\nimport type { elements } from '../FormField/FormField.test-ids';\nimport { StyledRadioCheck } from '../RadioCheck/RadioCheck';\n\nimport { getRadioCheckGroupTestIds } from './RadioCheckGroup.test-ids';\n\nexport type RadioCheckGroupProps = WithAttributes<\n  'fieldset',\n  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    /**\n     * Enables arrow key navigation between options in the group.\n     * Disable for checkbox groups where each option is independently selectable.\n     * @default true\n     */\n    arrowNavigation?: boolean;\n    /** Ref forwarded to the wrapping element. */\n    ref?: Ref<HTMLElement>;\n  }\n>;\n\nexport const StyledRadioCheckGroup = styled.fieldset(() => {\n  return css`\n    container-type: inline-size;\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    ${StyledRadioCheck} > ${StyledFormFieldInfo} {\n      display: none;\n    }\n  `;\n});\n\nconst getCardGridColumns = (cardWidth: string) => css`\n  @container (min-width: calc(2 * ${cardWidth})) {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  @container (min-width: calc(3 * ${cardWidth})) {\n    grid-template-columns: repeat(3, 1fr);\n  }\n\n  @container (min-width: calc(4 * ${cardWidth})) {\n    grid-template-columns: repeat(4, 1fr);\n  }\n`;\n\nconst getCardGridContainerStyles = (theme: DefaultTheme) => {\n  const defaultCardWidth = theme.base['content-width'].sm;\n  const inlineImageCardWidth = theme.base['content-width'].md;\n  return css`\n    display: grid;\n    gap: ${theme.base.spacing};\n    grid-template-columns: 1fr;\n    grid-auto-rows: 1fr;\n\n    ${getCardGridColumns(defaultCardWidth)}\n\n    &:has(${StyledSelectionCardInline}) {\n      ${getCardGridColumns(inlineImageCardWidth)}\n    }\n  `;\n};\n\nconst StyledCardGrid = styled.div<{\n  renderInline: boolean;\n  autoStack: boolean;\n  childCount: number;\n}>(({ theme, renderInline, autoStack, childCount }) => {\n  if (!renderInline) {\n    return css`\n      display: grid;\n      gap: ${theme.base.spacing};\n      grid-template-columns: minmax(min-content, max-content);\n      grid-auto-rows: 1fr;\n    `;\n  }\n\n  return autoStack\n    ? getCardGridContainerStyles(theme)\n    : css`\n        display: grid;\n        gap: ${theme.base.spacing};\n        grid-template-columns: repeat(${childCount}, 1fr);\n        grid-auto-rows: 1fr;\n      `;\n});\n\nStyledCardGrid.defaultProps = defaultThemeProp;\n\nconst RadioCheckGroup = forwardRef<\n  RefElement<RadioCheckGroupProps>,\n  PropsWithoutRef<RadioCheckGroupProps>\n>(function RadioCheckGroup(props, ref) {\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    arrowNavigation = true,\n    onClear,\n    ...restProps\n  } = props;\n\n  const testIds = useTestIds(testId, getRadioCheckGroupTestIds);\n  const [optionsEl, setOptionsEl] = useElement<HTMLDivElement>();\n\n  const [renderInline, setRenderInline] = useState(inline);\n  const renderInlineRef = useRef(inline);\n  const minInlineWidth = useRef(0);\n  const containerRef = useConsolidatedRef(ref);\n  const skipRef = useRef<HTMLElement>(null);\n\n  useArrows(\n    arrowNavigation ? containerRef : skipRef,\n    {\n      selector: '[data-main-focus]',\n      cycle: false,\n      dir: 'both'\n    },\n    [children]\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          status: restProps.status,\n          disabled: disabled || child.props.disabled,\n          readOnly: readOnly || child.props.readOnly,\n          variant: variant === 'card-grid' ? 'card' : variant,\n          suppressAnnouncements: true,\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      ref={containerRef}\n      name={name}\n      disabled={disabled}\n      required={required}\n      {...restProps}\n      inline={false}\n      isRadioCheck\n      onClear={onClear}\n      // Prevents blur when any input within the group is actively focused.\n      onMouseDown={(e: ReactMouseEvent<HTMLFieldSetElement>) => {\n        restProps.onMouseDown?.(e);\n\n        if (!containerRef.current) return;\n\n        if (!containerRef.current.contains(getActiveElement())) return;\n\n        if (!(e.target instanceof Element) || !e.target.closest('label')) return;\n\n        e.preventDefault();\n      }}\n    >\n      {variant === 'card-grid' ? (\n        <StyledCardGrid\n          ref={setOptionsEl}\n          renderInline={renderInline}\n          autoStack={autoStack}\n          childCount={Children.count(children)}\n        >\n          {mapChildren}\n        </StyledCardGrid>\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\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":"AAmDA,OAAO,KAAK,EAIV,kBAAkB,EAEnB,MAAM,uBAAuB,CAAC;AAW/B,eAAO,MAAM,iBAAiB,wFACyD,CAAC;;;;AAsSxF,wBAAmE"}
+{"version":3,"file":"SelectionCard.d.ts","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCard.tsx"],"names":[],"mappings":"AAmDA,OAAO,KAAK,EAIV,kBAAkB,EAEnB,MAAM,uBAAuB,CAAC;AAW/B,eAAO,MAAM,iBAAiB,wFACyD,CAAC;;;;AAuSxF,wBAAmE"}

package/lib/components/SelectionCard/SelectionCard.js

@@ -81,7 +81,7 @@ const SelectionCard = forwardRef(function SelectionCard(props, ref) {
     const imageContent = useMemo(() => {
         if (!image)
             return undefined;
-        const innerContent = tile ? (_jsx(StyledTileContent, { foregroundColor: tile.foregroundColor, backgroundColor: tile.backgroundColor, size: tile.size, children: tile.icon ? _jsx(Icon, { name: tile.icon }) : tile.text || _jsx(Icon, { name: 'picture' }) })) : (_jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledImageContainer, placement: image.placement, size: image.size, children: (isBrokenImage && resolvedImageSrc === prevImageSrc) || resolvedImageSrc === undefined ? (_jsx(Icon, { name: 'picture', "aria-label": t('image_load_error') })) : (_jsx(StyledImage, { "data-testid": testIds.image, ...image, onError: () => setIsBrokenImage(true), onLoad: () => setIsBrokenImage(false) })) }));
+        const innerContent = tile ? (_jsx(StyledTileContent, { "data-tile-content": true, foregroundColor: tile.foregroundColor, backgroundColor: tile.backgroundColor, size: tile.size, children: tile.icon ? _jsx(Icon, { name: tile.icon }) : tile.text || _jsx(Icon, { name: 'picture' }) })) : (_jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledImageContainer, placement: image.placement, size: image.size, children: (isBrokenImage && resolvedImageSrc === prevImageSrc) || resolvedImageSrc === 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: StyledImageCell, placement: image.placement, size: image.size, isTile: isTile, style: !isTile && image.src && !isBrokenImage ? { '--bg-image': `url(${image.src})` } : undefined, children: innerContent }));
     }, [
         isBrokenImage,

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

@@ -1 +1 @@
-{"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, ReactNode, RefObject } from 'react';\n\nimport { getActiveElement, withTestIds, isValidElement, hasProp } from '../../utils';\nimport Icon, { registerIcon } from '../Icon';\nimport type { RefElement } from '../../types';\nimport {\n  useConsolidatedRef,\n  useElement,\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 { StyledImage } from '../Image';\nimport * as pictureIcon from '../Icon/icons/picture.icon';\nimport ShowMoreLess from '../ShowMoreLess';\nimport Tooltip from '../Tooltip';\n\nimport { getSelectionCardTestIds } from './SelectionCard.test-ids';\nimport {\n  StyledSelectionCard,\n  StyledContentContainer,\n  StyledImageContainer,\n  StyledSelectionCardInline,\n  StyledSelectionCardStacked,\n  StyledValueList,\n  StyledHeader,\n  StyledImageCell,\n  StyledContentCell,\n  StyledTileContent,\n  StyledCardFooter,\n  StyledSingleField\n} from './SelectionCard.styles';\nimport type {\n  FieldValueItemPropsOmitName,\n  ImagePlacement,\n  ImageSize,\n  SelectionCardProps,\n  SelectionCardTile\n} from './SelectionCard.types';\nimport SelectionCardActions from './SelectionCardActions';\n\nregisterIcon(pictureIcon);\n\nconst isTileContent = (\n  img: NonNullable<SelectionCardProps['image']>\n): img is SelectionCardTile & { placement?: ImagePlacement; size?: ImageSize } => {\n  return 'foregroundColor' in img;\n};\n\nexport const focusableSelector =\n  'a[href], button, input, textarea, select, details, video[controls], audio[controls]';\n\nconst SingleField = ({\n  id,\n  'data-testid': testId,\n  truncate,\n  value\n}: {\n  id: string;\n  'data-testid'?: string;\n  truncate?: boolean;\n  value: ReactNode;\n}) => {\n  const [el, setEl] = useElement<HTMLDivElement>(null);\n  return (\n    <>\n      <StyledSingleField ref={setEl} id={id} data-testid={testId} truncate={truncate}>\n        {value}\n      </StyledSingleField>\n      {truncate && el && (\n        <Tooltip target={el} smart>\n          {value}\n        </Tooltip>\n      )}\n    </>\n  );\n};\n\nconst useContentHeight = (\n  contentRef: RefObject<HTMLElement>,\n  targetRef: RefObject<HTMLElement>\n) => {\n  useLayoutEffect(() => {\n    if (!contentRef.current || !targetRef.current) return;\n\n    const resizeObserver = new ResizeObserver(() => {\n      requestAnimationFrame(() => {\n        targetRef.current?.style.setProperty(\n          '--content-height',\n          `${contentRef.current?.scrollHeight}px`\n        );\n      });\n    });\n\n    resizeObserver.observe(contentRef.current);\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, []);\n};\n\nconst SelectionCard = forwardRef<\n  RefElement<SelectionCardProps>,\n  PropsWithoutRef<SelectionCardProps>\n>(function SelectionCard(props, ref) {\n  const uid = useUID();\n  const {\n    testId,\n    id = uid,\n    'aria-label': label,\n    heading,\n    disabled = false,\n    readOnly,\n    image,\n    footer,\n    fields = [],\n    onClick,\n    onKeyDown,\n    actions,\n    additionalInfo,\n    ...restProps\n  } = props;\n\n  const t = useI18n();\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 isTile = image !== undefined && isTileContent(image);\n  const tile = isTile ? image : undefined;\n  const resolvedImageSrc = !isTile ? image?.src : undefined;\n  const prevImageSrc = usePrevious(resolvedImageSrc);\n  const testIds = useTestIds(testId, getSelectionCardTestIds);\n  const contentId = `${id}-content`;\n\n  const hasAdditionalContent = fields.length > 0;\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]);\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  useContentHeight(contentRef, containerRef);\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) return undefined;\n\n    const innerContent = tile ? (\n      <StyledTileContent\n        foregroundColor={tile.foregroundColor}\n        backgroundColor={tile.backgroundColor}\n        size={tile.size}\n      >\n        {tile.icon ? <Icon name={tile.icon} /> : tile.text || <Icon name='picture' />}\n      </StyledTileContent>\n    ) : (\n      <Flex\n        container={{ justify: 'center', alignItems: 'center' }}\n        as={StyledImageContainer}\n        placement={image.placement}\n        size={image.size}\n      >\n        {(isBrokenImage && resolvedImageSrc === prevImageSrc) || resolvedImageSrc === 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      </Flex>\n    );\n\n    return (\n      <Flex\n        container={{ justify: 'center', alignItems: 'center' }}\n        as={StyledImageCell}\n        placement={image.placement}\n        size={image.size}\n        isTile={isTile}\n        style={\n          !isTile && image.src && !isBrokenImage ? { '--bg-image': `url(${image.src})` } : undefined\n        }\n      >\n        {innerContent}\n      </Flex>\n    );\n  }, [\n    isBrokenImage,\n    prevImageSrc,\n    image?.placement,\n    image?.size,\n    tile?.icon,\n    tile?.text,\n    tile?.foregroundColor,\n    tile?.backgroundColor\n  ]);\n\n  let asProp: GridProps['as'] = StyledSelectionCard;\n  if (image) {\n    asProp = (image.placement ?? 'inline-start').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      id={id}\n      onClick={onClick}\n      as={asProp}\n      placement={image?.placement}\n      size={image?.size}\n      container={{ cols: '1fr', rows: 'auto' }}\n      disabled={disabled}\n      readOnly={readOnly}\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    >\n      {image && image.placement !== 'inline-end' && imageContent}\n      {/* element needed to get actual content height of the content container */}\n      <StyledContentCell>\n        <Flex\n          as={StyledContentContainer}\n          container={{ direction: 'column', gap: 0.75 }}\n          ref={contentRef}\n        >\n          <Flex as={StyledHeader} container={{ alignItems: 'center', justify: 'between' }}>\n            {isValidElement(heading) ? (\n              cloneElement(heading, {\n                ...{\n                  tabIndex: focusOnInput ? undefined : -1,\n                  additionalInfo,\n                  'data-main-focus': focusOnInput ? true : undefined,\n                  'aria-details': hasAdditionalContent ? contentId : undefined\n                }\n              })\n            ) : (\n              <span\n                data-testid={testIds.label}\n                aria-details={hasAdditionalContent ? contentId : undefined}\n              >\n                {heading}\n              </span>\n            )}\n            {actions && (\n              <SelectionCardActions\n                data-testid={testIds.actions}\n                actions={actions}\n                disabled={disabled}\n                contextualLabel={label}\n              />\n            )}\n          </Flex>\n          {hasAdditionalContent &&\n            (fields.every(field => isFieldValueListItemProps(field)) ? (\n              <FieldValueList id={contentId} data-testid={testIds.content} fields={fields} />\n            ) : (\n              <>\n                {fields.length === 1 ? (\n                  <SingleField\n                    id={contentId}\n                    data-testid={testIds.content}\n                    truncate={fields[0].truncate}\n                    value={fields[0].value}\n                  />\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}>\n                        {field.truncate ? (\n                          <ShowMoreLess lines={3}>{field.value}</ShowMoreLess>\n                        ) : (\n                          field.value\n                        )}\n                      </li>\n                    ))}\n                  </Flex>\n                )}\n              </>\n            ))}\n        </Flex>\n        {footer && <StyledCardFooter>{footer}</StyledCardFooter>}\n      </StyledContentCell>\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, ReactNode, RefObject } from 'react';\n\nimport { getActiveElement, withTestIds, isValidElement, hasProp } from '../../utils';\nimport Icon, { registerIcon } from '../Icon';\nimport type { RefElement } from '../../types';\nimport {\n  useConsolidatedRef,\n  useElement,\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 { StyledImage } from '../Image';\nimport * as pictureIcon from '../Icon/icons/picture.icon';\nimport ShowMoreLess from '../ShowMoreLess';\nimport Tooltip from '../Tooltip';\n\nimport { getSelectionCardTestIds } from './SelectionCard.test-ids';\nimport {\n  StyledSelectionCard,\n  StyledContentContainer,\n  StyledImageContainer,\n  StyledSelectionCardInline,\n  StyledSelectionCardStacked,\n  StyledValueList,\n  StyledHeader,\n  StyledImageCell,\n  StyledContentCell,\n  StyledTileContent,\n  StyledCardFooter,\n  StyledSingleField\n} from './SelectionCard.styles';\nimport type {\n  FieldValueItemPropsOmitName,\n  ImagePlacement,\n  ImageSize,\n  SelectionCardProps,\n  SelectionCardTile\n} from './SelectionCard.types';\nimport SelectionCardActions from './SelectionCardActions';\n\nregisterIcon(pictureIcon);\n\nconst isTileContent = (\n  img: NonNullable<SelectionCardProps['image']>\n): img is SelectionCardTile & { placement?: ImagePlacement; size?: ImageSize } => {\n  return 'foregroundColor' in img;\n};\n\nexport const focusableSelector =\n  'a[href], button, input, textarea, select, details, video[controls], audio[controls]';\n\nconst SingleField = ({\n  id,\n  'data-testid': testId,\n  truncate,\n  value\n}: {\n  id: string;\n  'data-testid'?: string;\n  truncate?: boolean;\n  value: ReactNode;\n}) => {\n  const [el, setEl] = useElement<HTMLDivElement>(null);\n  return (\n    <>\n      <StyledSingleField ref={setEl} id={id} data-testid={testId} truncate={truncate}>\n        {value}\n      </StyledSingleField>\n      {truncate && el && (\n        <Tooltip target={el} smart>\n          {value}\n        </Tooltip>\n      )}\n    </>\n  );\n};\n\nconst useContentHeight = (\n  contentRef: RefObject<HTMLElement>,\n  targetRef: RefObject<HTMLElement>\n) => {\n  useLayoutEffect(() => {\n    if (!contentRef.current || !targetRef.current) return;\n\n    const resizeObserver = new ResizeObserver(() => {\n      requestAnimationFrame(() => {\n        targetRef.current?.style.setProperty(\n          '--content-height',\n          `${contentRef.current?.scrollHeight}px`\n        );\n      });\n    });\n\n    resizeObserver.observe(contentRef.current);\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, []);\n};\n\nconst SelectionCard = forwardRef<\n  RefElement<SelectionCardProps>,\n  PropsWithoutRef<SelectionCardProps>\n>(function SelectionCard(props, ref) {\n  const uid = useUID();\n  const {\n    testId,\n    id = uid,\n    'aria-label': label,\n    heading,\n    disabled = false,\n    readOnly,\n    image,\n    footer,\n    fields = [],\n    onClick,\n    onKeyDown,\n    actions,\n    additionalInfo,\n    ...restProps\n  } = props;\n\n  const t = useI18n();\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 isTile = image !== undefined && isTileContent(image);\n  const tile = isTile ? image : undefined;\n  const resolvedImageSrc = !isTile ? image?.src : undefined;\n  const prevImageSrc = usePrevious(resolvedImageSrc);\n  const testIds = useTestIds(testId, getSelectionCardTestIds);\n  const contentId = `${id}-content`;\n\n  const hasAdditionalContent = fields.length > 0;\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]);\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  useContentHeight(contentRef, containerRef);\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) return undefined;\n\n    const innerContent = tile ? (\n      <StyledTileContent\n        data-tile-content\n        foregroundColor={tile.foregroundColor}\n        backgroundColor={tile.backgroundColor}\n        size={tile.size}\n      >\n        {tile.icon ? <Icon name={tile.icon} /> : tile.text || <Icon name='picture' />}\n      </StyledTileContent>\n    ) : (\n      <Flex\n        container={{ justify: 'center', alignItems: 'center' }}\n        as={StyledImageContainer}\n        placement={image.placement}\n        size={image.size}\n      >\n        {(isBrokenImage && resolvedImageSrc === prevImageSrc) || resolvedImageSrc === 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      </Flex>\n    );\n\n    return (\n      <Flex\n        container={{ justify: 'center', alignItems: 'center' }}\n        as={StyledImageCell}\n        placement={image.placement}\n        size={image.size}\n        isTile={isTile}\n        style={\n          !isTile && image.src && !isBrokenImage ? { '--bg-image': `url(${image.src})` } : undefined\n        }\n      >\n        {innerContent}\n      </Flex>\n    );\n  }, [\n    isBrokenImage,\n    prevImageSrc,\n    image?.placement,\n    image?.size,\n    tile?.icon,\n    tile?.text,\n    tile?.foregroundColor,\n    tile?.backgroundColor\n  ]);\n\n  let asProp: GridProps['as'] = StyledSelectionCard;\n  if (image) {\n    asProp = (image.placement ?? 'inline-start').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      id={id}\n      onClick={onClick}\n      as={asProp}\n      placement={image?.placement}\n      size={image?.size}\n      container={{ cols: '1fr', rows: 'auto' }}\n      disabled={disabled}\n      readOnly={readOnly}\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    >\n      {image && image.placement !== 'inline-end' && imageContent}\n      {/* element needed to get actual content height of the content container */}\n      <StyledContentCell>\n        <Flex\n          as={StyledContentContainer}\n          container={{ direction: 'column', gap: 0.75 }}\n          ref={contentRef}\n        >\n          <Flex as={StyledHeader} container={{ alignItems: 'center', justify: 'between' }}>\n            {isValidElement(heading) ? (\n              cloneElement(heading, {\n                ...{\n                  tabIndex: focusOnInput ? undefined : -1,\n                  additionalInfo,\n                  'data-main-focus': focusOnInput ? true : undefined,\n                  'aria-details': hasAdditionalContent ? contentId : undefined\n                }\n              })\n            ) : (\n              <span\n                data-testid={testIds.label}\n                aria-details={hasAdditionalContent ? contentId : undefined}\n              >\n                {heading}\n              </span>\n            )}\n            {actions && (\n              <SelectionCardActions\n                data-testid={testIds.actions}\n                actions={actions}\n                disabled={disabled}\n                contextualLabel={label}\n              />\n            )}\n          </Flex>\n          {hasAdditionalContent &&\n            (fields.every(field => isFieldValueListItemProps(field)) ? (\n              <FieldValueList id={contentId} data-testid={testIds.content} fields={fields} />\n            ) : (\n              <>\n                {fields.length === 1 ? (\n                  <SingleField\n                    id={contentId}\n                    data-testid={testIds.content}\n                    truncate={fields[0].truncate}\n                    value={fields[0].value}\n                  />\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}>\n                        {field.truncate ? (\n                          <ShowMoreLess lines={3}>{field.value}</ShowMoreLess>\n                        ) : (\n                          field.value\n                        )}\n                      </li>\n                    ))}\n                  </Flex>\n                )}\n              </>\n            ))}\n        </Flex>\n        {footer && <StyledCardFooter>{footer}</StyledCardFooter>}\n      </StyledContentCell>\n      {image?.placement === 'inline-end' && imageContent}\n    </Grid>\n  );\n});\n\nexport default withTestIds(SelectionCard, getSelectionCardTestIds);\n"]}

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

@@ -1,8 +1,13 @@
 import type { ReactNode } from 'react';
-import type { OmitStrict } from '../../types';
+import type { HeadingTag, OmitStrict } from '../../types';
 import type { SelectionCardProps } from './SelectionCard.types';
 export interface SelectionCardDisplayProps extends OmitStrict<SelectionCardProps, 'heading' | 'disabled'> {
     label: NonNullable<ReactNode>;
+    /**
+     * Uses specific heading tag for header.
+     * @default h4
+     */
+    headingTag?: HeadingTag;
 }
 declare const _default: import("react").ForwardRefExoticComponent<Omit<SelectionCardDisplayProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
     getTestIds: (testIdProp?: import("../../types").TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly ["content", "image", "label", "actions"]>;

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

@@ -1 +1 @@
-{"version":3,"file":"SelectionCardDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCardDisplay.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,SAAS,EAAE,MAAM,OAAO,CAAC;AAExD,OAAO,KAAK,EAAE,UAAU,EAAc,MAAM,aAAa,CAAC;AAK1D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAIhE,MAAM,WAAW,yBACf,SAAQ,UAAU,CAAC,kBAAkB,EAAE,SAAS,GAAG,UAAU,CAAC;IAC9D,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CAC/B;;;;AA4BD,wBAA0E"}
+{"version":3,"file":"SelectionCardDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCardDisplay.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,SAAS,EAAE,MAAM,OAAO,CAAC;AAExD,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAc,MAAM,aAAa,CAAC;AAKtE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAIhE,MAAM,WAAW,yBACf,SAAQ,UAAU,CAAC,kBAAkB,EAAE,SAAS,GAAG,UAAU,CAAC;IAC9D,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IAC9B;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;;;;AAmCD,wBAA0E"}

package/lib/components/SelectionCard/SelectionCardDisplay.js

@@ -7,10 +7,10 @@ import { getSelectionCardTestIds } from './SelectionCard.test-ids';
 import SelectionCard from './SelectionCard';
 const SelectionCardDisplay = forwardRef(function SelectionCardDisplay(props, ref) {
     const uid = useUID();
-    const { testId, id = uid, 'aria-label': ariaLabel, label, ...restProps } = props;
+    const { testId, id = uid, 'aria-label': ariaLabel, label, headingTag = 'h4', ...restProps } = props;
     const labelId = `${id}-label`;
     const testIds = useTestIds(testId, getSelectionCardTestIds);
-    return (_jsx(SelectionCard, { ...restProps, testId: testIds, "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : labelId, heading: _jsx(Text, { variant: 'h4', as: 'span', id: labelId, "data-testid": testIds.label, children: label }), ref: ref }));
+    return (_jsx(SelectionCard, { ...restProps, testId: testIds, "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : labelId, heading: _jsx(Text, { variant: headingTag, as: 'span', id: labelId, "data-testid": testIds.label, children: label }), ref: ref }));
 });
 export default withTestIds(SelectionCardDisplay, getSelectionCardTestIds);
 //# sourceMappingURL=SelectionCardDisplay.js.map