import { jsx, jsxs, Fragment } from "react/jsx-runtime";
import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-DWVaNd2E.js";
import { b as $3ef42575df84b30b$export$9d1611c77c2fe928, d as $bdb11010cef70236$export$f680877a34711e37, a as $64fa3d84918910a7$export$29f1550f4b0d4415, l as $df56164dff5785e2$export$4338b53315abf666, m as $5dc95899b306f630$export$c9058316764c140e, g as $64fa3d84918910a7$export$ef03459518577ad4, h as $64fa3d84918910a7$export$4d86445c2cf5e3, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, f as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, i as $64fa3d84918910a7$export$2881499e37b75b9a } from "../../utils-cvK1vxO7.js";
import { a as $2baaea4c71418dea$export$294aa081a6c6f55d, $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-B8BgFmIQ.js";
import { $ as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "../../Form-Cq3fu75_.js";
import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-AxKZjtFm.js";
import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-D2C6R0DK.js";
import React__default, { useMemo, useState, forwardRef, createContext, cloneElement } from "react";
import { $ as $99facab73266f662$export$5add1d006293d136 } from "../../useFormReset-yV9VVy9R.js";
import { $ as $f6c31cce2adf654f$export$45712eceda6fad21 } from "../../usePress-CBQIDzpQ.js";
import { $ as $f645667febf57a63$export$4c014de7c8940b4c, x as $431fbd86ca7dc216$export$f21a1ffae260145a, a as $458b0a5536c1a7cf$export$40bfa8c7b0832715, w as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-LmGemtHE.js";
import { a as $e93e671b31057976$export$b8473d3665f3a75a, $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10 } from "../../useFormValidation-CUtZcedF.js";
import { a as $9bf71ea28793e738$export$2d6ec8fc375ceafa } from "../../FocusScope-DJApHXhY.js";
import { $ as $9ab94262bd0047c7$export$420e68273165f4ec, a as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-CUxgjvAY.js";
import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-DMOmz986.js";
import { $ as $5c3e21d68f1c4674$export$439d29a4e110a164 } from "../../VisuallyHidden-X6SggVVO.js";
import { c as clsx } from "../../lite-DVmmD_-j.js";
import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
import { RichLabel } from "../rich-label/rich-label.js";
import { BaseControl } from "../base-control/base-control.js";
const $884aeceb3d67f00f$export$37b65e5b5444d35c = /* @__PURE__ */ new WeakMap();
function $0d5c49892c1215da$export$37b0961d2f4751e2(props, state, ref) {
  let { value, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, onPressStart, onPressEnd, onPressChange, onPress, onPressUp, onClick } = props;
  const isDisabled = props.isDisabled || state.isDisabled;
  let hasChildren = children != null;
  let hasAriaLabel = ariaLabel != null || ariaLabelledby != null;
  if (!hasChildren && !hasAriaLabel && process.env.NODE_ENV !== "production") console.warn("If you do not provide children, you must specify an aria-label for accessibility");
  let checked = state.selectedValue === value;
  let onChange = (e) => {
    e.stopPropagation();
    state.setSelectedValue(value);
  };
  let { pressProps, isPressed } = $f6c31cce2adf654f$export$45712eceda6fad21({
    onPressStart,
    onPressEnd,
    onPressChange,
    onPress,
    onPressUp,
    onClick,
    isDisabled
  });
  let { pressProps: labelProps, isPressed: isLabelPressed } = $f6c31cce2adf654f$export$45712eceda6fad21({
    onPressStart,
    onPressEnd,
    onPressChange,
    onPressUp,
    onClick,
    isDisabled,
    onPress(e) {
      var _ref_current;
      onPress === null || onPress === void 0 ? void 0 : onPress(e);
      state.setSelectedValue(value);
      (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.focus();
    }
  });
  let { focusableProps } = $f645667febf57a63$export$4c014de7c8940b4c($3ef42575df84b30b$export$9d1611c77c2fe928(props, {
    onFocus: () => state.setLastFocusedValue(value)
  }), ref);
  let interactions = $3ef42575df84b30b$export$9d1611c77c2fe928(pressProps, focusableProps);
  let domProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
    labelable: true
  });
  let tabIndex = -1;
  if (state.selectedValue != null) {
    if (state.selectedValue === value) tabIndex = 0;
  } else if (state.lastFocusedValue === value || state.lastFocusedValue == null) tabIndex = 0;
  if (isDisabled) tabIndex = void 0;
  let { name, form, descriptionId, errorMessageId, validationBehavior } = $884aeceb3d67f00f$export$37b65e5b5444d35c.get(state);
  $99facab73266f662$export$5add1d006293d136(ref, state.defaultSelectedValue, state.setSelectedValue);
  $e93e671b31057976$export$b8473d3665f3a75a({
    validationBehavior
  }, state, ref);
  return {
    labelProps: $3ef42575df84b30b$export$9d1611c77c2fe928(labelProps, {
      onClick: (e) => e.preventDefault()
    }),
    inputProps: $3ef42575df84b30b$export$9d1611c77c2fe928(domProps, {
      ...interactions,
      type: "radio",
      name,
      form,
      tabIndex,
      disabled: isDisabled,
      required: state.isRequired && validationBehavior === "native",
      checked,
      value,
      onChange,
      "aria-describedby": [
        props["aria-describedby"],
        state.isInvalid ? errorMessageId : null,
        descriptionId
      ].filter(Boolean).join(" ") || void 0
    }),
    isDisabled,
    isSelected: checked,
    isPressed: isPressed || isLabelPressed
  };
}
function $430f30ed08ec25fa$export$62b9571f283ff5c2(props, state) {
  let { name, form, isReadOnly, isRequired, isDisabled, orientation = "vertical", validationBehavior = "aria" } = props;
  let { direction } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
  let { isInvalid, validationErrors, validationDetails } = state.displayValidation;
  let { labelProps, fieldProps, descriptionProps, errorMessageProps } = $2baaea4c71418dea$export$294aa081a6c6f55d({
    ...props,
    // Radio group is not an HTML input element so it
    // shouldn't be labeled by a <label> element.
    labelElementType: "span",
    isInvalid: state.isInvalid,
    errorMessage: props.errorMessage || validationErrors
  });
  let domProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
    labelable: true
  });
  let { focusWithinProps } = $9ab94262bd0047c7$export$420e68273165f4ec({
    onBlurWithin(e) {
      var _props_onBlur;
      (_props_onBlur = props.onBlur) === null || _props_onBlur === void 0 ? void 0 : _props_onBlur.call(props, e);
      if (!state.selectedValue) state.setLastFocusedValue(null);
    },
    onFocusWithin: props.onFocus,
    onFocusWithinChange: props.onFocusChange
  });
  let onKeyDown = (e) => {
    let nextDir;
    switch (e.key) {
      case "ArrowRight":
        if (direction === "rtl" && orientation !== "vertical") nextDir = "prev";
        else nextDir = "next";
        break;
      case "ArrowLeft":
        if (direction === "rtl" && orientation !== "vertical") nextDir = "next";
        else nextDir = "prev";
        break;
      case "ArrowDown":
        nextDir = "next";
        break;
      case "ArrowUp":
        nextDir = "prev";
        break;
      default:
        return;
    }
    e.preventDefault();
    let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa(e.currentTarget, {
      from: e.target,
      accept: (node) => node instanceof $431fbd86ca7dc216$export$f21a1ffae260145a(node).HTMLInputElement && node.type === "radio"
    });
    let nextElem;
    if (nextDir === "next") {
      nextElem = walker.nextNode();
      if (!nextElem) {
        walker.currentNode = e.currentTarget;
        nextElem = walker.firstChild();
      }
    } else {
      nextElem = walker.previousNode();
      if (!nextElem) {
        walker.currentNode = e.currentTarget;
        nextElem = walker.lastChild();
      }
    }
    if (nextElem) {
      nextElem.focus();
      state.setSelectedValue(nextElem.value);
    }
  };
  let groupName = $bdb11010cef70236$export$f680877a34711e37(name);
  $884aeceb3d67f00f$export$37b65e5b5444d35c.set(state, {
    name: groupName,
    form,
    descriptionId: descriptionProps.id,
    errorMessageId: errorMessageProps.id,
    validationBehavior
  });
  return {
    radioGroupProps: $3ef42575df84b30b$export$9d1611c77c2fe928(domProps, {
      // https://www.w3.org/TR/wai-aria-1.2/#radiogroup
      role: "radiogroup",
      onKeyDown,
      "aria-invalid": state.isInvalid || void 0,
      "aria-errormessage": props["aria-errormessage"],
      "aria-readonly": isReadOnly || void 0,
      "aria-required": isRequired || void 0,
      "aria-disabled": isDisabled || void 0,
      "aria-orientation": orientation,
      ...fieldProps,
      ...focusWithinProps
    }),
    labelProps,
    descriptionProps,
    errorMessageProps,
    isInvalid,
    validationErrors,
    validationDetails
  };
}
let $a54cdc5c1942b639$var$instance = Math.round(Math.random() * 1e10);
let $a54cdc5c1942b639$var$i = 0;
function $a54cdc5c1942b639$export$bca9d026f8e704eb(props) {
  let name = useMemo(() => props.name || `radio-group-${$a54cdc5c1942b639$var$instance}-${++$a54cdc5c1942b639$var$i}`, [
    props.name
  ]);
  var _props_defaultValue;
  let [selectedValue, setSelected] = $458b0a5536c1a7cf$export$40bfa8c7b0832715(props.value, (_props_defaultValue = props.defaultValue) !== null && _props_defaultValue !== void 0 ? _props_defaultValue : null, props.onChange);
  let [initialValue] = useState(selectedValue);
  let [lastFocusedValue, setLastFocusedValue] = useState(null);
  let validation = $e5be200c675c3b3a$export$fc1a364ae1f3ff10({
    ...props,
    value: selectedValue
  });
  let setSelectedValue = (value) => {
    if (!props.isReadOnly && !props.isDisabled) {
      setSelected(value);
      validation.commitValidation();
    }
  };
  let isInvalid = validation.displayValidation.isInvalid;
  var _props_defaultValue1;
  return {
    ...validation,
    name,
    selectedValue,
    defaultSelectedValue: props.value !== void 0 ? initialValue : (_props_defaultValue1 = props.defaultValue) !== null && _props_defaultValue1 !== void 0 ? _props_defaultValue1 : null,
    setSelectedValue,
    lastFocusedValue,
    setLastFocusedValue,
    isDisabled: props.isDisabled || false,
    isReadOnly: props.isReadOnly || false,
    isRequired: props.isRequired || false,
    validationState: props.validationState || (isInvalid ? "invalid" : null),
    isInvalid
  };
}
const $b6c3ddc6086f204d$export$a79eda4ff50e30b6 = /* @__PURE__ */ createContext(null);
const $b6c3ddc6086f204d$export$b118023277d4a5c3 = /* @__PURE__ */ createContext(null);
const $b6c3ddc6086f204d$export$29d84393af70866c = /* @__PURE__ */ createContext(null);
const $b6c3ddc6086f204d$export$a98f0dcb43a68a25 = /* @__PURE__ */ forwardRef(function RadioGroup(props, ref) {
  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $b6c3ddc6086f204d$export$a79eda4ff50e30b6);
  let { validationBehavior: formValidationBehavior } = $64fa3d84918910a7$export$fabf2dc03a41866e($d3e0e05bdfcf66bd$export$c24727297075ec6a) || {};
  var _props_validationBehavior, _ref;
  let validationBehavior = (_ref = (_props_validationBehavior = props.validationBehavior) !== null && _props_validationBehavior !== void 0 ? _props_validationBehavior : formValidationBehavior) !== null && _ref !== void 0 ? _ref : "native";
  let state = $a54cdc5c1942b639$export$bca9d026f8e704eb({
    ...props,
    validationBehavior
  });
  let [labelRef, label] = $64fa3d84918910a7$export$9d4c57ee4c6ffdd8(!props["aria-label"] && !props["aria-labelledby"]);
  let { radioGroupProps, labelProps, descriptionProps, errorMessageProps, ...validation } = $430f30ed08ec25fa$export$62b9571f283ff5c2({
    ...props,
    label,
    validationBehavior
  }, state);
  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
    ...props,
    values: {
      orientation: props.orientation || "vertical",
      isDisabled: state.isDisabled,
      isReadOnly: state.isReadOnly,
      isRequired: state.isRequired,
      isInvalid: state.isInvalid,
      state
    },
    defaultClassName: "react-aria-RadioGroup"
  });
  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
    global: true
  });
  return /* @__PURE__ */ React__default.createElement("div", {
    ...$3ef42575df84b30b$export$9d1611c77c2fe928(DOMProps, renderProps, radioGroupProps),
    ref,
    slot: props.slot || void 0,
    "data-orientation": props.orientation || "vertical",
    "data-invalid": state.isInvalid || void 0,
    "data-disabled": state.isDisabled || void 0,
    "data-readonly": state.isReadOnly || void 0,
    "data-required": state.isRequired || void 0
  }, /* @__PURE__ */ React__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
    values: [
      [
        $b6c3ddc6086f204d$export$29d84393af70866c,
        state
      ],
      [
        $01b77f81d0f07f68$export$75b6ee27786ba447,
        {
          ...labelProps,
          ref: labelRef,
          elementType: "span"
        }
      ],
      [
        $514c0188e459b4c0$export$9afb8bc826b033ea,
        {
          slots: {
            description: descriptionProps,
            errorMessage: errorMessageProps
          }
        }
      ],
      [
        $ee014567cb39d3f0$export$ff05c3ac10437e03,
        validation
      ]
    ]
  }, renderProps.children));
});
const $b6c3ddc6086f204d$export$d7b12c4107be0d61 = /* @__PURE__ */ forwardRef(function Radio(props, ref) {
  let { inputRef: userProvidedInputRef = null, ...otherProps } = props;
  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(otherProps, ref, $b6c3ddc6086f204d$export$b118023277d4a5c3);
  let state = React__default.useContext($b6c3ddc6086f204d$export$29d84393af70866c);
  let inputRef = $df56164dff5785e2$export$4338b53315abf666(useMemo(() => $5dc95899b306f630$export$c9058316764c140e(userProvidedInputRef, props.inputRef !== void 0 ? props.inputRef : null), [
    userProvidedInputRef,
    props.inputRef
  ]));
  let { labelProps, inputProps, isSelected, isDisabled, isPressed } = $0d5c49892c1215da$export$37b0961d2f4751e2({
    ...$64fa3d84918910a7$export$ef03459518577ad4(props),
    // ReactNode type doesn't allow function children.
    children: typeof props.children === "function" ? true : props.children
  }, state, inputRef);
  let { isFocused, isFocusVisible, focusProps } = $f7dceffc5ad7768b$export$4e328f61c538687f();
  let interactionDisabled = isDisabled || state.isReadOnly;
  let { hoverProps, isHovered } = $6179b936705e76d3$export$ae780daf29e6d456({
    ...props,
    isDisabled: interactionDisabled
  });
  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
    ...props,
    defaultClassName: "react-aria-Radio",
    values: {
      isSelected,
      isPressed,
      isHovered,
      isFocused,
      isFocusVisible,
      isDisabled,
      isReadOnly: state.isReadOnly,
      isInvalid: state.isInvalid,
      isRequired: state.isRequired
    }
  });
  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
    global: true
  });
  delete DOMProps.id;
  delete DOMProps.onClick;
  return /* @__PURE__ */ React__default.createElement("label", {
    ...$3ef42575df84b30b$export$9d1611c77c2fe928(DOMProps, labelProps, hoverProps, renderProps),
    ref,
    "data-selected": isSelected || void 0,
    "data-pressed": isPressed || void 0,
    "data-hovered": isHovered || void 0,
    "data-focused": isFocused || void 0,
    "data-focus-visible": isFocusVisible || void 0,
    "data-disabled": isDisabled || void 0,
    "data-readonly": state.isReadOnly || void 0,
    "data-invalid": state.isInvalid || void 0,
    "data-required": state.isRequired || void 0
  }, /* @__PURE__ */ React__default.createElement($5c3e21d68f1c4674$export$439d29a4e110a164, {
    elementType: "span"
  }, /* @__PURE__ */ React__default.createElement("input", {
    ...$3ef42575df84b30b$export$9d1611c77c2fe928(inputProps, focusProps),
    ref: inputRef
  })), renderProps.children);
});
/**
 * A simple radio button.
 *
 * @component
 * @param {Object} props - Component props.
 * @param {JSX.Element} [props.icon] - The checkbox icon.
 * @param {string} [props.label] - The checkbox label.
 * @param {string} [props.subtitle] - The checkbox subtitle.
 * @param {boolean} [props.disabled] - Whether the checkbox is disabled.
 * @param {string} [props.className] - Additional classes to add to the checkbox container.
 * @param {string} [props.labelClassName] - Additional classes to add to the label container.
 * @param {boolean} [props.alignEnd] - Whether the label should be aligned to the end.
 * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
 * @param {boolean} [props.inlineSubtitle] - If `true`, the subtitle is shown after the label instead of below it.
 *
 * @returns {JSX.Element} The RadioButton component.
 *
 * @see {@link RadioButtonGroup} for usage example.
 *
 * @preserve
 */
