@pega/cosmos-react-core 8.0.0-build.3.2 → 8.0.0-build.30.0

package/lib/components/RadioCheckCard/RadioCheckCard.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef, useState, useMemo, useLayoutEffect } from 'react';
+import { FieldValueList, Flex, Actions, Icon, StyledImage, Text, Grid, RadioCheck } from '@pega/cosmos-react-core';
+import * as pictureIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/picture.icon';
+import { debounce, getFocusables, withTestIds } from '../../utils';
+import { registerIcon } from '../Icon';
+import { useConsolidatedRef, useI18n, usePrevious, useTestIds, useUID } from '../../hooks';
+import { getRadioCheckCardTestIds } from './RadioCheckCard.test-ids';
+import { StyledRadioCheckCard, StyledContentContainer, StyledImageContainer, StyledRadioCheckCardInline, StyledRadioCheckCardStacked, StyledValueList } from './RadioCheckCard.styles';
+registerIcon(pictureIcon);
+const useContentHeight = (ref) => {
+    const [height, setHeight] = useState();
+    useLayoutEffect(() => {
+        if (!ref.current)
+            return;
+        const resizeObserver = new ResizeObserver(debounce(() => {
+            setHeight(ref.current?.scrollHeight);
+        }, 100));
+        resizeObserver.observe(ref.current);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [ref.current]);
+    return height;
+};
+const RadioCheckCard = forwardRef(function RadioCheckCard(props, ref) {
+    const uid = useUID();
+    const t = useI18n();
+    const { testId, id = uid, label, type, disabled = false, readOnly = false, image, status, fields = [], actions, ...restProps } = props;
+    const containerRef = useRef(null);
+    const contentRef = useRef(null);
+    const inputRef = useConsolidatedRef(ref);
+    const [isBrokenImage, setIsBrokenImage] = useState(false);
+    const prevImageSrc = usePrevious(image?.src);
+    const testIds = useTestIds(testId, getRadioCheckCardTestIds);
+    const contentId = useUID();
+    const imageContent = useMemo(() => {
+        if (image?.src) {
+            const imagery = isBrokenImage && image.src === prevImageSrc ? (_jsx(Icon, { name: 'picture', "aria-label": t('image_load_error') })) : (_jsx(StyledImage, { "data-testid": testIds.image, ...image, onError: () => setIsBrokenImage(true), onLoad: () => setIsBrokenImage(false) }));
+            return (_jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledImageContainer, placement: image.placement, size: image.size, children: imagery }));
+        }
+    }, [isBrokenImage, image?.src, prevImageSrc, image?.placement, image?.size]);
+    let asProp = StyledRadioCheckCard;
+    if (image) {
+        asProp = image.placement?.startsWith('inline')
+            ? StyledRadioCheckCardInline
+            : StyledRadioCheckCardStacked;
+    }
+    const contentHeight = useContentHeight(contentRef);
+    return (_jsxs(Grid, { "data-testid": testIds.root, onClick: (e) => {
+            const target = e.target;
+            if (readOnly || !containerRef.current?.contains(target))
+                return;
+            const focusables = getFocusables(containerRef);
+            if (focusables.includes(target))
+                return;
+            e.preventDefault();
+            inputRef.current?.focus();
+            inputRef.current?.click();
+        }, as: asProp, placement: image?.placement, size: image?.size, container: { cols: '1fr', rows: 'auto' }, disabled: disabled, readOnly: readOnly, status: status, role: 'group', "aria-label": label, ref: containerRef, style: { '--content-height': `${contentHeight}px` }, children: [image && image.placement !== 'inline-end' && imageContent, _jsx("div", { children: _jsxs(Flex, { as: StyledContentContainer, container: { wrap: 'wrap', alignContent: 'start', justify: 'between' }, ref: contentRef, children: [_jsx(RadioCheck, { testId: testIds.root, ...restProps, id: id, type: type, disabled: disabled, readOnly: readOnly, label: _jsx(Text, { variant: 'h4', as: 'span', children: label }), variant: 'simple', "aria-details": contentId, ref: inputRef }), actions && (_jsx(Actions, { "data-testid": testIds.actions, items: actions, menuAt: 1, disabled: disabled, contextualLabel: label })), fields.length > 0 &&
+                            (fields.every(field => 'name' in field) ? (_jsx(FieldValueList, { id: contentId, "data-testid": testIds.content, fields: fields })) : (_jsx(Flex, { container: { direction: 'column', gap: 1 }, as: StyledValueList, id: contentId, "data-testid": testIds.content, children: fields.map(field => (_jsx("li", { children: field.value }, field.id))) })))] }) }), image?.placement === 'inline-end' && imageContent] }));
+});
+export default withTestIds(RadioCheckCard, getRadioCheckCardTestIds);
+//# sourceMappingURL=RadioCheckCard.js.map

