@salutejs/plasma-new-hope 0.270.0-canary.1744.13385332397.0 → 0.270.0-canary.1757.13385858717.0

package/styled-components/cjs/components/Calendar/ui/CalendarQuarters/CalendarQuarters.js

@@ -41,13 +41,15 @@ var CalendarQuarters = exports.CalendarQuarters = function CalendarQuarters(_ref
     onHoverQuarter = _ref.onHoverQuarter,
     onSetSelected = _ref.onSetSelected,
     onKeyDown = _ref.onKeyDown;
+  var minDate = min ? new Date(min.getFullYear(), min.getMonth(), 1) : undefined;
+  var maxDate = max ? new Date(max.getFullYear(), max.getMonth() + 1, 0) : undefined;
   var _useQuarters = (0, _hooks.useQuarters)({
       date: currentDate,
       value: value,
       eventList: eventList,
       disabledList: disabledList,
-      min: min,
-      max: max
+      min: minDate,
+      max: maxDate
     }),
     _useQuarters2 = _slicedToArray(_useQuarters, 2),
     quarters = _useQuarters2[0],

package/styled-components/cjs/components/Calendar/ui/CalendarYears/CalendarYears.js

@@ -42,14 +42,16 @@ var CalendarYears = exports.CalendarYears = function CalendarYears(_ref) {
     onHoverYear = _ref.onHoverYear,
     onSetSelected = _ref.onSetSelected,
     onKeyDown = _ref.onKeyDown;
+  var minDate = min ? new Date(min.getFullYear(), 0, 1) : undefined;
+  var maxDate = max ? new Date(max.getFullYear(), 11, 31) : undefined;
   var _useYears = (0, _hooks.useYears)({
       date: currentDate,
       value: value,
       startYear: startYear,
       eventList: eventList,
       disabledList: disabledList,
-      min: min,
-      max: max
+      min: minDate,
+      max: maxDate
     }),
     _useYears2 = _slicedToArray(_useYears, 2),
     years = _useYears2[0],

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

@@ -100,11 +100,11 @@ const StoryDefault = (args: CalendarProps) => {
             isDouble={isDouble}
             date={date}
             value={(isRange ? valueRange : value) as Date & [Date, Date?]}
-            min={min}
-            max={max}
             includeEdgeDates={includeEdgeDates}
             locale={locale}
             onChangeValue={(isRange ? handleOnRangeChange : handleOnChange) as (value: Date | [Date, Date?]) => void}
+            min={min}
+            max={max}
         />
     );
 };
@@ -146,24 +146,24 @@ const StoryBase = (args: CalendarBaseProps & { displayDouble: boolean }) => {
             <CalendarDouble
                 size={size}
                 value={value}
-                min={min}
-                max={max}
                 includeEdgeDates={includeEdgeDates}
                 type={type}
                 locale={locale}
                 onChangeValue={handleOnChange}
+                min={min}
+                max={max}
                 {...rest}
             />
         ) : (
             <CalendarBase
                 size={size}
                 value={value}
-                min={min}
-                max={max}
                 includeEdgeDates={includeEdgeDates}
                 type={type}
                 locale={locale}
                 onChangeValue={handleOnChange}
+                min={min}
+                max={max}
                 {...rest}
             />
         );
@@ -233,24 +233,24 @@ const StoryRange = (args: CalendarBaseRangeProps & { displayDouble: boolean }) =
             <CalendarBaseRange
                 size={size}
                 value={values}
-                min={min}
-                max={max}
                 includeEdgeDates={includeEdgeDates}
                 type={type}
                 onChangeValue={handleOnChange}
                 locale={locale}
+                min={min}
+                max={max}
                 {...rest}
             />
         ) : (
             <CalendarDoubleRange
                 size={size}
                 value={values}
-                min={min}
-                max={max}
                 includeEdgeDates={includeEdgeDates}
                 type={type}
                 onChangeValue={handleOnChange}
                 locale={locale}
+                min={min}
+                max={max}
                 {...rest}
             />
         );

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

