@commercetools-uikit/radio-input 16.1.0 → 16.1.1

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

@@ -19,10 +19,10 @@ var utils = require('@commercetools-uikit/utils');
 var Constraints = require('@commercetools-uikit/constraints');
 var Stack = require('@commercetools-uikit/spacings-stack');
 var Inline = require('@commercetools-uikit/spacings-inline');
-var designSystem = require('@commercetools-uikit/design-system');
 var inputUtils = require('@commercetools-uikit/input-utils');
 var _styled = require('@emotion/styled/base');
 var react = require('@emotion/react');
+var designSystem = require('@commercetools-uikit/design-system');
 var SpacingsInset = require('@commercetools-uikit/spacings-inset');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 
@@ -44,15 +44,14 @@ var Inline__default = /*#__PURE__*/_interopDefault(Inline);
 var _styled__default = /*#__PURE__*/_interopDefault(_styled);
 var SpacingsInset__default = /*#__PURE__*/_interopDefault(SpacingsInset);
 
-const getDefaultThemeLabelColor = props => !props.isNewTheme && /*#__PURE__*/react.css("color:", props.isDisabled ? designSystem.designTokens.fontColorForInputWhenDisabled : designSystem.designTokens.fontColorForInput, ";" + ("" ), "" );
 const LabelTextWrapper = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "e1x57rfz7"
-} )("grid-area:label;margin-left:", designSystem.designTokens.marginLeftForRadioInputLabel, ";font-size:1rem;font-family:inherit;display:flex;align-items:center;", props => getDefaultThemeLabelColor(props), ";" + ("" ));
-const AdditionalTextWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1x57rfz6"
-} )("grid-area:content;margin-left:", designSystem.designTokens.spacing10, ";font-size:1rem;font-family:inherit;", props => getDefaultThemeLabelColor(props), ";" + ("" ));
-const RadioInputWrapper = /*#__PURE__*/_styled__default["default"]("div", {
+} )("grid-area:label;margin-left:", designSystem.designTokens.marginLeftForRadioInputLabel, ";font-size:1rem;font-family:inherit;display:flex;align-items:center;" + ("" ));
+const AdditionalTextWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1x57rfz5"
+} )("grid-area:content;margin-left:", designSystem.designTokens.spacing10, ";font-size:1rem;font-family:inherit;" + ("" ));
+const RadioInputWrapper = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1x57rfz4"
 } )({
   name: "z022bx",
   styles: "display:grid;grid-template-columns:auto;grid-template-rows:auto;grid-template-areas:'radio label' '. content'"
@@ -96,21 +95,6 @@ const getKnobColor = props => {
   }
   return designSystem.designTokens.borderColorForInputWhenFocused;
 };
-const getLabelBorderColor = props => {
-  if (props.isDisabled) {
-    return designSystem.designTokens.borderColorForInputWhenDisabled;
-  }
-  if (props.isReadOnly) {
-    return designSystem.designTokens.borderColorForInputWhenReadonly;
-  }
-  if (props.hasError) {
-    return designSystem.designTokens.borderColorForInputWhenError;
-  }
-  if (props.hasWarning) {
-    return designSystem.designTokens.borderColorForInputWhenWarning;
-  }
-  return designSystem.designTokens.borderColorForInputWhenFocused;
-};
 const getLabelColor = props => {
   if (props.isDisabled) {
     return designSystem.designTokens.fontColorForInputWhenDisabled;
@@ -136,43 +120,32 @@ const getLabelCursor = props => {
   return 'pointer';
 };
 const RadioOptionKnob = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "e1x57rfz4"
+  target: "e1x57rfz3"
 } )("width:", designSystem.designTokens.heightForRadioInputOptionWhenChecked, ";height:", designSystem.designTokens.heightForRadioInputOptionWhenChecked, ";border-radius:50%;background-color:", props => getKnobColor(props), ";" + ("" ));
 const RadioOptionBorder = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "e1x57rfz3"
-} )("width:", designSystem.designTokens.heightForRadioInputOption, ";height:", designSystem.designTokens.heightForRadioInputOption, ";border-radius:50%;background-color:", designSystem.designTokens.backgroundColorForInput, ";border-width:", designSystem.designTokens.borderForRadioInputOption, ";border-style:solid;border-color:", props => getBorderColor(props), ";display:flex;align-items:center;justify-content:center;" + ("" ));
-const focusStyles = /*#__PURE__*/react.css("&:focus:not(:read-only)+div>", RadioOptionBorder, "{border-color:", designSystem.designTokens.borderColorForInputWhenFocused, ";}" + ("" ), "" );
-const Input = /*#__PURE__*/_styled__default["default"]("input", {
   target: "e1x57rfz2"
-} )(props => !props.isNewTheme && focusStyles, ";" + ("" ));
-const getNewThemeHoverAreaStyles = {
-  name: "yopin6",
-  styles: "width:26px;height:26px;border-radius:50%;border:4px solid transparent"
-} ;
+} )("width:", designSystem.designTokens.heightForRadioInputOption, ";height:", designSystem.designTokens.heightForRadioInputOption, ";border-radius:50%;background-color:", designSystem.designTokens.backgroundColorForInput, ";border-width:", designSystem.designTokens.borderForRadioInputOption, ";border-style:solid;border-color:", props => getBorderColor(props), ";display:flex;align-items:center;justify-content:center;" + ("" ));
 const RadioOptionContainer = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1x57rfz1"
