@eightshift/ui-components 5.6.0 → 6.0.0

package/dist/components/radio/radio.js

@@ -1,375 +1,12 @@
 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 { $ as $1d5b8b8664671ef2$export$c9549807523555e0 } from "../../SelectionIndicator-D7WMzeAW.js";
-import { $ as $c8a5a149f625efcf$export$758399f318e6385a } from "../../SharedElementTransition-BjRNHsjx.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-BCEPS3hl.js";
-import { $ as $f645667febf57a63$export$4c014de7c8940b4c, x as $431fbd86ca7dc216$export$f21a1ffae260145a, a as $458b0a5536c1a7cf$export$40bfa8c7b0832715, w as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-BRDW3y7-.js";
-import { a as $e93e671b31057976$export$b8473d3665f3a75a, $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10 } from "../../useFormValidation-CeNsUGWK.js";
-import { a as $9bf71ea28793e738$export$2d6ec8fc375ceafa } from "../../FocusScope-B5vxRkHm.js";
-import { $ as $9ab94262bd0047c7$export$420e68273165f4ec, a as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-Cgm0R4Cf.js";
-import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-DMOmz986.js";
-import { $ as $5c3e21d68f1c4674$export$439d29a4e110a164 } from "../../VisuallyHidden-CgnIuZJ2.js";
+import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-D8a3eYb-.js";
+import { a as $b6c3ddc6086f204d$export$d7b12c4107be0d61, $ as $b6c3ddc6086f204d$export$a98f0dcb43a68a25 } from "../../RadioGroup-BVFvITWO.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, useMemo(() => ({
-      onClick: (e) => e.preventDefault(),
-      // Prevent label from being focused when mouse down on it.
-      // Note, this does not prevent the input from being focused in the `click` event.
-      onMouseDown: (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
-      ]
-    ]
-  }, /* @__PURE__ */ React__default.createElement($c8a5a149f625efcf$export$758399f318e6385a, null, 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
-  })), /* @__PURE__ */ React__default.createElement($1d5b8b8664671ef2$export$c9549807523555e0.Provider, {
-    value: {
-      isSelected
-    }
-  }, renderProps.children));
-});
+import { cloneElement } from "react";
+import { c as cva } from "../../index-BHpUy2Ix.js";
 /**
  * A simple radio button.
  *
@@ -383,6 +20,7 @@ const $b6c3ddc6086f204d$export$d7b12c4107be0d61 = /* @__PURE__ */ forwardRef(fun
  * @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.flat] - If `true`, component will look more flat. Useful for nested layer of controls.
  * @param {boolean} [props.inlineSubtitle] - If `true`, the subtitle is shown after the label instead of below it.
  *
  * @returns {JSX.Element} The RadioButton component.
