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

package/styled-components/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles.js

@@ -74,7 +74,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
 }
 var StyledContent = _styledcomponents.default.div.withConfig({
     displayName: "HorizontalTabItem.styles__StyledContent",
-    componentId: "sc-e4f78c87-0"
+    componentId: "sc-6029f576-0"
 })([
     "display:inline-block;width:fit-content;padding:0 var(",
     ",var(",
@@ -82,7 +82,7 @@ var StyledContent = _styledcomponents.default.div.withConfig({
 ], _tokens.tokens.itemContentPaddingClear, _tokens.tokens.itemContentPadding);
 var TabItemValue = _styledcomponents.default.span.withConfig({
     displayName: "HorizontalTabItem.styles__TabItemValue",
-    componentId: "sc-e4f78c87-1"
+    componentId: "sc-6029f576-1"
 })([
     "color:var(",
     ");font-family:var(",
@@ -101,19 +101,19 @@ var TabItemValue = _styledcomponents.default.span.withConfig({
 ], _tokens.tokens.itemValueColor, _tokens.tokens.valueFontFamily, _tokens.tokens.fontFamily, _tokens.tokens.valueFontSize, _tokens.tokens.fontSize, _tokens.tokens.valueFontStyle, _tokens.tokens.fontStyle, _tokens.tokens.valueFontWeight, _tokens.tokens.fontWeight, _tokens.tokens.valueLetterSpacing, _tokens.tokens.letterSpacing, _tokens.tokens.valueLineHeight, _tokens.tokens.lineHeight);
 var RightContent = _styledcomponents.default.div.withConfig({
     displayName: "HorizontalTabItem.styles__RightContent",
-    componentId: "sc-e4f78c87-2"
+    componentId: "sc-6029f576-2"
 })([
     "display:flex;color:inherit;&:hover{color:inherit;}"
 ]);
 var LeftContent = _styledcomponents.default.div.withConfig({
     displayName: "HorizontalTabItem.styles__LeftContent",
-    componentId: "sc-e4f78c87-3"
+    componentId: "sc-6029f576-3"
 })([
     "display:flex;color:inherit;&:hover{color:inherit;}"
 ]);
 var ActionContent = _styledcomponents.default.div.withConfig({
     displayName: "HorizontalTabItem.styles__ActionContent",
-    componentId: "sc-e4f78c87-4"
+    componentId: "sc-6029f576-4"
 })([
     "display:flex;margin-left:var(",
     ");"
@@ -131,7 +131,7 @@ var base = (0, _styledcomponents.css)([
     "{overflow:hidden;text-overflow:ellipsis;}}"
 ], _tokens.tokens.itemContentGap, _tokens.tokens.itemPaddingClear, _tokens.tokens.itemPadding, _tokens.tokens.itemCursorOverNotSelected, _tokens.tokens.itemCursor, (0, _mixins.addFocus)({
     outlineSize: '0.063rem',
-    outlineOffset: '0.063rem',
+    outlineOffset: '-0.125rem',
     outlineColor: "var(".concat(_tokens.tokens.outlineFocusColor, ")"),
     outlineRadius: 'calc(var(--plasma_private-outline-radius) + 0.063rem)',
     customFocusRules: "\n            &.focus-visible:focus,\n            &[data-focus-visible-added] {\n                &::before {\n                    z-index: 1;\n                    outline: none;\n                    box-shadow: 0 0 0 0.063rem var(".concat(_tokens.tokens.outlineFocusColor, ");\n                }\n            }\n        ")

package/styled-components/cjs/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.styles.js

@@ -71,21 +71,21 @@ var base = (0, _styledcomponents.css)([
 ]);
 var StyledContent = _styledcomponents.default.div.withConfig({
     displayName: "HorizontalTabs.styles__StyledContent",
-    componentId: "sc-e818e527-0"
+    componentId: "sc-93ada113-0"
 })([
     "display:inline-flex;flex-direction:row;align-items:center;"
 ]);
 var StyledContentWrapper = _styledcomponents.default.div.withConfig({
     displayName: "HorizontalTabs.styles__StyledContentWrapper",
-    componentId: "sc-e818e527-1"
+    componentId: "sc-93ada113-1"
 })([
-    "box-sizing:content-box;position:relative;height:100%;width:100%;display:flex;align-items:center;z-index:1;&.",
+    "margin:-0.125rem;padding:0.25rem;box-sizing:content-box;position:relative;height:100%;width:100%;display:flex;align-items:center;z-index:1;&.",
     "{overflow:scroll;scrollbar-width:none;::-webkit-scrollbar{display:none;}}&.",
     "{overflow:visible;}"
 ], _tokens.classes.tabsClipScroll, _tokens.classes.tabsClipShowAll);
 var StyledArrow = _styledcomponents.default.button.withConfig({
     displayName: "HorizontalTabs.styles__StyledArrow",
-    componentId: "sc-e818e527-2"
+    componentId: "sc-93ada113-2"
 })([
     "display:flex;cursor:pointer;border:none;background-color:transparent;padding:0;outline:none;",
     ";&[disabled]{cursor:not-allowed;}--plasma_private-outer-padding:",

package/styled-components/cjs/components/Tabs/ui/vertical/VerticalIconTabItem/VerticalIconTabItem.styles.js

@@ -65,13 +65,13 @@ function _interop_require_wildcard(obj, nodeInterop) {
 }
 var StyledContent = _styledcomponents.default.div.withConfig({
     displayName: "VerticalIconTabItem.styles__StyledContent",
-    componentId: "sc-e7e3f81e-0"
+    componentId: "sc-4febd5c6-0"
 })([
     "display:inline-block;width:fit-content;"
 ]);
 var ActionContent = _styledcomponents.default.div.withConfig({
     displayName: "VerticalIconTabItem.styles__ActionContent",
-    componentId: "sc-e7e3f81e-1"
+    componentId: "sc-4febd5c6-1"
 })([
     "display:flex;margin-left:var(",
     ");"
@@ -84,7 +84,7 @@ var base = (0, _styledcomponents.css)([
     ";"
 ], _tokens.tokens.itemContentGap, _tokens.tokens.itemCursorOverNotSelected, _tokens.tokens.itemCursor, (0, _mixins.addFocus)({
     outlineSize: '0.063rem',
-    outlineOffset: '0.063rem',
+    outlineOffset: '-0.125rem',
     outlineColor: "var(".concat(_tokens.tokens.outlineFocusColor, ")"),
     outlineRadius: 'calc(var(--plasma_private-outline-radius) + 0.063rem)',
     customFocusRules: "\n            &.focus-visible:focus,\n            &[data-focus-visible-added] {\n                &::before {\n                    z-index: 1;\n                    outline: none;\n                    box-shadow: 0 0 0 0.063rem var(".concat(_tokens.tokens.outlineFocusColor, ");\n                }\n            }\n        ")

package/styled-components/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.js

@@ -74,7 +74,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
 }
 var StyledContent = _styledcomponents.default.div.withConfig({
     displayName: "VerticalTabItem.styles__StyledContent",
-    componentId: "sc-4c636acb-0"
+    componentId: "sc-52a7e18d-0"
 })([
     "display:inline-block;width:fit-content;padding:0 var(",
     ",var(",
@@ -82,7 +82,7 @@ var StyledContent = _styledcomponents.default.div.withConfig({
 ], _tokens.tokens.itemContentPaddingClear, _tokens.tokens.itemContentPadding);
 var TabItemValue = _styledcomponents.default.span.withConfig({
     displayName: "VerticalTabItem.styles__TabItemValue",
-    componentId: "sc-4c636acb-1"
+    componentId: "sc-52a7e18d-1"
 })([
     "white-space:nowrap;color:var(",
     ");font-family:var(",
@@ -101,19 +101,19 @@ var TabItemValue = _styledcomponents.default.span.withConfig({
 ], _tokens.tokens.itemValueColor, _tokens.tokens.valueFontFamily, _tokens.tokens.fontFamily, _tokens.tokens.valueFontSize, _tokens.tokens.fontSize, _tokens.tokens.valueFontStyle, _tokens.tokens.fontStyle, _tokens.tokens.valueFontWeight, _tokens.tokens.fontWeight, _tokens.tokens.valueLetterSpacing, _tokens.tokens.letterSpacing, _tokens.tokens.valueLineHeight, _tokens.tokens.lineHeight);
 var RightContent = _styledcomponents.default.div.withConfig({
     displayName: "VerticalTabItem.styles__RightContent",
-    componentId: "sc-4c636acb-2"
+    componentId: "sc-52a7e18d-2"
 })([
     "display:flex;color:inherit;&:hover{color:inherit;}"
 ]);
 var LeftContent = _styledcomponents.default.div.withConfig({
     displayName: "VerticalTabItem.styles__LeftContent",
-    componentId: "sc-4c636acb-3"
+    componentId: "sc-52a7e18d-3"
 })([
     "display:flex;color:inherit;&:hover{color:inherit;}"
 ]);
 var ActionContent = _styledcomponents.default.div.withConfig({
     displayName: "VerticalTabItem.styles__ActionContent",
-    componentId: "sc-4c636acb-4"
+    componentId: "sc-52a7e18d-4"
 })([
     "display:flex;margin-left:var(",
     ");"
@@ -130,7 +130,7 @@ var base = (0, _styledcomponents.css)([
     "{overflow:hidden;text-overflow:ellipsis;}}"
 ], _tokens.tokens.itemContentGap, _tokens.tokens.itemPaddingOrientationVertical, _tokens.tokens.itemCursorOverNotSelected, _tokens.tokens.itemCursor, (0, _mixins.addFocus)({
     outlineSize: '0.063rem',
-    outlineOffset: '0.063rem',
+    outlineOffset: '-0.125rem',
     outlineColor: "var(".concat(_tokens.tokens.outlineFocusColor, ")"),
     outlineRadius: 'calc(var(--plasma_private-outline-radius) + 0.063rem)',
     customFocusRules: "\n            &.focus-visible:focus,\n            &[data-focus-visible-added] {\n                &::before {\n                    z-index: 1;\n                    outline: none;\n                    box-shadow: 0 0 0 0.063rem var(".concat(_tokens.tokens.outlineFocusColor, ");\n                }\n            }\n        ")

package/styled-components/cjs/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.styles.js

@@ -71,22 +71,22 @@ var base = (0, _styledcomponents.css)([
 ]);
 var StyledContent = _styledcomponents.default.div.withConfig({
     displayName: "VerticalTabs.styles__StyledContent",
-    componentId: "sc-785d61e-0"
+    componentId: "sc-47b291a4-0"
 })([
     "display:inline-flex;flex-direction:column;align-items:flex-start;"
 ]);
 var StyledContentWrapper = _styledcomponents.default.div.withConfig({
     displayName: "VerticalTabs.styles__StyledContentWrapper",
-    componentId: "sc-785d61e-1"
+    componentId: "sc-47b291a4-1"
 })([
-    "box-sizing:border-box;position:relative;height:100%;width:100%;display:flex;align-items:center;z-index:1;&.",
+    "padding:0.125rem 0.25rem;box-sizing:border-box;position:relative;height:100%;width:100%;display:flex;align-items:center;z-index:1;&.",
     "{overflow:scroll;scrollbar-width:none;::-webkit-scrollbar{display:none;}",
     "{margin-top:auto;}}&.",
     "{overflow:visible;}"
 ], _tokens.classes.tabsClipScroll, StyledContent, _tokens.classes.tabsClipShowAll);
 var StyledArrow = _styledcomponents.default.button.withConfig({
     displayName: "VerticalTabs.styles__StyledArrow",
-    componentId: "sc-785d61e-2"
+    componentId: "sc-47b291a4-2"
 })([
     "display:flex;cursor:pointer;border:none;background-color:transparent;padding:0;outline:none;transform:rotate(90deg);",
     ";&[disabled]{cursor:not-allowed;}color:var(",
@@ -95,7 +95,7 @@ var StyledArrow = _styledcomponents.default.button.withConfig({
     ");}"
 ], (0, _mixins.addFocus)({
     outlineSize: '0.063rem',
-    outlineOffset: '0.063rem',
+    outlineOffset: '-0.125rem',
     outlineColor: "var(".concat(_tokens.tokens.outlineFocusColor, ")"),
     outlineRadius: 'calc(var(--plasma_private-outline-radius) - 0.063rem)'
 }), _tokens.tokens.arrowColor, _tokens.tokens.arrowColorHover, _tokens.tokens.arrowColorActive);

package/styled-components/cjs/components/Tabs/ui/vertical/VerticalTabs/variations/_view/base.js

@@ -12,7 +12,7 @@ var _styledcomponents = require("styled-components");
 var _tokens = require("../../../../../tokens");
 var base = (0, _styledcomponents.css)([
     "background-color:var(",
-    ");&::after{content:'';position:absolute;top:0.125rem;bottom:0.125rem;left:0;background:var(",
+    ");&::after{content:'';position:absolute;top:0.125rem;bottom:0.125rem;left:0.25rem;background:var(",
     ");width:var(",
     ");border-radius:var(",
     ");}&.",

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

@@ -1 +1,16 @@
 "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/Loader/Loader.config.js

@@ -0,0 +1,188 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "config", {
+    enumerable: true,
+    get: function() {
+        return config;
+    }
+});
+var _styledcomponents = require("styled-components");
+var _Loader = require("../../../components/Loader");
+var config = {
+    defaults: {
+        view: 'default',
+        size: 'm'
+    },
+    variations: {
+        view: {
+            default: (0, _styledcomponents.css)([
+                "",
+                ":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),
+            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),
+            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),
+            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),
+            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),
+            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),
+            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)
+        },
+        size: {
+            xxl: (0, _styledcomponents.css)([
+                "",
+                ":100%;",
+                ":100%;",
+                ":128;",
+                ":8rem;",
+                ":8rem;",
+                ":0.25rem;",
+                ":4;",
+                ":var(--plasma-typo-h2-font-family);",
+                ":var(--plasma-typo-h2-font-size);",
+                ":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),
+            xl: (0, _styledcomponents.css)([
+                "",
+                ":100%;",
+                ":100%;",
+                ":88;",
+                ":5.5rem;",
+                ":5.5rem;",
+                ":0.25rem;",
+                ":4;",
+                ":var(--plasma-typo-h5-font-family);",
+                ":var(--plasma-typo-h5-font-size);",
+                ":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),
+            l: (0, _styledcomponents.css)([
+                "",
+                ":100%;",
+                ":100%;",
+                ":56;",
+                ":3.5rem;",
+                ":3.5rem;",
+                ":0.125rem;",
+                ":2;",
+                ":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-body-font-weight);",
+                ":var(--plasma-typo-body-l-letter-spacing);",
+                ":var(--plasma-typo-body-l-line-height);",
+                ":36px;"
+            ], _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)([
+                "",
+                ":100%;",
+                ":100%;",
+                ":48;",
+                ":3rem;",
+                ":3rem;",
+                ":0.125rem;",
+                ":2;",
+                ":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-body-font-weight);",
+                ":var(--plasma-typo-body-m-letter-spacing);",
+                ":var(--plasma-typo-body-m-line-height);",
+                ":24px;"
+            ], _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)([
+                "",
+                ":100%;",
+                ":100%;",
+                ":32;",
+                ":2.25rem;",
+                ":2.25rem;",
+                ":0.125rem;",
+                ":2;",
+                ":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-body-font-weight);",
+                ":var(--plasma-typo-body-s-letter-spacing);",
+                ":var(--plasma-typo-body-s-line-height);",
+                ":16px;"
+            ], _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)([
+                "",
+                ":100%;",
+                ":100%;",
+                ":24;",
+                ":1.5rem;",
+                ":1.5rem;",
+                ":0.125rem;",
+                ":2;",
+                ":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-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),
+            xxs: (0, _styledcomponents.css)([
+                "",
+                ":100%;",
+                ":100%;",
+                ":16;",
+                ":1rem;",
+                ":1rem;",
+                ":0.125rem;",
+                ":2;",
+                ":var(--plasma-typo-body-xxs-font-family);",
+                ":var(--plasma-typo-body-xxs-font-size);",
+                ":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)
+        }
+    }
+};

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

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

package/styled-components/cjs/examples/components/Tabs/horizontal/HorizontalTabItem.config.js

@@ -12,7 +12,7 @@ var _styledcomponents = require("styled-components");
 var _Tabs = require("../../../../components/Tabs");
 var config = {
     defaults: {
-        view: 'divider',
+        view: 'default',
         size: 'xs'
     },
     variations: {
@@ -34,12 +34,14 @@ var config = {
                 ":var(--text-secondary);",
                 ":transparent;",
                 ":background-color 0.3s ease-in-out;",
+                ":0;",
+                ":0;",
                 ":var(--surface-accent);",
                 ":0rem;",
                 ":var(--text-primary);",
                 ":var(--text-primary);",
                 ":pointer;"
-            ], _Tabs.tabsTokens.itemColor, _Tabs.tabsTokens.itemValueColor, _Tabs.tabsTokens.itemBackgroundColor, _Tabs.tabsTokens.itemColorHover, _Tabs.tabsTokens.itemValueColorHover, _Tabs.tabsTokens.itemColorActive, _Tabs.tabsTokens.itemValueColorActive, _Tabs.tabsTokens.itemBackgroundColorHover, _Tabs.tabsTokens.itemSelectedColor, _Tabs.tabsTokens.itemSelectedValueColor, _Tabs.tabsTokens.itemSelectedBackgroundColor, _Tabs.tabsTokens.itemSelectedColorHover, _Tabs.tabsTokens.itemSelectedValueColorHover, _Tabs.tabsTokens.itemSelectedBackgroundColorHover, _Tabs.tabsTokens.itemBackgroundTransition, _Tabs.tabsTokens.outlineFocusColor, _Tabs.tabsTokens.itemSelectedDividerHeight, _Tabs.tabsTokens.itemSelectedDividerColor, _Tabs.tabsTokens.itemSelectedDividerColorHover, _Tabs.tabsTokens.itemCursor),
+            ], _Tabs.tabsTokens.itemColor, _Tabs.tabsTokens.itemValueColor, _Tabs.tabsTokens.itemBackgroundColor, _Tabs.tabsTokens.itemColorHover, _Tabs.tabsTokens.itemValueColorHover, _Tabs.tabsTokens.itemColorActive, _Tabs.tabsTokens.itemValueColorActive, _Tabs.tabsTokens.itemBackgroundColorHover, _Tabs.tabsTokens.itemSelectedColor, _Tabs.tabsTokens.itemSelectedValueColor, _Tabs.tabsTokens.itemSelectedBackgroundColor, _Tabs.tabsTokens.itemSelectedColorHover, _Tabs.tabsTokens.itemSelectedValueColorHover, _Tabs.tabsTokens.itemSelectedBackgroundColorHover, _Tabs.tabsTokens.itemBackgroundTransition, _Tabs.tabsTokens.itemPaddingClear, _Tabs.tabsTokens.itemContentPaddingClear, _Tabs.tabsTokens.outlineFocusColor, _Tabs.tabsTokens.itemSelectedDividerHeight, _Tabs.tabsTokens.itemSelectedDividerColor, _Tabs.tabsTokens.itemSelectedDividerColorHover, _Tabs.tabsTokens.itemCursor),
             secondary: (0, _styledcomponents.css)([
                 "",
                 ":var(--text-primary);",
@@ -81,12 +83,14 @@ var config = {
                 ":var(--text-secondary);",
                 ":transparent;",
                 ":background-color 0.3s ease-in-out;",
+                ":0;",
+                ":0;",
                 ":var(--surface-accent);",
                 ":0.125rem;",
                 ":var(--text-primary);",
                 ":var(--text-primary);",
                 ":pointer;"
-            ], _Tabs.tabsTokens.itemColor, _Tabs.tabsTokens.itemValueColor, _Tabs.tabsTokens.itemBackgroundColor, _Tabs.tabsTokens.itemColorHover, _Tabs.tabsTokens.itemValueColorHover, _Tabs.tabsTokens.itemColorActive, _Tabs.tabsTokens.itemValueColorActive, _Tabs.tabsTokens.itemBackgroundColorHover, _Tabs.tabsTokens.itemSelectedColor, _Tabs.tabsTokens.itemSelectedValueColor, _Tabs.tabsTokens.itemSelectedBackgroundColor, _Tabs.tabsTokens.itemSelectedColorHover, _Tabs.tabsTokens.itemSelectedValueColorHover, _Tabs.tabsTokens.itemSelectedBackgroundColorHover, _Tabs.tabsTokens.itemBackgroundTransition, _Tabs.tabsTokens.outlineFocusColor, _Tabs.tabsTokens.itemSelectedDividerHeight, _Tabs.tabsTokens.itemSelectedDividerColor, _Tabs.tabsTokens.itemSelectedDividerColorHover, _Tabs.tabsTokens.itemCursor),
+            ], _Tabs.tabsTokens.itemColor, _Tabs.tabsTokens.itemValueColor, _Tabs.tabsTokens.itemBackgroundColor, _Tabs.tabsTokens.itemColorHover, _Tabs.tabsTokens.itemValueColorHover, _Tabs.tabsTokens.itemColorActive, _Tabs.tabsTokens.itemValueColorActive, _Tabs.tabsTokens.itemBackgroundColorHover, _Tabs.tabsTokens.itemSelectedColor, _Tabs.tabsTokens.itemSelectedValueColor, _Tabs.tabsTokens.itemSelectedBackgroundColor, _Tabs.tabsTokens.itemSelectedColorHover, _Tabs.tabsTokens.itemSelectedValueColorHover, _Tabs.tabsTokens.itemSelectedBackgroundColorHover, _Tabs.tabsTokens.itemBackgroundTransition, _Tabs.tabsTokens.itemPaddingClear, _Tabs.tabsTokens.itemContentPaddingClear, _Tabs.tabsTokens.outlineFocusColor, _Tabs.tabsTokens.itemSelectedDividerHeight, _Tabs.tabsTokens.itemSelectedDividerColor, _Tabs.tabsTokens.itemSelectedDividerColorHover, _Tabs.tabsTokens.itemCursor),
             default: (0, _styledcomponents.css)([
                 "",
                 ":var(--text-primary);",
@@ -118,9 +122,9 @@ var config = {
                 ":0.375rem;",
                 ":auto;",
                 ":2rem;",
-                ":0 0.125rem;",
+                ":0 0.5rem;",
                 ":0 0.375rem;",
-                ":1.5rem;",
+                ":1.75rem;",
                 ":0.25rem;",
                 ":0.125rem;",
                 ":var(--plasma-typo-body-xs-font-family);",
@@ -136,9 +140,9 @@ var config = {
                 ":0.5rem;",
                 ":auto;",
                 ":2.5rem;",
-                ":0 0.125rem;",
+                ":0 0.625rem;",
                 ":0 0.5rem;",
-                ":1.5rem;",
+                ":1.75rem;",
                 ":0.25rem;",
                 ":0.125rem;",
                 ":var(--plasma-typo-body-s-font-family);",
@@ -154,9 +158,9 @@ var config = {
                 ":0.625rem;",
                 ":auto;",
                 ":3rem;",
-                ":0 0.125rem;",
+                ":0 0.625rem;",
                 ":0 0.5rem;",
-                ":1.5rem;",
+                ":1.75rem;",
                 ":0.375rem;",
                 ":0.125rem;",
                 ":var(--plasma-typo-body-m-font-family);",
@@ -172,9 +176,9 @@ var config = {
                 ":0.75rem;",
                 ":auto;",
                 ":3.5rem;",
-                ":0 0.125rem;",
+                ":0 0.875rem;",
                 ":0 0.75rem;",
-                ":1.5rem;",
+                ":1.75rem;",
                 ":0.5rem;",
                 ":0.125rem;",
                 ":var(--plasma-typo-body-l-font-family);",
@@ -190,8 +194,8 @@ var config = {
                 ":0.375rem;",
                 ":auto;",
                 ":3rem;",
-                ":0 0.125rem;",
-                ":1.5rem;",
+                ":0rem;",
+                ":1.75rem;",
                 ":0.625rem;",
                 ":var(--plasma-typo-h5-font-family);",
                 ":var(--plasma-typo-h5-font-size);",
@@ -206,8 +210,8 @@ var config = {
                 ":0.375rem;",
                 ":auto;",
                 ":3.25rem;",
-                ":0 0.125rem;",
-                ":1.75rem;",
+                ":0rem;",
+                ":2rem;",
                 ":0.625rem;",
                 ":var(--plasma-typo-h4-font-family);",
                 ":var(--plasma-typo-h4-font-size);",
@@ -222,8 +226,8 @@ var config = {
                 ":0.5rem;",
                 ":auto;",
                 ":3.875rem;",
-                ":0 0.125rem;",
-                ":2rem;",
+                ":0rem;",
+                ":2.25rem;",
                 ":0.75rem;",
                 ":var(--plasma-typo-h3-font-family);",
                 ":var(--plasma-typo-h3-font-size);",
@@ -238,8 +242,8 @@ var config = {
                 ":0.625rem;",
                 ":auto;",
                 ":4.5rem;",
-                ":0 0.125rem;",
-                ":2.25rem;",
+                ":0rem;",
+                ":2.5rem;",
                 ":0.875rem;",
                 ":var(--plasma-typo-h2-font-family);",
                 ":var(--plasma-typo-h2-font-size);",
@@ -254,8 +258,8 @@ var config = {
                 ":0.75rem;",
                 ":auto;",
                 ":5.75rem;",
-                ":0 0.125rem;",
-                ":3.25rem;",
+                ":0rem;",
+                ":3.5rem;",
                 ":1rem;",
                 ":var(--plasma-typo-h1-font-family);",
                 ":var(--plasma-typo-h1-font-size);",