@salutejs/plasma-new-hope 0.88.0-canary.1223.9398061354.0 → 0.88.0-canary.1224.9413433725.0

package/styled-components/cjs/components/Range/Range.js

@@ -15,7 +15,7 @@ var _utils2 = /*#__PURE__*/require("./utils");
 var _Range = /*#__PURE__*/require("./Range.styles");
 var _Range2 = /*#__PURE__*/require("./Range.tokens");
 var _StyledDivider;
-var _excluded = ["label", "leftHelper", "contentLeft", "contentRight", "view", "size", "readOnly", "disabled", "dividerVariant", "dividerIcon", "firstValue", "secondValue", "firstValueError", "secondValueError", "firstValueSuccess", "secondValueSuccess", "firstPlaceholder", "secondPlaceholder", "firstTextfieldContentLeft", "firstTextfieldContentRight", "secondTextfieldContentLeft", "secondTextfieldContentRight", "firstTextfieldTextBefore", "secondTextfieldTextBefore", "firstTextfieldTextAfter", "secondTextfieldTextAfter", "onChangeFirstValue", "onChangeSecondValue", "onSearchFirstValue", "onSearchSecondValue", "onFocusFirstTextfield", "onFocusSecondTextfield", "onBlurFirstTextfield", "onBlurSecondTextfield"];
+var _excluded = ["label", "leftHelper", "contentLeft", "contentRight", "view", "size", "readOnly", "disabled", "dividerVariant", "dividerIcon", "firstValue", "secondValue", "firstValueError", "secondValueError", "firstValueSuccess", "secondValueSuccess", "firstPlaceholder", "secondPlaceholder", "firstTextfieldContentLeft", "firstTextfieldContentRight", "secondTextfieldContentLeft", "secondTextfieldContentRight", "firstTextfieldTextBefore", "secondTextfieldTextBefore", "firstTextfieldTextAfter", "secondTextfieldTextAfter", "isOpenFirst", "onToggleFirst", "firstInputPopoverContent", "isOpenSecond", "onToggleSecond", "secondInputPopoverContent", "offset", "placement", "closeOnOverlayClick", "onChangeFirstValue", "onChangeSecondValue", "onSearchFirstValue", "onSearchSecondValue", "onFocusFirstTextfield", "onFocusSecondTextfield", "onBlurFirstTextfield", "onBlurSecondTextfield"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -53,6 +53,15 @@ var rangeRoot = exports.rangeRoot = function rangeRoot(Root) {
       secondTextfieldTextBefore = _ref.secondTextfieldTextBefore,
       firstTextfieldTextAfter = _ref.firstTextfieldTextAfter,
       secondTextfieldTextAfter = _ref.secondTextfieldTextAfter,
+      isOpenFirst = _ref.isOpenFirst,
+      onToggleFirst = _ref.onToggleFirst,
+      firstInputPopoverContent = _ref.firstInputPopoverContent,
+      isOpenSecond = _ref.isOpenSecond,
+      onToggleSecond = _ref.onToggleSecond,
+      secondInputPopoverContent = _ref.secondInputPopoverContent,
+      offset = _ref.offset,
+      placement = _ref.placement,
+      closeOnOverlayClick = _ref.closeOnOverlayClick,
       onChangeFirstValue = _ref.onChangeFirstValue,
       onChangeSecondValue = _ref.onChangeSecondValue,
       onSearchFirstValue = _ref.onSearchFirstValue,
@@ -62,6 +71,9 @@ var rangeRoot = exports.rangeRoot = function rangeRoot(Root) {
       onBlurFirstTextfield = _ref.onBlurFirstTextfield,
       onBlurSecondTextfield = _ref.onBlurSecondTextfield,
       rest = _objectWithoutProperties(_ref, _excluded);
+    var rangeRef = (0, _react.useRef)(null);
+    var firstTextFieldRef = (0, _react.useRef)(null);
+    var secondTextFieldRef = (0, _react.useRef)(null);
     var rangeErrorClass = firstValueError && secondValueError ? _Range2.classes.rangeError : undefined;
     var firstValueErrorClass = !rangeErrorClass && firstValueError ? _Range2.classes.rangeValueError : undefined;
     var secondValueErrorClass = !rangeErrorClass && secondValueError ? _Range2.classes.rangeValueError : undefined;
@@ -72,6 +84,16 @@ var rangeRoot = exports.rangeRoot = function rangeRoot(Root) {
     var handleChangeSecondValue = (0, _utils2.getChangeHandler)(onChangeSecondValue, disabled, readOnly);
     var handleSearchFirstValue = (0, _utils2.getSearchHandler)(onSearchFirstValue, disabled, readOnly);
     var handleSearchSecondValue = (0, _utils2.getSearchHandler)(onSearchSecondValue, disabled, readOnly);
+    (0, _react.useImperativeHandle)(ref, function () {
+      return {
+        firstTextField: function firstTextField() {
+          return firstTextFieldRef;
+        },
+        secondTextField: function secondTextField() {
+          return secondTextFieldRef;
+        }
+      };
+    }, [firstTextFieldRef, secondTextFieldRef]);
     var Divider = (0, _react.useMemo)(function () {
       if (dividerVariant === 'none') {
         return null;
@@ -82,42 +104,66 @@ var rangeRoot = exports.rangeRoot = function rangeRoot(Root) {
       return _StyledDivider2 || (_StyledDivider2 = /*#__PURE__*/_react["default"].createElement(_Range.StyledDivider, null, dividerIcon));
     }, [dividerVariant, dividerIcon]);
     return /*#__PURE__*/_react["default"].createElement(Root, _extends({
+      ref: rangeRef,
       view: view,
       size: size,
       disabled: disabled,
-      readOnly: !disabled && readOnly,
-      ref: ref
+      readOnly: !disabled && readOnly
     }, rest), label && /*#__PURE__*/_react["default"].createElement(_Range.StyledLabel, null, label), /*#__PURE__*/_react["default"].createElement(_Range.ContentWrapper, {
       className: (0, _utils.cx)(rangeErrorClass, rangeSuccessClass)
-    }, contentLeft && /*#__PURE__*/_react["default"].createElement(_Range.StyledContentLeft, null, contentLeft), /*#__PURE__*/_react["default"].createElement(_Range.StyledInput, {
-      className: (0, _utils.cx)(firstValueErrorClass, firstValueSuccessClass),
-      value: firstValue,
-      readOnly: readOnly,
-      disabled: disabled,
-      placeholder: firstPlaceholder,
-      contentLeft: firstTextfieldContentLeft,
-      contentRight: firstTextfieldContentRight,
-      textBefore: firstTextfieldTextBefore,
-      textAfter: firstTextfieldTextAfter,
-      onChange: handleChangeFirstValue,
-      onSearch: handleSearchFirstValue,
-      onFocus: onFocusFirstTextfield,
-      onBlur: onBlurFirstTextfield
-    }), Divider, /*#__PURE__*/_react["default"].createElement(_Range.StyledInput, {
-      className: (0, _utils.cx)(secondValueErrorClass, secondValueSuccessClass),
-      value: secondValue,
-      readOnly: readOnly,
-      disabled: disabled,
-      placeholder: secondPlaceholder,
-      contentLeft: secondTextfieldContentLeft,
-      contentRight: secondTextfieldContentRight,
-      textBefore: secondTextfieldTextBefore,
-      textAfter: secondTextfieldTextAfter,
-      onChange: handleChangeSecondValue,
-      onSearch: handleSearchSecondValue,
-      onFocus: onFocusSecondTextfield,
-      onBlur: onBlurSecondTextfield
-    }), contentRight && /*#__PURE__*/_react["default"].createElement(_Range.StyledContentRight, null, contentRight)), leftHelper && /*#__PURE__*/_react["default"].createElement(_Range.LeftHelper, null, leftHelper));
+    }, contentLeft && /*#__PURE__*/_react["default"].createElement(_Range.StyledContentLeft, null, contentLeft), /*#__PURE__*/_react["default"].createElement(_Range.StyledPopover, {
+      isOpen: isOpenFirst,
+      usePortal: false,
+      onToggle: onToggleFirst,
+      offset: offset,
+      placement: (0, _utils.getPlacements)(placement),
+      trigger: "click",
+      closeOnOverlayClick: closeOnOverlayClick,
+      isFocusTrapped: false,
+      target: /*#__PURE__*/_react["default"].createElement(_Range.StyledInput, {
+        ref: firstTextFieldRef,
+        className: (0, _utils.cx)(firstValueErrorClass, firstValueSuccessClass),
+        value: firstValue,
+        readOnly: readOnly,
+        disabled: disabled,
+        placeholder: firstPlaceholder,
+        contentLeft: firstTextfieldContentLeft,
+        contentRight: firstTextfieldContentRight,
+        textBefore: firstTextfieldTextBefore,
+        textAfter: firstTextfieldTextAfter,
+        onChange: handleChangeFirstValue,
+        onSearch: handleSearchFirstValue,
+        onFocus: onFocusFirstTextfield,
+        onBlur: onBlurFirstTextfield
+      }),
+      preventOverflow: false
+    }, firstInputPopoverContent), Divider, /*#__PURE__*/_react["default"].createElement(_Range.StyledPopover, {
+      isOpen: isOpenSecond,
+      usePortal: false,
+      onToggle: onToggleSecond,
+      offset: offset,
+      placement: (0, _utils.getPlacements)(placement),
+      trigger: "click",
+      closeOnOverlayClick: closeOnOverlayClick,
+      isFocusTrapped: false,
+      target: /*#__PURE__*/_react["default"].createElement(_Range.StyledInput, {
+        ref: secondTextFieldRef,
+        className: (0, _utils.cx)(secondValueErrorClass, secondValueSuccessClass),
+        value: secondValue,
+        readOnly: readOnly,
+        disabled: disabled,
+        placeholder: secondPlaceholder,
+        contentLeft: secondTextfieldContentLeft,
+        contentRight: secondTextfieldContentRight,
+        textBefore: secondTextfieldTextBefore,
+        textAfter: secondTextfieldTextAfter,
+        onChange: handleChangeSecondValue,
+        onSearch: handleSearchSecondValue,
+        onFocus: onFocusSecondTextfield,
+        onBlur: onBlurSecondTextfield
+      }),
+      preventOverflow: false
+    }, secondInputPopoverContent), contentRight && /*#__PURE__*/_react["default"].createElement(_Range.StyledContentRight, null, contentRight)), leftHelper && /*#__PURE__*/_react["default"].createElement(_Range.LeftHelper, null, leftHelper));
   });
 };
 var rangeConfig = exports.rangeConfig = {

package/styled-components/cjs/components/Range/Range.styles.js

@@ -4,36 +4,42 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.base = exports.StyledLabel = exports.StyledInput = exports.StyledDivider = exports.StyledContentRight = exports.StyledContentLeft = exports.LeftHelper = exports.ContentWrapper = void 0;
+exports.base = exports.StyledPopover = exports.StyledLabel = exports.StyledInput = exports.StyledDivider = exports.StyledContentRight = exports.StyledContentLeft = exports.LeftHelper = exports.ContentWrapper = void 0;
 var _styledComponents = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("styled-components"));
 var _engines = /*#__PURE__*/require("../../engines");
 var _TextField = /*#__PURE__*/require("../TextField");
