@easypost/easy-ui 1.0.0-alpha.6 → 1.0.0-alpha.61

package/RadioGroup/index.js

@@ -32,99 +32,150 @@ var __objRest = (source, exclude) => {
 };
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const Text_index = require("../Text/index.js");
-const HorizontalStack_index = require("../HorizontalStack/index.js");
-const SelectorErrorTooltip_index = require("../SelectorErrorTooltip/index.js");
+const Text = require("../__chunks__/Text-Dfbyoxsz.js");
+const HorizontalStack = require("../__chunks__/HorizontalStack-_DnrRlDb.js");
+const SelectorErrorTooltip = require("../__chunks__/SelectorErrorTooltip-DowQ2whn.js");
 const utilities_css = require("../utilities/css.js");
-const _import$1 = require("../__chunks__/import-a1e0f814.js");
-const _import = require("../__chunks__/import-2b302763.js");
-const _import$2 = require("../__chunks__/import-24a482e1.js");
-const realModule = require("../__chunks__/real-module-e36b1436.js");
-const _import$3 = require("../__chunks__/import-dea5a24d.js");
-require("../Icon/index.js");
-require("../Tooltip/index.js");
-require("../__chunks__/import-a2023d8f.js");
-require("react-dom");
-const $884aeceb3d67f00f$export$3b7b268d09480394 = /* @__PURE__ */ new WeakMap();
-const $884aeceb3d67f00f$export$8e8b214e06dd397d = /* @__PURE__ */ new WeakMap();
-const $884aeceb3d67f00f$export$61c8d3f0151e21b2 = /* @__PURE__ */ new WeakMap();
+const mergeProps = require("../__chunks__/mergeProps-DniMwM6P.js");
+const filterDOMProps = require("../__chunks__/filterDOMProps-D3iOHP0H.js");
+const useFormReset = require("../__chunks__/useFormReset-Bgj93eR3.js");
+const useFocusable = require("../__chunks__/useFocusable-BfXLORiH.js");
+const useFormValidation = require("../__chunks__/useFormValidation-DYz5WFze.js");
+const usePress = require("../__chunks__/usePress-Dz8YYpge.js");
+const useFocusRing = require("../__chunks__/useFocusRing-DFRFvht_.js");
+const useHover = require("../__chunks__/useHover-BIKwjrCT.js");
+const useControlledState = require("../__chunks__/useControlledState-mnKBd6Uc.js");
+const FocusScope = require("../__chunks__/FocusScope-Co1hHX8R.js");
+const useField = require("../__chunks__/useField-BJW_bXVD.js");
+const useFocusWithin = require("../__chunks__/useFocusWithin-C1ioGWec.js");
+const context = require("../__chunks__/context-D3NeXov7.js");
+let $a54cdc5c1942b639$var$instance = Math.round(Math.random() * 1e10);
+let $a54cdc5c1942b639$var$i = 0;
+function $a54cdc5c1942b639$export$bca9d026f8e704eb(props) {
+  let name = React.useMemo(() => props.name || `radio-group-${$a54cdc5c1942b639$var$instance}-${++$a54cdc5c1942b639$var$i}`, [
+    props.name
+  ]);
+  var _props_defaultValue;
+  let [selectedValue, setSelected] = useControlledState.$458b0a5536c1a7cf$export$40bfa8c7b0832715(props.value, (_props_defaultValue = props.defaultValue) !== null && _props_defaultValue !== void 0 ? _props_defaultValue : null, props.onChange);
+  let [lastFocusedValue, setLastFocusedValue] = React.useState(null);
+  let validation = useFormValidation.$e5be200c675c3b3a$export$fc1a364ae1f3ff10(__spreadProps(__spreadValues({}, props), {
+    value: selectedValue
+  }));
+  let setSelectedValue = (value) => {
+    if (!props.isReadOnly && !props.isDisabled) {
+      setSelected(value);
+      validation.commitValidation();
+    }
+  };
+  let isInvalid = validation.displayValidation.isInvalid;
+  return __spreadProps(__spreadValues({}, validation), {
+    name,
+    selectedValue,
+    setSelectedValue,
+    lastFocusedValue,
+    setLastFocusedValue,
+    isDisabled: props.isDisabled || false,
+    isReadOnly: props.isReadOnly || false,
+    isRequired: props.isRequired || false,
+    validationState: props.validationState || (isInvalid ? "invalid" : null),
+    isInvalid
+  });
+}
+const $884aeceb3d67f00f$export$37b65e5b5444d35c = /* @__PURE__ */ new WeakMap();
 function $0d5c49892c1215da$export$37b0961d2f4751e2(props, state, ref) {
   let { value, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby } = props;
   const isDisabled = props.isDisabled || state.isDisabled;
   let hasChildren = children != null;
   let hasAriaLabel = ariaLabel != null || ariaLabelledby != null;
-  if (!hasChildren && !hasAriaLabel)
-    console.warn("If you do not provide children, you must specify an aria-label for accessibility");
+  if (!hasChildren && !hasAriaLabel) 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 } = _import.$f6c31cce2adf654f$export$45712eceda6fad21({
+  let { pressProps, isPressed } = usePress.$f6c31cce2adf654f$export$45712eceda6fad21({
     isDisabled
   });
-  let { focusableProps } = _import.$e6afbd83fe6ebbd2$export$4c014de7c8940b4c(_import$1.$3ef42575df84b30b$export$9d1611c77c2fe928(props, {
+  let { pressProps: labelProps, isPressed: isLabelPressed } = usePress.$f6c31cce2adf654f$export$45712eceda6fad21({
+    isDisabled,
+    onPress() {
+      state.setSelectedValue(value);
+    }
+  });
+  let { focusableProps } = useFocusable.$e6afbd83fe6ebbd2$export$4c014de7c8940b4c(mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(props, {
     onFocus: () => state.setLastFocusedValue(value)
   }), ref);
-  let interactions = _import$1.$3ef42575df84b30b$export$9d1611c77c2fe928(pressProps, focusableProps);
-  let domProps = _import$1.$65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
+  let interactions = mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(pressProps, focusableProps);
+  let domProps = filterDOMProps.$65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
     labelable: true
   });
-  let tabIndex = state.lastFocusedValue === value || state.lastFocusedValue == null ? 0 : -1;
-  if (isDisabled)
-    tabIndex = void 0;
+  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, descriptionId, errorMessageId, validationBehavior } = $884aeceb3d67f00f$export$37b65e5b5444d35c.get(state);
+  useFormReset.$99facab73266f662$export$5add1d006293d136(ref, state.selectedValue, state.setSelectedValue);
+  useFormValidation.$e93e671b31057976$export$b8473d3665f3a75a({
+    validationBehavior
+  }, state, ref);
   return {
-    inputProps: _import$1.$3ef42575df84b30b$export$9d1611c77c2fe928(domProps, __spreadProps(__spreadValues({}, interactions), {
+    labelProps: mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(labelProps, {
+      onClick: (e) => e.preventDefault()
+    }),
+    inputProps: mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(domProps, __spreadProps(__spreadValues({}, interactions), {
       type: "radio",
-      name: $884aeceb3d67f00f$export$3b7b268d09480394.get(state),
+      name,
       tabIndex,
       disabled: isDisabled,
+      required: state.isRequired && validationBehavior === "native",
       checked,
       value,
       onChange,
       "aria-describedby": [
-        state.validationState === "invalid" ? $884aeceb3d67f00f$export$61c8d3f0151e21b2.get(state) : null,
-        $884aeceb3d67f00f$export$8e8b214e06dd397d.get(state)
+        props["aria-describedby"],
+        state.isInvalid ? errorMessageId : null,
+        descriptionId
       ].filter(Boolean).join(" ") || void 0
     })),
     isDisabled,
     isSelected: checked,
-    isPressed
+    isPressed: isPressed || isLabelPressed
   };
 }
 function $430f30ed08ec25fa$export$62b9571f283ff5c2(props, state) {
-  let { name, validationState, isReadOnly, isRequired, isDisabled, orientation = "vertical" } = props;
-  let { direction } = realModule.$18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
-  let { labelProps, fieldProps, descriptionProps, errorMessageProps } = _import$2.$2baaea4c71418dea$export$294aa081a6c6f55d(__spreadProps(__spreadValues({}, props), {
+  let { name, isReadOnly, isRequired, isDisabled, orientation = "vertical", validationBehavior = "aria" } = props;
+  let { direction } = context.$18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
+  let { isInvalid, validationErrors, validationDetails } = state.displayValidation;
+  let { labelProps, fieldProps, descriptionProps, errorMessageProps } = useField.$2baaea4c71418dea$export$294aa081a6c6f55d(__spreadProps(__spreadValues({}, props), {
     // Radio group is not an HTML input element so it
     // shouldn't be labeled by a <label> element.
-    labelElementType: "span"
+    labelElementType: "span",
+    isInvalid: state.isInvalid,
+    errorMessage: props.errorMessage || validationErrors
   }));
-  $884aeceb3d67f00f$export$8e8b214e06dd397d.set(state, descriptionProps.id);
-  $884aeceb3d67f00f$export$61c8d3f0151e21b2.set(state, errorMessageProps.id);
-  let domProps = _import$1.$65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
+  let domProps = filterDOMProps.$65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
     labelable: true
   });
-  let { focusWithinProps } = _import.$9ab94262bd0047c7$export$420e68273165f4ec({
-    onBlurWithin() {
-      if (!state.selectedValue)
-        state.setLastFocusedValue(null);
-    }
+  let { focusWithinProps } = useFocusWithin.$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";
+        if (direction === "rtl" && orientation !== "vertical") nextDir = "prev";
+        else nextDir = "next";
         break;
       case "ArrowLeft":
-        if (direction === "rtl" && orientation !== "vertical")
-          nextDir = "next";
-        else
-          nextDir = "prev";
+        if (direction === "rtl" && orientation !== "vertical") nextDir = "next";
+        else nextDir = "prev";
         break;
       case "ArrowDown":
         nextDir = "next";
@@ -136,7 +187,7 @@ function $430f30ed08ec25fa$export$62b9571f283ff5c2(props, state) {
         return;
     }
     e.preventDefault();
-    let walker = _import.$9bf71ea28793e738$export$2d6ec8fc375ceafa(e.currentTarget, {
+    let walker = FocusScope.$9bf71ea28793e738$export$2d6ec8fc375ceafa(e.currentTarget, {
       from: e.target
     });
     let nextElem;
@@ -158,14 +209,19 @@ function $430f30ed08ec25fa$export$62b9571f283ff5c2(props, state) {
       state.setSelectedValue(nextElem.value);
     }
   };
-  let groupName = _import$1.$bdb11010cef70236$export$f680877a34711e37(name);
-  $884aeceb3d67f00f$export$3b7b268d09480394.set(state, groupName);
+  let groupName = mergeProps.$bdb11010cef70236$export$f680877a34711e37(name);
+  $884aeceb3d67f00f$export$37b65e5b5444d35c.set(state, {
+    name: groupName,
+    descriptionId: descriptionProps.id,
+    errorMessageId: errorMessageProps.id,
+    validationBehavior
+  });
   return {
-    radioGroupProps: _import$1.$3ef42575df84b30b$export$9d1611c77c2fe928(domProps, __spreadValues(__spreadValues({
+    radioGroupProps: mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(domProps, __spreadValues(__spreadValues({
       // https://www.w3.org/TR/wai-aria-1.2/#radiogroup
       role: "radiogroup",
       onKeyDown,
-      "aria-invalid": validationState === "invalid" || void 0,
+      "aria-invalid": state.isInvalid || void 0,
       "aria-errormessage": props["aria-errormessage"],
       "aria-readonly": isReadOnly || void 0,
       "aria-required": isRequired || void 0,
@@ -174,31 +230,10 @@ function $430f30ed08ec25fa$export$62b9571f283ff5c2(props, state) {
     }, fieldProps), focusWithinProps)),
     labelProps,
     descriptionProps,
-    errorMessageProps
-  };
-}
-let $a54cdc5c1942b639$var$instance = Math.round(Math.random() * 1e10);
-let $a54cdc5c1942b639$var$i = 0;
-function $a54cdc5c1942b639$export$bca9d026f8e704eb(props) {
-  let name = React.useMemo(() => props.name || `radio-group-${$a54cdc5c1942b639$var$instance}-${++$a54cdc5c1942b639$var$i}`, [
-    props.name
-  ]);
-  let [selectedValue, setSelected] = _import$3.$458b0a5536c1a7cf$export$40bfa8c7b0832715(props.value, props.defaultValue, props.onChange);
-  let [lastFocusedValue, setLastFocusedValue] = React.useState(null);
-  let setSelectedValue = (value) => {
-    if (!props.isReadOnly && !props.isDisabled)
-      setSelected(value);
-  };
-  return {
-    name,
-    selectedValue,
-    setSelectedValue,
-    lastFocusedValue,
-    setLastFocusedValue,
-    isDisabled: props.isDisabled || false,
-    isReadOnly: props.isReadOnly || false,
-    isRequired: props.isRequired || false,
-    validationState: props.validationState || null
+    errorMessageProps,
+    isInvalid,
+    validationErrors,
+    validationDetails
   };
 }
 const RadioGroupContext = React.createContext(null);
@@ -209,16 +244,16 @@ const useRadioGroupContext = () => {
   }
   return radioGroupContext;
 };
-const RadioGroupItem$1 = "_RadioGroupItem_1yery_5";
-const label = "_label_1yery_11";
-const radioOuter = "_radioOuter_1yery_28";
-const radioInner = "_radioInner_1yery_29";
-const focusVisible = "_focusVisible_1yery_43";
-const selected = "_selected_1yery_62";
-const invalid = "_invalid_1yery_66";
-const disabled = "_disabled_1yery_70";
-const hovered = "_hovered_1yery_82";
-const readOnly = "_readOnly_1yery_82";
+const RadioGroupItem$1 = "_RadioGroupItem_1eiq3_5";
+const label = "_label_1eiq3_11";
+const radioOuter = "_radioOuter_1eiq3_29";
+const radioInner = "_radioInner_1eiq3_30";
+const focusVisible = "_focusVisible_1eiq3_44";
+const selected = "_selected_1eiq3_63";
+const invalid = "_invalid_1eiq3_67";
+const disabled = "_disabled_1eiq3_71";
+const hovered = "_hovered_1eiq3_83";
+const readOnly = "_readOnly_1eiq3_83";
 const styles$1 = {
   RadioGroupItem: RadioGroupItem$1,
   label,
@@ -236,18 +271,18 @@ function RadioGroupItem(props) {
   const ref = React.useRef(null);
   const state = useRadioGroupContext();
   const { inputProps, isSelected, isDisabled } = $0d5c49892c1215da$export$37b0961d2f4751e2(props, state, ref);
-  const { isFocusVisible, focusProps } = _import.$f7dceffc5ad7768b$export$4e328f61c538687f();
-  const { isHovered, hoverProps } = _import.$6179b936705e76d3$export$ae780daf29e6d456(props);
+  const { isFocusVisible, focusProps } = useFocusRing.$f7dceffc5ad7768b$export$4e328f61c538687f();
+  const { isHovered, hoverProps } = useHover.$6179b936705e76d3$export$ae780daf29e6d456(props);
   const className = utilities_css.classNames(styles$1.RadioGroupItem, isSelected && styles$1.selected, isDisabled && styles$1.disabled, isFocusVisible && styles$1.focusVisible, isHovered && styles$1.hovered, validationState === "invalid" && styles$1.invalid);
-  const textColor = isDisabled ? "disabled" : validationState === "invalid" ? "danger" : "primary";
+  const textColor = isDisabled ? "neutral.300" : validationState === "invalid" ? "negative.600" : "primary.800";
   return React.createElement("div", {
     className
-  }, React.createElement(HorizontalStack_index.HorizontalStack, {
+  }, React.createElement(HorizontalStack.HorizontalStack, {
     gap: "1",
     blockAlign: "center"
   }, React.createElement("label", {
     className: styles$1.label
-  }, React.createElement(HorizontalStack_index.HorizontalStack, __spreadValues({
+  }, React.createElement(HorizontalStack.HorizontalStack, __spreadValues({
     blockAlign: "start",
     gap: "1",
     wrap: false
@@ -260,15 +295,15 @@ function RadioGroupItem(props) {
     className: styles$1.radioOuter
   }, React.createElement("span", {
     className: styles$1.radioInner
-  })), React.createElement(Text_index.Text, {
+  })), React.createElement(Text.Text, {
     variant: "body1",
     color: textColor
-  }, children))), validationState === "invalid" && errorText && React.createElement(SelectorErrorTooltip_index.SelectorErrorTooltip, {
+  }, children))), validationState === "invalid" && errorText && React.createElement(SelectorErrorTooltip.SelectorErrorTooltip, {
     content: errorText
   })));
 }
-const RadioGroup$1 = "_RadioGroup_57hp1_5";
-const list = "_list_57hp1_14";
+const RadioGroup$1 = "_RadioGroup_zx68y_5";
+const list = "_list_zx68y_14";
 const styles = {
   RadioGroup: RadioGroup$1,
   list
@@ -279,7 +314,7 @@ function RadioGroupContainer(props) {
   const { radioGroupProps, labelProps } = $430f30ed08ec25fa$export$62b9571f283ff5c2(props, state);
   return React.createElement("fieldset", __spreadValues({
     className: styles.RadioGroup
-  }, radioGroupProps), label2 && React.createElement("div", null, React.createElement(Text_index.Text, __spreadValues({
+  }, radioGroupProps), label2 && React.createElement("div", null, React.createElement(Text.Text, __spreadValues({
     as: "legend",
     variant: "subtitle1",
     color: "gray.bold"

package/RadioGroup/index.mjs

@@ -30,29 +30,62 @@ var __objRest = (source, exclude) => {
   return target;
 };
 import React__default, { useMemo, useState, useContext } from "react";
-import { Text } from "../Text/index.mjs";
-import { HorizontalStack } from "../HorizontalStack/index.mjs";
-import { SelectorErrorTooltip } from "../SelectorErrorTooltip/index.mjs";
+import { T as Text } from "../__chunks__/Text-CQ_8wg0t.mjs";
+import { H as HorizontalStack } from "../__chunks__/HorizontalStack-BDZp8p9E.mjs";
+import { S as SelectorErrorTooltip } from "../__chunks__/SelectorErrorTooltip-DLyZgeUf.mjs";
 import { classNames } from "../utilities/css.mjs";
-import { a as $3ef42575df84b30b$export$9d1611c77c2fe928, d as $65484d02dcb7eb3e$export$457c3d6518dd4c6f, b as $bdb11010cef70236$export$f680877a34711e37 } from "../__chunks__/import-19bc38ac.mjs";
-import { $ as $f6c31cce2adf654f$export$45712eceda6fad21, a as $e6afbd83fe6ebbd2$export$4c014de7c8940b4c, b as $9ab94262bd0047c7$export$420e68273165f4ec, g as $9bf71ea28793e738$export$2d6ec8fc375ceafa, e as $f7dceffc5ad7768b$export$4e328f61c538687f, f as $6179b936705e76d3$export$ae780daf29e6d456 } from "../__chunks__/import-3d962a94.mjs";
-import { $ as $2baaea4c71418dea$export$294aa081a6c6f55d } from "../__chunks__/import-29af6941.mjs";
-import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../__chunks__/real-module-515df21d.mjs";
-import { $ as $458b0a5536c1a7cf$export$40bfa8c7b0832715 } from "../__chunks__/import-6a831ca1.mjs";
-import "../Icon/index.mjs";
-import "../Tooltip/index.mjs";
-import "../__chunks__/import-f1f4792a.mjs";
-import "react-dom";
-const $884aeceb3d67f00f$export$3b7b268d09480394 = /* @__PURE__ */ new WeakMap();
-const $884aeceb3d67f00f$export$8e8b214e06dd397d = /* @__PURE__ */ new WeakMap();
-const $884aeceb3d67f00f$export$61c8d3f0151e21b2 = /* @__PURE__ */ new WeakMap();
+import { $ as $3ef42575df84b30b$export$9d1611c77c2fe928, d as $bdb11010cef70236$export$f680877a34711e37 } from "../__chunks__/mergeProps-T961Q1yJ.mjs";
+import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../__chunks__/filterDOMProps-EDDcM64A.mjs";
+import { $ as $99facab73266f662$export$5add1d006293d136 } from "../__chunks__/useFormReset-CmXMJVpO.mjs";
+import { $ as $e6afbd83fe6ebbd2$export$4c014de7c8940b4c } from "../__chunks__/useFocusable-DoNt-Wd3.mjs";
+import { $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, d as $e93e671b31057976$export$b8473d3665f3a75a } from "../__chunks__/useFormValidation-D5Y_7NR2.mjs";
+import { $ as $f6c31cce2adf654f$export$45712eceda6fad21 } from "../__chunks__/usePress-BAsZaqDB.mjs";
+import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../__chunks__/useFocusRing-BUwbt1Yv.mjs";
+import { $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../__chunks__/useHover-BOYR4wqI.mjs";
+import { $ as $458b0a5536c1a7cf$export$40bfa8c7b0832715 } from "../__chunks__/useControlledState-CFWhSD5C.mjs";
+import { $ as $9bf71ea28793e738$export$2d6ec8fc375ceafa } from "../__chunks__/FocusScope-CjcZn1Rq.mjs";
+import { $ as $2baaea4c71418dea$export$294aa081a6c6f55d } from "../__chunks__/useField-DWmSslhe.mjs";
+import { $ as $9ab94262bd0047c7$export$420e68273165f4ec } from "../__chunks__/useFocusWithin-CfhMwfXS.mjs";
+import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../__chunks__/context-DEwqildc.mjs";
+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 [lastFocusedValue, setLastFocusedValue] = useState(null);
+  let validation = $e5be200c675c3b3a$export$fc1a364ae1f3ff10(__spreadProps(__spreadValues({}, props), {
+    value: selectedValue
+  }));
+  let setSelectedValue = (value) => {
+    if (!props.isReadOnly && !props.isDisabled) {
+      setSelected(value);
+      validation.commitValidation();
+    }
+  };
+  let isInvalid = validation.displayValidation.isInvalid;
+  return __spreadProps(__spreadValues({}, validation), {
+    name,
+    selectedValue,
+    setSelectedValue,
+    lastFocusedValue,
+    setLastFocusedValue,
+    isDisabled: props.isDisabled || false,
+    isReadOnly: props.isReadOnly || false,
+    isRequired: props.isRequired || false,
+    validationState: props.validationState || (isInvalid ? "invalid" : null),
+    isInvalid
+  });
+}
+const $884aeceb3d67f00f$export$37b65e5b5444d35c = /* @__PURE__ */ new WeakMap();
 function $0d5c49892c1215da$export$37b0961d2f4751e2(props, state, ref) {
   let { value, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby } = props;
   const isDisabled = props.isDisabled || state.isDisabled;
   let hasChildren = children != null;
   let hasAriaLabel = ariaLabel != null || ariaLabelledby != null;
-  if (!hasChildren && !hasAriaLabel)
-    console.warn("If you do not provide children, you must specify an aria-label for accessibility");
+  if (!hasChildren && !hasAriaLabel) 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();
@@ -61,6 +94,12 @@ function $0d5c49892c1215da$export$37b0961d2f4751e2(props, state, ref) {
   let { pressProps, isPressed } = $f6c31cce2adf654f$export$45712eceda6fad21({
     isDisabled
   });
+  let { pressProps: labelProps, isPressed: isLabelPressed } = $f6c31cce2adf654f$export$45712eceda6fad21({
+    isDisabled,
+    onPress() {
+      state.setSelectedValue(value);
+    }
+  });
   let { focusableProps } = $e6afbd83fe6ebbd2$export$4c014de7c8940b4c($3ef42575df84b30b$export$9d1611c77c2fe928(props, {
     onFocus: () => state.setLastFocusedValue(value)
   }), ref);
@@ -68,61 +107,73 @@ function $0d5c49892c1215da$export$37b0961d2f4751e2(props, state, ref) {
   let domProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
     labelable: true
   });
-  let tabIndex = state.lastFocusedValue === value || state.lastFocusedValue == null ? 0 : -1;
-  if (isDisabled)
-    tabIndex = void 0;
+  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, descriptionId, errorMessageId, validationBehavior } = $884aeceb3d67f00f$export$37b65e5b5444d35c.get(state);
+  $99facab73266f662$export$5add1d006293d136(ref, state.selectedValue, state.setSelectedValue);
+  $e93e671b31057976$export$b8473d3665f3a75a({
+    validationBehavior
+  }, state, ref);
   return {
+    labelProps: $3ef42575df84b30b$export$9d1611c77c2fe928(labelProps, {
+      onClick: (e) => e.preventDefault()
+    }),
     inputProps: $3ef42575df84b30b$export$9d1611c77c2fe928(domProps, __spreadProps(__spreadValues({}, interactions), {
       type: "radio",
-      name: $884aeceb3d67f00f$export$3b7b268d09480394.get(state),
+      name,
       tabIndex,
       disabled: isDisabled,
+      required: state.isRequired && validationBehavior === "native",
       checked,
       value,
       onChange,
       "aria-describedby": [
-        state.validationState === "invalid" ? $884aeceb3d67f00f$export$61c8d3f0151e21b2.get(state) : null,
-        $884aeceb3d67f00f$export$8e8b214e06dd397d.get(state)
+        props["aria-describedby"],
+        state.isInvalid ? errorMessageId : null,
+        descriptionId
       ].filter(Boolean).join(" ") || void 0
     })),
     isDisabled,
     isSelected: checked,
-    isPressed
+    isPressed: isPressed || isLabelPressed
   };
 }
 function $430f30ed08ec25fa$export$62b9571f283ff5c2(props, state) {
-  let { name, validationState, isReadOnly, isRequired, isDisabled, orientation = "vertical" } = props;
+  let { name, 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(__spreadProps(__spreadValues({}, props), {
     // Radio group is not an HTML input element so it
     // shouldn't be labeled by a <label> element.
-    labelElementType: "span"
+    labelElementType: "span",
+    isInvalid: state.isInvalid,
+    errorMessage: props.errorMessage || validationErrors
   }));
-  $884aeceb3d67f00f$export$8e8b214e06dd397d.set(state, descriptionProps.id);
-  $884aeceb3d67f00f$export$61c8d3f0151e21b2.set(state, errorMessageProps.id);
   let domProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
     labelable: true
   });
   let { focusWithinProps } = $9ab94262bd0047c7$export$420e68273165f4ec({
-    onBlurWithin() {
-      if (!state.selectedValue)
-        state.setLastFocusedValue(null);
-    }
+    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";
+        if (direction === "rtl" && orientation !== "vertical") nextDir = "prev";
+        else nextDir = "next";
         break;
       case "ArrowLeft":
-        if (direction === "rtl" && orientation !== "vertical")
-          nextDir = "next";
-        else
-          nextDir = "prev";
+        if (direction === "rtl" && orientation !== "vertical") nextDir = "next";
+        else nextDir = "prev";
         break;
       case "ArrowDown":
         nextDir = "next";
@@ -157,13 +208,18 @@ function $430f30ed08ec25fa$export$62b9571f283ff5c2(props, state) {
     }
   };
   let groupName = $bdb11010cef70236$export$f680877a34711e37(name);
-  $884aeceb3d67f00f$export$3b7b268d09480394.set(state, groupName);
+  $884aeceb3d67f00f$export$37b65e5b5444d35c.set(state, {
+    name: groupName,
+    descriptionId: descriptionProps.id,
+    errorMessageId: errorMessageProps.id,
+    validationBehavior
+  });
   return {
     radioGroupProps: $3ef42575df84b30b$export$9d1611c77c2fe928(domProps, __spreadValues(__spreadValues({
       // https://www.w3.org/TR/wai-aria-1.2/#radiogroup
       role: "radiogroup",
       onKeyDown,
-      "aria-invalid": validationState === "invalid" || void 0,
+      "aria-invalid": state.isInvalid || void 0,
       "aria-errormessage": props["aria-errormessage"],
       "aria-readonly": isReadOnly || void 0,
       "aria-required": isRequired || void 0,
@@ -172,31 +228,10 @@ function $430f30ed08ec25fa$export$62b9571f283ff5c2(props, state) {
     }, fieldProps), focusWithinProps)),
     labelProps,
     descriptionProps,
-    errorMessageProps
-  };
-}
-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
-  ]);
-  let [selectedValue, setSelected] = $458b0a5536c1a7cf$export$40bfa8c7b0832715(props.value, props.defaultValue, props.onChange);
-  let [lastFocusedValue, setLastFocusedValue] = useState(null);
-  let setSelectedValue = (value) => {
-    if (!props.isReadOnly && !props.isDisabled)
-      setSelected(value);
-  };
-  return {
-    name,
-    selectedValue,
-    setSelectedValue,
-    lastFocusedValue,
-    setLastFocusedValue,
-    isDisabled: props.isDisabled || false,
-    isReadOnly: props.isReadOnly || false,
-    isRequired: props.isRequired || false,
-    validationState: props.validationState || null
+    errorMessageProps,
+    isInvalid,
+    validationErrors,
+    validationDetails
   };
 }
 const RadioGroupContext = React__default.createContext(null);
@@ -207,16 +242,16 @@ const useRadioGroupContext = () => {
   }
   return radioGroupContext;
 };
-const RadioGroupItem$1 = "_RadioGroupItem_1yery_5";
-const label = "_label_1yery_11";
-const radioOuter = "_radioOuter_1yery_28";
-const radioInner = "_radioInner_1yery_29";
-const focusVisible = "_focusVisible_1yery_43";
-const selected = "_selected_1yery_62";
-const invalid = "_invalid_1yery_66";
-const disabled = "_disabled_1yery_70";
-const hovered = "_hovered_1yery_82";
-const readOnly = "_readOnly_1yery_82";
+const RadioGroupItem$1 = "_RadioGroupItem_1eiq3_5";
+const label = "_label_1eiq3_11";
+const radioOuter = "_radioOuter_1eiq3_29";
+const radioInner = "_radioInner_1eiq3_30";
+const focusVisible = "_focusVisible_1eiq3_44";
+const selected = "_selected_1eiq3_63";
+const invalid = "_invalid_1eiq3_67";
+const disabled = "_disabled_1eiq3_71";
+const hovered = "_hovered_1eiq3_83";
+const readOnly = "_readOnly_1eiq3_83";
 const styles$1 = {
   RadioGroupItem: RadioGroupItem$1,
   label,
@@ -237,7 +272,7 @@ function RadioGroupItem(props) {
   const { isFocusVisible, focusProps } = $f7dceffc5ad7768b$export$4e328f61c538687f();
   const { isHovered, hoverProps } = $6179b936705e76d3$export$ae780daf29e6d456(props);
   const className = classNames(styles$1.RadioGroupItem, isSelected && styles$1.selected, isDisabled && styles$1.disabled, isFocusVisible && styles$1.focusVisible, isHovered && styles$1.hovered, validationState === "invalid" && styles$1.invalid);
-  const textColor = isDisabled ? "disabled" : validationState === "invalid" ? "danger" : "primary";
+  const textColor = isDisabled ? "neutral.300" : validationState === "invalid" ? "negative.600" : "primary.800";
   return React__default.createElement("div", {
     className
   }, React__default.createElement(HorizontalStack, {
@@ -265,8 +300,8 @@ function RadioGroupItem(props) {
     content: errorText
   })));
 }
-const RadioGroup$1 = "_RadioGroup_57hp1_5";
-const list = "_list_57hp1_14";
+const RadioGroup$1 = "_RadioGroup_zx68y_5";
+const list = "_list_zx68y_14";
 const styles = {
   RadioGroup: RadioGroup$1,
   list