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

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

@@ -1,16 +1,16 @@
 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 _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); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import React, { forwardRef, useMemo } from 'react';
-import { cx } from '../../utils';
+import React, { forwardRef, useImperativeHandle, useMemo, useRef } from 'react';
+import { cx, getPlacements } from '../../utils';
 import { base as sizeCSS } from './variations/_size/base';
 import { base as viewCSS } from './variations/_view/base';
 import { base as disabledCSS } from './variations/_disabled/base';
 import { base as readOnlyCSS } from './variations/_readonly/base';
 import { getChangeHandler, getSearchHandler } from './utils';
-import { ContentWrapper, LeftHelper, StyledContentLeft, StyledContentRight, StyledDivider, StyledInput, StyledLabel, base } from './Range.styles';
+import { ContentWrapper, LeftHelper, StyledContentLeft, StyledContentRight, StyledDivider, StyledInput, StyledLabel, StyledPopover, base } from './Range.styles';
 import { classes } from './Range.tokens';
 export var rangeRoot = function rangeRoot(Root) {
   return /*#__PURE__*/forwardRef(function (_ref, ref) {
@@ -44,6 +44,15 @@ export var 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,
@@ -53,6 +62,9 @@ export var rangeRoot = function rangeRoot(Root) {
       onBlurFirstTextfield = _ref.onBlurFirstTextfield,
       onBlurSecondTextfield = _ref.onBlurSecondTextfield,
       rest = _objectWithoutProperties(_ref, _excluded);
+    var rangeRef = useRef(null);
+    var firstTextFieldRef = useRef(null);
+    var secondTextFieldRef = useRef(null);
     var rangeErrorClass = firstValueError && secondValueError ? classes.rangeError : undefined;
     var firstValueErrorClass = !rangeErrorClass && firstValueError ? classes.rangeValueError : undefined;
     var secondValueErrorClass = !rangeErrorClass && secondValueError ? classes.rangeValueError : undefined;
@@ -63,6 +75,16 @@ export var rangeRoot = function rangeRoot(Root) {
     var handleChangeSecondValue = getChangeHandler(onChangeSecondValue, disabled, readOnly);
     var handleSearchFirstValue = getSearchHandler(onSearchFirstValue, disabled, readOnly);
     var handleSearchSecondValue = getSearchHandler(onSearchSecondValue, disabled, readOnly);
+    useImperativeHandle(ref, function () {
+      return {
+        firstTextField: function firstTextField() {
+          return firstTextFieldRef;
+        },
+        secondTextField: function secondTextField() {
+          return secondTextFieldRef;
+        }
+      };
+    }, [firstTextFieldRef, secondTextFieldRef]);
     var Divider = useMemo(function () {
       if (dividerVariant === 'none') {
         return null;
@@ -73,42 +95,66 @@ export var rangeRoot = function rangeRoot(Root) {
       return _StyledDivider2 || (_StyledDivider2 = /*#__PURE__*/React.createElement(StyledDivider, null, dividerIcon));
     }, [dividerVariant, dividerIcon]);
     return /*#__PURE__*/React.createElement(Root, _extends({
+      ref: rangeRef,
       view: view,
       size: size,
       disabled: disabled,
-      readOnly: !disabled && readOnly,
-      ref: ref
+      readOnly: !disabled && readOnly
     }, rest), label && /*#__PURE__*/React.createElement(StyledLabel, null, label), /*#__PURE__*/React.createElement(ContentWrapper, {
       className: cx(rangeErrorClass, rangeSuccessClass)
-    }, contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), /*#__PURE__*/React.createElement(StyledInput, {
-      className: 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.createElement(StyledInput, {
-      className: 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.createElement(StyledContentRight, null, contentRight)), leftHelper && /*#__PURE__*/React.createElement(LeftHelper, null, leftHelper));
+    }, contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), /*#__PURE__*/React.createElement(StyledPopover, {
+      isOpen: isOpenFirst,
+      usePortal: false,
+      onToggle: onToggleFirst,
+      offset: offset,
+      placement: getPlacements(placement),
+      trigger: "click",
+      closeOnOverlayClick: closeOnOverlayClick,
+      isFocusTrapped: false,
+      target: /*#__PURE__*/React.createElement(StyledInput, {
+        ref: firstTextFieldRef,
+        className: 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.createElement(StyledPopover, {
+      isOpen: isOpenSecond,
+      usePortal: false,
+      onToggle: onToggleSecond,
+      offset: offset,
+      placement: getPlacements(placement),
+      trigger: "click",
+      closeOnOverlayClick: closeOnOverlayClick,
+      isFocusTrapped: false,
+      target: /*#__PURE__*/React.createElement(StyledInput, {
+        ref: secondTextFieldRef,
+        className: 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.createElement(StyledContentRight, null, contentRight)), leftHelper && /*#__PURE__*/React.createElement(LeftHelper, null, leftHelper));
   });
 };
 export var rangeConfig = {

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

@@ -2,30 +2,36 @@ import styled from 'styled-components';
 import { css } from 'styled-components';
 import { component, mergeConfig } from '../../engines';
 import { textFieldConfig, textFieldTokens } from '../TextField';
+import { popoverClasses, popoverConfig } from '../Popover';
 import { classes, tokens } from './Range.tokens';
 var mergedConfig = /*#__PURE__*/mergeConfig(textFieldConfig);
 var TextField = /*#__PURE__*/component(mergedConfig);
+var mergedPopoverConfig = /*#__PURE__*/mergeConfig(popoverConfig);
+var Popover = /*#__PURE__*/component(mergedPopoverConfig);
+export var StyledPopover = /*#__PURE__*/styled(Popover).withConfig({
+  componentId: "plasma-new-hope__sc-xpkrak-0"
+})([""]);
 
 // NOTE: переопределение токенов TextField
 export var StyledInput = /*#__PURE__*/styled(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(", ");}"], textFieldTokens.color, tokens.textFieldColor, textFieldTokens.placeholderColor, tokens.textFieldPlaceholderColor, textFieldTokens.caretColor, tokens.textFieldCaretColor, textFieldTokens.focusColor, tokens.textFieldFocusColor, textFieldTokens.backgroundColor, tokens.textFieldBackgroundColor, textFieldTokens.backgroundColorHover, tokens.textFieldBackgroundColorHover, textFieldTokens.backgroundColorFocus, tokens.textFieldBackgroundColorFocus, textFieldTokens.borderColor, tokens.textFieldBorderColor, textFieldTokens.borderColorHover, tokens.textFieldBorderColorHover, textFieldTokens.borderColorFocus, tokens.textFieldBorderColorFocus, textFieldTokens.colorReadOnly, tokens.textFieldColorReadOnly, textFieldTokens.backgroundColorReadOnly, tokens.textFieldBackgroundColorReadOnly, textFieldTokens.borderColorReadOnly, tokens.textFieldBorderColorReadOnly, textFieldTokens.placeholderColorReadOnly, tokens.textFieldPlaceholderColorReadOnly, textFieldTokens.height, tokens.textFieldHeight, textFieldTokens.borderWidth, tokens.textFieldBorderWidth, textFieldTokens.borderRadius, tokens.textFieldBorderRadius, textFieldTokens.padding, tokens.textFieldPadding, textFieldTokens.leftContentMargin, tokens.textFieldLeftContentMargin, textFieldTokens.rightContentMargin, tokens.textFieldRightContentMargin, textFieldTokens.fontFamily, tokens.textFieldFontFamily, textFieldTokens.fontSize, tokens.textFieldFontSize, textFieldTokens.fontStyle, tokens.textFieldFontStyle, textFieldTokens.fontWeight, tokens.textFieldFontWeight, textFieldTokens.letterSpacing, tokens.textFieldLetterSpacing, textFieldTokens.lineHeight, tokens.textFieldLineHeight, textFieldTokens.disabledOpacity, tokens.disabledOpacity, textFieldTokens.textBeforeColor, tokens.textFieldTextBeforeColor, textFieldTokens.textAfterColor, tokens.textFieldTextAfterColor, textFieldTokens.textBeforeMargin, tokens.textFieldTextBeforeMargin, textFieldTokens.textAfterMargin, tokens.textFieldTextAfterMargin, classes.rangeValueError, textFieldTokens.backgroundColor, tokens.textFieldBackgroundErrorColor, textFieldTokens.backgroundColorHover, tokens.textFieldBackgroundErrorColorHover, textFieldTokens.backgroundColorFocus, tokens.textFieldBackgroundErrorColorFocus, textFieldTokens.borderColor, tokens.textFieldBorderColorError, textFieldTokens.borderColorHover, tokens.textFieldBorderColorErrorHover, textFieldTokens.borderColorFocus, tokens.textFieldBorderColorErrorFocus, classes.rangeValueSuccess, textFieldTokens.backgroundColor, tokens.textFieldBackgroundSuccessColor, textFieldTokens.backgroundColorHover, tokens.textFieldBackgroundSuccessColorHover, textFieldTokens.backgroundColorFocus, tokens.textFieldBackgroundSuccessColorFocus, textFieldTokens.borderColor, tokens.textFieldBorderColorSuccess, textFieldTokens.borderColorHover, tokens.textFieldBorderColorSuccessHover, textFieldTokens.borderColorFocus, tokens.textFieldBorderColorSuccessFocus);
-export var base = /*#__PURE__*/css([""]);
-export var StyledLabel = /*#__PURE__*/styled.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(", ");}"], textFieldTokens.color, tokens.textFieldColor, textFieldTokens.placeholderColor, tokens.textFieldPlaceholderColor, textFieldTokens.caretColor, tokens.textFieldCaretColor, textFieldTokens.focusColor, tokens.textFieldFocusColor, textFieldTokens.backgroundColor, tokens.textFieldBackgroundColor, textFieldTokens.backgroundColorHover, tokens.textFieldBackgroundColorHover, textFieldTokens.backgroundColorFocus, tokens.textFieldBackgroundColorFocus, textFieldTokens.borderColor, tokens.textFieldBorderColor, textFieldTokens.borderColorHover, tokens.textFieldBorderColorHover, textFieldTokens.borderColorFocus, tokens.textFieldBorderColorFocus, textFieldTokens.colorReadOnly, tokens.textFieldColorReadOnly, textFieldTokens.backgroundColorReadOnly, tokens.textFieldBackgroundColorReadOnly, textFieldTokens.borderColorReadOnly, tokens.textFieldBorderColorReadOnly, textFieldTokens.placeholderColorReadOnly, tokens.textFieldPlaceholderColorReadOnly, textFieldTokens.height, tokens.textFieldHeight, textFieldTokens.borderWidth, tokens.textFieldBorderWidth, textFieldTokens.borderRadius, tokens.textFieldBorderRadius, textFieldTokens.padding, tokens.textFieldPadding, textFieldTokens.leftContentMargin, tokens.textFieldLeftContentMargin, textFieldTokens.rightContentMargin, tokens.textFieldRightContentMargin, textFieldTokens.fontFamily, tokens.textFieldFontFamily, textFieldTokens.fontSize, tokens.textFieldFontSize, textFieldTokens.fontStyle, tokens.textFieldFontStyle, textFieldTokens.fontWeight, tokens.textFieldFontWeight, textFieldTokens.letterSpacing, tokens.textFieldLetterSpacing, textFieldTokens.lineHeight, tokens.textFieldLineHeight, textFieldTokens.disabledOpacity, tokens.disabledOpacity, textFieldTokens.textBeforeColor, tokens.textFieldTextBeforeColor, textFieldTokens.textAfterColor, tokens.textFieldTextAfterColor, textFieldTokens.textBeforeMargin, tokens.textFieldTextBeforeMargin, textFieldTokens.textAfterMargin, tokens.textFieldTextAfterMargin, classes.rangeValueError, textFieldTokens.backgroundColor, tokens.textFieldBackgroundErrorColor, textFieldTokens.backgroundColorHover, tokens.textFieldBackgroundErrorColorHover, textFieldTokens.backgroundColorFocus, tokens.textFieldBackgroundErrorColorFocus, textFieldTokens.borderColor, tokens.textFieldBorderColorError, textFieldTokens.borderColorHover, tokens.textFieldBorderColorErrorHover, textFieldTokens.borderColorFocus, tokens.textFieldBorderColorErrorFocus, classes.rangeValueSuccess, textFieldTokens.backgroundColor, tokens.textFieldBackgroundSuccessColor, textFieldTokens.backgroundColorHover, tokens.textFieldBackgroundSuccessColorHover, textFieldTokens.backgroundColorFocus, tokens.textFieldBackgroundSuccessColorFocus, textFieldTokens.borderColor, tokens.textFieldBorderColorSuccess, textFieldTokens.borderColorHover, tokens.textFieldBorderColorSuccessHover, textFieldTokens.borderColorFocus, tokens.textFieldBorderColorSuccessFocus);
+export var base = /*#__PURE__*/css([".", "{display:block;flex:1;}.", "{display:flex;flex-direction:column;}"], /*#__PURE__*/String(popoverClasses.wrapper), /*#__PURE__*/String(popoverClasses.target));
+export var StyledLabel = /*#__PURE__*/styled.label.withConfig({
+  componentId: "plasma-new-hope__sc-xpkrak-2"
 })([""]);
 export var LeftHelper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-xpkrak-2"
+  componentId: "plasma-new-hope__sc-xpkrak-3"
 })([""]);
 export var ContentWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-xpkrak-3"
+  componentId: "plasma-new-hope__sc-xpkrak-4"
 })(["display:flex;align-items:center;"]);
 export var StyledDivider = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-xpkrak-4"
+  componentId: "plasma-new-hope__sc-xpkrak-5"
 })([""]);
 export var StyledContentLeft = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-xpkrak-5"
+  componentId: "plasma-new-hope__sc-xpkrak-6"
 })([""]);
 export var StyledContentRight = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-xpkrak-6"
+  componentId: "plasma-new-hope__sc-xpkrak-7"
 })([""]);

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

@@ -10,8 +10,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React, { Children, forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { safeUseId, useForkRef } from '@salutejs/plasma-core';
-import { cx } from '../../utils';
-import { getPlacements } from '../Dropdown/utils';
+import { cx, getPlacements } from '../../utils';
 import { useDidMountEffect, useForceUpdate } from '../../hooks';
 import { base as targetCSS } from './variations/_target/base';
 import { base as viewCSS } from './variations/_view/base';

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

@@ -20,7 +20,7 @@ export var 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/es/components/TextField/variations/_size/base.js

@@ -1,4 +1,4 @@
 import { css } from 'styled-components';
 import { classes, tokens } from '../../TextField.tokens';
 import { Input, InputWrapper, Label, LeftHelper, StyledTextAfter, StyledTextBefore } from '../../TextField.styles';
-export var base = /*#__PURE__*/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(", ");}"], Input, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, InputWrapper, tokens.height, tokens.borderRadius, tokens.padding, classes.hasChips, tokens.paddingWithChips, tokens.paddingWithChips, classes.hasEmptyContentLeft, tokens.paddingWithChips, classes.hasEmptyContentRight, tokens.paddingWithChips, Label, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, LeftHelper, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, StyledTextBefore, StyledTextAfter, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, StyledTextBefore, tokens.textBeforeMargin, StyledTextAfter, tokens.textAfterMargin);
+export var base = /*#__PURE__*/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(", ");}"], Input, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, InputWrapper, tokens.height, tokens.borderRadius, tokens.padding, classes.hasChips, tokens.paddingWithChips, tokens.paddingWithChips, classes.hasEmptyContentLeft, tokens.paddingWithChips, classes.hasEmptyContentRight, tokens.paddingWithChips, Label, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, LeftHelper, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, StyledTextBefore, StyledTextAfter, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, StyledTextBefore, tokens.textBeforeMargin, StyledTextAfter, tokens.textAfterMargin);

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

