@commercetools-uikit/checkbox-input 16.0.0 → 16.1.1

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

@@ -35,14 +35,12 @@ var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defin
 var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
 
 function ownKeys$3(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$3(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys$3(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys$3(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 const iconSizes$1 = {
   small: 12,
   medium: 16,
   big: 24
 };
-
 const getSizeDimensions$1 = size => {
   switch (size) {
     case 'scale':
@@ -50,7 +48,6 @@ const getSizeDimensions$1 = size => {
         width: '100%',
         height: 'auto'
       };
-
     case 'small':
     case 'medium':
     case 'big':
@@ -58,7 +55,6 @@ const getSizeDimensions$1 = size => {
         width: "".concat(iconSizes$1[size], "px"),
         height: "".concat(iconSizes$1[size], "px")
       };
-
     default:
       return {
         width: "".concat(iconSizes$1.big, "px"),
@@ -66,68 +62,51 @@ const getSizeDimensions$1 = size => {
       };
   }
 };
-
 const getSizeStyle$1 = size => {
   var _context, _context2;
-
   const dimensions = getSizeDimensions$1(size);
-
   switch (size) {
     case 'scale':
       return _concatInstanceProperty__default["default"](_context = "\n        &:not(:root) {\n          width: ".concat(dimensions.width, ";\n          height: ")).call(_context, dimensions.height, ";\n        }\n      ");
-
     default:
       return _concatInstanceProperty__default["default"](_context2 = "\n        width: ".concat(dimensions.width, ";\n        height: ")).call(_context2, dimensions.height, ";\n      ");
   }
 };
-
 const getColor$1 = color => {
   if (!color) return 'inherit';
   let iconColor;
-
   switch (color) {
     case 'solid':
       iconColor = designSystem.designTokens.colorSolid;
       break;
-
     case 'neutral60':
       iconColor = designSystem.designTokens.colorNeutral60;
       break;
-
     case 'surface':
       iconColor = designSystem.designTokens.colorSurface;
       break;
-
     case 'info':
       iconColor = designSystem.designTokens.colorInfo;
       break;
-
     case 'primary':
       iconColor = designSystem.designTokens.colorPrimary;
       break;
-
     case 'primary40':
       iconColor = designSystem.designTokens.colorPrimary40;
       break;
-
     case 'warning':
       iconColor = designSystem.designTokens.colorWarning;
       break;
-
     case 'error':
       iconColor = designSystem.designTokens.colorError;
       break;
   }
-
   if (!iconColor) {
     return 'inherit';
   }
-
   return iconColor;
 };
-
 const getIconStyles$1 = props => /*#__PURE__*/react.css("*:not([fill='none']){fill:", getColor$1(props.color), ";}&,image{", getSizeStyle$1(props.size), ";}flex-shrink:0;" + ("" ), "" );
-
 const SvgChecked = props => jsxRuntime.jsxs("svg", _objectSpread$3(_objectSpread$3({
   xmlns: "http://www.w3.org/2000/svg",
   width: 12,
@@ -148,9 +127,7 @@ const SvgChecked = props => jsxRuntime.jsxs("svg", _objectSpread$3(_objectSpread
     clipRule: "evenodd"
   })]
 }));
-
 SvgChecked.displayName = 'SvgChecked';
-
 const CheckedIcon = props => jsxRuntime.jsx(react.ClassNames, {
   children: _ref => {
     let createClass = _ref.css;
@@ -159,19 +136,16 @@ const CheckedIcon = props => jsxRuntime.jsx(react.ClassNames, {
     }));
   }
 });
-
 CheckedIcon.displayName = 'CheckedIcon';
 var CheckedIcon$1 = CheckedIcon;
 
 function ownKeys$2(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$2(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys$2(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys$2(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 const iconSizes = {
   small: 12,
   medium: 16,
   big: 24
 };
-
 const getSizeDimensions = size => {
   switch (size) {
     case 'scale':
@@ -179,7 +153,6 @@ const getSizeDimensions = size => {
         width: '100%',
         height: 'auto'
       };
-
     case 'small':
     case 'medium':
     case 'big':
@@ -187,7 +160,6 @@ const getSizeDimensions = size => {
         width: "".concat(iconSizes[size], "px"),
         height: "".concat(iconSizes[size], "px")
       };
-
     default:
       return {
         width: "".concat(iconSizes.big, "px"),
@@ -195,68 +167,51 @@ const getSizeDimensions = size => {
       };
   }
 };
-
 const getSizeStyle = size => {
   var _context, _context2;
-
   const dimensions = getSizeDimensions(size);
-
   switch (size) {
     case 'scale':
       return _concatInstanceProperty__default["default"](_context = "\n        &:not(:root) {\n          width: ".concat(dimensions.width, ";\n          height: ")).call(_context, dimensions.height, ";\n        }\n      ");
-
     default:
       return _concatInstanceProperty__default["default"](_context2 = "\n        width: ".concat(dimensions.width, ";\n        height: ")).call(_context2, dimensions.height, ";\n      ");
   }
 };
-
 const getColor = color => {
   if (!color) return 'inherit';
   let iconColor;
-
   switch (color) {
     case 'solid':
       iconColor = designSystem.designTokens.colorSolid;
       break;
-
     case 'neutral60':
       iconColor = designSystem.designTokens.colorNeutral60;
       break;
-
     case 'surface':
       iconColor = designSystem.designTokens.colorSurface;
       break;
-
     case 'info':
       iconColor = designSystem.designTokens.colorInfo;
       break;
-
     case 'primary':
       iconColor = designSystem.designTokens.colorPrimary;
       break;
-
     case 'primary40':
       iconColor = designSystem.designTokens.colorPrimary40;
       break;
-
     case 'warning':
       iconColor = designSystem.designTokens.colorWarning;
       break;
-
     case 'error':
       iconColor = designSystem.designTokens.colorError;
       break;
   }
-
   if (!iconColor) {
     return 'inherit';
   }
-
   return iconColor;
 };
-
 const getIconStyles = props => /*#__PURE__*/react.css("*:not([fill='none']){fill:", getColor(props.color), ";}&,image{", getSizeStyle(props.size), ";}flex-shrink:0;" + ("" ), "" );
-
 const SvgIndeterminate = props => jsxRuntime.jsx("svg", _objectSpread$2(_objectSpread$2({
   xmlns: "http://www.w3.org/2000/svg",
   width: 12,
@@ -272,9 +227,7 @@ const SvgIndeterminate = props => jsxRuntime.jsx("svg", _objectSpread$2(_objectS
     d: "M11 1H1"
   })
 }));
-
 SvgIndeterminate.displayName = 'SvgIndeterminate';
-
 const IndeterminateIcon = props => jsxRuntime.jsx(react.ClassNames, {
   children: _ref => {
     let createClass = _ref.css;
@@ -283,14 +236,11 @@ const IndeterminateIcon = props => jsxRuntime.jsx(react.ClassNames, {
     }));
   }
 });
-
 IndeterminateIcon.displayName = 'IndeterminateIcon';
 var IndeterminateIcon$1 = IndeterminateIcon;
 
 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 Checkbox = props => {
   const ref = react$1.useRef({
     indeterminate: false
@@ -301,7 +251,8 @@ const Checkbox = props => {
     }
   }, [props.isIndeterminate]);
   return jsxRuntime.jsx("input", _objectSpread$1(_objectSpread$1(_objectSpread$1({
-    type: "checkbox" // @ts-ignore
+    type: "checkbox"
+    // @ts-ignore
     ,
     ref: ref
   }, utils.filterDataAttributes(props)), utils.filterAriaAttributes(props)), {}, {
@@ -318,12 +269,10 @@ const Checkbox = props => {
     onChange: !props.isReadOnly ? props.onChange : undefined
   }));
 };
-
 Checkbox.displayName = 'Checkbox';
 var Checkbox$1 = Checkbox;
 
 function ownKeys(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(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 const sequentialId = utils.createSequentialId('checkbox-input-');
 const defaultProps = {
@@ -331,90 +280,68 @@ const defaultProps = {
   isDisabled: false,
   hasError: false
 };
-
 const getBorderColor = props => {
   if (props.hasError) {
     return designSystem.designTokens.borderColorForCheckboxInputIconWhenError;
   }
-
   if (props.isDisabled) {
     return designSystem.designTokens.borderColorForCheckboxInputIconWhenDisabled;
   }
-
   if (props.isReadOnly) {
     return designSystem.designTokens.borderColorForCheckboxInputIconWhenReadonly;
   }
-
   return designSystem.designTokens.borderColorForCheckboxInputIcon;
 };
-
 const getBackgroundColor = props => {
   if (props.isChecked || props.isIndeterminate) {
     if (props.hasError) {
       return designSystem.designTokens.backgroundColorForCheckboxInputIconWhenError;
     }
-
     if (props.isDisabled) {
       return designSystem.designTokens.backgroundColorForCheckboxInputIconWhenDisabled;
     }
-
     if (props.isReadOnly) {
       return designSystem.designTokens.backgroundColorForCheckboxInputIconWhenReadonly;
     }
-
     return designSystem.designTokens.backgroundColorForCheckboxInputIcon;
   }
-
   return designSystem.designTokens.colorSurface;
 };
-
 const getTextColor = props => {
   if (props.hasError) {
     return designSystem.designTokens.fontColorForCheckboxInputLabelWhenError;
   }
-
   if (props.isDisabled) {
     return designSystem.designTokens.fontColorForCheckboxInputLabelWhenDisabled;
   }
-
   if (props.isReadOnly) {
     return designSystem.designTokens.fontColorForCheckboxInputLabelWhenReadonly;
   }
-
   return designSystem.designTokens.fontColorForCheckboxInputLabel;
 };
-
 const LabelTextWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e6nn4mw2"
 } )("margin-left:calc(\n    ", designSystem.designTokens.spacing20, " - ", designSystem.designTokens.borderWidthForCheckboxInputIcon, "\n  );outline:none;border-radius:", designSystem.designTokens.borderRadiusForTag, ";font-size:", designSystem.designTokens.fontSizeForTextAsBody, ";line-height:", designSystem.designTokens.lineHeightForTextAsBody, ";font-weight:", designSystem.designTokens.fontWeightForTextAsBody, ";color:", props => getTextColor(props), ";" + ("" ));
-
 const CheckboxIconWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e6nn4mw1"
 } )("width:", props => props.width, ";height:", props => props.height, ";display:flex;align-items:center;justify-content:center;border-radius:", designSystem.designTokens.borderRadius6, ";", props => props.isHovered ? /*#__PURE__*/react.css("background-color:", designSystem.designTokens.backgroundColorForCheckboxInputIconWhenHovered, ";" + ("" ), "" ) : '', ";" + ("" ));
-
 const CheckboxIcon = props => {
   var _context;
-
-  const _useTheme = designSystem.useTheme(),
-        isNewTheme = _useTheme.isNewTheme,
-        themedValue = _useTheme.themedValue;
-
   const isDisabledOrReadOnlyState = props.isDisabled || props.isReadOnly;
-  const isDefaultState = !(props.hasError || isDisabledOrReadOnlyState);
   const canForcedHoverEffect = Boolean(props.isHovered && !isDisabledOrReadOnlyState);
   return jsxRuntime.jsx(CheckboxIconWrapper, {
-    width: themedValue('auto', '26px'),
-    height: themedValue('auto', '26px'),
+    width: "26px",
+    height: "26px",
     isHovered: canForcedHoverEffect,
     children: jsxRuntime.jsx("div", {
-      css: _filterInstanceProperty__default["default"](_context = [/*#__PURE__*/react.css("border-width:", designSystem.designTokens.borderWidthForCheckboxInputIcon, ";border-radius:", designSystem.designTokens.borderRadius2, ";border-color:", getBorderColor(props), ";border-style:solid;background-color:", getBackgroundColor(props), ";padding:1px;width:", themedValue('16px', '18px'), ";height:", themedValue('16px', '18px'), ";display:flex;align-items:center;justify-content:center;svg>path[stroke]{stroke:", themedValue(designSystem.designTokens.colorPrimary, designSystem.designTokens.colorSurface), ";}" + ("" ), "" ), !isNewTheme && /*#__PURE__*/react.css("svg>path[fill]{fill:", getTextColor(props), ";}svg>path[stroke]{stroke:", getTextColor(props), ";}" + ("" ), "" ), !isNewTheme && isDefaultState && /*#__PURE__*/react.css("svg>path[fill]{fill:", designSystem.designTokens.colorPrimary, ";}svg>path[stroke]{stroke:", designSystem.designTokens.colorPrimary, ";}&:hover{border-color:", isDisabledOrReadOnlyState ? 'unset' : designSystem.designTokens.colorPrimary, ";}" + ("" ), "" ), !isNewTheme && canForcedHoverEffect && /*#__PURE__*/react.css("border-color:", designSystem.designTokens.colorPrimary, ";" + ("" ), "" )]).call(_context, Boolean),
+      css: _filterInstanceProperty__default["default"](_context = [/*#__PURE__*/react.css("border-width:", designSystem.designTokens.borderWidthForCheckboxInputIcon, ";border-radius:", designSystem.designTokens.borderRadius2, ";border-color:", getBorderColor(props), ";border-style:solid;background-color:", getBackgroundColor(props), ";padding:1px;width:18px;height:18px;display:flex;align-items:center;justify-content:center;svg>path[stroke]{stroke:", designSystem.designTokens.colorSurface, ";}" + ("" ), "" )]).call(_context, Boolean),
       children: (() => {
         if (props.isIndeterminate) return jsxRuntime.jsx(IndeterminateIcon$1, {
-          color: themedValue('primary', 'surface'),
+          color: "surface",
           size: "scale"
         });
         if (props.isChecked) return jsxRuntime.jsx(CheckedIcon$1, {
-          color: themedValue('primary', 'surface'),
+          color: "surface",
           size: "scale"
         });
         return null;
@@ -422,7 +349,6 @@ const CheckboxIcon = props => {
     })
   });
 };
-
 const Label = /*#__PURE__*/_styled__default["default"]("label", {
   target: "e6nn4mw0"
 } )("display:flex;align-items:center;cursor:", props => {
@@ -430,7 +356,6 @@ const Label = /*#__PURE__*/_styled__default["default"]("label", {
   if (props.isReadOnly) return 'default';
   return 'pointer';
 }, ";position:relative;&:focus-within ", LabelTextWrapper, "{box-shadow:0 0 0 2px ", designSystem.designTokens.borderColorForInputWhenFocused, ";}&:hover ", CheckboxIconWrapper, "{background-color:", props => props.isDisabled || props.isReadOnly ? 'unset' : designSystem.designTokens.backgroundColorForCheckboxInputIconWhenHovered, ";}" + ("" ));
-
 const CheckboxInput = props => {
   // We generate an id in case no id is provided by the parent to attach the
   // label to the input component.
@@ -458,21 +383,21 @@ const CheckboxInput = props => {
       isReadOnly: props.isReadOnly,
       isChecked: props.isChecked,
       isHovered: props.isHovered,
-      isIndeterminate: props.isIndeterminate // To allow focusing the Label in readOnly mode, because the checkbox gets disabled and therefore unfocusable
+      isIndeterminate: props.isIndeterminate
+      // To allow focusing the Label in readOnly mode, because the checkbox gets disabled and therefore unfocusable
       ,
       tabIndex: props.isReadOnly ? 0 : -1,
       children: props.children
     })]
   });
 };
-
 CheckboxInput.propTypes = {};
 CheckboxInput.displayName = 'CheckboxInput';
 CheckboxInput.defaultProps = defaultProps;
 var CheckboxInput$1 = CheckboxInput;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "16.0.0";
+var version = "16.1.1";
 
 exports["default"] = CheckboxInput$1;
 exports.version = version;