package/lib/components/RadioCheckCard/RadioCheckCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioCheckCard.js","sourceRoot":"","sources":["../../../src/components/RadioCheckCard/RadioCheckCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useRef, useState, useMemo, useLayoutEffect } from 'react';\nimport type { MouseEvent, PropsWithoutRef, RefObject } from 'react';\n\nimport {\n  FieldValueList,\n  Flex,\n  Actions,\n  Icon,\n  StyledImage,\n  Text,\n  Grid,\n  RadioCheck\n} from '@pega/cosmos-react-core';\nimport type { GridProps } from '@pega/cosmos-react-core';\nimport * as pictureIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/picture.icon';\n\nimport { debounce, getFocusables, withTestIds } from '../../utils';\nimport { registerIcon } from '../Icon';\nimport type { RefElement } from '../../types';\nimport { useConsolidatedRef, useI18n, usePrevious, useTestIds, useUID } from '../../hooks';\n\nimport { getRadioCheckCardTestIds } from './RadioCheckCard.test-ids';\nimport {\n  StyledRadioCheckCard,\n  StyledContentContainer,\n  StyledImageContainer,\n  StyledRadioCheckCardInline,\n  StyledRadioCheckCardStacked,\n  StyledValueList\n} from './RadioCheckCard.styles';\nimport type { RadioCheckCardProps } from './RadioCheckCard.types';\n\nregisterIcon(pictureIcon);\n\nconst useContentHeight = (ref: RefObject<HTMLElement>) => {\n  const [height, setHeight] = useState<number | undefined>();\n\n  useLayoutEffect(() => {\n    if (!ref.current) return;\n\n    const resizeObserver = new ResizeObserver(\n      debounce(() => {\n        setHeight(ref.current?.scrollHeight);\n      }, 100)\n    );\n\n    resizeObserver.observe(ref.current);\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [ref.current]);\n\n  return height;\n};\n\nconst RadioCheckCard = forwardRef<\n  RefElement<RadioCheckCardProps>,\n  PropsWithoutRef<RadioCheckCardProps>\n>(function RadioCheckCard(props, ref) {\n  const uid = useUID();\n  const t = useI18n();\n\n  const {\n    testId,\n    id = uid,\n    label,\n    type,\n    disabled = false,\n    readOnly = false,\n    image,\n    status,\n    fields = [],\n    actions,\n    ...restProps\n  } = props;\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const inputRef = useConsolidatedRef(ref);\n  const [isBrokenImage, setIsBrokenImage] = useState(false);\n  const prevImageSrc = usePrevious(image?.src);\n  const testIds = useTestIds(testId, getRadioCheckCardTestIds);\n  const contentId = useUID();\n\n  const imageContent = useMemo(() => {\n    if (image?.src) {\n      const imagery =\n        isBrokenImage && image.src === prevImageSrc ? (\n          <Icon name='picture' aria-label={t('image_load_error')} />\n        ) : (\n          <StyledImage\n            data-testid={testIds.image}\n            {...image}\n            onError={() => setIsBrokenImage(true)}\n            onLoad={() => setIsBrokenImage(false)}\n          />\n        );\n      return (\n        <Flex\n          container={{ justify: 'center', alignItems: 'center' }}\n          as={StyledImageContainer}\n          placement={image.placement}\n          size={image.size}\n        >\n          {imagery}\n        </Flex>\n      );\n    }\n  }, [isBrokenImage, image?.src, prevImageSrc, image?.placement, image?.size]);\n\n  let asProp: GridProps['as'] = StyledRadioCheckCard;\n  if (image) {\n    asProp = image.placement?.startsWith('inline')\n      ? StyledRadioCheckCardInline\n      : StyledRadioCheckCardStacked;\n  }\n\n  const contentHeight = useContentHeight(contentRef);\n\n  return (\n    <Grid\n      data-testid={testIds.root}\n      onClick={(e: MouseEvent<HTMLDivElement>) => {\n        const target = e.target as HTMLElement;\n        if (readOnly || !containerRef.current?.contains(target)) return;\n        const focusables = getFocusables(containerRef);\n        if (focusables.includes(target)) return;\n        e.preventDefault();\n        inputRef.current?.focus();\n        inputRef.current?.click();\n      }}\n      as={asProp}\n      placement={image?.placement}\n      size={image?.size}\n      container={{ cols: '1fr', rows: 'auto' }}\n      disabled={disabled}\n      readOnly={readOnly}\n      status={status}\n      role='group'\n      aria-label={label}\n      ref={containerRef}\n      style={{ '--content-height': `${contentHeight}px` }}\n    >\n      {image && image.placement !== 'inline-end' && imageContent}\n      <div>\n        <Flex\n          as={StyledContentContainer}\n          container={{ wrap: 'wrap', alignContent: 'start', justify: 'between' }}\n          ref={contentRef}\n        >\n          <RadioCheck\n            testId={testIds.root}\n            {...restProps}\n            id={id}\n            type={type}\n            disabled={disabled}\n            readOnly={readOnly}\n            label={\n              <Text variant='h4' as='span'>\n                {label}\n              </Text>\n            }\n            variant='simple'\n            aria-details={contentId}\n            ref={inputRef}\n          />\n          {actions && (\n            <Actions\n              data-testid={testIds.actions}\n              items={actions}\n              menuAt={1}\n              disabled={disabled}\n              contextualLabel={label}\n            />\n          )}\n          {fields.length > 0 &&\n            (fields.every(field => 'name' in field) ? (\n              <FieldValueList id={contentId} data-testid={testIds.content} fields={fields} />\n            ) : (\n              <Flex\n                container={{ direction: 'column', gap: 1 }}\n                as={StyledValueList}\n                id={contentId}\n                data-testid={testIds.content}\n              >\n                {fields.map(field => (\n                  <li key={field.id}>{field.value}</li>\n                ))}\n              </Flex>\n            ))}\n        </Flex>\n      </div>\n      {image?.placement === 'inline-end' && imageContent}\n    </Grid>\n  );\n});\n\nexport default withTestIds(RadioCheckCard, getRadioCheckCardTestIds);\n"]}

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