-} )("display:flex;align-items:center;grid-area:radio;", RadioOptionBorder, "{background-color:", props => props.isDisabled ? designSystem.designTokens.backgroundColorForInputWhenDisabled : designSystem.designTokens.backgroundColorForInput, ";}", props => props.isNewTheme && getNewThemeHoverAreaStyles, ";" + ("" ));
-const getNewThemeHoverStyles = props => {
+} )("display:flex;align-items:center;grid-area:radio;width:26px;height:26px;border-radius:50%;border:4px solid transparent;", RadioOptionBorder, "{background-color:", props => props.isDisabled ? designSystem.designTokens.backgroundColorForInputWhenDisabled : designSystem.designTokens.backgroundColorForInput, ";}" + ("" ));
+const getHoverStyles = props => {
   const hoverStyles = /*#__PURE__*/react.css(RadioOptionContainer, "{border-color:", designSystem.designTokens.colorNeutral90, ";}" + ("" ), "" );
   return [!props.isDisabled && !props.isReadOnly &&
   /*#__PURE__*/
   /* prettier-ignore */
   react.css("&\f:hover ", hoverStyles, ";" + ("" ), "" ), props.isHovered && hoverStyles];
 };
-const getDefaultThemeHoverStyles = props => /*#__PURE__*/react.css("&:hover ", RadioOptionBorder, "{border-color:", getLabelBorderColor(props), ";}" + ("" ), "" );
 const RadioOptionLabel = /*#__PURE__*/_styled__default["default"]("label", {
   target: "e1x57rfz0"
 } )("align-items:center;color:", props => getLabelColor(props), ";cursor:", props => getLabelCursor(props), ";display:flex;", props => {
-  var _context, _context2;
-  return !props.isReadOnly ? _concatInstanceProperty__default["default"](_context = _concatInstanceProperty__default["default"](_context2 = ":focus-within ".concat(LabelTextWrapper, " {\n      outline: auto 2px ")).call(_context2, designSystem.designTokens.borderColorForInputWhenFocused, ";\n      outline-offset: ")).call(_context, props.isNewTheme ? '2px' : '3px', ";\n    }") : '';
-}, " ", props => props.isNewTheme ? getNewThemeHoverStyles(props) : getDefaultThemeHoverStyles(props), ";" + ("" ));
+  var _context;
+  return !props.isReadOnly ? _concatInstanceProperty__default["default"](_context = ":focus-within ".concat(LabelTextWrapper, " {\n      outline: auto 2px ")).call(_context, designSystem.designTokens.borderColorForInputWhenFocused, ";\n      outline-offset: 2px;\n    }") : '';
+}, " ", props => getHoverStyles(props), ";" + ("" ));
 
 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; }
 function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$1(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$1(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 const Option = props => {
   var _props$components;
-  const _useTheme = designSystem.useTheme(),
-    isNewTheme = _useTheme.isNewTheme;
   const labelProps = props.id ? {
     htmlFor: props.id
   } : {};
@@ -184,8 +157,7 @@ const Option = props => {
     hasWarning: props.hasWarning,
     isHovered: props.isHovered,
     isReadOnly: props.isReadOnly,
-    isChecked: props.isChecked,
-    isNewTheme
+    isChecked: props.isChecked
   };
   return jsxRuntime.jsx(RadioOptionLabel, _objectSpread$1(_objectSpread$1(_objectSpread$1({
     role: "radio",
@@ -194,7 +166,7 @@ const Option = props => {
     onBlur: props.onBlur
   }, stylesProps), utils.filterInvalidAttributes(labelProps)), {}, {
     children: jsxRuntime.jsxs(RadioInputWrapper, {
-      children: [jsxRuntime.jsx(Input, _objectSpread$1({
+      children: [jsxRuntime.jsx("input", _objectSpread$1({
         css: inputUtils.accessibleHiddenInputStyles,
         id: props.id,
         name: props.name,
@@ -203,20 +175,16 @@ const Option = props => {
         disabled: props.isDisabled,
         checked: props.isChecked,
         type: "radio",
-        readOnly: props.isReadOnly,
-        "aria-readonly": props.isReadOnly,
-        isNewTheme: isNewTheme
+        readOnly: props.isReadOnly
       }, utils.filterDataAttributes(props))), jsxRuntime.jsx(RadioOptionContainer, _objectSpread$1(_objectSpread$1({}, stylesProps), {}, {
         children: jsxRuntime.jsx(RadioOptionBorder, _objectSpread$1(_objectSpread$1({}, stylesProps), {}, {
           children: props.isChecked ? jsxRuntime.jsx(RadioOptionKnob, _objectSpread$1({}, stylesProps)) : null
         }))
       })), jsxRuntime.jsx(LabelTextWrapper, {
         isDisabled: props.isDisabled,
-        isNewTheme: isNewTheme,
         children: props.children
       }), props.additionalContent && jsxRuntime.jsx(AdditionalTextWrapper, {
         isDisabled: props.isDisabled,
-        isNewTheme: isNewTheme,
         children: jsxRuntime.jsx(SpacingsInset__default["default"], {
           scale: "xs",
           children: props.additionalContent
@@ -297,7 +265,7 @@ Group.defaultProps = defaultProps;
 var Group$1 = Group;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "16.1.0";
+var version = "16.1.1";
 
 const RadioInput = {
   Group: Group$1,