@salutejs/plasma-new-hope 0.343.0-canary.2358.19757641000.0 → 0.343.0-canary.2362.19765218937.0

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

@@ -8,13 +8,13 @@ var mergedConfig = mergeConfig(tooltipConfig);
 var Tooltip = component(mergedConfig);
 export var InputWrapper = styled.div.withConfig({
     displayName: "TextField.styles__InputWrapper",
-    componentId: "sc-708c1a6a-0"
+    componentId: "sc-a8826f8a-0"
 })([
     "position:relative;display:flex;align-items:center;box-sizing:border-box;"
 ]);
 export var InputLabelWrapper = styled.div.withConfig({
     displayName: "TextField.styles__InputLabelWrapper",
-    componentId: "sc-708c1a6a-1"
+    componentId: "sc-a8826f8a-1"
 })([
     "flex:1;overflow:scroll;position:relative;width:100%;display:inline-flex;align-items:center;::-webkit-scrollbar{display:none;}scrollbar-width:none;overscroll-behavior:contain;&.",
     "{height:var(",
@@ -23,7 +23,7 @@ export var InputLabelWrapper = styled.div.withConfig({
 ], String(classes.hasChips), tokens.chipHeight, tokens.chipBorderRadius);
 export var StyledChips = styled.div.withConfig({
     displayName: "TextField.styles__StyledChips",
-    componentId: "sc-708c1a6a-2"
+    componentId: "sc-a8826f8a-2"
 })([
     "display:flex;gap:var(",
     ");margin-right:var(",
@@ -32,7 +32,7 @@ export var StyledChips = styled.div.withConfig({
 ], tokens.chipGap, tokens.chipMarginRight, tokens.chipGap);
 export var Input = styled.input.withConfig({
     displayName: "TextField.styles__Input",
-    componentId: "sc-708c1a6a-3"
+    componentId: "sc-a8826f8a-3"
 })([
     "box-sizing:border-box;appearance:none;border:0;padding:0;background-color:transparent;outline:none;width:100%;z-index:1;&.",
     "{",
@@ -40,7 +40,7 @@ export var Input = styled.input.withConfig({
 ], classes.inputTextEllipsis, applyEllipsis());
 export var InputContainer = styled.div.withConfig({
     displayName: "TextField.styles__InputContainer",
-    componentId: "sc-708c1a6a-4"
+    componentId: "sc-a8826f8a-4"
 })([
     "position:relative;display:flex;flex:1;min-width:",
     ";",
@@ -55,7 +55,7 @@ export var InputContainer = styled.div.withConfig({
 });
 export var InputPlaceholder = styled.div.withConfig({
     displayName: "TextField.styles__InputPlaceholder",
-    componentId: "sc-708c1a6a-5"
+    componentId: "sc-a8826f8a-5"
 })([
     "display:flex;position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;white-space:nowrap;pointer-events:none;user-select:none;font:inherit;letter-spacing:inherit;line-height:inherit;color:var(",
     ");padding:",
@@ -66,7 +66,7 @@ export var InputPlaceholder = styled.div.withConfig({
 });
 export var InputPlaceholderValue = styled.div.withConfig({
     displayName: "TextField.styles__InputPlaceholderValue",
-    componentId: "sc-708c1a6a-6"
+    componentId: "sc-a8826f8a-6"
 })([
     "&.",
     "{",
@@ -74,7 +74,7 @@ export var InputPlaceholderValue = styled.div.withConfig({
 ], classes.inputTextEllipsis, applyEllipsis());
 export var OuterLabelWrapper = styled.div.withConfig({
     displayName: "TextField.styles__OuterLabelWrapper",
-    componentId: "sc-708c1a6a-7"
+    componentId: "sc-a8826f8a-7"
 })([
     "display:flex;align-items:center;white-space:",
     ";margin-bottom:",
@@ -88,43 +88,44 @@ export var OuterLabelWrapper = styled.div.withConfig({
 });
 export var TitleCaption = styled.div.withConfig({
     displayName: "TextField.styles__TitleCaption",
-    componentId: "sc-708c1a6a-8"
+    componentId: "sc-a8826f8a-8"
 })([
     "display:inline-block;margin-left:auto;"
 ]);
 export var StyledIndicatorWrapper = styled.div.withConfig({
     displayName: "TextField.styles__StyledIndicatorWrapper",
-    componentId: "sc-708c1a6a-9"
+    componentId: "sc-a8826f8a-9"
 })([
     "position:relative;display:inline-flex;align-items:center;"
 ]);
 export var Label = styled.label.withConfig({
     displayName: "TextField.styles__Label",
-    componentId: "sc-708c1a6a-10"
+    componentId: "sc-a8826f8a-10"
 })([
     "display:inline-flex;"
 ]);
 export var StyledContentLeft = styled.div.withConfig({
     displayName: "TextField.styles__StyledContentLeft",
-    componentId: "sc-708c1a6a-11"
+    componentId: "sc-a8826f8a-11"
 })([
-    "margin:var(",
-    ");color:var(",
-    ");line-height:0;&:hover{color:var(",
-    ",var(",
-    "));}&:active{color:var(",
-    ",var(",
-    "));}"
-], tokens.leftContentMargin, tokens.contentSlotColor, tokens.contentSlotColorHover, tokens.contentSlotColor, tokens.contentSlotColorActive, tokens.contentSlotColor);
+    "--private_content-slot-color:",
+    ";margin:var(",
+    ");color:var(--private_content-slot-color);line-height:0;&:hover{color:var(",
+    ",var(--private_content-slot-color));}&:active{color:var(",
+    ",var(--private_content-slot-color));}"
+], function(param) {
+    var isDefaultView = param.isDefaultView, isClear = param.isClear;
+    return !isDefaultView && isClear ? "var(".concat(tokens.clearColor, ")") : "var(".concat(tokens.contentSlotColor, ")");
+}, tokens.leftContentMargin, tokens.contentSlotColorHover, tokens.contentSlotColorActive);
 export var StyledContentRightWrapper = styled.div.withConfig({
     displayName: "TextField.styles__StyledContentRightWrapper",
-    componentId: "sc-708c1a6a-12"
+    componentId: "sc-a8826f8a-12"
 })([
     "display:flex;align-items:center;"
 ]);
 export var StyledContentRight = styled.div.withConfig({
     displayName: "TextField.styles__StyledContentRight",
-    componentId: "sc-708c1a6a-13"
+    componentId: "sc-a8826f8a-13"
 })([
     "line-height:0;margin:var(",
     ");color:var(",
@@ -137,13 +138,13 @@ export var StyledContentRight = styled.div.withConfig({
 ], tokens.rightContentMargin, tokens.contentSlotRightColor, tokens.contentSlotColor, tokens.contentSlotRightColorHover, tokens.contentSlotColorHover, tokens.contentSlotRightColorActive, tokens.contentSlotColorActive);
 export var LeftHelper = styled.div.withConfig({
     displayName: "TextField.styles__LeftHelper",
-    componentId: "sc-708c1a6a-14"
+    componentId: "sc-a8826f8a-14"
 })([
     ""
 ]);
 export var StyledTextBefore = styled.div.withConfig({
     displayName: "TextField.styles__StyledTextBefore",
-    componentId: "sc-708c1a6a-15"
+    componentId: "sc-a8826f8a-15"
 })([
     "visibility:",
     ";"
@@ -153,20 +154,20 @@ export var StyledTextBefore = styled.div.withConfig({
 });
 export var StyledTextAfter = styled.div.withConfig({
     displayName: "TextField.styles__StyledTextAfter",
-    componentId: "sc-708c1a6a-16"
+    componentId: "sc-a8826f8a-16"
 })([
     ""
 ]);
 export var StyledOptionalText = styled.span.withConfig({
     displayName: "TextField.styles__StyledOptionalText",
-    componentId: "sc-708c1a6a-17"
+    componentId: "sc-a8826f8a-17"
 })([
     "color:var(",
     ");"
 ], tokens.optionalColor);
 export var StyledHintWrapper = styled.div.withConfig({
     displayName: "TextField.styles__StyledHintWrapper",
-    componentId: "sc-708c1a6a-18"
+    componentId: "sc-a8826f8a-18"
 })([
     "display:inline-block;line-height:0;&.",
     "{position:absolute;margin:0;inset:var(",
@@ -174,14 +175,14 @@ export var StyledHintWrapper = styled.div.withConfig({
 ], classes.innerLabelPlacement, tokens.hintInnerLabelPlacementOffset);
 export var HintTargetWrapper = styled.div.withConfig({
     displayName: "TextField.styles__HintTargetWrapper",
-    componentId: "sc-708c1a6a-19"
+    componentId: "sc-a8826f8a-19"
 })([
     "color:var(",
     ");display:flex;justify-content:center;align-items:center;"
 ], tokens.hintIconColor);
 export var Hint = styled(Tooltip).withConfig({
     displayName: "TextField.styles__Hint",
-    componentId: "sc-708c1a6a-20"
+    componentId: "sc-a8826f8a-20"
 })([
     "",
     " .",
@@ -189,13 +190,13 @@ export var Hint = styled(Tooltip).withConfig({
 ], HintTargetWrapper, popoverClasses.root);
 export var HintIconWrapper = styled.div.withConfig({
     displayName: "TextField.styles__HintIconWrapper",
-    componentId: "sc-708c1a6a-21"
+    componentId: "sc-a8826f8a-21"
 })([
     "display:flex;"
 ]);
 export var StyledIndicator = styled.div.withConfig({
     displayName: "TextField.styles__StyledIndicator",
-    componentId: "sc-708c1a6a-22"
+    componentId: "sc-a8826f8a-22"
 })([
     "position:absolute;border-radius:50%;background-color:var(",
     ");&.",

package/styled-components/es/components/TextField/variations/_clear/base.js

@@ -0,0 +1,42 @@
+import { css } from "styled-components";
+import { classes, tokens } from "../../TextField.tokens";
+import { Input, InputPlaceholder, InputWrapper, OuterLabelWrapper, StyledContentLeft, StyledContentRight, StyledHintWrapper, StyledIndicator } from "../../TextField.styles";
+export var base = css([
+    "&.",
+    "{&[readonly] ",
+    ",",
+    "{background-color:unset;box-shadow:none;border-radius:0;padding-left:0;padding-right:0;&:hover{background-color:unset;}}",
+    "{margin-left:0;}",
+    "{margin-right:0;}&.",
+    "{",
+    "{margin-bottom:var(",
+    ");}}",
+    "{color:var(",
+    ");}",
+    "{color:var(",
+    ");}",
+    "{&.",
+    "{inset:var(",
+    ");&.",
+    "{inset:var(",
+    ");}}}&.",
+    "{",
+    "{&.",
+    "{inset:var(",
+    ");}}",
+    "{&.",
+    ".",
+    "{inset:var(",
+    ");}}}&.",
+    "{",
+    "{--plasma_private-textfield-divider-color:var(",
+    ");&:before{content:'';position:absolute;height:0.063rem;width:100%;bottom:0;left:0;background-color:var(--plasma_private-textfield-divider-color);transition:background-color 0.1s ease-in;}}&:not([readonly]) ",
+    ":hover{--plasma_private-textfield-divider-color:var( ",
+    ",var(",
+    ") );}&:not([readonly]) ",
+    ":focus-within{--plasma_private-textfield-divider-color:var( ",
+    ",var(",
+    ") );",
+    "{color:var(",
+    ");}}}}"
+], classes.clear, InputWrapper, InputWrapper, StyledContentLeft, StyledContentRight, classes.outerLabelPlacement, OuterLabelWrapper, tokens.clearLabelOffset, Input, tokens.clearColor, InputPlaceholder, tokens.clearPlaceholderColor, StyledIndicator, classes.innerLabelPlacement, tokens.clearIndicatorLabelPlacementInner, classes.requiredAlignRight, tokens.clearIndicatorLabelPlacementInnerRight, classes.hasHint, StyledHintWrapper, classes.innerLabelPlacement, tokens.clearHintInnerLabelPlacementOffset, StyledIndicator, classes.innerLabelPlacement, classes.requiredAlignRight, tokens.clearIndicatorHintInnerRight, classes.hasDivider, InputWrapper, String(tokens.dividerColor), InputWrapper, tokens.dividerColorHover, String(tokens.dividerColor), InputWrapper, tokens.dividerColorFocus, String(tokens.dividerColor), InputPlaceholder, tokens.clearPlaceholderColorFocus);

package/styled-components/es/components/TextField/variations/_label-placement/base.js

@@ -1,6 +1,6 @@
 import { css } from "styled-components";
 import { classes, tokens } from "../../TextField.tokens";
-import { Input, InputContainer, Label, StyledIndicator } from "../../TextField.styles";
+import { Input, InputContainer, Label } from "../../TextField.styles";
 export var base = css([
     "&.",
     "{",
@@ -28,9 +28,7 @@ export var base = css([
     ");}",
     "{color:var(",
     ");pointer-events:none;position:absolute;top:0;display:flex;align-items:center;box-sizing:border-box;height:100%;width:100%;}&.",
-    "{",
-    "{&.",
-    ".",
-    "{inset:var(",
-    ");}}}}"
-], classes.outerLabelPlacement, Label, tokens.labelColor, classes.innerLabelPlacement, InputContainer, tokens.contentLabelInnerPadding, Input, classes.readOnlyInput, Label, Input, classes.hasValue, Label, Input, classes.keepPlaceholder, Label, tokens.placeholderColor, tokens.labelInnerPadding, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight, Label, tokens.placeholderColor, classes.hasHint, StyledIndicator, classes.innerLabelPlacement, classes.requiredAlignRight, tokens.clearIndicatorHintInnerRight);
+    " ",
+    "{color:var(",
+    ");}}"
+], classes.outerLabelPlacement, Label, tokens.labelColor, classes.innerLabelPlacement, InputContainer, tokens.contentLabelInnerPadding, Input, classes.readOnlyInput, Label, Input, classes.hasValue, Label, Input, classes.keepPlaceholder, Label, tokens.placeholderColor, tokens.labelInnerPadding, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight, Label, tokens.placeholderColor, classes.clear, Label, tokens.clearPlaceholderColor);

package/styled-components/es/components/TextField/variations/_read-only/base.js

@@ -2,14 +2,15 @@ import { css } from "styled-components";
 import { classes, tokens } from "../../TextField.tokens";
 import { Input, InputPlaceholder, InputWrapper, Label, LeftHelper, StyledContentLeft, StyledContentRight, TitleCaption } from "../../TextField.styles";
 export var base = css([
-    "&[readonly]{",
+    "&[readonly]{:not(&.",
+    "){",
     "{position:relative;z-index:0;color:var(",
     ");background:transparent;box-shadow:none;:before{position:absolute;content:'';top:0;left:0;right:0;bottom:0;border-radius:var(",
     ");background-color:var(",
     ");opacity:var(",
     ");box-shadow:inset 0 0 0 var(",
     ") var(",
-    ");z-index:-1;}:hover{background-color:transparent;}}&.",
+    ");z-index:-1;}:hover{background-color:transparent;}}}&.",
     " ",
     "{&:before{background-color:var(",
     ");}}",
@@ -33,4 +34,4 @@ export var base = css([
     " ",
     "{color:var(",
     ");}}"
-], InputWrapper, tokens.colorReadOnly, tokens.borderRadius, tokens.backgroundColorReadOnly, tokens.readOnlyOpacity, String(tokens.borderWidth), tokens.borderColorReadOnly, classes.hasDivider, InputWrapper, String(tokens.dividerColorReadOnly), InputWrapper, InputPlaceholder, InputPlaceholder, tokens.placeholderColorReadOnly, Input, tokens.colorReadOnly, TitleCaption, tokens.titleCaptionColorReadOnly, LeftHelper, tokens.leftHelperColorReadOnly, StyledContentLeft, StyledContentRight, tokens.contentSlotRightOpacityReadOnly, StyledContentRight, StyledContentRight, tokens.contentSlotRightColor, tokens.contentSlotColor, classes.outerLabelPlacement, Label, tokens.labelColorReadOnly);
+], classes.clear, InputWrapper, tokens.colorReadOnly, tokens.borderRadius, tokens.backgroundColorReadOnly, tokens.readOnlyOpacity, String(tokens.borderWidth), tokens.borderColorReadOnly, classes.hasDivider, InputWrapper, String(tokens.dividerColorReadOnly), InputWrapper, InputPlaceholder, InputPlaceholder, tokens.placeholderColorReadOnly, Input, tokens.colorReadOnly, TitleCaption, tokens.titleCaptionColorReadOnly, LeftHelper, tokens.leftHelperColorReadOnly, StyledContentLeft, StyledContentRight, tokens.contentSlotRightOpacityReadOnly, StyledContentRight, StyledContentRight, tokens.contentSlotRightColor, tokens.contentSlotColor, classes.outerLabelPlacement, Label, tokens.labelColorReadOnly);

package/styled-components/es/components/TextField/variations/_view/base.js

@@ -1,5 +1,5 @@
 import { css } from "styled-components";
-import { classes, tokens } from "../../TextField.tokens";
+import { tokens } from "../../TextField.tokens";
 import { Input, InputPlaceholder, InputWrapper, LeftHelper, StyledTextAfter, StyledTextBefore, TitleCaption } from "../../TextField.styles";
 export var base = css([
     "",
@@ -33,16 +33,5 @@ export var base = css([
     "{color:var(",
     ");}",
     "{color:var(",
-    ");}&.",
-    "{",
-    "{--plasma_private-textfield-divider-color:var(",
-    ");&:before{content:'';position:absolute;height:0.063rem;width:100%;bottom:0;left:0;background-color:var(--plasma_private-textfield-divider-color);transition:background-color 0.1s ease-in;}}&:not([readonly]) ",
-    ":hover{--plasma_private-textfield-divider-color:var( ",
-    ",var(",
-    ") );}&:not([readonly]) ",
-    ":focus-within{--plasma_private-textfield-divider-color:var( ",
-    ",var(",
-    ") );",
-    "{color:var(",
-    ");}}}"
-], InputWrapper, String(tokens.borderColor), String(tokens.backgroundColor), tokens.color, tokens.borderWidth, tokens.boxShadow, tokens.caretColor, InputWrapper, tokens.borderColorHover, String(tokens.borderColor), tokens.backgroundColorHover, String(tokens.backgroundColor), Input, tokens.color, InputPlaceholder, tokens.placeholderColor, InputWrapper, tokens.borderColorFocus, String(tokens.borderColor), tokens.backgroundColorFocus, String(tokens.backgroundColor), InputPlaceholder, tokens.placeholderColorFocus, TitleCaption, tokens.titleCaptionColor, LeftHelper, tokens.leftHelperColor, StyledTextBefore, tokens.textBeforeColor, StyledTextAfter, tokens.textAfterColor, classes.hasDivider, InputWrapper, String(tokens.dividerColor), InputWrapper, tokens.dividerColorHover, String(tokens.dividerColor), InputWrapper, tokens.dividerColorFocus, String(tokens.dividerColor), InputPlaceholder, tokens.clearPlaceholderColorFocus);
+    ");}"
+], InputWrapper, String(tokens.borderColor), String(tokens.backgroundColor), tokens.color, tokens.borderWidth, tokens.boxShadow, tokens.caretColor, InputWrapper, tokens.borderColorHover, String(tokens.borderColor), tokens.backgroundColorHover, String(tokens.backgroundColor), Input, tokens.color, InputPlaceholder, tokens.placeholderColor, InputWrapper, tokens.borderColorFocus, String(tokens.borderColor), tokens.backgroundColorFocus, String(tokens.backgroundColor), InputPlaceholder, tokens.placeholderColorFocus, TitleCaption, tokens.titleCaptionColor, LeftHelper, tokens.leftHelperColor, StyledTextBefore, tokens.textBeforeColor, StyledTextAfter, tokens.textAfterColor);

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

@@ -44,11 +44,68 @@ export var config = {
             ], 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.calendarContentPrimaryDisabledColor, calendarBaseTokens.calendarContentSecondaryColor, calendarBaseTokens.calendarContentSecondaryDisabledColor, calendarBaseTokens.calendarHeaderArrowColor, calendarBaseTokens.calendarContentPrimaryColor, calendarBaseTokens.calendarDayOfWeekColor, calendarBaseTokens.calendarDisabledOpacity, calendarBaseTokens.iconButtonColor, calendarBaseTokens.iconButtonBackgroundColor, calendarBaseTokens.iconButtonColorHover, calendarBaseTokens.iconButtonBackgroundColorHover, calendarBaseTokens.iconButtonColorActive, calendarBaseTokens.iconButtonBackgroundColorActive, calendarBaseTokens.iconButtonFocusColor, calendarBaseTokens.tooltipBackgroundColor, calendarBaseTokens.tooltipBoxShadow, calendarBaseTokens.tooltipColor)
         },
         size: {
+            xl: css([
+                "",
+                ":28rem;",
+                ":28.75rem;",
+                ":0.5rem 0.25rem 0 0.25rem;",
+                ":0.875rem;",
+                ":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.25rem 0 0.25rem;",
+                ":0.875rem;",
+                ":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.25rem 0 0.25rem;",
+                ":0.875rem;",
+                ":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.875rem;",
+                ":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.063rem;",
+                ":0;",
+                ":1.5rem;",
+                ":0 0 0 1rem;",
+                ":0.25rem;",
+                ":var(--plasma-typo-h3-font-family);",
+                ":var(--plasma-typo-h3-font-size);",
+                ":var(--plasma-typo-h3-font-style);",
+                ":var(--plasma-typo-h3-letter-spacing);",
+                ":var(--plasma-typo-h3-line-height);",
+                ":var(--plasma-typo-h3-font-weight);",
+                ":var(--plasma-typo-h3-bold-font-weight);",
+                ":4rem;",
+                ":4rem;",
+                ":1.25rem;",
+                ":1rem;"
+            ], calendarBaseTokens.calendarContainerWidth, calendarBaseTokens.calendarContainerHeight, calendarBaseTokens.calendarYearsPadding, calendarBaseTokens.calendarYearItemBorderRadius, calendarBaseTokens.calendarYearFontFamily, calendarBaseTokens.calendarYearFontSize, calendarBaseTokens.calendarYearFontStyle, calendarBaseTokens.calendarYearFontLetterSpacing, calendarBaseTokens.calendarYearFontLineHeight, calendarBaseTokens.calendarYearFontWeight, calendarBaseTokens.calendarYearSelectedFontWeight, calendarBaseTokens.calendarQuartersPadding, calendarBaseTokens.calendarQuarterItemBorderRadius, calendarBaseTokens.calendarQuarterFontFamily, calendarBaseTokens.calendarQuarterFontSize, calendarBaseTokens.calendarQuarterFontStyle, calendarBaseTokens.calendarQuarterFontLetterSpacing, calendarBaseTokens.calendarQuarterFontLineHeight, calendarBaseTokens.calendarQuarterFontWeight, calendarBaseTokens.calendarQuarterSelectedFontWeight, calendarBaseTokens.calendarMonthsPadding, calendarBaseTokens.calendarMonthItemBorderRadius, calendarBaseTokens.calendarMonthFontFamily, calendarBaseTokens.calendarMonthFontSize, calendarBaseTokens.calendarMonthFontStyle, calendarBaseTokens.calendarMonthFontLetterSpacing, calendarBaseTokens.calendarMonthFontLineHeight, calendarBaseTokens.calendarMonthFontWeight, calendarBaseTokens.calendarMonthSelectedFontWeight, calendarBaseTokens.calendarDaysPadding, calendarBaseTokens.calendarDayItemBorderRadius, calendarBaseTokens.calendarDayFontFamily, calendarBaseTokens.calendarDayFontSize, calendarBaseTokens.calendarDayFontStyle, calendarBaseTokens.calendarDayFontLetterSpacing, calendarBaseTokens.calendarDayFontLineHeight, calendarBaseTokens.calendarDayFontWeight, calendarBaseTokens.calendarDaySelectedFontWeight, calendarBaseTokens.calendarCurrentItemBorderWidth, calendarBaseTokens.calendarHeaderArrowGap, calendarBaseTokens.calendarArrowHeaderCustomSize, 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),
             l: css([
                 "",
                 ":24.5rem;",
                 ":25rem;",
-                ":0.5rem 0.5rem 0 0.5rem;",
+                ":0.5rem 0.25rem 0 0.25rem;",
                 ":0.75rem;",
                 ":var(--plasma-typo-body-l-font-family);",
                 ":var(--plasma-typo-body-l-font-size);",
@@ -57,7 +114,7 @@ export var config = {
                 ":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.5rem 0.25rem 0 0.25rem;",
                 ":0.75rem;",
                 ":var(--plasma-typo-body-l-font-family);",
                 ":var(--plasma-typo-body-l-font-size);",
@@ -66,7 +123,7 @@ export var config = {
                 ":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.5rem 0.25rem 0 0.25rem;",
                 ":0.75rem;",
                 ":var(--plasma-typo-body-l-font-family);",
                 ":var(--plasma-typo-body-l-font-size);",
@@ -85,27 +142,27 @@ export var config = {
                 ":var(--plasma-typo-body-l-font-weight);",
                 ":var(--plasma-typo-body-l-bold-font-weight);",
                 ":0.063rem;",
-                ":0.5rem;",
+                ":0;",
                 ":1.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);",
+                ":0.25rem;",
+                ":var(--plasma-typo-h3-font-family);",
+                ":var(--plasma-typo-h3-font-size);",
+                ":var(--plasma-typo-h3-font-style);",
+                ":var(--plasma-typo-h3-letter-spacing);",
+                ":var(--plasma-typo-h3-line-height);",
+                ":var(--plasma-typo-h3-font-weight);",
+                ":var(--plasma-typo-h3-bold-font-weight);",
                 ":3.5rem;",
                 ":3.5rem;",
-                ":1.5rem;",
+                ":1rem;",
                 ":0.875rem;"
             ], calendarBaseTokens.calendarContainerWidth, calendarBaseTokens.calendarContainerHeight, calendarBaseTokens.calendarYearsPadding, calendarBaseTokens.calendarYearItemBorderRadius, calendarBaseTokens.calendarYearFontFamily, calendarBaseTokens.calendarYearFontSize, calendarBaseTokens.calendarYearFontStyle, calendarBaseTokens.calendarYearFontLetterSpacing, calendarBaseTokens.calendarYearFontLineHeight, calendarBaseTokens.calendarYearFontWeight, calendarBaseTokens.calendarYearSelectedFontWeight, calendarBaseTokens.calendarQuartersPadding, calendarBaseTokens.calendarQuarterItemBorderRadius, calendarBaseTokens.calendarQuarterFontFamily, calendarBaseTokens.calendarQuarterFontSize, calendarBaseTokens.calendarQuarterFontStyle, calendarBaseTokens.calendarQuarterFontLetterSpacing, calendarBaseTokens.calendarQuarterFontLineHeight, calendarBaseTokens.calendarQuarterFontWeight, calendarBaseTokens.calendarQuarterSelectedFontWeight, calendarBaseTokens.calendarMonthsPadding, calendarBaseTokens.calendarMonthItemBorderRadius, calendarBaseTokens.calendarMonthFontFamily, calendarBaseTokens.calendarMonthFontSize, calendarBaseTokens.calendarMonthFontStyle, calendarBaseTokens.calendarMonthFontLetterSpacing, calendarBaseTokens.calendarMonthFontLineHeight, calendarBaseTokens.calendarMonthFontWeight, calendarBaseTokens.calendarMonthSelectedFontWeight, calendarBaseTokens.calendarDaysPadding, calendarBaseTokens.calendarDayItemBorderRadius, calendarBaseTokens.calendarDayFontFamily, calendarBaseTokens.calendarDayFontSize, calendarBaseTokens.calendarDayFontStyle, calendarBaseTokens.calendarDayFontLetterSpacing, calendarBaseTokens.calendarDayFontLineHeight, calendarBaseTokens.calendarDayFontWeight, calendarBaseTokens.calendarDaySelectedFontWeight, calendarBaseTokens.calendarCurrentItemBorderWidth, calendarBaseTokens.calendarHeaderArrowGap, calendarBaseTokens.calendarArrowHeaderCustomSize, 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: css([
                 "",
                 ":21rem;",
                 ":21rem;",
-                ":0.5rem 0.5rem 0 0.5rem;",
+                ":0.375rem 0.25rem 0 0.25rem;",
                 ":0.625rem;",
                 ":var(--plasma-typo-body-m-font-family);",
                 ":var(--plasma-typo-body-m-font-size);",
@@ -114,7 +171,7 @@ export var config = {
                 ":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.375rem 0.25rem 0 0.25rem;",
                 ":0.625rem;",
                 ":var(--plasma-typo-body-m-font-family);",
                 ":var(--plasma-typo-body-m-font-size);",
@@ -123,7 +180,7 @@ export var config = {
                 ":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.375rem 0.25rem 0 0.25rem;",
                 ":0.625rem;",
                 ":var(--plasma-typo-body-m-font-family);",
                 ":var(--plasma-typo-body-m-font-size);",
@@ -132,7 +189,7 @@ export var config = {
                 ":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.375rem 0 0 0;",
                 ":0.625rem;",
                 ":var(--plasma-typo-body-m-font-family);",
                 ":var(--plasma-typo-body-m-font-size);",
@@ -142,10 +199,10 @@ export var config = {
                 ":var(--plasma-typo-body-m-font-weight);",
                 ":var(--plasma-typo-body-m-bold-font-weight);",
                 ":0.063rem;",
-                ":0.5rem;",
+                ":0;",
                 ":1.5rem;",
                 ":0 0 0 0.75rem;",
-                ":0.375rem;",
+                ":0.25rem;",
                 ":var(--plasma-typo-h4-font-family);",
                 ":var(--plasma-typo-h4-font-size);",
                 ":var(--plasma-typo-h4-font-style);",
@@ -155,14 +212,14 @@ export var config = {
                 ":var(--plasma-typo-h4-bold-font-weight);",
                 ":3rem;",
                 ":3rem;",
-                ":1.25rem;",
+                ":0.75rem;",
                 ":0.75rem;"
             ], calendarBaseTokens.calendarContainerWidth, calendarBaseTokens.calendarContainerHeight, calendarBaseTokens.calendarYearsPadding, calendarBaseTokens.calendarYearItemBorderRadius, calendarBaseTokens.calendarYearFontFamily, calendarBaseTokens.calendarYearFontSize, calendarBaseTokens.calendarYearFontStyle, calendarBaseTokens.calendarYearFontLetterSpacing, calendarBaseTokens.calendarYearFontLineHeight, calendarBaseTokens.calendarYearFontWeight, calendarBaseTokens.calendarYearSelectedFontWeight, calendarBaseTokens.calendarQuartersPadding, calendarBaseTokens.calendarQuarterItemBorderRadius, calendarBaseTokens.calendarQuarterFontFamily, calendarBaseTokens.calendarQuarterFontSize, calendarBaseTokens.calendarQuarterFontStyle, calendarBaseTokens.calendarQuarterFontLetterSpacing, calendarBaseTokens.calendarQuarterFontLineHeight, calendarBaseTokens.calendarQuarterFontWeight, calendarBaseTokens.calendarQuarterSelectedFontWeight, calendarBaseTokens.calendarMonthsPadding, calendarBaseTokens.calendarMonthItemBorderRadius, calendarBaseTokens.calendarMonthFontFamily, calendarBaseTokens.calendarMonthFontSize, calendarBaseTokens.calendarMonthFontStyle, calendarBaseTokens.calendarMonthFontLetterSpacing, calendarBaseTokens.calendarMonthFontLineHeight, calendarBaseTokens.calendarMonthFontWeight, calendarBaseTokens.calendarMonthSelectedFontWeight, calendarBaseTokens.calendarDaysPadding, calendarBaseTokens.calendarDayItemBorderRadius, calendarBaseTokens.calendarDayFontFamily, calendarBaseTokens.calendarDayFontSize, calendarBaseTokens.calendarDayFontStyle, calendarBaseTokens.calendarDayFontLetterSpacing, calendarBaseTokens.calendarDayFontLineHeight, calendarBaseTokens.calendarDayFontWeight, calendarBaseTokens.calendarDaySelectedFontWeight, calendarBaseTokens.calendarCurrentItemBorderWidth, calendarBaseTokens.calendarHeaderArrowGap, calendarBaseTokens.calendarArrowHeaderCustomSize, 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: css([
                 "",
                 ":17.5rem;",
                 ":17rem;",
-                ":0.5rem 0.5rem 0 0.5rem;",
+                ":0.375rem 0.25rem 0 0.25rem;",
                 ":0.5rem;",
                 ":var(--plasma-typo-body-s-font-family);",
                 ":var(--plasma-typo-body-s-font-size);",
@@ -171,7 +228,7 @@ export var config = {
                 ":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.375rem 0.25rem 0 0.25rem;",
                 ":0.5rem;",
                 ":var(--plasma-typo-body-s-font-family);",
                 ":var(--plasma-typo-body-s-font-size);",
@@ -180,7 +237,7 @@ export var config = {
                 ":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.375rem 0.25rem 0 0.25rem;",
                 ":0.5rem;",
                 ":var(--plasma-typo-body-s-font-family);",
                 ":var(--plasma-typo-body-s-font-size);",
@@ -189,7 +246,7 @@ export var config = {
                 ":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.375rem 0 0 0;",
                 ":0.5rem;",
                 ":var(--plasma-typo-body-s-font-family);",
                 ":var(--plasma-typo-body-s-font-size);",
@@ -199,7 +256,7 @@ export var config = {
                 ":var(--plasma-typo-body-s-font-weight);",
                 ":var(--plasma-typo-body-s-bold-font-weight);",
                 ":0.063rem;",
-                ":0.5rem;",
+                ":0;",
                 ":1.5rem;",
                 ":0 0 0 0.5rem;",
                 ":0.25rem;",
@@ -212,7 +269,7 @@ export var config = {
                 ":var(--plasma-typo-h4-bold-font-weight);",
                 ":2.5rem;",
                 ":2.5rem;",
-                ":1rem;",
+                ":0.5rem;",
                 ":0.625rem;"
             ], calendarBaseTokens.calendarContainerWidth, calendarBaseTokens.calendarContainerHeight, calendarBaseTokens.calendarYearsPadding, calendarBaseTokens.calendarYearItemBorderRadius, calendarBaseTokens.calendarYearFontFamily, calendarBaseTokens.calendarYearFontSize, calendarBaseTokens.calendarYearFontStyle, calendarBaseTokens.calendarYearFontLetterSpacing, calendarBaseTokens.calendarYearFontLineHeight, calendarBaseTokens.calendarYearFontWeight, calendarBaseTokens.calendarYearSelectedFontWeight, calendarBaseTokens.calendarQuartersPadding, calendarBaseTokens.calendarQuarterItemBorderRadius, calendarBaseTokens.calendarQuarterFontFamily, calendarBaseTokens.calendarQuarterFontSize, calendarBaseTokens.calendarQuarterFontStyle, calendarBaseTokens.calendarQuarterFontLetterSpacing, calendarBaseTokens.calendarQuarterFontLineHeight, calendarBaseTokens.calendarQuarterFontWeight, calendarBaseTokens.calendarQuarterSelectedFontWeight, calendarBaseTokens.calendarMonthsPadding, calendarBaseTokens.calendarMonthItemBorderRadius, calendarBaseTokens.calendarMonthFontFamily, calendarBaseTokens.calendarMonthFontSize, calendarBaseTokens.calendarMonthFontStyle, calendarBaseTokens.calendarMonthFontLetterSpacing, calendarBaseTokens.calendarMonthFontLineHeight, calendarBaseTokens.calendarMonthFontWeight, calendarBaseTokens.calendarMonthSelectedFontWeight, calendarBaseTokens.calendarDaysPadding, calendarBaseTokens.calendarDayItemBorderRadius, calendarBaseTokens.calendarDayFontFamily, calendarBaseTokens.calendarDayFontSize, calendarBaseTokens.calendarDayFontStyle, calendarBaseTokens.calendarDayFontLetterSpacing, calendarBaseTokens.calendarDayFontLineHeight, calendarBaseTokens.calendarDayFontWeight, calendarBaseTokens.calendarDaySelectedFontWeight, calendarBaseTokens.calendarCurrentItemBorderWidth, calendarBaseTokens.calendarHeaderArrowGap, calendarBaseTokens.calendarArrowHeaderCustomSize, 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: css([
@@ -220,7 +277,7 @@ export var config = {
                 ":17.5rem;",
                 ":15.5rem;",
                 ":0.375rem 0.25rem 0 0.25rem;",
-                ":0.375rem;",
+                ":0.5rem;",
                 ":var(--plasma-typo-body-xs-font-family);",
                 ":var(--plasma-typo-body-xs-font-size);",
                 ":var(--plasma-typo-body-xs-font-style);",
@@ -229,7 +286,7 @@ export var config = {
                 ":var(--plasma-typo-body-xs-font-weight);",
                 ":var(--plasma-typo-body-xs-bold-font-weight);",
                 ":0.375rem 0.25rem 0 0.25rem;",
-                ":0.375rem;",
+                ":0.5rem;",
                 ":var(--plasma-typo-body-xs-font-family);",
                 ":var(--plasma-typo-body-xs-font-size);",
                 ":var(--plasma-typo-body-xs-font-style);",
@@ -238,7 +295,7 @@ export var config = {
                 ":var(--plasma-typo-body-xs-font-weight);",
                 ":var(--plasma-typo-body-xs-bold-font-weight);",
                 ":0.375rem 0.25rem 0 0.25rem;",
-                ":0.375rem;",
+                ":0.5rem;",
                 ":var(--plasma-typo-body-xs-font-family);",
                 ":var(--plasma-typo-body-xs-font-size);",
                 ":var(--plasma-typo-body-xs-font-style);",
@@ -269,7 +326,7 @@ export var config = {
                 ":var(--plasma-typo-h5-bold-font-weight);",
                 ":2rem;",
                 ":2rem;",
-                ":0.75rem;",
+                ":0.5rem;",
                 ":0.5rem;"
             ], calendarBaseTokens.calendarContainerWidth, calendarBaseTokens.calendarContainerHeight, calendarBaseTokens.calendarYearsPadding, calendarBaseTokens.calendarYearItemBorderRadius, calendarBaseTokens.calendarYearFontFamily, calendarBaseTokens.calendarYearFontSize, calendarBaseTokens.calendarYearFontStyle, calendarBaseTokens.calendarYearFontLetterSpacing, calendarBaseTokens.calendarYearFontLineHeight, calendarBaseTokens.calendarYearFontWeight, calendarBaseTokens.calendarYearSelectedFontWeight, calendarBaseTokens.calendarQuartersPadding, calendarBaseTokens.calendarQuarterItemBorderRadius, calendarBaseTokens.calendarQuarterFontFamily, calendarBaseTokens.calendarQuarterFontSize, calendarBaseTokens.calendarQuarterFontStyle, calendarBaseTokens.calendarQuarterFontLetterSpacing, calendarBaseTokens.calendarQuarterFontLineHeight, calendarBaseTokens.calendarQuarterFontWeight, calendarBaseTokens.calendarQuarterSelectedFontWeight, calendarBaseTokens.calendarMonthsPadding, calendarBaseTokens.calendarMonthItemBorderRadius, calendarBaseTokens.calendarMonthFontFamily, calendarBaseTokens.calendarMonthFontSize, calendarBaseTokens.calendarMonthFontStyle, calendarBaseTokens.calendarMonthFontLetterSpacing, calendarBaseTokens.calendarMonthFontLineHeight, calendarBaseTokens.calendarMonthFontWeight, calendarBaseTokens.calendarMonthSelectedFontWeight, calendarBaseTokens.calendarDaysPadding, calendarBaseTokens.calendarDayItemBorderRadius, calendarBaseTokens.calendarDayFontFamily, calendarBaseTokens.calendarDayFontSize, calendarBaseTokens.calendarDayFontStyle, calendarBaseTokens.calendarDayFontLetterSpacing, calendarBaseTokens.calendarDayFontLineHeight, calendarBaseTokens.calendarDayFontWeight, calendarBaseTokens.calendarDaySelectedFontWeight, calendarBaseTokens.calendarCurrentItemBorderWidth, calendarBaseTokens.calendarHeaderArrowGap, calendarBaseTokens.calendarArrowHeaderCustomSize, 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)
         },