@semcore/radio 16.1.1 → 17.0.0-prerelease.18

package/lib/esm/Radio.mjs

@@ -1,261 +1,261 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _callSuper from "@babel/runtime/helpers/esm/callSuper";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { createComponent, sstyled, CONTEXT_COMPONENT, assignProps, Component } from "@semcore/core";
+import { createComponent, sstyled, CONTEXT_COMPONENT, Component, assignProps } from "@semcore/core";
+import { Flex, Box, InvalidStateBox } from "@semcore/base-components";
 import assignProps$1, { callAllEventHandlers } from "@semcore/core/lib/utils/assignProps";
 import resolveColorEnhance from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
 import getInputProps, { inputProps } from "@semcore/core/lib/utils/inputProps";
 import { inputProps as inputProps2 } from "@semcore/core/lib/utils/inputProps";
 import logger from "@semcore/core/lib/utils/logger";
 import { useColorResolver } from "@semcore/core/lib/utils/use/useColorResolver";
-import { Flex, Box, InvalidStateBox } from "@semcore/flex-box";
 import { Text as Text$1 } from "@semcore/typography";
 import React from "react";
-var _excluded = ["size", "state", "theme", "keyboardFocused", "value", "tag", "disabled", "includeInputProps", "resolveColor"], _excluded2 = ["children", "Children"];
 /*!__reshadow-styles__:"./style/radio.shadow.css"*/