@@ -400,6 +38,7 @@ const RadioButton = (props) => {
     className,
     labelClassName,
     design = "default",
+    flat,
     alignEnd,
     children,
     inlineSubtitle,
@@ -409,27 +48,104 @@ const RadioButton = (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"
-    )
-  };
+  const radioClasses = cva(
+    [
+      "es:size-5 es:shrink-0",
+      "es:grid es:place-items-center es:grid-cols-1 es:grid-rows-1",
+      "es:*:row-start-1 es:*:col-start-1",
+      "es:rounded-full",
+      "es:transition-plus es:duration-300 es:ease-spring-smooth",
+      "es:inset-ring",
+      "es:any-focus:outline-hidden",
+      "es:group-focus-visible:ring-2 es:group-focus-visible:ring-accent-500/30"
+    ],
+    {
+      variants: {
+        disabled: {
+          true: "es:cursor-not-allowed",
+          false: "es:inset-shadow-xs es:bg-linear-to-b es:from-25%"
+        }
+      },
+      compoundVariants: [
+        { flat: false, disabled: false, class: "es:shadow-xs es:shadow-black/5" },
+        //
+        {
+          checked: false,
+          disabled: false,
+          class: [
+            "es:bg-secondary-50 es:inset-ring-secondary-300/60",
+            "es:from-black/1 es:to-black/5",
+            "es:hover:bg-surface-100 es:hover:inset-ring-surface-300/60",
+            "es:inset-shadow-white/50",
+            "es:group-focus-visible:inset-ring-accent-500"
+          ]
+        },
+        {
+          checked: true,
+          disabled: false,
+          class: [
+            "es:bg-accent-600 es:inset-ring-accent-800/5 es:text-white",
+            "es:from-accent-50/10 es:to-accent-50/2",
+            "es:inset-shadow-accent-50/35",
+            "es:group-focus-visible:inset-ring-accent-950"
+          ]
+        },
+        //
+        {
+          checked: true,
+          disabled: true,
+          class: ["es:bg-secondary-400 es:inset-ring-secondary-400 es:text-white"]
+        },
+        {
+          checked: false,
+          disabled: true,
+          class: ["es:bg-white es:inset-ring-secondary-300 es:text-secondary-50", "es:bg-linear-to-b es:from-secondary-800/0 es:to-secondary-800/3"]
+        }
+      ],
+      defaultVariants: {
+        flat: false,
+        checked: false,
+        disabled: false
+      }
+    }
+  );
+  const radioContainerClass = cva(["es:flex es:gap-2 es:items-center-safe", className], {
+    variants: {
+      design: {
+        default: "es:py-1.5"
+      }
+    },
+    compoundVariants: [
+      {
+        design: ["segmented", "segmentedHorizontal"],
+        class: ["es:px-3 es:py-2 es:w-fill es:inset-ring", "es:transition-plus es:duration-300 es:ease-spring-snappy", !flat && "es:shadow-xs es:shadow-black/5"]
+      },
+      {
+        checked: false,
+        design: ["segmented", "segmentedHorizontal"],
+        class: "es:bg-secondary-50 es:inset-ring-secondary-200/50 es:rounded-md es:hover:rounded-xl"
+      },
+      {
+        checked: true,
+        design: ["segmented", "segmentedHorizontal"],
+        class: "es:bg-surface-100 es:text-accent-900 es:inset-ring-accent-600/10 es:rounded-3xl"
+      },
+      //
+      { design: "segmented", checked: false, class: "es:first:rounded-t-xl es:last:rounded-b-xl es:before-current:rounded-b-xl es:after-current:rounded-t-xl" },
+      { design: "segmentedHorizontal", checked: false, class: "es:first:rounded-l-xl es:last:rounded-r-xl es:before-current:rounded-l-xl es:after-current:rounded-r-xl" }
+    ],
+    defaultVariants: {
+      design: "default",
+      flat: false,
+      checked: false,
+      disabled: false
+    }
+  });
   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),
+      className: ({ isSelected }) => radioContainerClass({ design, flat, disabled, checked: isSelected }),
       ...rest,
       children: ({ isSelected }) => /* @__PURE__ */ jsxs(Fragment, { children: [
         alignEnd && (label || subtitle || icon) && /* @__PURE__ */ jsx(
@@ -438,54 +154,35 @@ const RadioButton = (props) => {
             icon,
             label,
             subtitle,
-            className: clsx("es:ml-1", labelClassName),
+            className: clsx(subtitle && "es:mt-1.25", labelClassName),
             inlineSubtitle,
             fullWidth: true,
             fullSizeSubtitle: true,
-            as: $01b77f81d0f07f68$export$b04be29aa201d4f5
+            as: $01b77f81d0f07f68$export$b04be29aa201d4f5,
+            noColor: true
           }
         ),
-        /* @__PURE__ */ jsx(
-          "div",
+        /* @__PURE__ */ jsx("div", { className: radioClasses({ disabled, flat: design !== "default" ? true : flat, checked: isSelected }), children: /* @__PURE__ */ jsx(
+          AnimatedVisibility,
           {
-            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" })
-              }
-            )
+            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: clsx("es:size-2 es:rounded-full es:bg-accent-50", !disabled && "es:shadow-xs es:shadow-accent-950/30") })
           }
-        ),
+        ) }),
         !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"),
