@commercetools-uikit/checkbox-input 15.15.0 → 16.0.0

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

@@ -37,13 +37,13 @@ var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInsta
 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; }
-var iconSizes$1 = {
+const iconSizes$1 = {
   small: 12,
   medium: 16,
   big: 24
 };
 
-var getSizeDimensions$1 = function getSizeDimensions(size) {
+const getSizeDimensions$1 = size => {
   switch (size) {
     case 'scale':
       return {
@@ -67,10 +67,10 @@ var getSizeDimensions$1 = function getSizeDimensions(size) {
   }
 };
 
-var getSizeStyle$1 = function getSizeStyle(size) {
+const getSizeStyle$1 = size => {
   var _context, _context2;
 
-  var dimensions = getSizeDimensions$1(size);
+  const dimensions = getSizeDimensions$1(size);
 
   switch (size) {
     case 'scale':
@@ -81,9 +81,9 @@ var getSizeStyle$1 = function getSizeStyle(size) {
   }
 };
 
-var getColor$1 = function getColor(color) {
+const getColor$1 = color => {
   if (!color) return 'inherit';
-  var iconColor;
+  let iconColor;
 
   switch (color) {
     case 'solid':
@@ -126,45 +126,39 @@ var getColor$1 = function getColor(color) {
   return iconColor;
 };
 
-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 SvgChecked = function SvgChecked(props) {
-  return jsxRuntime.jsxs("svg", _objectSpread$3(_objectSpread$3({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 12,
-    height: 9,
-    fill: "none",
-    viewBox: "0 0 12 9",
-    role: "img"
-  }, props), {}, {
-    children: [jsxRuntime.jsx("path", {
-      fill: "#000",
-      fillRule: "evenodd",
-      d: "M.293 4.293a1 1 0 0 1 1.414 0l3 3a1 1 0 0 1-1.414 1.414l-3-3a1 1 0 0 1 0-1.414Z",
-      clipRule: "evenodd"
-    }), jsxRuntime.jsx("path", {
-      fill: "#000",
-      fillRule: "evenodd",
-      d: "M11.707.293a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414-1.414l7-7a1 1 0 0 1 1.414 0Z",
-      clipRule: "evenodd"
-    })]
-  }));
-};
+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,
+  height: 9,
+  fill: "none",
+  viewBox: "0 0 12 9",
+  role: "img"
+}, props), {}, {
+  children: [jsxRuntime.jsx("path", {
+    fill: "#000",
+    fillRule: "evenodd",
+    d: "M.293 4.293a1 1 0 0 1 1.414 0l3 3a1 1 0 0 1-1.414 1.414l-3-3a1 1 0 0 1 0-1.414Z",
+    clipRule: "evenodd"
+  }), jsxRuntime.jsx("path", {
+    fill: "#000",
+    fillRule: "evenodd",
+    d: "M11.707.293a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414-1.414l7-7a1 1 0 0 1 1.414 0Z",
+    clipRule: "evenodd"
+  })]
+}));
 
 SvgChecked.displayName = 'SvgChecked';
 
-var CheckedIcon = function CheckedIcon(props) {
-  return jsxRuntime.jsx(react.ClassNames, {
-    children: function children(_ref) {
-      var createClass = _ref.css;
-      return jsxRuntime.jsx(SvgChecked, _objectSpread$3(_objectSpread$3({}, props), {}, {
-        className: createClass(getIconStyles$1(props))
-      }));
-    }
-  });
-};
+const CheckedIcon = props => jsxRuntime.jsx(react.ClassNames, {
+  children: _ref => {
+    let createClass = _ref.css;
+    return jsxRuntime.jsx(SvgChecked, _objectSpread$3(_objectSpread$3({}, props), {}, {
+      className: createClass(getIconStyles$1(props))
+    }));
+  }
+});
 
 CheckedIcon.displayName = 'CheckedIcon';
 var CheckedIcon$1 = CheckedIcon;
@@ -172,13 +166,13 @@ 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; }
-var iconSizes = {
+const iconSizes = {
   small: 12,
   medium: 16,
   big: 24
 };
 
-var getSizeDimensions = function getSizeDimensions(size) {
+const getSizeDimensions = size => {
   switch (size) {
     case 'scale':
       return {
@@ -202,10 +196,10 @@ var getSizeDimensions = function getSizeDimensions(size) {
   }
 };
 
-var getSizeStyle = function getSizeStyle(size) {
+const getSizeStyle = size => {
   var _context, _context2;
 
-  var dimensions = getSizeDimensions(size);
+  const dimensions = getSizeDimensions(size);
 
   switch (size) {
     case 'scale':
@@ -216,9 +210,9 @@ var getSizeStyle = function getSizeStyle(size) {
   }
 };
 
-var getColor = function getColor(color) {
+const getColor = color => {
   if (!color) return 'inherit';
-  var iconColor;
+  let iconColor;
 
   switch (color) {
     case 'solid':
@@ -261,40 +255,34 @@ var getColor = function getColor(color) {
   return iconColor;
 };
 
-var getIconStyles = function getIconStyles(props) {
-  return /*#__PURE__*/react.css("*:not([fill='none']){fill:", getColor(props.color), ";}&,image{", getSizeStyle(props.size), ";}flex-shrink:0;" + ("" ), "" );
-};
-
-var SvgIndeterminate = function SvgIndeterminate(props) {
-  return jsxRuntime.jsx("svg", _objectSpread$2(_objectSpread$2({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 12,
-    height: 2,
-    fill: "none",
-    viewBox: "0 0 12 2",
-    role: "img"
-  }, props), {}, {
-    children: jsxRuntime.jsx("path", {
-      stroke: "#000",
-      strokeLinecap: "round",
-      strokeWidth: 2,
-      d: "M11 1H1"
-    })
-  }));
-};
+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,
+  height: 2,
+  fill: "none",
+  viewBox: "0 0 12 2",
+  role: "img"
+}, props), {}, {
+  children: jsxRuntime.jsx("path", {
+    stroke: "#000",
+    strokeLinecap: "round",
+    strokeWidth: 2,
+    d: "M11 1H1"
+  })
+}));
 
 SvgIndeterminate.displayName = 'SvgIndeterminate';
 
-var IndeterminateIcon = function IndeterminateIcon(props) {
-  return jsxRuntime.jsx(react.ClassNames, {
-    children: function children(_ref) {
-      var createClass = _ref.css;
-      return jsxRuntime.jsx(SvgIndeterminate, _objectSpread$2(_objectSpread$2({}, props), {}, {
-        className: createClass(getIconStyles(props))
-      }));
-    }
-  });
-};
+const IndeterminateIcon = props => jsxRuntime.jsx(react.ClassNames, {
+  children: _ref => {
+    let createClass = _ref.css;
+    return jsxRuntime.jsx(SvgIndeterminate, _objectSpread$2(_objectSpread$2({}, props), {}, {
+      className: createClass(getIconStyles(props))
+    }));
+  }
+});
 
 IndeterminateIcon.displayName = 'IndeterminateIcon';
 var IndeterminateIcon$1 = IndeterminateIcon;
@@ -303,11 +291,11 @@ function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys__default["d
 
 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; }
 
-var Checkbox = function Checkbox(props) {
-  var ref = react$1.useRef({
+const Checkbox = props => {
+  const ref = react$1.useRef({
     indeterminate: false
   });
-  react$1.useEffect(function () {
+  react$1.useEffect(() => {
     if (props.isIndeterminate) {
       ref.current.indeterminate = true;
     }
@@ -337,14 +325,14 @@ 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; }
-var sequentialId = utils.createSequentialId('checkbox-input-');
-var defaultProps = {
+const sequentialId = utils.createSequentialId('checkbox-input-');
+const defaultProps = {
   isChecked: false,
   isDisabled: false,
   hasError: false
 };
 
-var getBorderColor = function getBorderColor(props) {
+const getBorderColor = props => {
   if (props.hasError) {
     return designSystem.designTokens.borderColorForCheckboxInputIconWhenError;
   }
@@ -360,7 +348,7 @@ var getBorderColor = function getBorderColor(props) {
   return designSystem.designTokens.borderColorForCheckboxInputIcon;
 };
 
-var getBackgroundColor = function getBackgroundColor(props) {
+const getBackgroundColor = props => {
   if (props.isChecked || props.isIndeterminate) {
     if (props.hasError) {
       return designSystem.designTokens.backgroundColorForCheckboxInputIconWhenError;
@@ -380,7 +368,7 @@ var getBackgroundColor = function getBackgroundColor(props) {
   return designSystem.designTokens.colorSurface;
 };
 
-var getTextColor = function getTextColor(props) {
+const getTextColor = props => {
   if (props.hasError) {
     return designSystem.designTokens.fontColorForCheckboxInputLabelWhenError;
   }
@@ -396,39 +384,31 @@ var getTextColor = function getTextColor(props) {
   return designSystem.designTokens.fontColorForCheckboxInputLabel;
 };
 
-var LabelTextWrapper = /*#__PURE__*/_styled__default["default"]("div", {
+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:", function (props) {
-  return getTextColor(props);
-}, ";" + ("" ));
+} )("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), ";" + ("" ));
 
-var CheckboxIconWrapper = /*#__PURE__*/_styled__default["default"]("div", {
+const CheckboxIconWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e6nn4mw1"
-} )("width:", function (props) {
-  return props.width;
-}, ";height:", function (props) {
-  return props.height;
-}, ";display:flex;align-items:center;justify-content:center;border-radius:", designSystem.designTokens.borderRadius6, ";", function (props) {
-  return props.isHovered ? /*#__PURE__*/react.css("background-color:", designSystem.designTokens.backgroundColorForCheckboxInputIconWhenHovered, ";" + ("" ), "" ) : '';
-}, ";" + ("" ));
-
-var CheckboxIcon = function CheckboxIcon(props) {
+} )("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;
 
-  var _useTheme = designSystem.useTheme(),
-      isNewTheme = _useTheme.isNewTheme,
-      themedValue = _useTheme.themedValue;
+  const _useTheme = designSystem.useTheme(),
+        isNewTheme = _useTheme.isNewTheme,
+        themedValue = _useTheme.themedValue;
 
-  var isDisabledOrReadOnlyState = props.isDisabled || props.isReadOnly;
-  var isDefaultState = !(props.hasError || isDisabledOrReadOnlyState);
-  var canForcedHoverEffect = Boolean(props.isHovered && !isDisabledOrReadOnlyState);
+  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'),
     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),
-      children: function () {
+      children: (() => {
         if (props.isIndeterminate) return jsxRuntime.jsx(IndeterminateIcon$1, {
           color: themedValue('primary', 'surface'),
           size: "scale"
@@ -438,25 +418,23 @@ var CheckboxIcon = function CheckboxIcon(props) {
           size: "scale"
         });
         return null;
-      }()
+      })()
     })
   });
 };
 
-var Label = /*#__PURE__*/_styled__default["default"]("label", {
+const Label = /*#__PURE__*/_styled__default["default"]("label", {
   target: "e6nn4mw0"
-} )("display:flex;align-items:center;cursor:", function (props) {
+} )("display:flex;align-items:center;cursor:", props => {
   if (props.isDisabled) return 'not-allowed';
   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:", function (props) {
-  return props.isDisabled || props.isReadOnly ? 'unset' : designSystem.designTokens.backgroundColorForCheckboxInputIconWhenHovered;
-}, ";}" + ("" ));
+}, ";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, ";}" + ("" ));
 
-var CheckboxInput = function CheckboxInput(props) {
+const CheckboxInput = props => {
   // We generate an id in case no id is provided by the parent to attach the
   // label to the input component.
-  var id = props.id || sequentialId();
+  const id = props.id || sequentialId();
   return jsxRuntime.jsxs(Label, {
     htmlFor: id,
     hasError: props.hasError,
@@ -494,7 +472,7 @@ CheckboxInput.defaultProps = defaultProps;
 var CheckboxInput$1 = CheckboxInput;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "15.15.0";
+var version = "16.0.0";
 
 exports["default"] = CheckboxInput$1;
 exports.version = version;