@@ -80,6 +80,8 @@ const StoryDefault = ({
     size,
     lang,
     format,
+    min,
+    max,
     ...rest
 }: StoryPropsDefault) => {
     const [isOpen, setIsOpen] = useState(false);
@@ -103,6 +105,8 @@ const StoryDefault = ({
             lang={lang}
             format={format}
             onCommitDate={() => setIsOpen(false)}
+            min={min}
+            max={max}
             {...rest}
         />
     );
@@ -188,6 +192,8 @@ const StoryRange = ({
     secondValueSuccess,
     size,
     lang,
+    min,
+    max,
     ...rest
 }: StoryPropsRange) => {
     const rangeRef = useRef<RangeInputRefs>(null);
@@ -240,6 +246,8 @@ const StoryRange = ({
                 onChangeSecondValue(e, currentValue);
             }}
             lang={lang}
+            min={min}
+            max={max}
             {...dividerIconProps}
             {...rest}
         />
@@ -306,6 +314,8 @@ const StoryDeferred = ({
     valueError,
     valueSuccess,
     size,
+    min,
+    max,
     ...rest
 }: StoryPropsDefault) => {
     const [isOpen, setIsOpen] = useState(false);
@@ -338,6 +348,8 @@ const StoryDeferred = ({
                     onChangeValue(e, currentValue);
                 }}
                 onCommitDate={() => setIsOpen(false)}
+                min={min}
+                max={max}
                 {...rest}
             />
         </>

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

@@ -69,11 +69,11 @@ const StoryDemo = ({ context }) => {
 
     return (
         <>
-            {Object.entries(groupedTokens).map(([category, subcategoties]) => (
+            {Object.entries(groupedTokens).map(([category, value]) => (
                 <CategoryContainer key={category}>
                     <Category>{category}</Category>
                     <Accordion view="clear" size="s" stretching="filled" defaultActiveEventKey={[0]}>
-                        {Object.entries(subcategoties).map(([subcategory, subcategoryTokens], index) => (
+                        {Object.entries(value).map(([subcategory, value2], index) => (
                             <StyledAccordionItem
                                 key={subcategory}
                                 eventKey={index}
@@ -85,37 +85,31 @@ const StoryDemo = ({ context }) => {
                                             <ColorCircle disableShadow />
                                             Color
                                         </ColumnTitle>
-                                        <ColumnTitle>Tone</ColumnTitle>
                                         <ColumnTitle>Opacity</ColumnTitle>
                                     </AccordionInfo>
                                 }
                             >
                                 <TokenInfoWrapper>
-                                    {Object.entries(subcategoryTokens).map(
-                                        ([token, { value, opacity, tone, colorName }]) => (
-                                            <AccordionInfo key={token}>
-                                                <TokenInfo className="copy" onClick={() => copyToClipboard(token)}>
-                                                    {token}
-                                                </TokenInfo>
-                                                <TokenInfo
-                                                    className="color copy"
-                                                    onClick={() => copyToClipboard(value, opacity?.alpha)}
-                                                >
-                                                    <ColorCircle background={value} />
-                                                    <div>
-                                                        {value.includes('gradient') ? 'Градиент' : colorName || value}
-                                                        {!colorName && opacity && (
-                                                            <OpacityPart>{opacity.alpha}</OpacityPart>
-                                                        )}
-                                                    </div>
-                                                </TokenInfo>
-                                                <TokenInfo className="no-interaction">
-                                                    {tone !== 'none' && tone}
-                                                </TokenInfo>
-                                                <TokenInfo className="no-interaction">{opacity?.parsedAlpha}</TokenInfo>
-                                            </AccordionInfo>
-                                        ),
-                                    )}
+                                    {Object.entries(value2).map(([token, { value: value3, opacity }]) => (
+                                        <AccordionInfo key={token}>
+                                            <TokenInfo className="copy" onClick={() => copyToClipboard(token)}>
+                                                {token}
+                                            </TokenInfo>
+                                            <TokenInfo
+                                                className="color copy"
+                                                onClick={() => copyToClipboard(value3, opacity?.alpha)}
+                                            >
+                                                <ColorCircle background={value3} />
+                                                <div>
+                                                    {value3.includes('gradient') ? 'Градиент' : value3}
+                                                    {opacity && <OpacityPart>{opacity.alpha}</OpacityPart>}
+                                                </div>
+                                            </TokenInfo>
+                                            {opacity && (
+                                                <TokenInfo className="opacity">{opacity.parsedAlpha}</TokenInfo>
+                                            )}
+                                        </AccordionInfo>
+                                    ))}
                                 </TokenInfoWrapper>
                             </StyledAccordionItem>
                         ))}

package/styled-components/cjs/examples/plasma_b2c/components/Tokens/Tokens.styles.js

@@ -16,7 +16,7 @@ var Category = exports.Category = /*#__PURE__*/_styledComponents["default"].h2.w
 })(["margin:0 0 1.125rem 1.5rem;", ";"], _mixins.h2);
 var AccordionInfo = exports.AccordionInfo = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-19i9718-2"
-})(["display:grid;grid-template-columns:18rem 7.938rem 2.375rem 3.813rem;grid-column-gap:1.5rem;font-family:var(--plasma-typo-body-m-font-family);font-size:var(--plasma-typo-body-m-font-size);font-style:var(--plasma-typo-body-m-font-style);font-weight:var(--plasma-typo-body-m-font-weight);letter-spacing:var(--plasma-typo-body-m-letter-spacing);line-height:var(--plasma-typo-body-m-line-height);"]);
+})(["display:grid;grid-template-columns:18rem 7.938rem 3.813rem;grid-column-gap:1.5rem;font-family:var(--plasma-typo-body-m-font-family);font-size:var(--plasma-typo-body-m-font-size);font-style:var(--plasma-typo-body-m-font-style);font-weight:var(--plasma-typo-body-m-font-weight);letter-spacing:var(--plasma-typo-body-m-letter-spacing);line-height:var(--plasma-typo-body-m-line-height);"]);
 var Subcategory = exports.Subcategory = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-19i9718-3"
 })(["color:var(--text-secondary);"]);
@@ -34,7 +34,7 @@ var OpacityPart = exports.OpacityPart = /*#__PURE__*/_styledComponents["default"
 })(["color:var(--text-secondary);padding-left:0.125rem;"]);
 var TokenInfo = exports.TokenInfo = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-19i9718-8"
-})(["color:var(--text-paragraph);cursor:default;&.copy{cursor:copy;}&.color{display:flex;align-items:center;gap:0.5rem;}&.no-interaction{text-align:right;}&:not(.no-interaction):hover{color:var(--text-paragraph-hover);", "{color:var(--text-paragraph-hover);}}&:not(.no-interaction):active{color:var(--text-paragraph-active);", "{color:var(--text-secondary-active);}}"], OpacityPart, OpacityPart);
+})(["color:var(--text-paragraph);cursor:default;&.copy{cursor:copy;}&.color{display:flex;align-items:center;gap:0.5rem;}&.opacity{text-align:right;}&:not(.opacity):hover{color:var(--text-paragraph-hover);", "{color:var(--text-paragraph-hover);}}&:not(.opacity):active{color:var(--text-paragraph-active);", "{color:var(--text-secondary-active);}}"], OpacityPart, OpacityPart);
 var ColorCircle = exports.ColorCircle = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-19i9718-9"
 })(["width:1.25rem;height:1.25rem;border-radius:50%;background:", ";box-shadow:", ";"], function (props) {

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

@@ -100,11 +100,11 @@ const StoryDefault = (args: CalendarProps) => {
             isDouble={isDouble}
             date={date}
             value={(isRange ? valueRange : value) as Date & [Date, Date?]}
-            min={min}
-            max={max}
             includeEdgeDates={includeEdgeDates}
             locale={locale}
             onChangeValue={(isRange ? handleOnRangeChange : handleOnChange) as (value: Date | [Date, Date?]) => void}
+            min={min}
+            max={max}
         />
     );
 };
@@ -146,24 +146,24 @@ const StoryBase = (args: CalendarBaseProps & { displayDouble: boolean }) => {
             <CalendarDouble
                 size={size}
                 value={value}
-                min={min}
-                max={max}
                 includeEdgeDates={includeEdgeDates}
                 type={type}
                 locale={locale}
                 onChangeValue={handleOnChange}
+                min={min}
+                max={max}
                 {...rest}
             />
         ) : (
             <CalendarBase
                 size={size}
                 value={value}
-                min={min}
-                max={max}
                 includeEdgeDates={includeEdgeDates}
                 type={type}
                 locale={locale}
                 onChangeValue={handleOnChange}
+                min={min}
+                max={max}
                 {...rest}
             />
         );
@@ -233,24 +233,24 @@ const StoryRange = (args: CalendarBaseRangeProps & { displayDouble: boolean }) =
             <CalendarBaseRange
                 size={size}
                 value={values}
-                min={min}
-                max={max}
                 includeEdgeDates={includeEdgeDates}
                 type={type}
                 onChangeValue={handleOnChange}
                 locale={locale}
+                min={min}
+                max={max}
                 {...rest}
             />
         ) : (
             <CalendarDoubleRange
                 size={size}
                 value={values}
-                min={min}
-                max={max}
                 includeEdgeDates={includeEdgeDates}
                 type={type}
                 onChangeValue={handleOnChange}
                 locale={locale}
+                min={min}
+                max={max}
                 {...rest}
             />
         );