+var _Popover = /*#__PURE__*/require("../Popover");
 var _Range = /*#__PURE__*/require("./Range.tokens");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_TextField.textFieldConfig);
 var TextField = /*#__PURE__*/(0, _engines.component)(mergedConfig);
+var mergedPopoverConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Popover.popoverConfig);
+var Popover = /*#__PURE__*/(0, _engines.component)(mergedPopoverConfig);
+var StyledPopover = exports.StyledPopover = /*#__PURE__*/(0, _styledComponents["default"])(Popover).withConfig({
+  componentId: "plasma-new-hope__sc-xpkrak-0"
+})([""]);
 
 // NOTE: переопределение токенов TextField
 var StyledInput = exports.StyledInput = /*#__PURE__*/(0, _styledComponents["default"])(TextField).withConfig({
-  componentId: "plasma-new-hope__sc-xpkrak-0"
-})(["flex:1;", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");&.", "{", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");}&.", "{", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");}"], _TextField.textFieldTokens.color, _Range.tokens.textFieldColor, _TextField.textFieldTokens.placeholderColor, _Range.tokens.textFieldPlaceholderColor, _TextField.textFieldTokens.caretColor, _Range.tokens.textFieldCaretColor, _TextField.textFieldTokens.focusColor, _Range.tokens.textFieldFocusColor, _TextField.textFieldTokens.backgroundColor, _Range.tokens.textFieldBackgroundColor, _TextField.textFieldTokens.backgroundColorHover, _Range.tokens.textFieldBackgroundColorHover, _TextField.textFieldTokens.backgroundColorFocus, _Range.tokens.textFieldBackgroundColorFocus, _TextField.textFieldTokens.borderColor, _Range.tokens.textFieldBorderColor, _TextField.textFieldTokens.borderColorHover, _Range.tokens.textFieldBorderColorHover, _TextField.textFieldTokens.borderColorFocus, _Range.tokens.textFieldBorderColorFocus, _TextField.textFieldTokens.colorReadOnly, _Range.tokens.textFieldColorReadOnly, _TextField.textFieldTokens.backgroundColorReadOnly, _Range.tokens.textFieldBackgroundColorReadOnly, _TextField.textFieldTokens.borderColorReadOnly, _Range.tokens.textFieldBorderColorReadOnly, _TextField.textFieldTokens.placeholderColorReadOnly, _Range.tokens.textFieldPlaceholderColorReadOnly, _TextField.textFieldTokens.height, _Range.tokens.textFieldHeight, _TextField.textFieldTokens.borderWidth, _Range.tokens.textFieldBorderWidth, _TextField.textFieldTokens.borderRadius, _Range.tokens.textFieldBorderRadius, _TextField.textFieldTokens.padding, _Range.tokens.textFieldPadding, _TextField.textFieldTokens.leftContentMargin, _Range.tokens.textFieldLeftContentMargin, _TextField.textFieldTokens.rightContentMargin, _Range.tokens.textFieldRightContentMargin, _TextField.textFieldTokens.fontFamily, _Range.tokens.textFieldFontFamily, _TextField.textFieldTokens.fontSize, _Range.tokens.textFieldFontSize, _TextField.textFieldTokens.fontStyle, _Range.tokens.textFieldFontStyle, _TextField.textFieldTokens.fontWeight, _Range.tokens.textFieldFontWeight, _TextField.textFieldTokens.letterSpacing, _Range.tokens.textFieldLetterSpacing, _TextField.textFieldTokens.lineHeight, _Range.tokens.textFieldLineHeight, _TextField.textFieldTokens.disabledOpacity, _Range.tokens.disabledOpacity, _TextField.textFieldTokens.textBeforeColor, _Range.tokens.textFieldTextBeforeColor, _TextField.textFieldTokens.textAfterColor, _Range.tokens.textFieldTextAfterColor, _TextField.textFieldTokens.textBeforeMargin, _Range.tokens.textFieldTextBeforeMargin, _TextField.textFieldTokens.textAfterMargin, _Range.tokens.textFieldTextAfterMargin, _Range.classes.rangeValueError, _TextField.textFieldTokens.backgroundColor, _Range.tokens.textFieldBackgroundErrorColor, _TextField.textFieldTokens.backgroundColorHover, _Range.tokens.textFieldBackgroundErrorColorHover, _TextField.textFieldTokens.backgroundColorFocus, _Range.tokens.textFieldBackgroundErrorColorFocus, _TextField.textFieldTokens.borderColor, _Range.tokens.textFieldBorderColorError, _TextField.textFieldTokens.borderColorHover, _Range.tokens.textFieldBorderColorErrorHover, _TextField.textFieldTokens.borderColorFocus, _Range.tokens.textFieldBorderColorErrorFocus, _Range.classes.rangeValueSuccess, _TextField.textFieldTokens.backgroundColor, _Range.tokens.textFieldBackgroundSuccessColor, _TextField.textFieldTokens.backgroundColorHover, _Range.tokens.textFieldBackgroundSuccessColorHover, _TextField.textFieldTokens.backgroundColorFocus, _Range.tokens.textFieldBackgroundSuccessColorFocus, _TextField.textFieldTokens.borderColor, _Range.tokens.textFieldBorderColorSuccess, _TextField.textFieldTokens.borderColorHover, _Range.tokens.textFieldBorderColorSuccessHover, _TextField.textFieldTokens.borderColorFocus, _Range.tokens.textFieldBorderColorSuccessFocus);
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)([""]);
-var StyledLabel = exports.StyledLabel = /*#__PURE__*/_styledComponents["default"].label.withConfig({
   componentId: "plasma-new-hope__sc-xpkrak-1"
+})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");&.", "{", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");}&.", "{", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");}"], _TextField.textFieldTokens.color, _Range.tokens.textFieldColor, _TextField.textFieldTokens.placeholderColor, _Range.tokens.textFieldPlaceholderColor, _TextField.textFieldTokens.caretColor, _Range.tokens.textFieldCaretColor, _TextField.textFieldTokens.focusColor, _Range.tokens.textFieldFocusColor, _TextField.textFieldTokens.backgroundColor, _Range.tokens.textFieldBackgroundColor, _TextField.textFieldTokens.backgroundColorHover, _Range.tokens.textFieldBackgroundColorHover, _TextField.textFieldTokens.backgroundColorFocus, _Range.tokens.textFieldBackgroundColorFocus, _TextField.textFieldTokens.borderColor, _Range.tokens.textFieldBorderColor, _TextField.textFieldTokens.borderColorHover, _Range.tokens.textFieldBorderColorHover, _TextField.textFieldTokens.borderColorFocus, _Range.tokens.textFieldBorderColorFocus, _TextField.textFieldTokens.colorReadOnly, _Range.tokens.textFieldColorReadOnly, _TextField.textFieldTokens.backgroundColorReadOnly, _Range.tokens.textFieldBackgroundColorReadOnly, _TextField.textFieldTokens.borderColorReadOnly, _Range.tokens.textFieldBorderColorReadOnly, _TextField.textFieldTokens.placeholderColorReadOnly, _Range.tokens.textFieldPlaceholderColorReadOnly, _TextField.textFieldTokens.height, _Range.tokens.textFieldHeight, _TextField.textFieldTokens.borderWidth, _Range.tokens.textFieldBorderWidth, _TextField.textFieldTokens.borderRadius, _Range.tokens.textFieldBorderRadius, _TextField.textFieldTokens.padding, _Range.tokens.textFieldPadding, _TextField.textFieldTokens.leftContentMargin, _Range.tokens.textFieldLeftContentMargin, _TextField.textFieldTokens.rightContentMargin, _Range.tokens.textFieldRightContentMargin, _TextField.textFieldTokens.fontFamily, _Range.tokens.textFieldFontFamily, _TextField.textFieldTokens.fontSize, _Range.tokens.textFieldFontSize, _TextField.textFieldTokens.fontStyle, _Range.tokens.textFieldFontStyle, _TextField.textFieldTokens.fontWeight, _Range.tokens.textFieldFontWeight, _TextField.textFieldTokens.letterSpacing, _Range.tokens.textFieldLetterSpacing, _TextField.textFieldTokens.lineHeight, _Range.tokens.textFieldLineHeight, _TextField.textFieldTokens.disabledOpacity, _Range.tokens.disabledOpacity, _TextField.textFieldTokens.textBeforeColor, _Range.tokens.textFieldTextBeforeColor, _TextField.textFieldTokens.textAfterColor, _Range.tokens.textFieldTextAfterColor, _TextField.textFieldTokens.textBeforeMargin, _Range.tokens.textFieldTextBeforeMargin, _TextField.textFieldTokens.textAfterMargin, _Range.tokens.textFieldTextAfterMargin, _Range.classes.rangeValueError, _TextField.textFieldTokens.backgroundColor, _Range.tokens.textFieldBackgroundErrorColor, _TextField.textFieldTokens.backgroundColorHover, _Range.tokens.textFieldBackgroundErrorColorHover, _TextField.textFieldTokens.backgroundColorFocus, _Range.tokens.textFieldBackgroundErrorColorFocus, _TextField.textFieldTokens.borderColor, _Range.tokens.textFieldBorderColorError, _TextField.textFieldTokens.borderColorHover, _Range.tokens.textFieldBorderColorErrorHover, _TextField.textFieldTokens.borderColorFocus, _Range.tokens.textFieldBorderColorErrorFocus, _Range.classes.rangeValueSuccess, _TextField.textFieldTokens.backgroundColor, _Range.tokens.textFieldBackgroundSuccessColor, _TextField.textFieldTokens.backgroundColorHover, _Range.tokens.textFieldBackgroundSuccessColorHover, _TextField.textFieldTokens.backgroundColorFocus, _Range.tokens.textFieldBackgroundSuccessColorFocus, _TextField.textFieldTokens.borderColor, _Range.tokens.textFieldBorderColorSuccess, _TextField.textFieldTokens.borderColorHover, _Range.tokens.textFieldBorderColorSuccessHover, _TextField.textFieldTokens.borderColorFocus, _Range.tokens.textFieldBorderColorSuccessFocus);
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)([".", "{display:block;flex:1;}.", "{display:flex;flex-direction:column;}"], /*#__PURE__*/String(_Popover.popoverClasses.wrapper), /*#__PURE__*/String(_Popover.popoverClasses.target));
+var StyledLabel = exports.StyledLabel = /*#__PURE__*/_styledComponents["default"].label.withConfig({
+  componentId: "plasma-new-hope__sc-xpkrak-2"
 })([""]);
 var LeftHelper = exports.LeftHelper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  componentId: "plasma-new-hope__sc-xpkrak-2"
