@semcore/radio 6.43.4-prerelease.0 → 6.44.0-prerelease.0

package/lib/esm/Radio.mjs

@@ -1,60 +1,56 @@
 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 _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
 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 _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled } from "@semcore/utils/lib/core/index";
-import createComponent, { CONTEXT_COMPONENT, assignProps, Component, sstyled as sstyled$1 } from "@semcore/core";
-import React from "react";
-import { Flex, Box, InvalidStateBox } from "@semcore/flex-box";
-import assignProps$1, { callAllEventHandlers } from "@semcore/utils/lib/assignProps";
-import keyboardFocusEnhance from "@semcore/utils/lib/enhances/keyboardFocusEnhance";
-import resolveColorEnhance from "@semcore/utils/lib/enhances/resolveColorEnhance";
-import getInputProps, { inputProps } from "@semcore/utils/lib/inputProps";
-import { inputProps as inputProps2 } from "@semcore/utils/lib/inputProps";
-import { useColorResolver } from "@semcore/utils/lib/use/useColorResolver";
-import logger from "@semcore/utils/lib/logger";
+import { sstyled, assignProps, Component, createComponent } from "@semcore/core";
+import { Flex, Box, InvalidStateBox } from "@semcore/base-components";
+import { 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 { Text as Text$1 } from "@semcore/typography";
-var _excluded = ["size", "state", "theme", "keyboardFocused", "value", "tag", "disabled", "includeInputProps", "resolveColor"], _excluded2 = ["children", "Children"];
+import React from "react";
+var _excluded = ["size", "state", "theme", "keyboardFocused", "value", "tag", "disabled", "includeInputProps", "resolveColor", "children", "Children"];
 /*!__reshadow-styles__:"./style/radio.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    '.___SRadio_mgb6n_gg_{display:inline-flex;align-items:flex-start;cursor:pointer}.___SRadio_mgb6n_gg_ .___SText_mgb6n_gg_{margin-left:var(--intergalactic-spacing-2x, 8px);color:var(--intergalactic-text-primary, #191b23)}.___SRadio_mgb6n_gg_ .___SText_mgb6n_gg_.__color_mgb6n_gg_{color:var(--color_mgb6n)}.___SRadio_mgb6n_gg_.__disabled_mgb6n_gg_{pointer-events:none}.___SText_mgb6n_gg_._size_m_mgb6n_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SText_mgb6n_gg_._size_l_mgb6n_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___SValue_mgb6n_gg_{position:relative;flex-shrink:0;padding:0;outline:0;z-index:0;margin-top:var(--intergalactic-spacing-05x, 2px)}.___SValue_mgb6n_gg_::after,.___SValue_mgb6n_gg_::before{content:"";position:absolute;right:0;bottom:0;border-radius:50%;background:var(--intergalactic-bg-primary-neutral, #ffffff)}.___SValue_mgb6n_gg_::before{top:0;left:0;border:1px solid;transition:calc(var(--intergalactic-duration-control, 200)*1ms) all ease-in-out}.___SValue_mgb6n_gg_::after{top:50%;left:50%;transform:translate(-50%,-50%);width:0;height:0}.___SValue_mgb6n_gg_.__disabled_mgb6n_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_mgb6n_gg_._size_m_mgb6n_gg_{width:16px;height:16px}.___SValue_mgb6n_gg_._size_m_mgb6n_gg_ .___SInvalidPattern_mgb6n_gg_:before{width:14px;height:14px}.___SValue_mgb6n_gg_._size_l_mgb6n_gg_{width:20px;height:20px}.___SValue_mgb6n_gg_._size_l_mgb6n_gg_ .___SInvalidPattern_mgb6n_gg_:before{width:18px;height:18px}.___SValue_mgb6n_gg_._state_normal_mgb6n_gg_::before{border-color:var(--intergalactic-border-primary, #c4c7cf)}.___SValue_mgb6n_gg_._state_invalid_mgb6n_gg_::before{border-color:var(--intergalactic-border-critical-active, #d1002f)}.___SControl_mgb6n_gg_{position:absolute;clip:rect(1px,1px,1px,1px)}.___SControl_mgb6n_gg_:checked~.___SValue_mgb6n_gg_::before{border-color:var(--intergalactic-control-primary-info, #008ff8);background-color:var(--intergalactic-control-primary-info, #008ff8)}.___SControl_mgb6n_gg_:checked~.___SValue_mgb6n_gg_._size_m_mgb6n_gg_::after{width:6px;height:6px}.___SControl_mgb6n_gg_:checked~.___SValue_mgb6n_gg_._size_l_mgb6n_gg_::after{width:8px;height:8px}.___SValue_mgb6n_gg_._state_normal_mgb6n_gg_.__keyboardFocused_mgb6n_gg_::before{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));border-color:var(--intergalactic-border-info-active, #006dca)}.___SValue_mgb6n_gg_._state_invalid_mgb6n_gg_.__keyboardFocused_mgb6n_gg_::before{box-shadow:var(--intergalactic-keyboard-focus-invalid, 0px 0px 0px 3px rgba(255, 73, 83, 0.5))}.___SControl_mgb6n_gg_:checked~.___SValue_mgb6n_gg_.__theme_mgb6n_gg_::before{border-color:var(--theme_mgb6n);background-color:var(--theme_mgb6n)}.___SValue_mgb6n_gg_._state_normal_mgb6n_gg_.__theme_mgb6n_gg_::before{border-color:var(--theme_mgb6n)}.___SInvalidPattern_mgb6n_gg_{background:0 0;overflow:hidden}.___SInvalidPattern_mgb6n_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_dgqi9_gg_{display:inline-flex;align-items:flex-start;cursor:pointer}.___SRadio_dgqi9_gg_ .___SText_dgqi9_gg_{margin-left:var(--intergalactic-spacing-2x, 8px);color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899))}.___SRadio_dgqi9_gg_ .___SText_dgqi9_gg_.__color_dgqi9_gg_{color:var(--color_dgqi9)}.___SRadio_dgqi9_gg_.__disabled_dgqi9_gg_{pointer-events:none}.___SValue_dgqi9_gg_{position:relative;flex-shrink:0;padding:0;outline:0;z-index:0;margin-top:var(--intergalactic-spacing-05x, 2px)}.___SValue_dgqi9_gg_::after,.___SValue_dgqi9_gg_::before{content:"";position:absolute;right:0;bottom:0;border-radius:50%;background:var(--intergalactic-bg-primary-neutral, rgb(255, 255, 255))}.___SValue_dgqi9_gg_::before{top:0;left:0;border:1px solid;transition:calc(var(--intergalactic-duration-control, 200)*1ms) all ease-in-out}.___SValue_dgqi9_gg_::after{top:50%;left:50%;transform:translate(-50%,-50%);width:0;height:0}.___SValue_dgqi9_gg_.__disabled_dgqi9_gg_{opacity:var(--intergalactic-disabled-opacity, 0.4);cursor:default;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.___SValue_dgqi9_gg_._size_m_dgqi9_gg_{width:16px;height:16px}.___SValue_dgqi9_gg_._size_m_dgqi9_gg_ .___SInvalidPattern_dgqi9_gg_:before{width:14px;height:14px}.___SValue_dgqi9_gg_._size_l_dgqi9_gg_{width:20px;height:20px}.___SValue_dgqi9_gg_._size_l_dgqi9_gg_ .___SInvalidPattern_dgqi9_gg_:before{width:18px;height:18px}.___SValue_dgqi9_gg_._state_normal_dgqi9_gg_::before{border-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@supports (color:color(display-p3 0 0 0%)){.___SValue_dgqi9_gg_._state_normal_dgqi9_gg_::before{border-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___SValue_dgqi9_gg_._state_normal_dgqi9_gg_::before{border-color:var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___SValue_dgqi9_gg_._state_invalid_dgqi9_gg_::before{border-color:var(--intergalactic-border-critical-active, rgba(255, 0, 4, 0.56))}@supports (color:color(display-p3 0 0 0%)){.___SValue_dgqi9_gg_._state_invalid_dgqi9_gg_::before{border-color:var(--intergalactic-border-critical-active, rgba(255, 0, 4, 0.56))}@media (color-gamut:p3){.___SValue_dgqi9_gg_._state_invalid_dgqi9_gg_::before{border-color:var(--intergalactic-border-critical-active, color(display-p3 0.918 0.19866 0.14259 / 0.56))}}}.___SControl_dgqi9_gg_{position:absolute;clip:rect(1px,1px,1px,1px)}.___SControl_dgqi9_gg_:checked~.___SValue_dgqi9_gg_._size_m_dgqi9_gg_::after{width:6px;height:6px}.___SControl_dgqi9_gg_:checked~.___SValue_dgqi9_gg_._size_l_dgqi9_gg_::after{width:8px;height:8px}.___SControl_dgqi9_gg_:focus-visible+.___SValue_dgqi9_gg_._state_normal_dgqi9_gg_::before{border-color:var(--intergalactic-border-info-active, rgba(0, 22, 195, 0.386));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}@supports (color:color(display-p3 0 0 0%)){.___SControl_dgqi9_gg_:focus-visible+.___SValue_dgqi9_gg_._state_normal_dgqi9_gg_::before{border-color:var(--intergalactic-border-info-active, rgba(0, 22, 195, 0.386))}@media (color-gamut:p3){.___SControl_dgqi9_gg_:focus-visible+.___SValue_dgqi9_gg_._state_normal_dgqi9_gg_::before{border-color:var(--intergalactic-border-info-active, color(display-p3 0.01805 0.08334 0.73488 / 0.386))}}}.___SControl_dgqi9_gg_:checked:focus-visible~.___SValue_dgqi9_gg_::before,.___SControl_dgqi9_gg_:checked~.___SValue_dgqi9_gg_::before{border-color:var(--intergalactic-control-primary-info, rgb(26, 30, 26));background-color:var(--intergalactic-control-primary-info, rgb(26, 30, 26))}.___SControl_dgqi9_gg_:focus-visible+.___SValue_dgqi9_gg_._state_invalid_dgqi9_gg_::before{border-color:var(--intergalactic-border-critical-active, rgba(255, 0, 4, 0.56));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}@supports (color:color(display-p3 0 0 0%)){.___SControl_dgqi9_gg_:focus-visible+.___SValue_dgqi9_gg_._state_invalid_dgqi9_gg_::before{border-color:var(--intergalactic-border-critical-active, rgba(255, 0, 4, 0.56))}@media (color-gamut:p3){.___SControl_dgqi9_gg_:focus-visible+.___SValue_dgqi9_gg_._state_invalid_dgqi9_gg_::before{border-color:var(--intergalactic-border-critical-active, color(display-p3 0.918 0.19866 0.14259 / 0.56))}}}@supports (color:oklab(0%0 0%)){.___SControl_dgqi9_gg_:focus-visible+.___SValue_dgqi9_gg_._state_invalid_dgqi9_gg_::before{outline-color:var(--intergalactic-keyboard-focus-invalid-outline, oklch(0.628 0.257 28.9 / 0.652))}}.___SControl_dgqi9_gg_:checked~.___SValue_dgqi9_gg_.__theme_dgqi9_gg_::before{border-color:var(--theme_dgqi9);background-color:var(--theme_dgqi9)}.___SValue_dgqi9_gg_._state_normal_dgqi9_gg_.__theme_dgqi9_gg_::before{border-color:var(--theme_dgqi9)}.___SInvalidPattern_dgqi9_gg_{background:0 0;overflow:hidden}.___SInvalidPattern_dgqi9_gg_:before{content:"";position:absolute;top:1px;left:1px;border-radius:50%;background-image:var(--intergalactic-border-critical-pattern, repeating-linear-gradient(315deg, rgba(255, 0, 4, 0.56) 0, rgba(255, 0, 4, 0.56) 1px, transparent 0, transparent 50%));background-size:6px 6px;background-color:var(--intergalactic-bg-primary-neutral, rgb(255, 255, 255))}@supports (color:color(display-p3 0 0 0%)){.___SInvalidPattern_dgqi9_gg_:before{background-image:var(--intergalactic-border-critical-pattern, repeating-linear-gradient(315deg, rgba(255, 0, 4, 0.56) 0, rgba(255, 0, 4, 0.56) 1px, transparent 0, transparent 50%))}@media (color-gamut:p3){.___SInvalidPattern_dgqi9_gg_:before{background-image:var(--intergalactic-border-critical-pattern, repeating-linear-gradient(315deg, color(display-p3 0.918 0.19866 0.14259 / 0.56) 0, color(display-p3 0.918 0.19866 0.14259 / 0.56) 1px, transparent 0, transparent 50%))}}}',
     /*__inner_css_end__*/
-    "mgb6n_gg_"
+    "dgqi9_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SRadio": "___SRadio_mgb6n_gg_",
-    "_disabled": "__disabled_mgb6n_gg_",
-    "__SText": "___SText_mgb6n_gg_",
-    "_size_m": "_size_m_mgb6n_gg_",
-    "_size_l": "_size_l_mgb6n_gg_",
-    "__SValue": "___SValue_mgb6n_gg_",
-    "_state_normal": "_state_normal_mgb6n_gg_",
-    "_state_invalid": "_state_invalid_mgb6n_gg_",
-    "__SControl": "___SControl_mgb6n_gg_",
-    "_keyboardFocused": "__keyboardFocused_mgb6n_gg_",
-    "_theme": "__theme_mgb6n_gg_",
-    "--theme": "--theme_mgb6n",
-    "_color": "__color_mgb6n_gg_",
-    "--color": "--color_mgb6n",
-    "__SInvalidPattern": "___SInvalidPattern_mgb6n_gg_"
+    "__SRadio": "___SRadio_dgqi9_gg_",
+    "_disabled": "__disabled_dgqi9_gg_",
+    "__SValue": "___SValue_dgqi9_gg_",
+    "_state_normal": "_state_normal_dgqi9_gg_",
+    "_state_invalid": "_state_invalid_dgqi9_gg_",
+    "__SControl": "___SControl_dgqi9_gg_",
+    "_size_m": "_size_m_dgqi9_gg_",
+    "_size_l": "_size_l_dgqi9_gg_",
+    "_theme": "__theme_dgqi9_gg_",
+    "--theme": "--theme_dgqi9",
+    "__SText": "___SText_dgqi9_gg_",
+    "_color": "__color_dgqi9_gg_",
+    "--color": "--color_dgqi9",
+    "__SInvalidPattern": "___SInvalidPattern_dgqi9_gg_"
   })
 );
