@salutejs/plasma-new-hope 0.344.0-canary.2402.20441017793.0 → 0.344.0-canary.2403.20455152253.0

package/dist/styled-components/cjs/components/TextField/TextField.styles.js

@@ -94,13 +94,13 @@ var mergedConfig = (0, _engines.mergeConfig)(_Tooltip.tooltipConfig);
 var Tooltip = (0, _engines.component)(mergedConfig);
 var InputWrapper = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__InputWrapper",
-    componentId: "sc-708c1a6a-0"
+    componentId: "sc-b214ed5d-0"
 })([
     "position:relative;display:flex;align-items:center;box-sizing:border-box;"
 ]);
 var InputLabelWrapper = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__InputLabelWrapper",
-    componentId: "sc-708c1a6a-1"
+    componentId: "sc-b214ed5d-1"
 })([
     "flex:1;overflow:scroll;position:relative;width:100%;display:inline-flex;align-items:center;::-webkit-scrollbar{display:none;}scrollbar-width:none;overscroll-behavior:contain;&.",
     "{height:var(",
@@ -109,7 +109,7 @@ var InputLabelWrapper = _styledcomponents.default.div.withConfig({
 ], String(_TextFieldtokens.classes.hasChips), _TextFieldtokens.tokens.chipHeight, _TextFieldtokens.tokens.chipBorderRadius);
 var StyledChips = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__StyledChips",
-    componentId: "sc-708c1a6a-2"
+    componentId: "sc-b214ed5d-2"
 })([
     "display:flex;gap:var(",
     ");margin-right:var(",
@@ -118,7 +118,7 @@ var StyledChips = _styledcomponents.default.div.withConfig({
 ], _TextFieldtokens.tokens.chipGap, _TextFieldtokens.tokens.chipMarginRight, _TextFieldtokens.tokens.chipGap);
 var Input = _styledcomponents.default.input.withConfig({
     displayName: "TextField.styles__Input",
-    componentId: "sc-708c1a6a-3"
+    componentId: "sc-b214ed5d-3"
 })([
     "box-sizing:border-box;appearance:none;border:0;padding:0;background-color:transparent;outline:none;width:100%;z-index:1;&.",
     "{",
@@ -126,7 +126,7 @@ var Input = _styledcomponents.default.input.withConfig({
 ], _TextFieldtokens.classes.inputTextEllipsis, (0, _mixins.applyEllipsis)());
 var InputContainer = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__InputContainer",
-    componentId: "sc-708c1a6a-4"
+    componentId: "sc-b214ed5d-4"
 })([
     "position:relative;display:flex;flex:1;min-width:",
     ";",
@@ -141,7 +141,7 @@ var InputContainer = _styledcomponents.default.div.withConfig({
 });
 var InputPlaceholder = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__InputPlaceholder",
-    componentId: "sc-708c1a6a-5"
+    componentId: "sc-b214ed5d-5"
 })([
     "display:flex;position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;white-space:nowrap;pointer-events:none;user-select:none;font:inherit;letter-spacing:inherit;line-height:inherit;color:var(",
     ");padding:",
@@ -152,7 +152,7 @@ var InputPlaceholder = _styledcomponents.default.div.withConfig({
 });
 var InputPlaceholderValue = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__InputPlaceholderValue",
-    componentId: "sc-708c1a6a-6"
+    componentId: "sc-b214ed5d-6"
 })([
     "&.",
     "{",
@@ -160,7 +160,7 @@ var InputPlaceholderValue = _styledcomponents.default.div.withConfig({
 ], _TextFieldtokens.classes.inputTextEllipsis, (0, _mixins.applyEllipsis)());
 var OuterLabelWrapper = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__OuterLabelWrapper",
-    componentId: "sc-708c1a6a-7"
+    componentId: "sc-b214ed5d-7"
 })([
     "display:flex;align-items:center;white-space:",
     ";margin-bottom:",
@@ -174,25 +174,25 @@ var OuterLabelWrapper = _styledcomponents.default.div.withConfig({
 });
 var TitleCaption = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__TitleCaption",
-    componentId: "sc-708c1a6a-8"
+    componentId: "sc-b214ed5d-8"
 })([
     "display:inline-block;margin-left:auto;"
 ]);
 var StyledIndicatorWrapper = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__StyledIndicatorWrapper",
-    componentId: "sc-708c1a6a-9"
+    componentId: "sc-b214ed5d-9"
 })([
     "position:relative;display:inline-flex;align-items:center;"
 ]);
 var Label = _styledcomponents.default.label.withConfig({
     displayName: "TextField.styles__Label",
-    componentId: "sc-708c1a6a-10"
+    componentId: "sc-b214ed5d-10"
 })([
     "display:inline-flex;"
 ]);
 var StyledContentLeft = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__StyledContentLeft",
