@itcase/ui 1.0.99 → 1.0.101

package/dist/components/Button.js

@@ -31,14 +31,14 @@ require('../constants/componentProps/wrap.js');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
-require('../constants/componentProps/textColorActive.js');
-require('../constants/componentProps/textColorHover.js');
-require('../constants/componentProps/underline.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
+require('../constants/componentProps/textColorActive.js');
+require('../constants/componentProps/textColorHover.js');
+require('../constants/componentProps/underline.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 

package/dist/components/DatePicker.js

@@ -5,7 +5,7 @@ var PropTypes = require('prop-types');
 var clsx = require('clsx');
 var _commonjsHelpers = require('../_commonjsHelpers-CFO10eej.js');
 var ReactDOM = require('react-dom');
-var floatingUi_dom = require('../floating-ui.dom-D_Zct5p2.js');
+var floatingUi_dom = require('../floating-ui.dom-C34fOuI9.js');
 var index$2 = require('./Input.js');
 var index$6 = require('./Text.js');
 var index$3 = require('./Label.js');
@@ -86,39 +86,57 @@ var classnames = {exports: {}};
 
 		var hasOwn = {}.hasOwnProperty;
 
-		function classNames() {
-			var classes = [];
+		function classNames () {
+			var classes = '';
 
 			for (var i = 0; i < arguments.length; i++) {
 				var arg = arguments[i];
-				if (!arg) continue;
-
-				var argType = typeof arg;
-
-				if (argType === 'string' || argType === 'number') {
-					classes.push(arg);
-				} else if (Array.isArray(arg)) {
-					if (arg.length) {
-						var inner = classNames.apply(null, arg);
-						if (inner) {
-							classes.push(inner);
-						}
-					}
-				} else if (argType === 'object') {
-					if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
-						classes.push(arg.toString());
-						continue;
-					}
-
-					for (var key in arg) {
-						if (hasOwn.call(arg, key) && arg[key]) {
-							classes.push(key);
-						}
-					}
+				if (arg) {
+					classes = appendClass(classes, parseValue(arg));
 				}
 			}
 
-			return classes.join(' ');
+			return classes;
+		}
+
+		function parseValue (arg) {
+			if (typeof arg === 'string' || typeof arg === 'number') {
+				return arg;
+			}
+
+			if (typeof arg !== 'object') {
+				return '';
+			}
+
+			if (Array.isArray(arg)) {
+				return classNames.apply(null, arg);
+			}
+
+			if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
+				return arg.toString();
+			}
+
+			var classes = '';
+
+			for (var key in arg) {
+				if (hasOwn.call(arg, key) && arg[key]) {
+					classes = appendClass(classes, key);
+				}
+			}
+
+			return classes;
+		}
+
+		function appendClass (value, newClass) {
+			if (!newClass) {
+				return value;
+			}
+		
+			if (value) {
+				return value + ' ' + newClass;
+			}
+		
+			return value + newClass;
 		}
 
 		if (module.exports) {

package/dist/components/FormField.js

@@ -45,7 +45,7 @@ require('../constants/componentProps/titleSize.js');
 require('../constants/componentProps/wrap.js');
 require('react-select');
 require('react-dom');
-require('../floating-ui.dom-D_Zct5p2.js');
+require('../floating-ui.dom-C34fOuI9.js');
 require('./Badge.js');
 require('./Group.js');
 require('../constants/componentProps/stacking.js');

package/dist/components/Response.js

@@ -0,0 +1,246 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var SVG = require('react-inlinesvg');
+var borderColor = require('../constants/componentProps/borderColor.js');
+var borderType = require('../constants/componentProps/borderType.js');
+var borderWidth = require('../constants/componentProps/borderWidth.js');
+var fillHover = require('../constants/componentProps/fillHover.js');
+var fill = require('../constants/componentProps/fill.js');
+var shape = require('../constants/componentProps/shape.js');
+var size = require('../constants/componentProps/size.js');
+var textColor = require('../constants/componentProps/textColor.js');
+var textSize = require('../constants/componentProps/textSize.js');
+var textWeight = require('../constants/componentProps/textWeight.js');
+var titleSize = require('../constants/componentProps/titleSize.js');
+var width = require('../constants/componentProps/width.js');
+var index$3 = require('./Button.js');
+var index = require('./Group.js');
+var index$2 = require('./Text.js');
+var index$1 = require('./Title.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+require('./Icon.js');
+require('./Link.js');
+require('../constants/componentProps/textGradient.js');
+require('../constants/componentProps/textStyle.js');
+require('../constants/componentProps/type.js');
+require('../constants/componentProps/underline.js');
+require('../hooks/useStyles.js');
+require('lodash/camelCase');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('lodash/castArray');
+require('../constants/componentProps/iconSize.js');
+require('../constants/componentProps/strokeColor.js');
+require('./Tooltip.js');
+require('../constants/componentProps/textColorActive.js');
+require('../constants/componentProps/textColorHover.js');
+require('../constants/componentProps/textAlign.js');
+require('../constants/componentProps/wrap.js');
+require('./Loader.js');
+require('../constants/componentProps/direction.js');
+require('../constants/componentProps/stacking.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+var SVG__default = /*#__PURE__*/_interopDefault(SVG);
+
+const responseConfig = {
+  appearance: {},
+  setAppearance: newComponent => {
+    responseConfig.appearance = newComponent;
+  }
+};
+function Response(props) {
+  const {
+    after,
+    before,
+    appearance,
+    imageSrc,
+    className,
+    title,
+    titleTextSize,
+    titleTextWeight,
+    titleTextColor,
+    message,
+    messageTextColor,
+    messageTextSize,
+    primaryButton,
+    primaryButtonAfter,
+    primaryButtonAppearance,
+    primaryButtonBefore,
+    primaryButtonFill,
+    primaryButtonFillHover,
+    primaryButtonLabel,
+    primaryButtonLabelTextColor,
+    primaryButtonLabelTextSize,
+    primaryButtonShape,
+    primaryButtonSize,
+    primaryButtonWidth,
+    secondaryButton,
+    secondaryButtonAfter,
+    secondaryButtonAppearance,
+    secondaryButtonBefore,
+    secondaryButtonFill,
+    secondaryButtonFillHover,
+    secondaryButtonLabel,
+    secondaryButtonLabelTextColor,
+    secondaryButtonLabelTextSize,
+    secondaryButtonShape,
+    secondaryButtonSize,
+    secondaryButtonWidth,
+    onClickPrimaryButton,
+    onClickSecondaryButton
+  } = props;
+  const ImageComponent = React.useMemo(() => {
+    if (imageSrc) {
+      // eslint-disable-next-line react/prop-types
+      if (imageSrc.endsWith('.svg')) {
+        return /*#__PURE__*/React__default.default.createElement(SVG__default.default, {
+          src: imageSrc
+        });
+      }
+      return /*#__PURE__*/React__default.default.createElement("img", {
+        src: imageSrc
+      });
+    }
+    return null;
+  }, [imageSrc]);
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  const fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_hover_',
+    propsKey: 'fillHover'
+  });
+  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'response_shape_',
+    propsKey: 'shape'
+  });
+  const borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: 'borderColor'
+  });
+  const borderColorHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_hover_',
+    propsKey: 'borderColorHover'
+  });
+  const borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-width_',
+    propsKey: 'borderWidth'
+  });
+  const borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border_type_',
+    propsKey: 'borderType'
+  });
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default(className, 'response', fillClass, fillHoverClass, shapeClass, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass)
+  }, before, ImageComponent, /*#__PURE__*/React__default.default.createElement(index.Group, {
+    className: "response__desc",
+    width: "fill"
+  }, title && /*#__PURE__*/React__default.default.createElement(index$1.Title, {
+    className: "response__title",
+    size: titleTextSize || responseConfig.appearance[appearance]?.titleTextSize,
+    textColor: titleTextColor || responseConfig.appearance[appearance]?.titleTextColor,
+    textWeight: titleTextWeight || responseConfig.appearance[appearance]?.titleTextWeight
+  }, title), message && /*#__PURE__*/React__default.default.createElement(index$2.Text, {
+    className: "response__message",
+    size: messageTextSize || responseConfig.appearance[appearance]?.messageTextSize,
+    textColor: messageTextColor || responseConfig.appearance[appearance]?.messageTextColor
+  }, message)), (primaryButtonLabel || primaryButton || secondaryButtonLabel || secondaryButton) && /*#__PURE__*/React__default.default.createElement(index.Group, {
+    className: "response__button",
+    width: "fill"
+  }, primaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(index$3.Button, {
+    after: primaryButtonAfter,
+    appearance: primaryButtonAppearance || responseConfig.appearance[appearance]?.primaryButtonAppearance,
+    before: primaryButtonBefore,
+    className: "response__button-item",
+    fill: primaryButtonFill,
+    fillHover: primaryButtonFillHover,
+    label: primaryButtonLabel,
+    labelTextColor: primaryButtonLabelTextColor,
+    labelTextSize: primaryButtonLabelTextSize || responseConfig.appearance[appearance]?.primaryButtonLabelTextSize,
+    shape: primaryButtonShape || responseConfig.appearance[appearance]?.primaryButtonShape,
+    size: primaryButtonSize || responseConfig.appearance[appearance]?.primaryButtonSize,
+    width: primaryButtonWidth || responseConfig.appearance[appearance]?.primaryButtonWidth,
+    onClick: onClickPrimaryButton
+  }) : primaryButton, secondaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(index$3.Button, {
+    after: secondaryButtonAfter,
+    appearance: secondaryButtonAppearance || responseConfig.appearance[appearance]?.secondaryButtonAppearance,
+    before: secondaryButtonBefore,
+    className: "response__button-item",
+    fill: secondaryButtonFill,
+    fillHover: secondaryButtonFillHover,
+    label: secondaryButtonLabel,
+    labelTextColor: secondaryButtonLabelTextColor,
+    labelTextSize: secondaryButtonLabelTextSize || responseConfig.appearance[appearance]?.secondaryButtonLabelTextSize,
+    shape: secondaryButtonShape || responseConfig.appearance[appearance]?.secondaryButtonShape,
+    size: secondaryButtonSize || responseConfig.appearance[appearance]?.secondaryButtonSize,
+    width: secondaryButtonWidth || responseConfig.appearance[appearance]?.secondaryButtonWidth,
+    onClick: onClickSecondaryButton
+  }) : secondaryButton), after);
+}
+Response.propsTypes = {
+  borderColor: PropTypes__default.default.oneOf(borderColor.default),
+  borderType: PropTypes__default.default.oneOf(borderType.default),
+  borderWidth: PropTypes__default.default.oneOf(borderWidth.default),
+  className: PropTypes__default.default.string,
+  fill: PropTypes__default.default.oneOf(fill.default),
+  fillHover: PropTypes__default.default.oneOf(fillHover.default),
+  shape: PropTypes__default.default.oneOf(shape.default),
+  after: PropTypes__default.default.any,
+  before: PropTypes__default.default.any,
+  appearance: PropTypes__default.default.string,
+  imageSrc: PropTypes__default.default.string,
+  title: PropTypes__default.default.string,
+  titleTextSize: PropTypes__default.default.oneOf(titleSize.default),
+  titleTextWeight: PropTypes__default.default.oneOf(textWeight.default),
+  titleTextColor: PropTypes__default.default.oneOf(textColor.default),
+  message: PropTypes__default.default.string,
+  messageTextColor: PropTypes__default.default.oneOf(textColor.default),
+  messageTextSize: PropTypes__default.default.oneOf(textSize.default),
+  primaryButton: PropTypes__default.default.any,
+  primaryButtonAfter: PropTypes__default.default.any,
+  primaryButtonAppearance: PropTypes__default.default.string,
+  primaryButtonBefore: PropTypes__default.default.any,
+  primaryButtonFill: PropTypes__default.default.oneOf(fill.default),
+  primaryButtonFillHover: PropTypes__default.default.oneOf(fillHover.default),
+  primaryButtonLabel: PropTypes__default.default.string,
+  primaryButtonLabelTextColor: PropTypes__default.default.oneOf(textColor.default),
+  primaryButtonLabelTextSize: PropTypes__default.default.oneOf(textSize.default),
+  primaryButtonShape: PropTypes__default.default.oneOf(shape.default),
+  primaryButtonSize: PropTypes__default.default.oneOf(size.default),
+  primaryButtonWidth: PropTypes__default.default.oneOf(width.default),
+  secondaryButton: PropTypes__default.default.any,
+  secondaryButtonAfter: PropTypes__default.default.any,
+  secondaryButtonAppearance: PropTypes__default.default.string,
+  secondaryButtonBefore: PropTypes__default.default.any,
+  secondaryButtonFill: PropTypes__default.default.oneOf(fill.default),
+  secondaryButtonFillHover: PropTypes__default.default.oneOf(fillHover.default),
+  secondaryButtonLabel: PropTypes__default.default.string,
+  secondaryButtonLabelTextColor: PropTypes__default.default.oneOf(textColor.default),
+  secondaryButtonLabelTextSize: PropTypes__default.default.oneOf(textSize.default),
+  secondaryButtonShape: PropTypes__default.default.oneOf(shape.default),
+  secondaryButtonSize: PropTypes__default.default.oneOf(size.default),
+  secondaryButtonWidth: PropTypes__default.default.oneOf(width.default),
+  onClickPrimaryButton: PropTypes__default.default.func,
+  onClickSecondaryButton: PropTypes__default.default.func
+};
+Response.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "Response"
+};
+
+exports.Response = Response;
+exports.responseConfig = responseConfig;

