@dnanpm/styleguide 4.0.8 → 4.0.10

package/build/es/components/PriorityNavigationItem/PriorityNavigationItem.js

@@ -4,63 +4,41 @@ import { styled } from 'styled-components';
 import theme from '../../themes/theme.js';
 import { media } from '../../utils/styledUtils.js';
 
-const Element = styled.li `
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    list-style: none;
-    position: relative;
-    padding: 0.75rem 1.25rem;
-    flex-shrink: 0;
-
-    ${({ onClick }) => onClick && `cursor: pointer;`}
-
-    &:focus-within {
-        & > *:not(a, span.dnasg-icon) {
-            border-radius: ${theme.radius.s};
-            border: 2px solid ${theme.color.focus.light};
-            box-shadow: 0px 0px 0px 2px ${theme.color.focus.dark};
-            outline: none;
-        }
-    }
-
-    ${({ $isActive }) => media.md `
+const Element = styled.li.withConfig({
+  displayName: "PriorityNavigationItem__Element",
+  componentId: "sc-3bvpmb-0"
+})(["display:flex;align-items:center;justify-content:space-between;list-style:none;position:relative;padding:0.75rem 1.25rem;flex-shrink:0;", " &:focus-within{& > *:not(a,span.dnasg-icon){border-radius:", ";border:2px solid ", ";box-shadow:0px 0px 0px 2px ", ";outline:none;}}", " & > a{text-decoration:none;&:focus-visible{border-radius:", ";border:2px solid ", ";box-shadow:0px 0px 0px 2px ", ";outline:none;}}& > *{display:block;color:", ";", " border:2px solid transparent;&:hover{color:", ";text-decoration:none;}}"], ({
+  onClick
+}) => onClick && `cursor: pointer;`, theme.radius.s, theme.color.focus.light, theme.color.focus.dark, ({
+  $isActive
+}) => media.md`
         justify-content: left;
         padding: 1rem 0;
         margin: auto 1rem;
         border-top: 3px solid transparent;
         border-bottom: 3px solid ${$isActive ? theme.color.text.pink : 'transparent'};
-    `}
-
-    & > a {
-        text-decoration: none;
-
-        &:focus-visible {
-            border-radius: ${theme.radius.s};
-            border: 2px solid ${theme.color.focus.light};
-            box-shadow: 0px 0px 0px 2px ${theme.color.focus.dark};
-            outline: none;
-        }
-    }
-
-    & > * {
-        display: block;
-        color: ${({ $isActive }) => ($isActive ? theme.color.text.pink : theme.color.text.black)};
-        ${({ $isActive }) => $isActive && `font-weight: ${theme.fontWeight.bold};`}
-        border: 2px solid transparent;
-
-        &:hover {
-            color: ${theme.color.hover.pink};
-            text-decoration: none;
-        }
-    }
-`;
+    `, theme.radius.s, theme.color.focus.light, theme.color.focus.dark, ({
+  $isActive
+}) => $isActive ? theme.color.text.pink : theme.color.text.black, ({
+  $isActive
+}) => $isActive && `font-weight: ${theme.fontWeight.bold};`, theme.color.hover.pink);
 /**
  * @visibleName Priority NavigationItem
  */