-var style = (
+const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    '.___SRadio_1xn00_gg_{display:inline-flex;align-items:flex-start;cursor:pointer}.___SRadio_1xn00_gg_ .___SText_1xn00_gg_{margin-left:var(--intergalactic-spacing-2x, 8px);color:var(--intergalactic-text-primary, #191b23)}.___SRadio_1xn00_gg_ .___SText_1xn00_gg_.__color_1xn00_gg_{color:var(--color_1xn00)}.___SRadio_1xn00_gg_.__disabled_1xn00_gg_{pointer-events:none}.___SText_1xn00_gg_._size_m_1xn00_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SText_1xn00_gg_._size_l_1xn00_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___SValue_1xn00_gg_{position:relative;flex-shrink:0;padding:0;outline:0;z-index:0;margin-top:var(--intergalactic-spacing-05x, 2px)}.___SValue_1xn00_gg_::after,.___SValue_1xn00_gg_::before{content:"";position:absolute;right:0;bottom:0;border-radius:50%;background:var(--intergalactic-bg-primary-neutral, #ffffff)}.___SValue_1xn00_gg_::before{top:0;left:0;border:1px solid;transition:calc(var(--intergalactic-duration-control, 200)*1ms) all ease-in-out}.___SValue_1xn00_gg_::after{top:50%;left:50%;transform:translate(-50%,-50%);width:0;height:0}.___SValue_1xn00_gg_.__disabled_1xn00_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.___SValue_1xn00_gg_._size_m_1xn00_gg_{width:16px;height:16px}.___SValue_1xn00_gg_._size_m_1xn00_gg_ .___SInvalidPattern_1xn00_gg_:before{width:14px;height:14px}.___SValue_1xn00_gg_._size_l_1xn00_gg_{width:20px;height:20px}.___SValue_1xn00_gg_._size_l_1xn00_gg_ .___SInvalidPattern_1xn00_gg_:before{width:18px;height:18px}.___SValue_1xn00_gg_._state_normal_1xn00_gg_::before{border-color:var(--intergalactic-border-primary, #c4c7cf)}.___SValue_1xn00_gg_._state_invalid_1xn00_gg_::before{border-color:var(--intergalactic-border-critical-active, #d1002f)}.___SControl_1xn00_gg_{position:absolute;clip:rect(1px,1px,1px,1px)}.___SControl_1xn00_gg_:checked~.___SValue_1xn00_gg_._size_m_1xn00_gg_::after{width:6px;height:6px}.___SControl_1xn00_gg_:checked~.___SValue_1xn00_gg_._size_l_1xn00_gg_::after{width:8px;height:8px}.___SControl_1xn00_gg_:focus-visible+.___SValue_1xn00_gg_._state_normal_1xn00_gg_::before{border-color:var(--intergalactic-border-info-active, #006dca);outline-color:var(--intergalactic-keyboard-focus-outline, #008ff8);outline-style:solid;outline-width:2px;outline-offset:2px;transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms);transition-timing-function:ease-in-out;transition-property:outline-color,outline-width,outline-offset}.___SControl_1xn00_gg_:checked:focus-visible~.___SValue_1xn00_gg_::before,.___SControl_1xn00_gg_:checked~.___SValue_1xn00_gg_::before{border-color:var(--intergalactic-control-primary-info, #008ff8);background-color:var(--intergalactic-control-primary-info, #008ff8)}.___SControl_1xn00_gg_:focus-visible+.___SValue_1xn00_gg_._state_invalid_1xn00_gg_::before{border-color:var(--intergalactic-border-critical-active, #d1002f);outline-color:var(--intergalactic-keyboard-focus-outline, #008ff8);outline-style:solid;outline-width:2px;outline-offset:2px;transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms);transition-timing-function:ease-in-out;transition-property:outline-color,outline-width,outline-offset;outline-color:var(--intergalactic-keyboard-focus-invalid-outline, #ff4953)}.___SControl_1xn00_gg_:checked~.___SValue_1xn00_gg_.__theme_1xn00_gg_::before{border-color:var(--theme_1xn00);background-color:var(--theme_1xn00)}.___SValue_1xn00_gg_._state_normal_1xn00_gg_.__theme_1xn00_gg_::before{border-color:var(--theme_1xn00)}.___SInvalidPattern_1xn00_gg_{background:0 0;overflow:hidden}.___SInvalidPattern_1xn00_gg_:before{content:"";position:absolute;top:1px;left:1px;border-radius:50%;background-image:var(--intergalactic-border-critical-pattern, repeating-linear-gradient(315deg, rgba(209, 0, 47, 1) 0, rgba(209, 0, 47, 1) 2px, transparent 0, transparent 50%));background-size:6px 6px;background-color:var(--intergalactic-bg-primary-neutral, #ffffff)}',
+    '.___SRadio_1qr3e_gg_{display:inline-flex;align-items:flex-start;cursor:pointer}.___SRadio_1qr3e_gg_ .___SText_1qr3e_gg_{margin-left:var(--intergalactic-spacing-2x, 8px);color:var(--intergalactic-text-primary, #191b23)}.___SRadio_1qr3e_gg_ .___SText_1qr3e_gg_.__color_1qr3e_gg_{color:var(--color_1qr3e)}.___SRadio_1qr3e_gg_.__disabled_1qr3e_gg_{pointer-events:none}.___SText_1qr3e_gg_._size_m_1qr3e_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SText_1qr3e_gg_._size_l_1qr3e_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___SValue_1qr3e_gg_{position:relative;flex-shrink:0;padding:0;outline:0;z-index:0;margin-top:var(--intergalactic-spacing-05x, 2px)}.___SValue_1qr3e_gg_::after,.___SValue_1qr3e_gg_::before{content:"";position:absolute;right:0;bottom:0;border-radius:50%;background:var(--intergalactic-bg-primary-neutral, #ffffff)}.___SValue_1qr3e_gg_::before{top:0;left:0;border:1px solid;transition:calc(var(--intergalactic-duration-control, 200)*1ms) all ease-in-out}.___SValue_1qr3e_gg_::after{top:50%;left:50%;transform:translate(-50%,-50%);width:0;height:0}.___SValue_1qr3e_gg_.__disabled_1qr3e_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.___SValue_1qr3e_gg_._size_m_1qr3e_gg_{width:16px;height:16px}.___SValue_1qr3e_gg_._size_m_1qr3e_gg_ .___SInvalidPattern_1qr3e_gg_:before{width:14px;height:14px}.___SValue_1qr3e_gg_._size_l_1qr3e_gg_{width:20px;height:20px}.___SValue_1qr3e_gg_._size_l_1qr3e_gg_ .___SInvalidPattern_1qr3e_gg_:before{width:18px;height:18px}.___SValue_1qr3e_gg_._state_normal_1qr3e_gg_::before{border-color:var(--intergalactic-border-primary, #c4c7cf)}.___SValue_1qr3e_gg_._state_invalid_1qr3e_gg_::before{border-color:var(--intergalactic-border-critical-active, #d1002f)}.___SControl_1qr3e_gg_{position:absolute;clip:rect(1px,1px,1px,1px)}.___SControl_1qr3e_gg_:checked~.___SValue_1qr3e_gg_._size_m_1qr3e_gg_::after{width:6px;height:6px}.___SControl_1qr3e_gg_:checked~.___SValue_1qr3e_gg_._size_l_1qr3e_gg_::after{width:8px;height:8px}.___SControl_1qr3e_gg_:focus-visible+.___SValue_1qr3e_gg_._state_normal_1qr3e_gg_::before{border-color:var(--intergalactic-border-info-active, #006dca);outline-color:var(--intergalactic-keyboard-focus-outline, #008ff8);outline-style:solid;outline-width:2px;outline-offset:2px;transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms);transition-timing-function:ease-in-out;transition-property:outline-color,outline-width,outline-offset}.___SControl_1qr3e_gg_:checked:focus-visible~.___SValue_1qr3e_gg_::before,.___SControl_1qr3e_gg_:checked~.___SValue_1qr3e_gg_::before{border-color:var(--intergalactic-control-primary-info, #008ff8);background-color:var(--intergalactic-control-primary-info, #008ff8)}.___SControl_1qr3e_gg_:focus-visible+.___SValue_1qr3e_gg_._state_invalid_1qr3e_gg_::before{border-color:var(--intergalactic-border-critical-active, #d1002f);outline-color:var(--intergalactic-keyboard-focus-outline, #008ff8);outline-style:solid;outline-width:2px;outline-offset:2px;transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms);transition-timing-function:ease-in-out;transition-property:outline-color,outline-width,outline-offset;outline-color:var(--intergalactic-keyboard-focus-invalid-outline, #ff4953)}.___SControl_1qr3e_gg_:checked~.___SValue_1qr3e_gg_.__theme_1qr3e_gg_::before{border-color:var(--theme_1qr3e);background-color:var(--theme_1qr3e)}.___SValue_1qr3e_gg_._state_normal_1qr3e_gg_.__theme_1qr3e_gg_::before{border-color:var(--theme_1qr3e)}.___SInvalidPattern_1qr3e_gg_{background:0 0;overflow:hidden}.___SInvalidPattern_1qr3e_gg_:before{content:"";position:absolute;top:1px;left:1px;border-radius:50%;background-image:var(--intergalactic-border-critical-pattern, repeating-linear-gradient(315deg, rgba(209, 0, 47, 1) 0, rgba(209, 0, 47, 1) 2px, transparent 0, transparent 50%));background-size:6px 6px;background-color:var(--intergalactic-bg-primary-neutral, #ffffff)}',
     /*__inner_css_end__*/
-    "1xn00_gg_"
+    "1qr3e_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SRadio": "___SRadio_1xn00_gg_",
-    "_disabled": "__disabled_1xn00_gg_",
-    "__SText": "___SText_1xn00_gg_",
-    "_size_m": "_size_m_1xn00_gg_",
-    "_size_l": "_size_l_1xn00_gg_",
-    "__SValue": "___SValue_1xn00_gg_",
-    "_state_normal": "_state_normal_1xn00_gg_",
-    "_state_invalid": "_state_invalid_1xn00_gg_",
-    "__SControl": "___SControl_1xn00_gg_",
-    "_theme": "__theme_1xn00_gg_",
-    "--theme": "--theme_1xn00",
-    "_color": "__color_1xn00_gg_",
-    "--color": "--color_1xn00",
-    "__SInvalidPattern": "___SInvalidPattern_1xn00_gg_"
+    "__SRadio": "___SRadio_1qr3e_gg_",
+    "_disabled": "__disabled_1qr3e_gg_",
+    "__SText": "___SText_1qr3e_gg_",
+    "_size_m": "_size_m_1qr3e_gg_",
+    "_size_l": "_size_l_1qr3e_gg_",
+    "__SValue": "___SValue_1qr3e_gg_",
+    "_state_normal": "_state_normal_1qr3e_gg_",
+    "_state_invalid": "_state_invalid_1qr3e_gg_",
+    "__SControl": "___SControl_1qr3e_gg_",
+    "_theme": "__theme_1qr3e_gg_",
+    "--theme": "--theme_1qr3e",
+    "_color": "__color_1qr3e_gg_",
+    "--color": "--color_1qr3e",
+    "__SInvalidPattern": "___SInvalidPattern_1qr3e_gg_"
   })
 );