+  componentId: "plasma-new-hope__sc-xpkrak-3"
 })([""]);
 var ContentWrapper = exports.ContentWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  componentId: "plasma-new-hope__sc-xpkrak-3"
+  componentId: "plasma-new-hope__sc-xpkrak-4"
 })(["display:flex;align-items:center;"]);
 var StyledDivider = exports.StyledDivider = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  componentId: "plasma-new-hope__sc-xpkrak-4"
+  componentId: "plasma-new-hope__sc-xpkrak-5"
 })([""]);
 var StyledContentLeft = exports.StyledContentLeft = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  componentId: "plasma-new-hope__sc-xpkrak-5"
+  componentId: "plasma-new-hope__sc-xpkrak-6"
 })([""]);
 var StyledContentRight = exports.StyledContentRight = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  componentId: "plasma-new-hope__sc-xpkrak-6"
+  componentId: "plasma-new-hope__sc-xpkrak-7"
 })([""]);

package/styled-components/cjs/components/Select/Select.js

@@ -8,13 +8,12 @@ exports.selectRoot = exports.selectConfig = void 0;
 var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
 var _plasmaCore = /*#__PURE__*/require("@salutejs/plasma-core");
 var _utils = /*#__PURE__*/require("../../utils");
-var _utils2 = /*#__PURE__*/require("../Dropdown/utils");
 var _hooks = /*#__PURE__*/require("../../hooks");
 var _base = /*#__PURE__*/require("./variations/_target/base");
 var _base2 = /*#__PURE__*/require("./variations/_view/base");
 var _base3 = /*#__PURE__*/require("./variations/_size/base");
 var _ui = /*#__PURE__*/require("./ui");
