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

package/styled-components/cjs/components/TimePicker/TimePicker.styles.js

@@ -18,9 +18,6 @@ _export(exports, {
     get StyledTimePicker () {
         return StyledTimePicker;
     },
-    get StyledTimePickerGrid () {
-        return StyledTimePickerGrid;
-    },
     get base () {
         return base;
     }
@@ -29,7 +26,6 @@ var _styledcomponents = /*#__PURE__*/ _interop_require_wildcard(require("styled-
 var _engines = require("../../engines");
 var _TextField = require("../TextField");
 var _Popover = require("../Popover");
-var _TimePickerGrid = require("../TimePickerGrid");
 var _TimePickertokens = require("./TimePicker.tokens");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
@@ -76,65 +72,15 @@ var mergedTextFieldConfig = (0, _engines.mergeConfig)(_TextField.textFieldConfig
 var TextField = (0, _engines.component)(mergedTextFieldConfig);
 var mergedPopoverConfig = (0, _engines.mergeConfig)(_Popover.popoverConfig);
 var Popover = (0, _engines.component)(mergedPopoverConfig);
-var mergedTimePickerGrid = (0, _engines.mergeConfig)(_TimePickerGrid.timePickerGridConfig);
-var TimePickerGrid = (0, _engines.component)(mergedTimePickerGrid);
 var StyledPopover = (0, _styledcomponents.default)(Popover).withConfig({
     displayName: "TimePicker.styles__StyledPopover",
-    componentId: "sc-fa04016d-0"
+    componentId: "sc-8a747fd1-0"
 })([
     ""
 ]);
-var StyledTimePickerGrid = (0, _styledcomponents.default)(TimePickerGrid).withConfig({
-    displayName: "TimePicker.styles__StyledTimePickerGrid",
-    componentId: "sc-fa04016d-1"
-})([
-    "",
-    ":var(",
-    ");",
-    ":var(",
-    ");",
-    ":var(",
-    ");",
-    ":var(",
-    ");",
-    ":var(",
-    ");",
-    ":var(",
-    ");",
-    ":var(",
-    ");",
-    ":var(",
-    ");",
-    ":var(",
-    ");",
-    ":var(",
-    ");",
-    ":var(",
-    ");",
-    ":var(",
-    ");",
-    ":var(",
-    ");",
-    ":var(",
-    ");",
-    ":var(",
-    ");",
-    ":var(",
-    ");",
-    ":var(",
-    ");",
-    ":var(",
-    ");",
-    ":var(",
-    ");",
-    ":var(",
-    ");",
-    ":var(",
-    ");"
-], _TimePickerGrid.timePickerGridTokens.timePickerGridBackground, _TimePickertokens.tokens.timePickerBackground, _TimePickerGrid.timePickerGridTokens.timePickerGridBorderRadius, _TimePickertokens.tokens.timePickerBorderRadius, _TimePickerGrid.timePickerGridTokens.timePickerGridWidth, _TimePickertokens.tokens.timePickerWidth, _TimePickerGrid.timePickerGridTokens.timePickerGridPadding, _TimePickertokens.tokens.timePickerPadding, _TimePickerGrid.timePickerGridTokens.disabledOpacity, _TimePickertokens.tokens.disabledOpacity, _TimePickerGrid.timePickerGridTokens.columnHeight, _TimePickertokens.tokens.columnHeight, _TimePickerGrid.timePickerGridTokens.itemHeight, _TimePickertokens.tokens.itemHeight, _TimePickerGrid.timePickerGridTokens.itemBorderRadius, _TimePickertokens.tokens.itemBorderRadius, _TimePickerGrid.timePickerGridTokens.itemPadding, _TimePickertokens.tokens.itemPadding, _TimePickerGrid.timePickerGridTokens.itemBackgroundHover, _TimePickertokens.tokens.itemBackgroundHover, _TimePickerGrid.timePickerGridTokens.itemBackgroundActive, _TimePickertokens.tokens.itemBackgroundActive, _TimePickerGrid.timePickerGridTokens.itemFontFamily, _TimePickertokens.tokens.itemFontFamily, _TimePickerGrid.timePickerGridTokens.itemFontSize, _TimePickertokens.tokens.itemFontSize, _TimePickerGrid.timePickerGridTokens.itemFontStyle, _TimePickertokens.tokens.itemFontStyle, _TimePickerGrid.timePickerGridTokens.itemFontWeight, _TimePickertokens.tokens.itemFontWeight, _TimePickerGrid.timePickerGridTokens.itemLetterSpacing, _TimePickertokens.tokens.itemLetterSpacing, _TimePickerGrid.timePickerGridTokens.itemLineHeight, _TimePickertokens.tokens.itemLineHeight, _TimePickerGrid.timePickerGridTokens.scrollbarWidth, _TimePickertokens.tokens.scrollbarWidth, _TimePickerGrid.timePickerGridTokens.scrollbarColor, _TimePickertokens.tokens.scrollbarColor, _TimePickerGrid.timePickerGridTokens.scrollbarTrackColor, _TimePickertokens.tokens.scrollbarTrackColor, _TimePickerGrid.timePickerGridTokens.scrollbarMargin, _TimePickertokens.tokens.scrollbarMargin);
 var StyledInput = (0, _styledcomponents.default)(TextField).withConfig({
     displayName: "TimePicker.styles__StyledInput",
-    componentId: "sc-fa04016d-2"
+    componentId: "sc-8a747fd1-1"
 })([
     "width:100%;",
     ":var(",
@@ -298,7 +244,7 @@ var base = (0, _styledcomponents.css)([
 ], _TimePickertokens.tokens.width, _TimePickertokens.tokens.dropdownMarginTop, _Popover.popoverClasses.wrapper, _Popover.popoverClasses.target, _TimePickertokens.classes.timePickerstretched, _Popover.popoverClasses.root, _TimePickertokens.classes.timePickerFullWidth, _TimePickertokens.classes.timePickerPlacementRight);
 var StyledTimePicker = _styledcomponents.default.div.withConfig({
     displayName: "TimePicker.styles__StyledTimePicker",
-    componentId: "sc-fa04016d-3"
+    componentId: "sc-8a747fd1-2"
 })([
     "background:var(",
     ");border-radius:var(",

package/styled-components/cjs/components/TimePicker/ui/TimeColumn/TimeColumn.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderTimeColumn", {
+    enumerable: true,
+    get: function() {
+        return renderTimeColumn;
+    }
+});
+var _react = /*#__PURE__*/ _interop_require_default(require("react"));
+var _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+var _TimePickertokens = require("../../TimePicker.tokens");
+var _TimeColumnstyles = require("./TimeColumn.styles");
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+var renderTimeColumn = function(param) {
+    var values = param.values, dropdownHeight = param.dropdownHeight, column = param.column, columnRef = param.columnRef, scrollbarState = param.scrollbarState, setScrollbar = param.setScrollbar, scrollbarRef = param.scrollbarRef, thumbRef = param.thumbRef, timeoutRef = param.timeoutRef, timeItemRefs = param.timeItemRefs, activeTime = param.activeTime, handleTimeItemClick = param.handleTimeItemClick, handleTimeItemKeyDown = param.handleTimeItemKeyDown, createScrollbarDragHandler = param.createScrollbarDragHandler;
+    return /*#__PURE__*/ _react.default.createElement(_TimeColumnstyles.StyledRoot, null, /*#__PURE__*/ _react.default.createElement(_TimeColumnstyles.StyledTimeColumn, {
+        key: column,
+        ref: columnRef,
+        height: dropdownHeight,
+        className: _TimePickertokens.classes.timeColumn
+    }, values.map(function(value, index) {
+        return /*#__PURE__*/ _react.default.createElement(_TimeColumnstyles.StyledTimeItem, {
+            key: value,
+            ref: function(el) {
+                timeItemRefs.current["".concat(column, "-").concat(value)] = el;
+            },
+            className: (0, _classnames.default)(_define_property({}, _TimePickertokens.classes.timeItemActive, activeTime[column] === index)),
+            onClick: function() {
+                return handleTimeItemClick(value, column);
+            },
+            onKeyDown: function(e) {
+                return handleTimeItemKeyDown(e, column, value);
+            }
+        }, value);
+    }), /*#__PURE__*/ _react.default.createElement(_TimeColumnstyles.StyledEmpty, null)), /*#__PURE__*/ _react.default.createElement(_TimeColumnstyles.CustomScrollbar, {
+        ref: scrollbarRef,
+        className: (0, _classnames.default)(_define_property({}, _TimePickertokens.classes.scrollbarVisible, scrollbarState.isVisible))
+    }, /*#__PURE__*/ _react.default.createElement(_TimeColumnstyles.ScrollbarTrack, null, /*#__PURE__*/ _react.default.createElement(_TimeColumnstyles.ScrollbarThumb, {
+        ref: thumbRef,
+        style: {
+            height: "".concat(scrollbarState.thumbHeight, "px"),
+            top: "".concat(scrollbarState.thumbPosition, "px")
+        },
+        onMouseDown: createScrollbarDragHandler(columnRef, setScrollbar, timeoutRef)
+    }))));
+};

package/styled-components/cjs/components/{TimePickerGrid → TimePicker}/ui/TimeColumn/TimeColumn.styles.js

@@ -32,7 +32,7 @@ _export(exports, {
     }
 });
 var _styledcomponents = /*#__PURE__*/ _interop_require_default(require("styled-components"));
-var _TimePickerGridtokens = require("../../TimePickerGrid.tokens");
+var _TimePickertokens = require("../../TimePicker.tokens");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -40,13 +40,13 @@ function _interop_require_default(obj) {
 }
 var StyledRoot = _styledcomponents.default.div.withConfig({
     displayName: "TimeColumn.styles__StyledRoot",
-    componentId: "sc-2a18995b-0"
+    componentId: "sc-a5ee4233-0"
 })([
     "position:relative;width:100%;"
 ]);
 var StyledTimeItem = _styledcomponents.default.div.withConfig({
     displayName: "TimeColumn.styles__StyledTimeItem",
-    componentId: "sc-2a18995b-1"
+    componentId: "sc-a5ee4233-1"
 })([
     "height:var(",
     ");padding:var(",
@@ -60,13 +60,11 @@ var StyledTimeItem = _styledcomponents.default.div.withConfig({
     ");&:hover{background:var(",
     ");}&.",
     "{background:var(",
-    ");}&.",
-    "{cursor:not-allowed;opacity:var(",
     ");}"
-], _TimePickerGridtokens.tokens.itemHeight, _TimePickerGridtokens.tokens.itemPadding, _TimePickerGridtokens.tokens.itemBorderRadius, _TimePickerGridtokens.tokens.itemFontFamily, _TimePickerGridtokens.tokens.itemFontSize, _TimePickerGridtokens.tokens.itemFontStyle, _TimePickerGridtokens.tokens.itemFontWeight, _TimePickerGridtokens.tokens.itemLetterSpacing, _TimePickerGridtokens.tokens.itemLineHeight, _TimePickerGridtokens.tokens.itemBackgroundHover, _TimePickerGridtokens.classes.timeItemActive, _TimePickerGridtokens.tokens.itemBackgroundActive, _TimePickerGridtokens.classes.itemDisabled, _TimePickerGridtokens.tokens.disabledOpacity);
+], _TimePickertokens.tokens.itemHeight, _TimePickertokens.tokens.itemPadding, _TimePickertokens.tokens.itemBorderRadius, _TimePickertokens.tokens.itemFontFamily, _TimePickertokens.tokens.itemFontSize, _TimePickertokens.tokens.itemFontStyle, _TimePickertokens.tokens.itemFontWeight, _TimePickertokens.tokens.itemLetterSpacing, _TimePickertokens.tokens.itemLineHeight, _TimePickertokens.tokens.itemBackgroundHover, _TimePickertokens.classes.timeItemActive, _TimePickertokens.tokens.itemBackgroundActive);
 var StyledTimeColumn = _styledcomponents.default.div.withConfig({
     displayName: "TimeColumn.styles__StyledTimeColumn",
-    componentId: "sc-2a18995b-2"
+    componentId: "sc-a5ee4233-2"
 })([
     "max-height:",
     ";overflow-y:scroll;flex:1;z-index:3;box-sizing:border-box;display:flex;flex-direction:column;gap:var(",
@@ -76,39 +74,39 @@ var StyledTimeColumn = _styledcomponents.default.div.withConfig({
     ");}scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none;width:0;}"
 ], function(param) {
     var height = param.height;
-    return height || "var(".concat(_TimePickerGridtokens.tokens.columnHeight, ")");
-}, _TimePickerGridtokens.tokens.scrollbarWidth, _TimePickerGridtokens.classes.timeColumnActive, _TimePickerGridtokens.tokens.itemBackgroundHover, _TimePickerGridtokens.tokens.itemBorderRadius);
+    return height || "var(".concat(_TimePickertokens.tokens.columnHeight, ")");
+}, _TimePickertokens.tokens.scrollbarWidth, _TimePickertokens.classes.timeColumnActive, _TimePickertokens.tokens.itemBackgroundHover, _TimePickertokens.tokens.itemBorderRadius);
 var CustomScrollbar = _styledcomponents.default.div.withConfig({
     displayName: "TimeColumn.styles__CustomScrollbar",
-    componentId: "sc-2a18995b-3"
+    componentId: "sc-a5ee4233-3"
 })([
     "position:absolute;top:var(",
     ");right:0;bottom:var(",
     ");width:var(",
     ");opacity:0;transition:opacity 0.3s ease;pointer-events:none;z-index:10;overflow:hidden;&.",
     "{opacity:1;pointer-events:auto;}"
-], _TimePickerGridtokens.tokens.scrollbarMargin, _TimePickerGridtokens.tokens.scrollbarMargin, _TimePickerGridtokens.tokens.scrollbarWidth, _TimePickerGridtokens.classes.scrollbarVisible);
+], _TimePickertokens.tokens.scrollbarMargin, _TimePickertokens.tokens.scrollbarMargin, _TimePickertokens.tokens.scrollbarWidth, _TimePickertokens.classes.scrollbarVisible);
 var ScrollbarTrack = _styledcomponents.default.div.withConfig({
     displayName: "TimeColumn.styles__ScrollbarTrack",
-    componentId: "sc-2a18995b-4"
+    componentId: "sc-a5ee4233-4"
 })([
     "position:relative;width:100%;height:100%;background:var(",
     ");border-radius:var(",
     ");"
-], _TimePickerGridtokens.tokens.scrollbarTrackColor, _TimePickerGridtokens.tokens.scrollbarWidth);
+], _TimePickertokens.tokens.scrollbarTrackColor, _TimePickertokens.tokens.scrollbarWidth);
 var ScrollbarThumb = _styledcomponents.default.div.withConfig({
     displayName: "TimeColumn.styles__ScrollbarThumb",
-    componentId: "sc-2a18995b-5"
+    componentId: "sc-a5ee4233-5"
 })([
     "position:absolute;top:0;left:0;width:100%;background:var(",
     ");border-radius:var(",
     ");cursor:pointer;transition:background-color 0.2s ease;&:hover{background:var(",
     ");}&:active{background:var(",
     ");}"
-], _TimePickerGridtokens.tokens.scrollbarColor, _TimePickerGridtokens.tokens.scrollbarWidth, _TimePickerGridtokens.tokens.scrollbarColor, _TimePickerGridtokens.tokens.scrollbarTrackColor);
+], _TimePickertokens.tokens.scrollbarColor, _TimePickertokens.tokens.scrollbarWidth, _TimePickertokens.tokens.scrollbarColor, _TimePickertokens.tokens.scrollbarTrackColor);
 var StyledEmpty = _styledcomponents.default.div.withConfig({
     displayName: "TimeColumn.styles__StyledEmpty",
-    componentId: "sc-2a18995b-6"
+    componentId: "sc-a5ee4233-6"
 })([
     "width:100%;height:0%.125rem;"
 ]);