-var RadioGroupRoot = /* @__PURE__ */ (function(_Component) {
-  function RadioGroupRoot2() {
-    _classCallCheck(this, RadioGroupRoot2);
-    return _callSuper(this, RadioGroupRoot2, arguments);
+class RadioGroupRoot extends Component {
+  uncontrolledProps() {
+    return {
+      value: null
+    };
   }
-  _inherits(RadioGroupRoot2, _Component);
-  return _createClass(RadioGroupRoot2, [{
-    key: "uncontrolledProps",
-    value: function uncontrolledProps() {
-      return {
-        value: null
-      };
-    }
-  }, {
-    key: "setContext",
-    value: function setContext() {
-      var _this$asProps = this.asProps, theme = _this$asProps.theme, size = _this$asProps.size, name = _this$asProps.name, value = _this$asProps.value, onChange = _this$asProps.onChange, disabled = _this$asProps.disabled;
-      return {
-        onChange,
-        value,
-        theme,
-        size,
-        name,
-        disabled
-      };
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _ref = this.asProps;
-      var Children = this.asProps.Children;
-      return /* @__PURE__ */ React.createElement(Flex, assignProps({
-        "direction": "column",
-        "role": "group",
-        "__excludeProps": ["onChange"]
-      }, _ref), /* @__PURE__ */ React.createElement(Children, null));
-    }
-  }]);
-})(Component);
+  setContext() {
+    const {
+      theme,
+      size,
+      name,
+      value,
+      onChange,
+      disabled
+    } = this.asProps;
+    return {
+      onChange,
+      value,
+      theme,
+      size,
+      name,
+      disabled
+    };
+  }
+  render() {
+    var _ref = this.asProps;
+    const {
+      Children
+    } = this.asProps;
+    return /* @__PURE__ */ React.createElement(Flex, assignProps({
+      "direction": "column",
+      "role": "group",
+      "__excludeProps": ["onChange"]
+    }, _ref), /* @__PURE__ */ React.createElement(Children, null));
+  }
+}
 _defineProperty(RadioGroupRoot, "displayName", "RadioGroup");
 _defineProperty(RadioGroupRoot, "defaultProps", {
   defaultValue: null
 });
-var RadioGroup = createComponent(RadioGroupRoot);
-var RadioRoot = /* @__PURE__ */ (function(_Component2) {
-  function RadioRoot2() {
-    var _this;
-    _classCallCheck(this, RadioRoot2);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, RadioRoot2, [].concat(args));
-    _defineProperty(_this, "state", {
+const RadioGroup = createComponent(RadioGroupRoot);
+class RadioRoot extends Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "state", {
       hoistedDisabled: void 0
     });
-    _defineProperty(_this, "hoistDisabled", function(disabled) {
-      logger.warn(true, "Don't set disabled on Radio.Value or Radio.Text, set it on Radio or on RadioGroup (for all items) instead. Otherwise it will produce wrong SSR output.", _this.asProps["data-ui-name"]);
-      _this.setState({
+    _defineProperty(this, "hoistDisabled", (disabled) => {
+      logger.warn(true, `Don't set disabled on Radio.Value or Radio.Text, set it on Radio or on RadioGroup (for all items) instead. Otherwise it will produce wrong SSR output.`, this.asProps["data-ui-name"]);
+      this.setState({
         hoistedDisabled: disabled
       });
     });
-    return _this;
   }
-  _inherits(RadioRoot2, _Component2);
-  return _createClass(RadioRoot2, [{
-    key: "getTextProps",
-    value: function getTextProps() {
-      var _assignProps6 = assignProps$1(this.asProps, this.context), _assignProps6$size = _assignProps6.size, size = _assignProps6$size === void 0 ? "m" : _assignProps6$size, disabled = _assignProps6.disabled, label = _assignProps6.label;
-      var hoistedDisabled = this.state.hoistedDisabled;
-      var textProps = {
-        size,
-        children: label,
-        disabled: disabled !== null && disabled !== void 0 ? disabled : hoistedDisabled,
-        hoistDisabled: this.hoistDisabled,
-        rootDisabled: this.props.disabled
-      };
-      return textProps;
-    }
-  }, {
-    key: "getValueProps",
-    value: function getValueProps() {
-      var _this$props$size;
-      var _assignProps7 = assignProps$1(this.asProps, this.context), _assignProps7$size = _assignProps7.size, size = _assignProps7$size === void 0 ? "m" : _assignProps7$size, _assignProps7$state = _assignProps7.state, state = _assignProps7$state === void 0 ? "normal" : _assignProps7$state, theme = _assignProps7.theme, disabled = _assignProps7.disabled, name = _assignProps7.name;
-      var _this$asProps2 = this.asProps, value = _this$asProps2.value, checked = _this$asProps2.checked;
-      var hoistedDisabled = this.state.hoistedDisabled;
-      return {
-        size: (_this$props$size = this.props.size) !== null && _this$props$size !== void 0 ? _this$props$size : size,
-        disabled: disabled !== null && disabled !== void 0 ? disabled : hoistedDisabled,
-        state,
-        theme,
-        value,
-        checked,
-        name,
-        hoistDisabled: this.hoistDisabled,
-        rootDisabled: this.props.disabled
-      };
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _ref2 = this.asProps, _ref6;
-      var SRadio = Box;
-      var _this$asProps3 = this.asProps, styles = _this$asProps3.styles, Children = _this$asProps3.Children, hasChildren = _this$asProps3.children;
-      return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SRadio, _ref6.cn("SRadio", _objectSpread({}, assignProps({
+  getTextProps() {
+    const {
+      size = "m",
+      disabled,
+      label
+    } = assignProps$1(this.asProps, this.context);
+    const {
+      hoistedDisabled
+    } = this.state;
+    const textProps = {
+      size,
+      children: label,
+      disabled: disabled ?? hoistedDisabled,
+      hoistDisabled: this.hoistDisabled,
+      rootDisabled: this.props.disabled
+    };
+    return textProps;
+  }
+  getValueProps() {
+    const {
+      size = "m",
+      state = "normal",
+      theme,
+      disabled,
+      name
+    } = assignProps$1(this.asProps, this.context);
+    const {
+      value,
+      checked
+    } = this.asProps;
+    const {
+      hoistedDisabled
+    } = this.state;
+    return {
+      size: this.props.size ?? size,
+      disabled: disabled ?? hoistedDisabled,
+      state,
+      theme,
+      value,
+      checked,
+      name,
+      hoistDisabled: this.hoistDisabled,
+      rootDisabled: this.props.disabled
+    };
+  }
+  render() {
+    var _ref2 = this.asProps, _ref6;
+    const SRadio = Box;
+    const {
+      styles,
+      Children,
+      children: hasChildren
+    } = this.asProps;
+    return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SRadio, _ref6.cn("SRadio", {
+      ...assignProps({
         "tag": "label",
         "__excludeProps": ["onChange", "label", "disabled"]
-      }, _ref2))), hasChildren ? /* @__PURE__ */ React.createElement(Children, _ref6.cn("Children", {})) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Radio.Value, null), /* @__PURE__ */ React.createElement(Radio.Text, null)));
-    }
-  }]);
-})(Component);
+      }, _ref2)
+    }), hasChildren ? /* @__PURE__ */ React.createElement(Children, _ref6.cn("Children", {})) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Radio.Value, null), /* @__PURE__ */ React.createElement(Radio.Text, null)));
+  }
+}
 _defineProperty(RadioRoot, "displayName", "Radio");
 _defineProperty(RadioRoot, "style", style);
 _defineProperty(RadioRoot, "contextType", RadioGroup[CONTEXT_COMPONENT]);