const RadioButton = (props) => {
  const {
    icon,
    label,
    subtitle,
    disabled,
    className,
    labelClassName,
    design = "default",
    alignEnd,
    children,
    inlineSubtitle,
    hidden,
    ...rest
  } = props;
  if (hidden) {
    return null;
  }
  const styleClassName = {
    segmented: clsx(
      "es:cursor-pointer es:py-1 es:px-1.5 es:border es:border-secondary-300 es:hover:bg-secondary-100/75 es:transition es:min-h-10",
      "es:first:rounded-t-xl es:last:rounded-b-xl",
      "es:focus-visible:ring-2 es:focus-visible:border-accent-500 es:focus-visible:ring-accent-500/50 es:focus-visible:z-10",
      "es:shadow-sm es:inset-ring es:inset-shadow-xs",
      "es:inset-ring-secondary-100 es:inset-shadow-secondary-100/50"
    ),
    segmentedHorizontal: clsx(
      "es:cursor-pointer es:py-1 es:px-1.5 es:border es:border-secondary-300 es:hover:bg-secondary-100/75 es:transition es:grow es:min-h-10",
      "es:first:rounded-l-xl es:last:rounded-r-xl",
      "es:focus-visible:ring-2 es:focus-visible:border-accent-500 es:focus-visible:ring-accent-500/50 es:focus-visible:z-10",
      "es:shadow-sm es:inset-ring es:inset-shadow-xs",
      "es:inset-ring-secondary-100 es:inset-shadow-secondary-100/50"
    )
  };
  return /* @__PURE__ */ jsx(
    $b6c3ddc6086f204d$export$d7b12c4107be0d61,
    {
      isDisabled: disabled,
      className: clsx("es:group es:flex es:items-center es:gap-1.5 es:text-sm", styleClassName[design], className),
      ...rest,
      children: ({ isSelected }) => /* @__PURE__ */ jsxs(Fragment, { children: [
        alignEnd && (label || subtitle || icon) && /* @__PURE__ */ jsx(
          RichLabel,
          {
            icon,
            label,
            subtitle,
            className: clsx("es:ml-1", labelClassName),
            inlineSubtitle,
            fullWidth: true,
            fullSizeSubtitle: true,
            as: $01b77f81d0f07f68$export$b04be29aa201d4f5
          }
        ),
        /* @__PURE__ */ jsx(
          "div",
          {
            className: clsx(
              "es:size-5 es:flex es:items-center es:justify-center",
              "es:transition es:cursor-pointer",
              "es:bg-radial es:border es:rounded-full",
              "es:shadow-sm es:inset-ring es:inset-shadow-xs",
              "es:any-focus:outline-hidden",
              !isSelected && "es:border-secondary-300 es:inset-ring-secondary-100 es:inset-shadow-secondary-100/50",
              !isSelected && "es:from-secondary-50 es:to-white es:text-secondary-600 es:hover:text-accent-950",
              !isSelected && "es:hover:inset-shadow-secondary-100 es:hover:to-secondary-100 es:hover:inset-ring-secondary-100",
              isSelected && "es:text-white es:from-accent-500 es:to-accent-600",
              isSelected && "es:shadow-accent-600/30 es:border-accent-700 es:inset-ring es:inset-ring-accent-600 es:inset-shadow-accent-400/75",
              isSelected && "es:group-focus-visible:inset-ring-accent-600 es:group-focus-visible:inset-shadow-xs es:group-focus-visible:inset-shadow-accent-400",
              !design?.startsWith("segmented") && "es:group-focus-visible:ring-2 es:group-focus-visible:ring-accent-500/50",
              !design?.startsWith("segmented") && !isSelected && "es:group-focus-visible:border-accent-500",
              !design?.startsWith("segmented") && !alignEnd && subtitle && "es:mb-auto"
            ),
            children: /* @__PURE__ */ jsx(
              AnimatedVisibility,
              {
                transition: "scaleFade",
                visible: isSelected,
                className: clsx("es:icon:size-3 es:icon:stroke-2", disabled && "es:opacity-55"),
                noInitial: true,
                children: /* @__PURE__ */ jsx("div", { className: "es:size-2 es:rounded-full es:bg-white es:shadow-sm" })
              }
            )
          }
        ),
        !alignEnd && /* @__PURE__ */ jsx(
          RichLabel,
          {
            icon: alignEnd && icon,
            label,
            subtitle,
            className: clsx(labelClassName, subtitle && "es:mt-0.5", "es:[&_>_span_>_svg]:size-5 es:ml-0.5 es:*:space-y-0.5", disabled && "es:opacity-55"),
            inlineSubtitle,
            fullSizeSubtitle: true,
            as: $01b77f81d0f07f68$export$b04be29aa201d4f5
          }
        ),
        !(icon || label || subtitle) && children
      ] })
    }
  );
};
RadioButton.displayName = "RadioButton";
/**
 * A group of radio buttons.
 * This component is required to control radio buttons.
 *
 * Each radio button should have a `value` set!
 *
 * @component
 * @param {Object} props - Component props.
 * @param {JSX.Element} [props.icon] - Icon to show before the label.
 * @param {string} [props.label] - Label to show above the control.
 * @param {string} [props.help] - Help text displayed below the control.
 * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to show to the right of the label.
 * @param {string} [props.subtitle] - Subtitle to show below the label.
 * @param {RadioButtonGroupOrientation} [props.orientation='vertical'] - Orientation of the radio buttons.
 * @param {RadioButtonGroupDesign} [props.design='default'] - Design of the radio buttons.
 * @param {boolean} [props.disabled] - Whether the radio button group is disabled.
 * @param {boolean} [props.readOnly] - Whether the radio button group is read-only.
 * @param {string} [props.value] - Value of the currently selected radio button.
 * @param {Function} [props.onChange] - Function to call when the value of the selected radio button changes.
 * @param {string} [props.className] - Additional classes to add to the group container.
 * @param {string} [props.labelClassName] - Additional classes to add to the label container.
 * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
 *
 * @returns {JSX.Element} The RadioButtonGroup component.
 *
 * @typedef {'horizontal' | 'vertical'} RadioButtonGroupOrientation
 * @typedef {'default' | 'segmented'} RadioButtonGroupDesign
 *
 * @example
 * const [value, setValue] = useState('first'); // Or "null" if you don't want anything selected by default.
 *
 * <RadioButtonGroup
 * 	label='My radio buttons'
 * 	value={value}
 * 	onChange={setValue}
 * >
 * 	<RadioButton value='first' label='First option' />
 * 	<RadioButton value='second' label='Second option' />
 * </RadioButtonGroup>
 *
 * @preserve
 */