@@ -0,0 +1,17 @@
+import { type ExcludeStrict } from '@pega/cosmos-react-core';
+import type { ImagePlacement, ImageSize, RadioCheckCardProps } from './RadioCheckCard.types';
+export declare const StyledRadioCheckCard: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<RadioCheckCardProps, "disabled" | "readOnly" | "status">, never>;
+export declare const StyledRadioCheckCardInline: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<RadioCheckCardProps, "disabled" | "readOnly" | "status"> & {
+    placement?: ExcludeStrict<ImagePlacement, "block-start">;
+    size?: ImageSize;
+}, never>;
+export declare const StyledRadioCheckCardStacked: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<RadioCheckCardProps, "disabled" | "readOnly" | "status"> & {
+    size?: ImageSize;
+}, never>;
+export declare const StyledImageContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    placement?: ImagePlacement;
+    size?: ImageSize;
+}, never>;
+export declare const StyledValueList: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledContentContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=RadioCheckCard.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioCheckCard.styles.d.ts","sourceRoot":"","sources":["../../../src/components/RadioCheckCard/RadioCheckCard.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAKL,KAAK,aAAa,EACnB,MAAM,yBAAyB,CAAC;AAMjC,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAE7F,eAAO,MAAM,oBAAoB,oKAmDhC,CAAC;AAIF,eAAO,MAAM,0BAA0B;gBACzB,aAAa,CAAC,cAAc,EAAE,aAAa,CAAC;WACjD,SAAS;SAwBhB,CAAC;AAEH,eAAO,MAAM,2BAA2B;WAAyC,SAAS;SAkBxF,CAAC;AAEH,eAAO,MAAM,oBAAoB;gBACnB,cAAc;WACnB,SAAS;SA0EjB,CAAC;AAIF,eAAO,MAAM,eAAe,wGAG3B,CAAC;AAEF,eAAO,MAAM,sBAAsB,yGAsBjC,CAAC"}

package/lib/components/RadioCheckCard/RadioCheckCard.styles.js

