@pega/cosmos-react-core 9.0.0-build.9.9 → 9.0.0

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

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

package/lib/components/QRCode/QRCode.d.ts

@@ -1,6 +1,6 @@
 import type { Ref } from 'react';
 import type { BaseProps, ForwardRefForwardPropsComponent } from '../../types';
-export declare const StyledEmptyQRWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledEmptyQRWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export interface QRCodeProps extends BaseProps {
     /** Text that need to be encoded into QR code. */
     value: string;

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

@@ -1 +1 @@
-{"version":3,"file":"QRCode.d.ts","sourceRoot":"","sources":["../../../src/components/QRCode/QRCode.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAIlD,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAO9E,eAAO,MAAM,oBAAoB,yGAQ/B,CAAC;AAIH,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,GAAG,cAAc,CAAC,CAAC;CAC9C;AAED,QAAA,MAAM,MAAM,EAAE,+BAA+B,CAAC,WAAW,CA2CvD,CAAC;AAEH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"QRCode.d.ts","sourceRoot":"","sources":["../../../src/components/QRCode/QRCode.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAIlD,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAO9E,eAAO,MAAM,oBAAoB,6NAQ/B,CAAC;AAIH,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,GAAG,cAAc,CAAC,CAAC;CAC9C;AAED,QAAA,MAAM,MAAM,EAAE,+BAA+B,CAAC,WAAW,CA2CvD,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/lib/components/RadioButton/RadioButton.test-ids.d.ts

@@ -1,3 +1,3 @@
 export declare const getRadioButtonTestIds: (testIdProp?: import("../..").TestIdProp["testId"]) => import("../..").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
-export declare const getRadioButtonCardTestIds: (testIdProp?: import("../..").TestIdProp["testId"]) => import("../..").TestIdsRecord<readonly ["control", "content", "image", "control", "actions"]>;
+export declare const getRadioButtonCardTestIds: (testIdProp?: import("../..").TestIdProp["testId"]) => import("../..").TestIdsRecord<readonly ["control", "content", "image", "label", "actions"]>;
 //# sourceMappingURL=RadioButton.test-ids.d.ts.map

package/lib/components/RadioButton/RadioButton.test-ids.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/RadioButton/RadioButton.test-ids.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,qBAAqB,0LAGvB,CAAC;AAEZ,eAAO,MAAM,yBAAyB,sJAG3B,CAAC"}
+{"version":3,"file":"RadioButton.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/RadioButton/RadioButton.test-ids.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,qBAAqB,0LAGvB,CAAC;AAEZ,eAAO,MAAM,yBAAyB,oJAG3B,CAAC"}

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

@@ -1,9 +1,17 @@
-import type { OmitStrict } from '../../types';
+import type { ReactNode } from 'react';
+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'>;
+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", "control", "actions"]>;
+    getTestIds: (testIdProp?: import("../../types").TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly ["control", "content", "image", "label", "actions"]>;
 };
 export default _default;
 //# sourceMappingURL=RadioButtonCard.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"RadioButtonCard.d.ts","sourceRoot":"","sources":["../../../src/components/RadioButton/RadioButtonCard.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAc,MAAM,aAAa,CAAC;AAK1D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAG/E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAiCtD,MAAM,MAAM,oBAAoB,GAAG,UAAU,CAAC,kBAAkB,EAAE,SAAS,CAAC,GAC1E,UAAU,CAAC,gBAAgB,EAAE,OAAO,GAAG,SAAS,CAAC,CAAC;;;;AAsFpD,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

@@ -1,37 +1,20 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useRef } from 'react';
-import styled, { css } from 'styled-components';
-import { defaultThemeProp } from '../../theme';
-import SelectionCard, { focusableSelector } from '../SelectionCard/SelectionCard';
-import Text from '../Text';
 import { useConsolidatedRef, useTestIds, useUID } from '../../hooks';
 import { getActiveElement, withTestIds } from '../../utils';
+import SelectionCard, { focusableSelector } from '../SelectionCard/SelectionCard';
+import Text from '../Text';
 import RadioButton from './RadioButton';
 import { getRadioButtonCardTestIds } from './RadioButton.test-ids';
-const StyledSelectionCard = styled.div(({ disabled, readOnly, theme: { components: { 'form-control': { ':hover': { 'border-color': hoverBorderColor } } } } }) => {
-    return css `
-      ${!disabled &&
-        css `
-        cursor: pointer;
-      `}
-
-      ${!(disabled || readOnly) &&
-        css `
-        :hover:not(:focus-within) {
-          border-color: ${hoverBorderColor};
-        }
-      `}
-    `;
-});
-StyledSelectionCard.defaultProps = defaultThemeProp;
 const RadioButtonCard = forwardRef(function RadioButtonCard(prop, ref) {
     const uid = useUID();
-    const { testId, id = uid, label, 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(StyledSelectionCard, { ...restProps, id: cardId, as: SelectionCard, testId: testIds, label: label, heading: _jsx(RadioButton, { testId: testIds.root, onChange: onChange, onClick: onClick, status: status, checked: checked, value: value, id: id, disabled: disabled, readOnly: readOnly, label: _jsx(Text, { variant: 'h4', as: 'span', 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 { PropsWithoutRef, MouseEvent, KeyboardEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport type { OmitStrict, RefElement } from '../../types';\nimport SelectionCard, { focusableSelector } from '../SelectionCard/SelectionCard';\nimport Text from '../Text';\nimport { useConsolidatedRef, useTestIds, useUID } from '../../hooks';\nimport { getActiveElement, withTestIds } from '../../utils';\nimport type { SelectionCardProps } from '../SelectionCard/SelectionCard.types';\n\nimport RadioButton from './RadioButton';\nimport type { RadioButtonProps } from './RadioButton';\nimport { getRadioButtonCardTestIds } from './RadioButton.test-ids';\n\nconst StyledSelectionCard = styled.div<Pick<RadioButtonProps, 'disabled' | 'readOnly'>>(\n  ({\n    disabled,\n    readOnly,\n    theme: {\n      components: {\n        'form-control': {\n          ':hover': { 'border-color': hoverBorderColor }\n        }\n      }\n    }\n  }) => {\n    return css`\n      ${!disabled &&\n      css`\n        cursor: pointer;\n      `}\n\n      ${!(disabled || readOnly) &&\n      css`\n        :hover:not(:focus-within) {\n          border-color: ${hoverBorderColor};\n        }\n      `}\n    `;\n  }\n);\n\nStyledSelectionCard.defaultProps = defaultThemeProp;\n\nexport type RadioButtonCardProps = OmitStrict<SelectionCardProps, 'heading'> &\n  OmitStrict<RadioButtonProps, 'label' | 'variant'>;\n\nconst RadioButtonCard = forwardRef<\n  RefElement<RadioButtonProps>,\n  PropsWithoutRef<RadioButtonCardProps>\n>(function RadioButtonCard(prop, ref) {\n  const uid = useUID();\n  const {\n    testId,\n    id = uid,\n    label,\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\n  const testIds = useTestIds(testId, getRadioButtonCardTestIds);\n  const inputRef = useConsolidatedRef(ref);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  return (\n    <StyledSelectionCard\n      {...restProps}\n      id={cardId}\n      as={SelectionCard}\n      testId={testIds}\n      label={label}\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          label={\n            <Text variant='h4' as='span'>\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/RadioButtonGroup/RadioButtonGroup.d.ts

@@ -0,0 +1,7 @@
+import type { RadioCheckGroupProps } from '../RadioCheckGroup';
+export type RadioButtonGroupProps = Omit<RadioCheckGroupProps, 'arrowNavigation'>;
+declare const _default: import("react").ForwardRefExoticComponent<Omit<RadioButtonGroupProps, "ref"> & import("react").RefAttributes<HTMLElement>> & {
+    getTestIds: (testIdProp?: import("../../types").TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly ["label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
+};
+export default _default;
+//# sourceMappingURL=RadioButtonGroup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButtonGroup.d.ts","sourceRoot":"","sources":["../../../src/components/RadioButtonGroup/RadioButtonGroup.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAK/D,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,oBAAoB,EAAE,iBAAiB,CAAC,CAAC;;;;AASlF,wBAAwE"}

package/lib/components/RadioButtonGroup/RadioButtonGroup.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { withTestIds } from '../../utils';
+import RadioCheckGroup from '../RadioCheckGroup';
+import { getRadioCheckGroupTestIds } from '../RadioCheckGroup/RadioCheckGroup.test-ids';
+const RadioButtonGroup = forwardRef(function RadioButtonGroup(props, ref) {
+    return _jsx(RadioCheckGroup, { ...props, ref: ref, arrowNavigation: true });
+});
+export default withTestIds(RadioButtonGroup, getRadioCheckGroupTestIds);
+//# sourceMappingURL=RadioButtonGroup.js.map

package/lib/components/RadioButtonGroup/RadioButtonGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButtonGroup.js","sourceRoot":"","sources":["../../../src/components/RadioButtonGroup/RadioButtonGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAInC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,eAAe,MAAM,oBAAoB,CAAC;AAEjD,OAAO,EAAE,yBAAyB,EAAE,MAAM,6CAA6C,CAAC;AAMxF,MAAM,gBAAgB,GAAG,UAAU,CAGjC,SAAS,gBAAgB,CAAC,KAAK,EAAE,GAAG;IACpC,OAAO,KAAC,eAAe,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,eAAe,SAAG,CAAC;AAClE,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC,gBAAgB,EAAE,yBAAyB,CAAC,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport type { RefElement } from '../../types';\nimport { withTestIds } from '../../utils';\nimport RadioCheckGroup from '../RadioCheckGroup';\nimport type { RadioCheckGroupProps } from '../RadioCheckGroup';\nimport { getRadioCheckGroupTestIds } from '../RadioCheckGroup/RadioCheckGroup.test-ids';\n\n// Using Omit instead of OmitStrict as workaround for downstream consumers without inert type augmentation.\n// eslint-disable-next-line @typescript-eslint/ban-types\nexport type RadioButtonGroupProps = Omit<RadioCheckGroupProps, 'arrowNavigation'>;\n\nconst RadioButtonGroup = forwardRef<\n  RefElement<RadioButtonGroupProps>,\n  PropsWithoutRef<RadioButtonGroupProps>\n>(function RadioButtonGroup(props, ref) {\n  return <RadioCheckGroup {...props} ref={ref} arrowNavigation />;\n});\n\nexport default withTestIds(RadioButtonGroup, getRadioCheckGroupTestIds);\n"]}

package/lib/components/RadioButtonGroup/index.d.ts

@@ -1,2 +1,3 @@
-export { default } from '../RadioCheckGroup';
+export { default } from './RadioButtonGroup';
+export type { RadioButtonGroupProps } from './RadioButtonGroup';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/RadioButtonGroup/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/RadioButtonGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/RadioButtonGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC"}

package/lib/components/RadioButtonGroup/index.js

@@ -1,2 +1,2 @@
-export { default } from '../RadioCheckGroup';
+export { default } from './RadioButtonGroup';
 //# sourceMappingURL=index.js.map

package/lib/components/RadioButtonGroup/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/RadioButtonGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC","sourcesContent":["export { default } from '../RadioCheckGroup';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/RadioButtonGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC","sourcesContent":["export { default } from './RadioButtonGroup';\nexport type { RadioButtonGroupProps } from './RadioButtonGroup';\n"]}

package/lib/components/RadioCheck/RadioCheck.d.ts

@@ -1,4 +1,5 @@
 import type { ChangeEventHandler } from 'react';
+import type { FormFieldProps } from '../FormField';
 import type { FormControlProps } from '../FormControl';
 import type { NoChildrenProp, WithAttributes, TestIdProp } from '../../types';
 import type { elements } from '../FormField/FormField.test-ids';
@@ -31,11 +32,15 @@ export type RadioCheckProps = WithAttributes<'input', NoChildrenProp & TestIdPro
     onChange?: ChangeEventHandler<HTMLInputElement>;
     /** Pass a string used as input's aria-describedby. */
     ariaDescribedby?: string;
+    /** Suppresses announcements for status changes. */
+    suppressAnnouncements?: FormFieldProps['suppressAnnouncements'];
 }>;
-export declare const StyledPseudoRadioCheck: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<RadioCheckProps, "readOnly" | "status">, never>;
-export declare const StyledRadioCheckInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledRadioCheck: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<RadioCheckProps, "disabled" | "readOnly">, never>;
-export declare const StyledRadioCheckCard: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, Pick<RadioCheckProps, "disabled" | "readOnly" | "status">, never>;
+export declare const StyledPseudoRadioCheck: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<RadioCheckProps, "readOnly" | "status"> & {
+    $labelEmpty?: boolean;
+}>> & string;
+export declare const StyledRadioCheckInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
+export declare const StyledRadioCheck: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<RadioCheckProps, "disabled" | "readOnly">>> & string;
+export declare const StyledRadioCheckCard: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, Pick<RadioCheckProps, "disabled" | "readOnly" | "status">>> & string;
 declare const _default: import("react").ForwardRefExoticComponent<Omit<RadioCheckProps, "ref"> & import("react").RefAttributes<HTMLInputElement>> & {
     getTestIds: (testIdProp?: TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"RadioCheck.d.ts","sourceRoot":"","sources":["../../../src/components/RadioCheck/RadioCheck.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAA8C,kBAAkB,EAAE,MAAM,OAAO,CAAC;AAM5F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGvD,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAc,UAAU,EAAE,MAAM,aAAa,CAAC;AAK1F,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAIhE,MAAM,MAAM,eAAe,GAAG,cAAc,CAC1C,OAAO,EACP,cAAc,GACZ,UAAU,CAAC,OAAO,QAAQ,CAAC,GAAG;IAC5B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,8BAA8B;IAC9B,IAAI,EAAE,OAAO,GAAG,UAAU,CAAC;IAC3B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,yEAAyE;IACzE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oEAAoE;IACpE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC5B,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,iDAAiD;IACjD,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,sEAAsE;IACtE,QAAQ,CAAC,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IAChD,sDAAsD;IACtD,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CACJ,CAAC;AAEF,eAAO,MAAM,sBAAsB,mJA6ClC,CAAC;AAIF,eAAO,MAAM,qBAAqB,2GAuGhC,CAAC;AAIH,eAAO,MAAM,gBAAgB,qJAkD5B,CAAC;AAIF,eAAO,MAAM,oBAAoB,kKA+DhC,CAAC;;;;AAyGF,wBAA6D"}
+{"version":3,"file":"RadioCheck.d.ts","sourceRoot":"","sources":["../../../src/components/RadioCheck/RadioCheck.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAA8C,kBAAkB,EAAE,MAAM,OAAO,CAAC;AAK5F,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGvD,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAc,UAAU,EAAE,MAAM,aAAa,CAAC;AAK1F,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAIhE,MAAM,MAAM,eAAe,GAAG,cAAc,CAC1C,OAAO,EACP,cAAc,GACZ,UAAU,CAAC,OAAO,QAAQ,CAAC,GAAG;IAC5B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,8BAA8B;IAC9B,IAAI,EAAE,OAAO,GAAG,UAAU,CAAC;IAC3B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,yEAAyE;IACzE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oEAAoE;IACpE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC5B,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,iDAAiD;IACjD,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,sEAAsE;IACtE,QAAQ,CAAC,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IAChD,sDAAsD;IACtD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mDAAmD;IACnD,qBAAqB,CAAC,EAAE,cAAc,CAAC,uBAAuB,CAAC,CAAC;CACjE,CACJ,CAAC;AAEF,eAAO,MAAM,sBAAsB;kBAC8B,OAAO;YAuCtE,CAAC;AAIH,eAAO,MAAM,qBAAqB,sOAuGhC,CAAC;AAIH,eAAO,MAAM,gBAAgB,mRA8C5B,CAAC;AAIF,eAAO,MAAM,oBAAoB,uSAyD/B,CAAC;;;;AAuIH,wBAA6D"}

package/lib/components/RadioCheck/RadioCheck.js

@@ -5,43 +5,43 @@ import { hideVisually } from 'polished';
 import FormField, { StyledFormFieldInfo } from '../FormField';
 import { StyledFormControl } from '../FormControl';
 import { defaultThemeProp } from '../../theme';
-import { createClassName, tryCatch, withTestIds } from '../../utils';
+import { createClassName, getActiveElement, tryCatch, withTestIds } from '../../utils';
 import { useConsolidatedRef, useDirection, useI18n, useTestIds, useUID } from '../../hooks';
 import { StyledLabel } from '../Label';
-import { calculateFontSize, readableColor } from '../../styles';
+import { calculateFontSize, readableColor, getReadableStatusColor } from '../../styles';
 import HiddenText from '../HiddenText';
 import { getRadioCheckTestIds } from './RadioCheck.test-ids';
-export const StyledPseudoRadioCheck = styled.div(props => {
-    const { theme: { base: { spacing }, components: { 'form-field': formField, 'radio-check': { size, 'touch-size': touchSize, 'background-color': backgroundColor, 'border-color': borderColor, 'border-width': borderWidth } } }, status } = props;
+export const StyledPseudoRadioCheck = styled.div(({ theme, status, $labelEmpty }) => {
+    const { components: { 'radio-check': { size, 'touch-size': touchSize, 'background-color': backgroundColor, 'border-color': borderColor, 'border-width': borderWidth } } } = theme;
     let statusBorderColor = borderColor;
     if (status === 'error' || status === 'warning') {
-        statusBorderColor = formField[status]['status-color'];
+        statusBorderColor = getReadableStatusColor(theme, status);
     }
     return css `
-      display: flex;
-      flex-shrink: 0;
-      position: relative;
-      width: ${size};
-      height: ${size};
-      margin-inline-end: calc(0.5 * ${spacing});
-      border: ${borderWidth} solid ${statusBorderColor};
-      background-color: ${backgroundColor};
+    display: flex;
+    flex-shrink: 0;
+    position: relative;
+    width: ${size};
+    height: ${size};
+    margin-inline-end: ${$labelEmpty ? '0' : '1ch'};
+    border: ${borderWidth} solid ${statusBorderColor};
+    background-color: ${backgroundColor};
 
-      @media (pointer: coarse) {
-        width: ${touchSize};
-        height: ${touchSize};
-      }
+    @media (pointer: coarse) {
+      width: ${touchSize};
+      height: ${touchSize};
+    }
 
-      &::after {
-        content: '';
-        display: none;
-      }
-    `;
+    &::after {
+      content: '';
+      display: none;
+    }
+  `;
 });
 StyledPseudoRadioCheck.defaultProps = defaultThemeProp;
-export const StyledRadioCheckInput = styled.input(props => {
-    const { disabled, theme: { base: { 'border-radius': baseBorderRadius }, components: { 'form-control': { ':focus': { 'box-shadow': shadow, 'border-color': focusBorderColor }, ':read-only': { 'background-color': readOnlyBackgroundColor } }, 'radio-check': { size, ':checked': { 'background-color': checkedBackgroundColor, 'border-color': checkedBorderColor } }, checkbox: { 'border-radius': checkRadius }, 'radio-button': { 'border-radius': radioRadius } } } } = props;
-    const backgroundColor = props.readOnly ? readOnlyBackgroundColor : checkedBackgroundColor;
+export const StyledRadioCheckInput = styled.input(({ theme, disabled, readOnly }) => {
+    const { base: { 'border-radius': baseBorderRadius }, components: { 'form-control': { ':focus': { 'box-shadow': shadow, 'border-color': focusBorderColor }, ':read-only': { 'background-color': readOnlyBackgroundColor } }, 'radio-check': { size, ':checked': { 'background-color': checkedBackgroundColor, 'border-color': checkedBorderColor } }, checkbox: { 'border-radius': checkRadius }, 'radio-button': { 'border-radius': radioRadius } } } = theme;
+    const backgroundColor = readOnly ? readOnlyBackgroundColor : checkedBackgroundColor;
     const foreground = tryCatch(() => readableColor(backgroundColor));
     const prcSelector = `+ ${StyledLabel} ${StyledPseudoRadioCheck}`;
     const { ltr } = useDirection();
@@ -68,7 +68,7 @@ export const StyledRadioCheckInput = styled.input(props => {
       ${prcSelector},
       &[type='checkbox']:indeterminate:disabled
       ${prcSelector} {
-      border-color: ${props.readOnly ? 'inherit' : checkedBorderColor};
+      border-color: ${readOnly ? 'inherit' : checkedBorderColor};
       background-color: ${backgroundColor};
 
       &::after {
@@ -81,11 +81,14 @@ export const StyledRadioCheckInput = styled.input(props => {
     }
 
     &[type='radio'] ${prcSelector}::after {
+      content: '';
+      position: absolute;
+      inset: 0;
       margin: auto;
-      width: 100%;
-      height: 100%;
-      background-color: ${foreground};
-      transform: scale(0.4);
+      width: calc(${size} * 0.3);
+      height: calc(${size} * 0.3);
+      border-radius: ${radioRadius};
+      border: calc(${size} * 0.2) solid ${foreground};
     }
 
     &[type='checkbox'] ${prcSelector} {
@@ -121,8 +124,8 @@ export const StyledRadioCheckInput = styled.input(props => {
   `;
 });
 StyledRadioCheckInput.defaultProps = defaultThemeProp;
-export const StyledRadioCheck = styled.div(props => {
-    const { disabled, readOnly, theme: { base, components: { 'radio-check': { label: { color: labelColor, 'font-weight': labelFontWeight } }, 'form-control': { ':hover': { 'border-color': hoverBorderColor } } } } } = props;
+export const StyledRadioCheck = styled.div(({ theme, disabled, readOnly }) => {
+    const { base, components: { 'radio-check': { label: { color: labelColor, 'font-weight': labelFontWeight } }, 'form-control': { ':hover': { 'border-color': hoverBorderColor } } } } = theme;
     const fontSize = calculateFontSize(base['font-size'], base['font-scale']);
     return css `
       > ${StyledLabel} {
@@ -155,67 +158,86 @@ export const StyledRadioCheck = styled.div(props => {
     `;
 });
 StyledRadioCheck.defaultProps = defaultThemeProp;
-export const StyledRadioCheckCard = styled.label(({ disabled, readOnly, status, theme: { base: { palette, shadow, spacing }, components: { card, 'form-field': formField, 'radio-check': { label }, 'form-control': { ':hover': { 'border-color': hoverBorderColor } } } } }) => {
-    const useBorderColor = status === 'error' ? formField.error['status-color'] : palette['border-line'];
+export const StyledRadioCheckCard = styled.label(({ theme, disabled, readOnly, status }) => {
+    const { base: { palette, shadow, spacing }, components: { card, 'radio-check': { label }, 'form-control': { ':hover': { 'border-color': hoverBorderColor } } } } = theme;
+    const useBorderColor = status === 'error' ? getReadableStatusColor(theme, 'error') : palette['border-line'];
     return css `
-      min-width: min-content;
-      cursor: pointer;
-      background-color: ${card.background};
-      border-radius: ${card['border-radius']};
-      border: 0.0625rem solid ${useBorderColor};
-      padding: ${spacing};
-
-      ${disabled &&
+    min-width: min-content;
+    cursor: pointer;
+    background-color: ${card.background};
+    border-radius: ${card['border-radius']};
+    border: 0.0625rem solid ${useBorderColor};
+    padding: ${spacing};
+
+    ${disabled &&
         css `
-        cursor: not-allowed;
-      `}
-      ${!(disabled || readOnly) &&
+      cursor: not-allowed;
+    `}
+    ${!(disabled || readOnly) &&
         css `
-        :hover:not(:focus-within) {
-          border-color: ${hoverBorderColor};
-
-          ${StyledLabel} ${StyledPseudoRadioCheck} {
-            border-color: ${hoverBorderColor};
-          }
-        }
+      :hover:not(:focus-within) {
+        border-color: ${hoverBorderColor};
 
-        :focus-within {
-          box-shadow: ${shadow.focus};
-          border-color: transparent;
+        ${StyledLabel} ${StyledPseudoRadioCheck} {
+          border-color: ${hoverBorderColor};
         }
-      `}
-        > ${StyledLabel} {
-        display: flex;
-        align-items: center;
-        color: ${label.color};
-        font-weight: ${label['font-weight']};
-        margin: 0;
       }
 
-      > ${StyledFormFieldInfo} {
-        margin: 0;
-        padding-inline-start: calc(${spacing} / 4);
+      :focus-within {
+        box-shadow: ${shadow.focus};
+        border-color: transparent;
       }
-    `;
+    `}
+        > ${StyledLabel} {
+      display: flex;
+      align-items: center;
+      color: ${label.color};
+      font-weight: ${label['font-weight']};
+      margin: 0;
+    }
+
+    > ${StyledFormFieldInfo} {
+      margin: 0;
+      padding-inline-start: calc(${spacing} / 4);
+    }
+  `;
 });
 StyledRadioCheckCard.defaultProps = defaultThemeProp;
 const RadioCheck = forwardRef(function RadioCheck(props, ref) {
     const uid = useUID();
     const t = useI18n();
-    const { testId, type, id = uid, label, required = false, disabled = false, readOnly = false, indeterminate = false, checked, defaultChecked, variant = 'simple', onClick, onKeyDown, onChange, status, info, additionalInfo, ariaDescribedby, className, ...restProps } = props;
+    const { testId, type, id = uid, label, 'aria-labelledby': ariaLabelledBy, required = false, disabled = false, readOnly = false, indeterminate = false, checked, defaultChecked, variant = 'simple', onClick, onKeyDown, onChange, status, info, additionalInfo, ariaDescribedby, suppressAnnouncements, className, ...restProps } = props;
     const testIds = useTestIds(testId, getRadioCheckTestIds);
     const isRadio = type === 'radio';
     const card = variant === 'card';
-    const newRef = useConsolidatedRef(ref);
+    const inputRef = useConsolidatedRef(ref);
     const readonlyDescId = useUID();
     useEffect(() => {
-        if (!isRadio && newRef.current)
-            newRef.current.indeterminate = !!indeterminate;
-    }, [newRef, indeterminate, isRadio]);
-    return (_jsx(FormField, { testId: testIds, as: card ? StyledRadioCheckCard : StyledRadioCheck, label: _jsxs(_Fragment, { children: [_jsx(StyledPseudoRadioCheck, { status: status, isRadio: isRadio, as: StyledFormControl, required: required, disabled: disabled, readOnly: readOnly, onMouseDown: (e) => e.preventDefault() }), label, readOnly && _jsx(HiddenText, { id: readonlyDescId, children: t('read_only') })] }), labelAs: card ? 'div' : undefined, id: id, required: required, disabled: disabled, readOnly: readOnly, status: status, info: info, isRadioCheck: true, inline: true, labelAfter: true, additionalInfo: additionalInfo, children: _jsx(StyledRadioCheckInput, { "data-testid": testIds.control, ...restProps, className: createClassName('radio-check', className, {
+        if (!isRadio && inputRef.current)
+            inputRef.current.indeterminate = !!indeterminate;
+    }, [inputRef, indeterminate, isRadio]);
+    // Prevents blur when a user mouse clicks the label to select an input that is actively focused.
+    useEffect(() => {
+        if (!inputRef.current)
+            return;
+        const labelEl = inputRef.current.nextSibling;
+        if (labelEl?.nodeName.toUpperCase() !== 'LABEL')
+            return;
+        const ac = new AbortController();
+        labelEl.addEventListener('mousedown', e => {
+            if (inputRef.current === getActiveElement()) {
+                e.preventDefault();
+            }
+        }, { signal: ac.signal });
+        return () => {
+            ac.abort();
+        };
+    }, []);
+    const labelEmpty = label === null || label === undefined || label === '';
+    return (_jsx(FormField, { testId: testIds, as: card ? StyledRadioCheckCard : StyledRadioCheck, label: _jsxs(_Fragment, { children: [_jsx(StyledPseudoRadioCheck, { status: status, as: StyledFormControl, required: required, disabled: disabled, readOnly: readOnly, "$labelEmpty": labelEmpty }), label, readOnly && _jsx(HiddenText, { id: readonlyDescId, children: t('read_only') })] }), labelAs: card || ariaLabelledBy ? 'div' : undefined, id: id, required: required, disabled: disabled, readOnly: readOnly, status: status, info: info, isRadioCheck: true, inline: true, labelAfter: true, additionalInfo: additionalInfo, suppressAnnouncements: suppressAnnouncements, children: _jsx(StyledRadioCheckInput, { "data-testid": testIds.control, ...restProps, className: createClassName('radio-check', className, {
                 variant,
-                status
-            }), id: id, type: type, required: required, checked: checked, defaultChecked: defaultChecked, "aria-describedby": readOnly ? `${ariaDescribedby} ${readonlyDescId}` : ariaDescribedby, disabled: disabled, readOnly: readOnly, onChange: onChange, onClick: (e) => {
+                type
+            }), id: id, "aria-labelledby": ariaLabelledBy, type: type, required: required, checked: checked, defaultChecked: defaultChecked, "aria-describedby": readOnly ? `${ariaDescribedby} ${readonlyDescId}` : ariaDescribedby, disabled: disabled, readOnly: readOnly, onChange: onChange, onClick: (e) => {
                 if (readOnly)
                     e.preventDefault();
                 onClick?.(e);
@@ -225,7 +247,7 @@ const RadioCheck = forwardRef(function RadioCheck(props, ref) {
                 if (type === 'radio' && readOnly && e.key.includes('Arrow'))
                     e.preventDefault();
                 onKeyDown?.(e);
-            }, ref: newRef }) }));
+            }, ref: inputRef }) }));
 });
 export default withTestIds(RadioCheck, getRadioCheckTestIds);
 //# sourceMappingURL=RadioCheck.js.map