-var ValueRoot = /* @__PURE__ */ (function(_Component3) {
-  function ValueRoot2() {
-    var _this2;
-    _classCallCheck(this, ValueRoot2);
-    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
-    }
-    _this2 = _callSuper(this, ValueRoot2, [].concat(args));
-    _defineProperty(_this2, "bindHandlerChange", function(value) {
-      return function(e) {
-        if (typeof _this2.context.onChange === "function") {
-          _this2.context.onChange(value, e);
-        }
-      };
+class ValueRoot extends Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "bindHandlerChange", (value) => (e) => {
+      if (typeof this.context.onChange === "function") {
+        this.context.onChange(value, e);
+      }
     });
-    return _this2;
   }
-  _inherits(ValueRoot2, _Component3);
-  return _createClass(ValueRoot2, [{
-    key: "uncontrolledProps",
-    value: function uncontrolledProps() {
-      return {
-        checked: function checked(e) {
-          return e.target.checked;
-        }
-      };
-    }
-  }, {
-    key: "getControlProps",
-    value: function getControlProps() {
-      var currentValue = this.context.value;
-      var _this$asProps4 = this.asProps, forwardRef = _this$asProps4.forwardRef, includeInputProps = _this$asProps4.includeInputProps, state = _this$asProps4.state, value = _this$asProps4.value;
-      var _getInputProps = getInputProps(this.asProps, includeInputProps), _getInputProps2 = _slicedToArray(_getInputProps, 1), commonControlProps = _getInputProps2[0];
-      var inputValue = value !== null && value !== void 0 ? value : "";
-      var controlProps = _objectSpread(_objectSpread({
-        ref: forwardRef,
-        state
-      }, commonControlProps), {}, {
-        value: inputValue
-      });
-      if (currentValue !== void 0) {
-        var onChange = this.props.onChange;
-        controlProps.checked = currentValue === inputValue;
-        controlProps.onChange = callAllEventHandlers(onChange, this.bindHandlerChange(inputValue));
-      }
-      return controlProps;
+  uncontrolledProps() {
+    return {
+      checked: (e) => e.target.checked
+    };
+  }
+  getControlProps() {
+    const currentValue = this.context.value;
+    const {
+      forwardRef,
+      includeInputProps,
+      state,
+      value
+    } = this.asProps;
+    const [commonControlProps] = getInputProps(this.asProps, includeInputProps);
+    const inputValue = value ?? "";
+    const controlProps = {
+      ref: forwardRef,
+      state,
+      ...commonControlProps,
+      value: inputValue
+    };
+    if (currentValue !== void 0) {
+      const {
+        onChange
+      } = this.props;
+      controlProps.checked = currentValue === inputValue;
+      controlProps.onChange = callAllEventHandlers(onChange, this.bindHandlerChange(inputValue));
     }
-  }, {
-    key: "getRadioMarkProps",
-    value: function getRadioMarkProps() {
-      var currentValue = this.context.value;
-      var _this$asProps5 = this.asProps, size = _this$asProps5.size, state = _this$asProps5.state, theme = _this$asProps5.theme, keyboardFocused = _this$asProps5.keyboardFocused, value = _this$asProps5.value, tag = _this$asProps5.tag, disabled = _this$asProps5.disabled, includeInputProps = _this$asProps5.includeInputProps, resolveColor = _this$asProps5.resolveColor, other = _objectWithoutProperties(_this$asProps5, _excluded);
-      var _getInputProps3 = getInputProps(other, includeInputProps), _getInputProps4 = _slicedToArray(_getInputProps3, 2), commonControlProps = _getInputProps4[0], radioMarkProps = _getInputProps4[1];
-      radioMarkProps.children;
-      radioMarkProps.Children;
-      var propsWithoutChildren = _objectWithoutProperties(radioMarkProps, _excluded2);
-      var inputValue = value !== null && value !== void 0 ? value : "";
-      var markProps = _objectSpread({
-        theme,
-        size,
-        state,
-        keyboardFocused,
-        disabled,
-        resolveColor,
-        checked: commonControlProps.checked
-      }, propsWithoutChildren);
-      if (currentValue !== void 0) {
-        var onClick = this.props.onClick;
-        if (tag !== "label") {
-          markProps.onClick = callAllEventHandlers(onClick, this.bindHandlerChange(inputValue));
-        }
+    return controlProps;
+  }
+  getRadioMarkProps() {
+    const currentValue = this.context.value;
+    const {
+      size,
+      state,
+      theme,
+      keyboardFocused,
+      value,
+      tag,
+      disabled,
+      includeInputProps,
+      resolveColor,
+      ...other
+    } = this.asProps;
+    const [commonControlProps, radioMarkProps] = getInputProps(other, includeInputProps);
+    const {
+      children: _children,
+      Children: _Children,
+      ...propsWithoutChildren
+    } = radioMarkProps;
+    const inputValue = value ?? "";
+    const markProps = {
+      theme,
+      size,
+      state,
+      keyboardFocused,
+      disabled,
+      resolveColor,
+      checked: commonControlProps.checked,
+      ...propsWithoutChildren
+    };
+    if (currentValue !== void 0) {
+      const {
+        onClick
+      } = this.props;
+      if (tag !== "label") {
+        markProps.onClick = callAllEventHandlers(onClick, this.bindHandlerChange(inputValue));
       }
-      return markProps;
     }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      if (this.asProps.rootDisabled !== this.asProps.disabled) {
-        this.asProps.hoistDisabled(this.asProps.disabled);
-      }
+    return markProps;
+  }
+  componentDidUpdate() {
+    if (this.asProps.rootDisabled !== this.asProps.disabled) {
+      this.asProps.hoistDisabled(this.asProps.disabled);
     }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      if (this.asProps.rootDisabled !== this.asProps.disabled) {
-        this.asProps.hoistDisabled(this.asProps.disabled);
-      }
+  }
+  componentDidMount() {
+    if (this.asProps.rootDisabled !== this.asProps.disabled) {
+      this.asProps.hoistDisabled(this.asProps.disabled);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _ref8;
-      var _this$asProps6 = this.asProps, styles = _this$asProps6.styles, hasChildren = _this$asProps6.children, Children = _this$asProps6.Children;
-      if (!hasChildren) {
-        return sstyled(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Radio.Value.Control, null), /* @__PURE__ */ React.createElement(Radio.Value.RadioMark, null));
-      }
-      return _ref8 = sstyled(styles), /* @__PURE__ */ React.createElement(Children, _ref8.cn("Children", {}));
+  }
+  render() {
+    var _ref8;
+    const {
+      styles,
+      children: hasChildren,
+      Children
+    } = this.asProps;
+    if (!hasChildren) {
+      return sstyled(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Radio.Value.Control, null), /* @__PURE__ */ React.createElement(Radio.Value.RadioMark, null));
     }
-  }]);
-})(Component);
+    return _ref8 = sstyled(styles), /* @__PURE__ */ React.createElement(Children, _ref8.cn("Children", {}));
+  }
+}
 _defineProperty(ValueRoot, "defaultProps", {
   includeInputProps: inputProps,
   defaultChecked: false
@@ -264,56 +264,72 @@ _defineProperty(ValueRoot, "enhance", [resolveColorEnhance()]);
 _defineProperty(ValueRoot, "displayName", "Value");
 _defineProperty(ValueRoot, "contextType", RadioGroup[CONTEXT_COMPONENT]);
 _defineProperty(ValueRoot, "style", style);
-var Control = function Control2(props) {
+function Control(props) {
   var _ref3 = arguments[0], _ref9;
-  var SControl = Box;
-  var styles = props.styles, state = props.state;
-  return _ref9 = sstyled(styles), /* @__PURE__ */ React.createElement(SControl, _ref9.cn("SControl", _objectSpread({}, assignProps({
-    "tag": "input",
-    "type": "radio",
-    "aria-invalid": state === "invalid"
-  }, _ref3))));
-};
+  const SControl = Box;
+  const {
+    styles,
+    state
+  } = props;
+  return _ref9 = sstyled(styles), /* @__PURE__ */ React.createElement(SControl, _ref9.cn("SControl", {
+    ...assignProps({
+      "tag": "input",
+      "type": "radio",
+      "aria-invalid": state === "invalid"
+    }, _ref3)
+  }));
+}
 Control.displayName = "Control";
-var RadioMark = function RadioMark2(props) {
+function RadioMark(props) {
   var _ref4 = arguments[0], _ref0;
-  var SValue = Box;
-  var SInvalidPattern = InvalidStateBox;
-  var theme = props.theme, styles = props.styles, resolveColor = props.resolveColor, state = props.state, checked = props.checked;
-  return _ref0 = sstyled(styles), /* @__PURE__ */ React.createElement(SValue, _ref0.cn("SValue", _objectSpread({}, assignProps({
-    "tag": "div",
-    "use:theme": resolveColor(theme),
-    "aria-hidden": true
-  }, _ref4))), state === "invalid" && !checked && /* @__PURE__ */ React.createElement(SInvalidPattern, _ref0.cn("SInvalidPattern", {})));
-};
+  const SValue = Box;
+  const SInvalidPattern = InvalidStateBox;
+  const {
+    theme,
+    styles,
+    resolveColor,
+    state,
+    checked
+  } = props;
+  return _ref0 = sstyled(styles), /* @__PURE__ */ React.createElement(SValue, _ref0.cn("SValue", {
+    ...assignProps({
+      "tag": "div",
+      "use:theme": resolveColor(theme),
+      "aria-hidden": true
+    }, _ref4)
+  }), state === "invalid" && !checked && /* @__PURE__ */ React.createElement(SInvalidPattern, _ref0.cn("SInvalidPattern", {})));
+}
 RadioMark.displayName = "RadioMark";
-var Text = function Text2(props) {
+function Text(props) {
   var _ref5 = arguments[0], _ref1;
-  var SText = Text$1;
-  var styles = props.styles, color = props.color;
-  React.useEffect(function() {
+  const SText = Text$1;
+  const {
+    styles,
+    color
+  } = props;
+  React.useEffect(() => {
     if (props.rootDisabled !== props.disabled) {
       props.hoistDisabled(props.disabled);
     }
   }, [props.rootDisabled, props.disabled, props.hoistDisabled]);
-  var resolveColor = useColorResolver();
-  return _ref1 = sstyled(styles), /* @__PURE__ */ React.createElement(SText, _ref1.cn("SText", _objectSpread({}, assignProps({
-    "tag": "span",
-    "use:color": resolveColor(color)
-  }, _ref5))));
-};
+  const resolveColor = useColorResolver();
+  return _ref1 = sstyled(styles), /* @__PURE__ */ React.createElement(SText, _ref1.cn("SText", {
+    ...assignProps({
+      "tag": "span",
+      "use:color": resolveColor(color)
+    }, _ref5)
+  }));
+}
 Text.displayName = "Text";
-var Value = createComponent(ValueRoot, {
+const Value = createComponent(ValueRoot, {
   Control,
   RadioMark
 });
-var Radio = createComponent(RadioRoot, {
+const Radio = createComponent(RadioRoot, {
   Text,
   Value
 });
-var wrapRadioGroup = function wrapRadioGroup2(wrapper) {
-  return wrapper;
-};
+const wrapRadioGroup = (wrapper) => wrapper;
 export {
   RadioGroup,
   Radio as default,