@@ -0,0 +1,170 @@
+import styled, { css } from 'styled-components';
+import { StyledFieldValue, StyledFieldValueList, StyledIcon, defaultThemeProp } from '@pega/cosmos-react-core';
+import { StyledPseudoRadioCheck, StyledRadioCheck } from '@pega/cosmos-react-core/lib/components/RadioCheck/RadioCheck';
+export const StyledRadioCheckCard = styled.div(({ disabled, readOnly, status, theme: { base: { palette, shadow, 'disabled-opacity': disabledOpacity }, components: { card, 'form-field': formField, 'form-control': { ':hover': { 'border-color': hoverBorderColor } } } } }) => {
+    const useBorderColor = status === 'error' ? formField.error['status-color'] : 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};
+
+      ${disabled &&
+        css `
+        cursor: not-allowed;
+        opacity: ${disabledOpacity};
+      `}
+
+      ${!(disabled || readOnly) &&
+        css `
+        :hover:not(:focus-within) {
+          border-color: ${hoverBorderColor};
+
+          ${StyledPseudoRadioCheck} {
+            border-color: ${hoverBorderColor};
+          }
+        }
+
+        :focus-within {
+          box-shadow: ${shadow.focus};
+          border-color: transparent;
+        }
+      `}
+    `;
+});
+StyledRadioCheckCard.defaultProps = defaultThemeProp;
+export const StyledRadioCheckCardInline = styled(StyledRadioCheckCard)(({ placement, size }) => {
+    let imageContainerSize;
+    switch (size) {
+        case 'small':
+            imageContainerSize = '2.5rem';
+            break;
+        case 'large':
+            imageContainerSize = '8.875rem';
+            break;
+        case 'flexible':
+            imageContainerSize = 'minmax(2.5rem, auto)';
+            break;
+        default:
+            imageContainerSize = '';
+    }
+    return css `
+    /* stylelint-disable unit-allowed-list -- "Unexpected unit "fr\`" */
+    grid-template-columns: ${placement === 'inline-end'
+        ? `1fr ${imageContainerSize}`
+        : `${imageContainerSize} 1fr`};
+    /* stylelint-enable unit-allowed-list */
+    grid-template-rows: minmax(2.75rem, 1fr);
+  `;
+});
+export const StyledRadioCheckCardStacked = styled(StyledRadioCheckCard)(({ size }) => {
+    let containerSize;
+    switch (size) {
+        case 'small':
+            containerSize = '2.5rem';
+            break;
+        case 'large':
+            containerSize = '15.125rem';
+            break;
+        default:
+            containerSize = 'minmax(2.5rem, 15.125rem)';
+    }
+    return css `
+    grid-template-rows: ${containerSize} 1fr;
+    grid-template-columns: minmax(2.75rem, 1fr);
+  `;
+});
+export const StyledImageContainer = styled.div(({ theme: { base: { palette, transparency }, components: { card: { 'border-radius': borderRadius } } }, placement = 'inline-start', size = 'flexible' }) => {
+    return css `
+      background-color: ${palette['app-background']};
+
+      img {
+        height: 100%;
+        object-fit: contain;
+      }
+
+      ${placement === 'block-start'
+        ? css `
+            border-start-start-radius: ${borderRadius};
+            border-start-end-radius: ${borderRadius};
+
+            > img {
+              aspect-ratio: 16 / 9;
+              max-height: 100%;
+            }
+          `
+        : css `
+            > img {
+              aspect-ratio: 4 / 5;
+            }
+          `}
+
+      ${size === 'flexible' &&
+        placement !== 'block-start' &&
+        css `
+        max-width: 8.875rem;
+        height: var(--content-height);
+      `};
+
+      ${size === 'large' &&
+        css `
+        min-height: 11.0625rem;
+      `}
+
+      ${size === 'small' &&
+        css `
+        aspect-ratio: unset;
+
+        > img {
+          max-width: 2rem;
+          max-height: 2rem;
+          aspect-ratio: 1 / 1;
+        }
+      `}
+
+      ${placement === 'inline-start' &&
+        css `
+        border-start-start-radius: ${borderRadius};
+        border-end-start-radius: ${borderRadius};
+      `}
+        ${placement === 'inline-end' &&
+        css `
+        border-end-end-radius: ${borderRadius};
+        border-start-end-radius: ${borderRadius};
+      `}
+        ${StyledIcon} {
+        opacity: ${transparency['transparent-3']};
+      }
+    `;
+});
+StyledImageContainer.defaultProps = defaultThemeProp;
+export const StyledValueList = styled.ul `
+  width: 100%;
+  list-style-type: none;
+`;
+export const StyledContentContainer = styled.div(({ theme }) => {
+    return css `
+    padding: ${theme.base.spacing};
+
+    ${StyledRadioCheck} {
+      min-height: ${theme.components.input.height};
+    }
+
+    ${StyledFieldValueList}, ${StyledValueList} {
+      margin-block-start: ${theme.base.spacing};
+    }
+
+    ${StyledFieldValue} {
+      white-space: nowrap;
+
+      &,
+      div {
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  `;
+});
+StyledContentContainer.defaultProps = defaultThemeProp;
+//# sourceMappingURL=RadioCheckCard.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioCheckCard.styles.js","sourceRoot":"","sources":["../../../src/components/RadioCheckCard/RadioCheckCard.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,gBAAgB,EAChB,oBAAoB,EACpB,UAAU,EACV,gBAAgB,EAEjB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,sBAAsB,EACtB,gBAAgB,EACjB,MAAM,8DAA8D,CAAC;AAItE,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAG5C,CAAC,EACC,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,kBAAkB,EAAE,eAAe,EAAE,EAC9D,UAAU,EAAE,EACV,IAAI,EACJ,YAAY,EAAE,SAAS,EACvB,cAAc,EAAE,EACd,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,EAC/C,EACF,EACF,EACF,EAAE,EAAE;IACH,MAAM,cAAc,GAClB,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;IAEhF,OAAO,GAAG,CAAA;;;0BAGY,IAAI,CAAC,UAAU;uBAClB,IAAI,CAAC,eAAe,CAAC;gCACZ,cAAc;;QAEtC,QAAQ;QACV,GAAG,CAAA;;mBAEU,eAAe;OAC3B;;QAEC,CAAC,CAAC,QAAQ,IAAI,QAAQ,CAAC;QACzB,GAAG,CAAA;;0BAEiB,gBAAgB;;YAE9B,sBAAsB;4BACN,gBAAgB;;;;;wBAKpB,MAAM,CAAC,KAAK;;;OAG7B;KACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,oBAAoB,CAAC,CAGnE,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,EAAE;IACzB,IAAI,kBAAkB,CAAC;IACvB,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,OAAO;YACV,kBAAkB,GAAG,QAAQ,CAAC;YAC9B,MAAM;QACR,KAAK,OAAO;YACV,kBAAkB,GAAG,UAAU,CAAC;YAChC,MAAM;QACR,KAAK,UAAU;YACb,kBAAkB,GAAG,sBAAsB,CAAC;YAC5C,MAAM;QACR;YACE,kBAAkB,GAAG,EAAE,CAAC;IAC5B,CAAC;IACD,OAAO,GAAG,CAAA;;6BAEiB,SAAS,KAAK,YAAY;QACjD,CAAC,CAAC,OAAO,kBAAkB,EAAE;QAC7B,CAAC,CAAC,GAAG,kBAAkB,MAAM;;;GAGhC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,2BAA2B,GAAG,MAAM,CAAC,oBAAoB,CAAC,CAAuB,CAAC,EAC7F,IAAI,EACL,EAAE,EAAE;IACH,IAAI,aAAa,CAAC;IAClB,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,OAAO;YACV,aAAa,GAAG,QAAQ,CAAC;YACzB,MAAM;QACR,KAAK,OAAO;YACV,aAAa,GAAG,WAAW,CAAC;YAC5B,MAAM;QACR;YACE,aAAa,GAAG,2BAA2B,CAAC;IAChD,CAAC;IACD,OAAO,GAAG,CAAA;0BACc,aAAa;;GAEpC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAI5C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,YAAY,EAAE,EAC/B,UAAU,EAAE,EACV,IAAI,EAAE,EAAE,eAAe,EAAE,YAAY,EAAE,EACxC,EACF,EACD,SAAS,GAAG,cAAc,EAC1B,IAAI,GAAG,UAAU,EAClB,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;0BACY,OAAO,CAAC,gBAAgB,CAAC;;;;;;;QAO3C,SAAS,KAAK,aAAa;QAC3B,CAAC,CAAC,GAAG,CAAA;yCAC4B,YAAY;uCACd,YAAY;;;;;;WAMxC;QACH,CAAC,CAAC,GAAG,CAAA;;;;WAIF;;QAEH,IAAI,KAAK,UAAU;QACrB,SAAS,KAAK,aAAa;QAC3B,GAAG,CAAA;;;OAGF;;QAEC,IAAI,KAAK,OAAO;QAClB,GAAG,CAAA;;OAEF;;QAEC,IAAI,KAAK,OAAO;QAClB,GAAG,CAAA;;;;;;;;OAQF;;QAEC,SAAS,KAAK,cAAc;QAC9B,GAAG,CAAA;qCAC4B,YAAY;mCACd,YAAY;OACxC;UACG,SAAS,KAAK,YAAY;QAC9B,GAAG,CAAA;iCACwB,YAAY;mCACV,YAAY;OACxC;UACG,UAAU;mBACD,YAAY,CAAC,eAAe,CAAC;;KAE3C,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,EAAE,CAAA;;;CAGvC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7D,OAAO,GAAG,CAAA;eACG,KAAK,CAAC,IAAI,CAAC,OAAO;;MAE3B,gBAAgB;oBACF,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,MAAM;;;MAG3C,oBAAoB,KAAK,eAAe;4BAClB,KAAK,CAAC,IAAI,CAAC,OAAO;;;MAGxC,gBAAgB;;;;;;;;;GASnB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n  StyledFieldValue,\n  StyledFieldValueList,\n  StyledIcon,\n  defaultThemeProp,\n  type ExcludeStrict\n} from '@pega/cosmos-react-core';\nimport {\n  StyledPseudoRadioCheck,\n  StyledRadioCheck\n} from '@pega/cosmos-react-core/lib/components/RadioCheck/RadioCheck';\n\nimport type { ImagePlacement, ImageSize, RadioCheckCardProps } from './RadioCheckCard.types';\n\nexport const StyledRadioCheckCard = styled.div<\n  Pick<RadioCheckCardProps, 'disabled' | 'readOnly' | 'status'>\n>(\n  ({\n    disabled,\n    readOnly,\n    status,\n    theme: {\n      base: { palette, shadow, 'disabled-opacity': disabledOpacity },\n      components: {\n        card,\n        'form-field': formField,\n        'form-control': {\n          ':hover': { 'border-color': hoverBorderColor }\n        }\n      }\n    }\n  }) => {\n    const useBorderColor =\n      status === 'error' ? formField.error['status-color'] : palette['border-line'];\n\n    return css`\n      min-width: min-content;\n      cursor: pointer;\n      background-color: ${card.background};\n      border-radius: ${card['border-radius']};\n      border: 0.0625rem solid ${useBorderColor};\n\n      ${disabled &&\n      css`\n        cursor: not-allowed;\n        opacity: ${disabledOpacity};\n      `}\n\n      ${!(disabled || readOnly) &&\n      css`\n        :hover:not(:focus-within) {\n          border-color: ${hoverBorderColor};\n\n          ${StyledPseudoRadioCheck} {\n            border-color: ${hoverBorderColor};\n          }\n        }\n\n        :focus-within {\n          box-shadow: ${shadow.focus};\n          border-color: transparent;\n        }\n      `}\n    `;\n  }\n);\n\nStyledRadioCheckCard.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheckCardInline = styled(StyledRadioCheckCard)<{\n  placement?: ExcludeStrict<ImagePlacement, 'block-start'>;\n  size?: ImageSize;\n}>(({ placement, size }) => {\n  let imageContainerSize;\n  switch (size) {\n    case 'small':\n      imageContainerSize = '2.5rem';\n      break;\n    case 'large':\n      imageContainerSize = '8.875rem';\n      break;\n    case 'flexible':\n      imageContainerSize = 'minmax(2.5rem, auto)';\n      break;\n    default:\n      imageContainerSize = '';\n  }\n  return css`\n    /* stylelint-disable unit-allowed-list -- \"Unexpected unit \"fr\\`\" */\n    grid-template-columns: ${placement === 'inline-end'\n      ? `1fr ${imageContainerSize}`\n      : `${imageContainerSize} 1fr`};\n    /* stylelint-enable unit-allowed-list */\n    grid-template-rows: minmax(2.75rem, 1fr);\n  `;\n});\n\nexport const StyledRadioCheckCardStacked = styled(StyledRadioCheckCard)<{ size?: ImageSize }>(({\n  size\n}) => {\n  let containerSize;\n  switch (size) {\n    case 'small':\n      containerSize = '2.5rem';\n      break;\n    case 'large':\n      containerSize = '15.125rem';\n      break;\n    default:\n      containerSize = 'minmax(2.5rem, 15.125rem)';\n  }\n  return css`\n    grid-template-rows: ${containerSize} 1fr;\n    grid-template-columns: minmax(2.75rem, 1fr);\n  `;\n});\n\nexport const StyledImageContainer = styled.div<{\n  placement?: ImagePlacement;\n  size?: ImageSize;\n}>(\n  ({\n    theme: {\n      base: { palette, transparency },\n      components: {\n        card: { 'border-radius': borderRadius }\n      }\n    },\n    placement = 'inline-start',\n    size = 'flexible'\n  }) => {\n    return css`\n      background-color: ${palette['app-background']};\n\n      img {\n        height: 100%;\n        object-fit: contain;\n      }\n\n      ${placement === 'block-start'\n        ? css`\n            border-start-start-radius: ${borderRadius};\n            border-start-end-radius: ${borderRadius};\n\n            > img {\n              aspect-ratio: 16 / 9;\n              max-height: 100%;\n            }\n          `\n        : css`\n            > img {\n              aspect-ratio: 4 / 5;\n            }\n          `}\n\n      ${size === 'flexible' &&\n      placement !== 'block-start' &&\n      css`\n        max-width: 8.875rem;\n        height: var(--content-height);\n      `};\n\n      ${size === 'large' &&\n      css`\n        min-height: 11.0625rem;\n      `}\n\n      ${size === 'small' &&\n      css`\n        aspect-ratio: unset;\n\n        > img {\n          max-width: 2rem;\n          max-height: 2rem;\n          aspect-ratio: 1 / 1;\n        }\n      `}\n\n      ${placement === 'inline-start' &&\n      css`\n        border-start-start-radius: ${borderRadius};\n        border-end-start-radius: ${borderRadius};\n      `}\n        ${placement === 'inline-end' &&\n      css`\n        border-end-end-radius: ${borderRadius};\n        border-start-end-radius: ${borderRadius};\n      `}\n        ${StyledIcon} {\n        opacity: ${transparency['transparent-3']};\n      }\n    `;\n  }\n);\n\nStyledImageContainer.defaultProps = defaultThemeProp;\n\nexport const StyledValueList = styled.ul`\n  width: 100%;\n  list-style-type: none;\n`;\n\nexport const StyledContentContainer = styled.div(({ theme }) => {\n  return css`\n    padding: ${theme.base.spacing};\n\n    ${StyledRadioCheck} {\n      min-height: ${theme.components.input.height};\n    }\n\n    ${StyledFieldValueList}, ${StyledValueList} {\n      margin-block-start: ${theme.base.spacing};\n    }\n\n    ${StyledFieldValue} {\n      white-space: nowrap;\n\n      &,\n      div {\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n    }\n  `;\n});\n\nStyledContentContainer.defaultProps = defaultThemeProp;\n"]}

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

@@ -0,0 +1,3 @@
+export declare const radioCheckCardElements: readonly ["content", "image", "control", "actions"];
+export declare const getRadioCheckCardTestIds: (testIdProp?: import("../..").TestIdProp["testId"]) => import("../..").TestIdsRecord<readonly ["content", "image", "control", "actions"]>;
+//# sourceMappingURL=RadioCheckCard.test-ids.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioCheckCard.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/RadioCheckCard/RadioCheckCard.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,sBAAsB,qDAAsD,CAAC;AAE1F,eAAO,MAAM,wBAAwB,2IAA4D,CAAC"}

package/lib/components/RadioCheckCard/RadioCheckCard.test-ids.js

@@ -0,0 +1,4 @@
+import { createTestIds } from '../../utils';
+export const radioCheckCardElements = ['content', 'image', 'control', 'actions'];
+export const getRadioCheckCardTestIds = createTestIds('radio-check-card', radioCheckCardElements);
+//# sourceMappingURL=RadioCheckCard.test-ids.js.map

package/lib/components/RadioCheckCard/RadioCheckCard.test-ids.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioCheckCard.test-ids.js","sourceRoot":"","sources":["../../../src/components/RadioCheckCard/RadioCheckCard.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,CAAU,CAAC;AAE1F,MAAM,CAAC,MAAM,wBAAwB,GAAG,aAAa,CAAC,kBAAkB,EAAE,sBAAsB,CAAC,CAAC","sourcesContent":["import { createTestIds } from '../../utils';\n\nexport const radioCheckCardElements = ['content', 'image', 'control', 'actions'] as const;\n\nexport const getRadioCheckCardTestIds = createTestIds('radio-check-card', radioCheckCardElements);\n"]}

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

@@ -0,0 +1,65 @@
+import type { Ref, MouseEventHandler, KeyboardEventHandler, ChangeEventHandler, ReactNode } from 'react';
+import type { Action } from '@pega/cosmos-react-core';
+import type { ImageProps } from '../Image';
+import type { FieldValueListProps } from '../FieldValueList';
+import type { FormControlProps } from '../FormControl';
+import type { WithAttributes, NoChildrenProp, TestIdProp } from '../../types';
+import type { radioCheckCardElements } from './RadioCheckCard.test-ids';
+export type ImagePlacement = 'block-start' | 'inline-end' | 'inline-start';
+export type ImageSize = 'flexible' | 'large' | 'small';
+export type RadioCheckCardProps = WithAttributes<'div', NoChildrenProp & TestIdProp<typeof radioCheckCardElements> & {
+    /** Pass a string or a fragment with a string. */
+    label: string;
+    /** Sets the type of input. */
+    type: 'radio' | 'checkbox';
+    /**
+     * Sets control to an [indeterminate state](https://css-tricks.com/almanac/selectors/i/indeterminate/#indeterminate-checkboxes).
+     * @default false
+     */
+    indeterminate?: boolean;
+    /** Sets checked prop via onChange when using as controlled component. */
+    checked?: boolean;
+    /** Initialize checked prop when using as uncontrolled component. */
+    defaultChecked?: boolean;
+    /** The image to render in the card. */
+    image?: ImageProps & {
+        /**
+         * Used to determine image placement
+         * @default 'inline-start'
+         */
+        placement?: ImagePlacement;
+        /**
+         * Used to determine image size
+         * @default 'large'
+         */
+        size?: ImageSize;
+    };
+    /** The onClick handler for the item. */
+    onClick?: MouseEventHandler;
+    /** Called when user presses a key. */
+    onKeyDown?: KeyboardEventHandler;
+    /** Callback invoked when this particular radio button is selected. */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /** The set of field values to render in the card. */
+    fields?: FieldValueListProps['fields'] | {
+        id: string;
+        value: ReactNode;
+    }[];
+    /** Pass a heading and content to show additional information on the field. */
+    additionalInfo?: FormControlProps['additionalInfo'];
+    /** info like error, success, warning messages */
+    info?: FormControlProps['info'];
+    /** Indicate if the field is required. The browser defaults to false. */
+    required?: FormControlProps['required'];
+    /** Disable the control. The browser defaults to false. */
+    disabled?: FormControlProps['disabled'];
+    /** Makes the input non editable and non clickable. The browser defaults to false. */
+    readOnly?: FormControlProps['readOnly'];
+    /** Set visual state based on a validation state. */
+    status?: FormControlProps['status'];
+    /** Additional actions */
+    actions?: Action[];
+    /** Reference to the component's input element. */
+    ref?: Ref<HTMLInputElement>;
+}>;
+//# sourceMappingURL=RadioCheckCard.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioCheckCard.types.d.ts","sourceRoot":"","sources":["../../../src/components/RadioCheckCard/RadioCheckCard.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,GAAG,EACH,iBAAiB,EACjB,oBAAoB,EACpB,kBAAkB,EAClB,SAAS,EACV,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEtD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9E,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAExE,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG,YAAY,GAAG,cAAc,CAAC;AAC3E,MAAM,MAAM,SAAS,GAAG,UAAU,GAAG,OAAO,GAAG,OAAO,CAAC;AAEvD,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAC9C,KAAK,EACL,cAAc,GACZ,UAAU,CAAC,OAAO,sBAAsB,CAAC,GAAG;IAC1C,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,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,uCAAuC;IACvC,KAAK,CAAC,EAAE,UAAU,GAAG;QACnB;;;WAGG;QACH,SAAS,CAAC,EAAE,cAAc,CAAC;QAC3B;;;WAGG;QACH,IAAI,CAAC,EAAE,SAAS,CAAC;KAClB,CAAC;IACF,wCAAwC;IACxC,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,sCAAsC;IACtC,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,sEAAsE;IACtE,QAAQ,CAAC,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IAChD,qDAAqD;IACrD,MAAM,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,GAAG;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,SAAS,CAAA;KAAE,EAAE,CAAC;IAC5E,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,iDAAiD;IACjD,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,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,yBAAyB;IACzB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,kDAAkD;IAClD,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B,CACJ,CAAC"}

package/lib/components/RadioCheckCard/RadioCheckCard.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=RadioCheckCard.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioCheckCard.types.js","sourceRoot":"","sources":["../../../src/components/RadioCheckCard/RadioCheckCard.types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n  Ref,\n  MouseEventHandler,\n  KeyboardEventHandler,\n  ChangeEventHandler,\n  ReactNode\n} from 'react';\n\nimport type { Action } from '@pega/cosmos-react-core';\n\nimport type { ImageProps } from '../Image';\nimport type { FieldValueListProps } from '../FieldValueList';\nimport type { FormControlProps } from '../FormControl';\nimport type { WithAttributes, NoChildrenProp, TestIdProp } from '../../types';\n\nimport type { radioCheckCardElements } from './RadioCheckCard.test-ids';\n\nexport type ImagePlacement = 'block-start' | 'inline-end' | 'inline-start';\nexport type ImageSize = 'flexible' | 'large' | 'small';\n\nexport type RadioCheckCardProps = WithAttributes<\n  'div',\n  NoChildrenProp &\n    TestIdProp<typeof radioCheckCardElements> & {\n      /** Pass a string or a fragment with a string. */\n      label: string;\n      /** Sets the type of input. */\n      type: 'radio' | 'checkbox';\n      /**\n       * Sets control to an [indeterminate state](https://css-tricks.com/almanac/selectors/i/indeterminate/#indeterminate-checkboxes).\n       * @default false\n       */\n      indeterminate?: boolean;\n      /** Sets checked prop via onChange when using as controlled component. */\n      checked?: boolean;\n      /** Initialize checked prop when using as uncontrolled component. */\n      defaultChecked?: boolean;\n      /** The image to render in the card. */\n      image?: ImageProps & {\n        /**\n         * Used to determine image placement\n         * @default 'inline-start'\n         */\n        placement?: ImagePlacement;\n        /**\n         * Used to determine image size\n         * @default 'large'\n         */\n        size?: ImageSize;\n      };\n      /** The onClick handler for the item. */\n      onClick?: MouseEventHandler;\n      /** Called when user presses a key. */\n      onKeyDown?: KeyboardEventHandler;\n      /** Callback invoked when this particular radio button is selected. */\n      onChange?: ChangeEventHandler<HTMLInputElement>;\n      /** The set of field values to render in the card. */\n      fields?: FieldValueListProps['fields'] | { id: string; value: ReactNode }[];\n      /** Pass a heading and content to show additional information on the field. */\n      additionalInfo?: FormControlProps['additionalInfo'];\n      /** info like error, success, warning messages */\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      /** Set visual state based on a validation state. */\n      status?: FormControlProps['status'];\n      /** Additional actions */\n      actions?: Action[];\n      /** Reference to the component's input element. */\n      ref?: Ref<HTMLInputElement>;\n    }\n>;\n"]}

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

@@ -0,0 +1,4 @@
+export { default } from './RadioCheckCard';
+export { StyledRadioCheckCard } from './RadioCheckCard.styles';
+export type { RadioCheckCardProps, ImagePlacement, ImageSize } from './RadioCheckCard.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/RadioCheckCard/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC/D,YAAY,EAAE,mBAAmB,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC"}

package/lib/components/RadioCheckCard/index.js

@@ -0,0 +1,3 @@
+export { default } from './RadioCheckCard';
+export { StyledRadioCheckCard } from './RadioCheckCard.styles';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/RadioCheckCard/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC","sourcesContent":["export { default } from './RadioCheckCard';\nexport { StyledRadioCheckCard } from './RadioCheckCard.styles';\nexport type { RadioCheckCardProps, ImagePlacement, ImageSize } from './RadioCheckCard.types';\n"]}

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

@@ -1,9 +1,10 @@
-import type { FC, Ref, ReactElement, ChangeEvent } from 'react';
-import type { ForwardProps } from '../../types';
+import type { Ref, ReactElement, ChangeEvent } from 'react';
+import type { ForwardRefForwardPropsComponent, TestIdProp } from '../../types';
 import type { FormFieldProps } from '../FormField';
 import type { FormControlProps } from '../FormControl';
 import type { RadioCheckProps } from '../RadioCheck';
-export interface RadioCheckGroupProps {
+import type { elements } from '../FormField/FormField.test-ids';
+export interface RadioCheckGroupProps extends TestIdProp<typeof elements> {
     /** Accepts Checkboxes or RadioButtons as children. */
     children: ReactElement | ReactElement[];
     /**
@@ -12,6 +13,8 @@ export interface RadioCheckGroupProps {
      * Both handlers will be called, child followed by group.
      */
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    /** Callback invoked when the clear button is clicked. If provided will render the clear button. */
+    onClear?: FormFieldProps['onClear'];
     /** Set visual state based on a validation state. */
     status?: FormControlProps['status'];
     /** Pass a string or a fragment with an Icon and string. */
@@ -41,13 +44,15 @@ export interface RadioCheckGroupProps {
      * Controls the styling of the child RadioChecks.
      * @default 'simple'
      */
-    variant?: RadioCheckProps['variant'];
+    variant?: RadioCheckProps['variant'] | 'card-grid';
     /** Pass a heading and content to show additional information on the field. */
     additionalInfo?: FormControlProps['additionalInfo'];
     /** Ref forwarded to the wrapping element. */
     ref?: Ref<HTMLElement>;
 }
 export declare const StyledRadioCheckGroup: import("styled-components").StyledComponent<"fieldset", import("styled-components").DefaultTheme, {}, never>;
-declare const RadioCheckGroup: FC<RadioCheckGroupProps & ForwardProps>;
-export default RadioCheckGroup;
+declare const _default: ForwardRefForwardPropsComponent<RadioCheckGroupProps> & {
+    getTestIds: (testIdProp?: TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly ["label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
+};
+export default _default;
 //# sourceMappingURL=RadioCheckGroup.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"RadioCheckGroup.d.ts","sourceRoot":"","sources":["../../../src/components/RadioCheckGroup/RadioCheckGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,GAAG,EAAmB,YAAY,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAGjF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,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;AAIrD,MAAM,WAAW,oBAAoB;IACnC,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,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,CAAC;IACrC,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAOD,eAAO,MAAM,qBAAqB,8GAMjC,CAAC;AAEF,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,GAAG,YAAY,CA6F5D,CAAC;AAIF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"RadioCheckGroup.d.ts","sourceRoot":"","sources":["../../../src/components/RadioCheckGroup/RadioCheckGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAmB,YAAY,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAG7E,OAAO,KAAK,EAAE,+BAA+B,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE/E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AASrD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAIhE,MAAM,WAAW,oBAAqB,SAAQ,UAAU,CAAC,OAAO,QAAQ,CAAC;IACvE,sDAAsD;IACtD,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACtD,mGAAmG;IACnG,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IACpC,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC;;;OAGG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,GAAG,WAAW,CAAC;IACnD,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,eAAO,MAAM,qBAAqB,8GAWjC,CAAC;;;;AAgIF,wBAAuE"}

package/lib/components/RadioCheckGroup/RadioCheckGroup.js

@@ -1,24 +1,31 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, Children, cloneElement, useState, useEffect, useRef } from 'react';
+import { forwardRef, Children, cloneElement, useState, useEffect, useRef, useMemo } from 'react';
 import styled from 'styled-components';
 import FormField from '../FormField';
 import { StyledFormField } from '../FormField/FormField';
 import Flex from '../Flex';
-import { useElement, useUID } from '../../hooks';
-const defaultProps = {
-    required: false,
-    disabled: false
-};
+import { useElement, useTestIds, useTheme, useUID } from '../../hooks';
+import Grid from '../Grid';
+import { StyledImageContainer, StyledRadioCheckCardInline } from '../RadioCheckCard/RadioCheckCard.styles';
+import { withTestIds } from '../../utils';
+import { getRadioCheckGroupTestIds } from './RadioCheckGroup.test-ids';
 export const StyledRadioCheckGroup = styled.fieldset `
   &[disabled] {
     > ${StyledFormField} {
       opacity: unset;
     }
   }
+
+  ${StyledRadioCheckCardInline} ${StyledImageContainer} {
+    /* To enlarge the image containers to the size of the biggest one */
+    min-height: 100%;
+  }
 `;
 const RadioCheckGroup = forwardRef(function RadioCheckGroup(props, ref) {
     const uid = useUID();
-    const { children, name = uid, disabled, onChange, readOnly, inline = false, autoStack = true, variant = 'simple', ...restProps } = props;
+    const { testId, children, name = uid, disabled = false, required = false, onChange, readOnly, inline = false, autoStack = true, variant = 'simple', onClear, ...restProps } = props;
+    const testIds = useTestIds(testId, getRadioCheckGroupTestIds);
+    const theme = useTheme();
     const [optionsEl, setOptionsEl] = useElement();
     const [renderInline, setRenderInline] = useState(inline);
     const renderInlineRef = useRef(inline);
@@ -48,26 +55,36 @@ const RadioCheckGroup = forwardRef(function RadioCheckGroup(props, ref) {
             };
         }
     }, [optionsEl, inline, autoStack]);
-    return (_jsx(FormField, { as: StyledRadioCheckGroup, labelAs: 'legend', ref: ref, name: name, disabled: disabled, ...restProps, isRadioCheck: true, children: _jsx(Flex, { ref: setOptionsEl, container: {
+    const mapChildren = useMemo(() => Children.map(children, child => cloneElement(child, {
+        name,
+        disabled: disabled || child.props.disabled,
+        readOnly: readOnly || child.props.readOnly,
+        variant: variant === 'card-grid' ? 'card' : variant,
+        onChange: onChange
+            ? (e) => {
+                if (!(readOnly || child.props.readOnly)) {
+                    child.props.onChange?.(e);
+                    onChange(e);
+                }
+            }
+            : child.props.onChange
+    })), [children, name, disabled, readOnly, variant, onChange]);
+    return (_jsx(FormField, { testId: testIds, as: StyledRadioCheckGroup, labelAs: 'legend', ref: ref, name: name, disabled: disabled, required: required, ...restProps, isRadioCheck: true, onClear: onClear, children: variant === 'card-grid' ? (_jsx(Grid, { container: {
+                gap: 1,
+                cols: (() => {
+                    if (!renderInline)
+                        return '1fr';
+                    if (autoStack)
+                        return `repeat(auto-fit, minmax(min(100%, ${theme.base.breakpoints.sm}), 1fr))`;
+                    return `repeat(${Children.count(children)}, 1fr)`;
+                })(),
+                autoRows: '1fr'
+            }, children: mapChildren })) : (_jsx(Flex, { ref: setOptionsEl, container: {
                 direction: renderInline ? 'row' : 'column',
-                colGap: 2,
+                colGap: renderInline ? 1.5 : 2,
                 rowGap: variant === 'card' ? 1 : 0,
                 wrap: 'wrap'
-            }, children: Children.map(children, child => cloneElement(child, {
-                name,
-                disabled: disabled || child.props.disabled,
-                readOnly: readOnly || child.props.readOnly,
-                variant,
-                onChange: onChange
-                    ? (e) => {
-                        if (!(readOnly || child.props.readOnly)) {
-                            child.props.onChange?.(e);
-                            onChange(e);
-                        }
-                    }
-                    : child.props.onChange
-            })) }) }));
+            }, children: mapChildren })) }));
 });
-RadioCheckGroup.defaultProps = defaultProps;
-export default RadioCheckGroup;
+export default withTestIds(RadioCheckGroup, getRadioCheckGroupTestIds);
 //# sourceMappingURL=RadioCheckGroup.js.map