@salutejs/plasma-new-hope 0.339.0-canary.2287.18748636481.0 → 0.339.0-canary.2288.18780329906.0

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

@@ -3,72 +3,21 @@ import { css } from "styled-components";
 import { component, mergeConfig } from "../../engines";
 import { textFieldConfig, textFieldTokens } from "../TextField";
 import { popoverClasses, popoverConfig } from "../Popover";
-import { timePickerGridConfig, timePickerGridTokens } from "../TimePickerGrid";
 import { classes, tokens } from "./TimePicker.tokens";
 var mergedTextFieldConfig = mergeConfig(textFieldConfig);
 var TextField = component(mergedTextFieldConfig);
 var mergedPopoverConfig = mergeConfig(popoverConfig);
 var Popover = component(mergedPopoverConfig);
-var mergedTimePickerGrid = mergeConfig(timePickerGridConfig);
-var TimePickerGrid = component(mergedTimePickerGrid);
 export var StyledPopover = styled(Popover).withConfig({
     displayName: "TimePicker.styles__StyledPopover",
-    componentId: "sc-fa04016d-0"
+    componentId: "sc-8a747fd1-0"
 })([
     ""
 ]);
-export var StyledTimePickerGrid = styled(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(",
-    ");"
-], timePickerGridTokens.timePickerGridBackground, tokens.timePickerBackground, timePickerGridTokens.timePickerGridBorderRadius, tokens.timePickerBorderRadius, timePickerGridTokens.timePickerGridWidth, tokens.timePickerWidth, timePickerGridTokens.timePickerGridPadding, tokens.timePickerPadding, timePickerGridTokens.disabledOpacity, tokens.disabledOpacity, timePickerGridTokens.columnHeight, tokens.columnHeight, timePickerGridTokens.itemHeight, tokens.itemHeight, timePickerGridTokens.itemBorderRadius, tokens.itemBorderRadius, timePickerGridTokens.itemPadding, tokens.itemPadding, timePickerGridTokens.itemBackgroundHover, tokens.itemBackgroundHover, timePickerGridTokens.itemBackgroundActive, tokens.itemBackgroundActive, timePickerGridTokens.itemFontFamily, tokens.itemFontFamily, timePickerGridTokens.itemFontSize, tokens.itemFontSize, timePickerGridTokens.itemFontStyle, tokens.itemFontStyle, timePickerGridTokens.itemFontWeight, tokens.itemFontWeight, timePickerGridTokens.itemLetterSpacing, tokens.itemLetterSpacing, timePickerGridTokens.itemLineHeight, tokens.itemLineHeight, timePickerGridTokens.scrollbarWidth, tokens.scrollbarWidth, timePickerGridTokens.scrollbarColor, tokens.scrollbarColor, timePickerGridTokens.scrollbarTrackColor, tokens.scrollbarTrackColor, timePickerGridTokens.scrollbarMargin, tokens.scrollbarMargin);
 // NOTE: переопределение токенов TextField
 export var StyledInput = styled(TextField).withConfig({
     displayName: "TimePicker.styles__StyledInput",
-    componentId: "sc-fa04016d-2"
+    componentId: "sc-8a747fd1-1"
 })([
     "width:100%;",
     ":var(",
@@ -232,7 +181,7 @@ export var base = css([
 ], tokens.width, tokens.dropdownMarginTop, popoverClasses.wrapper, popoverClasses.target, classes.timePickerstretched, popoverClasses.root, classes.timePickerFullWidth, classes.timePickerPlacementRight);
 export var StyledTimePicker = styled.div.withConfig({
     displayName: "TimePicker.styles__StyledTimePicker",
-    componentId: "sc-fa04016d-3"
+    componentId: "sc-8a747fd1-2"
 })([
     "background:var(",
     ");border-radius:var(",

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

@@ -0,0 +1,50 @@
+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;
+}
+import React from "react";
+import cls from "classnames";
+import { classes } from "../../TimePicker.tokens";
+import { StyledTimeColumn, StyledTimeItem, StyledEmpty, CustomScrollbar, ScrollbarTrack, ScrollbarThumb, StyledRoot } from "./TimeColumn.styles";
+export 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.createElement(StyledRoot, null, /*#__PURE__*/ React.createElement(StyledTimeColumn, {
+        key: column,
+        ref: columnRef,
+        height: dropdownHeight,
+        className: classes.timeColumn
+    }, values.map(function(value, index) {
+        return /*#__PURE__*/ React.createElement(StyledTimeItem, {
+            key: value,
+            ref: function(el) {
+                timeItemRefs.current["".concat(column, "-").concat(value)] = el;
+            },
+            className: cls(_define_property({}, classes.timeItemActive, activeTime[column] === index)),
+            onClick: function() {
+                return handleTimeItemClick(value, column);
+            },
+            onKeyDown: function(e) {
+                return handleTimeItemKeyDown(e, column, value);
+            }
+        }, value);
+    }), /*#__PURE__*/ React.createElement(StyledEmpty, null)), /*#__PURE__*/ React.createElement(CustomScrollbar, {
+        ref: scrollbarRef,
+        className: cls(_define_property({}, classes.scrollbarVisible, scrollbarState.isVisible))
+    }, /*#__PURE__*/ React.createElement(ScrollbarTrack, null, /*#__PURE__*/ React.createElement(ScrollbarThumb, {
+        ref: thumbRef,
+        style: {
+            height: "".concat(scrollbarState.thumbHeight, "px"),
+            top: "".concat(scrollbarState.thumbPosition, "px")
+        },
+        onMouseDown: createScrollbarDragHandler(columnRef, setScrollbar, timeoutRef)
+    }))));
+};

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

@@ -1,14 +1,14 @@
 import styled from "styled-components";
-import { classes, tokens } from "../../TimePickerGrid.tokens";
+import { classes, tokens } from "../../TimePicker.tokens";
 export var StyledRoot = styled.div.withConfig({
     displayName: "TimeColumn.styles__StyledRoot",
-    componentId: "sc-2a18995b-0"
+    componentId: "sc-a5ee4233-0"
 })([
     "position:relative;width:100%;"
 ]);
 export var StyledTimeItem = styled.div.withConfig({
     displayName: "TimeColumn.styles__StyledTimeItem",
-    componentId: "sc-2a18995b-1"
+    componentId: "sc-a5ee4233-1"
 })([
     "height:var(",
     ");padding:var(",
@@ -22,13 +22,11 @@ export var StyledTimeItem = styled.div.withConfig({
     ");&:hover{background:var(",
     ");}&.",
     "{background:var(",
-    ");}&.",
-    "{cursor:not-allowed;opacity:var(",
     ");}"
-], tokens.itemHeight, tokens.itemPadding, tokens.itemBorderRadius, tokens.itemFontFamily, tokens.itemFontSize, tokens.itemFontStyle, tokens.itemFontWeight, tokens.itemLetterSpacing, tokens.itemLineHeight, tokens.itemBackgroundHover, classes.timeItemActive, tokens.itemBackgroundActive, classes.itemDisabled, tokens.disabledOpacity);
+], tokens.itemHeight, tokens.itemPadding, tokens.itemBorderRadius, tokens.itemFontFamily, tokens.itemFontSize, tokens.itemFontStyle, tokens.itemFontWeight, tokens.itemLetterSpacing, tokens.itemLineHeight, tokens.itemBackgroundHover, classes.timeItemActive, tokens.itemBackgroundActive);
 export var StyledTimeColumn = styled.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(",
@@ -42,7 +40,7 @@ export var StyledTimeColumn = styled.div.withConfig({
 }, tokens.scrollbarWidth, classes.timeColumnActive, tokens.itemBackgroundHover, tokens.itemBorderRadius);
 export var CustomScrollbar = styled.div.withConfig({
     displayName: "TimeColumn.styles__CustomScrollbar",
-    componentId: "sc-2a18995b-3"
+    componentId: "sc-a5ee4233-3"
 })([
     "position:absolute;top:var(",
     ");right:0;bottom:var(",
@@ -52,7 +50,7 @@ export var CustomScrollbar = styled.div.withConfig({
 ], tokens.scrollbarMargin, tokens.scrollbarMargin, tokens.scrollbarWidth, classes.scrollbarVisible);
 export var ScrollbarTrack = styled.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(",
@@ -60,7 +58,7 @@ export var ScrollbarTrack = styled.div.withConfig({
 ], tokens.scrollbarTrackColor, tokens.scrollbarWidth);
 export var ScrollbarThumb = styled.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(",
@@ -70,7 +68,7 @@ export var ScrollbarThumb = styled.div.withConfig({
 ], tokens.scrollbarColor, tokens.scrollbarWidth, tokens.scrollbarColor, tokens.scrollbarTrackColor);
 export var StyledEmpty = styled.div.withConfig({
     displayName: "TimeColumn.styles__StyledEmpty",
-    componentId: "sc-2a18995b-6"
+    componentId: "sc-a5ee4233-6"
 })([
     "width:100%;height:0%.125rem;"
 ]);

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

@@ -68,7 +68,8 @@ export var normalizeTimeSegment = function(type, input) {
         carryover: digits.slice(1)
     };
 };
-export var processTimeInput = function(input, format, cursorPosition) {
+export 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 = {
@@ -102,3 +103,23 @@ export var processTimeInput = function(input, format, cursorPosition) {
         newCursorPosition: newCursorPosition
     };
 };
+export 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/es/examples/components/Attach/Attach.config.js

@@ -46,8 +46,9 @@ export var config = {
                 ":var(--text-secondary-active);",
                 ":var(--surface-clear);",
                 ":0.4;",
-                ":var(--surface-accent);"
-            ], attachTokens.buttonColor, attachTokens.buttonValueColor, attachTokens.buttonBackgroundColor, attachTokens.buttonLoadingBackgroundColor, attachTokens.buttonBackgroundColor, attachTokens.buttonColorHover, attachTokens.buttonBackgroundColorHover, attachTokens.buttonColorActive, attachTokens.buttonBackgroundColorActive, attachTokens.buttonDisabledOpacity, attachTokens.buttonFocusColor, attachTokens.cellColor, attachTokens.cellLabelColor, attachTokens.cellTitleColor, attachTokens.cellSubtitleColor, attachTokens.cellBackgroundColor, attachTokens.iconButtonColor, attachTokens.iconButtonBackgroundColor, attachTokens.iconButtonLoadingBackgroundColor, attachTokens.iconButtonBackgroundColor, attachTokens.iconButtonColorHover, attachTokens.iconButtonBackgroundColorHover, attachTokens.iconButtonColorActive, attachTokens.iconButtonBackgroundColorActive, attachTokens.iconButtonDisabledOpacity, attachTokens.iconButtonFocusColor, attachTokens.iconButtonCancelColor, attachTokens.iconButtonCancelBackgroundColor, attachTokens.iconButtonCancelLoadingBackgroundColor, attachTokens.iconButtonCancelBackgroundColor, attachTokens.iconButtonCancelColorHover, attachTokens.iconButtonCancelBackgroundColorHover, attachTokens.iconButtonCancelColorActive, attachTokens.iconButtonCancelBackgroundColorActive, attachTokens.iconButtonCancelDisabledOpacity, attachTokens.iconButtonCancelFocusColor),
+                ":var(--surface-accent);",
+                ":var(--text-primary);"
+            ], attachTokens.buttonColor, attachTokens.buttonValueColor, attachTokens.buttonBackgroundColor, attachTokens.buttonLoadingBackgroundColor, attachTokens.buttonBackgroundColor, attachTokens.buttonColorHover, attachTokens.buttonBackgroundColorHover, attachTokens.buttonColorActive, attachTokens.buttonBackgroundColorActive, attachTokens.buttonDisabledOpacity, attachTokens.buttonFocusColor, attachTokens.cellColor, attachTokens.cellLabelColor, attachTokens.cellTitleColor, attachTokens.cellSubtitleColor, attachTokens.cellBackgroundColor, attachTokens.iconButtonColor, attachTokens.iconButtonBackgroundColor, attachTokens.iconButtonLoadingBackgroundColor, attachTokens.iconButtonBackgroundColor, attachTokens.iconButtonColorHover, attachTokens.iconButtonBackgroundColorHover, attachTokens.iconButtonColorActive, attachTokens.iconButtonBackgroundColorActive, attachTokens.iconButtonDisabledOpacity, attachTokens.iconButtonFocusColor, attachTokens.iconButtonCancelColor, attachTokens.iconButtonCancelBackgroundColor, attachTokens.iconButtonCancelLoadingBackgroundColor, attachTokens.iconButtonCancelBackgroundColor, attachTokens.iconButtonCancelColorHover, attachTokens.iconButtonCancelBackgroundColorHover, attachTokens.iconButtonCancelColorActive, attachTokens.iconButtonCancelBackgroundColorActive, attachTokens.iconButtonCancelDisabledOpacity, attachTokens.iconButtonCancelFocusColor, attachTokens.moreIconColor),
             accent: css([
                 "",
                 ":var(--on-dark-text-primary);",
@@ -85,8 +86,9 @@ export var config = {
                 ":var(--text-secondary-active);",
                 ":var(--surface-clear);",
                 ":0.4;",
-                ":var(--surface-accent);"
-            ], attachTokens.buttonColor, attachTokens.buttonValueColor, attachTokens.buttonBackgroundColor, attachTokens.buttonLoadingBackgroundColor, attachTokens.buttonBackgroundColor, attachTokens.buttonColorHover, attachTokens.buttonBackgroundColorHover, attachTokens.buttonColorActive, attachTokens.buttonBackgroundColorActive, attachTokens.buttonDisabledOpacity, attachTokens.buttonFocusColor, attachTokens.cellColor, attachTokens.cellLabelColor, attachTokens.cellTitleColor, attachTokens.cellSubtitleColor, attachTokens.cellBackgroundColor, attachTokens.iconButtonColor, attachTokens.iconButtonBackgroundColor, attachTokens.iconButtonLoadingBackgroundColor, attachTokens.iconButtonBackgroundColor, attachTokens.iconButtonColorHover, attachTokens.iconButtonBackgroundColorHover, attachTokens.iconButtonColorActive, attachTokens.iconButtonBackgroundColorActive, attachTokens.iconButtonDisabledOpacity, attachTokens.iconButtonFocusColor, attachTokens.iconButtonCancelColor, attachTokens.iconButtonCancelBackgroundColor, attachTokens.iconButtonCancelLoadingBackgroundColor, attachTokens.iconButtonCancelBackgroundColor, attachTokens.iconButtonCancelColorHover, attachTokens.iconButtonCancelBackgroundColorHover, attachTokens.iconButtonCancelColorActive, attachTokens.iconButtonCancelBackgroundColorActive, attachTokens.iconButtonCancelDisabledOpacity, attachTokens.iconButtonCancelFocusColor),
+                ":var(--surface-accent);",
+                ":var(--text-primary);"
+            ], attachTokens.buttonColor, attachTokens.buttonValueColor, attachTokens.buttonBackgroundColor, attachTokens.buttonLoadingBackgroundColor, attachTokens.buttonBackgroundColor, attachTokens.buttonColorHover, attachTokens.buttonBackgroundColorHover, attachTokens.buttonColorActive, attachTokens.buttonBackgroundColorActive, attachTokens.buttonDisabledOpacity, attachTokens.buttonFocusColor, attachTokens.cellColor, attachTokens.cellLabelColor, attachTokens.cellTitleColor, attachTokens.cellSubtitleColor, attachTokens.cellBackgroundColor, attachTokens.iconButtonColor, attachTokens.iconButtonBackgroundColor, attachTokens.iconButtonLoadingBackgroundColor, attachTokens.iconButtonBackgroundColor, attachTokens.iconButtonColorHover, attachTokens.iconButtonBackgroundColorHover, attachTokens.iconButtonColorActive, attachTokens.iconButtonBackgroundColorActive, attachTokens.iconButtonDisabledOpacity, attachTokens.iconButtonFocusColor, attachTokens.iconButtonCancelColor, attachTokens.iconButtonCancelBackgroundColor, attachTokens.iconButtonCancelLoadingBackgroundColor, attachTokens.iconButtonCancelBackgroundColor, attachTokens.iconButtonCancelColorHover, attachTokens.iconButtonCancelBackgroundColorHover, attachTokens.iconButtonCancelColorActive, attachTokens.iconButtonCancelBackgroundColorActive, attachTokens.iconButtonCancelDisabledOpacity, attachTokens.iconButtonCancelFocusColor, attachTokens.moreIconColor),
             secondary: css([
                 "",
                 ":var(--text-primary);",
@@ -124,8 +126,9 @@ export var config = {
                 ":var(--text-secondary-active);",
                 ":var(--surface-clear);",
                 ":0.4;",
-                ":var(--surface-accent);"
-            ], attachTokens.buttonColor, attachTokens.buttonValueColor, attachTokens.buttonBackgroundColor, attachTokens.buttonLoadingBackgroundColor, attachTokens.buttonBackgroundColor, attachTokens.buttonColorHover, attachTokens.buttonBackgroundColorHover, attachTokens.buttonColorActive, attachTokens.buttonBackgroundColorActive, attachTokens.buttonDisabledOpacity, attachTokens.buttonFocusColor, attachTokens.cellColor, attachTokens.cellLabelColor, attachTokens.cellTitleColor, attachTokens.cellSubtitleColor, attachTokens.cellBackgroundColor, attachTokens.iconButtonColor, attachTokens.iconButtonBackgroundColor, attachTokens.iconButtonLoadingBackgroundColor, attachTokens.iconButtonBackgroundColor, attachTokens.iconButtonColorHover, attachTokens.iconButtonBackgroundColorHover, attachTokens.iconButtonColorActive, attachTokens.iconButtonBackgroundColorActive, attachTokens.iconButtonDisabledOpacity, attachTokens.iconButtonFocusColor, attachTokens.iconButtonCancelColor, attachTokens.iconButtonCancelBackgroundColor, attachTokens.iconButtonCancelLoadingBackgroundColor, attachTokens.iconButtonCancelBackgroundColor, attachTokens.iconButtonCancelColorHover, attachTokens.iconButtonCancelBackgroundColorHover, attachTokens.iconButtonCancelColorActive, attachTokens.iconButtonCancelBackgroundColorActive, attachTokens.iconButtonCancelDisabledOpacity, attachTokens.iconButtonCancelFocusColor),
+                ":var(--surface-accent);",
+                ":var(--text-primary);"
+            ], attachTokens.buttonColor, attachTokens.buttonValueColor, attachTokens.buttonBackgroundColor, attachTokens.buttonLoadingBackgroundColor, attachTokens.buttonBackgroundColor, attachTokens.buttonColorHover, attachTokens.buttonBackgroundColorHover, attachTokens.buttonColorActive, attachTokens.buttonBackgroundColorActive, attachTokens.buttonDisabledOpacity, attachTokens.buttonFocusColor, attachTokens.cellColor, attachTokens.cellLabelColor, attachTokens.cellTitleColor, attachTokens.cellSubtitleColor, attachTokens.cellBackgroundColor, attachTokens.iconButtonColor, attachTokens.iconButtonBackgroundColor, attachTokens.iconButtonLoadingBackgroundColor, attachTokens.iconButtonBackgroundColor, attachTokens.iconButtonColorHover, attachTokens.iconButtonBackgroundColorHover, attachTokens.iconButtonColorActive, attachTokens.iconButtonBackgroundColorActive, attachTokens.iconButtonDisabledOpacity, attachTokens.iconButtonFocusColor, attachTokens.iconButtonCancelColor, attachTokens.iconButtonCancelBackgroundColor, attachTokens.iconButtonCancelLoadingBackgroundColor, attachTokens.iconButtonCancelBackgroundColor, attachTokens.iconButtonCancelColorHover, attachTokens.iconButtonCancelBackgroundColorHover, attachTokens.iconButtonCancelColorActive, attachTokens.iconButtonCancelBackgroundColorActive, attachTokens.iconButtonCancelDisabledOpacity, attachTokens.iconButtonCancelFocusColor, attachTokens.moreIconColor),
             clear: css([
                 "",
                 ":var(--text-primary);",
@@ -163,8 +166,9 @@ export var config = {
                 ":var(--text-secondary-active);",
                 ":var(--surface-clear);",
                 ":0.4;",
-                ":var(--surface-accent);"
-            ], attachTokens.buttonColor, attachTokens.buttonValueColor, attachTokens.buttonBackgroundColor, attachTokens.buttonLoadingBackgroundColor, attachTokens.buttonBackgroundColor, attachTokens.buttonColorHover, attachTokens.buttonBackgroundColorHover, attachTokens.buttonColorActive, attachTokens.buttonBackgroundColorActive, attachTokens.buttonDisabledOpacity, attachTokens.buttonFocusColor, attachTokens.cellColor, attachTokens.cellLabelColor, attachTokens.cellTitleColor, attachTokens.cellSubtitleColor, attachTokens.cellBackgroundColor, attachTokens.iconButtonColor, attachTokens.iconButtonBackgroundColor, attachTokens.iconButtonLoadingBackgroundColor, attachTokens.iconButtonBackgroundColor, attachTokens.iconButtonColorHover, attachTokens.iconButtonBackgroundColorHover, attachTokens.iconButtonColorActive, attachTokens.iconButtonBackgroundColorActive, attachTokens.iconButtonDisabledOpacity, attachTokens.iconButtonFocusColor, attachTokens.iconButtonCancelColor, attachTokens.iconButtonCancelBackgroundColor, attachTokens.iconButtonCancelLoadingBackgroundColor, attachTokens.iconButtonCancelBackgroundColor, attachTokens.iconButtonCancelColorHover, attachTokens.iconButtonCancelBackgroundColorHover, attachTokens.iconButtonCancelColorActive, attachTokens.iconButtonCancelBackgroundColorActive, attachTokens.iconButtonCancelDisabledOpacity, attachTokens.iconButtonCancelFocusColor),
+                ":var(--surface-accent);",
+                ":var(--text-primary);"
+            ], attachTokens.buttonColor, attachTokens.buttonValueColor, attachTokens.buttonBackgroundColor, attachTokens.buttonLoadingBackgroundColor, attachTokens.buttonBackgroundColor, attachTokens.buttonColorHover, attachTokens.buttonBackgroundColorHover, attachTokens.buttonColorActive, attachTokens.buttonBackgroundColorActive, attachTokens.buttonDisabledOpacity, attachTokens.buttonFocusColor, attachTokens.cellColor, attachTokens.cellLabelColor, attachTokens.cellTitleColor, attachTokens.cellSubtitleColor, attachTokens.cellBackgroundColor, attachTokens.iconButtonColor, attachTokens.iconButtonBackgroundColor, attachTokens.iconButtonLoadingBackgroundColor, attachTokens.iconButtonBackgroundColor, attachTokens.iconButtonColorHover, attachTokens.iconButtonBackgroundColorHover, attachTokens.iconButtonColorActive, attachTokens.iconButtonBackgroundColorActive, attachTokens.iconButtonDisabledOpacity, attachTokens.iconButtonFocusColor, attachTokens.iconButtonCancelColor, attachTokens.iconButtonCancelBackgroundColor, attachTokens.iconButtonCancelLoadingBackgroundColor, attachTokens.iconButtonCancelBackgroundColor, attachTokens.iconButtonCancelColorHover, attachTokens.iconButtonCancelBackgroundColorHover, attachTokens.iconButtonCancelColorActive, attachTokens.iconButtonCancelBackgroundColorActive, attachTokens.iconButtonCancelDisabledOpacity, attachTokens.iconButtonCancelFocusColor, attachTokens.moreIconColor),
             positive: css([
                 "",
                 ":var(--on-dark-text-primary);",
@@ -192,8 +196,9 @@ export var config = {
                 ":var(--text-secondary-active);",
                 ":var(--surface-clear);",
                 ":0.4;",
-                ":var(--surface-accent);"
-            ], attachTokens.buttonColor, attachTokens.buttonValueColor, attachTokens.buttonBackgroundColor, attachTokens.buttonLoadingBackgroundColor, attachTokens.buttonBackgroundColor, attachTokens.buttonColorHover, attachTokens.buttonBackgroundColorHover, attachTokens.buttonColorActive, attachTokens.buttonBackgroundColorActive, attachTokens.buttonDisabledOpacity, attachTokens.buttonFocusColor, attachTokens.cellColor, attachTokens.cellLabelColor, attachTokens.cellTitleColor, attachTokens.cellSubtitleColor, attachTokens.cellBackgroundColor, attachTokens.iconButtonCancelColor, attachTokens.iconButtonCancelBackgroundColor, attachTokens.iconButtonCancelLoadingBackgroundColor, attachTokens.iconButtonCancelBackgroundColor, attachTokens.iconButtonCancelColorHover, attachTokens.iconButtonCancelBackgroundColorHover, attachTokens.iconButtonCancelColorActive, attachTokens.iconButtonCancelBackgroundColorActive, attachTokens.iconButtonCancelDisabledOpacity, attachTokens.iconButtonCancelFocusColor),
+                ":var(--surface-accent);",
+                ":var(--text-primary);"
+            ], attachTokens.buttonColor, attachTokens.buttonValueColor, attachTokens.buttonBackgroundColor, attachTokens.buttonLoadingBackgroundColor, attachTokens.buttonBackgroundColor, attachTokens.buttonColorHover, attachTokens.buttonBackgroundColorHover, attachTokens.buttonColorActive, attachTokens.buttonBackgroundColorActive, attachTokens.buttonDisabledOpacity, attachTokens.buttonFocusColor, attachTokens.cellColor, attachTokens.cellLabelColor, attachTokens.cellTitleColor, attachTokens.cellSubtitleColor, attachTokens.cellBackgroundColor, attachTokens.iconButtonCancelColor, attachTokens.iconButtonCancelBackgroundColor, attachTokens.iconButtonCancelLoadingBackgroundColor, attachTokens.iconButtonCancelBackgroundColor, attachTokens.iconButtonCancelColorHover, attachTokens.iconButtonCancelBackgroundColorHover, attachTokens.iconButtonCancelColorActive, attachTokens.iconButtonCancelBackgroundColorActive, attachTokens.iconButtonCancelDisabledOpacity, attachTokens.iconButtonCancelFocusColor, attachTokens.moreIconColor),
             success: css([
                 "",
                 ":var(--text-primary);",
@@ -220,8 +225,9 @@ export var config = {
                 ":var(--text-secondary-active);",
                 ":var(--surface-clear);",
                 ":0.4;",
-                ":var(--surface-accent);"
-            ], attachTokens.cellColor, attachTokens.cellLabelColor, attachTokens.cellTitleColor, attachTokens.cellSubtitleColor, attachTokens.cellBackgroundColor, attachTokens.iconButtonColor, attachTokens.iconButtonBackgroundColor, attachTokens.iconButtonLoadingBackgroundColor, attachTokens.iconButtonBackgroundColor, attachTokens.iconButtonColorHover, attachTokens.iconButtonBackgroundColorHover, attachTokens.iconButtonColorActive, attachTokens.iconButtonBackgroundColorActive, attachTokens.iconButtonDisabledOpacity, attachTokens.iconButtonFocusColor, attachTokens.iconButtonCancelColor, attachTokens.iconButtonCancelBackgroundColor, attachTokens.iconButtonCancelLoadingBackgroundColor, attachTokens.iconButtonCancelBackgroundColor, attachTokens.iconButtonCancelColorHover, attachTokens.iconButtonCancelBackgroundColorHover, attachTokens.iconButtonCancelColorActive, attachTokens.iconButtonCancelBackgroundColorActive, attachTokens.iconButtonCancelDisabledOpacity, attachTokens.iconButtonCancelFocusColor),
+                ":var(--surface-accent);",
+                ":var(--text-primary);"
+            ], attachTokens.cellColor, attachTokens.cellLabelColor, attachTokens.cellTitleColor, attachTokens.cellSubtitleColor, attachTokens.cellBackgroundColor, attachTokens.iconButtonColor, attachTokens.iconButtonBackgroundColor, attachTokens.iconButtonLoadingBackgroundColor, attachTokens.iconButtonBackgroundColor, attachTokens.iconButtonColorHover, attachTokens.iconButtonBackgroundColorHover, attachTokens.iconButtonColorActive, attachTokens.iconButtonBackgroundColorActive, attachTokens.iconButtonDisabledOpacity, attachTokens.iconButtonFocusColor, attachTokens.iconButtonCancelColor, attachTokens.iconButtonCancelBackgroundColor, attachTokens.iconButtonCancelLoadingBackgroundColor, attachTokens.iconButtonCancelBackgroundColor, attachTokens.iconButtonCancelColorHover, attachTokens.iconButtonCancelBackgroundColorHover, attachTokens.iconButtonCancelColorActive, attachTokens.iconButtonCancelBackgroundColorActive, attachTokens.iconButtonCancelDisabledOpacity, attachTokens.iconButtonCancelFocusColor, attachTokens.moreIconColor),
             warning: css([
                 "",
                 ":var(--on-dark-text-primary);",
@@ -259,8 +265,9 @@ export var config = {
                 ":var(--text-secondary-active);",
                 ":var(--surface-clear);",
                 ":0.4;",
-                ":var(--surface-accent);"
-            ], attachTokens.buttonColor, attachTokens.buttonValueColor, attachTokens.buttonBackgroundColor, attachTokens.buttonLoadingBackgroundColor, attachTokens.buttonBackgroundColor, attachTokens.buttonColorHover, attachTokens.buttonBackgroundColorHover, attachTokens.buttonColorActive, attachTokens.buttonBackgroundColorActive, attachTokens.buttonDisabledOpacity, attachTokens.buttonFocusColor, attachTokens.cellColor, attachTokens.cellLabelColor, attachTokens.cellTitleColor, attachTokens.cellSubtitleColor, attachTokens.cellBackgroundColor, attachTokens.iconButtonColor, attachTokens.iconButtonBackgroundColor, attachTokens.iconButtonLoadingBackgroundColor, attachTokens.iconButtonBackgroundColor, attachTokens.iconButtonColorHover, attachTokens.iconButtonBackgroundColorHover, attachTokens.iconButtonColorActive, attachTokens.iconButtonBackgroundColorActive, attachTokens.iconButtonDisabledOpacity, attachTokens.iconButtonFocusColor, attachTokens.iconButtonCancelColor, attachTokens.iconButtonCancelBackgroundColor, attachTokens.iconButtonCancelLoadingBackgroundColor, attachTokens.iconButtonCancelBackgroundColor, attachTokens.iconButtonCancelColorHover, attachTokens.iconButtonCancelBackgroundColorHover, attachTokens.iconButtonCancelColorActive, attachTokens.iconButtonCancelBackgroundColorActive, attachTokens.iconButtonCancelDisabledOpacity, attachTokens.iconButtonCancelFocusColor),
+                ":var(--surface-accent);",
+                ":var(--text-primary);"
+            ], attachTokens.buttonColor, attachTokens.buttonValueColor, attachTokens.buttonBackgroundColor, attachTokens.buttonLoadingBackgroundColor, attachTokens.buttonBackgroundColor, attachTokens.buttonColorHover, attachTokens.buttonBackgroundColorHover, attachTokens.buttonColorActive, attachTokens.buttonBackgroundColorActive, attachTokens.buttonDisabledOpacity, attachTokens.buttonFocusColor, attachTokens.cellColor, attachTokens.cellLabelColor, attachTokens.cellTitleColor, attachTokens.cellSubtitleColor, attachTokens.cellBackgroundColor, attachTokens.iconButtonColor, attachTokens.iconButtonBackgroundColor, attachTokens.iconButtonLoadingBackgroundColor, attachTokens.iconButtonBackgroundColor, attachTokens.iconButtonColorHover, attachTokens.iconButtonBackgroundColorHover, attachTokens.iconButtonColorActive, attachTokens.iconButtonBackgroundColorActive, attachTokens.iconButtonDisabledOpacity, attachTokens.iconButtonFocusColor, attachTokens.iconButtonCancelColor, attachTokens.iconButtonCancelBackgroundColor, attachTokens.iconButtonCancelLoadingBackgroundColor, attachTokens.iconButtonCancelBackgroundColor, attachTokens.iconButtonCancelColorHover, attachTokens.iconButtonCancelBackgroundColorHover, attachTokens.iconButtonCancelColorActive, attachTokens.iconButtonCancelBackgroundColorActive, attachTokens.iconButtonCancelDisabledOpacity, attachTokens.iconButtonCancelFocusColor, attachTokens.moreIconColor),
             critical: css([
                 "",
                 ":var(--text-primary);",
@@ -287,8 +294,9 @@ export var config = {
                 ":var(--text-secondary-active);",
                 ":var(--surface-clear);",
                 ":0.4;",
-                ":var(--surface-accent);"
-            ], attachTokens.cellColor, attachTokens.cellLabelColor, attachTokens.cellTitleColor, attachTokens.cellSubtitleColor, attachTokens.cellBackgroundColor, attachTokens.iconButtonColor, attachTokens.iconButtonBackgroundColor, attachTokens.iconButtonLoadingBackgroundColor, attachTokens.iconButtonBackgroundColor, attachTokens.iconButtonColorHover, attachTokens.iconButtonBackgroundColorHover, attachTokens.iconButtonColorActive, attachTokens.iconButtonBackgroundColorActive, attachTokens.iconButtonDisabledOpacity, attachTokens.iconButtonFocusColor, attachTokens.iconButtonCancelColor, attachTokens.iconButtonCancelBackgroundColor, attachTokens.iconButtonCancelLoadingBackgroundColor, attachTokens.iconButtonCancelBackgroundColor, attachTokens.iconButtonCancelColorHover, attachTokens.iconButtonCancelBackgroundColorHover, attachTokens.iconButtonCancelColorActive, attachTokens.iconButtonCancelBackgroundColorActive, attachTokens.iconButtonCancelDisabledOpacity, attachTokens.iconButtonCancelFocusColor),
+                ":var(--surface-accent);",
+                ":var(--text-primary);"
+            ], attachTokens.cellColor, attachTokens.cellLabelColor, attachTokens.cellTitleColor, attachTokens.cellSubtitleColor, attachTokens.cellBackgroundColor, attachTokens.iconButtonColor, attachTokens.iconButtonBackgroundColor, attachTokens.iconButtonLoadingBackgroundColor, attachTokens.iconButtonBackgroundColor, attachTokens.iconButtonColorHover, attachTokens.iconButtonBackgroundColorHover, attachTokens.iconButtonColorActive, attachTokens.iconButtonBackgroundColorActive, attachTokens.iconButtonDisabledOpacity, attachTokens.iconButtonFocusColor, attachTokens.iconButtonCancelColor, attachTokens.iconButtonCancelBackgroundColor, attachTokens.iconButtonCancelLoadingBackgroundColor, attachTokens.iconButtonCancelBackgroundColor, attachTokens.iconButtonCancelColorHover, attachTokens.iconButtonCancelBackgroundColorHover, attachTokens.iconButtonCancelColorActive, attachTokens.iconButtonCancelBackgroundColorActive, attachTokens.iconButtonCancelDisabledOpacity, attachTokens.iconButtonCancelFocusColor, attachTokens.moreIconColor),
             negative: css([
                 "",
                 ":var(--on-dark-text-primary);",
@@ -316,8 +324,9 @@ export var config = {
                 ":var(--text-secondary-active);",
                 ":var(--surface-clear);",
                 ":0.4;",
-                ":var(--surface-accent);"
-            ], attachTokens.buttonColor, attachTokens.buttonValueColor, attachTokens.buttonBackgroundColor, attachTokens.buttonLoadingBackgroundColor, attachTokens.buttonBackgroundColor, attachTokens.buttonColorHover, attachTokens.buttonBackgroundColorHover, attachTokens.buttonColorActive, attachTokens.buttonBackgroundColorActive, attachTokens.buttonDisabledOpacity, attachTokens.buttonFocusColor, attachTokens.cellColor, attachTokens.cellLabelColor, attachTokens.cellTitleColor, attachTokens.cellSubtitleColor, attachTokens.cellBackgroundColor, attachTokens.iconButtonCancelColor, attachTokens.iconButtonCancelBackgroundColor, attachTokens.iconButtonCancelLoadingBackgroundColor, attachTokens.iconButtonCancelBackgroundColor, attachTokens.iconButtonCancelColorHover, attachTokens.iconButtonCancelBackgroundColorHover, attachTokens.iconButtonCancelColorActive, attachTokens.iconButtonCancelBackgroundColorActive, attachTokens.iconButtonCancelDisabledOpacity, attachTokens.iconButtonCancelFocusColor),
+                ":var(--surface-accent);",
+                ":var(--text-primary);"
+            ], attachTokens.buttonColor, attachTokens.buttonValueColor, attachTokens.buttonBackgroundColor, attachTokens.buttonLoadingBackgroundColor, attachTokens.buttonBackgroundColor, attachTokens.buttonColorHover, attachTokens.buttonBackgroundColorHover, attachTokens.buttonColorActive, attachTokens.buttonBackgroundColorActive, attachTokens.buttonDisabledOpacity, attachTokens.buttonFocusColor, attachTokens.cellColor, attachTokens.cellLabelColor, attachTokens.cellTitleColor, attachTokens.cellSubtitleColor, attachTokens.cellBackgroundColor, attachTokens.iconButtonCancelColor, attachTokens.iconButtonCancelBackgroundColor, attachTokens.iconButtonCancelLoadingBackgroundColor, attachTokens.iconButtonCancelBackgroundColor, attachTokens.iconButtonCancelColorHover, attachTokens.iconButtonCancelBackgroundColorHover, attachTokens.iconButtonCancelColorActive, attachTokens.iconButtonCancelBackgroundColorActive, attachTokens.iconButtonCancelDisabledOpacity, attachTokens.iconButtonCancelFocusColor, attachTokens.moreIconColor),
             dark: css([
                 "",
                 ":var(--on-dark-text-primary);",
@@ -355,8 +364,9 @@ export var config = {
                 ":var(--text-secondary-active);",
                 ":var(--surface-clear);",
                 ":0.4;",
-                ":var(--surface-accent);"
-            ], attachTokens.buttonColor, attachTokens.buttonValueColor, attachTokens.buttonBackgroundColor, attachTokens.buttonLoadingBackgroundColor, attachTokens.buttonBackgroundColor, attachTokens.buttonColorHover, attachTokens.buttonBackgroundColorHover, attachTokens.buttonColorActive, attachTokens.buttonBackgroundColorActive, attachTokens.buttonDisabledOpacity, attachTokens.buttonFocusColor, attachTokens.cellColor, attachTokens.cellLabelColor, attachTokens.cellTitleColor, attachTokens.cellSubtitleColor, attachTokens.cellBackgroundColor, attachTokens.iconButtonColor, attachTokens.iconButtonBackgroundColor, attachTokens.iconButtonLoadingBackgroundColor, attachTokens.iconButtonBackgroundColor, attachTokens.iconButtonColorHover, attachTokens.iconButtonBackgroundColorHover, attachTokens.iconButtonColorActive, attachTokens.iconButtonBackgroundColorActive, attachTokens.iconButtonDisabledOpacity, attachTokens.iconButtonFocusColor, attachTokens.iconButtonCancelColor, attachTokens.iconButtonCancelBackgroundColor, attachTokens.iconButtonCancelLoadingBackgroundColor, attachTokens.iconButtonCancelBackgroundColor, attachTokens.iconButtonCancelColorHover, attachTokens.iconButtonCancelBackgroundColorHover, attachTokens.iconButtonCancelColorActive, attachTokens.iconButtonCancelBackgroundColorActive, attachTokens.iconButtonCancelDisabledOpacity, attachTokens.iconButtonCancelFocusColor),
+                ":var(--surface-accent);",
+                ":var(--text-primary);"
+            ], attachTokens.buttonColor, attachTokens.buttonValueColor, attachTokens.buttonBackgroundColor, attachTokens.buttonLoadingBackgroundColor, attachTokens.buttonBackgroundColor, attachTokens.buttonColorHover, attachTokens.buttonBackgroundColorHover, attachTokens.buttonColorActive, attachTokens.buttonBackgroundColorActive, attachTokens.buttonDisabledOpacity, attachTokens.buttonFocusColor, attachTokens.cellColor, attachTokens.cellLabelColor, attachTokens.cellTitleColor, attachTokens.cellSubtitleColor, attachTokens.cellBackgroundColor, attachTokens.iconButtonColor, attachTokens.iconButtonBackgroundColor, attachTokens.iconButtonLoadingBackgroundColor, attachTokens.iconButtonBackgroundColor, attachTokens.iconButtonColorHover, attachTokens.iconButtonBackgroundColorHover, attachTokens.iconButtonColorActive, attachTokens.iconButtonBackgroundColorActive, attachTokens.iconButtonDisabledOpacity, attachTokens.iconButtonFocusColor, attachTokens.iconButtonCancelColor, attachTokens.iconButtonCancelBackgroundColor, attachTokens.iconButtonCancelLoadingBackgroundColor, attachTokens.iconButtonCancelBackgroundColor, attachTokens.iconButtonCancelColorHover, attachTokens.iconButtonCancelBackgroundColorHover, attachTokens.iconButtonCancelColorActive, attachTokens.iconButtonCancelBackgroundColorActive, attachTokens.iconButtonCancelDisabledOpacity, attachTokens.iconButtonCancelFocusColor, attachTokens.moreIconColor),
             black: css([
                 "",
                 ":var(--on-dark-text-primary);",
@@ -394,8 +404,9 @@ export var config = {
                 ":var(--text-secondary-active);",
                 ":var(--surface-clear);",
                 ":0.4;",
-                ":var(--surface-accent);"
-            ], attachTokens.buttonColor, attachTokens.buttonValueColor, attachTokens.buttonBackgroundColor, attachTokens.buttonLoadingBackgroundColor, attachTokens.buttonBackgroundColor, attachTokens.buttonColorHover, attachTokens.buttonBackgroundColorHover, attachTokens.buttonColorActive, attachTokens.buttonBackgroundColorActive, attachTokens.buttonDisabledOpacity, attachTokens.buttonFocusColor, attachTokens.cellColor, attachTokens.cellLabelColor, attachTokens.cellTitleColor, attachTokens.cellSubtitleColor, attachTokens.cellBackgroundColor, attachTokens.iconButtonColor, attachTokens.iconButtonBackgroundColor, attachTokens.iconButtonLoadingBackgroundColor, attachTokens.iconButtonBackgroundColor, attachTokens.iconButtonColorHover, attachTokens.iconButtonBackgroundColorHover, attachTokens.iconButtonColorActive, attachTokens.iconButtonBackgroundColorActive, attachTokens.iconButtonDisabledOpacity, attachTokens.iconButtonFocusColor, attachTokens.iconButtonCancelColor, attachTokens.iconButtonCancelBackgroundColor, attachTokens.iconButtonCancelLoadingBackgroundColor, attachTokens.iconButtonCancelBackgroundColor, attachTokens.iconButtonCancelColorHover, attachTokens.iconButtonCancelBackgroundColorHover, attachTokens.iconButtonCancelColorActive, attachTokens.iconButtonCancelBackgroundColorActive, attachTokens.iconButtonCancelDisabledOpacity, attachTokens.iconButtonCancelFocusColor),
+                ":var(--surface-accent);",
+                ":var(--text-primary);"
+            ], attachTokens.buttonColor, attachTokens.buttonValueColor, attachTokens.buttonBackgroundColor, attachTokens.buttonLoadingBackgroundColor, attachTokens.buttonBackgroundColor, attachTokens.buttonColorHover, attachTokens.buttonBackgroundColorHover, attachTokens.buttonColorActive, attachTokens.buttonBackgroundColorActive, attachTokens.buttonDisabledOpacity, attachTokens.buttonFocusColor, attachTokens.cellColor, attachTokens.cellLabelColor, attachTokens.cellTitleColor, attachTokens.cellSubtitleColor, attachTokens.cellBackgroundColor, attachTokens.iconButtonColor, attachTokens.iconButtonBackgroundColor, attachTokens.iconButtonLoadingBackgroundColor, attachTokens.iconButtonBackgroundColor, attachTokens.iconButtonColorHover, attachTokens.iconButtonBackgroundColorHover, attachTokens.iconButtonColorActive, attachTokens.iconButtonBackgroundColorActive, attachTokens.iconButtonDisabledOpacity, attachTokens.iconButtonFocusColor, attachTokens.iconButtonCancelColor, attachTokens.iconButtonCancelBackgroundColor, attachTokens.iconButtonCancelLoadingBackgroundColor, attachTokens.iconButtonCancelBackgroundColor, attachTokens.iconButtonCancelColorHover, attachTokens.iconButtonCancelBackgroundColorHover, attachTokens.iconButtonCancelColorActive, attachTokens.iconButtonCancelBackgroundColorActive, attachTokens.iconButtonCancelDisabledOpacity, attachTokens.iconButtonCancelFocusColor, attachTokens.moreIconColor),
             white: css([
                 "",
                 ":var(--on-light-text-primary);",
@@ -433,8 +444,9 @@ export var config = {
                 ":var(--text-secondary-active);",
                 ":var(--surface-clear);",
                 ":0.4;",
-                ":var(--surface-accent);"
-            ], attachTokens.buttonColor, attachTokens.buttonValueColor, attachTokens.buttonBackgroundColor, attachTokens.buttonLoadingBackgroundColor, attachTokens.buttonBackgroundColor, attachTokens.buttonColorHover, attachTokens.buttonBackgroundColorHover, attachTokens.buttonColorActive, attachTokens.buttonBackgroundColorActive, attachTokens.buttonDisabledOpacity, attachTokens.buttonFocusColor, attachTokens.cellColor, attachTokens.cellLabelColor, attachTokens.cellTitleColor, attachTokens.cellSubtitleColor, attachTokens.cellBackgroundColor, attachTokens.iconButtonColor, attachTokens.iconButtonBackgroundColor, attachTokens.iconButtonLoadingBackgroundColor, attachTokens.iconButtonBackgroundColor, attachTokens.iconButtonColorHover, attachTokens.iconButtonBackgroundColorHover, attachTokens.iconButtonColorActive, attachTokens.iconButtonBackgroundColorActive, attachTokens.iconButtonDisabledOpacity, attachTokens.iconButtonFocusColor, attachTokens.iconButtonCancelColor, attachTokens.iconButtonCancelBackgroundColor, attachTokens.iconButtonCancelLoadingBackgroundColor, attachTokens.iconButtonCancelBackgroundColor, attachTokens.iconButtonCancelColorHover, attachTokens.iconButtonCancelBackgroundColorHover, attachTokens.iconButtonCancelColorActive, attachTokens.iconButtonCancelBackgroundColorActive, attachTokens.iconButtonCancelDisabledOpacity, attachTokens.iconButtonCancelFocusColor)
+                ":var(--surface-accent);",
+                ":var(--text-primary);"
+            ], attachTokens.buttonColor, attachTokens.buttonValueColor, attachTokens.buttonBackgroundColor, attachTokens.buttonLoadingBackgroundColor, attachTokens.buttonBackgroundColor, attachTokens.buttonColorHover, attachTokens.buttonBackgroundColorHover, attachTokens.buttonColorActive, attachTokens.buttonBackgroundColorActive, attachTokens.buttonDisabledOpacity, attachTokens.buttonFocusColor, attachTokens.cellColor, attachTokens.cellLabelColor, attachTokens.cellTitleColor, attachTokens.cellSubtitleColor, attachTokens.cellBackgroundColor, attachTokens.iconButtonColor, attachTokens.iconButtonBackgroundColor, attachTokens.iconButtonLoadingBackgroundColor, attachTokens.iconButtonBackgroundColor, attachTokens.iconButtonColorHover, attachTokens.iconButtonBackgroundColorHover, attachTokens.iconButtonColorActive, attachTokens.iconButtonBackgroundColorActive, attachTokens.iconButtonDisabledOpacity, attachTokens.iconButtonFocusColor, attachTokens.iconButtonCancelColor, attachTokens.iconButtonCancelBackgroundColor, attachTokens.iconButtonCancelLoadingBackgroundColor, attachTokens.iconButtonCancelBackgroundColor, attachTokens.iconButtonCancelColorHover, attachTokens.iconButtonCancelBackgroundColorHover, attachTokens.iconButtonCancelColorActive, attachTokens.iconButtonCancelBackgroundColorActive, attachTokens.iconButtonCancelDisabledOpacity, attachTokens.iconButtonCancelFocusColor, attachTokens.moreIconColor)
         },
         helperTextView: {
             default: css([
@@ -453,6 +465,7 @@ export var config = {
                 ":0.5rem;",
                 ":1.625rem;",
                 ":3.5rem;",
+                ":2.125rem;",
                 ":3.5rem;",
                 ":12.5rem;",
                 ":1.5rem;",
@@ -516,14 +529,19 @@ export var config = {
                 ":var(--plasma-typo-body-xs-letter-spacing);",
                 ":var(--plasma-typo-body-xs-line-height);",
                 ":1rem;",
-                ":inherit;"
-            ], attachTokens.horizontalGap, attachTokens.verticalGap, attachTokens.verticalGapWithHelperText, attachTokens.filenameWrapperHeight, attachTokens.buttonHeight, attachTokens.buttonWidth, attachTokens.buttonPadding, attachTokens.buttonRadius, attachTokens.buttonFontFamily, attachTokens.buttonFontSize, attachTokens.buttonFontStyle, attachTokens.buttonFontWeight, attachTokens.buttonLetterSpacing, attachTokens.buttonLineHeight, attachTokens.buttonSpinnerSize, attachTokens.buttonSpinnerColor, attachTokens.buttonLeftContentMargin, attachTokens.buttonRightContentMargin, attachTokens.buttonValueMargin, attachTokens.cellWidth, attachTokens.cellPadding, attachTokens.cellPaddingLeftContent, attachTokens.cellPaddingContent, attachTokens.cellPaddingRightContent, attachTokens.cellTextboxGap, attachTokens.cellGap, attachTokens.cellLabelFontFamily, attachTokens.cellLabelFontSize, attachTokens.cellLabelFontStyle, attachTokens.cellLabelFontWeight, attachTokens.cellLabelLetterSpacing, attachTokens.cellLabelLineHeight, attachTokens.cellTitleFontFamily, attachTokens.cellTitleFontSize, attachTokens.cellTitleFontStyle, attachTokens.cellTitleFontWeight, attachTokens.cellTitleLetterSpacing, attachTokens.cellTitleLineHeight, attachTokens.cellSubtitleFontFamily, attachTokens.cellSubtitleFontSize, attachTokens.cellSubtitleFontStyle, attachTokens.cellSubtitleFontWeight, attachTokens.cellSubtitleLetterSpacing, attachTokens.cellSubtitleLineHeight, attachTokens.iconButtonHeight, attachTokens.iconButtonWidth, attachTokens.iconButtonPadding, attachTokens.iconButtonRadius, attachTokens.iconButtonFontFamily, attachTokens.iconButtonFontSize, attachTokens.iconButtonFontStyle, attachTokens.iconButtonFontWeight, attachTokens.iconButtonLetterSpacing, attachTokens.iconButtonLineHeight, attachTokens.iconButtonSpinnerSize, attachTokens.iconButtonSpinnerColor, attachTokens.iconButtonCancelHeight, attachTokens.iconButtonCancelWidth, attachTokens.iconButtonCancelPadding, attachTokens.iconButtonCancelRadius, attachTokens.iconButtonCancelFontFamily, attachTokens.iconButtonCancelFontSize, attachTokens.iconButtonCancelFontStyle, attachTokens.iconButtonCancelFontWeight, attachTokens.iconButtonCancelLetterSpacing, attachTokens.iconButtonCancelLineHeight, attachTokens.iconButtonCancelSpinnerSize, attachTokens.iconButtonCancelSpinnerColor),
+                ":inherit;",
+                ":0.75rem;",
+                ":0.875rem;",
+                ":0.125rem;",
+                ":1rem;"
+            ], attachTokens.horizontalGap, attachTokens.verticalGap, attachTokens.verticalGapWithHelperText, attachTokens.filenameWrapperHeight, attachTokens.filenameDropdownWrapperHeight, attachTokens.buttonHeight, attachTokens.buttonWidth, attachTokens.buttonPadding, attachTokens.buttonRadius, attachTokens.buttonFontFamily, attachTokens.buttonFontSize, attachTokens.buttonFontStyle, attachTokens.buttonFontWeight, attachTokens.buttonLetterSpacing, attachTokens.buttonLineHeight, attachTokens.buttonSpinnerSize, attachTokens.buttonSpinnerColor, attachTokens.buttonLeftContentMargin, attachTokens.buttonRightContentMargin, attachTokens.buttonValueMargin, attachTokens.cellWidth, attachTokens.cellPadding, attachTokens.cellPaddingLeftContent, attachTokens.cellPaddingContent, attachTokens.cellPaddingRightContent, attachTokens.cellTextboxGap, attachTokens.cellGap, attachTokens.cellLabelFontFamily, attachTokens.cellLabelFontSize, attachTokens.cellLabelFontStyle, attachTokens.cellLabelFontWeight, attachTokens.cellLabelLetterSpacing, attachTokens.cellLabelLineHeight, attachTokens.cellTitleFontFamily, attachTokens.cellTitleFontSize, attachTokens.cellTitleFontStyle, attachTokens.cellTitleFontWeight, attachTokens.cellTitleLetterSpacing, attachTokens.cellTitleLineHeight, attachTokens.cellSubtitleFontFamily, attachTokens.cellSubtitleFontSize, attachTokens.cellSubtitleFontStyle, attachTokens.cellSubtitleFontWeight, attachTokens.cellSubtitleLetterSpacing, attachTokens.cellSubtitleLineHeight, attachTokens.iconButtonHeight, attachTokens.iconButtonWidth, attachTokens.iconButtonPadding, attachTokens.iconButtonRadius, attachTokens.iconButtonFontFamily, attachTokens.iconButtonFontSize, attachTokens.iconButtonFontStyle, attachTokens.iconButtonFontWeight, attachTokens.iconButtonLetterSpacing, attachTokens.iconButtonLineHeight, attachTokens.iconButtonSpinnerSize, attachTokens.iconButtonSpinnerColor, attachTokens.iconButtonCancelHeight, attachTokens.iconButtonCancelWidth, attachTokens.iconButtonCancelPadding, attachTokens.iconButtonCancelRadius, attachTokens.iconButtonCancelFontFamily, attachTokens.iconButtonCancelFontSize, attachTokens.iconButtonCancelFontStyle, attachTokens.iconButtonCancelFontWeight, attachTokens.iconButtonCancelLetterSpacing, attachTokens.iconButtonCancelLineHeight, attachTokens.iconButtonCancelSpinnerSize, attachTokens.iconButtonCancelSpinnerColor, attachTokens.moreIconPadding, attachTokens.dropdownBorderRadius, attachTokens.dropdownPadding, attachTokens.dropdownItemPadding),
             m: css([
                 "",
                 ":1.25rem;",
                 ":0.5rem;",
                 ":1.625rem;",
                 ":3rem;",
+                ":2rem;",
                 ":3rem;",
                 ":11.25rem;",
                 ":1.25rem;",
@@ -587,14 +605,19 @@ export var config = {
                 ":var(--plasma-typo-body-xs-letter-spacing);",
                 ":var(--plasma-typo-body-xs-line-height);",
                 ":1rem;",
-                ":inherit;"
-            ], attachTokens.horizontalGap, attachTokens.verticalGap, attachTokens.verticalGapWithHelperText, attachTokens.filenameWrapperHeight, attachTokens.buttonHeight, attachTokens.buttonWidth, attachTokens.buttonPadding, attachTokens.buttonRadius, attachTokens.buttonFontFamily, attachTokens.buttonFontSize, attachTokens.buttonFontStyle, attachTokens.buttonFontWeight, attachTokens.buttonLetterSpacing, attachTokens.buttonLineHeight, attachTokens.buttonSpinnerSize, attachTokens.buttonSpinnerColor, attachTokens.buttonLeftContentMargin, attachTokens.buttonRightContentMargin, attachTokens.buttonValueMargin, attachTokens.cellWidth, attachTokens.cellPadding, attachTokens.cellPaddingLeftContent, attachTokens.cellPaddingContent, attachTokens.cellPaddingRightContent, attachTokens.cellTextboxGap, attachTokens.cellGap, attachTokens.cellLabelFontFamily, attachTokens.cellLabelFontSize, attachTokens.cellLabelFontStyle, attachTokens.cellLabelFontWeight, attachTokens.cellLabelLetterSpacing, attachTokens.cellLabelLineHeight, attachTokens.cellTitleFontFamily, attachTokens.cellTitleFontSize, attachTokens.cellTitleFontStyle, attachTokens.cellTitleFontWeight, attachTokens.cellTitleLetterSpacing, attachTokens.cellTitleLineHeight, attachTokens.cellSubtitleFontFamily, attachTokens.cellSubtitleFontSize, attachTokens.cellSubtitleFontStyle, attachTokens.cellSubtitleFontWeight, attachTokens.cellSubtitleLetterSpacing, attachTokens.cellSubtitleLineHeight, attachTokens.iconButtonHeight, attachTokens.iconButtonWidth, attachTokens.iconButtonPadding, attachTokens.iconButtonRadius, attachTokens.iconButtonFontFamily, attachTokens.iconButtonFontSize, attachTokens.iconButtonFontStyle, attachTokens.iconButtonFontWeight, attachTokens.iconButtonLetterSpacing, attachTokens.iconButtonLineHeight, attachTokens.iconButtonSpinnerSize, attachTokens.iconButtonSpinnerColor, attachTokens.iconButtonCancelHeight, attachTokens.iconButtonCancelWidth, attachTokens.iconButtonCancelPadding, attachTokens.iconButtonCancelRadius, attachTokens.iconButtonCancelFontFamily, attachTokens.iconButtonCancelFontSize, attachTokens.iconButtonCancelFontStyle, attachTokens.iconButtonCancelFontWeight, attachTokens.iconButtonCancelLetterSpacing, attachTokens.iconButtonCancelLineHeight, attachTokens.iconButtonCancelSpinnerSize, attachTokens.iconButtonCancelSpinnerColor),
+                ":inherit;",
+                ":0.5rem;",
+                ":0.75rem;",
+                ":0.125rem;",
+                ":0.5rem 0.875rem;"
+            ], attachTokens.horizontalGap, attachTokens.verticalGap, attachTokens.verticalGapWithHelperText, attachTokens.filenameWrapperHeight, attachTokens.filenameDropdownWrapperHeight, attachTokens.buttonHeight, attachTokens.buttonWidth, attachTokens.buttonPadding, attachTokens.buttonRadius, attachTokens.buttonFontFamily, attachTokens.buttonFontSize, attachTokens.buttonFontStyle, attachTokens.buttonFontWeight, attachTokens.buttonLetterSpacing, attachTokens.buttonLineHeight, attachTokens.buttonSpinnerSize, attachTokens.buttonSpinnerColor, attachTokens.buttonLeftContentMargin, attachTokens.buttonRightContentMargin, attachTokens.buttonValueMargin, attachTokens.cellWidth, attachTokens.cellPadding, attachTokens.cellPaddingLeftContent, attachTokens.cellPaddingContent, attachTokens.cellPaddingRightContent, attachTokens.cellTextboxGap, attachTokens.cellGap, attachTokens.cellLabelFontFamily, attachTokens.cellLabelFontSize, attachTokens.cellLabelFontStyle, attachTokens.cellLabelFontWeight, attachTokens.cellLabelLetterSpacing, attachTokens.cellLabelLineHeight, attachTokens.cellTitleFontFamily, attachTokens.cellTitleFontSize, attachTokens.cellTitleFontStyle, attachTokens.cellTitleFontWeight, attachTokens.cellTitleLetterSpacing, attachTokens.cellTitleLineHeight, attachTokens.cellSubtitleFontFamily, attachTokens.cellSubtitleFontSize, attachTokens.cellSubtitleFontStyle, attachTokens.cellSubtitleFontWeight, attachTokens.cellSubtitleLetterSpacing, attachTokens.cellSubtitleLineHeight, attachTokens.iconButtonHeight, attachTokens.iconButtonWidth, attachTokens.iconButtonPadding, attachTokens.iconButtonRadius, attachTokens.iconButtonFontFamily, attachTokens.iconButtonFontSize, attachTokens.iconButtonFontStyle, attachTokens.iconButtonFontWeight, attachTokens.iconButtonLetterSpacing, attachTokens.iconButtonLineHeight, attachTokens.iconButtonSpinnerSize, attachTokens.iconButtonSpinnerColor, attachTokens.iconButtonCancelHeight, attachTokens.iconButtonCancelWidth, attachTokens.iconButtonCancelPadding, attachTokens.iconButtonCancelRadius, attachTokens.iconButtonCancelFontFamily, attachTokens.iconButtonCancelFontSize, attachTokens.iconButtonCancelFontStyle, attachTokens.iconButtonCancelFontWeight, attachTokens.iconButtonCancelLetterSpacing, attachTokens.iconButtonCancelLineHeight, attachTokens.iconButtonCancelSpinnerSize, attachTokens.iconButtonCancelSpinnerColor, attachTokens.moreIconPadding, attachTokens.dropdownBorderRadius, attachTokens.dropdownPadding, attachTokens.dropdownItemPadding),
             s: css([
                 "",
                 ":1rem;",
                 ":0.375rem;",
                 ":1.5rem;",
                 ":2.5rem;",
+                ":2rem;",
                 ":2.5rem;",
                 ":11.25rem;",
                 ":1rem;",
@@ -658,8 +681,12 @@ export var config = {
                 ":var(--plasma-typo-body-xs-letter-spacing);",
                 ":var(--plasma-typo-body-xs-line-height);",
                 ":1rem;",
-                ":inherit;"
-            ], attachTokens.horizontalGap, attachTokens.verticalGap, attachTokens.verticalGapWithHelperText, attachTokens.filenameWrapperHeight, attachTokens.buttonHeight, attachTokens.buttonWidth, attachTokens.buttonPadding, attachTokens.buttonRadius, attachTokens.buttonFontFamily, attachTokens.buttonFontSize, attachTokens.buttonFontStyle, attachTokens.buttonFontWeight, attachTokens.buttonLetterSpacing, attachTokens.buttonLineHeight, attachTokens.buttonSpinnerSize, attachTokens.buttonSpinnerColor, attachTokens.buttonLeftContentMargin, attachTokens.buttonRightContentMargin, attachTokens.buttonValueMargin, attachTokens.cellWidth, attachTokens.cellPadding, attachTokens.cellPaddingLeftContent, attachTokens.cellPaddingContent, attachTokens.cellPaddingRightContent, attachTokens.cellTextboxGap, attachTokens.cellGap, attachTokens.cellLabelFontFamily, attachTokens.cellLabelFontSize, attachTokens.cellLabelFontStyle, attachTokens.cellLabelFontWeight, attachTokens.cellLabelLetterSpacing, attachTokens.cellLabelLineHeight, attachTokens.cellTitleFontFamily, attachTokens.cellTitleFontSize, attachTokens.cellTitleFontStyle, attachTokens.cellTitleFontWeight, attachTokens.cellTitleLetterSpacing, attachTokens.cellTitleLineHeight, attachTokens.cellSubtitleFontFamily, attachTokens.cellSubtitleFontSize, attachTokens.cellSubtitleFontStyle, attachTokens.cellSubtitleFontWeight, attachTokens.cellSubtitleLetterSpacing, attachTokens.cellSubtitleLineHeight, attachTokens.iconButtonHeight, attachTokens.iconButtonWidth, attachTokens.iconButtonPadding, attachTokens.iconButtonRadius, attachTokens.iconButtonFontFamily, attachTokens.iconButtonFontSize, attachTokens.iconButtonFontStyle, attachTokens.iconButtonFontWeight, attachTokens.iconButtonLetterSpacing, attachTokens.iconButtonLineHeight, attachTokens.iconButtonSpinnerSize, attachTokens.iconButtonSpinnerColor, attachTokens.iconButtonCancelHeight, attachTokens.iconButtonCancelWidth, attachTokens.iconButtonCancelPadding, attachTokens.iconButtonCancelRadius, attachTokens.iconButtonCancelFontFamily, attachTokens.iconButtonCancelFontSize, attachTokens.iconButtonCancelFontStyle, attachTokens.iconButtonCancelFontWeight, attachTokens.iconButtonCancelLetterSpacing, attachTokens.iconButtonCancelLineHeight, attachTokens.iconButtonCancelSpinnerSize, attachTokens.iconButtonCancelSpinnerColor),
+                ":inherit;",
+                ":0.25rem;",
+                ":0.625rem;",
+                ":0.125rem;",
+                ":0.25rem 0.75rem;"
+            ], attachTokens.horizontalGap, attachTokens.verticalGap, attachTokens.verticalGapWithHelperText, attachTokens.filenameWrapperHeight, attachTokens.filenameDropdownWrapperHeight, attachTokens.buttonHeight, attachTokens.buttonWidth, attachTokens.buttonPadding, attachTokens.buttonRadius, attachTokens.buttonFontFamily, attachTokens.buttonFontSize, attachTokens.buttonFontStyle, attachTokens.buttonFontWeight, attachTokens.buttonLetterSpacing, attachTokens.buttonLineHeight, attachTokens.buttonSpinnerSize, attachTokens.buttonSpinnerColor, attachTokens.buttonLeftContentMargin, attachTokens.buttonRightContentMargin, attachTokens.buttonValueMargin, attachTokens.cellWidth, attachTokens.cellPadding, attachTokens.cellPaddingLeftContent, attachTokens.cellPaddingContent, attachTokens.cellPaddingRightContent, attachTokens.cellTextboxGap, attachTokens.cellGap, attachTokens.cellLabelFontFamily, attachTokens.cellLabelFontSize, attachTokens.cellLabelFontStyle, attachTokens.cellLabelFontWeight, attachTokens.cellLabelLetterSpacing, attachTokens.cellLabelLineHeight, attachTokens.cellTitleFontFamily, attachTokens.cellTitleFontSize, attachTokens.cellTitleFontStyle, attachTokens.cellTitleFontWeight, attachTokens.cellTitleLetterSpacing, attachTokens.cellTitleLineHeight, attachTokens.cellSubtitleFontFamily, attachTokens.cellSubtitleFontSize, attachTokens.cellSubtitleFontStyle, attachTokens.cellSubtitleFontWeight, attachTokens.cellSubtitleLetterSpacing, attachTokens.cellSubtitleLineHeight, attachTokens.iconButtonHeight, attachTokens.iconButtonWidth, attachTokens.iconButtonPadding, attachTokens.iconButtonRadius, attachTokens.iconButtonFontFamily, attachTokens.iconButtonFontSize, attachTokens.iconButtonFontStyle, attachTokens.iconButtonFontWeight, attachTokens.iconButtonLetterSpacing, attachTokens.iconButtonLineHeight, attachTokens.iconButtonSpinnerSize, attachTokens.iconButtonSpinnerColor, attachTokens.iconButtonCancelHeight, attachTokens.iconButtonCancelWidth, attachTokens.iconButtonCancelPadding, attachTokens.iconButtonCancelRadius, attachTokens.iconButtonCancelFontFamily, attachTokens.iconButtonCancelFontSize, attachTokens.iconButtonCancelFontStyle, attachTokens.iconButtonCancelFontWeight, attachTokens.iconButtonCancelLetterSpacing, attachTokens.iconButtonCancelLineHeight, attachTokens.iconButtonCancelSpinnerSize, attachTokens.iconButtonCancelSpinnerColor, attachTokens.moreIconPadding, attachTokens.dropdownBorderRadius, attachTokens.dropdownPadding, attachTokens.dropdownItemPadding),
             xs: css([
                 "",
                 ":0.75rem;",
@@ -667,6 +694,7 @@ export var config = {
                 ":1.375rem;",
                 ":2rem;",
                 ":2rem;",
+                ":2rem;",
                 ":10rem;",
                 ":0.75rem;",
                 ":0.5rem;",
@@ -729,8 +757,12 @@ export var config = {
                 ":var(--plasma-typo-body-xs-letter-spacing);",
                 ":var(--plasma-typo-body-xs-line-height);",
                 ":1rem;",
-                ":inherit;"
-            ], attachTokens.horizontalGap, attachTokens.verticalGap, attachTokens.verticalGapWithHelperText, attachTokens.filenameWrapperHeight, attachTokens.buttonHeight, attachTokens.buttonWidth, attachTokens.buttonPadding, attachTokens.buttonRadius, attachTokens.buttonFontFamily, attachTokens.buttonFontSize, attachTokens.buttonFontStyle, attachTokens.buttonFontWeight, attachTokens.buttonLetterSpacing, attachTokens.buttonLineHeight, attachTokens.buttonSpinnerSize, attachTokens.buttonSpinnerColor, attachTokens.buttonLeftContentMargin, attachTokens.buttonRightContentMargin, attachTokens.buttonValueMargin, attachTokens.cellWidth, attachTokens.cellPadding, attachTokens.cellPaddingLeftContent, attachTokens.cellPaddingContent, attachTokens.cellPaddingRightContent, attachTokens.cellTextboxGap, attachTokens.cellGap, attachTokens.cellLabelFontFamily, attachTokens.cellLabelFontSize, attachTokens.cellLabelFontStyle, attachTokens.cellLabelFontWeight, attachTokens.cellLabelLetterSpacing, attachTokens.cellLabelLineHeight, attachTokens.cellTitleFontFamily, attachTokens.cellTitleFontSize, attachTokens.cellTitleFontStyle, attachTokens.cellTitleFontWeight, attachTokens.cellTitleLetterSpacing, attachTokens.cellTitleLineHeight, attachTokens.cellSubtitleFontFamily, attachTokens.cellSubtitleFontSize, attachTokens.cellSubtitleFontStyle, attachTokens.cellSubtitleFontWeight, attachTokens.cellSubtitleLetterSpacing, attachTokens.cellSubtitleLineHeight, attachTokens.iconButtonHeight, attachTokens.iconButtonWidth, attachTokens.iconButtonPadding, attachTokens.iconButtonRadius, attachTokens.iconButtonFontFamily, attachTokens.iconButtonFontSize, attachTokens.iconButtonFontStyle, attachTokens.iconButtonFontWeight, attachTokens.iconButtonLetterSpacing, attachTokens.iconButtonLineHeight, attachTokens.iconButtonSpinnerSize, attachTokens.iconButtonSpinnerColor, attachTokens.iconButtonCancelHeight, attachTokens.iconButtonCancelWidth, attachTokens.iconButtonCancelPadding, attachTokens.iconButtonCancelRadius, attachTokens.iconButtonCancelFontFamily, attachTokens.iconButtonCancelFontSize, attachTokens.iconButtonCancelFontStyle, attachTokens.iconButtonCancelFontWeight, attachTokens.iconButtonCancelLetterSpacing, attachTokens.iconButtonCancelLineHeight, attachTokens.iconButtonCancelSpinnerSize, attachTokens.iconButtonCancelSpinnerColor)
+                ":inherit;",
+                ":0.25rem;",
+                ":0.5rem;",
+                ":0.125rem;",
+                ":0.125rem 0.5rem;"
+            ], attachTokens.horizontalGap, attachTokens.verticalGap, attachTokens.verticalGapWithHelperText, attachTokens.filenameWrapperHeight, attachTokens.filenameDropdownWrapperHeight, attachTokens.buttonHeight, attachTokens.buttonWidth, attachTokens.buttonPadding, attachTokens.buttonRadius, attachTokens.buttonFontFamily, attachTokens.buttonFontSize, attachTokens.buttonFontStyle, attachTokens.buttonFontWeight, attachTokens.buttonLetterSpacing, attachTokens.buttonLineHeight, attachTokens.buttonSpinnerSize, attachTokens.buttonSpinnerColor, attachTokens.buttonLeftContentMargin, attachTokens.buttonRightContentMargin, attachTokens.buttonValueMargin, attachTokens.cellWidth, attachTokens.cellPadding, attachTokens.cellPaddingLeftContent, attachTokens.cellPaddingContent, attachTokens.cellPaddingRightContent, attachTokens.cellTextboxGap, attachTokens.cellGap, attachTokens.cellLabelFontFamily, attachTokens.cellLabelFontSize, attachTokens.cellLabelFontStyle, attachTokens.cellLabelFontWeight, attachTokens.cellLabelLetterSpacing, attachTokens.cellLabelLineHeight, attachTokens.cellTitleFontFamily, attachTokens.cellTitleFontSize, attachTokens.cellTitleFontStyle, attachTokens.cellTitleFontWeight, attachTokens.cellTitleLetterSpacing, attachTokens.cellTitleLineHeight, attachTokens.cellSubtitleFontFamily, attachTokens.cellSubtitleFontSize, attachTokens.cellSubtitleFontStyle, attachTokens.cellSubtitleFontWeight, attachTokens.cellSubtitleLetterSpacing, attachTokens.cellSubtitleLineHeight, attachTokens.iconButtonHeight, attachTokens.iconButtonWidth, attachTokens.iconButtonPadding, attachTokens.iconButtonRadius, attachTokens.iconButtonFontFamily, attachTokens.iconButtonFontSize, attachTokens.iconButtonFontStyle, attachTokens.iconButtonFontWeight, attachTokens.iconButtonLetterSpacing, attachTokens.iconButtonLineHeight, attachTokens.iconButtonSpinnerSize, attachTokens.iconButtonSpinnerColor, attachTokens.iconButtonCancelHeight, attachTokens.iconButtonCancelWidth, attachTokens.iconButtonCancelPadding, attachTokens.iconButtonCancelRadius, attachTokens.iconButtonCancelFontFamily, attachTokens.iconButtonCancelFontSize, attachTokens.iconButtonCancelFontStyle, attachTokens.iconButtonCancelFontWeight, attachTokens.iconButtonCancelLetterSpacing, attachTokens.iconButtonCancelLineHeight, attachTokens.iconButtonCancelSpinnerSize, attachTokens.iconButtonCancelSpinnerColor, attachTokens.moreIconPadding, attachTokens.dropdownBorderRadius, attachTokens.dropdownPadding, attachTokens.dropdownItemPadding)
         }
     }
 };

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

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