package/styled-components/cjs/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx

@@ -1,7 +1,7 @@
 import React, { ComponentProps, useEffect, useRef, useState } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
+import { disableProps, IconPlaceholder } from '@salutejs/plasma-sb-utils';
 
 import { WithTheme } from '../../../_helpers';
 import { IconButton } from '../IconButton/IconButton';
@@ -80,6 +80,8 @@ const StoryDefault = ({
     size,
     lang,
     format,
+    min,
+    max,
     ...rest
 }: StoryPropsDefault) => {
     const [isOpen, setIsOpen] = useState(false);
@@ -103,6 +105,8 @@ const StoryDefault = ({
             lang={lang}
             format={format}
             onCommitDate={() => setIsOpen(false)}
+            min={min}
+            max={max}
             {...rest}
         />
     );
@@ -188,6 +192,8 @@ const StoryRange = ({
     secondValueSuccess,
     size,
     lang,
+    min,
+    max,
     ...rest
 }: StoryPropsRange) => {
     const rangeRef = useRef<RangeInputRefs>(null);
@@ -240,6 +246,8 @@ const StoryRange = ({
                 onChangeSecondValue(e, currentValue);
             }}
             lang={lang}
+            min={min}
+            max={max}
             {...dividerIconProps}
             {...rest}
         />
@@ -306,6 +314,8 @@ const StoryDeferred = ({
     valueError,
     valueSuccess,
     size,
+    min,
+    max,
     ...rest
 }: StoryPropsDefault) => {
     const [isOpen, setIsOpen] = useState(false);
@@ -338,6 +348,8 @@ const StoryDeferred = ({
                     onChangeValue(e, currentValue);
                 }}
                 onCommitDate={() => setIsOpen(false)}
+                min={min}
+                max={max}
                 {...rest}
             />
         </>

package/styled-components/cjs/examples/plasma_web/components/Tokens/Tokens.stories.tsx

@@ -69,11 +69,11 @@ const StoryDemo = ({ context }) => {
 
     return (
         <>
-            {Object.entries(groupedTokens).map(([category, subcategoties]) => (
+            {Object.entries(groupedTokens).map(([category, value]) => (
                 <CategoryContainer key={category}>
                     <Category>{category}</Category>
                     <Accordion view="clear" size="s" stretching="filled" defaultActiveEventKey={[0]}>
-                        {Object.entries(subcategoties).map(([subcategory, subcategoryTokens], index) => (
+                        {Object.entries(value).map(([subcategory, value2], index) => (
                             <StyledAccordionItem
                                 key={subcategory}
                                 eventKey={index}
@@ -85,37 +85,31 @@ const StoryDemo = ({ context }) => {
                                             <ColorCircle disableShadow />
                                             Color
                                         </ColumnTitle>
-                                        <ColumnTitle>Tone</ColumnTitle>
                                         <ColumnTitle>Opacity</ColumnTitle>
                                     </AccordionInfo>
                                 }
                             >
                                 <TokenInfoWrapper>
-                                    {Object.entries(subcategoryTokens).map(
-                                        ([token, { value, opacity, tone, colorName }]) => (
-                                            <AccordionInfo key={token}>
-                                                <TokenInfo className="copy" onClick={() => copyToClipboard(token)}>
-                                                    {token}
-                                                </TokenInfo>
-                                                <TokenInfo
-                                                    className="color copy"
-                                                    onClick={() => copyToClipboard(value, opacity?.alpha)}
-                                                >
-                                                    <ColorCircle background={value} />
-                                                    <div>
-                                                        {value.includes('gradient') ? 'Градиент' : colorName || value}
-                                                        {!colorName && opacity && (
-                                                            <OpacityPart>{opacity.alpha}</OpacityPart>
-                                                        )}
-                                                    </div>
-                                                </TokenInfo>
-                                                <TokenInfo className="no-interaction">
-                                                    {tone !== 'none' && tone}
-                                                </TokenInfo>
-                                                <TokenInfo className="no-interaction">{opacity?.parsedAlpha}</TokenInfo>
-                                            </AccordionInfo>
-                                        ),
-                                    )}
+                                    {Object.entries(value2).map(([token, { value: value3, opacity }]) => (
+                                        <AccordionInfo key={token}>
+                                            <TokenInfo className="copy" onClick={() => copyToClipboard(token)}>
+                                                {token}
+                                            </TokenInfo>
+                                            <TokenInfo
+                                                className="color copy"
+                                                onClick={() => copyToClipboard(value3, opacity?.alpha)}
+                                            >
+                                                <ColorCircle background={value3} />
+                                                <div>
+                                                    {value3.includes('gradient') ? 'Градиент' : value3}
+                                                    {opacity && <OpacityPart>{opacity.alpha}</OpacityPart>}
+                                                </div>
+                                            </TokenInfo>
+                                            {opacity && (
+                                                <TokenInfo className="opacity">{opacity.parsedAlpha}</TokenInfo>
+                                            )}
+                                        </AccordionInfo>
+                                    ))}
                                 </TokenInfoWrapper>
                             </StyledAccordionItem>
                         ))}

package/styled-components/cjs/examples/plasma_web/components/Tokens/Tokens.styles.js

@@ -16,7 +16,7 @@ var Category = exports.Category = /*#__PURE__*/_styledComponents["default"].h2.w
 })(["margin:0 0 1.125rem 1.5rem;", ";"], _mixins.h2);
 var AccordionInfo = exports.AccordionInfo = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-1ptu1dv-2"
-})(["display:grid;grid-template-columns:18rem 7.938rem 2.375rem 3.813rem;grid-column-gap:1.5rem;font-family:var(--plasma-typo-body-m-font-family);font-size:var(--plasma-typo-body-m-font-size);font-style:var(--plasma-typo-body-m-font-style);font-weight:var(--plasma-typo-body-m-font-weight);letter-spacing:var(--plasma-typo-body-m-letter-spacing);line-height:var(--plasma-typo-body-m-line-height);"]);
+})(["display:grid;grid-template-columns:18rem 7.938rem 3.813rem;grid-column-gap:1.5rem;font-family:var(--plasma-typo-body-m-font-family);font-size:var(--plasma-typo-body-m-font-size);font-style:var(--plasma-typo-body-m-font-style);font-weight:var(--plasma-typo-body-m-font-weight);letter-spacing:var(--plasma-typo-body-m-letter-spacing);line-height:var(--plasma-typo-body-m-line-height);"]);
 var Subcategory = exports.Subcategory = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-1ptu1dv-3"
 })(["color:var(--text-secondary);"]);
@@ -34,7 +34,7 @@ var OpacityPart = exports.OpacityPart = /*#__PURE__*/_styledComponents["default"
 })(["color:var(--text-secondary);padding-left:0.125rem;"]);
 var TokenInfo = exports.TokenInfo = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-1ptu1dv-8"
-})(["color:var(--text-paragraph);cursor:default;&.copy{cursor:copy;}&.color{display:flex;align-items:center;gap:0.5rem;}&.no-interaction{text-align:right;}&:not(.no-interaction):hover{color:var(--text-paragraph-hover);", "{color:var(--text-paragraph-hover);}}&:not(.no-interaction):active{color:var(--text-paragraph-active);", "{color:var(--text-secondary-active);}}"], OpacityPart, OpacityPart);
+})(["color:var(--text-paragraph);cursor:default;&.copy{cursor:copy;}&.color{display:flex;align-items:center;gap:0.5rem;}&.opacity{text-align:right;}&:not(.opacity):hover{color:var(--text-paragraph-hover);", "{color:var(--text-paragraph-hover);}}&:not(.opacity):active{color:var(--text-paragraph-active);", "{color:var(--text-secondary-active);}}"], OpacityPart, OpacityPart);
 var ColorCircle = exports.ColorCircle = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-1ptu1dv-9"
 })(["width:1.25rem;height:1.25rem;border-radius:50%;background:", ";box-shadow:", ";"], function (props) {

package/styled-components/es/components/Calendar/CalendarBase/CalendarBase.js

@@ -23,8 +23,8 @@ import { IsOutOfRange, StyledCalendar } from './CalendarBase.styles';
 export var calendarBaseRoot = function calendarBaseRoot(Root) {
   return /*#__PURE__*/forwardRef(function (_ref, outerRootRef) {
     var externalValue = _ref.value,
-      min = _ref.min,
-      max = _ref.max,
+      minDate = _ref.min,
+      maxDate = _ref.max,
       includeEdgeDates = _ref.includeEdgeDates,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'Days' : _ref$type,
@@ -63,6 +63,8 @@ export var calendarBaseRoot = function calendarBaseRoot(Root) {
       _useState8 = _slicedToArray(_useState7, 2),
       outOfRangeKey = _useState8[0],
       setOutOfRangeKey = _useState8[1];
+    var min = minDate && new Date(minDate);
+    var max = maxDate && new Date(maxDate);
     var _useReducer = useReducer(reducer, getInitialState(value, min, type)),
       _useReducer2 = _slicedToArray(_useReducer, 2),
       state = _useReducer2[0],

package/styled-components/es/components/Calendar/CalendarDouble/CalendarDouble.js

@@ -24,8 +24,8 @@ import { StyledCalendar, StyledSeparator, StyledWrapper } from './CalendarDouble
 export var calendarDoubleRoot = function calendarDoubleRoot(Root) {
   return /*#__PURE__*/forwardRef(function (_ref, outerRootRef) {
     var externalValue = _ref.value,
-      min = _ref.min,
-      max = _ref.max,
+      minDate = _ref.min,
+      maxDate = _ref.max,
       includeEdgeDates = _ref.includeEdgeDates,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'Days' : _ref$type,
@@ -64,6 +64,8 @@ export var calendarDoubleRoot = function calendarDoubleRoot(Root) {
       _useState8 = _slicedToArray(_useState7, 2),
       outOfRangeKey = _useState8[0],
       setOutOfRangeKey = _useState8[1];
+    var min = minDate && new Date(minDate);
+    var max = maxDate && new Date(maxDate);
     var _useReducer = useReducer(reducer, getInitialState(value, min, type, true)),
       _useReducer2 = _slicedToArray(_useReducer, 2),
       state = _useReducer2[0],

package/styled-components/es/components/Calendar/ui/CalendarMonths/CalendarMonths.js

@@ -35,13 +35,15 @@ export var CalendarMonths = function CalendarMonths(_ref) {
     onSetSelected = _ref.onSetSelected,
     onKeyDown = _ref.onKeyDown,
     locale = _ref.locale;
+  var minDate = min ? new Date(min.getFullYear(), min.getMonth(), 1) : undefined;
+  var maxDate = max ? new Date(max.getFullYear(), max.getMonth() + 1, 0) : undefined;
   var _useMonths = useMonths({
       date: currentDate,
       value: value,
       eventList: eventList,
       disabledList: disabledList,
-      min: min,
-      max: max,
+      min: minDate,
+      max: maxDate,
       locale: locale
     }),
     _useMonths2 = _slicedToArray(_useMonths, 2),

package/styled-components/es/components/Calendar/ui/CalendarQuarters/CalendarQuarters.js

@@ -34,13 +34,15 @@ export var CalendarQuarters = function CalendarQuarters(_ref) {
     onHoverQuarter = _ref.onHoverQuarter,
     onSetSelected = _ref.onSetSelected,
     onKeyDown = _ref.onKeyDown;
+  var minDate = min ? new Date(min.getFullYear(), min.getMonth(), 1) : undefined;
+  var maxDate = max ? new Date(max.getFullYear(), max.getMonth() + 1, 0) : undefined;
   var _useQuarters = useQuarters({
       date: currentDate,
       value: value,
       eventList: eventList,
       disabledList: disabledList,
-      min: min,
-      max: max
+      min: minDate,
+      max: maxDate
     }),
     _useQuarters2 = _slicedToArray(_useQuarters, 2),
     quarters = _useQuarters2[0],

package/styled-components/es/components/Calendar/ui/CalendarYears/CalendarYears.js

@@ -35,14 +35,16 @@ export var CalendarYears = function CalendarYears(_ref) {
     onHoverYear = _ref.onHoverYear,
     onSetSelected = _ref.onSetSelected,
     onKeyDown = _ref.onKeyDown;
+  var minDate = min ? new Date(min.getFullYear(), 0, 1) : undefined;
+  var maxDate = max ? new Date(max.getFullYear(), 11, 31) : undefined;
   var _useYears = useYears({
       date: currentDate,
       value: value,
       startYear: startYear,
       eventList: eventList,
       disabledList: disabledList,
-      min: min,
-      max: max
+      min: minDate,
+      max: maxDate
     }),
     _useYears2 = _slicedToArray(_useYears, 2),
     years = _useYears2[0],

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

@@ -100,11 +100,11 @@ const StoryDefault = (args: CalendarProps) => {
             isDouble={isDouble}
             date={date}
             value={(isRange ? valueRange : value) as Date & [Date, Date?]}
-            min={min}
-            max={max}
             includeEdgeDates={includeEdgeDates}
             locale={locale}
             onChangeValue={(isRange ? handleOnRangeChange : handleOnChange) as (value: Date | [Date, Date?]) => void}
+            min={min}
+            max={max}
         />
     );
 };
@@ -146,24 +146,24 @@ const StoryBase = (args: CalendarBaseProps & { displayDouble: boolean }) => {
             <CalendarDouble
                 size={size}
                 value={value}
-                min={min}
-                max={max}
                 includeEdgeDates={includeEdgeDates}
                 type={type}
                 locale={locale}
                 onChangeValue={handleOnChange}
+                min={min}
+                max={max}
                 {...rest}
             />
         ) : (
             <CalendarBase
                 size={size}
                 value={value}
-                min={min}
-                max={max}
                 includeEdgeDates={includeEdgeDates}
                 type={type}
                 locale={locale}
                 onChangeValue={handleOnChange}
+                min={min}
+                max={max}
                 {...rest}
             />
         );
@@ -233,24 +233,24 @@ const StoryRange = (args: CalendarBaseRangeProps & { displayDouble: boolean }) =
             <CalendarBaseRange
                 size={size}
                 value={values}
-                min={min}
-                max={max}
                 includeEdgeDates={includeEdgeDates}
                 type={type}
                 onChangeValue={handleOnChange}
                 locale={locale}
+                min={min}
+                max={max}
                 {...rest}
             />
         ) : (
             <CalendarDoubleRange
                 size={size}
                 value={values}
-                min={min}
-                max={max}
                 includeEdgeDates={includeEdgeDates}
                 type={type}
                 onChangeValue={handleOnChange}
                 locale={locale}
+                min={min}
+                max={max}
                 {...rest}
             />
         );