-var _utils3 = /*#__PURE__*/require("./utils");
+var _utils2 = /*#__PURE__*/require("./utils");
 var _Select = /*#__PURE__*/require("./Select.tokens");
 var _Select2 = /*#__PURE__*/require("./Select.styles");
 var _hooks2 = /*#__PURE__*/require("./hooks");
@@ -116,11 +115,11 @@ var selectRoot = exports.selectRoot = function selectRoot(Root) {
       var newValue = item.dataset.value;
       if (rest.valueType === 'multiple') {
         var _rest$onChangeValue;
-        var _newSelected = (0, _utils3.getNewSelected)(rest.value, newValue, rest.valueType);
+        var _newSelected = (0, _utils2.getNewSelected)(rest.value, newValue, rest.valueType);
         (_rest$onChangeValue = rest.onChangeValue) === null || _rest$onChangeValue === void 0 || _rest$onChangeValue.call(rest, _newSelected);
         return;
       }
-      var newSelected = (0, _utils3.getNewSelected)(rest.value, newValue, 'single');
+      var newSelected = (0, _utils2.getNewSelected)(rest.value, newValue, 'single');
       (_rest$onChangeValue2 = rest.onChangeValue) === null || _rest$onChangeValue2 === void 0 || _rest$onChangeValue2.call(rest, newSelected);
       onInnerToggle === null || onInnerToggle === void 0 || onInnerToggle(false, event);
     }, [rest.value, rest.valueType, rest.onChangeValue, onToggle, onInnerToggle]);