+            className: clsx(labelClassName, disabled && "es:text-secondary-300"),
             inlineSubtitle,
             fullSizeSubtitle: true,
-            as: $01b77f81d0f07f68$export$b04be29aa201d4f5
+            as: $01b77f81d0f07f68$export$b04be29aa201d4f5,
+            noColor: true
           }
         ),
         !(icon || label || subtitle) && children
@@ -515,6 +212,7 @@ RadioButton.displayName = "RadioButton";
  * @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.flat] - If `true`, component will look more flat. Useful for nested layer of controls.
  * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
  * @returns {JSX.Element} The RadioButtonGroup component.
@@ -550,6 +248,7 @@ const RadioButtonGroup = (props) => {
     value,
     onChange,
     children,
+    flat,
     className,
     labelClassName,
     hidden,
@@ -567,6 +266,7 @@ const RadioButtonGroup = (props) => {
       return child;
     }
     return cloneElement(child, {
+      flat,
       design: orientation === "horizontal" ? `${design}Horizontal` : design,
       key: child.props.value ?? index
     });
@@ -591,18 +291,7 @@ const RadioButtonGroup = (props) => {
           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
-            }
-          )
+          children: /* @__PURE__ */ jsx("div", { className: clsx(orientation === "horizontal" && "es:flex es:items-stretch es:gap-0.75", orientation === "vertical" && "es:flex es:flex-col es:gap-0.75"), children: mappedChildren })
         }
       )
     }

package/dist/components/repeater/repeater-item.js

@@ -5,7 +5,7 @@ import { icons } from "../../icons/icons.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { useContext } from "react";
 import { Expandable } from "../expandable/expandable.js";
-import { _ as __ } from "../../default-i18n-DBm-GqWM.js";
+import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
 import { RepeaterContext } from "./repeater-context.js";
 /**
  * A Repeater item.
@@ -37,16 +37,12 @@ const RepeaterItem = (props) => {
       icon: isOutOfBounds ? icons.trash : icon,
       label: isOutOfBounds ? __("Release to delete", "eightshift-ui-components") : label,
       subtitle: isOutOfBounds ? null : subtitle,
-      className: clsx(
-        "es:transition",
-        !isItemOpen && isDragged && "es:border es:border-secondary-100 es:bg-white/50 es:shadow-md es:backdrop-blur-lg",
-        !isItemOpen && isOutOfBounds && "es:border es:border-red-200! es:bg-red-50 es:shadow-red-500/20 es:[&_button]:invisible es:[&_svg_path]:stroke-red-500"
-      ),
       labelClassName: clsx(className, isDragged && "es:cursor-grabbing", !isDragged && !isItemOpen && "es:cursor-grab"),
       headerClassName: clsx(
-        "es:transition es:rounded-lg es:border es:border-transparent",
-        isSelected && "es:bg-accent-50 es:border-accent-100",
-        !isItemOpen && "es:group-focus:outline-hidden es:group-focus:border-accent-500 es:group-focus:ring-2 es:group-focus:ring-accent-500/50"
+        "es:transition-plus",
+        !isItemOpen && !isDragged && "es:not-group-first:not-group-before-current:rounded-t-md es:not-group-last:not-group-after-current:rounded-b-md",
+        !isItemOpen && isOutOfBounds && "es:inset-ring-red-200! es:text-red-900! es:bg-red-50! es:[&_button]:invisible es:[&_svg_path]:stroke-red-600",
+        isDragged && "es:rounded-2xl! es:bg-surface-50! es:inset-ring-surface-100"
       ),
       open: allOpen,
       onOpenChange: (open) => {
@@ -96,7 +92,7 @@ const RepeaterItem = (props) => {
             Button,
             {
               type: "ghost",
-              icon: open ? icons.caretDownFill : icons.caretDown,
+              icon: icons.dropdownCaretAlt,
               onPress: toggleOpen,
               tooltip,
               disabled,
@@ -109,6 +105,7 @@ const RepeaterItem = (props) => {
       actions,
       headerProps: { "data-movable-handle": true },
       noFocusHandling: true,
+      standalone: true,
       ...rest,
       children
     },