package/types/components/Attach/Attach.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Attach.d.ts","sourceRoot":"","sources":["../../../src/components/Attach/Attach.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAG5D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAKxC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAmB7C,eAAO,MAAM,UAAU,SAAU,SAAS,CAAC,cAAc,EAAE,WAAW,CAAC,uFAwIjE,CAAC;AAEP,eAAO,MAAM,YAAY;;;mBA1IQ,SAAS,CAAC,cAAc,EAAE,WAAW,CAAC;;;;;;;;;;;;;;;;;;CA+JtE,CAAC"}
+{"version":3,"file":"Attach.d.ts","sourceRoot":"","sources":["../../../src/components/Attach/Attach.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmE,MAAM,OAAO,CAAC;AAGxF,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,OAAO,EAAE,WAAW,EAAY,MAAM,gBAAgB,CAAC;AAUvD,eAAO,MAAM,UAAU,SAAU,SAAS,CAAC,cAAc,EAAE,WAAW,CAAC,uFAqTjE,CAAC;AAEP,eAAO,MAAM,YAAY;;;mBAvTQ,SAAS,CAAC,cAAc,EAAE,WAAW,CAAC;;;;;;;;;;;;;;;;;;CA4UtE,CAAC"}

package/types/components/Attach/Attach.styles.d.ts

@@ -2,7 +2,14 @@ export declare const base: import("@linaria/core").LinariaClassName;
 export declare const StyledHiddenInput: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Record<never, unknown>>;
 export declare const StyledAttachButtonWrapper: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const StyledHelperText: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const FilenameWrapper: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const TruncatedFilenamePart: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
+export declare const FilenameWrapper: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    isInsideDropdown?: boolean;
+}>;
+export declare const FilesWrapper: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    applyOverflow?: boolean;
+}>;
+export declare const TruncatedFilenamePart: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & {
+    applyEllipsis: boolean;
+}>;
 export declare const FilenameExtensionPart: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
 //# sourceMappingURL=Attach.styles.d.ts.map

