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

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

@@ -76,8 +76,11 @@ var config = {
                 ":var(--surface-clear);",
                 ":var(--text-primary-hover);",
                 ":var(--surface-clear);",
-                ":var(--surface-accent);"
-            ], _DatePicker.datePickerTokens.background, _DatePicker.datePickerTokens.backgroundError, _DatePicker.datePickerTokens.backgroundSuccess, _DatePicker.datePickerTokens.dividerColor, _DatePicker.datePickerTokens.labelColor, _DatePicker.datePickerTokens.leftHelperColor, _DatePicker.datePickerTokens.leftHelperColorError, _DatePicker.datePickerTokens.leftHelperColorSuccess, _DatePicker.datePickerTokens.textFieldColor, _DatePicker.datePickerTokens.textFieldPlaceholderColor, _DatePicker.datePickerTokens.textFieldCaretColor, _DatePicker.datePickerTokens.labelInnerFontFamily, _DatePicker.datePickerTokens.labelInnerFontSize, _DatePicker.datePickerTokens.labelInnerFontStyle, _DatePicker.datePickerTokens.labelInnerFontWeight, _DatePicker.datePickerTokens.labelInnerLetterSpacing, _DatePicker.datePickerTokens.labelInnerLineHeight, _DatePicker.datePickerTokens.indicatorColor, _DatePicker.datePickerTokens.textFieldBackgroundColor, _DatePicker.datePickerTokens.textFieldBackgroundColorFocus, _DatePicker.datePickerTokens.textFieldBackgroundErrorColor, _DatePicker.datePickerTokens.textFieldBackgroundErrorColorFocus, _DatePicker.datePickerTokens.textFieldBackgroundSuccessColor, _DatePicker.datePickerTokens.textFieldBackgroundSuccessColorFocus, _DatePicker.datePickerTokens.textFieldTextBeforeColor, _DatePicker.datePickerTokens.textFieldTextAfterColor, _DatePicker.datePickerTokens.focusColor, _DatePicker.datePickerTokens.textFieldPlaceholderColorFocus, _DatePicker.datePickerTokens.calendarShadow, _DatePicker.datePickerTokens.calendarSeparatorBackground, _DatePicker.datePickerTokens.calendarBackgroundColor, _DatePicker.datePickerTokens.calendarSelectedItemBackground, _DatePicker.datePickerTokens.calendarSelectedItemColor, _DatePicker.datePickerTokens.calendarSelectableItemBackgroundHover, _DatePicker.datePickerTokens.calendarCurrentItemBorderColor, _DatePicker.datePickerTokens.calendarCurrentItemBackgroundHover, _DatePicker.datePickerTokens.calendarCurrentItemColorHover, _DatePicker.datePickerTokens.calendarCurrentItemChildBackgroundHover, _DatePicker.datePickerTokens.calendarActiveItemBackground, _DatePicker.datePickerTokens.calendarActiveItemColor, _DatePicker.datePickerTokens.calendarHoveredItemBackground, _DatePicker.datePickerTokens.calendarHoveredItemColor, _DatePicker.datePickerTokens.calendarRangeBackground, _DatePicker.datePickerTokens.calendarOutlineFocusColor, _DatePicker.datePickerTokens.calendarContentPrimaryColor, _DatePicker.datePickerTokens.calendarContentPrimaryDisabledColor, _DatePicker.datePickerTokens.calendarHeaderArrowColor, _DatePicker.datePickerTokens.calendarContentPrimaryColor, _DatePicker.datePickerTokens.calendarContentSecondaryColor, _DatePicker.datePickerTokens.calendarContentSecondaryDisabledColor, _DatePicker.datePickerTokens.calendarDisabledOpacity, _DatePicker.datePickerTokens.iconButtonColor, _DatePicker.datePickerTokens.iconButtonBackgroundColor, _DatePicker.datePickerTokens.iconButtonColorHover, _DatePicker.datePickerTokens.iconButtonBackgroundColorHover, _DatePicker.datePickerTokens.iconButtonColorActive, _DatePicker.datePickerTokens.iconButtonBackgroundColorActive, _DatePicker.datePickerTokens.iconButtonFocusColor)
+                ":var(--surface-accent);",
+                ":var(--surface-solid-card-brightness);",
+                ":var(--shadow-down-hard-s);",
+                ":var(--text-primary);"
+            ], _DatePicker.datePickerTokens.background, _DatePicker.datePickerTokens.backgroundError, _DatePicker.datePickerTokens.backgroundSuccess, _DatePicker.datePickerTokens.dividerColor, _DatePicker.datePickerTokens.labelColor, _DatePicker.datePickerTokens.leftHelperColor, _DatePicker.datePickerTokens.leftHelperColorError, _DatePicker.datePickerTokens.leftHelperColorSuccess, _DatePicker.datePickerTokens.textFieldColor, _DatePicker.datePickerTokens.textFieldPlaceholderColor, _DatePicker.datePickerTokens.textFieldCaretColor, _DatePicker.datePickerTokens.labelInnerFontFamily, _DatePicker.datePickerTokens.labelInnerFontSize, _DatePicker.datePickerTokens.labelInnerFontStyle, _DatePicker.datePickerTokens.labelInnerFontWeight, _DatePicker.datePickerTokens.labelInnerLetterSpacing, _DatePicker.datePickerTokens.labelInnerLineHeight, _DatePicker.datePickerTokens.indicatorColor, _DatePicker.datePickerTokens.textFieldBackgroundColor, _DatePicker.datePickerTokens.textFieldBackgroundColorFocus, _DatePicker.datePickerTokens.textFieldBackgroundErrorColor, _DatePicker.datePickerTokens.textFieldBackgroundErrorColorFocus, _DatePicker.datePickerTokens.textFieldBackgroundSuccessColor, _DatePicker.datePickerTokens.textFieldBackgroundSuccessColorFocus, _DatePicker.datePickerTokens.textFieldTextBeforeColor, _DatePicker.datePickerTokens.textFieldTextAfterColor, _DatePicker.datePickerTokens.focusColor, _DatePicker.datePickerTokens.textFieldPlaceholderColorFocus, _DatePicker.datePickerTokens.calendarShadow, _DatePicker.datePickerTokens.calendarSeparatorBackground, _DatePicker.datePickerTokens.calendarBackgroundColor, _DatePicker.datePickerTokens.calendarSelectedItemBackground, _DatePicker.datePickerTokens.calendarSelectedItemColor, _DatePicker.datePickerTokens.calendarSelectableItemBackgroundHover, _DatePicker.datePickerTokens.calendarCurrentItemBorderColor, _DatePicker.datePickerTokens.calendarCurrentItemBackgroundHover, _DatePicker.datePickerTokens.calendarCurrentItemColorHover, _DatePicker.datePickerTokens.calendarCurrentItemChildBackgroundHover, _DatePicker.datePickerTokens.calendarActiveItemBackground, _DatePicker.datePickerTokens.calendarActiveItemColor, _DatePicker.datePickerTokens.calendarHoveredItemBackground, _DatePicker.datePickerTokens.calendarHoveredItemColor, _DatePicker.datePickerTokens.calendarRangeBackground, _DatePicker.datePickerTokens.calendarOutlineFocusColor, _DatePicker.datePickerTokens.calendarContentPrimaryColor, _DatePicker.datePickerTokens.calendarContentPrimaryDisabledColor, _DatePicker.datePickerTokens.calendarHeaderArrowColor, _DatePicker.datePickerTokens.calendarContentPrimaryColor, _DatePicker.datePickerTokens.calendarContentSecondaryColor, _DatePicker.datePickerTokens.calendarContentSecondaryDisabledColor, _DatePicker.datePickerTokens.calendarDisabledOpacity, _DatePicker.datePickerTokens.iconButtonColor, _DatePicker.datePickerTokens.iconButtonBackgroundColor, _DatePicker.datePickerTokens.iconButtonColorHover, _DatePicker.datePickerTokens.iconButtonBackgroundColorHover, _DatePicker.datePickerTokens.iconButtonColorActive, _DatePicker.datePickerTokens.iconButtonBackgroundColorActive, _DatePicker.datePickerTokens.iconButtonFocusColor, _DatePicker.datePickerTokens.tooltipBackgroundColor, _DatePicker.datePickerTokens.tooltipBoxShadow, _DatePicker.datePickerTokens.tooltipColor)
         },
         size: {
             l: (0, _styledcomponents.css)([
@@ -501,6 +504,52 @@ var config = {
                 ":0.5rem;"
             ], _DatePicker.datePickerTokens.width, _DatePicker.datePickerTokens.borderRadius, _DatePicker.datePickerTokens.dividerPadding, _DatePicker.datePickerTokens.dividerFontFamily, _DatePicker.datePickerTokens.dividerFontStyle, _DatePicker.datePickerTokens.dividerFontSize, _DatePicker.datePickerTokens.dividerFontWeight, _DatePicker.datePickerTokens.dividerLetterSpacing, _DatePicker.datePickerTokens.dividerLineHeight, _DatePicker.datePickerTokens.leftContentMargin, _DatePicker.datePickerTokens.rightContentMargin, _DatePicker.datePickerTokens.labelOffset, _DatePicker.datePickerTokens.labelInnerPadding, _DatePicker.datePickerTokens.contentLabelInnerPadding, _DatePicker.datePickerTokens.labelFontFamily, _DatePicker.datePickerTokens.labelFontStyle, _DatePicker.datePickerTokens.labelFontSize, _DatePicker.datePickerTokens.labelFontWeight, _DatePicker.datePickerTokens.labelLetterSpacing, _DatePicker.datePickerTokens.labelLineHeight, _DatePicker.datePickerTokens.indicatorSize, _DatePicker.datePickerTokens.indicatorSizeOuter, _DatePicker.datePickerTokens.indicatorPlacement, _DatePicker.datePickerTokens.indicatorOuterPlacement, _DatePicker.datePickerTokens.indicatorPlacementRight, _DatePicker.datePickerTokens.indicatorOuterPlacementRight, _DatePicker.datePickerTokens.textFieldHeight, _DatePicker.datePickerTokens.textFieldBorderRadius, _DatePicker.datePickerTokens.textFieldPadding, _DatePicker.datePickerTokens.textFieldFontFamily, _DatePicker.datePickerTokens.textFieldFontStyle, _DatePicker.datePickerTokens.textFieldFontSize, _DatePicker.datePickerTokens.textFieldFontWeight, _DatePicker.datePickerTokens.textFieldLetterSpacing, _DatePicker.datePickerTokens.textFieldLineHeight, _DatePicker.datePickerTokens.leftHelperOffset, _DatePicker.datePickerTokens.leftHelperFontFamily, _DatePicker.datePickerTokens.leftHelperFontStyle, _DatePicker.datePickerTokens.leftHelperFontSize, _DatePicker.datePickerTokens.leftHelperFontWeight, _DatePicker.datePickerTokens.leftHelperLetterSpacing, _DatePicker.datePickerTokens.leftHelperLineHeight, _DatePicker.datePickerTokens.textFieldLeftContentMargin, _DatePicker.datePickerTokens.textFieldRightContentMargin, _DatePicker.datePickerTokens.textFieldTextBeforeMargin, _DatePicker.datePickerTokens.textFieldTextAfterMargin, _DatePicker.datePickerTokens.calendarContainerWidth, _DatePicker.datePickerTokens.calendarContainerHeight, _DatePicker.datePickerTokens.calendarBorderRadius, _DatePicker.datePickerTokens.calendarYearsPadding, _DatePicker.datePickerTokens.calendarYearItemBorderRadius, _DatePicker.datePickerTokens.calendarYearFontFamily, _DatePicker.datePickerTokens.calendarYearFontSize, _DatePicker.datePickerTokens.calendarYearFontStyle, _DatePicker.datePickerTokens.calendarYearFontLetterSpacing, _DatePicker.datePickerTokens.calendarYearFontLineHeight, _DatePicker.datePickerTokens.calendarYearFontWeight, _DatePicker.datePickerTokens.calendarYearSelectedFontWeight, _DatePicker.datePickerTokens.calendarQuartersPadding, _DatePicker.datePickerTokens.calendarQuarterItemBorderRadius, _DatePicker.datePickerTokens.calendarQuarterFontFamily, _DatePicker.datePickerTokens.calendarQuarterFontSize, _DatePicker.datePickerTokens.calendarQuarterFontStyle, _DatePicker.datePickerTokens.calendarQuarterFontLetterSpacing, _DatePicker.datePickerTokens.calendarQuarterFontLineHeight, _DatePicker.datePickerTokens.calendarQuarterFontWeight, _DatePicker.datePickerTokens.calendarQuarterSelectedFontWeight, _DatePicker.datePickerTokens.calendarMonthsPadding, _DatePicker.datePickerTokens.calendarMonthItemBorderRadius, _DatePicker.datePickerTokens.calendarMonthFontFamily, _DatePicker.datePickerTokens.calendarMonthFontSize, _DatePicker.datePickerTokens.calendarMonthFontStyle, _DatePicker.datePickerTokens.calendarMonthFontLetterSpacing, _DatePicker.datePickerTokens.calendarMonthFontLineHeight, _DatePicker.datePickerTokens.calendarMonthFontWeight, _DatePicker.datePickerTokens.calendarMonthSelectedFontWeight, _DatePicker.datePickerTokens.calendarDaysPadding, _DatePicker.datePickerTokens.calendarDayItemBorderRadius, _DatePicker.datePickerTokens.calendarDayFontFamily, _DatePicker.datePickerTokens.calendarDayFontSize, _DatePicker.datePickerTokens.calendarDayFontStyle, _DatePicker.datePickerTokens.calendarDayFontLetterSpacing, _DatePicker.datePickerTokens.calendarDayFontLineHeight, _DatePicker.datePickerTokens.calendarDayFontWeight, _DatePicker.datePickerTokens.calendarDaySelectedFontWeight, _DatePicker.datePickerTokens.calendarCurrentItemBorderWidth, _DatePicker.datePickerTokens.calendarHeaderWrapperPadding, _DatePicker.datePickerTokens.calendarHeaderArrowGap, _DatePicker.datePickerTokens.calendarHeaderArrowCustomSize, _DatePicker.datePickerTokens.calendarHeaderPadding, _DatePicker.datePickerTokens.calendarHeaderDateGap, _DatePicker.datePickerTokens.calendarHeaderFontFamily, _DatePicker.datePickerTokens.calendarHeaderFontSize, _DatePicker.datePickerTokens.calendarHeaderFontStyle, _DatePicker.datePickerTokens.calendarHeaderFontLetterSpacing, _DatePicker.datePickerTokens.calendarHeaderFontLineHeight, _DatePicker.datePickerTokens.calendarHeaderFontWeight, _DatePicker.datePickerTokens.calendarHeaderFontWeightBold, _DatePicker.datePickerTokens.iconButtonHeight, _DatePicker.datePickerTokens.iconButtonWidth, _DatePicker.datePickerTokens.iconButtonPadding, _DatePicker.datePickerTokens.iconButtonRadius)
         },
+        eventTooltipSize: {
+            m: (0, _styledcomponents.css)([
+                "",
+                ":0.6875rem;",
+                ":0.875rem;",
+                ":0.6875rem;",
+                ":0.875rem;",
+                ":2.5rem;",
+                ":0.625rem;",
+                ":var(--plasma-typo-body-s-font-family);",
+                ":var(--plasma-typo-body-s-font-size);",
+                ":var(--plasma-typo-body-s-font-style);",
+                ":var(--plasma-typo-body-s-font-weight);",
+                ":var(--plasma-typo-body-s-letter-spacing);",
+                ":var(--plasma-typo-body-s-line-height);",
+                ":0.375rem;",
+                ":1.25rem;",
+                ":1.25rem;",
+                ':url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg==");',
+                ":0.5rem;",
+                ":0.625rem;",
+                ":var(--surface-solid-card-brightness);"
+            ], _DatePicker.datePickerTokens.tooltipPaddingTop, _DatePicker.datePickerTokens.tooltipPaddingRight, _DatePicker.datePickerTokens.tooltipPaddingBottom, _DatePicker.datePickerTokens.tooltipPaddingLeft, _DatePicker.datePickerTokens.tooltipMinHeight, _DatePicker.datePickerTokens.tooltipBorderRadius, _DatePicker.datePickerTokens.tooltipTextFontFamily, _DatePicker.datePickerTokens.tooltipTextFontSize, _DatePicker.datePickerTokens.tooltipTextFontStyle, _DatePicker.datePickerTokens.tooltipTextFontWeight, _DatePicker.datePickerTokens.tooltipTextFontLetterSpacing, _DatePicker.datePickerTokens.tooltipTextFontLineHeight, _DatePicker.datePickerTokens.tooltipContentLeftMargin, _DatePicker.datePickerTokens.tooltipArrowMaskWidth, _DatePicker.datePickerTokens.tooltipArrowMaskHeight, _DatePicker.datePickerTokens.tooltipArrowMaskImage, _DatePicker.datePickerTokens.tooltipArrowHeight, _DatePicker.datePickerTokens.tooltipArrowEdgeMargin, _DatePicker.datePickerTokens.tooltipArrowBackground),
+            s: (0, _styledcomponents.css)([
+                "",
+                ":0.5rem;",
+                ":0.75rem;",
+                ":0.5rem;",
+                ":0.75rem;",
+                ":2rem;",
+                ":0.5rem;",
+                ":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.25rem;",
+                ":1rem;",
+                ":1rem;",
+                ':url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+");',
+                ":0.375rem;",
+                ":0.5625rem;",
+                ":var(--surface-solid-card-brightness);"
+            ], _DatePicker.datePickerTokens.tooltipPaddingTop, _DatePicker.datePickerTokens.tooltipPaddingRight, _DatePicker.datePickerTokens.tooltipPaddingBottom, _DatePicker.datePickerTokens.tooltipPaddingLeft, _DatePicker.datePickerTokens.tooltipMinHeight, _DatePicker.datePickerTokens.tooltipBorderRadius, _DatePicker.datePickerTokens.tooltipTextFontFamily, _DatePicker.datePickerTokens.tooltipTextFontSize, _DatePicker.datePickerTokens.tooltipTextFontStyle, _DatePicker.datePickerTokens.tooltipTextFontWeight, _DatePicker.datePickerTokens.tooltipTextFontLetterSpacing, _DatePicker.datePickerTokens.tooltipTextFontLineHeight, _DatePicker.datePickerTokens.tooltipContentLeftMargin, _DatePicker.datePickerTokens.tooltipArrowMaskWidth, _DatePicker.datePickerTokens.tooltipArrowMaskHeight, _DatePicker.datePickerTokens.tooltipArrowMaskImage, _DatePicker.datePickerTokens.tooltipArrowHeight, _DatePicker.datePickerTokens.tooltipArrowEdgeMargin, _DatePicker.datePickerTokens.tooltipArrowBackground)
+        },
         disabled: {
             true: (0, _styledcomponents.css)([
                 "",

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

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

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

@@ -0,0 +1,103 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "config", {
+    enumerable: true,
+    get: function() {
+        return config;
+    }
+});
+var _styledcomponents = require("styled-components");
+var _TimePickerGrid = require("../../../components/TimePickerGrid");
+var config = {
+    defaults: {
+        view: 'default',
+        size: 'm'
+    },
+    variations: {
+        view: {
+            default: (0, _styledcomponents.css)([
+                "",
+                ":var(--surface-transparent-secondary);",
+                ":var(--surface-transparent-secondary);",
+                ":var(--surface-transparent-tertiary);",
+                ":var(--surface-transparent-primary);",
+                ":0.4;"
+            ], _TimePickerGrid.timePickerGridTokens.itemBackgroundHover, _TimePickerGrid.timePickerGridTokens.itemBackgroundActive, _TimePickerGrid.timePickerGridTokens.scrollbarColor, _TimePickerGrid.timePickerGridTokens.scrollbarTrackColor, _TimePickerGrid.timePickerGridTokens.disabledOpacity)
+        },
+        size: {
+            l: (0, _styledcomponents.css)([
+                "",
+                ":15rem;",
+                ":36.25rem;",
+                ":var(--plasma-typo-body-l-font-family);",
+                ":var(--plasma-typo-body-l-font-size);",
+                ":var(--plasma-typo-body-l-font-style);",
+                ":var(--plasma-typo-body-l-font-weight);",
+                ":var(--plasma-typo-body-l-letter-spacing);",
+                ":var(--plasma-typo-body-l-line-height);",
+                ":3.5rem;",
+                ":0.75rem;",
+                ":0rem;",
+                ":0.125rem;",
+                ":0.5rem;"
+            ], _TimePickerGrid.timePickerGridTokens.timePickerGridWidth, _TimePickerGrid.timePickerGridTokens.columnHeight, _TimePickerGrid.timePickerGridTokens.itemFontFamily, _TimePickerGrid.timePickerGridTokens.itemFontSize, _TimePickerGrid.timePickerGridTokens.itemFontStyle, _TimePickerGrid.timePickerGridTokens.itemFontWeight, _TimePickerGrid.timePickerGridTokens.itemLetterSpacing, _TimePickerGrid.timePickerGridTokens.itemLineHeight, _TimePickerGrid.timePickerGridTokens.itemHeight, _TimePickerGrid.timePickerGridTokens.itemBorderRadius, _TimePickerGrid.timePickerGridTokens.itemPadding, _TimePickerGrid.timePickerGridTokens.scrollbarWidth, _TimePickerGrid.timePickerGridTokens.scrollbarMargin),
+            m: (0, _styledcomponents.css)([
+                "",
+                ":15rem;",
+                ":31.25rem;",
+                ":var(--plasma-typo-body-m-font-family);",
+                ":var(--plasma-typo-body-m-font-size);",
+                ":var(--plasma-typo-body-m-font-style);",
+                ":var(--plasma-typo-body-m-font-weight);",
+                ":var(--plasma-typo-body-m-letter-spacing);",
+                ":var(--plasma-typo-body-m-line-height);",
+                ":3rem;",
+                ":0.625rem;",
+                ":0rem;",
+                ":0.125rem;",
+                ":0.375rem;"
+            ], _TimePickerGrid.timePickerGridTokens.timePickerGridWidth, _TimePickerGrid.timePickerGridTokens.columnHeight, _TimePickerGrid.timePickerGridTokens.itemFontFamily, _TimePickerGrid.timePickerGridTokens.itemFontSize, _TimePickerGrid.timePickerGridTokens.itemFontStyle, _TimePickerGrid.timePickerGridTokens.itemFontWeight, _TimePickerGrid.timePickerGridTokens.itemLetterSpacing, _TimePickerGrid.timePickerGridTokens.itemLineHeight, _TimePickerGrid.timePickerGridTokens.itemHeight, _TimePickerGrid.timePickerGridTokens.itemBorderRadius, _TimePickerGrid.timePickerGridTokens.itemPadding, _TimePickerGrid.timePickerGridTokens.scrollbarWidth, _TimePickerGrid.timePickerGridTokens.scrollbarMargin),
+            s: (0, _styledcomponents.css)([
+                "",
+                ":15rem;",
+                ":26.25rem;",
+                ":var(--plasma-typo-body-s-font-family);",
+                ":var(--plasma-typo-body-s-font-size);",
+                ":var(--plasma-typo-body-s-font-style);",
+                ":var(--plasma-typo-body-s-font-weight);",
+                ":var(--plasma-typo-body-s-letter-spacing);",
+                ":var(--plasma-typo-body-s-line-height);",
+                ":2.5rem;",
+                ":0.5rem;",
+                ":0rem;",
+                ":0.125rem;",
+                ":0.25rem;"
+            ], _TimePickerGrid.timePickerGridTokens.timePickerGridWidth, _TimePickerGrid.timePickerGridTokens.columnHeight, _TimePickerGrid.timePickerGridTokens.itemFontFamily, _TimePickerGrid.timePickerGridTokens.itemFontSize, _TimePickerGrid.timePickerGridTokens.itemFontStyle, _TimePickerGrid.timePickerGridTokens.itemFontWeight, _TimePickerGrid.timePickerGridTokens.itemLetterSpacing, _TimePickerGrid.timePickerGridTokens.itemLineHeight, _TimePickerGrid.timePickerGridTokens.itemHeight, _TimePickerGrid.timePickerGridTokens.itemBorderRadius, _TimePickerGrid.timePickerGridTokens.itemPadding, _TimePickerGrid.timePickerGridTokens.scrollbarWidth, _TimePickerGrid.timePickerGridTokens.scrollbarMargin),
+            xs: (0, _styledcomponents.css)([
+                "",
+                ":15rem;",
+                ":21.25rem;",
+                ":var(--plasma-typo-body-xs-font-family);",
+                ":var(--plasma-typo-body-xs-font-size);",
+                ":var(--plasma-typo-body-xs-font-style);",
+                ":var(--plasma-typo-body-xs-font-weight);",
+                ":var(--plasma-typo-body-xs-letter-spacing);",
+                ":var(--plasma-typo-body-xs-line-height);",
+                ":2rem;",
+                ":0.375rem;",
+                ":0rem;",
+                ":0.125rem;",
+                ":0.25rem;",
+                ":0.4;"
+            ], _TimePickerGrid.timePickerGridTokens.timePickerGridWidth, _TimePickerGrid.timePickerGridTokens.columnHeight, _TimePickerGrid.timePickerGridTokens.itemFontFamily, _TimePickerGrid.timePickerGridTokens.itemFontSize, _TimePickerGrid.timePickerGridTokens.itemFontStyle, _TimePickerGrid.timePickerGridTokens.itemFontWeight, _TimePickerGrid.timePickerGridTokens.itemLetterSpacing, _TimePickerGrid.timePickerGridTokens.itemLineHeight, _TimePickerGrid.timePickerGridTokens.itemHeight, _TimePickerGrid.timePickerGridTokens.itemBorderRadius, _TimePickerGrid.timePickerGridTokens.itemPadding, _TimePickerGrid.timePickerGridTokens.scrollbarWidth, _TimePickerGrid.timePickerGridTokens.scrollbarMargin, _TimePickerGrid.timePickerGridTokens.disabledOpacity)
+        },
+        disabled: {
+            true: (0, _styledcomponents.css)([
+                "",
+                ":0.4;"
+            ], _TimePickerGrid.timePickerGridTokens.disabledOpacity)
+        }
+    }
+};

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

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

package/styled-components/cjs/types/MakeNever.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

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

@@ -61,6 +61,30 @@ function _object_spread(target) {
     }
     return target;
 }
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
 function _object_without_properties(source, excluded) {
     if (source == null) return {};
     var target = _object_without_properties_loose(source, excluded);
@@ -99,26 +123,26 @@ function _unsupported_iterable_to_array(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
 }
-import React, { forwardRef, useRef, useState } from "react";
+import React, { forwardRef, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { useForkRef } from "@salutejs/plasma-core";
 import { cx } from "../../utils";
-import { IconCloseCircleOutline } from "../_Icon";
 import { base as sizeCSS } from "./variations/_size/base";
 import { base as viewCSS } from "./variations/_view/base";
 import { base as helperTextViewCSS } from "./variations/_helperTextView/base";
-import { base, StyledHelperText, StyledHiddenInput, StyledAttachButtonWrapper, FilenameWrapper, TruncatedFilenamePart, FilenameExtensionPart } from "./Attach.styles";
-import { StyledCell } from "./ui/Cell/Cell";
-import { extractExtension, getFileIcon } from "./utils";
+import { base, StyledHelperText, StyledHiddenInput, StyledAttachButtonWrapper, FilesWrapper } from "./Attach.styles";
+import { getFilenameParts } from "./utils";
 import { classes } from "./Attach.tokens";
-import { AttachButton } from "./components/AttachButton";
-import { StyledIconButtonCancel } from "./ui/IconButton/IconButton.styles";
+import { AttachButton, HiddenWidthHelper } from "./components";
+import { CellUI, DropdownUI } from "./ui";
 export var attachRoot = function(Root) {
     return /*#__PURE__*/ forwardRef(function(props, outerRef) {
-        var _props_flow = props.flow, flow = _props_flow === void 0 ? 'auto' : _props_flow, _props_buttonType = props.buttonType, buttonType = _props_buttonType === void 0 ? 'button' : _props_buttonType, _props_hideButtonOnAttach = props.hideButtonOnAttach, hideButtonOnAttach = _props_hideButtonOnAttach === void 0 ? false : _props_hideButtonOnAttach, _props_hasAttachment = props.hasAttachment, hasAttachment = _props_hasAttachment === void 0 ? true : _props_hasAttachment, acceptedFileFormats = props.acceptedFileFormats, helperText = props.helperText, size = props.size, view = props.view, helperTextView = props.helperTextView, className = props.className, style = props.style, isLoading = props.isLoading, disabled = props.disabled, id = props.id, name = props.name, customIcon = props.customIcon, onClick = props.onClick, onChange = props.onChange, onClear = props.onClear, rest = _object_without_properties(props, [
+        var _props_flow = props.flow, flow = _props_flow === void 0 ? 'auto' : _props_flow, _props_buttonType = props.buttonType, buttonType = _props_buttonType === void 0 ? 'button' : _props_buttonType, _props_hideButtonOnAttach = props.hideButtonOnAttach, hideButtonOnAttach = _props_hideButtonOnAttach === void 0 ? false : _props_hideButtonOnAttach, _props_hasAttachment = props.hasAttachment, hasAttachment = _props_hasAttachment === void 0 ? true : _props_hasAttachment, multiple = props.multiple, dropdownOptions = props.dropdownOptions, acceptedFileFormats = props.acceptedFileFormats, helperText = props.helperText, size = props.size, view = props.view, helperTextView = props.helperTextView, className = props.className, style = props.style, isLoading = props.isLoading, disabled = props.disabled, id = props.id, name = props.name, customIcon = props.customIcon, onClick = props.onClick, onChange = props.onChange, onClear = props.onClear, rest = _object_without_properties(props, [
             "flow",
             "buttonType",
             "hideButtonOnAttach",
             "hasAttachment",
+            "multiple",
+            "dropdownOptions",
             "acceptedFileFormats",
             "helperText",
             "size",
@@ -138,17 +162,18 @@ export var attachRoot = function(Root) {
         var innerRef = useRef(null);
         var ref = useForkRef(outerRef, innerRef);
         var inputRef = useRef(null);
-        var cellRef = useRef(null);
         var buttonRef = useRef(null);
-        var _useState = _sliced_to_array(useState(''), 2), filename = _useState[0], setFilename = _useState[1];
+        var fileWrapperWidthRef = useRef(null);
+        var fileWrapperHelperRef = useRef(null);
+        var cellHelperRefs = useRef({});
+        var _useState = _sliced_to_array(useState({}), 2), filesInfo = _useState[0], setFilesInfo = _useState[1];
+        var _useState1 = _sliced_to_array(useState(false), 2), hasHiddenFiles = _useState1[0], setHasHiddenFiles = _useState1[1];
+        var filesLength = Object.keys(filesInfo).length;
         var horizontalClass = flow === 'horizontal' ? classes.horizontal : undefined;
         var verticalClass = flow === 'vertical' ? classes.vertical : undefined;
-        var withHelperTextClass = helperText ? classes.withHelperText : undefined;
         var autoClass = flow === 'auto' ? classes.auto : undefined;
+        var withHelperTextClass = helperText ? classes.withHelperText : undefined;
         var accept = acceptedFileFormats === null || acceptedFileFormats === void 0 ? void 0 : acceptedFileFormats.join(',');
-        var extension = extractExtension(filename);
-        var filenameWithoutExtension = filename.slice(0, -1 - ((extension === null || extension === void 0 ? void 0 : extension.length) || 0));
-        var cellContentLeft = customIcon || getFileIcon(extension, size);
         var handleClick = function(e) {
             if (!inputRef.current) {
                 return;
@@ -159,24 +184,121 @@ export var attachRoot = function(Root) {
             inputRef.current.click();
         };
         var handleChange = function(e) {
-            if (!e.target.files) {
+            var fileList = e.target.files;
+            if (!fileList || fileList.length === 0) {
                 return;
             }
             if (onChange) {
                 onChange(e);
             }
-            setFilename(e.target.files[0].name);
+            if (!hasAttachment) {
+                return;
+            }
+            var fileArray = Array.from(fileList);
+            var filesData = fileArray.reduce(function(acc, file, ind) {
+                var fileKey = "".concat(ind, "_").concat(file.name);
+                acc[fileKey] = getFilenameParts(file.name, size, customIcon);
+                return acc;
+            }, {});
+            cellHelperRefs.current = {};
+            setFilesInfo(filesData);
+            setHasHiddenFiles(false);
         };
-        var handleClear = function() {
+        var handleClear = function(fileKey) {
             if (!inputRef.current) {
                 return;
             }
             if (onClear) {
                 onClear();
             }
-            inputRef.current.value = '';
-            setFilename('');
+            setFilesInfo(function(prevFileInfo) {
+                var updatedFilesInfo = _object_spread({}, prevFileInfo);
+                delete updatedFilesInfo[fileKey];
+                return updatedFilesInfo;
+            });
+            delete cellHelperRefs.current[fileKey];
+            setHasHiddenFiles(false);
+        };
+        var getCellRef = function(element, key) {
+            if (element && (cellHelperRefs === null || cellHelperRefs === void 0 ? void 0 : cellHelperRefs.current)) {
+                cellHelperRefs.current[key] = element;
+            }
         };
+        var updateHiddenFiles = function() {
+            var newFilesInfo = _object_spread({}, filesInfo);
+            if (!multiple || Object.keys(filesInfo).length === 0) {
+                setHasHiddenFiles(false);
+                return;
+            }
+            if (flow !== 'horizontal') {
+                Object.keys(newFilesInfo).forEach(function(key) {
+                    newFilesInfo[key].isVisible = true;
+                });
+                setHasHiddenFiles(false);
+                setFilesInfo(newFilesInfo);
+                return;
+            }
+            if (!fileWrapperWidthRef.current || !fileWrapperHelperRef.current || !Object.keys(cellHelperRefs.current).length) {
+                return;
+            }
+            var fileWrapper = fileWrapperWidthRef.current;
+            var fileWrapperWidth = fileWrapper.clientWidth;
+            var _window_getComputedStyle_columnGap;
+            var fileWrapperGap = parseInt((_window_getComputedStyle_columnGap = window.getComputedStyle(fileWrapper).columnGap) !== null && _window_getComputedStyle_columnGap !== void 0 ? _window_getComputedStyle_columnGap : 0, 10);
+            var totalWidth = 0;
+            var firstHidden = Object.entries(cellHelperRefs.current).findIndex(function(param) {
+                var _param = _sliced_to_array(param, 2), _ = _param[0], cell = _param[1];
+                totalWidth += cell.clientWidth + fileWrapperGap;
+                if (totalWidth > fileWrapperWidth) {
+                    setHasHiddenFiles(true);
+                    return true;
+                }
+                return false;
+            });
+            var newKeys = Object.keys(newFilesInfo);
+            var filesInfoVisibleKeys = firstHidden >= 0 ? newKeys.slice(0, firstHidden) : newKeys;
+            var filesInfoHiddenKeys = firstHidden >= 0 ? newKeys.slice(firstHidden) : [];
+            filesInfoVisibleKeys.forEach(function(key) {
+                newFilesInfo[key].isVisible = true;
+            });
+            filesInfoHiddenKeys.forEach(function(key) {
+                newFilesInfo[key].isVisible = false;
+            });
+            setFilesInfo(newFilesInfo);
+        };
+        useLayoutEffect(function() {
+            updateHiddenFiles();
+        }, [
+            filesLength,
+            flow,
+            multiple
+        ]);
+        useEffect(function() {
+            if (flow !== 'horizontal' || !multiple) {
+                return;
+            }
+            var observer = new ResizeObserver(function() {
+                updateHiddenFiles();
+            });
+            if (innerRef.current) {
+                observer.observe(innerRef.current);
+            }
+            return function() {
+                return observer.disconnect();
+            };
+        }, [
+            filesLength,
+            flow,
+            multiple
+        ]);
+        var RootWrapper = function(param) {
+            var children = param.children;
+            return /*#__PURE__*/ React.createElement(Root, {
+                size: size,
+                view: view
+            }, children);
+        };
+        var _dropdownOptions_placement;
         return /*#__PURE__*/ React.createElement(Root, {
             className: cx(horizontalClass, verticalClass, autoClass, withHelperTextClass, className),
             style: style,
@@ -190,25 +312,65 @@ export var attachRoot = function(Root) {
             type: "file",
             id: id,
             name: name,
+            multiple: multiple,
             onChange: handleChange
-        }), (!hideButtonOnAttach || !filename) && /*#__PURE__*/ React.createElement(StyledAttachButtonWrapper, null, /*#__PURE__*/ React.createElement(AttachButton, _object_spread({
+        }), (!hideButtonOnAttach || !filesLength) && /*#__PURE__*/ React.createElement(StyledAttachButtonWrapper, null, /*#__PURE__*/ React.createElement(AttachButton, _object_spread({
             ref: buttonRef,
             buttonType: buttonType,
             isLoading: isLoading,
             disabled: disabled,
             onClick: handleClick
-        }, rest)), helperText && /*#__PURE__*/ React.createElement(StyledHelperText, null, helperText)), (hasAttachment || hideButtonOnAttach) && filename && /*#__PURE__*/ React.createElement(StyledCell, {
-            stretching: "fixed",
-            ref: cellRef,
+        }, rest)), helperText && /*#__PURE__*/ React.createElement(StyledHelperText, null, helperText)), (hasAttachment || hideButtonOnAttach) && Boolean(filesLength) && Object.values(filesInfo)[0].isVisible && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(FilesWrapper, {
+            className: cx(horizontalClass, verticalClass, autoClass),
+            applyOverflow: multiple && flow === 'horizontal'
+        }, Object.entries(filesInfo).map(function(param) {
+            var _param = _sliced_to_array(param, 2), key = _param[0], _param_ = _param[1], extension = _param_.extension, filenameWithoutExtension = _param_.filenameWithoutExtension, cellContentLeft = _param_.cellContentLeft, isVisible = _param_.isVisible;
+            if (!isVisible) {
+                return;
+            }
+            return /*#__PURE__*/ React.createElement(CellUI, {
+                key: key,
+                filenameWithoutExtension: filenameWithoutExtension,
+                extension: extension,
+                size: size,
+                cellContentLeft: cellContentLeft,
+                multiple: multiple,
+                flow: flow,
+                onClick: function() {
+                    return handleClear(key);
+                }
+            });
+        }))), (hasAttachment || hideButtonOnAttach) && hasHiddenFiles && /*#__PURE__*/ React.createElement(DropdownUI, _object_spread_props(_object_spread({
+            rootWrapper: RootWrapper,
             size: size,
-            contentLeft: cellContentLeft,
-            contentRight: /*#__PURE__*/ React.createElement(StyledIconButtonCancel, {
-                onClick: handleClear
-            }, /*#__PURE__*/ React.createElement(IconCloseCircleOutline, {
-                size: "xs",
-                color: "inherit"
-            }))
-        }, /*#__PURE__*/ React.createElement(FilenameWrapper, null, /*#__PURE__*/ React.createElement(TruncatedFilenamePart, null, filenameWithoutExtension.slice(0, -1)), /*#__PURE__*/ React.createElement(FilenameExtensionPart, null, filenameWithoutExtension.at(-1), ".", extension))));
+            filesInfo: filesInfo,
+            customIcon: customIcon,
+            handleClear: handleClear
+        }, dropdownOptions), {
+            placement: (_dropdownOptions_placement = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.placement) !== null && _dropdownOptions_placement !== void 0 ? _dropdownOptions_placement : 'bottom'
+        })), multiple && flow === 'horizontal' && /*#__PURE__*/ React.createElement(HiddenWidthHelper, {
+            ref: fileWrapperWidthRef,
+            hasHiddenFiles: hasHiddenFiles,
+            size: size
+        }), multiple && flow === 'horizontal' && (hasAttachment || hideButtonOnAttach) && Boolean(filesLength) && /*#__PURE__*/ React.createElement(FilesWrapper, {
+            ref: fileWrapperHelperRef,
+            className: cx(horizontalClass, classes.horizontalHidden)
+        }, Object.entries(filesInfo).map(function(param) {
+            var _param = _sliced_to_array(param, 2), key = _param[0], _param_ = _param[1], extension = _param_.extension, filenameWithoutExtension = _param_.filenameWithoutExtension, cellContentLeft = _param_.cellContentLeft;
+            return /*#__PURE__*/ React.createElement(CellUI, {
+                key: key,
+                ref: function(el) {
+                    return getCellRef(el, key);
+                },
+                filenameWithoutExtension: filenameWithoutExtension,
+                extension: extension,
+                size: size,
+                cellContentLeft: cellContentLeft,
+                multiple: multiple,
+                flow: flow,
+                isHelper: true
+            });
+        })));
     });
 };
 export var attachConfig = {

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

@@ -1,43 +1,68 @@
 import styled from "styled-components";
 import { css } from "styled-components";
-import { applyEllipsis } from "../../mixins";
+import { classes, tokens } from "./Attach.tokens";
 export var base = css([
     "position:relative;display:flex;"
 ]);
 export var StyledHiddenInput = styled.input.withConfig({
     displayName: "Attach.styles__StyledHiddenInput",
-    componentId: "sc-ebfa8a10-0"
+    componentId: "sc-328589a4-0"
 })([
     "display:none;"
 ]);
 export var StyledAttachButtonWrapper = styled.div.withConfig({
     displayName: "Attach.styles__StyledAttachButtonWrapper",
-    componentId: "sc-ebfa8a10-1"
+    componentId: "sc-328589a4-1"
 })([
     "position:relative;"
 ]);
 export var StyledHelperText = styled.div.withConfig({
     displayName: "Attach.styles__StyledHelperText",
-    componentId: "sc-ebfa8a10-2"
+    componentId: "sc-328589a4-2"
 })([
     "position:absolute;margin-top:0.25rem;"
 ]);
 export var FilenameWrapper = styled.div.withConfig({
     displayName: "Attach.styles__FilenameWrapper",
-    componentId: "sc-ebfa8a10-3"
+    componentId: "sc-328589a4-3"
 })([
-    "display:inline-grid;align-items:center;grid-template-columns:auto 1fr;min-width:8ch;"
-]);
+    "display:inline-grid;align-items:center;grid-template-columns:auto 1fr;min-width:8ch;height:",
+    ";"
+], function(param) {
+    var isInsideDropdown = param.isInsideDropdown;
+    return isInsideDropdown ? "var(".concat(tokens.filenameDropdownWrapperHeight, ")") : "var(".concat(tokens.filenameWrapperHeight, ")");
+});
+export var FilesWrapper = styled.div.withConfig({
+    displayName: "Attach.styles__FilesWrapper",
+    componentId: "sc-328589a4-4"
+})([
+    "display:flex;overflow:",
+    ";&.",
+    "{flex-direction:row;}&.",
+    "{flex-direction:column;}&.",
+    "{flex-wrap:wrap;}&.",
+    "{position:absolute;top:0;left:0;z-index:-999;visibility:hidden;opacity:0;max-width:100%;overflow:hidden;}"
+], function(param) {
+    var applyOverflow = param.applyOverflow;
+    return applyOverflow ? 'hidden' : 'unset';
+}, classes.horizontal, classes.vertical, classes.auto, classes.horizontalHidden);
 export var TruncatedFilenamePart = styled.span.withConfig({
     displayName: "Attach.styles__TruncatedFilenamePart",
-    componentId: "sc-ebfa8a10-4"
+    componentId: "sc-328589a4-5"
 })([
-    "",
-    ""
-], applyEllipsis());
+    "overflow:",
+    ";text-overflow:",
+    ";white-space:nowrap;"
+], function(param) {
+    var applyEllipsis = param.applyEllipsis;
+    return applyEllipsis ? 'hidden' : 'visible';
+}, function(param) {
+    var applyEllipsis = param.applyEllipsis;
+    return applyEllipsis ? 'ellipsis' : 'unset';
+});
 export var FilenameExtensionPart = styled.span.withConfig({
     displayName: "Attach.styles__FilenameExtensionPart",
-    componentId: "sc-ebfa8a10-5"
+    componentId: "sc-328589a4-6"
 })([
     ""
 ]);