package/dist/components/Select.js

@@ -6,7 +6,7 @@ var index$1 = require('./Icon.js');
 var Select$1 = require('react-select');
 var clsx = require('clsx');
 var ReactDOM = require('react-dom');
-var floatingUi_dom = require('../floating-ui.dom-D_Zct5p2.js');
+var floatingUi_dom = require('../floating-ui.dom-C34fOuI9.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var index$2 = require('./Badge.js');
 var index$3 = require('./Text.js');
@@ -135,34 +135,34 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-function _typeof(obj) {
+function _typeof(o) {
   "@babel/helpers - typeof";
 
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
-    return typeof obj;
-  } : function (obj) {
-    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-  }, _typeof(obj);
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof(o);
 }
 
-function _toPrimitive(input, hint) {
-  if (_typeof(input) !== "object" || input === null) return input;
-  var prim = input[Symbol.toPrimitive];
-  if (prim !== undefined) {
-    var res = prim.call(input, hint || "default");
-    if (_typeof(res) !== "object") return res;
+function toPrimitive(t, r) {
+  if ("object" != _typeof(t) || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != _typeof(i)) return i;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
-  return (hint === "string" ? String : Number)(input);
+  return ("string" === r ? String : Number)(t);
 }
 
-function _toPropertyKey(arg) {
-  var key = _toPrimitive(arg, "string");
-  return _typeof(key) === "symbol" ? key : String(key);
+function toPropertyKey(t) {
+  var i = toPrimitive(t, "string");
+  return "symbol" == _typeof(i) ? i : String(i);
 }
 
 function _defineProperty(obj, key, value) {
-  key = _toPropertyKey(key);
+  key = toPropertyKey(key);
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value: value,
@@ -176,26 +176,26 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
+function ownKeys(e, r) {
+  var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys.push.apply(keys, symbols);
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
   }
-  return keys;
-}
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
-      _defineProperty(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+  return t;
+}
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
     });
   }
-  return target;
+  return e;
 }
 
 function _classCallCheck(instance, Constructor) {
@@ -210,7 +210,7 @@ function _defineProperties(target, props) {
     descriptor.enumerable = descriptor.enumerable || false;
     descriptor.configurable = true;
     if ("value" in descriptor) descriptor.writable = true;
-    Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor);
+    Object.defineProperty(target, toPropertyKey(descriptor.key), descriptor);
   }
 }
 function _createClass(Constructor, protoProps, staticProps) {
@@ -255,15 +255,12 @@ function _getPrototypeOf(o) {
 }
 
 function _isNativeReflectConstruct() {
-  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
-  if (Reflect.construct.sham) return false;
-  if (typeof Proxy === "function") return true;
   try {
-    Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
-    return true;
-  } catch (e) {
-    return false;
-  }
+    var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+  } catch (t) {}
+  return (_isNativeReflectConstruct = function _isNativeReflectConstruct() {
+    return !!t;
+  })();
 }
 
 function _assertThisInitialized(self) {
@@ -2676,7 +2673,7 @@ var Emotion$1 = Emotion;
 
 var pkg = {
 	name: "@emotion/react",
-	version: "11.11.1",
+	version: "11.11.3",
 	main: "dist/emotion-react.cjs.js",
 	module: "dist/emotion-react.esm.js",
 	browser: {
@@ -2749,7 +2746,7 @@ var pkg = {
 		"@babel/runtime": "^7.18.3",
 		"@emotion/babel-plugin": "^11.11.0",
 		"@emotion/cache": "^11.11.0",
-		"@emotion/serialize": "^1.1.2",
+		"@emotion/serialize": "^1.1.3",
 		"@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
 		"@emotion/utils": "^1.2.1",
 		"@emotion/weak-memoize": "^0.3.1",
@@ -2765,7 +2762,7 @@ var pkg = {
 	},
 	devDependencies: {
 		"@definitelytyped/dtslint": "0.0.112",
-		"@emotion/css": "11.11.0",
+		"@emotion/css": "11.11.2",
 		"@emotion/css-prettifier": "1.1.3",
 		"@emotion/server": "11.11.0",
 		"@emotion/styled": "11.11.0",
@@ -3126,31 +3123,31 @@ function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
 }
 
-function _iterableToArrayLimit(arr, i) {
-  var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
-  if (null != _i) {
-    var _s,
-      _e,
-      _x,
-      _r,
-      _arr = [],
-      _n = !0,
-      _d = !1;
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = !0,
+      o = !1;
     try {
-      if (_x = (_i = _i.call(arr)).next, 0 === i) {
-        if (Object(_i) !== _i) return;
-        _n = !1;
-      } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
-    } catch (err) {
-      _d = !0, _e = err;
+      if (i = (t = t.call(r)).next, 0 === l) {
+        if (Object(t) !== t) return;
+        f = !1;
+      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = !0, n = r;
     } finally {
       try {
-        if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return;
+        if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
       } finally {
-        if (_d) throw _e;
+        if (o) throw n;
       }
     }
-    return _arr;
+    return a;
   }
 }
 

package/dist/css/components/Avatar/Avatar.css

@@ -14,7 +14,7 @@
       bottom: 0;
     }
   }
-  &__dropdown {
+  div&__dropdown {
     margin: 10px 0 0 0;
     position: absolute;
     left: 0;

package/dist/css/components/Badge/Badge.css

@@ -14,7 +14,7 @@
       );
       background-size: 200%;
       animation: badge-skeleton 3s infinite linear;
-      ^^^^&.text {
+      & .text {
         color: transparent;
       }
     }

package/dist/css/components/Checkbox/Checkbox.css

@@ -2,7 +2,8 @@
   display: grid;
   grid-template-columns: auto 1fr;
   grid-template-rows: auto auto;
-  column-gap: 4px;
+  column-gap: var(--checkbox-column-gap, 4px);
+  row-gap: var(--checkbox-row-gap, 0);
   &__item {
     min-width: 16px;
     min-height: 16px;

package/dist/css/components/DatePicker/DatePicker.css

@@ -1113,7 +1113,7 @@
 .datepicker {
   width: 100%;
   border-radius: var(--date-picker-day-border-radius);
-  ^^^^^& .input {
+  & .input {
     border-radius: var(--date-picker-day-border-radius);
   }
 }

package/dist/css/components/Menu/Menu.css

@@ -5,9 +5,9 @@
 }
 .menu {
   &_columns {
-    @each $val in 1,2,3,4,5,6,7,8,9,10 {
+    @each $val in 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 {
       &_$(val) {
-        & ^^^& {
+        & .menu {
           display: block;
           & ^^^&__wrapper {
             display: grid;
@@ -54,3 +54,4 @@
     }
   }
 }
+@improt './css/menu_type_border.css';

package/dist/css/components/MenuItem/MenuItem.css

@@ -34,6 +34,32 @@
   }
 }
 
+.menu-item {
+  &_set {
+    &_filter {
+      cursor: pointer;
+      padding: var(--menu-item-set-filter-padding, 0);
+      color: var(--color-surface-text-primary);
+      &:not(:last-child) {
+        border-right: var(--menu-item-set-filter-border-right: initial);
+      }
+      &_active {
+        & span {
+          color: var(--menu-item-set-filter-active-color, initial);
+        }
+      }
+    }
+  }
+}
+
+.menu-item {
+  &_set {
+    &_subitem {
+      transform: translate(var(--menu-item-set-subitem-padding-left, 32px), 0);
+    }
+  }
+}
+
 .menu-item {
   &_shape {
     &_rounded {