package/styled-components/cjs/components/TimePicker/utils/index.js

@@ -9,6 +9,9 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    get animateScrollTo () {
+        return animateScrollTo;
+    },
     get delimiter () {
         return delimiter;
     },
@@ -92,7 +95,8 @@ var normalizeTimeSegment = function(type, input) {
         carryover: digits.slice(1)
     };
 };
-var processTimeInput = function(input, format, cursorPosition) {
+var processTimeInput = function(input) {
+    var format = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 'HH:mm:ss', cursorPosition = arguments.length > 2 ? arguments[2] : void 0;
     var digits = input.replace(/\D/g, '');
     var tokens = format.split(delimiter);
     var values = {
@@ -126,3 +130,23 @@ var processTimeInput = function(input, format, cursorPosition) {
         newCursorPosition: newCursorPosition
     };
 };
+var animateScrollTo = function(element, targetScrollTop) {
+    var duration = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : 300;
+    var startScrollTop = element.scrollTop;
+    var distance = targetScrollTop - startScrollTop;
+    var startTime = null;
+    var animate = function(currentTime) {
+        if (!startTime) startTime = currentTime;
+        var timeElapsed = currentTime - startTime;
+        var progress = Math.min(timeElapsed / duration, 1);
+        var easeOut = function(t) {
+            return 1 - Math.pow(1 - t, 3);
+        };
+        var scrollPosition = startScrollTop + distance * easeOut(progress);
+        element.scrollTop = scrollPosition;
+        if (timeElapsed < duration) {
+            requestAnimationFrame(animate);
+        }
+    };
+    requestAnimationFrame(animate);
+};

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: 'default',
+        view: 'divider',
         size: 'xs'
     },
     variations: {
@@ -34,14 +34,12 @@ 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.itemPaddingClear, _Tabs.tabsTokens.itemContentPaddingClear, _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.outlineFocusColor, _Tabs.tabsTokens.itemSelectedDividerHeight, _Tabs.tabsTokens.itemSelectedDividerColor, _Tabs.tabsTokens.itemSelectedDividerColorHover, _Tabs.tabsTokens.itemCursor),
             secondary: (0, _styledcomponents.css)([
                 "",
                 ":var(--text-primary);",
@@ -83,14 +81,12 @@ 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.itemPaddingClear, _Tabs.tabsTokens.itemContentPaddingClear, _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.outlineFocusColor, _Tabs.tabsTokens.itemSelectedDividerHeight, _Tabs.tabsTokens.itemSelectedDividerColor, _Tabs.tabsTokens.itemSelectedDividerColorHover, _Tabs.tabsTokens.itemCursor),
             default: (0, _styledcomponents.css)([
                 "",
                 ":var(--text-primary);",
@@ -122,9 +118,9 @@ var config = {
                 ":0.375rem;",
                 ":auto;",
                 ":2rem;",
-                ":0 0.5rem;",
+                ":0 0.125rem;",
                 ":0 0.375rem;",
-                ":1.75rem;",
+                ":1.5rem;",
                 ":0.25rem;",
                 ":0.125rem;",
                 ":var(--plasma-typo-body-xs-font-family);",
@@ -140,9 +136,9 @@ var config = {
                 ":0.5rem;",
                 ":auto;",
                 ":2.5rem;",
-                ":0 0.625rem;",
+                ":0 0.125rem;",
                 ":0 0.5rem;",
-                ":1.75rem;",
+                ":1.5rem;",
                 ":0.25rem;",
                 ":0.125rem;",
                 ":var(--plasma-typo-body-s-font-family);",
@@ -158,9 +154,9 @@ var config = {
                 ":0.625rem;",
                 ":auto;",
                 ":3rem;",
-                ":0 0.625rem;",
+                ":0 0.125rem;",
                 ":0 0.5rem;",
-                ":1.75rem;",
+                ":1.5rem;",
                 ":0.375rem;",
                 ":0.125rem;",
                 ":var(--plasma-typo-body-m-font-family);",
@@ -176,9 +172,9 @@ var config = {
                 ":0.75rem;",
                 ":auto;",
                 ":3.5rem;",
-                ":0 0.875rem;",
+                ":0 0.125rem;",
                 ":0 0.75rem;",
-                ":1.75rem;",
+                ":1.5rem;",
                 ":0.5rem;",
                 ":0.125rem;",
                 ":var(--plasma-typo-body-l-font-family);",
@@ -194,8 +190,8 @@ var config = {
                 ":0.375rem;",
                 ":auto;",
                 ":3rem;",
-                ":0rem;",
-                ":1.75rem;",
+                ":0 0.125rem;",
+                ":1.5rem;",
                 ":0.625rem;",
                 ":var(--plasma-typo-h5-font-family);",
                 ":var(--plasma-typo-h5-font-size);",
@@ -210,8 +206,8 @@ var config = {
                 ":0.375rem;",
                 ":auto;",
                 ":3.25rem;",
-                ":0rem;",
-                ":2rem;",
+                ":0 0.125rem;",
+                ":1.75rem;",
                 ":0.625rem;",
                 ":var(--plasma-typo-h4-font-family);",
                 ":var(--plasma-typo-h4-font-size);",
@@ -226,8 +222,8 @@ var config = {
                 ":0.5rem;",
                 ":auto;",
                 ":3.875rem;",
-                ":0rem;",
-                ":2.25rem;",
+                ":0 0.125rem;",
+                ":2rem;",
                 ":0.75rem;",
                 ":var(--plasma-typo-h3-font-family);",
                 ":var(--plasma-typo-h3-font-size);",
@@ -242,8 +238,8 @@ var config = {
                 ":0.625rem;",
                 ":auto;",
                 ":4.5rem;",
-                ":0rem;",
-                ":2.5rem;",
+                ":0 0.125rem;",
+                ":2.25rem;",
                 ":0.875rem;",
                 ":var(--plasma-typo-h2-font-family);",
                 ":var(--plasma-typo-h2-font-size);",
@@ -258,8 +254,8 @@ var config = {
                 ":0.75rem;",
                 ":auto;",
                 ":5.75rem;",
-                ":0rem;",
-                ":3.5rem;",
+                ":0 0.125rem;",
+                ":3.25rem;",
                 ":1rem;",
                 ":var(--plasma-typo-h1-font-family);",
                 ":var(--plasma-typo-h1-font-size);",

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

@@ -40,9 +40,8 @@ var config = {
                 ":var(--surface-transparent-secondary);",
                 ":var(--surface-transparent-secondary);",
                 ":var(--surface-transparent-tertiary);",
-                ":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)
+                ":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)
         },
         size: {
             l: (0, _styledcomponents.css)([

package/styled-components/es/components/Tabs/ui/horizontal/HorizontalIconTabItem/HorizontalIconTabItem.styles.js

@@ -4,13 +4,13 @@ import { addFocus } from "../../../../../mixins";
 import { tokens } from "../../../tokens";
 export var StyledContent = styled.div.withConfig({
     displayName: "HorizontalIconTabItem.styles__StyledContent",
-    componentId: "sc-d0381a92-0"
+    componentId: "sc-e37d47fd-0"
 })([
     "display:inline-block;width:fit-content;"
 ]);
 export var ActionContent = styled.div.withConfig({
     displayName: "HorizontalIconTabItem.styles__ActionContent",
-    componentId: "sc-d0381a92-1"
+    componentId: "sc-e37d47fd-1"
 })([
     "display:flex;margin-left:var(",
     ");"
@@ -23,7 +23,7 @@ export var base = css([
     ";"
 ], tokens.itemContentGap, tokens.itemCursorOverNotSelected, tokens.itemCursor, addFocus({
     outlineSize: '0.063rem',
-    outlineOffset: '-0.125rem',
+    outlineOffset: '0.063rem',
     outlineColor: "var(".concat(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.outlineFocusColor, ");\n                }\n            }\n        ")

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

@@ -4,7 +4,7 @@ import { addFocus } from "../../../../../mixins";
 import { classes, tokens } from "../../../tokens";
 export var StyledContent = styled.div.withConfig({
     displayName: "HorizontalTabItem.styles__StyledContent",
-    componentId: "sc-6029f576-0"
+    componentId: "sc-e4f78c87-0"
 })([
     "display:inline-block;width:fit-content;padding:0 var(",
     ",var(",
@@ -12,7 +12,7 @@ export var StyledContent = styled.div.withConfig({
 ], tokens.itemContentPaddingClear, tokens.itemContentPadding);
 export var TabItemValue = styled.span.withConfig({
     displayName: "HorizontalTabItem.styles__TabItemValue",
-    componentId: "sc-6029f576-1"
+    componentId: "sc-e4f78c87-1"
 })([
     "color:var(",
     ");font-family:var(",
@@ -31,19 +31,19 @@ export var TabItemValue = styled.span.withConfig({
 ], tokens.itemValueColor, tokens.valueFontFamily, tokens.fontFamily, tokens.valueFontSize, tokens.fontSize, tokens.valueFontStyle, tokens.fontStyle, tokens.valueFontWeight, tokens.fontWeight, tokens.valueLetterSpacing, tokens.letterSpacing, tokens.valueLineHeight, tokens.lineHeight);
 export var RightContent = styled.div.withConfig({
     displayName: "HorizontalTabItem.styles__RightContent",
-    componentId: "sc-6029f576-2"
+    componentId: "sc-e4f78c87-2"
 })([
     "display:flex;color:inherit;&:hover{color:inherit;}"
 ]);
 export var LeftContent = styled.div.withConfig({
     displayName: "HorizontalTabItem.styles__LeftContent",
-    componentId: "sc-6029f576-3"
+    componentId: "sc-e4f78c87-3"
 })([
     "display:flex;color:inherit;&:hover{color:inherit;}"
 ]);
 export var ActionContent = styled.div.withConfig({
     displayName: "HorizontalTabItem.styles__ActionContent",
-    componentId: "sc-6029f576-4"
+    componentId: "sc-e4f78c87-4"
 })([
     "display:flex;margin-left:var(",
     ");"
@@ -61,7 +61,7 @@ export var base = css([
     "{overflow:hidden;text-overflow:ellipsis;}}"
 ], tokens.itemContentGap, tokens.itemPaddingClear, tokens.itemPadding, tokens.itemCursorOverNotSelected, tokens.itemCursor, addFocus({
     outlineSize: '0.063rem',
-    outlineOffset: '-0.125rem',
+    outlineOffset: '0.063rem',
     outlineColor: "var(".concat(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.outlineFocusColor, ");\n                }\n            }\n        ")

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

@@ -7,21 +7,21 @@ export var base = css([
 ]);
 export var StyledContent = styled.div.withConfig({
     displayName: "HorizontalTabs.styles__StyledContent",
-    componentId: "sc-93ada113-0"
+    componentId: "sc-e818e527-0"
 })([
     "display:inline-flex;flex-direction:row;align-items:center;"
 ]);
 export var StyledContentWrapper = styled.div.withConfig({
     displayName: "HorizontalTabs.styles__StyledContentWrapper",
-    componentId: "sc-93ada113-1"
+    componentId: "sc-e818e527-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;&.",
+    "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;}"
 ], classes.tabsClipScroll, classes.tabsClipShowAll);
 export var StyledArrow = styled.button.withConfig({
     displayName: "HorizontalTabs.styles__StyledArrow",
-    componentId: "sc-93ada113-2"
+    componentId: "sc-e818e527-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/es/components/Tabs/ui/vertical/VerticalIconTabItem/VerticalIconTabItem.styles.js

@@ -4,13 +4,13 @@ import { addFocus } from "../../../../../mixins";
 import { tokens } from "../../../tokens";
 export var StyledContent = styled.div.withConfig({
     displayName: "VerticalIconTabItem.styles__StyledContent",
-    componentId: "sc-4febd5c6-0"
+    componentId: "sc-e7e3f81e-0"
 })([
     "display:inline-block;width:fit-content;"
 ]);
 export var ActionContent = styled.div.withConfig({
     displayName: "VerticalIconTabItem.styles__ActionContent",
-    componentId: "sc-4febd5c6-1"
+    componentId: "sc-e7e3f81e-1"
 })([
     "display:flex;margin-left:var(",
     ");"
@@ -23,7 +23,7 @@ export var base = css([
     ";"
 ], tokens.itemContentGap, tokens.itemCursorOverNotSelected, tokens.itemCursor, addFocus({
     outlineSize: '0.063rem',
-    outlineOffset: '-0.125rem',
+    outlineOffset: '0.063rem',
     outlineColor: "var(".concat(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.outlineFocusColor, ");\n                }\n            }\n        ")

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

@@ -4,7 +4,7 @@ import { addFocus } from "../../../../../mixins";
 import { classes, tokens } from "../../../tokens";
 export var StyledContent = styled.div.withConfig({
     displayName: "VerticalTabItem.styles__StyledContent",
-    componentId: "sc-52a7e18d-0"
+    componentId: "sc-4c636acb-0"
 })([
     "display:inline-block;width:fit-content;padding:0 var(",
     ",var(",
@@ -12,7 +12,7 @@ export var StyledContent = styled.div.withConfig({
 ], tokens.itemContentPaddingClear, tokens.itemContentPadding);
 export var TabItemValue = styled.span.withConfig({
     displayName: "VerticalTabItem.styles__TabItemValue",
-    componentId: "sc-52a7e18d-1"
+    componentId: "sc-4c636acb-1"
 })([
     "white-space:nowrap;color:var(",
     ");font-family:var(",
@@ -31,19 +31,19 @@ export var TabItemValue = styled.span.withConfig({
 ], tokens.itemValueColor, tokens.valueFontFamily, tokens.fontFamily, tokens.valueFontSize, tokens.fontSize, tokens.valueFontStyle, tokens.fontStyle, tokens.valueFontWeight, tokens.fontWeight, tokens.valueLetterSpacing, tokens.letterSpacing, tokens.valueLineHeight, tokens.lineHeight);
 export var RightContent = styled.div.withConfig({
     displayName: "VerticalTabItem.styles__RightContent",
-    componentId: "sc-52a7e18d-2"
+    componentId: "sc-4c636acb-2"
 })([
     "display:flex;color:inherit;&:hover{color:inherit;}"
 ]);
 export var LeftContent = styled.div.withConfig({
     displayName: "VerticalTabItem.styles__LeftContent",
-    componentId: "sc-52a7e18d-3"
+    componentId: "sc-4c636acb-3"
 })([
     "display:flex;color:inherit;&:hover{color:inherit;}"
 ]);
 export var ActionContent = styled.div.withConfig({
     displayName: "VerticalTabItem.styles__ActionContent",
-    componentId: "sc-52a7e18d-4"
+    componentId: "sc-4c636acb-4"
 })([
     "display:flex;margin-left:var(",
     ");"
@@ -60,7 +60,7 @@ export var base = css([
     "{overflow:hidden;text-overflow:ellipsis;}}"
 ], tokens.itemContentGap, tokens.itemPaddingOrientationVertical, tokens.itemCursorOverNotSelected, tokens.itemCursor, addFocus({
     outlineSize: '0.063rem',
-    outlineOffset: '-0.125rem',
+    outlineOffset: '0.063rem',
     outlineColor: "var(".concat(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.outlineFocusColor, ");\n                }\n            }\n        ")