-    componentId: "sc-708c1a6a-11"
+    componentId: "sc-b214ed5d-11"
 })([
     "margin:var(",
     ");color:var(",
@@ -204,13 +204,13 @@ var StyledContentLeft = _styledcomponents.default.div.withConfig({
 ], _TextFieldtokens.tokens.leftContentMargin, _TextFieldtokens.tokens.contentSlotColor, _TextFieldtokens.tokens.contentSlotColorHover, _TextFieldtokens.tokens.contentSlotColor, _TextFieldtokens.tokens.contentSlotColorActive, _TextFieldtokens.tokens.contentSlotColor);
 var StyledContentRightWrapper = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__StyledContentRightWrapper",
-    componentId: "sc-708c1a6a-12"
+    componentId: "sc-b214ed5d-12"
 })([
     "display:flex;align-items:center;"
 ]);
 var StyledContentRight = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__StyledContentRight",
-    componentId: "sc-708c1a6a-13"
+    componentId: "sc-b214ed5d-13"
 })([
     "line-height:0;margin:var(",
     ");color:var(",
@@ -223,13 +223,16 @@ var StyledContentRight = _styledcomponents.default.div.withConfig({
 ], _TextFieldtokens.tokens.rightContentMargin, _TextFieldtokens.tokens.contentSlotRightColor, _TextFieldtokens.tokens.contentSlotColor, _TextFieldtokens.tokens.contentSlotRightColorHover, _TextFieldtokens.tokens.contentSlotColorHover, _TextFieldtokens.tokens.contentSlotRightColorActive, _TextFieldtokens.tokens.contentSlotColorActive);
 var LeftHelper = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__LeftHelper",
-    componentId: "sc-708c1a6a-14"
+    componentId: "sc-b214ed5d-14"
 })([
-    ""
-]);
+    "color:var(",
+    ");&.",
+    "{color:var(",
+    ");}"
+], _TextFieldtokens.tokens.leftHelperColor, _TextFieldtokens.classes.hasFocus, _TextFieldtokens.tokens.leftHelperColorFocus);
 var StyledTextBefore = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__StyledTextBefore",
-    componentId: "sc-708c1a6a-15"
+    componentId: "sc-b214ed5d-15"
 })([
     "visibility:",
     ";"
@@ -239,20 +242,20 @@ var StyledTextBefore = _styledcomponents.default.div.withConfig({
 });
 var StyledTextAfter = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__StyledTextAfter",
-    componentId: "sc-708c1a6a-16"
+    componentId: "sc-b214ed5d-16"
 })([
     ""
 ]);
 var StyledOptionalText = _styledcomponents.default.span.withConfig({
     displayName: "TextField.styles__StyledOptionalText",
-    componentId: "sc-708c1a6a-17"
+    componentId: "sc-b214ed5d-17"
 })([
     "color:var(",
     ");"
 ], _TextFieldtokens.tokens.optionalColor);
 var StyledHintWrapper = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__StyledHintWrapper",
-    componentId: "sc-708c1a6a-18"
+    componentId: "sc-b214ed5d-18"
 })([
     "display:inline-block;line-height:0;&.",
     "{position:absolute;margin:0;inset:var(",
@@ -260,14 +263,14 @@ var StyledHintWrapper = _styledcomponents.default.div.withConfig({
 ], _TextFieldtokens.classes.innerLabelPlacement, _TextFieldtokens.tokens.hintInnerLabelPlacementOffset);
 var HintTargetWrapper = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__HintTargetWrapper",
-    componentId: "sc-708c1a6a-19"
+    componentId: "sc-b214ed5d-19"
 })([
     "color:var(",
     ");display:flex;justify-content:center;align-items:center;"
 ], _TextFieldtokens.tokens.hintIconColor);
 var Hint = (0, _styledcomponents.default)(Tooltip).withConfig({
     displayName: "TextField.styles__Hint",
-    componentId: "sc-708c1a6a-20"
+    componentId: "sc-b214ed5d-20"
 })([
     "",
     " .",
@@ -275,13 +278,13 @@ var Hint = (0, _styledcomponents.default)(Tooltip).withConfig({
 ], HintTargetWrapper, _Popover.popoverClasses.root);
 var HintIconWrapper = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__HintIconWrapper",
-    componentId: "sc-708c1a6a-21"
+    componentId: "sc-b214ed5d-21"
 })([
     "display:flex;"
 ]);
 var StyledIndicator = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__StyledIndicator",