package/types/components/Attach/Attach.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Attach.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Attach/Attach.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI,0CAGhB,CAAC;AAEF,eAAO,MAAM,iBAAiB,8KAE7B,CAAC;AAEF,eAAO,MAAM,yBAAyB,qKAErC,CAAC;AAEF,eAAO,MAAM,gBAAgB,qKAG5B,CAAC;AAEF,eAAO,MAAM,eAAe,qKAK3B,CAAC;AAEF,eAAO,MAAM,qBAAqB,uKAEjC,CAAC;AAEF,eAAO,MAAM,qBAAqB,uKAAgB,CAAC"}
+{"version":3,"file":"Attach.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Attach/Attach.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,IAAI,0CAGhB,CAAC;AAEF,eAAO,MAAM,iBAAiB,8KAE7B,CAAC;AAEF,eAAO,MAAM,yBAAyB,qKAErC,CAAC;AAEF,eAAO,MAAM,gBAAgB,qKAG5B,CAAC;AAEF,eAAO,MAAM,eAAe;uBAAmC,OAAO;EAQrE,CAAC;AAEF,eAAO,MAAM,YAAY;oBAAgC,OAAO;EAyB/D,CAAC;AAEF,eAAO,MAAM,qBAAqB;mBAAgC,OAAO;EAIxE,CAAC;AAEF,eAAO,MAAM,qBAAqB,uKAAgB,CAAC"}