@salutejs/plasma-new-hope 0.339.0-canary.2299.18773440976.0 → 0.339.0-canary.2299.18840379933.0

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

@@ -13,7 +13,8 @@ var _Calendartokens = require("../../../components/Calendar/Calendar.tokens");
 var config = {
     defaults: {
         view: 'default',
-        size: 'm'
+        size: 'm',
+        tooltipSize: 'm'
     },
     variations: {
         view: {
@@ -46,8 +47,11 @@ var config = {
                 ":var(--surface-clear);",
                 ":var(--text-primary-hover);",
                 ":var(--surface-clear);",
-                ":var(--surface-accent);"
-            ], _Calendartokens.tokens.calendarSelectedItemBackground, _Calendartokens.tokens.calendarSelectedItemColor, _Calendartokens.tokens.calendarSelectableItemBackgroundHover, _Calendartokens.tokens.calendarCurrentItemBorderColor, _Calendartokens.tokens.calendarCurrentItemBackgroundHover, _Calendartokens.tokens.calendarCurrentItemColorHover, _Calendartokens.tokens.calendarCurrentItemChildBackgroundHover, _Calendartokens.tokens.calendarActiveItemBackground, _Calendartokens.tokens.calendarActiveItemColor, _Calendartokens.tokens.calendarHoveredItemBackground, _Calendartokens.tokens.calendarHoveredItemColor, _Calendartokens.tokens.calendarRangeBackground, _Calendartokens.tokens.calendarOutlineFocusColor, _Calendartokens.tokens.calendarContentPrimaryColor, _Calendartokens.tokens.calendarContentPrimaryDisabledColor, _Calendartokens.tokens.calendarContentSecondaryColor, _Calendartokens.tokens.calendarContentSecondaryDisabledColor, _Calendartokens.tokens.calendarHeaderArrowColor, _Calendartokens.tokens.calendarContentPrimaryColor, _Calendartokens.tokens.calendarDayOfWeekColor, _Calendartokens.tokens.calendarDisabledOpacity, _Calendartokens.tokens.iconButtonColor, _Calendartokens.tokens.iconButtonBackgroundColor, _Calendartokens.tokens.iconButtonColorHover, _Calendartokens.tokens.iconButtonBackgroundColorHover, _Calendartokens.tokens.iconButtonColorActive, _Calendartokens.tokens.iconButtonBackgroundColorActive, _Calendartokens.tokens.iconButtonFocusColor)
+                ":var(--surface-accent);",
+                ":var(--surface-solid-card-brightness);",
+                ":var(--shadow-down-hard-s);",
+                ":var(--text-primary);"
+            ], _Calendartokens.tokens.calendarSelectedItemBackground, _Calendartokens.tokens.calendarSelectedItemColor, _Calendartokens.tokens.calendarSelectableItemBackgroundHover, _Calendartokens.tokens.calendarCurrentItemBorderColor, _Calendartokens.tokens.calendarCurrentItemBackgroundHover, _Calendartokens.tokens.calendarCurrentItemColorHover, _Calendartokens.tokens.calendarCurrentItemChildBackgroundHover, _Calendartokens.tokens.calendarActiveItemBackground, _Calendartokens.tokens.calendarActiveItemColor, _Calendartokens.tokens.calendarHoveredItemBackground, _Calendartokens.tokens.calendarHoveredItemColor, _Calendartokens.tokens.calendarRangeBackground, _Calendartokens.tokens.calendarOutlineFocusColor, _Calendartokens.tokens.calendarContentPrimaryColor, _Calendartokens.tokens.calendarContentPrimaryDisabledColor, _Calendartokens.tokens.calendarContentSecondaryColor, _Calendartokens.tokens.calendarContentSecondaryDisabledColor, _Calendartokens.tokens.calendarHeaderArrowColor, _Calendartokens.tokens.calendarContentPrimaryColor, _Calendartokens.tokens.calendarDayOfWeekColor, _Calendartokens.tokens.calendarDisabledOpacity, _Calendartokens.tokens.iconButtonColor, _Calendartokens.tokens.iconButtonBackgroundColor, _Calendartokens.tokens.iconButtonColorHover, _Calendartokens.tokens.iconButtonBackgroundColorHover, _Calendartokens.tokens.iconButtonColorActive, _Calendartokens.tokens.iconButtonBackgroundColorActive, _Calendartokens.tokens.iconButtonFocusColor, _Calendartokens.tokens.tooltipBackgroundColor, _Calendartokens.tokens.tooltipBoxShadow, _Calendartokens.tokens.tooltipColor)
         },
         size: {
             l: (0, _styledcomponents.css)([
@@ -278,6 +282,52 @@ var config = {
                 ":0.75rem;",
                 ":0.5rem;"
             ], _Calendartokens.tokens.calendarContainerWidth, _Calendartokens.tokens.calendarContainerHeight, _Calendartokens.tokens.calendarYearsPadding, _Calendartokens.tokens.calendarYearItemBorderRadius, _Calendartokens.tokens.calendarYearFontFamily, _Calendartokens.tokens.calendarYearFontSize, _Calendartokens.tokens.calendarYearFontStyle, _Calendartokens.tokens.calendarYearFontLetterSpacing, _Calendartokens.tokens.calendarYearFontLineHeight, _Calendartokens.tokens.calendarYearFontWeight, _Calendartokens.tokens.calendarYearSelectedFontWeight, _Calendartokens.tokens.calendarQuartersPadding, _Calendartokens.tokens.calendarQuarterItemBorderRadius, _Calendartokens.tokens.calendarQuarterFontFamily, _Calendartokens.tokens.calendarQuarterFontSize, _Calendartokens.tokens.calendarQuarterFontStyle, _Calendartokens.tokens.calendarQuarterFontLetterSpacing, _Calendartokens.tokens.calendarQuarterFontLineHeight, _Calendartokens.tokens.calendarQuarterFontWeight, _Calendartokens.tokens.calendarQuarterSelectedFontWeight, _Calendartokens.tokens.calendarMonthsPadding, _Calendartokens.tokens.calendarMonthItemBorderRadius, _Calendartokens.tokens.calendarMonthFontFamily, _Calendartokens.tokens.calendarMonthFontSize, _Calendartokens.tokens.calendarMonthFontStyle, _Calendartokens.tokens.calendarMonthFontLetterSpacing, _Calendartokens.tokens.calendarMonthFontLineHeight, _Calendartokens.tokens.calendarMonthFontWeight, _Calendartokens.tokens.calendarMonthSelectedFontWeight, _Calendartokens.tokens.calendarDaysPadding, _Calendartokens.tokens.calendarDayItemBorderRadius, _Calendartokens.tokens.calendarDayFontFamily, _Calendartokens.tokens.calendarDayFontSize, _Calendartokens.tokens.calendarDayFontStyle, _Calendartokens.tokens.calendarDayFontLetterSpacing, _Calendartokens.tokens.calendarDayFontLineHeight, _Calendartokens.tokens.calendarDayFontWeight, _Calendartokens.tokens.calendarDaySelectedFontWeight, _Calendartokens.tokens.calendarCurrentItemBorderWidth, _Calendartokens.tokens.calendarHeaderArrowGap, _Calendartokens.tokens.calendarArrowHeaderCustomSize, _Calendartokens.tokens.calendarHeaderPadding, _Calendartokens.tokens.calendarHeaderDateGap, _Calendartokens.tokens.calendarHeaderFontFamily, _Calendartokens.tokens.calendarHeaderFontSize, _Calendartokens.tokens.calendarHeaderFontStyle, _Calendartokens.tokens.calendarHeaderFontLetterSpacing, _Calendartokens.tokens.calendarHeaderFontLineHeight, _Calendartokens.tokens.calendarHeaderFontWeight, _Calendartokens.tokens.calendarHeaderFontWeightBold, _Calendartokens.tokens.iconButtonHeight, _Calendartokens.tokens.iconButtonWidth, _Calendartokens.tokens.iconButtonPadding, _Calendartokens.tokens.iconButtonRadius)
+        },
+        eventTooltipSize: {
+            m: (0, _styledcomponents.css)([
+                "",
+                ":0.6875rem;",
+                ":0.875rem;",
+                ":0.6875rem;",
+                ":0.875rem;",
+                ":2.5rem;",
+                ":0.625rem;",
+                ":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-font-weight);",
+                ":var(--plasma-typo-body-s-letter-spacing);",
+                ":var(--plasma-typo-body-s-line-height);",
+                ":0.375rem;",
+                ":1.25rem;",
+                ":1.25rem;",
+                ':url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg==");',
+                ":0.5rem;",
+                ":0.625rem;",
+                ":var(--surface-solid-card-brightness);"
+            ], _Calendartokens.tokens.tooltipPaddingTop, _Calendartokens.tokens.tooltipPaddingRight, _Calendartokens.tokens.tooltipPaddingBottom, _Calendartokens.tokens.tooltipPaddingLeft, _Calendartokens.tokens.tooltipMinHeight, _Calendartokens.tokens.tooltipBorderRadius, _Calendartokens.tokens.tooltipTextFontFamily, _Calendartokens.tokens.tooltipTextFontSize, _Calendartokens.tokens.tooltipTextFontStyle, _Calendartokens.tokens.tooltipTextFontWeight, _Calendartokens.tokens.tooltipTextFontLetterSpacing, _Calendartokens.tokens.tooltipTextFontLineHeight, _Calendartokens.tokens.tooltipContentLeftMargin, _Calendartokens.tokens.tooltipArrowMaskWidth, _Calendartokens.tokens.tooltipArrowMaskHeight, _Calendartokens.tokens.tooltipArrowMaskImage, _Calendartokens.tokens.tooltipArrowHeight, _Calendartokens.tokens.tooltipArrowEdgeMargin, _Calendartokens.tokens.tooltipArrowBackground),
+            s: (0, _styledcomponents.css)([
+                "",
+                ":0.5rem;",
+                ":0.75rem;",
+                ":0.5rem;",
+                ":0.75rem;",
+                ":2rem;",
+                ":0.5rem;",
+                ":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-font-weight);",
+                ":var(--plasma-typo-body-xs-letter-spacing);",
+                ":var(--plasma-typo-body-xs-line-height);",
+                ":0.25rem;",
+                ":1rem;",
+                ":1rem;",
+                ':url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+");',
+                ":0.375rem;",
+                ":0.5625rem;",
+                ":var(--surface-solid-card-brightness);"
+            ], _Calendartokens.tokens.tooltipPaddingTop, _Calendartokens.tokens.tooltipPaddingRight, _Calendartokens.tokens.tooltipPaddingBottom, _Calendartokens.tokens.tooltipPaddingLeft, _Calendartokens.tokens.tooltipMinHeight, _Calendartokens.tokens.tooltipBorderRadius, _Calendartokens.tokens.tooltipTextFontFamily, _Calendartokens.tokens.tooltipTextFontSize, _Calendartokens.tokens.tooltipTextFontStyle, _Calendartokens.tokens.tooltipTextFontWeight, _Calendartokens.tokens.tooltipTextFontLetterSpacing, _Calendartokens.tokens.tooltipTextFontLineHeight, _Calendartokens.tokens.tooltipContentLeftMargin, _Calendartokens.tokens.tooltipArrowMaskWidth, _Calendartokens.tokens.tooltipArrowMaskHeight, _Calendartokens.tokens.tooltipArrowMaskImage, _Calendartokens.tokens.tooltipArrowHeight, _Calendartokens.tokens.tooltipArrowEdgeMargin, _Calendartokens.tokens.tooltipArrowBackground)
         }
     }
 };

