@salutejs/plasma-new-hope 0.344.0-canary.2392.20298160025.0 → 0.344.0-canary.2397.20456842500.0

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

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

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

@@ -3,8 +3,8 @@ import { classes, tokens } from "../../TextField.tokens";
 import { Input, InputPlaceholder, InputWrapper, Label, LeftHelper, StyledContentLeft, StyledContentRight, TitleCaption } from "../../TextField.styles";
 export var base = css([
     "&[readonly]{",
-    "{position:relative;z-index:0;color:var(",
-    ");background:transparent;box-shadow:none;:before{position:absolute;content:'';top:0;left:0;right:0;bottom:0;border-radius:var(",
+    "{position:relative;color:var(",
+    ");background:transparent;:before{position:absolute;content:'';top:0;left:0;right:0;bottom:0;border-radius:var(",
     ");background-color:var(",
     ");opacity:var(",
     ");box-shadow:inset 0 0 0 var(",

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

@@ -1,6 +1,6 @@
 import { css } from "styled-components";
 import { classes, tokens } from "../../TextField.tokens";
-import { Input, InputPlaceholder, InputWrapper, LeftHelper, StyledTextAfter, StyledTextBefore, TitleCaption } from "../../TextField.styles";
+import { Input, InputPlaceholder, InputWrapper, StyledTextAfter, StyledTextBefore, StyledContentLeft, TitleCaption } from "../../TextField.styles";
 export var base = css([
     "",
     "{--plasma_private-textfield-border-color:var(",
@@ -25,10 +25,12 @@ export var base = css([
     ",var(",
     ") );",
     "{color:var(",
-    ");}}",
+    ");}",
     "{color:var(",
     ");}",
     "{color:var(",
+    ");}}",
+    "{color:var(",
     ");}",
     "{color:var(",
     ");}",
@@ -36,7 +38,8 @@ export var base = css([
     ");}&.",
     "{",
     "{--plasma_private-textfield-divider-color:var(",
-    ");&:before{content:'';position:absolute;height:0.063rem;width:100%;bottom:0;left:0;background-color:var(--plasma_private-textfield-divider-color);transition:background-color 0.1s ease-in;}}&:not([readonly]) ",
+    ");--plasma_private-textfield-divider-width:var(",
+    ");&:before{content:'';position:absolute;height:var(--plasma_private-textfield-divider-width,0.063rem);width:100%;bottom:0;left:0;background-color:var(--plasma_private-textfield-divider-color);transition:background-color 0.1s ease-in;}}&:not([readonly]) ",
     ":hover{--plasma_private-textfield-divider-color:var( ",
     ",var(",
     ") );}&:not([readonly]) ",
@@ -45,4 +48,4 @@ export var base = css([
     ") );",
     "{color:var(",
     ");}}}"
-], InputWrapper, String(tokens.borderColor), String(tokens.backgroundColor), tokens.color, tokens.borderWidth, tokens.boxShadow, tokens.caretColor, InputWrapper, tokens.borderColorHover, String(tokens.borderColor), tokens.backgroundColorHover, String(tokens.backgroundColor), Input, tokens.color, InputPlaceholder, tokens.placeholderColor, InputWrapper, tokens.borderColorFocus, String(tokens.borderColor), tokens.backgroundColorFocus, String(tokens.backgroundColor), InputPlaceholder, tokens.placeholderColorFocus, TitleCaption, tokens.titleCaptionColor, LeftHelper, tokens.leftHelperColor, StyledTextBefore, tokens.textBeforeColor, StyledTextAfter, tokens.textAfterColor, classes.hasDivider, InputWrapper, String(tokens.dividerColor), InputWrapper, tokens.dividerColorHover, String(tokens.dividerColor), InputWrapper, tokens.dividerColorFocus, String(tokens.dividerColor), InputPlaceholder, tokens.clearPlaceholderColorFocus);
+], InputWrapper, String(tokens.borderColor), String(tokens.backgroundColor), tokens.color, tokens.borderWidth, tokens.boxShadow, tokens.caretColor, InputWrapper, tokens.borderColorHover, String(tokens.borderColor), tokens.backgroundColorHover, String(tokens.backgroundColor), Input, tokens.color, InputPlaceholder, tokens.placeholderColor, InputWrapper, tokens.borderColorFocus, String(tokens.borderColor), tokens.backgroundColorFocus, String(tokens.backgroundColor), Input, tokens.colorFocus, InputPlaceholder, tokens.placeholderColorFocus, StyledContentLeft, tokens.contentSlotColorFocus, TitleCaption, tokens.titleCaptionColor, StyledTextBefore, tokens.textBeforeColor, StyledTextAfter, tokens.textAfterColor, classes.hasDivider, InputWrapper, String(tokens.dividerColor), String(tokens.dividerWidth), InputWrapper, tokens.dividerColorHover, String(tokens.dividerColor), InputWrapper, tokens.dividerColorFocus, String(tokens.dividerColor), InputPlaceholder, tokens.clearPlaceholderColorFocus);

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

@@ -137,7 +137,7 @@ import { base as readonlyCSS } from "./variations/_readonly/base";
 import { useKeyNavigation } from "./hooks/useKeyboardNavigation";
 export var timePickerRoot = function(Root) {
     return /*#__PURE__*/ forwardRef(function(_param, ref) {
-        var className = _param.className, _param_opened = _param.opened, opened = _param_opened === void 0 ? false : _param_opened, outerValue = _param.value, label = _param.label, _param_labelPlacement = _param.labelPlacement, labelPlacement = _param_labelPlacement === void 0 ? 'outer' : _param_labelPlacement, keepPlaceholder = _param.keepPlaceholder, _param_required = _param.required, required = _param_required === void 0 ? false : _param_required, _param_requiredPlacement = _param.requiredPlacement, requiredPlacement = _param_requiredPlacement === void 0 ? 'right' : _param_requiredPlacement, _param_hasRequiredIndicator = _param.hasRequiredIndicator, hasRequiredIndicator = _param_hasRequiredIndicator === void 0 ? true : _param_hasRequiredIndicator, placeholder = _param.placeholder, contentLeft = _param.contentLeft, contentRight = _param.contentRight, textBefore = _param.textBefore, textAfter = _param.textAfter, view = _param.view, size = _param.size, _param_disabled = _param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, _param_readonly = _param.readonly, readonly = _param_readonly === void 0 ? false : _param_readonly, _param_frame = _param.frame, frame = _param_frame === void 0 ? 'document' : _param_frame, _param_usePortal = _param.usePortal, usePortal = _param_usePortal === void 0 ? false : _param_usePortal, _param_closeOnOverlayClick = _param.closeOnOverlayClick, closeOnOverlayClick = _param_closeOnOverlayClick === void 0 ? true : _param_closeOnOverlayClick, _param_closeOnEsc = _param.closeOnEsc, closeOnEsc = _param_closeOnEsc === void 0 ? true : _param_closeOnEsc, offset = _param.offset, stretched = _param.stretched, _param_dropdownAlign = _param.dropdownAlign, dropdownAlign = _param_dropdownAlign === void 0 ? 'left' : _param_dropdownAlign, dropdownWidth = _param.dropdownWidth, dropdownHeight = _param.dropdownHeight, _param_columnsQuantity = _param.columnsQuantity, columnsQuantity = _param_columnsQuantity === void 0 ? 2 : _param_columnsQuantity, onToggle = _param.onToggle, onFocus = _param.onFocus, onChange = _param.onChange, rest = _object_without_properties(_param, [
+        var className = _param.className, _param_opened = _param.opened, opened = _param_opened === void 0 ? false : _param_opened, outerValue = _param.value, label = _param.label, _param_labelPlacement = _param.labelPlacement, labelPlacement = _param_labelPlacement === void 0 ? 'outer' : _param_labelPlacement, keepPlaceholder = _param.keepPlaceholder, _param_required = _param.required, required = _param_required === void 0 ? false : _param_required, _param_requiredPlacement = _param.requiredPlacement, requiredPlacement = _param_requiredPlacement === void 0 ? 'right' : _param_requiredPlacement, _param_hasRequiredIndicator = _param.hasRequiredIndicator, hasRequiredIndicator = _param_hasRequiredIndicator === void 0 ? false : _param_hasRequiredIndicator, placeholder = _param.placeholder, contentLeft = _param.contentLeft, contentRight = _param.contentRight, textBefore = _param.textBefore, textAfter = _param.textAfter, view = _param.view, size = _param.size, _param_disabled = _param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, _param_readonly = _param.readonly, readonly = _param_readonly === void 0 ? false : _param_readonly, _param_frame = _param.frame, frame = _param_frame === void 0 ? 'document' : _param_frame, _param_usePortal = _param.usePortal, usePortal = _param_usePortal === void 0 ? false : _param_usePortal, _param_closeOnOverlayClick = _param.closeOnOverlayClick, closeOnOverlayClick = _param_closeOnOverlayClick === void 0 ? true : _param_closeOnOverlayClick, _param_closeOnEsc = _param.closeOnEsc, closeOnEsc = _param_closeOnEsc === void 0 ? true : _param_closeOnEsc, offset = _param.offset, stretched = _param.stretched, _param_dropdownAlign = _param.dropdownAlign, dropdownAlign = _param_dropdownAlign === void 0 ? 'left' : _param_dropdownAlign, dropdownWidth = _param.dropdownWidth, dropdownHeight = _param.dropdownHeight, _param_columnsQuantity = _param.columnsQuantity, columnsQuantity = _param_columnsQuantity === void 0 ? 2 : _param_columnsQuantity, onToggle = _param.onToggle, onFocus = _param.onFocus, onChange = _param.onChange, rest = _object_without_properties(_param, [
             "className",
             "opened",
             "value",

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

@@ -2,7 +2,7 @@ import styled from "styled-components";
 import { css } from "styled-components";
 import { component, mergeConfig } from "../../engines";
 import { textFieldConfig, textFieldTokens } from "../TextField";
-import { popoverClasses, popoverConfig } from "../Popover";
+import { popoverClasses, popoverConfig, popoverTokens } from "../Popover";
 import { timePickerGridConfig, timePickerGridTokens } from "../TimePickerGrid";
 import { classes, tokens } from "./TimePicker.tokens";
 var mergedTextFieldConfig = mergeConfig(textFieldConfig);
@@ -13,13 +13,17 @@ var mergedTimePickerGrid = mergeConfig(timePickerGridConfig);
 var TimePickerGrid = component(mergedTimePickerGrid);
 export var StyledPopover = styled(Popover).withConfig({
     displayName: "TimePicker.styles__StyledPopover",
-    componentId: "sc-d43646a1-0"
+    componentId: "sc-f592831a-0"
 })([
-    ""
-]);
+    ".",
+    "{",
+    ":var(",
+    ");border-radius:var(",
+    ");}"
+], popoverClasses.root, popoverTokens.boxShadow, tokens.timePickerShadow, tokens.timePickerBorderRadius);
 export var StyledTimePickerGrid = styled(TimePickerGrid).withConfig({
     displayName: "TimePicker.styles__StyledTimePickerGrid",
-    componentId: "sc-d43646a1-1"
+    componentId: "sc-f592831a-1"
 })([
     "",
     ":var(",
@@ -63,12 +67,14 @@ export var StyledTimePickerGrid = styled(TimePickerGrid).withConfig({
     ":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);
+], 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.itemFocusColor, tokens.itemFocusColor, 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-d43646a1-2"
+    componentId: "sc-f592831a-2"
 })([
     "width:100%;",
     ":var(",
@@ -234,7 +240,7 @@ export var base = css([
 ], tokens.width, tokens.dropdownMarginTop, popoverClasses.wrapper, popoverClasses.target, classes.timePickerstretched, popoverClasses.root, classes.timePickerFullWidth, classes.timePickerPlacementRight, classes.timePickerFixed, tokens.timePickerWidth);
 export var StyledTimePicker = styled.div.withConfig({
     displayName: "TimePicker.styles__StyledTimePicker",
-    componentId: "sc-d43646a1-3"
+    componentId: "sc-f592831a-3"
 })([
     "background:var(",
     ");border-radius:var(",

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

@@ -102,6 +102,7 @@ export var tokens = {
     textFieldContentRightSlotColorHover: '--plasma-time-picker-textfield__content-right-color-hover',
     /** Прозрачность для всего компонента в состоянии disabled */ disabledOpacity: '--plasma-time-picker-disabled-opacity',
     dropdownMarginTop: '--plasma-time-picker-dropdown-margin-top',
+    timePickerShadow: '--plasma-time-picker-ui-box-shadow',
     timePickerBackground: '--plasma-time-picker-ui-background',
     timePickerBorderRadius: '--plasma-time-picker-ui-border-radius',
     timePickerWidth: '--plasma-time-picker-ui-width',
@@ -112,6 +113,7 @@ export var tokens = {
     itemPadding: '--plasma-time-picker-item-padding',
     itemBackgroundHover: '--plasma-time-picker-item-hover-background',
     itemBackgroundActive: '--plasma-time-picker-item-active-background',
+    itemFocusColor: '--plasma-time-picker-item-focus-color',
     itemFontFamily: '--plasma-time-picker-item-font-family',
     itemFontStyle: '--plasma-time-picker-item-font-style',
     itemFontSize: '--plasma-time-picker-item-font-size',

package/dist/styled-components/es/components/TimePickerGrid/TimePickerGrid.styles.js

@@ -2,11 +2,11 @@ import styled from "styled-components";
 import { css } from "styled-components";
 import { tokens } from "./TimePickerGrid.tokens";
 export var base = css([
-    "display:flex;width:100%;height:10rem;"
+    "display:flex;width:100%;"
 ]);
 export var StyledTimePicker = styled.div.withConfig({
     displayName: "TimePickerGrid.styles__StyledTimePicker",
-    componentId: "sc-526cdfba-0"
+    componentId: "sc-ad4aa553-0"
 })([
     "background:var(",
     ");border-radius:var(",

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

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

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

@@ -1,19 +1,20 @@
 import styled from "styled-components";
+import { addFocus } from "../../../../mixins";
 import { classes, tokens } from "../../TimePickerGrid.tokens";
 export var StyledRoot = styled.div.withConfig({
     displayName: "TimeColumn.styles__StyledRoot",
-    componentId: "sc-2a18995b-0"
+    componentId: "sc-dc81fb27-0"
 })([
     "position:relative;width:100%;"
 ]);
 export var StyledTimeItem = styled.div.withConfig({
     displayName: "TimeColumn.styles__StyledTimeItem",
-    componentId: "sc-2a18995b-1"
+    componentId: "sc-dc81fb27-1"
 })([
     "height:var(",
     ");padding:var(",
     ");box-sizing:border-box;display:flex;justify-content:center;align-items:center;transition:0.05s;border-radius:var(",
-    ");cursor:pointer;flex-shrink:0;overflow:auto;font-family:var(",
+    ");cursor:pointer;flex-shrink:0;outline:none;font-family:var(",
     ");font-size:var(",
     ");font-style:var(",
     ");font-weight:var(",
@@ -24,14 +25,20 @@ export var StyledTimeItem = styled.div.withConfig({
     "{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, classes.itemDisabled, tokens.disabledOpacity, addFocus({
+    outlineOffset: '0.0625rem',
+    outlineSize: '0.0625rem',
+    outlineRadius: "var(".concat(tokens.itemBorderRadius, ")"),
+    outlineColor: "var(".concat(tokens.itemFocusColor, ")")
+}));
 export var StyledTimeColumn = styled.div.withConfig({
     displayName: "TimeColumn.styles__StyledTimeColumn",
-    componentId: "sc-2a18995b-2"
+    componentId: "sc-dc81fb27-2"
 })([
     "max-height:",
-    ";overflow-y:scroll;flex:1;z-index:3;box-sizing:border-box;display:flex;flex-direction:column;gap:var(",
+    ";overflow-y:scroll;overflow-x:visible;flex:1;z-index:3;box-sizing:border-box;display:flex;flex-direction:column;gap:var(",
     ");width:100%;&.",
     "{border:0.125rem solid var(",
     ");border-radius:var(",
@@ -42,7 +49,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-dc81fb27-3"
 })([
     "position:absolute;top:var(",
     ");right:0;bottom:var(",
@@ -52,7 +59,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-dc81fb27-4"
 })([
     "position:relative;width:100%;height:100%;background:var(",
     ");border-radius:var(",
@@ -60,7 +67,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-dc81fb27-5"
 })([
     "position:absolute;top:0;left:0;width:100%;background:var(",
     ");border-radius:var(",
@@ -70,7 +77,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-dc81fb27-6"
 })([
     "width:100%;height:0%.125rem;"
 ]);

package/dist/styled-components/es/components/_Slot/Slot.js

@@ -0,0 +1,86 @@
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+import * as React from "react";
+import { mergeRefs, mergeHandlers } from "../../utils";
+export var Slot = /*#__PURE__*/ React.forwardRef(function(props, forwardedRef) {
+    var children = props.children, slotProps = _object_without_properties(props, [
+        "children"
+    ]);
+    if (!/*#__PURE__*/ React.isValidElement(children)) {
+        return null;
+    }
+    var child = children;
+    var childProps = child.props;
+    var mergedProps = _object_spread({}, slotProps);
+    // merge event handlers
+    for(var key in slotProps){
+        if (/^on[A-Z]/.test(key)) {
+            mergedProps[key] = mergeHandlers(childProps[key], slotProps[key]);
+        }
+    }
+    if (childProps.className || slotProps.className) {
+        mergedProps.className = [
+            slotProps.className,
+            childProps.className
+        ].filter(Boolean).join(' ');
+    }
+    // merge style
+    if (childProps.style || slotProps.style) {
+        mergedProps.style = _object_spread({}, slotProps.style, childProps.style);
+    }
+    mergedProps.ref = mergeRefs(childProps.ref, forwardedRef);
+    return /*#__PURE__*/ React.cloneElement(children, mergedProps);
+});