const RadioButtonGroup = (props) => {
  const {
    icon,
    help,
    label,
    actions,
    subtitle,
    orientation = "vertical",
    design = "default",
    disabled,
    readOnly,
    value,
    onChange,
    children,
    className,
    labelClassName,
    hidden,
    ...rest
  } = props;
  if (hidden) {
    return null;
  }
  let mappedChildren = children ?? [];
  if (!Array.isArray(children)) {
    mappedChildren = [children];
  }
  mappedChildren = children.map((child, index) => {
    if (child.type.displayName !== "RadioButton") {
      return child;
    }
    return cloneElement(child, {
      design: orientation === "horizontal" ? `${design}Horizontal` : design,
      key: child.props.value ?? index
    });
  });
  return /* @__PURE__ */ jsx(
    $b6c3ddc6086f204d$export$a98f0dcb43a68a25,
    {
      className: clsx("es:w-full", className),
      isDisabled: disabled,
      isReadOnly: readOnly,
      onChange,
      value,
      orientation,
      ...rest,
      children: /* @__PURE__ */ jsx(
        BaseControl,
        {
          icon,
          label,
          subtitle,
          actions,
          help,
          labelAs: $01b77f81d0f07f68$export$b04be29aa201d4f5,
          className: labelClassName,
          children: /* @__PURE__ */ jsx(
            "div",
            {
              className: clsx(
                design === "default" && orientation === "horizontal" && "es:flex es:flex-wrap es:gap-2.5",
                design === "default" && orientation === "vertical" && "es:flex es:flex-col es:gap-2.5",
                design === "segmented" && orientation === "vertical" && "es:flex es:flex-col es:-space-y-px",
                design === "segmented" && orientation === "horizontal" && "es:nowrap es:flex es:-space-x-px"
              ),
              children: mappedChildren
            }
          )
        }
      )
    }
  );
};
export {
  RadioButton,
  RadioButtonGroup
};