package/styled-components/cjs/examples/components/Calendar/CalendarDouble.config.js

@@ -13,7 +13,8 @@ var _Calendartokens = require("../../../components/Calendar/Calendar.tokens");
 var config = {
     defaults: {
         view: 'default',
-        size: 'm'
+        size: 'm',
+        tooltipSize: 'm'
     },
     variations: {
         view: {
@@ -47,8 +48,11 @@ var config = {
                 ":var(--surface-clear);",
                 ":var(--text-primary-hover);",
                 ":var(--surface-clear);",
-                ":var(--surface-accent);"
-            ], _Calendartokens.tokens.calendarSeparatorBackground, _Calendartokens.tokens.calendarBackgroundColor, _Calendartokens.tokens.calendarSelectedItemBackground, _Calendartokens.tokens.calendarSelectedItemColor, _Calendartokens.tokens.calendarSelectableItemBackgroundHover, _Calendartokens.tokens.calendarCurrentItemBorderColor, _Calendartokens.tokens.calendarCurrentItemBackgroundHover, _Calendartokens.tokens.calendarCurrentItemColorHover, _Calendartokens.tokens.calendarCurrentItemChildBackgroundHover, _Calendartokens.tokens.calendarActiveItemBackground, _Calendartokens.tokens.calendarActiveItemColor, _Calendartokens.tokens.calendarHoveredItemBackground, _Calendartokens.tokens.calendarHoveredItemColor, _Calendartokens.tokens.calendarRangeBackground, _Calendartokens.tokens.calendarOutlineFocusColor, _Calendartokens.tokens.calendarContentPrimaryColor, _Calendartokens.tokens.calendarContentPrimaryDisabledColor, _Calendartokens.tokens.calendarHeaderArrowColor, _Calendartokens.tokens.calendarContentPrimaryColor, _Calendartokens.tokens.calendarContentSecondaryColor, _Calendartokens.tokens.calendarContentSecondaryDisabledColor, _Calendartokens.tokens.calendarDisabledOpacity, _Calendartokens.tokens.iconButtonColor, _Calendartokens.tokens.iconButtonBackgroundColor, _Calendartokens.tokens.iconButtonColorHover, _Calendartokens.tokens.iconButtonBackgroundColorHover, _Calendartokens.tokens.iconButtonColorActive, _Calendartokens.tokens.iconButtonBackgroundColorActive, _Calendartokens.tokens.iconButtonFocusColor)
+                ":var(--surface-accent);",
+                ":var(--surface-solid-card-brightness);",
+                ":var(--shadow-down-hard-s);",
+                ":var(--text-primary);"
+            ], _Calendartokens.tokens.calendarSeparatorBackground, _Calendartokens.tokens.calendarBackgroundColor, _Calendartokens.tokens.calendarSelectedItemBackground, _Calendartokens.tokens.calendarSelectedItemColor, _Calendartokens.tokens.calendarSelectableItemBackgroundHover, _Calendartokens.tokens.calendarCurrentItemBorderColor, _Calendartokens.tokens.calendarCurrentItemBackgroundHover, _Calendartokens.tokens.calendarCurrentItemColorHover, _Calendartokens.tokens.calendarCurrentItemChildBackgroundHover, _Calendartokens.tokens.calendarActiveItemBackground, _Calendartokens.tokens.calendarActiveItemColor, _Calendartokens.tokens.calendarHoveredItemBackground, _Calendartokens.tokens.calendarHoveredItemColor, _Calendartokens.tokens.calendarRangeBackground, _Calendartokens.tokens.calendarOutlineFocusColor, _Calendartokens.tokens.calendarContentPrimaryColor, _Calendartokens.tokens.calendarContentPrimaryDisabledColor, _Calendartokens.tokens.calendarHeaderArrowColor, _Calendartokens.tokens.calendarContentPrimaryColor, _Calendartokens.tokens.calendarContentSecondaryColor, _Calendartokens.tokens.calendarContentSecondaryDisabledColor, _Calendartokens.tokens.calendarDisabledOpacity, _Calendartokens.tokens.iconButtonColor, _Calendartokens.tokens.iconButtonBackgroundColor, _Calendartokens.tokens.iconButtonColorHover, _Calendartokens.tokens.iconButtonBackgroundColorHover, _Calendartokens.tokens.iconButtonColorActive, _Calendartokens.tokens.iconButtonBackgroundColorActive, _Calendartokens.tokens.iconButtonFocusColor, _Calendartokens.tokens.tooltipBackgroundColor, _Calendartokens.tokens.tooltipBoxShadow, _Calendartokens.tokens.tooltipColor)
         },
         size: {
             l: (0, _styledcomponents.css)([
@@ -280,6 +284,52 @@ var config = {
                 ":0.75rem;",
                 ":0.5rem;"
             ], _Calendartokens.tokens.calendarContainerWidth, _Calendartokens.tokens.calendarContainerHeight, _Calendartokens.tokens.calendarYearsPadding, _Calendartokens.tokens.calendarYearItemBorderRadius, _Calendartokens.tokens.calendarYearFontFamily, _Calendartokens.tokens.calendarYearFontSize, _Calendartokens.tokens.calendarYearFontStyle, _Calendartokens.tokens.calendarYearFontLetterSpacing, _Calendartokens.tokens.calendarYearFontLineHeight, _Calendartokens.tokens.calendarYearFontWeight, _Calendartokens.tokens.calendarYearSelectedFontWeight, _Calendartokens.tokens.calendarQuartersPadding, _Calendartokens.tokens.calendarQuarterItemBorderRadius, _Calendartokens.tokens.calendarQuarterFontFamily, _Calendartokens.tokens.calendarQuarterFontSize, _Calendartokens.tokens.calendarQuarterFontStyle, _Calendartokens.tokens.calendarQuarterFontLetterSpacing, _Calendartokens.tokens.calendarQuarterFontLineHeight, _Calendartokens.tokens.calendarQuarterFontWeight, _Calendartokens.tokens.calendarQuarterSelectedFontWeight, _Calendartokens.tokens.calendarMonthsPadding, _Calendartokens.tokens.calendarMonthItemBorderRadius, _Calendartokens.tokens.calendarMonthFontFamily, _Calendartokens.tokens.calendarMonthFontSize, _Calendartokens.tokens.calendarMonthFontStyle, _Calendartokens.tokens.calendarMonthFontLetterSpacing, _Calendartokens.tokens.calendarMonthFontLineHeight, _Calendartokens.tokens.calendarMonthFontWeight, _Calendartokens.tokens.calendarMonthSelectedFontWeight, _Calendartokens.tokens.calendarDaysPadding, _Calendartokens.tokens.calendarDayItemBorderRadius, _Calendartokens.tokens.calendarDayFontFamily, _Calendartokens.tokens.calendarDayFontSize, _Calendartokens.tokens.calendarDayFontStyle, _Calendartokens.tokens.calendarDayFontLetterSpacing, _Calendartokens.tokens.calendarDayFontLineHeight, _Calendartokens.tokens.calendarDayFontWeight, _Calendartokens.tokens.calendarDaySelectedFontWeight, _Calendartokens.tokens.calendarCurrentItemBorderWidth, _Calendartokens.tokens.calendarHeaderArrowGap, _Calendartokens.tokens.calendarArrowHeaderCustomSize, _Calendartokens.tokens.calendarHeaderPadding, _Calendartokens.tokens.calendarHeaderDateGap, _Calendartokens.tokens.calendarHeaderFontFamily, _Calendartokens.tokens.calendarHeaderFontSize, _Calendartokens.tokens.calendarHeaderFontStyle, _Calendartokens.tokens.calendarHeaderFontLetterSpacing, _Calendartokens.tokens.calendarHeaderFontLineHeight, _Calendartokens.tokens.calendarHeaderFontWeight, _Calendartokens.tokens.calendarHeaderFontWeightBold, _Calendartokens.tokens.iconButtonHeight, _Calendartokens.tokens.iconButtonWidth, _Calendartokens.tokens.iconButtonPadding, _Calendartokens.tokens.iconButtonRadius)
+        },
+        eventTooltipSize: {
+            m: (0, _styledcomponents.css)([
+                "",
+                ":0.6875rem;",
+                ":0.875rem;",
+                ":0.6875rem;",
+                ":0.875rem;",
+                ":2.5rem;",
+                ":0.625rem;",
+                ":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-font-weight);",
+                ":var(--plasma-typo-body-s-letter-spacing);",
+                ":var(--plasma-typo-body-s-line-height);",
+                ":0.375rem;",
+                ":1.25rem;",
+                ":1.25rem;",
+                ':url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg==");',
+                ":0.5rem;",
+                ":0.625rem;",
+                ":var(--surface-solid-card-brightness);"
+            ], _Calendartokens.tokens.tooltipPaddingTop, _Calendartokens.tokens.tooltipPaddingRight, _Calendartokens.tokens.tooltipPaddingBottom, _Calendartokens.tokens.tooltipPaddingLeft, _Calendartokens.tokens.tooltipMinHeight, _Calendartokens.tokens.tooltipBorderRadius, _Calendartokens.tokens.tooltipTextFontFamily, _Calendartokens.tokens.tooltipTextFontSize, _Calendartokens.tokens.tooltipTextFontStyle, _Calendartokens.tokens.tooltipTextFontWeight, _Calendartokens.tokens.tooltipTextFontLetterSpacing, _Calendartokens.tokens.tooltipTextFontLineHeight, _Calendartokens.tokens.tooltipContentLeftMargin, _Calendartokens.tokens.tooltipArrowMaskWidth, _Calendartokens.tokens.tooltipArrowMaskHeight, _Calendartokens.tokens.tooltipArrowMaskImage, _Calendartokens.tokens.tooltipArrowHeight, _Calendartokens.tokens.tooltipArrowEdgeMargin, _Calendartokens.tokens.tooltipArrowBackground),
+            s: (0, _styledcomponents.css)([
+                "",
+                ":0.5rem;",
+                ":0.75rem;",
+                ":0.5rem;",
+                ":0.75rem;",
+                ":2rem;",
+                ":0.5rem;",
+                ":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-font-weight);",
+                ":var(--plasma-typo-body-xs-letter-spacing);",
+                ":var(--plasma-typo-body-xs-line-height);",
+                ":0.25rem;",
+                ":1rem;",
+                ":1rem;",
+                ':url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+");',
+                ":0.375rem;",
+                ":0.5625rem;",
+                ":var(--surface-solid-card-brightness);"
+            ], _Calendartokens.tokens.tooltipPaddingTop, _Calendartokens.tokens.tooltipPaddingRight, _Calendartokens.tokens.tooltipPaddingBottom, _Calendartokens.tokens.tooltipPaddingLeft, _Calendartokens.tokens.tooltipMinHeight, _Calendartokens.tokens.tooltipBorderRadius, _Calendartokens.tokens.tooltipTextFontFamily, _Calendartokens.tokens.tooltipTextFontSize, _Calendartokens.tokens.tooltipTextFontStyle, _Calendartokens.tokens.tooltipTextFontWeight, _Calendartokens.tokens.tooltipTextFontLetterSpacing, _Calendartokens.tokens.tooltipTextFontLineHeight, _Calendartokens.tokens.tooltipContentLeftMargin, _Calendartokens.tokens.tooltipArrowMaskWidth, _Calendartokens.tokens.tooltipArrowMaskHeight, _Calendartokens.tokens.tooltipArrowMaskImage, _Calendartokens.tokens.tooltipArrowHeight, _Calendartokens.tokens.tooltipArrowEdgeMargin, _Calendartokens.tokens.tooltipArrowBackground)
         }
     }
 };

