@ultraviolet/ui 3.0.0-beta.27 → 3.0.0-beta.28

package/dist/components/SelectableCard/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as ProductIcon from "@ultraviolet/icons/product";
 import { useTheme } from "@ultraviolet/themes";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
@@ -10,122 +10,208 @@ import { Stack } from "../Stack/index.js";
 import { Tooltip } from "../Tooltip/index.js";
 import { illustrationSelectableCard, divSelectableCard, imageSelectableCard, containerSelectableCard, labelContainerSelectableCard, selectableElementSelectableCard, stackSelectableCard } from "./styles.css.js";
 import { widthSelectable, labelDisplay, inputDisplay } from "./variables.css.js";
-const SelectableCard = forwardRef(({
-  name,
-  value,
-  onChange,
-  showTick = false,
-  type = "radio",
-  checked = false,
-  disabled = false,
-  children,
-  className,
-  isError,
-  onFocus,
-  onBlur,
-  tooltip,
-  id,
-  label,
-  "data-testid": dataTestId,
-  productIcon,
-  illustration,
-  "aria-label": ariaLabel,
-  style
-}, ref) => {
-  const theme = useTheme();
-  const innerRef = useRef(null);
-  const childrenRef = useRef(null);
-  const [svgContent, setSvgContent] = useState(null);
-  const image = useMemo(() => {
-    if (illustration) {
-      return "illustration";
-    }
-    if (productIcon) {
-      return "icon";
-    }
-    return "none";
-  }, [illustration, productIcon]);
-  useEffect(() => {
-    if (illustration?.endsWith(".svg")) {
-      fetch(illustration).then((response) => response.text()).then((svg) => {
-        const updatedSvg = svg.replace(/fill="[^"]*"/g, `fill="${theme.colors.neutral.backgroundStronger}"`).replace(/width="[^"]*"/g, `width="220px"`).replace(/height="[^"]*"/g, `height="220px"`);
-        setSvgContent(updatedSvg);
-      }).catch(() => null);
-    }
-  });
-  const ProductIconUsed = productIcon ? ProductIcon[`${productIcon.charAt(0).toUpperCase() + productIcon.slice(1)}ProductIcon`] : null;
-  const ParentContainer = useCallback(({
-    children: subChildren
-  }) => {
-    if (tooltip) {
-      return /* @__PURE__ */ jsx(Stack, { flex: 1, children: /* @__PURE__ */ jsx(Tooltip, { containerFullHeight: true, text: tooltip, children: subChildren }) });
-    }
-    return /* @__PURE__ */ jsx(Tooltip, { children: subChildren });
-  }, [tooltip]);
-  const IllustrationContainer = useCallback(({
-    children: subChildren
-  }) => {
-    if (ProductIconUsed || illustration) {
-      return /* @__PURE__ */ jsxs(Stack, { alignItems: "stretch", direction: "row", flex: 1, justifyContent: "space-between", width: "100%", children: [
-        /* @__PURE__ */ jsx(Stack, { className: illustrationSelectableCard, children: subChildren }),
-        /* @__PURE__ */ jsx(Stack, { justifyContent: "center", children: ProductIconUsed ? /* @__PURE__ */ jsx(ProductIconUsed, { size: "large" }) : null }),
-        illustration ? /* @__PURE__ */ jsx("div", { className: divSelectableCard, children: illustration.endsWith(".svg") && svgContent ? /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: imageSelectableCard,
-            dangerouslySetInnerHTML: {
-              __html: svgContent
+const SelectableCard = forwardRef(
+  ({
+    name,
+    value,
+    onChange,
+    showTick = false,
+    type = "radio",
+    checked = false,
+    disabled = false,
+    children,
+    className,
+    isError,
+    onFocus,
+    onBlur,
+    tooltip,
+    id,
+    label,
+    "data-testid": dataTestId,
+    productIcon,
+    illustration,
+    "aria-label": ariaLabel,
+    style
+  }, ref) => {
+    const theme = useTheme();
+    const innerRef = useRef(null);
+    const childrenRef = useRef(null);
+    const [svgContent, setSvgContent] = useState(null);
+    const image = useMemo(() => {
+      if (illustration) {
+        return "illustration";
+      }
+      if (productIcon) {
+        return "icon";
+      }
+      return "none";
+    }, [illustration, productIcon]);
+    useEffect(() => {
+      if (illustration?.endsWith(".svg")) {
+        fetch(illustration).then((response) => response.text()).then((svg) => {
+          const updatedSvg = svg.replace(
+            /fill="[^"]*"/g,
+            `fill="${theme.colors.neutral.backgroundStronger}"`
+          ).replace(/width="[^"]*"/g, `width="220px"`).replace(/height="[^"]*"/g, `height="220px"`);
+          setSvgContent(updatedSvg);
+        }).catch(() => null);
+      }
+    });
+    const ProductIconUsed = productIcon ? ProductIcon[`${productIcon.charAt(0).toUpperCase() + productIcon.slice(1)}ProductIcon`] : null;
+    const ParentContainer = useCallback(
+      ({ children: subChildren }) => {
+        if (tooltip) {
+          return /* @__PURE__ */ jsx(Stack, { flex: 1, children: /* @__PURE__ */ jsx(Tooltip, { containerFullHeight: true, text: tooltip, children: subChildren }) });
+        }
+        return /* @__PURE__ */ jsx(Tooltip, { children: subChildren });
+      },
+      [tooltip]
+    );
+    const IllustrationContainer = useCallback(
+      ({ children: subChildren }) => {
+        if (ProductIconUsed || illustration) {
+          return /* @__PURE__ */ jsxs(
+            Stack,
+            {
+              alignItems: "stretch",
+              direction: "row",
+              flex: 1,
+              justifyContent: "space-between",
+              width: "100%",
+              children: [
+                /* @__PURE__ */ jsx(Stack, { className: illustrationSelectableCard, children: subChildren }),
+                /* @__PURE__ */ jsx(Stack, { justifyContent: "center", children: ProductIconUsed ? /* @__PURE__ */ jsx(ProductIconUsed, { size: "large" }) : null }),
+                illustration ? /* @__PURE__ */ jsx("div", { className: divSelectableCard, children: illustration.endsWith(".svg") && svgContent ? /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: imageSelectableCard,
+                    dangerouslySetInnerHTML: { __html: svgContent }
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    alt: "illustration",
+                    className: imageSelectableCard,
+                    src: illustration,
+                    width: 220
+                  }
+                ) }) : null
+              ]
             }
+          );
+        }
+        return subChildren;
+      },
+      [ProductIconUsed, illustration, svgContent]
+    );
+    const onKeyDown = useCallback(
+      (event) => {
+        if (event.key === " " && innerRef?.current) {
+          event.preventDefault();
+          innerRef.current.click();
+        }
+      },
+      [innerRef]
+    );
+    const isComplexChildren = ["function", "array", "object"].includes(
+      typeof children
+    );
+    const onClickContainer = useCallback(
+      (event) => {
+        if (innerRef.current && !disabled) {
+          const inputElement = innerRef.current;
+          const labelElement = document.querySelector(
+            `label[for="${inputElement.id}"]`
+          );
+          const targetNode = event.target;
+          if (!inputElement.contains(targetNode) && !labelElement?.contains(targetNode)) {
+            inputElement.click();
           }
-        ) : /* @__PURE__ */ jsx("img", { alt: "illustration", className: imageSelectableCard, src: illustration, width: 220 }) }) : null
-      ] });
-    }
-    return subChildren;
-  }, [ProductIconUsed, illustration, svgContent]);
-  const onKeyDown = useCallback((event) => {
-    if (event.key === " " && innerRef?.current) {
-      event.preventDefault();
-      innerRef.current.click();
-    }
-  }, [innerRef]);
-  const isComplexChildren = ["function", "array", "object"].includes(typeof children);
-  const onClickContainer = useCallback((event) => {
-    if (innerRef.current && !disabled) {
-      const inputElement = innerRef.current;
-      const labelElement = document.querySelector(`label[for="${inputElement.id}"]`);
-      const targetNode = event.target;
-      if (!inputElement.contains(targetNode) && !labelElement?.contains(targetNode)) {
-        inputElement.click();
+        }
+      },
+      [disabled]
+    );
+    return /* @__PURE__ */ jsx(ParentContainer, { children: /* @__PURE__ */ jsx(
+      Stack,
+      {
+        alignItems: "start",
+        className: `${className ? `${className} ` : ""}${containerSelectableCard({ cursor: type === "checkbox" && isComplexChildren ? "default" : "custom", image })} ${labelContainerSelectableCard[label ? "label" : "noLabel"]}`,
+        "data-checked": checked,
+        "data-disabled": disabled,
+        "data-error": isError,
+        "data-testid": dataTestId,
+        "data-type": type,
+        direction: label ? "column" : "row",
+        flex: 1,
+        gap: 0.5,
+        onClick: type === "checkbox" && isComplexChildren ? void 0 : onClickContainer,
+        onKeyDown,
+        ref,
+        role: "button",
+        style: {
+          ...assignInlineVars({
+            [inputDisplay]: !showTick ? "none" : "inline",
+            [labelDisplay]: !showTick && !label ? "none" : "inline",
+            [widthSelectable]: label ? "100%" : "auto"
+          }),
+          ...style
+        },
+        tabIndex: disabled ? void 0 : 0,
+        children: /* @__PURE__ */ jsxs(IllustrationContainer, { children: [
+          type === "radio" ? /* @__PURE__ */ jsx(
+            Radio,
+            {
+              checked,
+              className: selectableElementSelectableCard,
+              "data-error": isError,
+              disabled,
+              error: isError,
+              id,
+              name,
+              onBlur,
+              onChange,
+              onFocus,
+              ref: innerRef,
+              tabIndex: -1,
+              value,
+              ...label ? { label } : { "aria-label": ariaLabel }
+            }
+          ) : /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked,
+              className: selectableElementSelectableCard,
+              "data-error": isError,
+              disabled,
+              error: isError,
+              id,
+              name,
+              onBlur,
+              onChange,
+              onFocus,
+              ref: innerRef,
+              tabIndex: -1,
+              value,
+              ...label ? { "aria-label": void 0, children: label } : { "aria-label": ariaLabel }
+            }
+          ),
+          children ? /* @__PURE__ */ jsx(
+            Stack,
+            {
+              className: stackSelectableCard,
+              "data-has-default-cursor": type === "checkbox" && isComplexChildren,
+              "data-has-label": !!label && showTick,
+              onKeyDown: (event) => event.stopPropagation(),
+              ref: childrenRef,
+              width: "100%",
+              children: typeof children === "function" ? children({ checked, disabled }) : children
+            }
+          ) : null
+        ] })
       }
-    }
-  }, [disabled]);
-  return /* @__PURE__ */ jsx(ParentContainer, { children: /* @__PURE__ */ jsx(Stack, { alignItems: "start", className: `${className ? `${className} ` : ""}${containerSelectableCard({
-    cursor: type === "checkbox" && isComplexChildren ? "default" : "custom",
-    image
-  })} ${labelContainerSelectableCard[label ? "label" : "noLabel"]}`, "data-checked": checked, "data-disabled": disabled, "data-error": isError, "data-testid": dataTestId, "data-type": type, direction: label ? "column" : "row", flex: 1, gap: 0.5, onClick: type === "checkbox" && isComplexChildren ? void 0 : onClickContainer, onKeyDown, ref, role: "button", style: {
-    ...assignInlineVars({
-      [inputDisplay]: !showTick ? "none" : "inline",
-      [labelDisplay]: !showTick && !label ? "none" : "inline",
-      [widthSelectable]: label ? "100%" : "auto"
-    }),
-    ...style
-  }, tabIndex: disabled ? void 0 : 0, children: /* @__PURE__ */ jsxs(IllustrationContainer, { children: [
-    type === "radio" ? /* @__PURE__ */ jsx(Radio, { checked, className: selectableElementSelectableCard, "data-error": isError, disabled, error: isError, id, name, onBlur, onChange, onFocus, ref: innerRef, tabIndex: -1, value, ...label ? {
-      label
-    } : {
-      "aria-label": ariaLabel
-    } }) : /* @__PURE__ */ jsx(Checkbox, { checked, className: selectableElementSelectableCard, "data-error": isError, disabled, error: isError, id, name, onBlur, onChange, onFocus, ref: innerRef, tabIndex: -1, value, ...label ? {
-      "aria-label": void 0,
-      children: label
-    } : {
-      "aria-label": ariaLabel
-    } }),
-    children ? /* @__PURE__ */ jsx(Stack, { className: stackSelectableCard, "data-has-default-cursor": type === "checkbox" && isComplexChildren, "data-has-label": !!label && showTick, onKeyDown: (event) => event.stopPropagation(), ref: childrenRef, width: "100%", children: typeof children === "function" ? children({
-      checked,
-      disabled
-    }) : children }) : null
-  ] }) }) });
-});
+    ) });
+  }
+);
 export {
   SelectableCard
 };

