@commercetools-uikit/radio-input 15.2.4 → 15.3.0

package/dist/commercetools-uikit-radio-input.cjs.prod.js

@@ -91,44 +91,41 @@ var getSizeStyle$1 = function getSizeStyle(size) {
   }
 };
 
-var getColor$1 = function getColor(color, theme) {
+var getColor$1 = function getColor(color) {
   if (!color) return 'inherit';
-
-  var overwrittenVars = _objectSpread$3(_objectSpread$3({}, designSystem.customProperties), theme);
-
   var iconColor;
 
   switch (color) {
     case 'solid':
-      iconColor = overwrittenVars.colorSolid;
+      iconColor = designSystem.designTokens.colorSolid;
       break;
 
     case 'neutral60':
-      iconColor = overwrittenVars.colorNeutral60;
+      iconColor = designSystem.designTokens.colorNeutral60;
       break;
 
     case 'surface':
-      iconColor = overwrittenVars.colorSurface;
+      iconColor = designSystem.designTokens.colorSurface;
       break;
 
     case 'info':
-      iconColor = overwrittenVars.colorInfo;
+      iconColor = designSystem.designTokens.colorInfo;
       break;
 
     case 'primary':
-      iconColor = overwrittenVars.colorPrimary;
+      iconColor = designSystem.designTokens.colorPrimary;
       break;
 
     case 'primary40':
-      iconColor = overwrittenVars.colorPrimary40;
+      iconColor = designSystem.designTokens.colorPrimary40;
       break;
 
     case 'warning':
-      iconColor = overwrittenVars.colorWarning;
+      iconColor = designSystem.designTokens.colorWarning;
       break;
 
     case 'error':
-      iconColor = overwrittenVars.colorError;
+      iconColor = designSystem.designTokens.colorError;
       break;
   }
 
@@ -139,8 +136,8 @@ var getColor$1 = function getColor(color, theme) {
   return iconColor;
 };
 
-var getIconStyles$1 = function getIconStyles(props, theme) {
-  return /*#__PURE__*/react.css("*:not([fill='none']){fill:", getColor$1(props.color, theme), ";}&,image{", getSizeStyle$1(props.size), ";}flex-shrink:0;" + ("" ), "" );
+var getIconStyles$1 = function getIconStyles(props) {
+  return /*#__PURE__*/react.css("*:not([fill='none']){fill:", getColor$1(props.color), ";}&,image{", getSizeStyle$1(props.size), ";}flex-shrink:0;" + ("" ), "" );
 };
 
 var SvgRadioOptionChecked = function SvgRadioOptionChecked(props) {
@@ -179,12 +176,11 @@ var SvgRadioOptionChecked = function SvgRadioOptionChecked(props) {
 SvgRadioOptionChecked.displayName = 'SvgRadioOptionChecked';
 
 var RadioOptionCheckedIcon = function RadioOptionCheckedIcon(props) {
-  var theme = react.useTheme();
   return jsxRuntime.jsx(react.ClassNames, {
     children: function children(_ref) {
       var createClass = _ref.css;
       return jsxRuntime.jsx(SvgRadioOptionChecked, _objectSpread$3(_objectSpread$3({}, props), {}, {
-        className: createClass(getIconStyles$1(props, theme))
+        className: createClass(getIconStyles$1(props))
       }));
     }
   });
@@ -240,44 +236,41 @@ var getSizeStyle = function getSizeStyle(size) {
   }
 };
 
-var getColor = function getColor(color, theme) {
+var getColor = function getColor(color) {
   if (!color) return 'inherit';
-
-  var overwrittenVars = _objectSpread$2(_objectSpread$2({}, designSystem.customProperties), theme);
-
   var iconColor;
 
   switch (color) {
     case 'solid':
-      iconColor = overwrittenVars.colorSolid;
+      iconColor = designSystem.designTokens.colorSolid;
       break;
 
     case 'neutral60':
-      iconColor = overwrittenVars.colorNeutral60;
+      iconColor = designSystem.designTokens.colorNeutral60;
       break;
 
     case 'surface':
-      iconColor = overwrittenVars.colorSurface;
+      iconColor = designSystem.designTokens.colorSurface;
       break;
 
     case 'info':
-      iconColor = overwrittenVars.colorInfo;
+      iconColor = designSystem.designTokens.colorInfo;
       break;
 
     case 'primary':
-      iconColor = overwrittenVars.colorPrimary;
+      iconColor = designSystem.designTokens.colorPrimary;
       break;
 
     case 'primary40':
-      iconColor = overwrittenVars.colorPrimary40;
+      iconColor = designSystem.designTokens.colorPrimary40;
       break;
 
     case 'warning':
-      iconColor = overwrittenVars.colorWarning;
+      iconColor = designSystem.designTokens.colorWarning;
       break;
 
     case 'error':
-      iconColor = overwrittenVars.colorError;
+      iconColor = designSystem.designTokens.colorError;
       break;
   }
 
@@ -288,8 +281,8 @@ var getColor = function getColor(color, theme) {
   return iconColor;
 };
 
-var getIconStyles = function getIconStyles(props, theme) {
-  return /*#__PURE__*/react.css("*:not([fill='none']){fill:", getColor(props.color, theme), ";}&,image{", getSizeStyle(props.size), ";}flex-shrink:0;" + ("" ), "" );
+var getIconStyles = function getIconStyles(props) {
+  return /*#__PURE__*/react.css("*:not([fill='none']){fill:", getColor(props.color), ";}&,image{", getSizeStyle(props.size), ";}flex-shrink:0;" + ("" ), "" );
 };
 
 var SvgRadioOptionUnchecked = function SvgRadioOptionUnchecked(props) {
@@ -320,12 +313,11 @@ var SvgRadioOptionUnchecked = function SvgRadioOptionUnchecked(props) {
 SvgRadioOptionUnchecked.displayName = 'SvgRadioOptionUnchecked';
 
 var RadioOptionUncheckedIcon = function RadioOptionUncheckedIcon(props) {
-  var theme = react.useTheme();
   return jsxRuntime.jsx(react.ClassNames, {
     children: function children(_ref) {
       var createClass = _ref.css;
       return jsxRuntime.jsx(SvgRadioOptionUnchecked, _objectSpread$2(_objectSpread$2({}, props), {}, {
-        className: createClass(getIconStyles(props, theme))
+        className: createClass(getIconStyles(props))
       }));
     }
   });
@@ -336,14 +328,14 @@ var RadioOptionUncheckedIcon$1 = RadioOptionUncheckedIcon;
 
 var LabelTextWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1x57rfz2"
-} )("grid-area:label;margin-left:", designSystem.customProperties.spacingS, ";font-size:1rem;font-family:inherit;color:", function (props) {
-  return props.isDisabled ? designSystem.customProperties.fontColorForInputWhenDisabled : designSystem.customProperties.fontColorForInput;
+} )("grid-area:label;margin-left:", designSystem.designTokens.spacingS, ";font-size:1rem;font-family:inherit;color:", function (props) {
+  return props.isDisabled ? designSystem.designTokens.fontColorForInputWhenDisabled : designSystem.designTokens.fontColorForInput;
 }, ";" + ("" ));
 
 var AdditionalTextWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1x57rfz1"
-} )("grid-area:content;margin-left:", designSystem.customProperties.spacingXs, ";font-size:1rem;font-family:inherit;color:", function (props) {
-  return props.isDisabled ? designSystem.customProperties.fontColorForInputWhenDisabled : designSystem.customProperties.fontColorForInput;
+} )("grid-area:content;margin-left:", designSystem.designTokens.spacingXs, ";font-size:1rem;font-family:inherit;color:", function (props) {
+  return props.isDisabled ? designSystem.designTokens.fontColorForInputWhenDisabled : designSystem.designTokens.fontColorForInput;
 }, ";" + ("" ));
 
 var RadioOptionsWrapper = /*#__PURE__*/_styled__default["default"]("div", {
@@ -355,90 +347,90 @@ var RadioOptionsWrapper = /*#__PURE__*/_styled__default["default"]("div", {
 
 var getSvgContainerBorderStroke = function getSvgContainerBorderStroke(props) {
   if (props.isDisabled) {
-    return designSystem.customProperties.borderColorForInputWhenDisabled;
+    return designSystem.designTokens.borderColorForInputWhenDisabled;
   }
 
   if (props.hasError) {
-    return designSystem.customProperties.borderColorForInputWhenError;
+    return designSystem.designTokens.borderColorForInputWhenError;
   }
 
   if (props.hasWarning) {
-    return designSystem.customProperties.borderColorForInputWhenWarning;
+    return designSystem.designTokens.borderColorForInputWhenWarning;
   }
 
   if (props.isHovered && !props.isDisabled) {
-    return designSystem.customProperties.borderColorForInputWhenFocused;
+    return designSystem.designTokens.borderColorForInputWhenFocused;
   }
 
   if (props.isReadOnly) {
-    return designSystem.customProperties.borderColorForInputWhenReadonly;
+    return designSystem.designTokens.borderColorForInputWhenReadonly;
   }
 
-  return designSystem.customProperties.borderColorForInput;
+  return designSystem.designTokens.borderColorForInput;
 };
 
 var getSvgContainerContentFill = function getSvgContainerContentFill(props) {
   if (props.isDisabled) {
-    return designSystem.customProperties.fontColorForInputWhenDisabled;
+    return designSystem.designTokens.fontColorForInputWhenDisabled;
   }
 
   if (props.hasError) {
-    return designSystem.customProperties.fontColorForInputWhenError;
+    return designSystem.designTokens.fontColorForInputWhenError;
   }
 
   if (props.hasWarning) {
-    return designSystem.customProperties.fontColorForInputWhenWarning;
+    return designSystem.designTokens.fontColorForInputWhenWarning;
   }
 
   if (props.isReadOnly) {
-    return designSystem.customProperties.fontColorForInputWhenReadonly;
+    return designSystem.designTokens.fontColorForInputWhenReadonly;
   }
 
-  return designSystem.customProperties.borderColorForInputWhenFocused;
+  return designSystem.designTokens.borderColorForInputWhenFocused;
 };
 
 var getContainerStyles = function getContainerStyles(props) {
-  return /*#__PURE__*/react.css("display:flex;align-items:center;grid-area:radio;svg{fill:", props.isDisabled ? designSystem.customProperties.backgroundColorForInputWhenDisabled : designSystem.customProperties.backgroundColorForInput, ";}svg *[data-style='radio-option__border']{stroke:", getSvgContainerBorderStroke(props), ";}svg *[data-style='radio-option__content']{fill:", getSvgContainerContentFill(props), ";}" + ("" ), "" );
+  return /*#__PURE__*/react.css("display:flex;align-items:center;grid-area:radio;svg{fill:", props.isDisabled ? designSystem.designTokens.backgroundColorForInputWhenDisabled : designSystem.designTokens.backgroundColorForInput, ";}svg *[data-style='radio-option__border']{stroke:", getSvgContainerBorderStroke(props), ";}svg *[data-style='radio-option__content']{fill:", getSvgContainerContentFill(props), ";}" + ("" ), "" );
 };
 
 var getSvgLabelBorderStroke = function getSvgLabelBorderStroke(props) {
   if (props.isDisabled) {
-    return designSystem.customProperties.borderColorForInputWhenDisabled;
+    return designSystem.designTokens.borderColorForInputWhenDisabled;
   }
 
   if (props.hasError) {
-    return designSystem.customProperties.borderColorForInputWhenError;
+    return designSystem.designTokens.borderColorForInputWhenError;
   }
 
   if (props.hasWarning) {
-    return designSystem.customProperties.borderColorForInputWhenWarning;
+    return designSystem.designTokens.borderColorForInputWhenWarning;
   }
 
   if (props.isReadOnly) {
-    return designSystem.customProperties.borderColorForInputWhenReadonly;
+    return designSystem.designTokens.borderColorForInputWhenReadonly;
   }
 
-  return designSystem.customProperties.borderColorForInputWhenFocused;
+  return designSystem.designTokens.borderColorForInputWhenFocused;
 };
 
 var getLabelColor = function getLabelColor(props) {
   if (props.isDisabled) {
-    return designSystem.customProperties.fontColorForInputWhenDisabled;
+    return designSystem.designTokens.fontColorForInputWhenDisabled;
   }
 
   if (props.hasError) {
-    return designSystem.customProperties.fontColorForInputWhenError;
+    return designSystem.designTokens.fontColorForInputWhenError;
   }
 
   if (props.hasWarning) {
-    return designSystem.customProperties.fontColorForInputWhenWarning;
+    return designSystem.designTokens.fontColorForInputWhenWarning;
   }
 
   if (props.isReadOnly) {
-    return designSystem.customProperties.fontColorForInputWhenReadonly;
+    return designSystem.designTokens.fontColorForInputWhenReadonly;
   }
 
-  return designSystem.customProperties.fontColorForInput;
+  return designSystem.designTokens.fontColorForInput;
 };
 
 var getLabelCursor = function getLabelCursor(props) {
@@ -454,7 +446,7 @@ var getLabelCursor = function getLabelCursor(props) {
 };
 
 var getLabelStyles = function getLabelStyles(props) {
-  return /*#__PURE__*/react.css("align-items:center;color:", getLabelColor(props), ";cursor:", getLabelCursor(props), ";display:flex;position:relative;&:hover svg *[data-style='radio-option__border']{stroke:", getSvgLabelBorderStroke(props), ";}:focus-within ", LabelTextWrapper, "{outline:auto 2px ", designSystem.customProperties.borderColorForInputWhenFocused, ";outline-offset:3px;}" + ("" ), "" );
+  return /*#__PURE__*/react.css("align-items:center;color:", getLabelColor(props), ";cursor:", getLabelCursor(props), ";display:flex;position:relative;&:hover svg *[data-style='radio-option__border']{stroke:", getSvgLabelBorderStroke(props), ";}:focus-within ", LabelTextWrapper, "{outline:auto 2px ", designSystem.designTokens.borderColorForInputWhenFocused, ";outline-offset:3px;}" + ("" ), "" );
 };
 
 function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -463,7 +455,7 @@ function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) {
 
 var Input = /*#__PURE__*/_styled__default["default"]("input", {
   target: "ejtzo910"
-} )("&:focus+div>svg *[data-style='radio-option__border']{stroke:", designSystem.customProperties.borderColorForInputWhenFocused, ";}" + ("" ));
+} )("&:focus+div>svg *[data-style='radio-option__border']{stroke:", designSystem.designTokens.borderColorForInputWhenFocused, ";}" + ("" ));
 
 var Option = function Option(props) {
   var _props$components;
@@ -599,7 +591,7 @@ Group.defaultProps = defaultProps;
 var Group$1 = Group;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "15.2.4";
+var version = "15.3.0";
 
 var RadioInput = {
   Group: Group$1,