-var RadioGroupRoot = /* @__PURE__ */ function(_Component) {
-  _inherits(RadioGroupRoot2, _Component);
-  var _super = _createSuper(RadioGroupRoot2);
+var RadioContext = /* @__PURE__ */ React.createContext({});
+var RadioGroupRoot = /* @__PURE__ */ (function(_Component) {
   function RadioGroupRoot2() {
     _classCallCheck(this, RadioGroupRoot2);
-    return _super.apply(this, arguments);
+    return _callSuper(this, RadioGroupRoot2, arguments);
   }
-  _createClass(RadioGroupRoot2, [{
+  _inherits(RadioGroupRoot2, _Component);
+  return _createClass(RadioGroupRoot2, [{
     key: "uncontrolledProps",
     value: function uncontrolledProps() {
       return {
@@ -86,27 +82,27 @@ var RadioGroupRoot = /* @__PURE__ */ function(_Component) {
       }, _ref), /* @__PURE__ */ React.createElement(Children, null));
     }
   }]);
-  return RadioGroupRoot2;
-}(Component);
+})(Component);
 _defineProperty(RadioGroupRoot, "displayName", "RadioGroup");
 _defineProperty(RadioGroupRoot, "defaultProps", {
   defaultValue: null
 });
-var RadioGroup = createComponent(RadioGroupRoot);
-var RadioRoot = /* @__PURE__ */ function(_Component2) {
-  _inherits(RadioRoot2, _Component2);
-  var _super2 = _createSuper(RadioRoot2);
+var RadioGroup = createComponent(RadioGroupRoot, {}, {
+  context: RadioContext
+});
+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 = _super2.call.apply(_super2, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "state", {
+    _this = _callSuper(this, RadioRoot2, [].concat(args));
+    _defineProperty(_this, "context", {});
+    _defineProperty(_this, "state", {
       hoistedDisabled: void 0
     });
-    _defineProperty(_assertThisInitialized(_this), "hoistDisabled", function(disabled) {
+    _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({
         hoistedDisabled: disabled
@@ -114,13 +110,15 @@ var RadioRoot = /* @__PURE__ */ function(_Component2) {
     });
     return _this;
   }
-  _createClass(RadioRoot2, [{
+  _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 _this$context$size;
+      var _this$asProps2 = this.asProps, _this$asProps2$size = _this$asProps2.size, size = _this$asProps2$size === void 0 ? (_this$context$size = this.context.size) !== null && _this$context$size !== void 0 ? _this$context$size : "m" : _this$asProps2$size, _this$asProps2$disabl = _this$asProps2.disabled, disabled = _this$asProps2$disabl === void 0 ? this.context.disabled : _this$asProps2$disabl, label = _this$asProps2.label;
       var hoistedDisabled = this.state.hoistedDisabled;
       var textProps = {
-        size,
+        size: size === "m" ? 200 : 300,
         children: label,
         disabled: disabled !== null && disabled !== void 0 ? disabled : hoistedDisabled,
         hoistDisabled: this.hoistDisabled,
@@ -131,9 +129,9 @@ var RadioRoot = /* @__PURE__ */ function(_Component2) {
   }, {
     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 _this$context$size2, _this$props$size;
+      var _this$asProps3 = this.asProps, _this$asProps3$state = _this$asProps3.state, state = _this$asProps3$state === void 0 ? "normal" : _this$asProps3$state, _this$asProps3$size = _this$asProps3.size, size = _this$asProps3$size === void 0 ? (_this$context$size2 = this.context.size) !== null && _this$context$size2 !== void 0 ? _this$context$size2 : "m" : _this$asProps3$size, _this$asProps3$theme = _this$asProps3.theme, theme = _this$asProps3$theme === void 0 ? this.context.theme : _this$asProps3$theme, _this$asProps3$disabl = _this$asProps3.disabled, disabled = _this$asProps3$disabl === void 0 ? this.context.disabled : _this$asProps3$disabl, _this$asProps3$name = _this$asProps3.name, name = _this$asProps3$name === void 0 ? this.context.name : _this$asProps3$name;
+      var _this$asProps4 = this.asProps, value = _this$asProps4.value, checked = _this$asProps4.checked;
       var hoistedDisabled = this.state.hoistedDisabled;
       return {
         size: (_this$props$size = this.props.size) !== null && _this$props$size !== void 0 ? _this$props$size : size,
@@ -152,38 +150,37 @@ var RadioRoot = /* @__PURE__ */ function(_Component2) {
     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$1(styles), /* @__PURE__ */ React.createElement(SRadio, _ref6.cn("SRadio", _objectSpread({}, assignProps({
+      var _this$asProps5 = this.asProps, styles = _this$asProps5.styles, Children = _this$asProps5.Children, hasChildren = _this$asProps5.children;
+      return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SRadio, _ref6.cn("SRadio", _objectSpread({}, 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)));
     }
   }]);
-  return RadioRoot2;
-}(Component);
+})(Component);
 _defineProperty(RadioRoot, "displayName", "Radio");
 _defineProperty(RadioRoot, "style", style);
-_defineProperty(RadioRoot, "contextType", RadioGroup[CONTEXT_COMPONENT]);
-var ValueRoot = /* @__PURE__ */ function(_Component3) {
-  _inherits(ValueRoot2, _Component3);
-  var _super3 = _createSuper(ValueRoot2);
+_defineProperty(RadioRoot, "contextType", RadioContext);
+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 = _super3.call.apply(_super3, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this2), "bindHandlerChange", function(value) {
+    _this2 = _callSuper(this, ValueRoot2, [].concat(args));
+    _defineProperty(_this2, "context", {});
+    _defineProperty(_this2, "bindHandlerChange", function(value) {
       return function(e) {
-        if (typeof _this2.context.onChange === "function") {
+        if (typeof _this2.context.onChange === "function" && value !== void 0) {
           _this2.context.onChange(value, e);
         }
       };
     });
     return _this2;
   }
-  _createClass(ValueRoot2, [{
+  _inherits(ValueRoot2, _Component3);
+  return _createClass(ValueRoot2, [{
     key: "uncontrolledProps",
     value: function uncontrolledProps() {
       return {
@@ -196,34 +193,29 @@ var ValueRoot = /* @__PURE__ */ function(_Component3) {
     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 _this$asProps6 = this.asProps, forwardRef = _this$asProps6.forwardRef, includeInputProps = _this$asProps6.includeInputProps, state = _this$asProps6.state, value = _this$asProps6.value;
+      var onChange = this.props.onChange;
       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({
+      return _objectSpread(_objectSpread({
         ref: forwardRef,
         state
       }, commonControlProps), {}, {
         value: inputValue
-      });
-      if (currentValue !== void 0) {
-        var _this$props = this.props, onChange = _this$props.onChange;
-        _this$props.onClick;
-        controlProps.checked = currentValue === inputValue;
-        controlProps.onChange = callAllEventHandlers(onChange, this.bindHandlerChange(inputValue));
-      }
-      return controlProps;
+      }, currentValue !== void 0 ? {
+        checked: currentValue === inputValue,
+        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 _this$asProps7 = this.asProps, size = _this$asProps7.size, state = _this$asProps7.state, theme = _this$asProps7.theme, keyboardFocused = _this$asProps7.keyboardFocused, value = _this$asProps7.value, tag = _this$asProps7.tag, disabled = _this$asProps7.disabled, includeInputProps = _this$asProps7.includeInputProps, resolveColor = _this$asProps7.resolveColor, children = _this$asProps7.children, Children = _this$asProps7.Children, other = _objectWithoutProperties(_this$asProps7, _excluded);
+      var onClick = this.props.onClick;
       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({
+      return _objectSpread(_objectSpread({
         theme,
         size,
         state,
@@ -231,14 +223,9 @@ var ValueRoot = /* @__PURE__ */ function(_Component3) {
         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 markProps;
+      }, radioMarkProps), currentValue !== void 0 && tag !== "label" ? {
+        onClick: callAllEventHandlers(onClick, this.bindHandlerChange(inputValue))
+      } : {});
     }
   }, {
     key: "componentDidUpdate",
@@ -258,48 +245,48 @@ var ValueRoot = /* @__PURE__ */ function(_Component3) {
     key: "render",
     value: function render() {
       var _ref8;
-      var _this$asProps6 = this.asProps, styles = _this$asProps6.styles, hasChildren = _this$asProps6.children, Children = _this$asProps6.Children;
+      var _this$asProps8 = this.asProps, styles = _this$asProps8.styles, hasChildren = _this$asProps8.children, Children = _this$asProps8.Children;
       if (!hasChildren) {
-        return sstyled$1(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Radio.Value.Control, null), /* @__PURE__ */ React.createElement(Radio.Value.RadioMark, null));
+        var _ref7;
+        return _ref7 = 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$1(styles), /* @__PURE__ */ React.createElement(Children, _ref8.cn("Children", {}));
+      return _ref8 = sstyled(styles), /* @__PURE__ */ React.createElement(Children, _ref8.cn("Children", {}));
     }
   }]);
-  return ValueRoot2;
-}(Component);
+})(Component);
 _defineProperty(ValueRoot, "defaultProps", {
   includeInputProps: inputProps,
   defaultChecked: false
 });
-_defineProperty(ValueRoot, "enhance", [keyboardFocusEnhance(), resolveColorEnhance()]);
+_defineProperty(ValueRoot, "enhance", [resolveColorEnhance()]);
 _defineProperty(ValueRoot, "displayName", "Value");
-_defineProperty(ValueRoot, "contextType", RadioGroup[CONTEXT_COMPONENT]);
+_defineProperty(ValueRoot, "contextType", RadioContext);
 _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$1(styles), /* @__PURE__ */ React.createElement(SControl, _ref9.cn("SControl", _objectSpread({}, assignProps({
+  return _ref9 = sstyled(styles), /* @__PURE__ */ React.createElement(SControl, _ref9.cn("SControl", _objectSpread({}, assignProps({
     "tag": "input",
     "type": "radio",
     "aria-invalid": state === "invalid"
   }, _ref3))));
-};
+}
 Control.displayName = "Control";
-var RadioMark = function RadioMark2(props) {
-  var _ref4 = arguments[0], _ref10;
+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 _ref10 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SValue, _ref10.cn("SValue", _objectSpread({}, assignProps({
+  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, _ref10.cn("SInvalidPattern", {})));
-};
+  }, _ref4))), state === "invalid" && !checked && /* @__PURE__ */ React.createElement(SInvalidPattern, _ref0.cn("SInvalidPattern", {})));
+}
 RadioMark.displayName = "RadioMark";
-var Text = function Text2(props) {
-  var _ref5 = arguments[0], _ref11;
+function Text(props) {
+  var _ref5 = arguments[0], _ref1;
   var SText = Text$1;
   var styles = props.styles, color = props.color;
   React.useEffect(function() {
@@ -308,11 +295,11 @@ var Text = function Text2(props) {
     }
   }, [props.rootDisabled, props.disabled, props.hoistDisabled]);
   var resolveColor = useColorResolver();
-  return _ref11 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SText, _ref11.cn("SText", _objectSpread({}, assignProps({
+  return _ref1 = sstyled(styles), /* @__PURE__ */ React.createElement(SText, _ref1.cn("SText", _objectSpread({}, assignProps({
     "tag": "span",
     "use:color": resolveColor(color)
   }, _ref5))));
-};
+}
 Text.displayName = "Text";
 var Value = createComponent(ValueRoot, {
   Control,

package/lib/esm/Radio.type.mjs

@@ -0,0 +1 @@
+

package/lib/esm/index.mjs

@@ -1,8 +1,7 @@
 import { RadioGroup, default as default2, wrapRadioGroup } from "./Radio.mjs";
-import { inputProps } from "@semcore/utils/lib/inputProps";
+import "./Radio.type.mjs";
 export {
   RadioGroup,
   default2 as default,
-  inputProps,
   wrapRadioGroup
 };

package/lib/esm/style/radio.shadow.css

@@ -5,7 +5,7 @@ SRadio {
 
   SText {
     margin-left: var(--intergalactic-spacing-2x, 8px);
-    color: var(--intergalactic-text-primary, #191b23);
+    color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
   }
 
   SText[color] {
@@ -17,16 +17,6 @@ SRadio[disabled] {
   pointer-events: none;
 }
 
-SText[size='m'] {
-  font-size: var(--intergalactic-fs-200, 14px);
-  line-height: var(--intergalactic-lh-200, 142%);
-}
-
-SText[size='l'] {
-  font-size: var(--intergalactic-fs-300, 16px);
-  line-height: var(--intergalactic-lh-300, 150%);
-}
-
 SValue {
   position: relative;
   flex-shrink: 0;
@@ -43,7 +33,7 @@ SValue {
     left: 0;
     right: 0;
     bottom: 0;
-    background: var(--intergalactic-bg-primary-neutral, #ffffff);
+    background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0));
     border: 1px solid;
     border-radius: 50%;
     transition: calc(var(--intergalactic-duration-control, 200) * 1ms) all ease-in-out;
@@ -60,12 +50,12 @@ SValue {
     width: 0;
     height: 0;
     border-radius: 50%;
-    background: var(--intergalactic-bg-primary-neutral, #ffffff);
+    background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0));
   }
 }
 
 SValue[disabled] {
-  opacity: var(--intergalactic-disabled-opacity, 0.3);
+  opacity: var(--intergalactic-disabled-opacity, 0.4);
   cursor: default;
   pointer-events: none;
   user-select: none;
@@ -92,11 +82,11 @@ SValue[size='l'] {
 }
 
 SValue[state='normal']::before {
-  border-color: var(--intergalactic-border-primary, #c4c7cf);
+  border-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
 }
 
 SValue[state='invalid']::before {
-  border-color: var(--intergalactic-border-critical-active, #d1002f);
+  border-color: var(--intergalactic-border-critical-active, oklch(0.628 0.258 29 / 0.56));
 }
 
 SControl {
@@ -104,11 +94,6 @@ SControl {
   clip: rect(1px, 1px, 1px, 1px);
 }
 
-SControl:checked~SValue::before {
-  border-color: var(--intergalactic-control-primary-info, #008ff8);
-  background-color: var(--intergalactic-control-primary-info, #008ff8);
-}
-
 SControl:checked~SValue[size='m']::after {
   width: 6px;
   height: 6px;
@@ -119,13 +104,21 @@ SControl:checked~SValue[size='l']::after {
   height: 8px;
 }
 
-SValue[state='normal'][keyboardFocused]::before {
-  box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
-  border-color: var(--intergalactic-border-info-active, #006dca);
+SControl:focus-visible+SValue[state='normal']::before {
+  border-color: var(--intergalactic-border-info-active, oklch(0.382 0.248 264.2 / 0.386));
+  @mixin focus-outline-mixin;
+}
+
+SControl:checked~SValue::before,
+SControl:checked:focus-visible~SValue::before {
+  border-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140));
+  background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140));
 }
 
-SValue[state='invalid'][keyboardFocused]::before {
-  box-shadow: var(--intergalactic-keyboard-focus-invalid, 0px 0px 0px 3px rgba(255, 73, 83, 0.5));
+SControl:focus-visible+SValue[state='invalid']::before {
+  border-color: var(--intergalactic-border-critical-active, oklch(0.628 0.258 29 / 0.56));
+  @mixin focus-outline-mixin;
+  outline-color: var(--intergalactic-keyboard-focus-invalid-outline, oklch(0.628 0.257 28.9 / 0.652));
 }
 
 SControl:checked~SValue[theme]::before {
@@ -147,8 +140,8 @@ SInvalidPattern {
     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-image: var(--intergalactic-border-critical-pattern, repeating-linear-gradient(315deg, oklch(0.628 0.258 29 / 0.56) 0, oklch(0.628 0.258 29 / 0.56) 1px, transparent 0, transparent 50%));
     background-size: 6px 6px;
-    background-color: var(--intergalactic-bg-primary-neutral, #ffffff);
+    background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0));
   }
 }

package/lib/types/Radio.d.ts

@@ -0,0 +1,9 @@
+import type { Intergalactic } from '@semcore/core';
+import { inputProps } from '@semcore/core/lib/utils/inputProps';
+import React from 'react';
+import type { NSRadio } from './Radio.type';
+declare const RadioGroup: NSRadio.Group.Component;
+declare const Radio: NSRadio.Component;
+export declare const wrapRadioGroup: <PropsExtending extends {}>(wrapper: (props: Intergalactic.InternalTypings.UntypeRefAndTag<Intergalactic.InternalTypings.ComponentPropsNesting<NSRadio.Group.Component>> & PropsExtending) => React.ReactNode) => NSRadio.Group.Component<PropsExtending>;
+export { inputProps, RadioGroup };
+export default Radio;

package/lib/types/Radio.type.d.ts

@@ -0,0 +1,98 @@
+import type { Flex, BoxProps } from '@semcore/base-components';
+import type { Intergalactic, PropGetterFn } from '@semcore/core';
+import type { NSText } from '@semcore/typography';
+declare namespace NSRadio {
+    type Size = 'm' | 'l';
+    type State = 'normal' | 'invalid';
+    type Value = string | number | boolean;
+    type Props = BoxProps & {
+        /** Radio item value **/
+        value?: NSRadio.Value;
+        /** Radio item checked flag **/
+        checked?: boolean;
+        /**
+         * The value displaying the state of the component
+         * @default normal
+         */
+        state?: NSRadio.State;
+        /**
+         * Radio button size
+         * @default m
+         **/
+        size?: NSRadio.Size;
+        /** The theme of the radio button that you can send your color to */
+        theme?: string;
+        /** Radio item text **/
+        label?: string;
+        /** Blocks access and changes to the radio item **/
+        disabled?: boolean;
+    };
+    type Ctx = {
+        getValueProps: PropGetterFn;
+        getTextProps: PropGetterFn;
+    };
+    namespace Value {
+        type Props = BoxProps & {
+            /** List of elements that can be put on a hidden input */
+            includeInputProps?: string[];
+        };
+        namespace Control {
+            type Props = {};
+            type Component = Intergalactic.Component<'input', Props>;
+        }
+        namespace Mark {
+            type Props = {};
+            type Component = Intergalactic.Component<'input', Props>;
+        }
+        type Component = Intergalactic.Component<'input', Props> & {
+            Control: Control.Component;
+            RadioMark: Mark.Component;
+        };
+    }
+    namespace Text {
+        type Props = NSText.Props;
+        type Component = Intergalactic.Component<'span', Props>;
+    }
+    namespace Group {
+        type Props<T extends NSRadio.Value = NSRadio.Value> = {
+            /** Radio group name */
+            name?: string;
+            /** Active default value */
+            defaultValue?: T;
+            /** Active value */
+            value?: T;
+            /** Called when the selected element is changed */
+            onChange?: ((value: T, e?: React.SyntheticEvent<HTMLInputElement>) => void) | React.Dispatch<React.SetStateAction<T>>;
+            /** Radio button size */
+            size?: NSRadio.Size;
+            /** The theme of the radio button that you can send your color to */
+            theme?: string;
+            /** Blocks access and changes to the form field */
+            disabled?: boolean;
+        };
+        type Component<PropsExtending = {}> = (<V extends Value, Tag extends Intergalactic.Tag = 'div'>(props: Intergalactic.InternalTypings.ComponentProps<Tag, typeof Flex, Props<V>> & PropsExtending) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<'div', typeof Flex, Props>;
+    }
+    type Component = Intergalactic.Component<'label', Props, Ctx> & {
+        Value: Value.Component;
+        Text: Text.Component;
+    };
+}
+/** @deprecated It will be removed in v18. */
+export type RadioSize = NSRadio.Size;
+/** @deprecated It will be removed in v18. */
+export type RadioState = NSRadio.State;
+/** @deprecated It will be removed in v18. */
+export type RadioValue = NSRadio.Value;
+/** @deprecated It will be removed in v18. */
+export type RadioProps = NSRadio.Props;
+/** @deprecated It will be removed in v18. */
+export type RadioGroupProps<T extends RadioValue = RadioValue> = NSRadio.Group.Props<T>;
+/** @deprecated It will be removed in v18. */
+export type RadioValueProps = NSRadio.Value.Props;
+/** @deprecated It will be removed in v18. */
+export type RadioCtx = NSRadio.Ctx;
+/** @deprecated It will be removed in v18. */
+export type RadioValueControlProps = NSRadio.Value.Control.Props;
+/** @deprecated It will be removed in v18. */
+export type RadioValueMarkProps = NSRadio.Value.Mark.Props;
+export type { NSRadio };