package/dist/components/SelectableCardGroup/index.d.ts

@@ -19,7 +19,7 @@ type SelectableCardGroupProps = {
  * SelectableCardGroup is a component that allows users to select cards from a list of cards using SelectableCard.
  */
 export declare const SelectableCardGroup: {
-    ({ legend, legendDescription, value, className, helper, error, columns, children, onChange, name, required, type, showTick, }: SelectableCardGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
-    Card: ({ value, disabled, children, className, isError, onFocus, onBlur, tooltip, id, label, style, "data-testid": dataTestId, }: CardSelectableCardProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+    ({ legend, legendDescription, value, className, helper, error, columns, children, onChange, name, required, type, showTick, }: SelectableCardGroupProps): import("react/jsx-runtime").JSX.Element;
+    Card: ({ value, disabled, children, className, isError, onFocus, onBlur, tooltip, id, label, style, "data-testid": dataTestId, }: CardSelectableCardProps) => import("react/jsx-runtime").JSX.Element;
 };
 export {};

package/dist/components/SelectableCardGroup/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, createContext, useContext } from "react";
 import { Label } from "../Label/index.js";
 import { Row } from "../Row/index.js";
@@ -24,17 +24,33 @@ const CardSelectableCard = ({
 }) => {
   const context = useContext(SelectableCardGroupContext);
   if (!context) {
-    throw new Error("SelectableCardGroup.Card can only be used inside a SelectableCardGroup");
+    throw new Error(
+      "SelectableCardGroup.Card can only be used inside a SelectableCardGroup"
+    );
   }
-  const {
-    groupName,
-    onChange,
-    groupValue,
-    type,
-    showTick,
-    error
-  } = context;
-  return /* @__PURE__ */ jsx(SelectableCard, { checked: typeof groupValue === "object" ? groupValue.includes(value) : groupValue === value, className, "data-testid": dataTestId, disabled, id, isError: isError || error, label, name: groupName, onBlur, onChange, onFocus, showTick, style, tooltip, type, value, children });
+  const { groupName, onChange, groupValue, type, showTick, error } = context;
+  return /* @__PURE__ */ jsx(
+    SelectableCard,
+    {
+      checked: typeof groupValue === "object" ? groupValue.includes(value) : groupValue === value,
+      className,
+      "data-testid": dataTestId,
+      disabled,
+      id,
+      isError: isError || error,
+      label,
+      name: groupName,
+      onBlur,
+      onChange,
+      onFocus,
+      showTick,
+      style,
+      tooltip,
+      type,
+      value,
+      children
+    }
+  );
 };
 const SelectableCardGroup = ({
   legend,
@@ -51,21 +67,47 @@ const SelectableCardGroup = ({
   type,
   showTick = false
 }) => {
-  const contextValue = useMemo(() => ({
-    error: !!error,
-    groupName: name,
-    groupValue: value,
-    onChange,
-    required,
-    showTick,
-    type
-  }), [name, value, onChange, required, type, showTick, error]);
+  const contextValue = useMemo(
+    () => ({
+      error: !!error,
+      groupName: name,
+      groupValue: value,
+      onChange,
+      required,
+      showTick,
+      type
+    }),
+    [name, value, onChange, required, type, showTick, error]
+  );
   return /* @__PURE__ */ jsx(SelectableCardGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(Stack, { gap: 1, children: [
-    /* @__PURE__ */ jsx("fieldset", { className: `${className ? `${className} ` : ""}${selectableCardGroupFieldSet}`, children: /* @__PURE__ */ jsxs(Stack, { gap: 1.5, children: [
-      legend ? /* @__PURE__ */ jsx(Label, { as: "legend", labelDescription: legendDescription, required, children: legend }) : null,
-      /* @__PURE__ */ jsx(Row, { gap: 2, templateColumns: `repeat(${columns}, minmax(0, 1fr))`, children })
-    ] }) }),
-    helper ? /* @__PURE__ */ jsx(Text, { as: "span", prominence: "weak", sentiment: "neutral", variant: "caption", children: helper }) : null,
+    /* @__PURE__ */ jsx(
+      "fieldset",
+      {
+        className: `${className ? `${className} ` : ""}${selectableCardGroupFieldSet}`,
+        children: /* @__PURE__ */ jsxs(Stack, { gap: 1.5, children: [
+          legend ? /* @__PURE__ */ jsx(
+            Label,
+            {
+              as: "legend",
+              labelDescription: legendDescription,
+              required,
+              children: legend
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(Row, { gap: 2, templateColumns: `repeat(${columns}, minmax(0, 1fr))`, children })
+        ] })
+      }
+    ),
+    helper ? /* @__PURE__ */ jsx(
+      Text,
+      {
+        as: "span",
+        prominence: "weak",
+        sentiment: "neutral",
+        variant: "caption",
+        children: helper
+      }
+    ) : null,
     error ? /* @__PURE__ */ jsx(Text, { as: "span", sentiment: "danger", variant: "caption", children: error }) : null
   ] }) });
 };

package/dist/components/SelectableCardOptionGroup/Provider.js

@@ -14,7 +14,9 @@ const SelectableCardOptionGroupContext = createContext({
 const useSelectableCardOptionGroup = () => {
   const context = useContext(SelectableCardOptionGroupContext);
   if (!context) {
-    throw new Error("SelectableCardOptionGroup.Option must be used inside a SelectableCardOptionGroup");
+    throw new Error(
+      "SelectableCardOptionGroup.Option must be used inside a SelectableCardOptionGroup"
+    );
   }
   return context;
 };

package/dist/components/SelectableCardOptionGroup/components/Image.d.ts

@@ -6,5 +6,5 @@ type ImageType = {
     size: Sizes;
     disabled?: boolean;
 };
-export declare const Image: ({ src, alt, size, disabled, className }: ImageType) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Image: ({ src, alt, size, disabled, className }: ImageType) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/SelectableCardOptionGroup/components/Image.js

@@ -1,17 +1,21 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { disabledImage } from "../styles.css.js";
 const IMAGE_SIZES = {
   large: 56,
   medium: 40
 };
-const Image = ({
-  src,
-  alt,
-  size,
-  disabled,
-  className
-}) => /* @__PURE__ */ jsx("img", { alt, className: `${className ? `${className} ` : ""}${disabled ? disabledImage : ""}`, "data-disabled": disabled, height: IMAGE_SIZES[size], src, width: IMAGE_SIZES[size] });
+const Image = ({ src, alt, size, disabled, className }) => /* @__PURE__ */ jsx(
+  "img",
+  {
+    alt,
+    className: `${className ? `${className} ` : ""}${disabled ? disabledImage : ""}`,
+    "data-disabled": disabled,
+    height: IMAGE_SIZES[size],
+    src,
+    width: IMAGE_SIZES[size]
+  }
+);
 export {
   Image
 };

package/dist/components/SelectableCardOptionGroup/components/Option.d.ts

@@ -15,5 +15,5 @@ type OptionProps = Omit<ComponentProps<typeof SelectableCard>, 'onChange'> & {
     'data-testid'?: string;
     tooltip?: string;
 };
-export declare const Option: ({ value, label, labelDescription, "aria-label": ariaLabel, children, className, options, optionPlaceholder, image, disabled, id, "data-testid": dataTestId, tooltip, style, }: OptionProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Option: ({ value, label, labelDescription, "aria-label": ariaLabel, children, className, options, optionPlaceholder, image, disabled, id, "data-testid": dataTestId, tooltip, style, }: OptionProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/SelectableCardOptionGroup/components/Option.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import { Label } from "../../Label/index.js";
 import { SelectableCard } from "../../SelectableCard/index.js";
@@ -35,25 +35,102 @@ const Option = ({
   } = useSelectableCardOptionGroup();
   const generatedId = useId();
   const inputId = id || generatedId;
-  return /* @__PURE__ */ jsx(SelectableCard, { checked: groupValue === value, className: `${className ? `${className} ` : ""}${selectableCard}`, "data-testid": dataTestId, disabled: disabled || groupDisabled, isError: error, onChange: (event) => {
-    onChange?.(event);
-    if (Array.isArray(options)) {
-      onChangeOption?.(options?.[0]?.value);
+  return /* @__PURE__ */ jsx(
+    SelectableCard,
+    {
+      checked: groupValue === value,
+      className: `${className ? `${className} ` : ""}${selectableCard}`,
+      "data-testid": dataTestId,
+      disabled: disabled || groupDisabled,
+      isError: error,
+      onChange: (event) => {
+        onChange?.(event);
+        if (Array.isArray(options)) {
+          onChangeOption?.(options?.[0]?.value);
+        }
+      },
+      showTick: true,
+      style,
+      tooltip,
+      type: "radio",
+      value,
+      ...label ? { id: inputId } : { "aria-label": ariaLabel },
+      children: /* @__PURE__ */ jsxs(
+        Stack,
+        {
+          className: optionFullHeight,
+          direction: "column",
+          flex: "1 1 auto",
+          gap: 2,
+          justifyContent: "space-between",
+          width: "100%",
+          children: [
+            /* @__PURE__ */ jsxs(
+              Stack,
+              {
+                alignItems: "center",
+                className: optionPadded,
+                direction: "column",
+                gap: 1,
+                justifyContent: "center",
+                width: "100%",
+                children: [
+                  typeof image === "string" ? /* @__PURE__ */ jsx(
+                    Image,
+                    {
+                      alt: typeof label === "string" ? label : value,
+                      disabled: disabled || groupDisabled,
+                      size,
+                      src: image
+                    }
+                  ) : image,
+                  /* @__PURE__ */ jsxs(
+                    Stack,
+                    {
+                      alignItems: "center",
+                      direction: "column",
+                      gap: 0.5,
+                      justifyContent: "center",
+                      width: "100%",
+                      children: [
+                        typeof label === "string" ? /* @__PURE__ */ jsx(
+                          Label,
+                          {
+                            disabled: disabled || groupDisabled,
+                            htmlFor: inputId,
+                            labelDescription,
+                            sentiment: groupValue === value ? "primary" : "neutral",
+                            children: label
+                          }
+                        ) : label,
+                        children
+                      ]
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              SelectInput,
+              {
+                "aria-label": typeof label === "string" ? `${label} option` : `${value} option`,
+                className: `${optionSelectInput} ${disabled || groupDisabled ? optionSelectInputDisabled : ""} ${error ? optionSelectInputError : ""}`,
+                "data-testid": dataTestId ? `${dataTestId}-select` : void 0,
+                disabled: disabled || groupDisabled,
+                error,
+                name: "selectable-card-option",
+                onChange: onChangeOption,
+                options,
+                placeholder: optionPlaceholder,
+                size: "medium",
+                value: optionValue
+              }
+            )
+          ]
+        }
+      )
     }
-  }, showTick: true, style, tooltip, type: "radio", value, ...label ? {
-    id: inputId
-  } : {
-    "aria-label": ariaLabel
-  }, children: /* @__PURE__ */ jsxs(Stack, { className: optionFullHeight, direction: "column", flex: "1 1 auto", gap: 2, justifyContent: "space-between", width: "100%", children: [
-    /* @__PURE__ */ jsxs(Stack, { alignItems: "center", className: optionPadded, direction: "column", gap: 1, justifyContent: "center", width: "100%", children: [
-      typeof image === "string" ? /* @__PURE__ */ jsx(Image, { alt: typeof label === "string" ? label : value, disabled: disabled || groupDisabled, size, src: image }) : image,
-      /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "column", gap: 0.5, justifyContent: "center", width: "100%", children: [
-        typeof label === "string" ? /* @__PURE__ */ jsx(Label, { disabled: disabled || groupDisabled, htmlFor: inputId, labelDescription, sentiment: groupValue === value ? "primary" : "neutral", children: label }) : label,
-        children
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx(SelectInput, { "aria-label": typeof label === "string" ? `${label} option` : `${value} option`, className: `${optionSelectInput} ${disabled || groupDisabled ? optionSelectInputDisabled : ""} ${error ? optionSelectInputError : ""}`, "data-testid": dataTestId ? `${dataTestId}-select` : void 0, disabled: disabled || groupDisabled, error, name: "selectable-card-option", onChange: onChangeOption, options, placeholder: optionPlaceholder, size: "medium", value: optionValue })
-  ] }) });
+  );
 };
 export {
   Option

package/dist/components/SelectableCardOptionGroup/index.d.ts

@@ -30,7 +30,7 @@ type SelectableCardOptionGroupProps = {
  * **Be aware that once you click on the component, the first value of options will be selected by default.**
  */
 export declare const SelectableCardOptionGroup: {
-    ({ legend, legendDescription, className, required, columns, children, helper, error, onChange, value, optionValue, onChangeOption, name, disabled, size, style, }: SelectableCardOptionGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    ({ legend, legendDescription, className, required, columns, children, helper, error, onChange, value, optionValue, onChangeOption, name, disabled, size, style, }: SelectableCardOptionGroupProps): import("react/jsx-runtime").JSX.Element;
     Option: ({ value, label, labelDescription, "aria-label": ariaLabel, children, className, options, optionPlaceholder, image, disabled, id, "data-testid": dataTestId, tooltip, style, }: Omit<import("../SelectableCard").SelectableCardProps & import("react").RefAttributes<HTMLDivElement>, "onChange"> & {
         value: string;
         className?: string;
@@ -43,6 +43,6 @@ export declare const SelectableCardOptionGroup: {
         id?: string;
         'data-testid'?: string;
         tooltip?: string;
-    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    }) => import("react/jsx-runtime").JSX.Element;
 };
 export {};