-const PriorityNavigationItem = React__default.forwardRef((_a, ref) => {
-    var { 'data-testid': dataTestId } = _a, props = __rest(_a, ['data-testid']);
-    return (React__default.createElement(Element, { id: props.id, ref: ref, onClick: props.onClick, onKeyDown: props.onKeyDown, "$isActive": props.isActive, className: props.className, "data-testid": dataTestId }, props.children));
+const PriorityNavigationItem = /*#__PURE__*/React__default.forwardRef((_a, ref) => {
+  var {
+      'data-testid': dataTestId
+    } = _a,
+    props = __rest(_a, ['data-testid']);
+  return /*#__PURE__*/React__default.createElement(Element, {
+    id: props.id,
+    ref: ref,
+    onClick: props.onClick,
+    onKeyDown: props.onKeyDown,
+    "$isActive": props.isActive,
+    className: props.className,
+    "data-testid": dataTestId
+  }, props.children);
 });
 PriorityNavigationItem.displayName = 'PriorityNavigationItem';
 

package/build/es/components/ProgressIndicator/ProgressIndicator.js

@@ -6,50 +6,33 @@ import theme from '../../themes/theme.js';
 import { getMultipliedSize, media } from '../../utils/styledUtils.js';
 import Icon from '../Icon/Icon.js';
 
-const getBackgroundColor = ({ isActive, isError, }) => {
-    const defaultColor = theme.color.background.white.default;
-    const currentColor = isError
-        ? theme.color.notification.error
-        : theme.color.background.pink.default;
-    return `background-color: ${isError || isActive ? currentColor : defaultColor};`;
+const getBackgroundColor = ({
+  isActive,
+  isError
+}) => {
+  const defaultColor = theme.color.background.white.default;
+  const currentColor = isError ? theme.color.notification.error : theme.color.background.pink.default;
+  return `background-color: ${isError || isActive ? currentColor : defaultColor};`;
 };
-const getBorderColor = ({ isActive, isCompleted, isError }) => {
-    const defaultColor = theme.color.line.L02;
-    const currentColor = isError
-        ? theme.color.notification.error
-        : theme.color.background.pink.default;
-    return isActive || isCompleted ? currentColor : defaultColor;
+const getBorderColor = ({
+  isActive,
+  isCompleted,
+  isError
+}) => {
+  const defaultColor = theme.color.line.L02;
+  const currentColor = isError ? theme.color.notification.error : theme.color.background.pink.default;
+  return isActive || isCompleted ? currentColor : defaultColor;
 };
-const ProgressIndicatorWrapper = styled.ul `
-    display: flex;
-    justify-content: space-between;
-    margin: 0;
-    padding: 0;
-`;
-const ProgressIndicatorItem = styled.li `
-    position: relative;
-    display: inline-flex;
-    flex-direction: column;
-    align-items: center;
-    flex: 1.5 1 0%;
-    gap: ${({ $small }) => getMultipliedSize(theme.base.baseWidth, $small ? 0.5 : 1)};
-
-    &:first-of-type {
-        align-items: flex-start;
-        flex: 1 1 0%;
-    }
-
-    &:last-of-type {
-        align-items: flex-end;
-        flex: 1 1 0%;
-
-        & > div:first-of-type {
-            width: 150%;
-            left: -75%;
-        }
-    }
-
-    ${media.sm `
+const ProgressIndicatorWrapper = styled.ul.withConfig({
+  displayName: "ProgressIndicator__ProgressIndicatorWrapper",
+  componentId: "sc-cf6c8h-0"
+})(["display:flex;justify-content:space-between;margin:0;padding:0;"]);
+const ProgressIndicatorItem = styled.li.withConfig({
+  displayName: "ProgressIndicator__ProgressIndicatorItem",
+  componentId: "sc-cf6c8h-1"
+})(["position:relative;display:inline-flex;flex-direction:column;align-items:center;flex:1.5 1 0%;gap:", ";&:first-of-type{align-items:flex-start;flex:1 1 0%;}&:last-of-type{align-items:flex-end;flex:1 1 0%;& > div:first-of-type{width:150%;left:-75%;}}", ""], ({
+  $small
+}) => getMultipliedSize(theme.base.baseWidth, $small ? 0.5 : 1), media.sm`
         flex: 2 1 0%;
 
         &:last-of-type {
@@ -58,40 +41,57 @@ const ProgressIndicatorItem = styled.li `
                 left: -100%;
             }
         }
-    `}
-`;
-const ProgressIndicatorItemConnector = styled.div `
-    position: absolute;
-    top: ${({ $small }) => getMultipliedSize(theme.base.baseHeight, $small ? 1.5 : 2)};
-    left: -50%;
-    right: 50%;
-    width: 100%;
-    height: ${({ $small }) => ($small ? '2px' : '4px')};
-    background-color: ${({ $isActive, $isCompleted }) => $isActive || $isCompleted ? theme.color.default.pink : theme.color.line.L02};
-`;
-const ProgressIndicatorItemNumber = styled.div `
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: ${({ $small }) => ($small ? theme.fontSize.s : theme.fontSize.l)};
-    font-weight: ${theme.fontWeight.bold};
-    width: ${({ $small }) => getMultipliedSize(theme.base.baseWidth, $small ? 3 : 4)};
-    height: ${({ $small }) => getMultipliedSize(theme.base.baseHeight, $small ? 3 : 4)};
-    cursor: ${({ $isClickable }) => ($isClickable ? 'pointer' : 'default')};
-    color: ${({ $isActive }) => ($isActive ? theme.color.text.white : theme.color.text.gray)};
-    border-radius: ${theme.radius.circle};
-    border: ${({ $small, $isActive, $isCompleted, $isError }) => `${$small ? '3px' : '4px'} solid ${getBorderColor({ isActive: $isActive, isCompleted: $isCompleted, isError: $isError })}`};
-    z-index: 1;
-
-    ${({ $isActive, $isError }) => getBackgroundColor({ isActive: $isActive, isError: $isError })}
-`;
-const ProgressIndicatorItemLabel = styled.div `
-    font-size: ${({ $small }) => ($small ? theme.fontSize.xs : theme.fontSize.s)};
-    line-height: ${({ $small }) => ($small ? theme.lineHeight.xs : theme.lineHeight.s)};
-    font-weight: ${theme.fontWeight.bold};
-    color: ${({ $isActive }) => ($isActive ? theme.color.text.black : theme.color.text.gray)};
-
-    ${media.sm `
+    `);
+const ProgressIndicatorItemConnector = styled.div.withConfig({
+  displayName: "ProgressIndicator__ProgressIndicatorItemConnector",
+  componentId: "sc-cf6c8h-2"
+})(["position:absolute;top:", ";left:-50%;right:50%;width:100%;height:", ";background-color:", ";"], ({
+  $small
+}) => getMultipliedSize(theme.base.baseHeight, $small ? 1.5 : 2), ({
+  $small
+}) => $small ? '2px' : '4px', ({
+  $isActive,
+  $isCompleted
+}) => $isActive || $isCompleted ? theme.color.default.pink : theme.color.line.L02);
+const ProgressIndicatorItemNumber = styled.div.withConfig({
+  displayName: "ProgressIndicator__ProgressIndicatorItemNumber",
+  componentId: "sc-cf6c8h-3"
+})(["display:flex;justify-content:center;align-items:center;font-size:", ";font-weight:", ";width:", ";height:", ";cursor:", ";color:", ";border-radius:", ";border:", ";z-index:1;", ""], ({
+  $small
+}) => $small ? theme.fontSize.s : theme.fontSize.l, theme.fontWeight.bold, ({
+  $small
+}) => getMultipliedSize(theme.base.baseWidth, $small ? 3 : 4), ({
+  $small
+}) => getMultipliedSize(theme.base.baseHeight, $small ? 3 : 4), ({
+  $isClickable
+}) => $isClickable ? 'pointer' : 'default', ({
+  $isActive
+}) => $isActive ? theme.color.text.white : theme.color.text.gray, theme.radius.circle, ({
+  $small,
+  $isActive,
+  $isCompleted,
+  $isError
+}) => `${$small ? '3px' : '4px'} solid ${getBorderColor({
+  isActive: $isActive,
+  isCompleted: $isCompleted,
+  isError: $isError
+})}`, ({
+  $isActive,
+  $isError
+}) => getBackgroundColor({
+  isActive: $isActive,
+  isError: $isError
+}));
+const ProgressIndicatorItemLabel = styled.div.withConfig({
+  displayName: "ProgressIndicator__ProgressIndicatorItemLabel",
+  componentId: "sc-cf6c8h-4"
+})(["font-size:", ";line-height:", ";font-weight:", ";color:", ";", ""], ({
+  $small
+}) => $small ? theme.fontSize.xs : theme.fontSize.s, ({
+  $small
+}) => $small ? theme.lineHeight.xs : theme.lineHeight.s, theme.fontWeight.bold, ({
+  $isActive
+}) => $isActive ? theme.color.text.black : theme.color.text.gray, media.sm`
         &.visually-hidden {
             width: auto;
             height: auto;
@@ -99,40 +99,71 @@ const ProgressIndicatorItemLabel = styled.div `
             clip: auto;
             opacity: 1;
         }
-    `}
-`;
+    `);
 /** @visibleName Progress Indicator */
-const ProgressIndicator = (_a) => {
-    var { activeStep = 0, 'data-testid': dataTestId } = _a, props = __rest(_a, ["activeStep", 'data-testid']);
-    const stepsArray = Array.isArray(props.steps)
-        ? props.steps
-        : Array(props.steps).fill('');
-    const progressIndicatorItems = stepsArray.map((label, index) => {
-        const id = `id-${label}-${index}`;
-        const stepNumber = index + 1;
-        const isActive = index === activeStep;
-        const isCompleted = index < activeStep;
-        const isError = isActive && props.status === 'error';
-        const handleClick = (e) => {
-            if (props.onStepClick) {
-                props.onStepClick(index, e);
-            }
-        };
-        const handleKeyDown = (e) => {
-            if ((e.key === 'Enter' || e.key === ' ') && props.onStepClick) {
-                e.preventDefault();
-                props.onStepClick(index, e);
-            }
-        };
-        const isClickable = isCompleted && Boolean(props.onStepClick);
-        return (React__default.createElement(ProgressIndicatorItem, { key: id, "$small": props.small },
-            index > 0 && (React__default.createElement(ProgressIndicatorItemConnector, { "$small": props.small, "$isActive": isActive, "$isCompleted": isCompleted })),
-            React__default.createElement(ProgressIndicatorItemNumber, { "$small": props.small, "$isActive": isActive, "$isCompleted": isCompleted, "$isError": isError, "$isClickable": isClickable, onClick: handleClick, onKeyDown: handleKeyDown, tabIndex: isClickable || isActive ? 0 : -1, role: "tab", "aria-current": isActive ? 'step' : 'false', "aria-label": isCompleted && props.completedStepLabel
-                    ? `${label}, ${props.completedStepLabel}`
-                    : label }, isCompleted || isError ? (React__default.createElement(Icon, { icon: isError ? Warning : Check, color: isError ? theme.color.text.white : theme.color.text.pink, size: "1rem", "aria-hidden": true })) : (stepNumber)),
-            label && (React__default.createElement(ProgressIndicatorItemLabel, { "aria-hidden": true, "$small": props.small, "$isActive": isActive, onClick: handleClick, className: "visually-hidden" }, label))));
-    });
-    return (React__default.createElement(ProgressIndicatorWrapper, { className: props.className, "data-testid": dataTestId, "aria-label": props.ariaLabel, role: "tablist" }, progressIndicatorItems));
+const ProgressIndicator = _a => {
+  var {
+      activeStep = 0,
+      'data-testid': dataTestId
+    } = _a,
+    props = __rest(_a, ["activeStep", 'data-testid']);
+  const stepsArray = Array.isArray(props.steps) ? props.steps : Array(props.steps).fill('');
+  const progressIndicatorItems = stepsArray.map((label, index) => {
+    const id = `id-${label}-${index}`;
+    const stepNumber = index + 1;
+    const isActive = index === activeStep;
+    const isCompleted = index < activeStep;
+    const isError = isActive && props.status === 'error';
+    const handleClick = e => {
+      if (props.onStepClick) {
+        props.onStepClick(index, e);
+      }
+    };
+    const handleKeyDown = e => {
+      if ((e.key === 'Enter' || e.key === ' ') && props.onStepClick) {
+        e.preventDefault();
+        props.onStepClick(index, e);
+      }
+    };
+    const isClickable = isCompleted && Boolean(props.onStepClick);
+    return /*#__PURE__*/React__default.createElement(ProgressIndicatorItem, {
+      key: id,
+      "$small": props.small
+    }, index > 0 && (/*#__PURE__*/React__default.createElement(ProgressIndicatorItemConnector, {
+      "$small": props.small,
+      "$isActive": isActive,
+      "$isCompleted": isCompleted
+    })), /*#__PURE__*/React__default.createElement(ProgressIndicatorItemNumber, {
+      "$small": props.small,
+      "$isActive": isActive,
+      "$isCompleted": isCompleted,
+      "$isError": isError,
+      "$isClickable": isClickable,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      tabIndex: isClickable || isActive ? 0 : -1,
+      role: "tab",
+      "aria-current": isActive ? 'step' : 'false',
+      "aria-label": isCompleted && props.completedStepLabel ? `${label}, ${props.completedStepLabel}` : label
+    }, isCompleted || isError ? (/*#__PURE__*/React__default.createElement(Icon, {
+      icon: isError ? Warning : Check,
+      color: isError ? theme.color.text.white : theme.color.text.pink,
+      size: "1rem",
+      "aria-hidden": true
+    })) : stepNumber), label && (/*#__PURE__*/React__default.createElement(ProgressIndicatorItemLabel, {
+      "aria-hidden": true,
+      "$small": props.small,
+      "$isActive": isActive,
+      onClick: handleClick,
+      className: "visually-hidden"
+    }, label)));
+  });
+  return /*#__PURE__*/React__default.createElement(ProgressIndicatorWrapper, {
+    className: props.className,
+    "data-testid": dataTestId,
+    "aria-label": props.ariaLabel,
+    role: "tablist"
+  }, progressIndicatorItems);
 };
 
 export { ProgressIndicator as default };

package/build/es/components/RadioButton/RadioButton.js

@@ -4,124 +4,101 @@ import { styled } from 'styled-components';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 
-const Container = styled.div `
-    display: flex;
-    margin-bottom: ${getMultipliedSize(theme.base.baseHeight, 0.5)};
-`;
-const Input = styled.input `
-    display: inline-grid;
-    appearance: none;
-    place-content: center;
-    float: left;
-    margin: 0;
-    cursor: pointer;
-    font-family: ${theme.fontFamily.default};
-    font-size: ${theme.fontSize.default};
-    line-height: ${theme.lineHeight.default};
-    min-width: ${getMultipliedSize(theme.base.baseWidth, 2)};
-    width: ${getMultipliedSize(theme.base.baseWidth, 2)};
-    height: ${getMultipliedSize(theme.base.baseWidth, 2)};
-    color: ${theme.color.line.L01};
-    border: 2px solid ${theme.color.line.L01};
-    background-color: ${theme.color.background.white.default};
-    border-radius: ${theme.radius.circle};
-
-    & + label {
-        cursor: pointer;
-        color: ${theme.color.text.black};
-        font-weight: ${theme.fontWeight.medium};
-        padding-left: ${getMultipliedSize(theme.base.baseWidth, 1)};
-    }
-
-    &::before {
-        content: '';
-        transform: scale(0);
-        background-color: currentColor;
-        border-radius: ${theme.radius.circle};
-        width: ${getMultipliedSize(theme.base.baseWidth, 1.2)};
-        height: ${getMultipliedSize(theme.base.baseHeight, 1.2)};
-    }
-
-    &:checked {
-        color: ${theme.color.default.pink};
-        border-color: ${theme.color.default.pink};
-
-        &::before {
-            transform: scale(1);
-        }
-    }
-
-    &:disabled {
-        cursor: not-allowed;
-        color: ${theme.color.text.gray};
-        background-color: ${theme.color.line.L02 + theme.color.transparency.T40};
-        border-color: ${theme.color.line.L01 + theme.color.transparency.T40};
-
-        & + label {
-            cursor: not-allowed;
-            color: ${theme.color.text.gray};
-        }
-    }
-
-    &:disabled:checked {
-        color: ${theme.color.background.pink.E02};
-        border-color: ${theme.color.background.pink.E02};
-        background-color: ${theme.color.background.white.default};
-    }
-
-    &:focus-visible {
-        outline: none;
-        box-shadow:
-            0px 0px 0px 2px ${theme.color.focus.light},
-            0px 0px 0px 4px ${theme.color.focus.dark};
-    }
-`;
+const Container = styled.div.withConfig({
+  displayName: "RadioButton__Container",
+  componentId: "sc-328ii9-0"
+})(["display:flex;margin-bottom:", ";"], getMultipliedSize(theme.base.baseHeight, 0.5));
+const Input = styled.input.withConfig({
+  displayName: "RadioButton__Input",
+  componentId: "sc-328ii9-1"
+})(["display:inline-grid;appearance:none;place-content:center;float:left;margin:0;cursor:pointer;font-family:", ";font-size:", ";line-height:", ";min-width:", ";width:", ";height:", ";color:", ";border:2px solid ", ";background-color:", ";border-radius:", ";& + label{cursor:pointer;color:", ";font-weight:", ";padding-left:", ";}&::before{content:'';transform:scale(0);background-color:currentColor;border-radius:", ";width:", ";height:", ";}&:checked{color:", ";border-color:", ";&::before{transform:scale(1);}}&:disabled{cursor:not-allowed;color:", ";background-color:", ";border-color:", ";& + label{cursor:not-allowed;color:", ";}}&:disabled:checked{color:", ";border-color:", ";background-color:", ";}&:focus-visible{outline:none;box-shadow:0px 0px 0px 2px ", ",0px 0px 0px 4px ", ";}"], theme.fontFamily.default, theme.fontSize.default, theme.lineHeight.default, getMultipliedSize(theme.base.baseWidth, 2), getMultipliedSize(theme.base.baseWidth, 2), getMultipliedSize(theme.base.baseWidth, 2), theme.color.line.L01, theme.color.line.L01, theme.color.background.white.default, theme.radius.circle, theme.color.text.black, theme.fontWeight.medium, getMultipliedSize(theme.base.baseWidth, 1), theme.radius.circle, getMultipliedSize(theme.base.baseWidth, 1.2), getMultipliedSize(theme.base.baseHeight, 1.2), theme.color.default.pink, theme.color.default.pink, theme.color.text.gray, theme.color.line.L02 + theme.color.transparency.T40, theme.color.line.L01 + theme.color.transparency.T40, theme.color.text.gray, theme.color.background.pink.E02, theme.color.background.pink.E02, theme.color.background.white.default, theme.color.focus.light, theme.color.focus.dark);
 /** @visibleName Radio Button */
-const RadioButtonComponent = (_a) => {
-    var { 'data-testid': dataTestId } = _a, props = __rest(_a, ['data-testid']);
-    return (React__default.createElement(Container, { className: props.className, "data-testid": dataTestId },
-        React__default.createElement(Input, { id: props.id, name: props.name, type: "radio", checked: props.checked, value: props.value, disabled: props.disabled, onChange: props.onChange, "data-checked": Boolean(props.checked), "data-testid": dataTestId && `${dataTestId}-input` }),
-        props.label && (React__default.createElement("label", { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label` }, props.label))));
+const RadioButtonComponent = _a => {
+  var {
+      'data-testid': dataTestId
+    } = _a,
+    props = __rest(_a, ['data-testid']);
+  return /*#__PURE__*/React__default.createElement(Container, {
+    className: props.className,
+    "data-testid": dataTestId
+  }, /*#__PURE__*/React__default.createElement(Input, {
+    id: props.id,
+    name: props.name,
+    type: "radio",
+    checked: props.checked,
+    value: props.value,
+    disabled: props.disabled,
+    onChange: props.onChange,
+    "data-checked": Boolean(props.checked),
+    "data-testid": dataTestId && `${dataTestId}-input`
+  }), props.label && (/*#__PURE__*/React__default.createElement("label", {
+    htmlFor: props.id,
+    "data-testid": dataTestId && `${dataTestId}-label`
+  }, props.label)));
 };
-const StyledFieldset = styled.fieldset `
-    border: 0;
-    margin: 0;
-    padding: 0;
-    min-inline-size: unset;
-`;
-const RadioButtonGroup = ({ label, description, groupName, value, onChange, id, options, children, groupVariant, className, 'data-testid': dataTestId, }) => {
-    const isFieldset = groupVariant === 'fieldset';
-    const baseId = id !== null && id !== void 0 ? id : (typeof label === 'string'
-        ? label
-            .normalize('NFKD')
-            .replace(/[\u0300-\u036f]/g, '')
-            .replace(/\s+/g, '-')
-            .replace(/[^a-zA-Z0-9-_]/g, '')
-            .toLowerCase()
-        : 'radio-group');
-    const labelId = `${baseId}-label`;
-    const descriptionId = `${baseId}-description`;
-    const combinedDescribedBy = [description ? descriptionId : undefined].filter(Boolean).join(' ');
-    const content = children ||
-        (options === null || options === void 0 ? void 0 : options.map(option => (React__default.createElement(RadioButtonComponent, { key: option.id, id: option.id, name: groupName, value: option.value, label: option.label, disabled: option.disabled, checked: value === option.value, onChange: onChange, className: option.className, "data-testid": option['data-testid'] }))));
-    const Wrapper = isFieldset ? StyledFieldset : 'div';
-    const renderLabel = () => {
-        if (!label)
-            return null;
-        return isFieldset ? (React__default.createElement("legend", { id: labelId, "data-testid": dataTestId ? `${dataTestId}-label` : undefined }, label)) : (React__default.createElement("div", { id: labelId, "data-testid": dataTestId ? `${dataTestId}-label` : undefined }, label));
-    };
-    const renderDescription = () => {
-        if (!description)
-            return null;
-        return (React__default.createElement("div", { id: descriptionId, "data-testid": dataTestId ? `${dataTestId}-description` : undefined }, description));
-    };
-    return (React__default.createElement(Wrapper, { id: isFieldset ? id : undefined, role: !isFieldset ? 'radiogroup' : undefined, "aria-labelledby": !isFieldset && label ? labelId : undefined, "aria-describedby": !isFieldset && description ? combinedDescribedBy : undefined, className: className, "data-testid": dataTestId },
-        renderLabel(),
-        renderDescription(),
-        content));
+const StyledFieldset = styled.fieldset.withConfig({
+  displayName: "RadioButton__StyledFieldset",
+  componentId: "sc-328ii9-2"
+})(["border:0;margin:0;padding:0;min-inline-size:unset;"]);
+const RadioButtonGroup = ({
+  label,
+  description,
+  groupName,
+  value,
+  onChange,
+  id,
+  options,
+  children,
+  groupVariant,
+  className,
+  'data-testid': dataTestId
+}) => {
+  const isFieldset = groupVariant === 'fieldset';
+  const baseId = id !== null && id !== void 0 ? id : typeof label === 'string' ? label.normalize('NFKD').replace(/[\u0300-\u036f]/g, '').replace(/\s+/g, '-').replace(/[^a-zA-Z0-9-_]/g, '').toLowerCase() : 'radio-group';
+  const labelId = `${baseId}-label`;
+  const descriptionId = `${baseId}-description`;
+  const combinedDescribedBy = [description ? descriptionId : undefined].filter(Boolean).join(' ');
+  const content = children || (options === null || options === void 0 ? void 0 : options.map(option => (/*#__PURE__*/React__default.createElement(RadioButtonComponent, {
+    key: option.id,
+    id: option.id,
+    name: groupName,
+    value: option.value,
+    label: option.label,
+    disabled: option.disabled,
+    checked: value === option.value,
+    onChange: onChange,
+    className: option.className,
+    "data-testid": option['data-testid']
+  }))));
+  const Wrapper = isFieldset ? StyledFieldset : 'div';
+  const renderLabel = () => {
+    if (!label) return null;
+    return isFieldset ? (/*#__PURE__*/React__default.createElement("legend", {
+      id: labelId,
+      "data-testid": dataTestId ? `${dataTestId}-label` : undefined
+    }, label)) : (/*#__PURE__*/React__default.createElement("div", {
+      id: labelId,
+      "data-testid": dataTestId ? `${dataTestId}-label` : undefined
+    }, label));
+  };
+  const renderDescription = () => {
+    if (!description) return null;
+    return /*#__PURE__*/React__default.createElement("div", {
+      id: descriptionId,
+      "data-testid": dataTestId ? `${dataTestId}-description` : undefined
+    }, description);
+  };
+  return /*#__PURE__*/React__default.createElement(Wrapper, {
+    id: isFieldset ? id : undefined,
+    role: !isFieldset ? 'radiogroup' : undefined,
+    "aria-labelledby": !isFieldset && label ? labelId : undefined,
+    "aria-describedby": !isFieldset && description ? combinedDescribedBy : undefined,
+    className: className,
+    "data-testid": dataTestId
+  }, renderLabel(), renderDescription(), content);
 };
 const RadioButton = Object.assign(RadioButtonComponent, {
-    Group: RadioButtonGroup,
+  Group: RadioButtonGroup
 });
 
 export { RadioButton as default };