@@ -136,7 +135,7 @@ var selectRoot = exports.selectRoot = function selectRoot(Root) {
         return;
       }
       var newValue = event.target.value;
-      var newSelected = (0, _utils3.getNewSelected)(rest.value, newValue, 'native');
+      var newSelected = (0, _utils2.getNewSelected)(rest.value, newValue, 'native');
       (_rest$onChangeValue3 = rest.onChangeValue) === null || _rest$onChangeValue3 === void 0 || _rest$onChangeValue3.call(rest, newSelected);
     }, [rest.value, rest.valueType, rest.onChangeValue]);
     var onChangeChipValue = (0, _react.useCallback)(function (newValue) {
@@ -161,13 +160,13 @@ var selectRoot = exports.selectRoot = function selectRoot(Root) {
       return _react.Children.toArray(children);
     }, [children]);
     var childrenMemo = (0, _react.useMemo)(function () {
-      return (0, _utils3.getChildren)(childrenArray, {
+      return (0, _utils2.getChildren)(childrenArray, {
         onClick: onClickChildrenItem,
         childrenRefs: itemsRefs
       }, value);
     }, [childrenArray, value, innerOpened]);
     var values = (0, _react.useMemo)(function () {
-      return (0, _utils3.getValues)(childrenArray, value);
+      return (0, _utils2.getValues)(childrenArray, value);
     }, [childrenArray, value]);
     return /*#__PURE__*/_react["default"].createElement(_Select2.StyledRoot, {
       ref: selectRef
@@ -208,7 +207,7 @@ var selectRoot = exports.selectRoot = function selectRoot(Root) {
       id: innerId,
       offset: offset,
       frame: frame,
-      placement: (0, _utils2.getPlacements)(placement),
+      placement: (0, _utils.getPlacements)(placement),
       trigger: "click",
       usePortal: usePortal,
       selectWidth: dynamicTargetWidth,

package/styled-components/cjs/components/TextField/TextField.tokens.js

@@ -26,7 +26,7 @@ var tokens = exports.tokens = {
   caretColor: '--plasma-textfield__caret-color',
   placeholderColor: '--plasma-textfield__placeholder-color',
   height: '--plasma-textfield-height',
-  borderWidth: '--plasmas-textfield-border-width',
+  borderWidth: '--plasma-textfield-border-width',
   borderRadius: '--plasma-textfield-border-radius',
   /** Отступ от границы ТextField */
   padding: '--plasma-textfield-padding',

package/styled-components/cjs/components/TextField/variations/_size/base.js

@@ -7,4 +7,4 @@ exports.base = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
 var _TextField = /*#__PURE__*/require("../../TextField.tokens");
 var _TextField2 = /*#__PURE__*/require("../../TextField.styles");
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{height:var(", ");border-radius:var(", ");padding:var(", ");&.", "{padding-top:var(", ");padding-bottom:var(", ");}&.", "{padding-left:var(", ");}&.", "{padding-right:var(", ");}}", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{margin-top:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", ",", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{margin:var(", ");}", "{margin:var(", ");}"], _TextField2.Input, _TextField.tokens.fontFamily, _TextField.tokens.fontSize, _TextField.tokens.fontStyle, _TextField.tokens.fontWeight, _TextField.tokens.letterSpacing, _TextField.tokens.lineHeight, _TextField2.InputWrapper, _TextField.tokens.height, _TextField.tokens.borderRadius, _TextField.tokens.padding, _TextField.classes.hasChips, _TextField.tokens.paddingWithChips, _TextField.tokens.paddingWithChips, _TextField.classes.hasEmptyContentLeft, _TextField.tokens.paddingWithChips, _TextField.classes.hasEmptyContentRight, _TextField.tokens.paddingWithChips, _TextField2.Label, _TextField.tokens.labelFontFamily, _TextField.tokens.labelFontSize, _TextField.tokens.labelFontStyle, _TextField.tokens.labelFontWeight, _TextField.tokens.labelLetterSpacing, _TextField.tokens.labelLineHeight, _TextField2.LeftHelper, _TextField.tokens.leftHelperOffset, _TextField.tokens.leftHelperFontFamily, _TextField.tokens.leftHelperFontSize, _TextField.tokens.leftHelperFontStyle, _TextField.tokens.leftHelperFontWeight, _TextField.tokens.leftHelperLetterSpacing, _TextField.tokens.leftHelperLineHeight, _TextField2.StyledTextBefore, _TextField2.StyledTextAfter, _TextField.tokens.fontFamily, _TextField.tokens.fontSize, _TextField.tokens.fontStyle, _TextField.tokens.fontWeight, _TextField.tokens.letterSpacing, _TextField.tokens.lineHeight, _TextField2.StyledTextBefore, _TextField.tokens.textBeforeMargin, _TextField2.StyledTextAfter, _TextField.tokens.textAfterMargin);
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["", "{width:100%;font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{height:var(", ");border-radius:var(", ");padding:var(", ");&.", "{padding-top:var(", ");padding-bottom:var(", ");}&.", "{padding-left:var(", ");}&.", "{padding-right:var(", ");}}", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{margin-top:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", ",", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{margin:var(", ");}", "{margin:var(", ");}"], _TextField2.Input, _TextField.tokens.fontFamily, _TextField.tokens.fontSize, _TextField.tokens.fontStyle, _TextField.tokens.fontWeight, _TextField.tokens.letterSpacing, _TextField.tokens.lineHeight, _TextField2.InputWrapper, _TextField.tokens.height, _TextField.tokens.borderRadius, _TextField.tokens.padding, _TextField.classes.hasChips, _TextField.tokens.paddingWithChips, _TextField.tokens.paddingWithChips, _TextField.classes.hasEmptyContentLeft, _TextField.tokens.paddingWithChips, _TextField.classes.hasEmptyContentRight, _TextField.tokens.paddingWithChips, _TextField2.Label, _TextField.tokens.labelFontFamily, _TextField.tokens.labelFontSize, _TextField.tokens.labelFontStyle, _TextField.tokens.labelFontWeight, _TextField.tokens.labelLetterSpacing, _TextField.tokens.labelLineHeight, _TextField2.LeftHelper, _TextField.tokens.leftHelperOffset, _TextField.tokens.leftHelperFontFamily, _TextField.tokens.leftHelperFontSize, _TextField.tokens.leftHelperFontStyle, _TextField.tokens.leftHelperFontWeight, _TextField.tokens.leftHelperLetterSpacing, _TextField.tokens.leftHelperLineHeight, _TextField2.StyledTextBefore, _TextField2.StyledTextAfter, _TextField.tokens.fontFamily, _TextField.tokens.fontSize, _TextField.tokens.fontStyle, _TextField.tokens.fontWeight, _TextField.tokens.letterSpacing, _TextField.tokens.lineHeight, _TextField2.StyledTextBefore, _TextField.tokens.textBeforeMargin, _TextField2.StyledTextAfter, _TextField.tokens.textAfterMargin);

package/styled-components/cjs/components/_Icon/Icon.assets/{Minus.js → DisclosureDownFill.js}

@@ -3,19 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Minus = void 0;
+exports.DisclosureDownFill = void 0;
 var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
 var _path;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-var Minus = exports.Minus = function Minus(props) {
+var DisclosureDownFill = exports.DisclosureDownFill = function DisclosureDownFill(props) {
   return /*#__PURE__*/_react["default"].createElement("svg", _extends({
     width: "100%",
     viewBox: "0 0 24 24",
     fill: "none"
   }, props), _path || (_path = /*#__PURE__*/_react["default"].createElement("path", {
-    id: "icon",
-    d: "M3.25 12C3.25 11.58 3.58 11.25 4 11.25L20 11.25C20.41 11.25 20.75 11.58 20.75 12C20.75 12.41 20.41 12.75 20 12.75L4 12.75C3.58 12.75 3.25 12.41 3.25 12Z",
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M17.1814 9.43661C17.059 9.17051 16.7929 9 16.5 9H7.50001C7.20711 9 6.94102 9.17051 6.81863 9.43661C6.69624 9.70271 6.73995 10.0157 6.93057 10.2381L11.4306 15.4881C11.5731 15.6543 11.7811 15.75 12 15.75C12.219 15.75 12.427 15.6543 12.5695 15.4881L17.0695 10.2381C17.2601 10.0157 17.3038 9.70271 17.1814 9.43661Z",
     fill: "currentColor"
   })));
 };

package/styled-components/cjs/components/_Icon/Icon.assets/DisclosureLeft.js

@@ -16,7 +16,7 @@ var DisclosureLeft = exports.DisclosureLeft = function DisclosureLeft(props) {
   }, props), _path || (_path = /*#__PURE__*/_react["default"].createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
-    d: "M14.117 8.707a1 1 0 10-1.414-1.414L7.996 12l4.707 4.707a1 1 0 001.414-1.414L10.824 12l3.293-3.293z",
+    d: "M14.5309 6.96967C14.8238 7.26256 14.8238 7.73744 14.5309 8.03033L10.5613 12L14.5309 15.9697C14.8238 16.2626 14.8238 16.7374 14.5309 17.0303C14.238 17.3232 13.7632 17.3232 13.4703 17.0303L8.43994 12L13.4703 6.96967C13.7632 6.67678 14.238 6.67678 14.5309 6.96967Z",
     fill: "currentColor"
   })));
 };

package/styled-components/cjs/components/_Icon/Icon.assets/DisclosureRight.js

@@ -5,28 +5,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DisclosureRight = void 0;
 var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
-var _path, _path2;
+var _path;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 var DisclosureRight = exports.DisclosureRight = function DisclosureRight(props) {
-  if (props.size === 'xs') {
-    return /*#__PURE__*/_react["default"].createElement("svg", _extends({
-      width: "100%",
-      viewBox: "0 0 17 16",
-      fill: "none"
-    }, props), _path || (_path = /*#__PURE__*/_react["default"].createElement("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M9.883 4.707a1 1 0 011.414-1.414L16.004 8l-4.707 4.707a1 1 0 01-1.414-1.414L13.176 8 9.883 4.707z",
-      fill: "currentColor"
-    })));
-  }
   return /*#__PURE__*/_react["default"].createElement("svg", _extends({
     width: "100%",
     viewBox: "0 0 24 24",
     fill: "none"
-  }, props), _path2 || (_path2 = /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M9.883 8.707a1 1 0 011.414-1.414L16.004 12l-4.707 4.707a1 1 0 01-1.414-1.414L13.176 12 9.883 8.707z",
+  }, props), _path || (_path = /*#__PURE__*/_react["default"].createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M9.46967 6.96967C9.17678 7.26256 9.17678 7.73744 9.46967 8.03033L13.4393 12L9.46967 15.9697C9.17678 16.2626 9.17678 16.7374 9.46967 17.0303C9.76256 17.3232 10.2374 17.3232 10.5303 17.0303L15.5607 12L10.5303 6.96967C10.2374 6.67678 9.76256 6.67678 9.46967 6.96967Z",
     fill: "currentColor"
   })));
 };