-    componentId: "sc-708c1a6a-22"
+    componentId: "sc-b214ed5d-22"
 })([
     "position:absolute;border-radius:50%;background-color:var(",
     ");&.",

package/dist/styled-components/cjs/components/TextField/TextField.tokens.js

@@ -21,6 +21,7 @@ var classes = {
     hasChips: 'has-chips',
     chipsWrapper: 'chips-wrapper',
     hasValue: 'has-value',
+    hasFocus: 'has-focus',
     keepPlaceholder: 'keep-placeholder',
     hasEmptyContentLeft: 'has-empty-content-left',
     hasEmptyContentRight: 'has-empty-content-right',
@@ -40,6 +41,7 @@ var classes = {
 };
 var tokens = {
     color: '--plasma-textfield-color',
+    colorFocus: '--plasma-textfield-color-focus',
     clearColor: '--plasma-textfield-clear-color',
     boxShadow: '--plasma-textfield-box-shadow',
     backgroundColor: '--plasma-textfield-bg-color',
@@ -51,6 +53,7 @@ var tokens = {
     dividerColor: '--plasma-textfield-divider-color',
     dividerColorHover: '--plasma-textfield-divider-color-hover',
     dividerColorFocus: '--plasma-textfield-divider-color-focus',
+    dividerWidth: '--plasma-textfield-divider-width',
     /** Цвета для read-only состояния */ colorReadOnly: '--plasma-textfield-color-readonly',
     backgroundColorReadOnly: '--plasma-textfield-bg-color-readonly',
     borderColorReadOnly: '--plasma-textfield-border-color-readonly',
@@ -79,6 +82,7 @@ var tokens = {
     /* Tokens for content slot */ contentSlotColor: '--plasma-textfield-content-slot-color',
     contentSlotColorHover: '--plasma-textfield-content-slot-color-hover',
     contentSlotColorActive: '--plasma-textfield-content-slot-color-active',
+    contentSlotColorFocus: '--plasma-textfield-content-slot-color-focus',
     contentSlotRightColor: '--plasma-textfield-content-right-slot-color',
     contentSlotRightColorHover: '--plasma-textfield-content-right-slot-color-hover',
     contentSlotRightColorActive: '--plasma-textfield-content-right-slot-color-active',
@@ -113,6 +117,7 @@ var tokens = {
     titleCaptionLetterSpacing: '--plasma-textfield__title-caption-letter-spacing',
     titleCaptionLineHeight: '--plasma-textfield__title-caption-line-height',
     leftHelperColor: '--plasma-textfield__left-helper-color',
+    leftHelperColorFocus: '--plasma-textfield__left-helper-color-focus',
     leftHelperColorReadOnly: '--plasma-textfield__left-helper-color-readonly',
     leftHelperOffset: '--plasma-textfield__left-helper-offset',
     leftHelperFontFamily: '--plasma-textfield__left-helper-font-family',

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

@@ -13,8 +13,8 @@ var _TextFieldtokens = require("../../TextField.tokens");
 var _TextFieldstyles = require("../../TextField.styles");
 var base = (0, _styledcomponents.css)([
     "&[readonly]{",
-    "{position:relative;z-index:0;color:var(",
-    ");background:transparent;box-shadow:none;:before{position:absolute;content:'';top:0;left:0;right:0;bottom:0;border-radius:var(",
+    "{position:relative;color:var(",
+    ");background:transparent;:before{position:absolute;content:'';top:0;left:0;right:0;bottom:0;border-radius:var(",
     ");background-color:var(",
     ");opacity:var(",
     ");box-shadow:inset 0 0 0 var(",

package/dist/styled-components/cjs/components/TextField/variations/_view/base.js

@@ -35,10 +35,12 @@ var base = (0, _styledcomponents.css)([
     ",var(",
     ") );",
     "{color:var(",
-    ");}}",
+    ");}",
     "{color:var(",
     ");}",
     "{color:var(",
+    ");}}",
+    "{color:var(",
     ");}",
     "{color:var(",
     ");}",
@@ -46,7 +48,8 @@ var base = (0, _styledcomponents.css)([
     ");}&.",
     "{",
     "{--plasma_private-textfield-divider-color:var(",
-    ");&:before{content:'';position:absolute;height:0.063rem;width:100%;bottom:0;left:0;background-color:var(--plasma_private-textfield-divider-color);transition:background-color 0.1s ease-in;}}&:not([readonly]) ",
+    ");--plasma_private-textfield-divider-width:var(",
+    ");&:before{content:'';position:absolute;height:var(--plasma_private-textfield-divider-width,0.063rem);width:100%;bottom:0;left:0;background-color:var(--plasma_private-textfield-divider-color);transition:background-color 0.1s ease-in;}}&:not([readonly]) ",
     ":hover{--plasma_private-textfield-divider-color:var( ",
     ",var(",
     ") );}&:not([readonly]) ",
@@ -55,4 +58,4 @@ var base = (0, _styledcomponents.css)([
     ") );",
     "{color:var(",
     ");}}}"
-], _TextFieldstyles.InputWrapper, String(_TextFieldtokens.tokens.borderColor), String(_TextFieldtokens.tokens.backgroundColor), _TextFieldtokens.tokens.color, _TextFieldtokens.tokens.borderWidth, _TextFieldtokens.tokens.boxShadow, _TextFieldtokens.tokens.caretColor, _TextFieldstyles.InputWrapper, _TextFieldtokens.tokens.borderColorHover, String(_TextFieldtokens.tokens.borderColor), _TextFieldtokens.tokens.backgroundColorHover, String(_TextFieldtokens.tokens.backgroundColor), _TextFieldstyles.Input, _TextFieldtokens.tokens.color, _TextFieldstyles.InputPlaceholder, _TextFieldtokens.tokens.placeholderColor, _TextFieldstyles.InputWrapper, _TextFieldtokens.tokens.borderColorFocus, String(_TextFieldtokens.tokens.borderColor), _TextFieldtokens.tokens.backgroundColorFocus, String(_TextFieldtokens.tokens.backgroundColor), _TextFieldstyles.InputPlaceholder, _TextFieldtokens.tokens.placeholderColorFocus, _TextFieldstyles.TitleCaption, _TextFieldtokens.tokens.titleCaptionColor, _TextFieldstyles.LeftHelper, _TextFieldtokens.tokens.leftHelperColor, _TextFieldstyles.StyledTextBefore, _TextFieldtokens.tokens.textBeforeColor, _TextFieldstyles.StyledTextAfter, _TextFieldtokens.tokens.textAfterColor, _TextFieldtokens.classes.hasDivider, _TextFieldstyles.InputWrapper, String(_TextFieldtokens.tokens.dividerColor), _TextFieldstyles.InputWrapper, _TextFieldtokens.tokens.dividerColorHover, String(_TextFieldtokens.tokens.dividerColor), _TextFieldstyles.InputWrapper, _TextFieldtokens.tokens.dividerColorFocus, String(_TextFieldtokens.tokens.dividerColor), _TextFieldstyles.InputPlaceholder, _TextFieldtokens.tokens.clearPlaceholderColorFocus);
+], _TextFieldstyles.InputWrapper, String(_TextFieldtokens.tokens.borderColor), String(_TextFieldtokens.tokens.backgroundColor), _TextFieldtokens.tokens.color, _TextFieldtokens.tokens.borderWidth, _TextFieldtokens.tokens.boxShadow, _TextFieldtokens.tokens.caretColor, _TextFieldstyles.InputWrapper, _TextFieldtokens.tokens.borderColorHover, String(_TextFieldtokens.tokens.borderColor), _TextFieldtokens.tokens.backgroundColorHover, String(_TextFieldtokens.tokens.backgroundColor), _TextFieldstyles.Input, _TextFieldtokens.tokens.color, _TextFieldstyles.InputPlaceholder, _TextFieldtokens.tokens.placeholderColor, _TextFieldstyles.InputWrapper, _TextFieldtokens.tokens.borderColorFocus, String(_TextFieldtokens.tokens.borderColor), _TextFieldtokens.tokens.backgroundColorFocus, String(_TextFieldtokens.tokens.backgroundColor), _TextFieldstyles.Input, _TextFieldtokens.tokens.colorFocus, _TextFieldstyles.InputPlaceholder, _TextFieldtokens.tokens.placeholderColorFocus, _TextFieldstyles.StyledContentLeft, _TextFieldtokens.tokens.contentSlotColorFocus, _TextFieldstyles.TitleCaption, _TextFieldtokens.tokens.titleCaptionColor, _TextFieldstyles.StyledTextBefore, _TextFieldtokens.tokens.textBeforeColor, _TextFieldstyles.StyledTextAfter, _TextFieldtokens.tokens.textAfterColor, _TextFieldtokens.classes.hasDivider, _TextFieldstyles.InputWrapper, String(_TextFieldtokens.tokens.dividerColor), String(_TextFieldtokens.tokens.dividerWidth), _TextFieldstyles.InputWrapper, _TextFieldtokens.tokens.dividerColorHover, String(_TextFieldtokens.tokens.dividerColor), _TextFieldstyles.InputWrapper, _TextFieldtokens.tokens.dividerColorFocus, String(_TextFieldtokens.tokens.dividerColor), _TextFieldstyles.InputPlaceholder, _TextFieldtokens.tokens.clearPlaceholderColorFocus);

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

@@ -80,13 +80,13 @@ var mergedTimePickerGrid = (0, _engines.mergeConfig)(_TimePickerGrid.timePickerG
 var TimePickerGrid = (0, _engines.component)(mergedTimePickerGrid);
 var StyledPopover = (0, _styledcomponents.default)(Popover).withConfig({
     displayName: "TimePicker.styles__StyledPopover",
-    componentId: "sc-d43646a1-0"
+    componentId: "sc-d0cc628-0"
 })([
     ""
 ]);
 var StyledTimePickerGrid = (0, _styledcomponents.default)(TimePickerGrid).withConfig({
     displayName: "TimePicker.styles__StyledTimePickerGrid",
-    componentId: "sc-d43646a1-1"
+    componentId: "sc-d0cc628-1"
 })([
     "",
     ":var(",
@@ -130,11 +130,13 @@ var StyledTimePickerGrid = (0, _styledcomponents.default)(TimePickerGrid).withCo
     ":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);
+], _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.itemFocusColor, _TimePickertokens.tokens.itemFocusColor, _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-d43646a1-2"
+    componentId: "sc-d0cc628-2"
 })([
     "width:100%;",
     ":var(",
@@ -300,7 +302,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, _TimePickertokens.classes.timePickerFixed, _TimePickertokens.tokens.timePickerWidth);
 var StyledTimePicker = _styledcomponents.default.div.withConfig({
     displayName: "TimePicker.styles__StyledTimePicker",
-    componentId: "sc-d43646a1-3"
+    componentId: "sc-d0cc628-3"
 })([
     "background:var(",
     ");border-radius:var(",

package/dist/styled-components/cjs/components/TimePicker/TimePicker.tokens.js

@@ -130,6 +130,7 @@ var tokens = {
     itemPadding: '--plasma-time-picker-item-padding',
     itemBackgroundHover: '--plasma-time-picker-item-hover-background',
     itemBackgroundActive: '--plasma-time-picker-item-active-background',
+    itemFocusColor: '--plasma-time-picker-item-focus-color',
     itemFontFamily: '--plasma-time-picker-item-font-family',
     itemFontStyle: '--plasma-time-picker-item-font-style',
     itemFontSize: '--plasma-time-picker-item-font-size',

package/dist/styled-components/cjs/components/TimePickerGrid/TimePickerGrid.tokens.js

@@ -37,6 +37,7 @@ var tokens = {
     itemPadding: '--plasma-time-picker-grid-item-padding',
     itemBackgroundHover: '--plasma-time-picker-grid-item-hover-background',
     itemBackgroundActive: '--plasma-time-picker-grid-item-active-background',
+    itemFocusColor: '--plasma-time-picker-grid-item-focus-color',
     itemFontFamily: '--plasma-time-picker-grid-item-font-family',
     itemFontStyle: '--plasma-time-picker-grid-item-font-style',
     itemFontSize: '--plasma-time-picker-grid-item-font-size',

package/dist/styled-components/cjs/components/TimePickerGrid/ui/TimeColumn/TimeColumn.styles.js

@@ -32,6 +32,7 @@ _export(exports, {
     }
 });
 var _styledcomponents = /*#__PURE__*/ _interop_require_default(require("styled-components"));
+var _mixins = require("../../../../mixins");
 var _TimePickerGridtokens = require("../../TimePickerGrid.tokens");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
@@ -40,18 +41,18 @@ function _interop_require_default(obj) {
 }
 var StyledRoot = _styledcomponents.default.div.withConfig({
     displayName: "TimeColumn.styles__StyledRoot",
-    componentId: "sc-2a18995b-0"
+    componentId: "sc-dc81fb27-0"
 })([
     "position:relative;width:100%;"
 ]);
 var StyledTimeItem = _styledcomponents.default.div.withConfig({
     displayName: "TimeColumn.styles__StyledTimeItem",
-    componentId: "sc-2a18995b-1"
+    componentId: "sc-dc81fb27-1"
 })([
     "height:var(",
     ");padding:var(",
     ");box-sizing:border-box;display:flex;justify-content:center;align-items:center;transition:0.05s;border-radius:var(",
-    ");cursor:pointer;flex-shrink:0;overflow:auto;font-family:var(",
+    ");cursor:pointer;flex-shrink:0;outline:none;font-family:var(",
     ");font-size:var(",
     ");font-style:var(",
     ");font-weight:var(",
@@ -62,14 +63,20 @@ var StyledTimeItem = _styledcomponents.default.div.withConfig({
     "{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);
+    ");}",
+    ""
+], _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, (0, _mixins.addFocus)({
+    outlineOffset: '0.0625rem',
+    outlineSize: '0.0625rem',
+    outlineRadius: "var(".concat(_TimePickerGridtokens.tokens.itemBorderRadius, ")"),
+    outlineColor: "var(".concat(_TimePickerGridtokens.tokens.itemFocusColor, ")")
+}));
 var StyledTimeColumn = _styledcomponents.default.div.withConfig({
     displayName: "TimeColumn.styles__StyledTimeColumn",
-    componentId: "sc-2a18995b-2"
+    componentId: "sc-dc81fb27-2"
 })([
     "max-height:",
-    ";overflow-y:scroll;flex:1;z-index:3;box-sizing:border-box;display:flex;flex-direction:column;gap:var(",
+    ";overflow-y:scroll;overflow-x:visible;flex:1;z-index:3;box-sizing:border-box;display:flex;flex-direction:column;gap:var(",
     ");width:100%;&.",
     "{border:0.125rem solid var(",
     ");border-radius:var(",
@@ -80,7 +87,7 @@ var StyledTimeColumn = _styledcomponents.default.div.withConfig({
 }, _TimePickerGridtokens.tokens.scrollbarWidth, _TimePickerGridtokens.classes.timeColumnActive, _TimePickerGridtokens.tokens.itemBackgroundHover, _TimePickerGridtokens.tokens.itemBorderRadius);
 var CustomScrollbar = _styledcomponents.default.div.withConfig({
     displayName: "TimeColumn.styles__CustomScrollbar",
-    componentId: "sc-2a18995b-3"
+    componentId: "sc-dc81fb27-3"
 })([
     "position:absolute;top:var(",
     ");right:0;bottom:var(",
@@ -90,7 +97,7 @@ var CustomScrollbar = _styledcomponents.default.div.withConfig({
 ], _TimePickerGridtokens.tokens.scrollbarMargin, _TimePickerGridtokens.tokens.scrollbarMargin, _TimePickerGridtokens.tokens.scrollbarWidth, _TimePickerGridtokens.classes.scrollbarVisible);
 var ScrollbarTrack = _styledcomponents.default.div.withConfig({
     displayName: "TimeColumn.styles__ScrollbarTrack",
-    componentId: "sc-2a18995b-4"
+    componentId: "sc-dc81fb27-4"
 })([
     "position:relative;width:100%;height:100%;background:var(",
     ");border-radius:var(",
@@ -98,7 +105,7 @@ var ScrollbarTrack = _styledcomponents.default.div.withConfig({
 ], _TimePickerGridtokens.tokens.scrollbarTrackColor, _TimePickerGridtokens.tokens.scrollbarWidth);
 var ScrollbarThumb = _styledcomponents.default.div.withConfig({
     displayName: "TimeColumn.styles__ScrollbarThumb",
-    componentId: "sc-2a18995b-5"
+    componentId: "sc-dc81fb27-5"
 })([
     "position:absolute;top:0;left:0;width:100%;background:var(",
     ");border-radius:var(",
@@ -108,7 +115,7 @@ var ScrollbarThumb = _styledcomponents.default.div.withConfig({
 ], _TimePickerGridtokens.tokens.scrollbarColor, _TimePickerGridtokens.tokens.scrollbarWidth, _TimePickerGridtokens.tokens.scrollbarColor, _TimePickerGridtokens.tokens.scrollbarTrackColor);
 var StyledEmpty = _styledcomponents.default.div.withConfig({
     displayName: "TimeColumn.styles__StyledEmpty",
-    componentId: "sc-2a18995b-6"
+    componentId: "sc-dc81fb27-6"
 })([
     "width:100%;height:0%.125rem;"
 ]);

package/dist/styled-components/cjs/examples/components/Accordion/Accordion.config.js

@@ -207,6 +207,25 @@ var config = {
                 ":var(--plasma-typo-body-m-font-weight);",
                 ":var(--plasma-typo-body-m-letter-spacing);",
                 ":var(--plasma-typo-body-m-line-height);"
+            ], _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemPaddingHorizontal, _Accordion.accordionTokens.accordionItemGap, _Accordion.accordionTokens.accordionItemBorderRadius, _Accordion.accordionTokens.accordionItemTitleFontFamily, _Accordion.accordionTokens.accordionItemTitleFontSize, _Accordion.accordionTokens.accordionItemTitleFontStyle, _Accordion.accordionTokens.accordionItemTitleFontWeight, _Accordion.accordionTokens.accordionItemTitleLetterSpacing, _Accordion.accordionTokens.accordionItemTitleLineHeight, _Accordion.accordionTokens.accordionItemTextFontFamily, _Accordion.accordionTokens.accordionItemTextFontSize, _Accordion.accordionTokens.accordionItemTextFontStyle, _Accordion.accordionTokens.accordionItemTextFontWeight, _Accordion.accordionTokens.accordionItemTextLetterSpacing, _Accordion.accordionTokens.accordionItemTextLineHeight),
+            h6: (0, _styledcomponents.css)([
+                "",
+                ":0.5rem;",
+                ":0.75rem;",
+                ":0.25rem;",
+                ":0.5rem;",
+                ":var(--plasma-typo-h6-font-family);",
+                ":var(--plasma-typo-h6-font-size);",
+                ":var(--plasma-typo-h6-font-style);",
+                ":var(--plasma-typo-h6-bold-font-weight);",
+                ":var(--plasma-typo-h6-letter-spacing);",
+                ":var(--plasma-typo-h6-line-height);",
+                ":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);"
             ], _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemPaddingHorizontal, _Accordion.accordionTokens.accordionItemGap, _Accordion.accordionTokens.accordionItemBorderRadius, _Accordion.accordionTokens.accordionItemTitleFontFamily, _Accordion.accordionTokens.accordionItemTitleFontSize, _Accordion.accordionTokens.accordionItemTitleFontStyle, _Accordion.accordionTokens.accordionItemTitleFontWeight, _Accordion.accordionTokens.accordionItemTitleLetterSpacing, _Accordion.accordionTokens.accordionItemTitleLineHeight, _Accordion.accordionTokens.accordionItemTextFontFamily, _Accordion.accordionTokens.accordionItemTextFontSize, _Accordion.accordionTokens.accordionItemTextFontStyle, _Accordion.accordionTokens.accordionItemTextFontWeight, _Accordion.accordionTokens.accordionItemTextLetterSpacing, _Accordion.accordionTokens.accordionItemTextLineHeight)
         }
     }

package/dist/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/dist/styled-components/cjs/examples/components/Rating/Rating.config.js

@@ -274,6 +274,33 @@ var config = {
                 ":1.25rem;",
                 ":1rem;"
             ], _Rating.ratingTokens.gap, _Rating.ratingTokens.fontFamily, _Rating.ratingTokens.fontSize, _Rating.ratingTokens.fontStyle, _Rating.ratingTokens.fontWeight, _Rating.ratingTokens.letterSpacing, _Rating.ratingTokens.lineHeight, _Rating.ratingTokens.helperTextFontFamily, _Rating.ratingTokens.helperTextFontSize, _Rating.ratingTokens.helperTextFontStyle, _Rating.ratingTokens.helperTextFontWeight, _Rating.ratingTokens.helperTextLetterSpacing, _Rating.ratingTokens.helperTextLineHeight, _Rating.ratingTokens.contentGap, _Rating.ratingTokens.singleIconContentGap, _Rating.ratingTokens.starsWrapperGap, _Rating.ratingTokens.iconMarginBottom, _Rating.ratingTokens.iconSizeLarge, _Rating.ratingTokens.iconSizeMedium, _Rating.ratingTokens.iconSizeSmall, _Rating.ratingTokens.singleIconMarginBottom, _Rating.ratingTokens.singleIconSizeLarge, _Rating.ratingTokens.singleIconSizeMedium, _Rating.ratingTokens.singleIconSizeSmall),
+            h6: (0, _styledcomponents.css)([
+                "",
+                ":0.25rem;",
+                ":var(--plasma-typo-h6-font-family);",
+                ":var(--plasma-typo-h6-font-size);",
+                ":var(--plasma-typo-h6-font-style);",
+                ":var(--plasma-typo-h6-bold-font-weight);",
+                ":var(--plasma-typo-h6-letter-spacing);",
+                ":var(--plasma-typo-h6-line-height);",
+                ":var(--plasma-typo-body-xs-font-family);",
+                ":var(--plasma-typo-body-xs-font-size);",
+                ":var(--plasma-typo-body-xs-font-style);",
+                ":var(--plasma-typo-body-xs-font-weight);",
+                ":var(--plasma-typo-body-xs-letter-spacing);",
+                ":var(--plasma-typo-body-xs-line-height);",
+                ":0.625rem;",
+                ":0.25rem;",
+                ":0.125rem;",
+                ":0.125rem;",
+                ":1.25rem;",
+                ":1.25rem;",
+                ":1rem;",
+                ":0.125rem;",
+                ":1.25rem;",
+                ":1.25rem;",
+                ":1rem;"
+            ], _Rating.ratingTokens.gap, _Rating.ratingTokens.fontFamily, _Rating.ratingTokens.fontSize, _Rating.ratingTokens.fontStyle, _Rating.ratingTokens.fontWeight, _Rating.ratingTokens.letterSpacing, _Rating.ratingTokens.lineHeight, _Rating.ratingTokens.helperTextFontFamily, _Rating.ratingTokens.helperTextFontSize, _Rating.ratingTokens.helperTextFontStyle, _Rating.ratingTokens.helperTextFontWeight, _Rating.ratingTokens.helperTextLetterSpacing, _Rating.ratingTokens.helperTextLineHeight, _Rating.ratingTokens.contentGap, _Rating.ratingTokens.singleIconContentGap, _Rating.ratingTokens.starsWrapperGap, _Rating.ratingTokens.iconMarginBottom, _Rating.ratingTokens.iconSizeLarge, _Rating.ratingTokens.iconSizeMedium, _Rating.ratingTokens.iconSizeSmall, _Rating.ratingTokens.singleIconMarginBottom, _Rating.ratingTokens.singleIconSizeLarge, _Rating.ratingTokens.singleIconSizeMedium, _Rating.ratingTokens.singleIconSizeSmall),
             displayL: (0, _styledcomponents.css)([
                 "",
                 ":0.375rem;",

package/dist/styled-components/cjs/examples/components/Skeleton/LineSkeleton.config.js

@@ -92,6 +92,11 @@ var config = {
                 ":var(--plasma-typo-h5-line-height);",
                 ":var(--plasma-typo-h5-font-size);"
             ], _Skeleton.skeletonTokens.lineHeight, _Skeleton.skeletonTokens.visibleLineHeight),
+            h6: (0, _styledcomponents.css)([
+                "",
+                ":var(--plasma-typo-h6-line-height);",
+                ":var(--plasma-typo-h6-font-size);"
+            ], _Skeleton.skeletonTokens.lineHeight, _Skeleton.skeletonTokens.visibleLineHeight),
             textL: (0, _styledcomponents.css)([
                 "",
                 ":var(--plasma-typo-text-l-line-height);",

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

@@ -115,6 +115,13 @@ var config = {
                 ":0.5rem;",
                 ":0.125rem;"
             ], _Tabs.tabsTokens.itemBorderRadius, _Tabs.tabsTokens.itemPadding, _Tabs.tabsTokens.itemContentGap, _Tabs.tabsTokens.actionContentMarginLeft),
+            h6: (0, _styledcomponents.css)([
+                "",
+                ":0.375rem;",
+                ":0rem;",
+                ":0.625rem;",
+                ":-0.125rem;"
+            ], _Tabs.tabsTokens.itemBorderRadius, _Tabs.tabsTokens.itemPadding, _Tabs.tabsTokens.itemContentGap, _Tabs.tabsTokens.actionContentMarginLeft),
             h5: (0, _styledcomponents.css)([
                 "",
                 ":0.375rem;",

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

@@ -185,6 +185,22 @@ var config = {
                 ":var(--plasma-typo-body-l-line-height);",
                 ":0.125rem;"
             ], _Tabs.tabsTokens.itemBorderRadius, _Tabs.tabsTokens.itemWidth, _Tabs.tabsTokens.itemHeight, _Tabs.tabsTokens.itemPadding, _Tabs.tabsTokens.itemPaddingPilled, _Tabs.tabsTokens.itemMarginLeft, _Tabs.tabsTokens.itemContentGap, _Tabs.tabsTokens.itemContentPadding, _Tabs.tabsTokens.fontFamily, _Tabs.tabsTokens.fontSize, _Tabs.tabsTokens.fontStyle, _Tabs.tabsTokens.fontWeight, _Tabs.tabsTokens.letterSpacing, _Tabs.tabsTokens.lineHeight, _Tabs.tabsTokens.actionContentMarginLeft),
+            h6: (0, _styledcomponents.css)([
+                "",
+                ":0.375rem;",
+                ":auto;",
+                ":3rem;",
+                ":0 0.125rem;",
+                ":1.5rem;",
+                ":0.625rem;",
+                ":var(--plasma-typo-h6-font-family);",
+                ":var(--plasma-typo-h6-font-size);",
+                ":var(--plasma-typo-h6-font-style);",
+                ":var(--plasma-typo-h6-font-weight);",
+                ":var(--plasma-typo-h6-letter-spacing);",
+                ":var(--plasma-typo-h6-line-height);",
+                ":-0.125rem;"
+            ], _Tabs.tabsTokens.itemBorderRadius, _Tabs.tabsTokens.itemWidth, _Tabs.tabsTokens.itemHeight, _Tabs.tabsTokens.itemPadding, _Tabs.tabsTokens.itemMarginLeft, _Tabs.tabsTokens.itemContentGap, _Tabs.tabsTokens.fontFamily, _Tabs.tabsTokens.fontSize, _Tabs.tabsTokens.fontStyle, _Tabs.tabsTokens.fontWeight, _Tabs.tabsTokens.letterSpacing, _Tabs.tabsTokens.lineHeight, _Tabs.tabsTokens.actionContentMarginLeft),
             h5: (0, _styledcomponents.css)([
                 "",
                 ":0.375rem;",

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

@@ -84,6 +84,14 @@ var config = {
                 ":0rem;",
                 ":0.75rem;"
             ], _Tabs.tabsTokens.tabsBorderRadius, _Tabs.tabsTokens.tabsWidth, _Tabs.tabsTokens.tabsHeight, _Tabs.tabsTokens.arrowInnerPadding, _Tabs.tabsTokens.arrowOuterPadding),
+            h6: (0, _styledcomponents.css)([
+                "",
+                ":0.5rem;",
+                ":fit-content;",
+                ":auto;",
+                ":0.25rem;",
+                ":0rem;"
+            ], _Tabs.tabsTokens.tabsBorderRadius, _Tabs.tabsTokens.tabsWidth, _Tabs.tabsTokens.tabsHeight, _Tabs.tabsTokens.arrowInnerPadding, _Tabs.tabsTokens.arrowOuterPadding),
             h5: (0, _styledcomponents.css)([
                 "",
                 ":0.5rem;",

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

@@ -39,10 +39,11 @@ var config = {
                 ":var(--surface-solid-card);",
                 ":var(--surface-transparent-secondary);",
                 ":var(--surface-transparent-secondary);",
+                ":var(--surface-accent);",
                 ":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)
+            ], _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.itemFocusColor, _TimePicker.timePickerTokens.scrollbarColor, _TimePicker.timePickerTokens.scrollbarTrackColor, _TimePicker.timePickerTokens.disabledOpacity)
         },
         size: {
             l: (0, _styledcomponents.css)([

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

@@ -21,10 +21,11 @@ var config = {
                 "",
                 ":var(--surface-transparent-secondary);",
                 ":var(--surface-transparent-secondary);",
+                ":var(--surface-accent);",
                 ":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)
+            ], _TimePickerGrid.timePickerGridTokens.itemBackgroundHover, _TimePickerGrid.timePickerGridTokens.itemBackgroundActive, _TimePickerGrid.timePickerGridTokens.itemFocusColor, _TimePickerGrid.timePickerGridTokens.scrollbarColor, _TimePickerGrid.timePickerGridTokens.scrollbarTrackColor, _TimePickerGrid.timePickerGridTokens.disabledOpacity)
         },
         size: {
             l: (0, _styledcomponents.css)([