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

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)) {

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

@@ -26,6 +26,30 @@ function _object_spread(target) {
     }
     return target;
 }
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
 function _object_without_properties(source, excluded) {
     if (source == null) return {};
     var target = _object_without_properties_loose(source, excluded);
@@ -58,27 +82,33 @@ import cls from "classnames";
 import { base as viewCSS } from "./variations/_view/base";
 import { base as sizeCSS } from "./variations/_size/base";
 import { base, StyledProgressBarCircular, StyledSpinner } from "./Loader.styles";
-import { classes } from "./Loader.tokens";
+import { classes, tokens } from "./Loader.tokens";
 export var loaderRoot = function(Root) {
     return /*#__PURE__*/ forwardRef(function(props, ref) {
-        var _props_type = props.type, type = _props_type === void 0 ? 'spinner' : _props_type, _props_hasBlur = props.hasBlur, hasBlur = _props_hasBlur === void 0 ? false : _props_hasBlur, _props_hasOverlay = props.hasOverlay, hasOverlay = _props_hasOverlay === void 0 ? false : _props_hasOverlay, _props_value = props.value, value = _props_value === void 0 ? 0 : _props_value, _props_maxValue = props.maxValue, maxValue = _props_maxValue === void 0 ? 100 : _props_maxValue, size = props.size, view = props.view, children = props.children, className = props.className, strokeWidth = props.strokeWidth, rest = _object_without_properties(props, [
+        var _props_type = props.type, type = _props_type === void 0 ? 'spinner' : _props_type, _props_hasBlur = props.hasBlur, hasBlur = _props_hasBlur === void 0 ? false : _props_hasBlur, _props_hasOverlay = props.hasOverlay, hasOverlay = _props_hasOverlay === void 0 ? false : _props_hasOverlay, _props_value = props.value, value = _props_value === void 0 ? 0 : _props_value, _props_blur = props.blur, blur = _props_blur === void 0 ? 'medium' : _props_blur, overlayColor = props.overlayColor, _props_maxValue = props.maxValue, maxValue = _props_maxValue === void 0 ? 100 : _props_maxValue, size = props.size, view = props.view, children = props.children, className = props.className, strokeWidth = props.strokeWidth, style = props.style, rest = _object_without_properties(props, [
             "type",
             "hasBlur",
             "hasOverlay",
             "value",
+            "blur",
+            "overlayColor",
             "maxValue",
             "size",
             "view",
             "children",
             "className",
-            "strokeWidth"
+            "strokeWidth",
+            "style"
         ]);
-        var _obj;
+        var blurClass = hasBlur ? classes["".concat(blur, "LoaderBlur")] : '';
         return /*#__PURE__*/ React.createElement(Root, _object_spread({
             ref: ref,
             view: view,
             size: size,
-            className: cls(className, (_obj = {}, _define_property(_obj, classes.loaderHasBlur, hasBlur), _define_property(_obj, classes.loaderHasOverlay, hasOverlay), _obj))
+            className: cls(className, blurClass, _define_property({}, classes.loaderHasOverlay, hasOverlay)),
+            style: _object_spread_props(_object_spread({}, style), {
+                '--plasma_private-loader-overlay-color': overlayColor || "var(".concat(tokens.overlayColor, ")")
+            })
         }, rest), type === 'spinner' ? /*#__PURE__*/ React.createElement(StyledSpinner, {
             size: size,
             view: view

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

@@ -4,7 +4,7 @@ import { applyBlur } from "../../mixins";
 import { spinnerConfig, spinnerTokens } from "../Spinner";
 import { progressBarCircularConfig, progressBarCircularTokens } from "../ProgressBarCircular";
 import { component, mergeConfig } from "../../engines";
-import { tokens, classes } from "./Loader.tokens";
+import { tokens, classes, privateTokens } from "./Loader.tokens";
 var mergedSpinnerConfig = mergeConfig(spinnerConfig);
 var Spinner = component(mergedSpinnerConfig);
 var mergedProgressBarCircularConfig = mergeConfig(progressBarCircularConfig);
@@ -15,11 +15,16 @@ export var base = css([
     ");&.",
     "{",
     "}&.",
-    "{background:var(--overlay-soft);}"
-], tokens.width, tokens.height, classes.loaderHasBlur, applyBlur('medium'), classes.loaderHasOverlay);
+    "{",
+    "}&.",
+    "{",
+    "}&.",
+    "{background:var(",
+    ");}"
+], tokens.width, tokens.height, classes.smallLoaderBlur, applyBlur('small'), classes.mediumLoaderBlur, applyBlur('medium'), classes.largeLoaderBlur, applyBlur('large'), classes.loaderHasOverlay, privateTokens.loaderOverlayColor);
 export var StyledSpinner = styled(Spinner).withConfig({
     displayName: "Loader.styles__StyledSpinner",
-    componentId: "sc-34fd93bf-0"
+    componentId: "sc-dd6b2421-0"
 })([
     "",
     ":var(",
@@ -29,7 +34,7 @@ export var StyledSpinner = styled(Spinner).withConfig({
 ], spinnerTokens.size, tokens.spinnerSize, spinnerTokens.color, tokens.spinnerColor);
 export var StyledProgressBarCircular = styled(ProgressBarCircular).withConfig({
     displayName: "Loader.styles__StyledProgressBarCircular",
-    componentId: "sc-34fd93bf-1"
+    componentId: "sc-dd6b2421-1"
 })([
     "",
     ":var(",

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

@@ -1,5 +1,7 @@
 export var classes = {
-    loaderHasBlur: '--plasma-loader-has-blur',
+    smallLoaderBlur: '--plasma-loader-small-blur',
+    mediumLoaderBlur: '--plasma-loader-medium-blur',
+    largeLoaderBlur: '--plasma-loader-large-blur',
     loaderHasOverlay: '--plasma-progressbar-circular-background-circle'
 };
 export var tokens = {
@@ -19,6 +21,11 @@ export var tokens = {
     progressBarCircularContentFontWeight: '--plasma-loader-progressbar-circular-content-font-weight',
     progressBarCircularContentLetterSpacing: '--plasma-loader-progressbar-circular-content-letter-spacing',
     progressBarCircularContentLineHeight: '--plasma-loader-progressbar-circular-content-line-height',
+    overlayColor: '--plasma-loader-overlay-color',
     spinnerSize: '--plasma-loader-spinner-size',
     spinnerColor: '--plasma-loader-spinner-color'
 };
+export var privateTokens = {
+    loaderOverlayColor: '--plasma_private-loader-overlay-color',
+    loaderBlur: '--plasma_private-loader-blur'
+};

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

@@ -8,13 +8,13 @@ export var base = css([
 ], tokens.height, tokens.height);
 export var StyledSVG = styled.svg.withConfig({
     displayName: "ProgressBarCircular.styles__StyledSVG",
-    componentId: "sc-91481a88-0"
+    componentId: "sc-d9be2df8-0"
 })([
     "width:100%;height:100%;"
 ]);
 export var StyledBackgroundCircle = styled.circle.withConfig({
     displayName: "ProgressBarCircular.styles__StyledBackgroundCircle",
-    componentId: "sc-91481a88-1"
+    componentId: "sc-d9be2df8-1"
 })([
     "fill:none;r:",
     ";stroke:var(",
@@ -29,13 +29,13 @@ export var StyledBackgroundCircle = styled.circle.withConfig({
 });
 export var StyledProgressCircle = styled.circle.withConfig({
     displayName: "ProgressBarCircular.styles__StyledProgressCircle",
-    componentId: "sc-91481a88-2"
+    componentId: "sc-d9be2df8-2"
 })([
     "--percentage:",
     ";--radius:",
     ";--circumference:calc(calc(2 * 3.1415926535) * var(--radius));--dashoffset:calc(var(--circumference) - (var(--percentage,0) * var(--circumference) / 100));fill:none;stroke:var(",
     ");stroke-width:",
-    ";stroke-linecap:round;r:var(--radius);stroke-dasharray:var(--circumference);stroke-dashoffset:var(--dashoffset);transition:stroke-dashoffset 0.3s ease-in-out;"
+    ";stroke-linecap:round;r:var(--radius);stroke-dasharray:var(--circumference);stroke-dashoffset:var(--dashoffset);transition:stroke-dashoffset 0.3s linear;"
 ], function(param) {
     var percent = param.percent;
     return percent !== null && percent !== void 0 ? percent : 0;
@@ -48,7 +48,7 @@ export var StyledProgressCircle = styled.circle.withConfig({
 });
 export var StyledContent = styled.div.withConfig({
     displayName: "ProgressBarCircular.styles__StyledContent",
-    componentId: "sc-91481a88-3"
+    componentId: "sc-d9be2df8-3"
 })([
     "position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(",
     ");font-family:var(",