package/styled-components/cjs/examples/components/Combobox/Combobox.js

@@ -1,16 +1 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "Combobox", {
-    enumerable: true,
-    get: function() {
-        return Combobox;
-    }
-});
-var _engines = require("../../../engines");
-var _ = require("../../..");
-var _Comboboxconfig = require("./Combobox.config");
-var mergedConfig = (0, _engines.mergeConfig)(_.comboboxNewConfig, _Comboboxconfig.config);
-var ComboboxComponent = (0, _engines.component)(mergedConfig);
-var Combobox = ComboboxComponent;

package/styled-components/cjs/examples/components/DatePicker/DatePicker.config.js

@@ -76,8 +76,11 @@ var config = {
                 ":var(--surface-clear);",
                 ":var(--text-primary-hover);",
                 ":var(--surface-clear);",
-                ":var(--surface-accent);"
-            ], _DatePicker.datePickerTokens.background, _DatePicker.datePickerTokens.backgroundError, _DatePicker.datePickerTokens.backgroundSuccess, _DatePicker.datePickerTokens.dividerColor, _DatePicker.datePickerTokens.labelColor, _DatePicker.datePickerTokens.leftHelperColor, _DatePicker.datePickerTokens.leftHelperColorError, _DatePicker.datePickerTokens.leftHelperColorSuccess, _DatePicker.datePickerTokens.textFieldColor, _DatePicker.datePickerTokens.textFieldPlaceholderColor, _DatePicker.datePickerTokens.textFieldCaretColor, _DatePicker.datePickerTokens.labelInnerFontFamily, _DatePicker.datePickerTokens.labelInnerFontSize, _DatePicker.datePickerTokens.labelInnerFontStyle, _DatePicker.datePickerTokens.labelInnerFontWeight, _DatePicker.datePickerTokens.labelInnerLetterSpacing, _DatePicker.datePickerTokens.labelInnerLineHeight, _DatePicker.datePickerTokens.indicatorColor, _DatePicker.datePickerTokens.textFieldBackgroundColor, _DatePicker.datePickerTokens.textFieldBackgroundColorFocus, _DatePicker.datePickerTokens.textFieldBackgroundErrorColor, _DatePicker.datePickerTokens.textFieldBackgroundErrorColorFocus, _DatePicker.datePickerTokens.textFieldBackgroundSuccessColor, _DatePicker.datePickerTokens.textFieldBackgroundSuccessColorFocus, _DatePicker.datePickerTokens.textFieldTextBeforeColor, _DatePicker.datePickerTokens.textFieldTextAfterColor, _DatePicker.datePickerTokens.focusColor, _DatePicker.datePickerTokens.textFieldPlaceholderColorFocus, _DatePicker.datePickerTokens.calendarShadow, _DatePicker.datePickerTokens.calendarSeparatorBackground, _DatePicker.datePickerTokens.calendarBackgroundColor, _DatePicker.datePickerTokens.calendarSelectedItemBackground, _DatePicker.datePickerTokens.calendarSelectedItemColor, _DatePicker.datePickerTokens.calendarSelectableItemBackgroundHover, _DatePicker.datePickerTokens.calendarCurrentItemBorderColor, _DatePicker.datePickerTokens.calendarCurrentItemBackgroundHover, _DatePicker.datePickerTokens.calendarCurrentItemColorHover, _DatePicker.datePickerTokens.calendarCurrentItemChildBackgroundHover, _DatePicker.datePickerTokens.calendarActiveItemBackground, _DatePicker.datePickerTokens.calendarActiveItemColor, _DatePicker.datePickerTokens.calendarHoveredItemBackground, _DatePicker.datePickerTokens.calendarHoveredItemColor, _DatePicker.datePickerTokens.calendarRangeBackground, _DatePicker.datePickerTokens.calendarOutlineFocusColor, _DatePicker.datePickerTokens.calendarContentPrimaryColor, _DatePicker.datePickerTokens.calendarContentPrimaryDisabledColor, _DatePicker.datePickerTokens.calendarHeaderArrowColor, _DatePicker.datePickerTokens.calendarContentPrimaryColor, _DatePicker.datePickerTokens.calendarContentSecondaryColor, _DatePicker.datePickerTokens.calendarContentSecondaryDisabledColor, _DatePicker.datePickerTokens.calendarDisabledOpacity, _DatePicker.datePickerTokens.iconButtonColor, _DatePicker.datePickerTokens.iconButtonBackgroundColor, _DatePicker.datePickerTokens.iconButtonColorHover, _DatePicker.datePickerTokens.iconButtonBackgroundColorHover, _DatePicker.datePickerTokens.iconButtonColorActive, _DatePicker.datePickerTokens.iconButtonBackgroundColorActive, _DatePicker.datePickerTokens.iconButtonFocusColor)
+                ":var(--surface-accent);",
+                ":var(--surface-solid-card-brightness);",
+                ":var(--shadow-down-hard-s);",
+                ":var(--text-primary);"
+            ], _DatePicker.datePickerTokens.background, _DatePicker.datePickerTokens.backgroundError, _DatePicker.datePickerTokens.backgroundSuccess, _DatePicker.datePickerTokens.dividerColor, _DatePicker.datePickerTokens.labelColor, _DatePicker.datePickerTokens.leftHelperColor, _DatePicker.datePickerTokens.leftHelperColorError, _DatePicker.datePickerTokens.leftHelperColorSuccess, _DatePicker.datePickerTokens.textFieldColor, _DatePicker.datePickerTokens.textFieldPlaceholderColor, _DatePicker.datePickerTokens.textFieldCaretColor, _DatePicker.datePickerTokens.labelInnerFontFamily, _DatePicker.datePickerTokens.labelInnerFontSize, _DatePicker.datePickerTokens.labelInnerFontStyle, _DatePicker.datePickerTokens.labelInnerFontWeight, _DatePicker.datePickerTokens.labelInnerLetterSpacing, _DatePicker.datePickerTokens.labelInnerLineHeight, _DatePicker.datePickerTokens.indicatorColor, _DatePicker.datePickerTokens.textFieldBackgroundColor, _DatePicker.datePickerTokens.textFieldBackgroundColorFocus, _DatePicker.datePickerTokens.textFieldBackgroundErrorColor, _DatePicker.datePickerTokens.textFieldBackgroundErrorColorFocus, _DatePicker.datePickerTokens.textFieldBackgroundSuccessColor, _DatePicker.datePickerTokens.textFieldBackgroundSuccessColorFocus, _DatePicker.datePickerTokens.textFieldTextBeforeColor, _DatePicker.datePickerTokens.textFieldTextAfterColor, _DatePicker.datePickerTokens.focusColor, _DatePicker.datePickerTokens.textFieldPlaceholderColorFocus, _DatePicker.datePickerTokens.calendarShadow, _DatePicker.datePickerTokens.calendarSeparatorBackground, _DatePicker.datePickerTokens.calendarBackgroundColor, _DatePicker.datePickerTokens.calendarSelectedItemBackground, _DatePicker.datePickerTokens.calendarSelectedItemColor, _DatePicker.datePickerTokens.calendarSelectableItemBackgroundHover, _DatePicker.datePickerTokens.calendarCurrentItemBorderColor, _DatePicker.datePickerTokens.calendarCurrentItemBackgroundHover, _DatePicker.datePickerTokens.calendarCurrentItemColorHover, _DatePicker.datePickerTokens.calendarCurrentItemChildBackgroundHover, _DatePicker.datePickerTokens.calendarActiveItemBackground, _DatePicker.datePickerTokens.calendarActiveItemColor, _DatePicker.datePickerTokens.calendarHoveredItemBackground, _DatePicker.datePickerTokens.calendarHoveredItemColor, _DatePicker.datePickerTokens.calendarRangeBackground, _DatePicker.datePickerTokens.calendarOutlineFocusColor, _DatePicker.datePickerTokens.calendarContentPrimaryColor, _DatePicker.datePickerTokens.calendarContentPrimaryDisabledColor, _DatePicker.datePickerTokens.calendarHeaderArrowColor, _DatePicker.datePickerTokens.calendarContentPrimaryColor, _DatePicker.datePickerTokens.calendarContentSecondaryColor, _DatePicker.datePickerTokens.calendarContentSecondaryDisabledColor, _DatePicker.datePickerTokens.calendarDisabledOpacity, _DatePicker.datePickerTokens.iconButtonColor, _DatePicker.datePickerTokens.iconButtonBackgroundColor, _DatePicker.datePickerTokens.iconButtonColorHover, _DatePicker.datePickerTokens.iconButtonBackgroundColorHover, _DatePicker.datePickerTokens.iconButtonColorActive, _DatePicker.datePickerTokens.iconButtonBackgroundColorActive, _DatePicker.datePickerTokens.iconButtonFocusColor, _DatePicker.datePickerTokens.tooltipBackgroundColor, _DatePicker.datePickerTokens.tooltipBoxShadow, _DatePicker.datePickerTokens.tooltipColor)
         },
         size: {
             l: (0, _styledcomponents.css)([
@@ -501,6 +504,52 @@ var config = {
                 ":0.5rem;"
             ], _DatePicker.datePickerTokens.width, _DatePicker.datePickerTokens.borderRadius, _DatePicker.datePickerTokens.dividerPadding, _DatePicker.datePickerTokens.dividerFontFamily, _DatePicker.datePickerTokens.dividerFontStyle, _DatePicker.datePickerTokens.dividerFontSize, _DatePicker.datePickerTokens.dividerFontWeight, _DatePicker.datePickerTokens.dividerLetterSpacing, _DatePicker.datePickerTokens.dividerLineHeight, _DatePicker.datePickerTokens.leftContentMargin, _DatePicker.datePickerTokens.rightContentMargin, _DatePicker.datePickerTokens.labelOffset, _DatePicker.datePickerTokens.labelInnerPadding, _DatePicker.datePickerTokens.contentLabelInnerPadding, _DatePicker.datePickerTokens.labelFontFamily, _DatePicker.datePickerTokens.labelFontStyle, _DatePicker.datePickerTokens.labelFontSize, _DatePicker.datePickerTokens.labelFontWeight, _DatePicker.datePickerTokens.labelLetterSpacing, _DatePicker.datePickerTokens.labelLineHeight, _DatePicker.datePickerTokens.indicatorSize, _DatePicker.datePickerTokens.indicatorSizeOuter, _DatePicker.datePickerTokens.indicatorPlacement, _DatePicker.datePickerTokens.indicatorOuterPlacement, _DatePicker.datePickerTokens.indicatorPlacementRight, _DatePicker.datePickerTokens.indicatorOuterPlacementRight, _DatePicker.datePickerTokens.textFieldHeight, _DatePicker.datePickerTokens.textFieldBorderRadius, _DatePicker.datePickerTokens.textFieldPadding, _DatePicker.datePickerTokens.textFieldFontFamily, _DatePicker.datePickerTokens.textFieldFontStyle, _DatePicker.datePickerTokens.textFieldFontSize, _DatePicker.datePickerTokens.textFieldFontWeight, _DatePicker.datePickerTokens.textFieldLetterSpacing, _DatePicker.datePickerTokens.textFieldLineHeight, _DatePicker.datePickerTokens.leftHelperOffset, _DatePicker.datePickerTokens.leftHelperFontFamily, _DatePicker.datePickerTokens.leftHelperFontStyle, _DatePicker.datePickerTokens.leftHelperFontSize, _DatePicker.datePickerTokens.leftHelperFontWeight, _DatePicker.datePickerTokens.leftHelperLetterSpacing, _DatePicker.datePickerTokens.leftHelperLineHeight, _DatePicker.datePickerTokens.textFieldLeftContentMargin, _DatePicker.datePickerTokens.textFieldRightContentMargin, _DatePicker.datePickerTokens.textFieldTextBeforeMargin, _DatePicker.datePickerTokens.textFieldTextAfterMargin, _DatePicker.datePickerTokens.calendarContainerWidth, _DatePicker.datePickerTokens.calendarContainerHeight, _DatePicker.datePickerTokens.calendarBorderRadius, _DatePicker.datePickerTokens.calendarYearsPadding, _DatePicker.datePickerTokens.calendarYearItemBorderRadius, _DatePicker.datePickerTokens.calendarYearFontFamily, _DatePicker.datePickerTokens.calendarYearFontSize, _DatePicker.datePickerTokens.calendarYearFontStyle, _DatePicker.datePickerTokens.calendarYearFontLetterSpacing, _DatePicker.datePickerTokens.calendarYearFontLineHeight, _DatePicker.datePickerTokens.calendarYearFontWeight, _DatePicker.datePickerTokens.calendarYearSelectedFontWeight, _DatePicker.datePickerTokens.calendarQuartersPadding, _DatePicker.datePickerTokens.calendarQuarterItemBorderRadius, _DatePicker.datePickerTokens.calendarQuarterFontFamily, _DatePicker.datePickerTokens.calendarQuarterFontSize, _DatePicker.datePickerTokens.calendarQuarterFontStyle, _DatePicker.datePickerTokens.calendarQuarterFontLetterSpacing, _DatePicker.datePickerTokens.calendarQuarterFontLineHeight, _DatePicker.datePickerTokens.calendarQuarterFontWeight, _DatePicker.datePickerTokens.calendarQuarterSelectedFontWeight, _DatePicker.datePickerTokens.calendarMonthsPadding, _DatePicker.datePickerTokens.calendarMonthItemBorderRadius, _DatePicker.datePickerTokens.calendarMonthFontFamily, _DatePicker.datePickerTokens.calendarMonthFontSize, _DatePicker.datePickerTokens.calendarMonthFontStyle, _DatePicker.datePickerTokens.calendarMonthFontLetterSpacing, _DatePicker.datePickerTokens.calendarMonthFontLineHeight, _DatePicker.datePickerTokens.calendarMonthFontWeight, _DatePicker.datePickerTokens.calendarMonthSelectedFontWeight, _DatePicker.datePickerTokens.calendarDaysPadding, _DatePicker.datePickerTokens.calendarDayItemBorderRadius, _DatePicker.datePickerTokens.calendarDayFontFamily, _DatePicker.datePickerTokens.calendarDayFontSize, _DatePicker.datePickerTokens.calendarDayFontStyle, _DatePicker.datePickerTokens.calendarDayFontLetterSpacing, _DatePicker.datePickerTokens.calendarDayFontLineHeight, _DatePicker.datePickerTokens.calendarDayFontWeight, _DatePicker.datePickerTokens.calendarDaySelectedFontWeight, _DatePicker.datePickerTokens.calendarCurrentItemBorderWidth, _DatePicker.datePickerTokens.calendarHeaderWrapperPadding, _DatePicker.datePickerTokens.calendarHeaderArrowGap, _DatePicker.datePickerTokens.calendarHeaderArrowCustomSize, _DatePicker.datePickerTokens.calendarHeaderPadding, _DatePicker.datePickerTokens.calendarHeaderDateGap, _DatePicker.datePickerTokens.calendarHeaderFontFamily, _DatePicker.datePickerTokens.calendarHeaderFontSize, _DatePicker.datePickerTokens.calendarHeaderFontStyle, _DatePicker.datePickerTokens.calendarHeaderFontLetterSpacing, _DatePicker.datePickerTokens.calendarHeaderFontLineHeight, _DatePicker.datePickerTokens.calendarHeaderFontWeight, _DatePicker.datePickerTokens.calendarHeaderFontWeightBold, _DatePicker.datePickerTokens.iconButtonHeight, _DatePicker.datePickerTokens.iconButtonWidth, _DatePicker.datePickerTokens.iconButtonPadding, _DatePicker.datePickerTokens.iconButtonRadius)
         },
+        eventTooltipSize: {
+            m: (0, _styledcomponents.css)([
+                "",
+                ":0.6875rem;",
+                ":0.875rem;",
+                ":0.6875rem;",
+                ":0.875rem;",
+                ":2.5rem;",
+                ":0.625rem;",
+                ":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-font-weight);",
+                ":var(--plasma-typo-body-s-letter-spacing);",
+                ":var(--plasma-typo-body-s-line-height);",
+                ":0.375rem;",
+                ":1.25rem;",
+                ":1.25rem;",
+                ':url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg==");',
+                ":0.5rem;",
+                ":0.625rem;",
+                ":var(--surface-solid-card-brightness);"
+            ], _DatePicker.datePickerTokens.tooltipPaddingTop, _DatePicker.datePickerTokens.tooltipPaddingRight, _DatePicker.datePickerTokens.tooltipPaddingBottom, _DatePicker.datePickerTokens.tooltipPaddingLeft, _DatePicker.datePickerTokens.tooltipMinHeight, _DatePicker.datePickerTokens.tooltipBorderRadius, _DatePicker.datePickerTokens.tooltipTextFontFamily, _DatePicker.datePickerTokens.tooltipTextFontSize, _DatePicker.datePickerTokens.tooltipTextFontStyle, _DatePicker.datePickerTokens.tooltipTextFontWeight, _DatePicker.datePickerTokens.tooltipTextFontLetterSpacing, _DatePicker.datePickerTokens.tooltipTextFontLineHeight, _DatePicker.datePickerTokens.tooltipContentLeftMargin, _DatePicker.datePickerTokens.tooltipArrowMaskWidth, _DatePicker.datePickerTokens.tooltipArrowMaskHeight, _DatePicker.datePickerTokens.tooltipArrowMaskImage, _DatePicker.datePickerTokens.tooltipArrowHeight, _DatePicker.datePickerTokens.tooltipArrowEdgeMargin, _DatePicker.datePickerTokens.tooltipArrowBackground),
+            s: (0, _styledcomponents.css)([
+                "",
+                ":0.5rem;",
+                ":0.75rem;",
+                ":0.5rem;",
+                ":0.75rem;",
+                ":2rem;",
+                ":0.5rem;",
+                ":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-font-weight);",
+                ":var(--plasma-typo-body-xs-letter-spacing);",
+                ":var(--plasma-typo-body-xs-line-height);",
+                ":0.25rem;",
+                ":1rem;",
+                ":1rem;",
+                ':url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+");',
+                ":0.375rem;",
+                ":0.5625rem;",
+                ":var(--surface-solid-card-brightness);"
+            ], _DatePicker.datePickerTokens.tooltipPaddingTop, _DatePicker.datePickerTokens.tooltipPaddingRight, _DatePicker.datePickerTokens.tooltipPaddingBottom, _DatePicker.datePickerTokens.tooltipPaddingLeft, _DatePicker.datePickerTokens.tooltipMinHeight, _DatePicker.datePickerTokens.tooltipBorderRadius, _DatePicker.datePickerTokens.tooltipTextFontFamily, _DatePicker.datePickerTokens.tooltipTextFontSize, _DatePicker.datePickerTokens.tooltipTextFontStyle, _DatePicker.datePickerTokens.tooltipTextFontWeight, _DatePicker.datePickerTokens.tooltipTextFontLetterSpacing, _DatePicker.datePickerTokens.tooltipTextFontLineHeight, _DatePicker.datePickerTokens.tooltipContentLeftMargin, _DatePicker.datePickerTokens.tooltipArrowMaskWidth, _DatePicker.datePickerTokens.tooltipArrowMaskHeight, _DatePicker.datePickerTokens.tooltipArrowMaskImage, _DatePicker.datePickerTokens.tooltipArrowHeight, _DatePicker.datePickerTokens.tooltipArrowEdgeMargin, _DatePicker.datePickerTokens.tooltipArrowBackground)
+        },
         disabled: {
             true: (0, _styledcomponents.css)([
                 "",

package/styled-components/cjs/examples/components/Loader/Loader.config.js

@@ -22,50 +22,57 @@ var config = {
                 ":var(--surface-transparent-tertiary);",
                 ":var(--surface-solid-default);",
                 ":var(--text-primary);",
-                ":var(--text-primary);"
-            ], _Loader.loaderTokens.progressBarCircularBackgroundStroke, _Loader.loaderTokens.progressBarCircularStroke, _Loader.loaderTokens.progressBarCircularContentColor, _Loader.loaderTokens.spinnerColor),
+                ":var(--text-primary);",
+                ":var(--overlay-soft);"
+            ], _Loader.loaderTokens.progressBarCircularBackgroundStroke, _Loader.loaderTokens.progressBarCircularStroke, _Loader.loaderTokens.progressBarCircularContentColor, _Loader.loaderTokens.spinnerColor, _Loader.loaderTokens.overlayColor),
             secondary: (0, _styledcomponents.css)([
                 "",
                 ":var(--surface-transparent-tertiary);",
                 ":var(--surface-transparent-secondary);",
                 ":var(--text-primary);",
-                ":var(--text-secondary);"
-            ], _Loader.loaderTokens.progressBarCircularBackgroundStroke, _Loader.loaderTokens.progressBarCircularStroke, _Loader.loaderTokens.progressBarCircularContentColor, _Loader.loaderTokens.spinnerColor),
+                ":var(--text-secondary);",
+                ":var(--overlay-soft);"
+            ], _Loader.loaderTokens.progressBarCircularBackgroundStroke, _Loader.loaderTokens.progressBarCircularStroke, _Loader.loaderTokens.progressBarCircularContentColor, _Loader.loaderTokens.spinnerColor, _Loader.loaderTokens.overlayColor),
             accent: (0, _styledcomponents.css)([
                 "",
                 ":var(--surface-transparent-tertiary);",
                 ":var(--surface-accent);",
                 ":var(--text-primary);",
-                ":var(--text-accent);"
-            ], _Loader.loaderTokens.progressBarCircularBackgroundStroke, _Loader.loaderTokens.progressBarCircularStroke, _Loader.loaderTokens.progressBarCircularContentColor, _Loader.loaderTokens.spinnerColor),
+                ":var(--text-accent);",
+                ":var(--overlay-soft);"
+            ], _Loader.loaderTokens.progressBarCircularBackgroundStroke, _Loader.loaderTokens.progressBarCircularStroke, _Loader.loaderTokens.progressBarCircularContentColor, _Loader.loaderTokens.spinnerColor, _Loader.loaderTokens.overlayColor),
             positive: (0, _styledcomponents.css)([
                 "",
                 ":var(--surface-transparent-tertiary);",
                 ":var(--surface-positive);",
                 ":var(--text-primary);",
-                ":var(--text-positive);"
-            ], _Loader.loaderTokens.progressBarCircularBackgroundStroke, _Loader.loaderTokens.progressBarCircularStroke, _Loader.loaderTokens.progressBarCircularContentColor, _Loader.loaderTokens.spinnerColor),
+                ":var(--text-positive);",
+                ":var(--overlay-soft);"
+            ], _Loader.loaderTokens.progressBarCircularBackgroundStroke, _Loader.loaderTokens.progressBarCircularStroke, _Loader.loaderTokens.progressBarCircularContentColor, _Loader.loaderTokens.spinnerColor, _Loader.loaderTokens.overlayColor),
             warning: (0, _styledcomponents.css)([
                 "",
                 ":var(--surface-transparent-tertiary);",
                 ":var(--surface-warning);",
                 ":var(--text-primary);",
-                ":var(--text-warning);"
-            ], _Loader.loaderTokens.progressBarCircularBackgroundStroke, _Loader.loaderTokens.progressBarCircularStroke, _Loader.loaderTokens.progressBarCircularContentColor, _Loader.loaderTokens.spinnerColor),
+                ":var(--text-warning);",
+                ":var(--overlay-soft);"
+            ], _Loader.loaderTokens.progressBarCircularBackgroundStroke, _Loader.loaderTokens.progressBarCircularStroke, _Loader.loaderTokens.progressBarCircularContentColor, _Loader.loaderTokens.spinnerColor, _Loader.loaderTokens.overlayColor),
             negative: (0, _styledcomponents.css)([
                 "",
                 ":var(--surface-transparent-tertiary);",
                 ":var(--surface-negative);",
                 ":var(--text-primary);",
-                ":var(--text-negative);"
-            ], _Loader.loaderTokens.progressBarCircularBackgroundStroke, _Loader.loaderTokens.progressBarCircularStroke, _Loader.loaderTokens.progressBarCircularContentColor, _Loader.loaderTokens.spinnerColor),
+                ":var(--text-negative);",
+                ":var(--overlay-soft);"
+            ], _Loader.loaderTokens.progressBarCircularBackgroundStroke, _Loader.loaderTokens.progressBarCircularStroke, _Loader.loaderTokens.progressBarCircularContentColor, _Loader.loaderTokens.spinnerColor, _Loader.loaderTokens.overlayColor),
             info: (0, _styledcomponents.css)([
                 "",
                 ":var(--surface-transparent-tertiary);",
                 ":var(--surface-info);",
                 ":var(--text-primary);",
-                ":var(--text-info);"
-            ], _Loader.loaderTokens.progressBarCircularBackgroundStroke, _Loader.loaderTokens.progressBarCircularStroke, _Loader.loaderTokens.progressBarCircularContentColor, _Loader.loaderTokens.spinnerColor)
+                ":var(--text-info);",
+                ":var(--overlay-soft);"
+            ], _Loader.loaderTokens.progressBarCircularBackgroundStroke, _Loader.loaderTokens.progressBarCircularStroke, _Loader.loaderTokens.progressBarCircularContentColor, _Loader.loaderTokens.spinnerColor, _Loader.loaderTokens.overlayColor)
         },
         size: {
             xxl: (0, _styledcomponents.css)([
@@ -82,8 +89,9 @@ var config = {
                 ":var(--plasma-typo-h2-font-style);",
                 ":var(--plasma-typo-h2-bold-font-weight);",
                 ":var(--plasma-typo-h2-letter-spacing);",
-                ":var(--plasma-typo-h2-line-height);"
-            ], _Loader.loaderTokens.width, _Loader.loaderTokens.height, _Loader.loaderTokens.progressBarCircularSize, _Loader.loaderTokens.progressBarCircularHeight, _Loader.loaderTokens.progressBarCircularWidth, _Loader.loaderTokens.progressBarCircularStrokeWidth, _Loader.loaderTokens.progressBarCircularStrokeSize, _Loader.loaderTokens.progressBarCircularContentFontFamily, _Loader.loaderTokens.progressBarCircularContentFontSize, _Loader.loaderTokens.progressBarCircularContentFontStyle, _Loader.loaderTokens.progressBarCircularContentFontWeight, _Loader.loaderTokens.progressBarCircularContentLetterSpacing, _Loader.loaderTokens.progressBarCircularContentLineHeight),
+                ":var(--plasma-typo-h2-line-height);",
+                ":8rem;"
+            ], _Loader.loaderTokens.width, _Loader.loaderTokens.height, _Loader.loaderTokens.progressBarCircularSize, _Loader.loaderTokens.progressBarCircularHeight, _Loader.loaderTokens.progressBarCircularWidth, _Loader.loaderTokens.progressBarCircularStrokeWidth, _Loader.loaderTokens.progressBarCircularStrokeSize, _Loader.loaderTokens.progressBarCircularContentFontFamily, _Loader.loaderTokens.progressBarCircularContentFontSize, _Loader.loaderTokens.progressBarCircularContentFontStyle, _Loader.loaderTokens.progressBarCircularContentFontWeight, _Loader.loaderTokens.progressBarCircularContentLetterSpacing, _Loader.loaderTokens.progressBarCircularContentLineHeight, _Loader.loaderTokens.spinnerSize),
             xl: (0, _styledcomponents.css)([
                 "",
                 ":100%;",
@@ -98,8 +106,9 @@ var config = {
                 ":var(--plasma-typo-h5-font-style);",
                 ":var(--plasma-typo-h5-bold-font-weight);",
                 ":var(--plasma-typo-h5-letter-spacing);",
-                ":var(--plasma-typo-h5-line-height);"
-            ], _Loader.loaderTokens.width, _Loader.loaderTokens.height, _Loader.loaderTokens.progressBarCircularSize, _Loader.loaderTokens.progressBarCircularHeight, _Loader.loaderTokens.progressBarCircularWidth, _Loader.loaderTokens.progressBarCircularStrokeWidth, _Loader.loaderTokens.progressBarCircularStrokeSize, _Loader.loaderTokens.progressBarCircularContentFontFamily, _Loader.loaderTokens.progressBarCircularContentFontSize, _Loader.loaderTokens.progressBarCircularContentFontStyle, _Loader.loaderTokens.progressBarCircularContentFontWeight, _Loader.loaderTokens.progressBarCircularContentLetterSpacing, _Loader.loaderTokens.progressBarCircularContentLineHeight),
+                ":var(--plasma-typo-h5-line-height);",
+                ":5.5rem;"
+            ], _Loader.loaderTokens.width, _Loader.loaderTokens.height, _Loader.loaderTokens.progressBarCircularSize, _Loader.loaderTokens.progressBarCircularHeight, _Loader.loaderTokens.progressBarCircularWidth, _Loader.loaderTokens.progressBarCircularStrokeWidth, _Loader.loaderTokens.progressBarCircularStrokeSize, _Loader.loaderTokens.progressBarCircularContentFontFamily, _Loader.loaderTokens.progressBarCircularContentFontSize, _Loader.loaderTokens.progressBarCircularContentFontStyle, _Loader.loaderTokens.progressBarCircularContentFontWeight, _Loader.loaderTokens.progressBarCircularContentLetterSpacing, _Loader.loaderTokens.progressBarCircularContentLineHeight, _Loader.loaderTokens.spinnerSize),
             l: (0, _styledcomponents.css)([
                 "",
                 ":100%;",
@@ -115,7 +124,7 @@ var config = {
                 ":var(--plasma-typo-body-l-body-font-weight);",
                 ":var(--plasma-typo-body-l-letter-spacing);",
                 ":var(--plasma-typo-body-l-line-height);",
-                ":36px;"
+                ":3.5rem;"
             ], _Loader.loaderTokens.width, _Loader.loaderTokens.height, _Loader.loaderTokens.progressBarCircularSize, _Loader.loaderTokens.progressBarCircularHeight, _Loader.loaderTokens.progressBarCircularWidth, _Loader.loaderTokens.progressBarCircularStrokeWidth, _Loader.loaderTokens.progressBarCircularStrokeSize, _Loader.loaderTokens.progressBarCircularContentFontFamily, _Loader.loaderTokens.progressBarCircularContentFontSize, _Loader.loaderTokens.progressBarCircularContentFontStyle, _Loader.loaderTokens.progressBarCircularContentFontWeight, _Loader.loaderTokens.progressBarCircularContentLetterSpacing, _Loader.loaderTokens.progressBarCircularContentLineHeight, _Loader.loaderTokens.spinnerSize),
             m: (0, _styledcomponents.css)([
                 "",
@@ -132,7 +141,7 @@ var config = {
                 ":var(--plasma-typo-body-m-body-font-weight);",
                 ":var(--plasma-typo-body-m-letter-spacing);",
                 ":var(--plasma-typo-body-m-line-height);",
-                ":24px;"
+                ":3rem;"
             ], _Loader.loaderTokens.width, _Loader.loaderTokens.height, _Loader.loaderTokens.progressBarCircularSize, _Loader.loaderTokens.progressBarCircularHeight, _Loader.loaderTokens.progressBarCircularWidth, _Loader.loaderTokens.progressBarCircularStrokeWidth, _Loader.loaderTokens.progressBarCircularStrokeSize, _Loader.loaderTokens.progressBarCircularContentFontFamily, _Loader.loaderTokens.progressBarCircularContentFontSize, _Loader.loaderTokens.progressBarCircularContentFontStyle, _Loader.loaderTokens.progressBarCircularContentFontWeight, _Loader.loaderTokens.progressBarCircularContentLetterSpacing, _Loader.loaderTokens.progressBarCircularContentLineHeight, _Loader.loaderTokens.spinnerSize),
             s: (0, _styledcomponents.css)([
                 "",
@@ -149,7 +158,7 @@ var config = {
                 ":var(--plasma-typo-body-s-body-font-weight);",
                 ":var(--plasma-typo-body-s-letter-spacing);",
                 ":var(--plasma-typo-body-s-line-height);",
-                ":16px;"
+                ":2.25rem;"
             ], _Loader.loaderTokens.width, _Loader.loaderTokens.height, _Loader.loaderTokens.progressBarCircularSize, _Loader.loaderTokens.progressBarCircularHeight, _Loader.loaderTokens.progressBarCircularWidth, _Loader.loaderTokens.progressBarCircularStrokeWidth, _Loader.loaderTokens.progressBarCircularStrokeSize, _Loader.loaderTokens.progressBarCircularContentFontFamily, _Loader.loaderTokens.progressBarCircularContentFontSize, _Loader.loaderTokens.progressBarCircularContentFontStyle, _Loader.loaderTokens.progressBarCircularContentFontWeight, _Loader.loaderTokens.progressBarCircularContentLetterSpacing, _Loader.loaderTokens.progressBarCircularContentLineHeight, _Loader.loaderTokens.spinnerSize),
             xs: (0, _styledcomponents.css)([
                 "",
@@ -165,8 +174,9 @@ var config = {
                 ":var(--plasma-typo-body-xs-font-style);",
                 ":var(--plasma-typo-body-xs-body-font-weight);",
                 ":var(--plasma-typo-body-xs-letter-spacing);",
-                ":var(--plasma-typo-body-xs-line-height);"
-            ], _Loader.loaderTokens.width, _Loader.loaderTokens.height, _Loader.loaderTokens.progressBarCircularSize, _Loader.loaderTokens.progressBarCircularHeight, _Loader.loaderTokens.progressBarCircularWidth, _Loader.loaderTokens.progressBarCircularStrokeWidth, _Loader.loaderTokens.progressBarCircularStrokeSize, _Loader.loaderTokens.progressBarCircularContentFontFamily, _Loader.loaderTokens.progressBarCircularContentFontSize, _Loader.loaderTokens.progressBarCircularContentFontStyle, _Loader.loaderTokens.progressBarCircularContentFontWeight, _Loader.loaderTokens.progressBarCircularContentLetterSpacing, _Loader.loaderTokens.progressBarCircularContentLineHeight),
+                ":var(--plasma-typo-body-xs-line-height);",
+                ":1.5rem;"
+            ], _Loader.loaderTokens.width, _Loader.loaderTokens.height, _Loader.loaderTokens.progressBarCircularSize, _Loader.loaderTokens.progressBarCircularHeight, _Loader.loaderTokens.progressBarCircularWidth, _Loader.loaderTokens.progressBarCircularStrokeWidth, _Loader.loaderTokens.progressBarCircularStrokeSize, _Loader.loaderTokens.progressBarCircularContentFontFamily, _Loader.loaderTokens.progressBarCircularContentFontSize, _Loader.loaderTokens.progressBarCircularContentFontStyle, _Loader.loaderTokens.progressBarCircularContentFontWeight, _Loader.loaderTokens.progressBarCircularContentLetterSpacing, _Loader.loaderTokens.progressBarCircularContentLineHeight, _Loader.loaderTokens.spinnerSize),
             xxs: (0, _styledcomponents.css)([
                 "",
                 ":100%;",
@@ -181,8 +191,9 @@ var config = {
                 ":var(--plasma-typo-body-xxs-font-style);",
                 ":var(--plasma-typo-body-xxs-body-font-weight);",
                 ":var(--plasma-typo-body-xxs-letter-spacing);",
-                ":var(--plasma-typo-body-xxs-line-height);"
-            ], _Loader.loaderTokens.width, _Loader.loaderTokens.height, _Loader.loaderTokens.progressBarCircularSize, _Loader.loaderTokens.progressBarCircularHeight, _Loader.loaderTokens.progressBarCircularWidth, _Loader.loaderTokens.progressBarCircularStrokeWidth, _Loader.loaderTokens.progressBarCircularStrokeSize, _Loader.loaderTokens.progressBarCircularContentFontFamily, _Loader.loaderTokens.progressBarCircularContentFontSize, _Loader.loaderTokens.progressBarCircularContentFontStyle, _Loader.loaderTokens.progressBarCircularContentFontWeight, _Loader.loaderTokens.progressBarCircularContentLetterSpacing, _Loader.loaderTokens.progressBarCircularContentLineHeight)
+                ":var(--plasma-typo-body-xxs-line-height);",
+                ":1rem;"
+            ], _Loader.loaderTokens.width, _Loader.loaderTokens.height, _Loader.loaderTokens.progressBarCircularSize, _Loader.loaderTokens.progressBarCircularHeight, _Loader.loaderTokens.progressBarCircularWidth, _Loader.loaderTokens.progressBarCircularStrokeWidth, _Loader.loaderTokens.progressBarCircularStrokeSize, _Loader.loaderTokens.progressBarCircularContentFontFamily, _Loader.loaderTokens.progressBarCircularContentFontSize, _Loader.loaderTokens.progressBarCircularContentFontStyle, _Loader.loaderTokens.progressBarCircularContentFontWeight, _Loader.loaderTokens.progressBarCircularContentLetterSpacing, _Loader.loaderTokens.progressBarCircularContentLineHeight, _Loader.loaderTokens.spinnerSize)
         }
     }
 };