package/styled-components/cjs/components/_Icon/Icons/{IconMinus.js → IconDisclosureDownFill.js}

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.IconMinus = void 0;
+exports.IconDisclosureDownFill = void 0;
 var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
-var _Minus = /*#__PURE__*/require("../Icon.assets/Minus");
+var _DisclosureDownFill = /*#__PURE__*/require("../Icon.assets/DisclosureDownFill");
 var _IconRoot = /*#__PURE__*/require("../IconRoot");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-var IconMinus = exports.IconMinus = function IconMinus(_ref) {
+var IconDisclosureDownFill = exports.IconDisclosureDownFill = function IconDisclosureDownFill(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 's' : _ref$size,
     color = _ref.color,
@@ -17,6 +17,6 @@ var IconMinus = exports.IconMinus = function IconMinus(_ref) {
     className: className,
     size: size,
     color: color,
-    icon: _Minus.Minus
+    icon: _DisclosureDownFill.DisclosureDownFill
   });
 };

package/styled-components/cjs/components/_Icon/index.js

@@ -15,12 +15,6 @@ Object.defineProperty(exports, "IconChevronDown", {
     return _IconChevronDown.IconChevronDown;
   }
 });
-Object.defineProperty(exports, "IconChevronDownFill", {
-  enumerable: true,
-  get: function get() {
-    return _IconChevronDownFill.IconChevronDownFill;
-  }
-});
 Object.defineProperty(exports, "IconChevronLeft", {
   enumerable: true,
   get: function get() {
@@ -39,6 +33,12 @@ Object.defineProperty(exports, "IconCross", {
     return _IconCross.IconCross;
   }
 });
+Object.defineProperty(exports, "IconDisclosureDownFill", {
+  enumerable: true,
+  get: function get() {
+    return _IconDisclosureDownFill.IconDisclosureDownFill;
+  }
+});
 Object.defineProperty(exports, "IconDisclosureLeft", {
   enumerable: true,
   get: function get() {
@@ -63,20 +63,13 @@ Object.defineProperty(exports, "IconMic", {
     return _IconMic.IconMic;
   }
 });
-Object.defineProperty(exports, "IconMinus", {
-  enumerable: true,
-  get: function get() {
-    return _IconMinus.IconMinus;
-  }
-});
 var _IconDisclosureLeft = /*#__PURE__*/require("./Icons/IconDisclosureLeft");
 var _IconDisclosureRight = /*#__PURE__*/require("./Icons/IconDisclosureRight");
+var _IconDisclosureDownFill = /*#__PURE__*/require("./Icons/IconDisclosureDownFill");
 var _IconMic = /*#__PURE__*/require("./Icons/IconMic");
 var _IconChevronLeft = /*#__PURE__*/require("./Icons/IconChevronLeft");
 var _IconChevronDoubleLeft = /*#__PURE__*/require("./Icons/IconChevronDoubleLeft");
 var _IconChevronDown = /*#__PURE__*/require("./Icons/IconChevronDown");
-var _IconChevronDownFill = /*#__PURE__*/require("./Icons/IconChevronDownFill");
 var _IconClose = /*#__PURE__*/require("./Icons/IconClose");
 var _IconCross = /*#__PURE__*/require("./Icons/IconCross");
-var _IconDone = /*#__PURE__*/require("./Icons/IconDone");
-var _IconMinus = /*#__PURE__*/require("./Icons/IconMinus");
+var _IconDone = /*#__PURE__*/require("./Icons/IconDone");

package/styled-components/cjs/examples/plasma_b2c/components/Calendar/Calendar.stories.tsx

@@ -26,6 +26,12 @@ const meta: Meta<typeof CalendarBase> = {
                 type: 'date',
             },
         },
+        size: {
+            options: ['l', 'm', 's', 'xs'],
+            control: {
+                type: 'inline-radio',
+            },
+        },
     },
 };
 
@@ -79,7 +85,7 @@ const baseEvents = [
 ];
 
 const StoryDefault = (args: CalendarProps) => {
-    const { isRange, isDouble, min, max, date, includeEdgeDates } = args;
+    const { isRange, isDouble, min, max, date, includeEdgeDates, size } = args;
     const [value, setValue] = useState(new Date(2023, 10, 16));
     const [valueRange, setValueRange] = useState<[Date, Date?]>([new Date(2023, 10, 16), new Date(2023, 10, 23)]);
 
@@ -102,6 +108,7 @@ const StoryDefault = (args: CalendarProps) => {
 
     return (
         <Calendar
+            size={size}
             isRange={isRange}
             isDouble={isDouble}
             date={date}
@@ -123,12 +130,13 @@ export const Default: StoryObj<CalendarProps> = {
         isDouble: false,
         isRange: false,
         includeEdgeDates: false,
+        size: 'm',
     },
     render: (args) => <StoryDefault {...args} />,
 };
 
 const StoryBase = (args: CalendarBaseProps) => {
-    const { min, max, type, includeEdgeDates } = args;
+    const { min, max, type, includeEdgeDates, size } = args;
     const [value, setValue] = useState(new Date(2023, 10, 16));
 
     const handleOnChange = useCallback((newValue: Date) => {
@@ -147,6 +155,7 @@ const StoryBase = (args: CalendarBaseProps) => {
 
     return (
         <CalendarBase
+            size={size}
             value={value}
             eventList={eventsRange}
             disabledList={disabledDays}
@@ -169,6 +178,7 @@ export const Base: StoryObj<CalendarBaseProps> = {
         },
     },
     args: {
+        size: 'm',
         min: new Date(2023, 10, 1),
         max: new Date(2023, 11, 24),
         includeEdgeDates: false,
@@ -178,7 +188,7 @@ export const Base: StoryObj<CalendarBaseProps> = {
 };
 
 const StoryDouble = (args: CalendarDoubleProps) => {
-    const { min, max, includeEdgeDates } = args;
+    const { min, max, includeEdgeDates, size } = args;
     const [value, setValue] = useState(new Date(2023, 10, 16));
     const handleOnChange = useCallback((newValue: Date) => {
         setValue(newValue);
@@ -196,6 +206,7 @@ const StoryDouble = (args: CalendarDoubleProps) => {
 
     return (
         <CalendarDouble
+            size={size}
             value={value}
             eventList={eventsRange}
             disabledList={disabledDays}
@@ -209,6 +220,7 @@ const StoryDouble = (args: CalendarDoubleProps) => {
 
 export const Double: StoryObj<CalendarDoubleProps> = {
     args: {
+        size: 'm',
         min: new Date(2023, 10, 1),
         max: new Date(2023, 11, 24),
         includeEdgeDates: false,
@@ -217,7 +229,7 @@ export const Double: StoryObj<CalendarDoubleProps> = {
 };
 
 const StoryRange = (args: CalendarBaseRangeProps) => {
-    const { min, max, type, includeEdgeDates } = args;
+    const { min, max, type, includeEdgeDates, size } = args;
     const [values, setValue] = useState<[Date, Date?]>([new Date(2023, 10, 15), new Date(2023, 10, 24)]);
     const handleOnChange = useCallback((newValue: [Date, Date?]) => {
         onChangeValue(newValue);
@@ -238,6 +250,7 @@ const StoryRange = (args: CalendarBaseRangeProps) => {
 
     return (
         <CalendarBaseRange
+            size={size}
             value={values}
             eventList={eventList}
             disabledList={disabledList}
@@ -260,6 +273,7 @@ export const Range: StoryObj<CalendarBaseRangeProps> = {
         },
     },
     args: {
+        size: 'm',
         min: new Date(2023, 10, 1),
         max: new Date(2023, 11, 24),
         includeEdgeDates: false,
@@ -269,7 +283,7 @@ export const Range: StoryObj<CalendarBaseRangeProps> = {
 };
 
 const StoryRangeDouble = (args: CalendarBaseRangeProps) => {
-    const { min, max, includeEdgeDates } = args;
+    const { min, max, includeEdgeDates, size } = args;
     const [values, setValue] = useState<[Date, Date?]>([new Date(2023, 10, 15), new Date(2023, 10, 24)]);
     const handleOnChange = useCallback((newValue: [Date, Date?]) => {
         onChangeValue(newValue);
@@ -290,6 +304,7 @@ const StoryRangeDouble = (args: CalendarBaseRangeProps) => {
 
     return (
         <CalendarDoubleRange
+            size={size}
             value={values}
             eventList={eventList}
             disabledList={disabledList}
@@ -303,6 +318,7 @@ const StoryRangeDouble = (args: CalendarBaseRangeProps) => {
 
 export const RangeDouble: StoryObj<CalendarBaseRangeProps> = {
     args: {
+        size: 'm',
         min: new Date(2023, 10, 1),
         max: new Date(2023, 11, 24),
         includeEdgeDates: false,
@@ -311,7 +327,7 @@ export const RangeDouble: StoryObj<CalendarBaseRangeProps> = {
 };
 
 const StoryWithPopover = (args: CalendarProps) => {
-    const { isDouble, min, max, includeEdgeDates } = args;
+    const { isDouble, min, max, includeEdgeDates, size } = args;
     const [isOpen, setIsOpen] = useState(false);
     const [textValue, setTextValue] = useState('2023-10-16');
     const [value, setValue] = useState(new Date(textValue));
@@ -345,6 +361,7 @@ const StoryWithPopover = (args: CalendarProps) => {
             closeOnOverlayClick
         >
             <StyledCalendar
+                size={size}
                 value={value}
                 eventList={[...baseEvents, ...eventsRange]}
                 disabledList={disabledDays}
@@ -361,6 +378,7 @@ const StoryWithPopover = (args: CalendarProps) => {
 
 export const WithPopover: StoryObj<CalendarProps> = {
     args: {
+        size: 'm',
         min: new Date(2023, 9, 1),
         max: new Date(2023, 11, 24),
         isDouble: false,