@@ -1,14 +1,15 @@
 var _path;
 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); }
 import React from 'react';
-export var Minus = function Minus(props) {
+export var DisclosureDownFill = function DisclosureDownFill(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     width: "100%",
     viewBox: "0 0 24 24",
     fill: "none"
   }, props), _path || (_path = /*#__PURE__*/React.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/es/components/_Icon/Icon.assets/DisclosureLeft.js

@@ -9,7 +9,7 @@ export var DisclosureLeft = function DisclosureLeft(props) {
   }, props), _path || (_path = /*#__PURE__*/React.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/es/components/_Icon/Icon.assets/DisclosureRight.js

@@ -1,25 +1,15 @@
-var _path, _path2;
+var _path;
 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); }
 import React from 'react';
 export var DisclosureRight = function DisclosureRight(props) {
-  if (props.size === 'xs') {
-    return /*#__PURE__*/React.createElement("svg", _extends({
-      width: "100%",
-      viewBox: "0 0 17 16",
-      fill: "none"
-    }, props), _path || (_path = /*#__PURE__*/React.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.createElement("svg", _extends({
     width: "100%",
     viewBox: "0 0 24 24",
     fill: "none"
-  }, props), _path2 || (_path2 = /*#__PURE__*/React.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.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/es/components/_Icon/Icons/{IconMinus.js → IconDisclosureDownFill.js}

@@ -1,7 +1,7 @@
 import React from 'react';
-import { Minus } from '../Icon.assets/Minus';
+import { DisclosureDownFill } from '../Icon.assets/DisclosureDownFill';
 import { IconRoot } from '../IconRoot';
-export var IconMinus = function IconMinus(_ref) {
+export var IconDisclosureDownFill = function IconDisclosureDownFill(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 's' : _ref$size,
     color = _ref.color,
@@ -10,6 +10,6 @@ export var IconMinus = function IconMinus(_ref) {
     className: className,
     size: size,
     color: color,
-    icon: Minus
+    icon: DisclosureDownFill
   });
 };

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

@@ -1,11 +1,10 @@
 export { IconDisclosureLeft } from './Icons/IconDisclosureLeft';
 export { IconDisclosureRight } from './Icons/IconDisclosureRight';
+export { IconDisclosureDownFill } from './Icons/IconDisclosureDownFill';
 export { IconMic } from './Icons/IconMic';
 export { IconChevronLeft } from './Icons/IconChevronLeft';
 export { IconChevronDoubleLeft } from './Icons/IconChevronDoubleLeft';
 export { IconChevronDown } from './Icons/IconChevronDown';
-export { IconChevronDownFill } from './Icons/IconChevronDownFill';
 export { IconClose } from './Icons/IconClose';
 export { IconCross } from './Icons/IconCross';
-export { IconDone } from './Icons/IconDone';
-export { IconMinus } from './Icons/IconMinus';
+export { IconDone } from './Icons/IconDone';

package/styled-components/es/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,

package/styled-components/es/examples/plasma_b2c/components/Calendar/CalendarBase.config.js

@@ -7,10 +7,13 @@ export var config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/css(["", ":transparent;", ":var(--plasma-colors-primary);", ":var(--plasma-colors-background-primary);", ":var(--plasma-colors-surface-liquid02);", ":var(--plasma-colors-primary);", ":transparent;", ":var(--plasma-colors-primary);", ":var(--plasma-colors-surface-liquid02);", ":var(--plasma-colors-primary);", ":var(--plasma-colors-surface-solid03);", ":var(--plasma-colors-accent);", ":var(--plasma-colors-background-primary);", ":var(--plasma-colors-surface-liquid02);", ":var(--plasma-colors-button-focused);", ":var(--plasma-colors-primary);", ":var(--plasma-colors-secondary);"], calendarBaseTokens.calendarBackgroundColor, calendarBaseTokens.calendarSelectedItemBackground, calendarBaseTokens.calendarSelectedItemColor, calendarBaseTokens.calendarSelectableItemBackgroundHover, calendarBaseTokens.calendarCurrentItemBorderColor, calendarBaseTokens.calendarCurrentItemBackgroundHover, calendarBaseTokens.calendarCurrentItemColorHover, calendarBaseTokens.calendarCurrentItemChildBackgroundHover, calendarBaseTokens.calendarActiveItemBackground, calendarBaseTokens.calendarActiveItemColor, calendarBaseTokens.calendarHoveredItemBackground, calendarBaseTokens.calendarHoveredItemColor, calendarBaseTokens.calendarRangeBackground, calendarBaseTokens.calendarOutlineFocusColor, calendarBaseTokens.calendarContentPrimaryColor, calendarBaseTokens.calendarContentSecondaryColor)
+      "default": /*#__PURE__*/css(["", ":transparent;", ":var(--plasma-colors-primary);", ":var(--plasma-colors-background-primary);", ":var(--plasma-colors-surface-liquid02);", ":var(--plasma-colors-primary);", ":transparent;", ":var(--plasma-colors-primary);", ":var(--plasma-colors-surface-liquid02);", ":var(--plasma-colors-primary);", ":var(--plasma-colors-surface-solid03);", ":var(--plasma-colors-accent);", ":var(--plasma-colors-background-primary);", ":var(--plasma-colors-surface-liquid02);", ":var(--plasma-colors-button-focused);", ":var(--plasma-colors-primary);", ":var(--plasma-colors-secondary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], calendarBaseTokens.calendarBackgroundColor, calendarBaseTokens.calendarSelectedItemBackground, calendarBaseTokens.calendarSelectedItemColor, calendarBaseTokens.calendarSelectableItemBackgroundHover, calendarBaseTokens.calendarCurrentItemBorderColor, calendarBaseTokens.calendarCurrentItemBackgroundHover, calendarBaseTokens.calendarCurrentItemColorHover, calendarBaseTokens.calendarCurrentItemChildBackgroundHover, calendarBaseTokens.calendarActiveItemBackground, calendarBaseTokens.calendarActiveItemColor, calendarBaseTokens.calendarHoveredItemBackground, calendarBaseTokens.calendarHoveredItemColor, calendarBaseTokens.calendarRangeBackground, calendarBaseTokens.calendarOutlineFocusColor, calendarBaseTokens.calendarContentPrimaryColor, calendarBaseTokens.calendarContentSecondaryColor, calendarBaseTokens.calendarDayOfWeekColor, calendarBaseTokens.iconButtonColor, calendarBaseTokens.iconButtonBackgroundColor, calendarBaseTokens.iconButtonColorHover, calendarBaseTokens.iconButtonBackgroundColorHover, calendarBaseTokens.iconButtonColorActive, calendarBaseTokens.iconButtonBackgroundColorActive)
     },
     size: {
-      m: /*#__PURE__*/css(["", ":5.5rem;", ":0.5rem;", ":var(--plasma-typo-h4-font-family);", ":var(--plasma-typo-h4-font-size);", ":var(--plasma-typo-h4-font-style);", ":var(--plasma-typo-h4-letter-spacing);", ":var(--plasma-typo-h4-line-height);", ":var(--plasma-typo-h4-font-weight);", ":var(--plasma-typo-h4-bold-font-weight);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-weight);"], calendarBaseTokens.calendarHeaderArrowContainerWidth, calendarBaseTokens.calendarItemBorderRadius, calendarBaseTokens.calendarHeaderFontFamily, calendarBaseTokens.calendarHeaderFontSize, calendarBaseTokens.calendarHeaderFontStyle, calendarBaseTokens.calendarHeaderFontLetterSpacing, calendarBaseTokens.calendarHeaderFontLineHeight, calendarBaseTokens.calendarHeaderFontWeight, calendarBaseTokens.calendarHeaderFontWeightBold, calendarBaseTokens.calendarYearFontFamily, calendarBaseTokens.calendarYearFontSize, calendarBaseTokens.calendarYearFontStyle, calendarBaseTokens.calendarYearFontLetterSpacing, calendarBaseTokens.calendarYearFontLineHeight, calendarBaseTokens.calendarYearFontWeight, calendarBaseTokens.calendarMonthFontFamily, calendarBaseTokens.calendarMonthFontSize, calendarBaseTokens.calendarMonthFontStyle, calendarBaseTokens.calendarMonthFontLetterSpacing, calendarBaseTokens.calendarMonthFontLineHeight, calendarBaseTokens.calendarMonthFontWeight, calendarBaseTokens.calendarDayFontFamily, calendarBaseTokens.calendarDayFontSize, calendarBaseTokens.calendarDayFontStyle, calendarBaseTokens.calendarDayFontLetterSpacing, calendarBaseTokens.calendarDayFontLineHeight, calendarBaseTokens.calendarDayFontWeight)
+      l: /*#__PURE__*/css(["", ":24.5rem;", ":25rem;", ":0.5rem 0.5rem 0 0.5rem;", ":0.75rem;", ":7.8125rem;", ":5.25rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-bold-font-weight);", ":0.5rem 0.5rem 0 0.5rem;", ":0.75rem;", ":7.8125rem;", ":5.25rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-bold-font-weight);", ":0.5rem 0 0 0;", ":0.75rem;", ":3.5rem;", ":3rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-bold-font-weight);", ":0.5rem;", ":0 0 0 1rem;", ":0.5rem;", ":var(--plasma-typo-h4-font-family);", ":var(--plasma-typo-h4-font-size);", ":var(--plasma-typo-h4-font-style);", ":var(--plasma-typo-h4-letter-spacing);", ":var(--plasma-typo-h4-line-height);", ":var(--plasma-typo-h4-font-weight);", ":var(--plasma-typo-h4-bold-font-weight);", ":3.5rem;", ":3.5rem;", ":1.5rem;", ":0.875rem;"], calendarBaseTokens.calendarWidth, calendarBaseTokens.calendarHeight, calendarBaseTokens.calendarYearsPadding, calendarBaseTokens.calendarYearItemBorderRadius, calendarBaseTokens.calendarYearItemWidth, calendarBaseTokens.calendarYearItemHeight, calendarBaseTokens.calendarYearFontFamily, calendarBaseTokens.calendarYearFontSize, calendarBaseTokens.calendarYearFontStyle, calendarBaseTokens.calendarYearFontLetterSpacing, calendarBaseTokens.calendarYearFontLineHeight, calendarBaseTokens.calendarYearFontWeight, calendarBaseTokens.calendarYearSelectedFontWeight, calendarBaseTokens.calendarMonthsPadding, calendarBaseTokens.calendarMonthItemBorderRadius, calendarBaseTokens.calendarMonthItemWidth, calendarBaseTokens.calendarMonthItemHeight, calendarBaseTokens.calendarMonthFontFamily, calendarBaseTokens.calendarMonthFontSize, calendarBaseTokens.calendarMonthFontStyle, calendarBaseTokens.calendarMonthFontLetterSpacing, calendarBaseTokens.calendarMonthFontLineHeight, calendarBaseTokens.calendarMonthFontWeight, calendarBaseTokens.calendarMonthSelectedFontWeight, calendarBaseTokens.calendarDaysPadding, calendarBaseTokens.calendarDayItemBorderRadius, calendarBaseTokens.calendarDayItemWidth, calendarBaseTokens.calendarDayItemHeight, calendarBaseTokens.calendarDayFontFamily, calendarBaseTokens.calendarDayFontSize, calendarBaseTokens.calendarDayFontStyle, calendarBaseTokens.calendarDayFontLetterSpacing, calendarBaseTokens.calendarDayFontLineHeight, calendarBaseTokens.calendarDayFontWeight, calendarBaseTokens.calendarDaySelectedFontWeight, calendarBaseTokens.calendarHeaderArrowGap, calendarBaseTokens.calendarHeaderPadding, calendarBaseTokens.calendarHeaderDateGap, calendarBaseTokens.calendarHeaderFontFamily, calendarBaseTokens.calendarHeaderFontSize, calendarBaseTokens.calendarHeaderFontStyle, calendarBaseTokens.calendarHeaderFontLetterSpacing, calendarBaseTokens.calendarHeaderFontLineHeight, calendarBaseTokens.calendarHeaderFontWeight, calendarBaseTokens.calendarHeaderFontWeightBold, calendarBaseTokens.iconButtonHeight, calendarBaseTokens.iconButtonWidth, calendarBaseTokens.iconButtonPadding, calendarBaseTokens.iconButtonRadius),
+      m: /*#__PURE__*/css(["", ":21rem;", ":21rem;", ":0.5rem 0.5rem 0 0.5rem;", ":0.625rem;", ":6.688rem;", ":4.375rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-bold-font-weight);", ":0.5rem 0.5rem 0 0.5rem;", ":0.625rem;", ":6.688rem;", ":4.375rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-bold-font-weight);", ":0.5rem 0 0 0;", ":0.625rem;", ":3rem;", ":2.5rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-bold-font-weight);", ":0.5rem;", ":0 0 0 0.75rem;", ":0.375rem;", ":var(--plasma-typo-h4-font-family);", ":var(--plasma-typo-h4-font-size);", ":var(--plasma-typo-h4-font-style);", ":var(--plasma-typo-h4-letter-spacing);", ":var(--plasma-typo-h4-line-height);", ":var(--plasma-typo-h4-font-weight);", ":var(--plasma-typo-h4-bold-font-weight);", ":3rem;", ":3rem;", ":1.25rem;", ":0.75rem;"], calendarBaseTokens.calendarWidth, calendarBaseTokens.calendarHeight, calendarBaseTokens.calendarYearsPadding, calendarBaseTokens.calendarYearItemBorderRadius, calendarBaseTokens.calendarYearItemWidth, calendarBaseTokens.calendarYearItemHeight, calendarBaseTokens.calendarYearFontFamily, calendarBaseTokens.calendarYearFontSize, calendarBaseTokens.calendarYearFontStyle, calendarBaseTokens.calendarYearFontLetterSpacing, calendarBaseTokens.calendarYearFontLineHeight, calendarBaseTokens.calendarYearFontWeight, calendarBaseTokens.calendarYearSelectedFontWeight, calendarBaseTokens.calendarMonthsPadding, calendarBaseTokens.calendarMonthItemBorderRadius, calendarBaseTokens.calendarMonthItemWidth, calendarBaseTokens.calendarMonthItemHeight, calendarBaseTokens.calendarMonthFontFamily, calendarBaseTokens.calendarMonthFontSize, calendarBaseTokens.calendarMonthFontStyle, calendarBaseTokens.calendarMonthFontLetterSpacing, calendarBaseTokens.calendarMonthFontLineHeight, calendarBaseTokens.calendarMonthFontWeight, calendarBaseTokens.calendarMonthSelectedFontWeight, calendarBaseTokens.calendarDaysPadding, calendarBaseTokens.calendarDayItemBorderRadius, calendarBaseTokens.calendarDayItemWidth, calendarBaseTokens.calendarDayItemHeight, calendarBaseTokens.calendarDayFontFamily, calendarBaseTokens.calendarDayFontSize, calendarBaseTokens.calendarDayFontStyle, calendarBaseTokens.calendarDayFontLetterSpacing, calendarBaseTokens.calendarDayFontLineHeight, calendarBaseTokens.calendarDayFontWeight, calendarBaseTokens.calendarDaySelectedFontWeight, calendarBaseTokens.calendarHeaderArrowGap, calendarBaseTokens.calendarHeaderPadding, calendarBaseTokens.calendarHeaderDateGap, calendarBaseTokens.calendarHeaderFontFamily, calendarBaseTokens.calendarHeaderFontSize, calendarBaseTokens.calendarHeaderFontStyle, calendarBaseTokens.calendarHeaderFontLetterSpacing, calendarBaseTokens.calendarHeaderFontLineHeight, calendarBaseTokens.calendarHeaderFontWeight, calendarBaseTokens.calendarHeaderFontWeightBold, calendarBaseTokens.iconButtonHeight, calendarBaseTokens.iconButtonWidth, calendarBaseTokens.iconButtonPadding, calendarBaseTokens.iconButtonRadius),
+      s: /*#__PURE__*/css(["", ":17.5rem;", ":17rem;", ":0.5rem 0.5rem 0 0.5rem;", ":0.5rem;", ":5.5rem;", ":3.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-bold-font-weight);", ":0.5rem 0.5rem 0 0.5rem;", ":0.5rem;", ":5.5rem;", ":3.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-bold-font-weight);", ":0.5rem 0 0 0;", ":0.5rem;", ":2.5rem;", ":2rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-bold-font-weight);", ":0.5rem;", ":0 0 0 0.5rem;", ":0.25rem;", ":var(--plasma-typo-h4-font-family);", ":var(--plasma-typo-h4-font-size);", ":var(--plasma-typo-h4-font-style);", ":var(--plasma-typo-h4-letter-spacing);", ":var(--plasma-typo-h4-line-height);", ":var(--plasma-typo-h4-font-weight);", ":var(--plasma-typo-h4-bold-font-weight);", ":2.5rem;", ":2.5rem;", ":1rem;", ":0.625rem;"], calendarBaseTokens.calendarWidth, calendarBaseTokens.calendarHeight, calendarBaseTokens.calendarYearsPadding, calendarBaseTokens.calendarYearItemBorderRadius, calendarBaseTokens.calendarYearItemWidth, calendarBaseTokens.calendarYearItemHeight, calendarBaseTokens.calendarYearFontFamily, calendarBaseTokens.calendarYearFontSize, calendarBaseTokens.calendarYearFontStyle, calendarBaseTokens.calendarYearFontLetterSpacing, calendarBaseTokens.calendarYearFontLineHeight, calendarBaseTokens.calendarYearFontWeight, calendarBaseTokens.calendarYearSelectedFontWeight, calendarBaseTokens.calendarMonthsPadding, calendarBaseTokens.calendarMonthItemBorderRadius, calendarBaseTokens.calendarMonthItemWidth, calendarBaseTokens.calendarMonthItemHeight, calendarBaseTokens.calendarMonthFontFamily, calendarBaseTokens.calendarMonthFontSize, calendarBaseTokens.calendarMonthFontStyle, calendarBaseTokens.calendarMonthFontLetterSpacing, calendarBaseTokens.calendarMonthFontLineHeight, calendarBaseTokens.calendarMonthFontWeight, calendarBaseTokens.calendarMonthSelectedFontWeight, calendarBaseTokens.calendarDaysPadding, calendarBaseTokens.calendarDayItemBorderRadius, calendarBaseTokens.calendarDayItemWidth, calendarBaseTokens.calendarDayItemHeight, calendarBaseTokens.calendarDayFontFamily, calendarBaseTokens.calendarDayFontSize, calendarBaseTokens.calendarDayFontStyle, calendarBaseTokens.calendarDayFontLetterSpacing, calendarBaseTokens.calendarDayFontLineHeight, calendarBaseTokens.calendarDayFontWeight, calendarBaseTokens.calendarDaySelectedFontWeight, calendarBaseTokens.calendarHeaderArrowGap, calendarBaseTokens.calendarHeaderPadding, calendarBaseTokens.calendarHeaderDateGap, calendarBaseTokens.calendarHeaderFontFamily, calendarBaseTokens.calendarHeaderFontSize, calendarBaseTokens.calendarHeaderFontStyle, calendarBaseTokens.calendarHeaderFontLetterSpacing, calendarBaseTokens.calendarHeaderFontLineHeight, calendarBaseTokens.calendarHeaderFontWeight, calendarBaseTokens.calendarHeaderFontWeightBold, calendarBaseTokens.iconButtonHeight, calendarBaseTokens.iconButtonWidth, calendarBaseTokens.iconButtonPadding, calendarBaseTokens.iconButtonRadius),
+      xs: /*#__PURE__*/css(["", ":17.5rem;", ":15.5rem;", ":0.375rem 0.25rem 0 0.25rem;", ":0.375rem;", ":5.625rem;", ":3.281rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-bold-font-weight);", ":0.375rem 0.25rem 0 0.25rem;", ":0.375rem;", ":5.625rem;", ":3.281rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-bold-font-weight);", ":0.375rem 0 0 0;", ":0.5rem;", ":2.5rem;", ":1.875rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-bold-font-weight);", ":0;", ":0 0 0 0.5rem;", ":0.25rem;", ":var(--plasma-typo-h5-font-family);", ":var(--plasma-typo-h5-font-size);", ":var(--plasma-typo-h5-font-style);", ":var(--plasma-typo-h5-letter-spacing);", ":var(--plasma-typo-h5-line-height);", ":var(--plasma-typo-h5-font-weight);", ":var(--plasma-typo-h5-bold-font-weight);", ":2rem;", ":2rem;", ":0.75rem;", ":0.5rem;"], calendarBaseTokens.calendarWidth, calendarBaseTokens.calendarHeight, calendarBaseTokens.calendarYearsPadding, calendarBaseTokens.calendarYearItemBorderRadius, calendarBaseTokens.calendarYearItemWidth, calendarBaseTokens.calendarYearItemHeight, calendarBaseTokens.calendarYearFontFamily, calendarBaseTokens.calendarYearFontSize, calendarBaseTokens.calendarYearFontStyle, calendarBaseTokens.calendarYearFontLetterSpacing, calendarBaseTokens.calendarYearFontLineHeight, calendarBaseTokens.calendarYearFontWeight, calendarBaseTokens.calendarYearSelectedFontWeight, calendarBaseTokens.calendarMonthsPadding, calendarBaseTokens.calendarMonthItemBorderRadius, calendarBaseTokens.calendarMonthItemWidth, calendarBaseTokens.calendarMonthItemHeight, calendarBaseTokens.calendarMonthFontFamily, calendarBaseTokens.calendarMonthFontSize, calendarBaseTokens.calendarMonthFontStyle, calendarBaseTokens.calendarMonthFontLetterSpacing, calendarBaseTokens.calendarMonthFontLineHeight, calendarBaseTokens.calendarMonthFontWeight, calendarBaseTokens.calendarMonthSelectedFontWeight, calendarBaseTokens.calendarDaysPadding, calendarBaseTokens.calendarDayItemBorderRadius, calendarBaseTokens.calendarDayItemWidth, calendarBaseTokens.calendarDayItemHeight, calendarBaseTokens.calendarDayFontFamily, calendarBaseTokens.calendarDayFontSize, calendarBaseTokens.calendarDayFontStyle, calendarBaseTokens.calendarDayFontLetterSpacing, calendarBaseTokens.calendarDayFontLineHeight, calendarBaseTokens.calendarDayFontWeight, calendarBaseTokens.calendarDaySelectedFontWeight, calendarBaseTokens.calendarHeaderArrowGap, calendarBaseTokens.calendarHeaderPadding, calendarBaseTokens.calendarHeaderDateGap, calendarBaseTokens.calendarHeaderFontFamily, calendarBaseTokens.calendarHeaderFontSize, calendarBaseTokens.calendarHeaderFontStyle, calendarBaseTokens.calendarHeaderFontLetterSpacing, calendarBaseTokens.calendarHeaderFontLineHeight, calendarBaseTokens.calendarHeaderFontWeight, calendarBaseTokens.calendarHeaderFontWeightBold, calendarBaseTokens.iconButtonHeight, calendarBaseTokens.iconButtonWidth, calendarBaseTokens.iconButtonPadding, calendarBaseTokens.iconButtonRadius)
     }
   }
 };