package/styled-components/cjs/examples/components/TimePicker/TimePicker.config.js

@@ -40,8 +40,9 @@ var config = {
                 ":var(--surface-transparent-secondary);",
                 ":var(--surface-transparent-secondary);",
                 ":var(--surface-transparent-tertiary);",
-                ":var(--surface-transparent-primary);"
-            ], _TimePicker.timePickerTokens.background, _TimePicker.timePickerTokens.backgroundError, _TimePicker.timePickerTokens.backgroundSuccess, _TimePicker.timePickerTokens.labelColor, _TimePicker.timePickerTokens.textFieldColor, _TimePicker.timePickerTokens.textFieldPlaceholderColor, _TimePicker.timePickerTokens.textFieldCaretColor, _TimePicker.timePickerTokens.indicatorColor, _TimePicker.timePickerTokens.textFieldBackgroundColor, _TimePicker.timePickerTokens.textFieldBackgroundColorFocus, _TimePicker.timePickerTokens.textFieldBackgroundErrorColor, _TimePicker.timePickerTokens.textFieldBackgroundErrorColorFocus, _TimePicker.timePickerTokens.textFieldBackgroundSuccessColor, _TimePicker.timePickerTokens.textFieldBackgroundSuccessColorFocus, _TimePicker.timePickerTokens.textFieldTextBeforeColor, _TimePicker.timePickerTokens.textFieldTextAfterColor, _TimePicker.timePickerTokens.textFieldPlaceholderColorFocus, _TimePicker.timePickerTokens.timePickerBackground, _TimePicker.timePickerTokens.itemBackgroundHover, _TimePicker.timePickerTokens.itemBackgroundActive, _TimePicker.timePickerTokens.scrollbarColor, _TimePicker.timePickerTokens.scrollbarTrackColor)
+                ":var(--surface-transparent-primary);",
+                ":0.4;"
+            ], _TimePicker.timePickerTokens.background, _TimePicker.timePickerTokens.backgroundError, _TimePicker.timePickerTokens.backgroundSuccess, _TimePicker.timePickerTokens.labelColor, _TimePicker.timePickerTokens.textFieldColor, _TimePicker.timePickerTokens.textFieldPlaceholderColor, _TimePicker.timePickerTokens.textFieldCaretColor, _TimePicker.timePickerTokens.indicatorColor, _TimePicker.timePickerTokens.textFieldBackgroundColor, _TimePicker.timePickerTokens.textFieldBackgroundColorFocus, _TimePicker.timePickerTokens.textFieldBackgroundErrorColor, _TimePicker.timePickerTokens.textFieldBackgroundErrorColorFocus, _TimePicker.timePickerTokens.textFieldBackgroundSuccessColor, _TimePicker.timePickerTokens.textFieldBackgroundSuccessColorFocus, _TimePicker.timePickerTokens.textFieldTextBeforeColor, _TimePicker.timePickerTokens.textFieldTextAfterColor, _TimePicker.timePickerTokens.textFieldPlaceholderColorFocus, _TimePicker.timePickerTokens.timePickerBackground, _TimePicker.timePickerTokens.itemBackgroundHover, _TimePicker.timePickerTokens.itemBackgroundActive, _TimePicker.timePickerTokens.scrollbarColor, _TimePicker.timePickerTokens.scrollbarTrackColor, _TimePicker.timePickerTokens.disabledOpacity)
         },
         size: {
             l: (0, _styledcomponents.css)([

package/styled-components/cjs/examples/components/TimePickerGrid/TimePickerGrid.config.js

@@ -0,0 +1,103 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "config", {
+    enumerable: true,
+    get: function() {
+        return config;
+    }
+});
+var _styledcomponents = require("styled-components");
+var _TimePickerGrid = require("../../../components/TimePickerGrid");
+var config = {
+    defaults: {
+        view: 'default',
+        size: 'm'
+    },
+    variations: {
+        view: {
+            default: (0, _styledcomponents.css)([
+                "",
+                ":var(--surface-transparent-secondary);",
+                ":var(--surface-transparent-secondary);",
+                ":var(--surface-transparent-tertiary);",
+                ":var(--surface-transparent-primary);",
+                ":0.4;"
+            ], _TimePickerGrid.timePickerGridTokens.itemBackgroundHover, _TimePickerGrid.timePickerGridTokens.itemBackgroundActive, _TimePickerGrid.timePickerGridTokens.scrollbarColor, _TimePickerGrid.timePickerGridTokens.scrollbarTrackColor, _TimePickerGrid.timePickerGridTokens.disabledOpacity)
+        },
+        size: {
+            l: (0, _styledcomponents.css)([
+                "",
+                ":15rem;",
+                ":36.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-font-weight);",
+                ":var(--plasma-typo-body-l-letter-spacing);",
+                ":var(--plasma-typo-body-l-line-height);",
+                ":3.5rem;",
+                ":0.75rem;",
+                ":0rem;",
+                ":0.125rem;",
+                ":0.5rem;"
+            ], _TimePickerGrid.timePickerGridTokens.timePickerGridWidth, _TimePickerGrid.timePickerGridTokens.columnHeight, _TimePickerGrid.timePickerGridTokens.itemFontFamily, _TimePickerGrid.timePickerGridTokens.itemFontSize, _TimePickerGrid.timePickerGridTokens.itemFontStyle, _TimePickerGrid.timePickerGridTokens.itemFontWeight, _TimePickerGrid.timePickerGridTokens.itemLetterSpacing, _TimePickerGrid.timePickerGridTokens.itemLineHeight, _TimePickerGrid.timePickerGridTokens.itemHeight, _TimePickerGrid.timePickerGridTokens.itemBorderRadius, _TimePickerGrid.timePickerGridTokens.itemPadding, _TimePickerGrid.timePickerGridTokens.scrollbarWidth, _TimePickerGrid.timePickerGridTokens.scrollbarMargin),
+            m: (0, _styledcomponents.css)([
+                "",
+                ":15rem;",
+                ":31.25rem;",
+                ":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-font-weight);",
+                ":var(--plasma-typo-body-m-letter-spacing);",
+                ":var(--plasma-typo-body-m-line-height);",
+                ":3rem;",
+                ":0.625rem;",
+                ":0rem;",
+                ":0.125rem;",
+                ":0.375rem;"
+            ], _TimePickerGrid.timePickerGridTokens.timePickerGridWidth, _TimePickerGrid.timePickerGridTokens.columnHeight, _TimePickerGrid.timePickerGridTokens.itemFontFamily, _TimePickerGrid.timePickerGridTokens.itemFontSize, _TimePickerGrid.timePickerGridTokens.itemFontStyle, _TimePickerGrid.timePickerGridTokens.itemFontWeight, _TimePickerGrid.timePickerGridTokens.itemLetterSpacing, _TimePickerGrid.timePickerGridTokens.itemLineHeight, _TimePickerGrid.timePickerGridTokens.itemHeight, _TimePickerGrid.timePickerGridTokens.itemBorderRadius, _TimePickerGrid.timePickerGridTokens.itemPadding, _TimePickerGrid.timePickerGridTokens.scrollbarWidth, _TimePickerGrid.timePickerGridTokens.scrollbarMargin),
+            s: (0, _styledcomponents.css)([
+                "",
+                ":15rem;",
+                ":26.25rem;",
+                ":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-font-weight);",
+                ":var(--plasma-typo-body-s-letter-spacing);",
+                ":var(--plasma-typo-body-s-line-height);",
+                ":2.5rem;",
+                ":0.5rem;",
+                ":0rem;",
+                ":0.125rem;",
+                ":0.25rem;"
+            ], _TimePickerGrid.timePickerGridTokens.timePickerGridWidth, _TimePickerGrid.timePickerGridTokens.columnHeight, _TimePickerGrid.timePickerGridTokens.itemFontFamily, _TimePickerGrid.timePickerGridTokens.itemFontSize, _TimePickerGrid.timePickerGridTokens.itemFontStyle, _TimePickerGrid.timePickerGridTokens.itemFontWeight, _TimePickerGrid.timePickerGridTokens.itemLetterSpacing, _TimePickerGrid.timePickerGridTokens.itemLineHeight, _TimePickerGrid.timePickerGridTokens.itemHeight, _TimePickerGrid.timePickerGridTokens.itemBorderRadius, _TimePickerGrid.timePickerGridTokens.itemPadding, _TimePickerGrid.timePickerGridTokens.scrollbarWidth, _TimePickerGrid.timePickerGridTokens.scrollbarMargin),
+            xs: (0, _styledcomponents.css)([
+                "",
+                ":15rem;",
+                ":21.25rem;",
+                ":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-font-weight);",
+                ":var(--plasma-typo-body-xs-letter-spacing);",
+                ":var(--plasma-typo-body-xs-line-height);",
+                ":2rem;",
+                ":0.375rem;",
+                ":0rem;",
+                ":0.125rem;",
+                ":0.25rem;",
+                ":0.4;"
+            ], _TimePickerGrid.timePickerGridTokens.timePickerGridWidth, _TimePickerGrid.timePickerGridTokens.columnHeight, _TimePickerGrid.timePickerGridTokens.itemFontFamily, _TimePickerGrid.timePickerGridTokens.itemFontSize, _TimePickerGrid.timePickerGridTokens.itemFontStyle, _TimePickerGrid.timePickerGridTokens.itemFontWeight, _TimePickerGrid.timePickerGridTokens.itemLetterSpacing, _TimePickerGrid.timePickerGridTokens.itemLineHeight, _TimePickerGrid.timePickerGridTokens.itemHeight, _TimePickerGrid.timePickerGridTokens.itemBorderRadius, _TimePickerGrid.timePickerGridTokens.itemPadding, _TimePickerGrid.timePickerGridTokens.scrollbarWidth, _TimePickerGrid.timePickerGridTokens.scrollbarMargin, _TimePickerGrid.timePickerGridTokens.disabledOpacity)
+        },
+        disabled: {
+            true: (0, _styledcomponents.css)([
+                "",
+                ":0.4;"
+            ], _TimePickerGrid.timePickerGridTokens.disabledOpacity)
+        }
+    }
+};

package/styled-components/cjs/examples/components/TimePickerGrid/TimePickerGrid.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TimePickerGrid", {
+    enumerable: true,
+    get: function() {
+        return TimePickerGrid;
+    }
+});
+var _engines = require("../../../engines");
+var _TimePickerGrid = require("../../../components/TimePickerGrid");
+var _TimePickerGridconfig = require("./TimePickerGrid.config");
+var mergedConfig = (0, _engines.mergeConfig)(_TimePickerGrid.timePickerGridConfig, _TimePickerGridconfig.config);
+var TimePickerGrid = (0, _engines.component)(mergedConfig);

package/styled-components/cjs/index.js

@@ -88,6 +88,7 @@ _export_star(require("./components/InformationWrapper"), exports);
 _export_star(require("./components/NavigationDrawer"), exports);
 _export_star(require("./components/ProgressBarCircular"), exports);
 _export_star(require("./components/TimePicker"), exports);
+_export_star(require("./components/Loader"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {