@salutejs/plasma-new-hope 0.342.0-canary.2349.19562279210.0 → 0.342.0-canary.2352.19633574715.0

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

@@ -93,14 +93,14 @@ var base = (0, _styledcomponents.css)([
 }));
 var StyledAdditionalContent = _styledcomponents.default.div.withConfig({
     displayName: "LinkButton.styles__StyledAdditionalContent",
-    componentId: "sc-2c073fa1-0"
+    componentId: "sc-e83eddac-0"
 })([
     "display:flex;align-items:center;margin:var(",
     ");"
 ], _LinkButtontokens.tokens.linkButtonAdditionalContentMargin);
 var LoadWrap = _styledcomponents.default.div.withConfig({
     displayName: "LinkButton.styles__LoadWrap",
-    componentId: "sc-2c073fa1-1"
+    componentId: "sc-e83eddac-1"
 })([
     "opacity:",
     ";display:flex;align-items:inherit;justify-content:inherit;height:100%;width:100%;"
@@ -110,13 +110,13 @@ var LoadWrap = _styledcomponents.default.div.withConfig({
 });
 var Loader = _styledcomponents.default.div.withConfig({
     displayName: "LinkButton.styles__Loader",
-    componentId: "sc-2c073fa1-2"
+    componentId: "sc-e83eddac-2"
 })([
     "position:absolute;"
 ]);
 var StyledSpinner = (0, _styledcomponents.default)(Spinner).withConfig({
     displayName: "LinkButton.styles__StyledSpinner",
-    componentId: "sc-2c073fa1-3"
+    componentId: "sc-e83eddac-3"
 })([
     "",
     ":var(",
@@ -126,17 +126,18 @@ var StyledSpinner = (0, _styledcomponents.default)(Spinner).withConfig({
 ], _Spinner.spinnerTokens.size, _LinkButtontokens.tokens.linkButtonSpinnerSize, _Spinner.spinnerTokens.color, _LinkButtontokens.tokens.linkButtonSpinnerColor);
 var LinkButtonText = _styledcomponents.default.span.withConfig({
     displayName: "LinkButton.styles__LinkButtonText",
-    componentId: "sc-2c073fa1-4"
+    componentId: "sc-e83eddac-4"
 })([
     "padding:var(",
     ");color:var(",
     ");",
     " &:hover{color:var(",
+    ");}&:active{color:var(",
     ");}"
-], _LinkButtontokens.tokens.linkButtonTextPadding, _LinkButtontokens.tokens.linkButtonTextColor, (0, _mixins.applyEllipsis)(), _LinkButtontokens.tokens.linkButtonTextColorHover);
+], _LinkButtontokens.tokens.linkButtonTextPadding, _LinkButtontokens.tokens.linkButtonTextColor, (0, _mixins.applyEllipsis)(), _LinkButtontokens.tokens.linkButtonTextColorHover, _LinkButtontokens.tokens.linkButtonTextColorActive);
 var StyledContentLeft = _styledcomponents.default.div.withConfig({
     displayName: "LinkButton.styles__StyledContentLeft",
-    componentId: "sc-2c073fa1-5"
+    componentId: "sc-e83eddac-5"
 })([
     "line-height:0;color:var(",
     ");margin:var(",
@@ -144,7 +145,7 @@ var StyledContentLeft = _styledcomponents.default.div.withConfig({
 ], _LinkButtontokens.tokens.linkButtonIconColor, _LinkButtontokens.tokens.linkButtonLeftContentMargin);
 var StyledContentRight = _styledcomponents.default.div.withConfig({
     displayName: "LinkButton.styles__StyledContentRight",
-    componentId: "sc-2c073fa1-6"
+    componentId: "sc-e83eddac-6"
 })([
     "line-height:0;color:var(",
     ");margin:var(",

package/styled-components/cjs/components/LinkButton/LinkButton.tokens.js

@@ -16,6 +16,7 @@ var tokens = {
     linkButtonColorHover: '--plasma-link-button-color-hover',
     linkButtonColorActive: '--plasma-link-button-color-active',
     linkButtonTextColorHover: '--plasma-link-button-text-color-hover',
+    linkButtonTextColorActive: '--plasma-link-button-text-color-active',
     linkButtonPadding: '--plasma-link-button-padding',
     linkButtonHeight: '--plasma-link-button-height',
     linkButtonWidth: '--plasma-link-button-width',

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

@@ -18,6 +18,7 @@ _export(exports, {
 });
 var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 var _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+var _plasmacore = require("@salutejs/plasma-core");
 var _utils = require("../../utils");
 var _utils1 = require("./utils");
 var _TimePickerstyles = require("./TimePicker.styles");
@@ -234,17 +235,20 @@ var timePickerRoot = function(Root) {
             "onChange"
         ]);
         var inputRef = (0, _react.useRef)(null);
+        var rootRef = (0, _react.useRef)(null);
+        var rootForkRef = (0, _plasmacore.useForkRef)(rootRef, ref);
         var hoursHideTimeoutRef = (0, _react.useRef)(null);
         var minutesHideTimeoutRef = (0, _react.useRef)(null);
         var secondsHideTimeoutRef = (0, _react.useRef)(null);
         var _useState = _sliced_to_array((0, _react.useState)(opened), 2), isInnerOpen = _useState[0], setIsInnerOpen = _useState[1];
         var _useState1 = _sliced_to_array((0, _react.useState)(outerValue || ''), 2), innerTime = _useState1[0], setInnerTime = _useState1[1];
-        var _useState2 = _sliced_to_array((0, _react.useState)({
+        var _useState2 = _sliced_to_array((0, _react.useState)(null), 2), rootWidth = _useState2[0], setRootWidth = _useState2[1];
+        var _useState3 = _sliced_to_array((0, _react.useState)({
             hours: null,
             minutes: null,
             seconds: null,
             currentColumn: null
-        }), 2), setActiveTime = _useState2[1];
+        }), 2), setActiveTime = _useState3[1];
         var viewValue = outerValue !== null && outerValue !== void 0 ? outerValue : innerTime;
         var format = columnsQuantity === 3 ? 'HH:mm:ss' : 'HH:mm';
         (0, _react.useEffect)(function() {
@@ -288,6 +292,15 @@ var timePickerRoot = function(Root) {
             disabled,
             readonly
         ]);
+        (0, _react.useEffect)(function() {
+            if (dropdownWidth === 'fullWidth' && rootRef.current) {
+                var width = rootRef.current.offsetWidth;
+                setRootWidth(width);
+            }
+        }, [
+            dropdownWidth,
+            isInnerOpen
+        ]);
         var handleToggle = function() {
             if (disabled || readonly) return;
             var newState = !isInnerOpen;
@@ -389,6 +402,15 @@ var timePickerRoot = function(Root) {
             labelPlacement: labelPlacement,
             keepPlaceholder: keepPlaceholder
         });
+        var getDropdownWidth = function() {
+            if (dropdownWidth === 'fixed' || dropdownWidth === undefined) {
+                return undefined;
+            }
+            if (dropdownWidth === 'fullWidth') {
+                return rootWidth !== null ? "".concat(rootWidth, "px") : 'fullWidth';
+            }
+            return dropdownWidth;
+        };
         return /*#__PURE__*/ _react.default.createElement(Root, _object_spread({
             stretched: stretched,
             view: view,
@@ -396,7 +418,7 @@ var timePickerRoot = function(Root) {
             className: (0, _classnames.default)(_TimePickertokens.classes.timePickerRoot, className, _define_property({}, _TimePickertokens.classes.timePickerstretched, stretched)),
             disabled: disabled,
             readonly: readonly,
-            ref: ref
+            ref: rootForkRef
         }, rest), /*#__PURE__*/ _react.default.createElement(_TimePickerstyles.StyledPopover, {
             opened: isInnerOpen,
             usePortal: usePortal,
@@ -414,7 +436,7 @@ var timePickerRoot = function(Root) {
             value: viewValue,
             onChange: handleOnChange,
             dropdownHeight: dropdownHeight,
-            dropdownWidth: dropdownWidth,
+            dropdownWidth: getDropdownWidth(),
             format: format,
             view: view,
             size: size,

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

@@ -64,7 +64,7 @@ var base = (0, _styledcomponents.css)([
 ]);
 var StyledTimePicker = _styledcomponents.default.div.withConfig({
     displayName: "TimePickerGrid.styles__StyledTimePicker",
-    componentId: "sc-25f5922-0"
+    componentId: "sc-526cdfba-0"
 })([
     "background:var(",
     ");border-radius:var(",
@@ -75,5 +75,7 @@ var StyledTimePicker = _styledcomponents.default.div.withConfig({
     ");"
 ], _TimePickerGridtokens.tokens.timePickerGridBackground, _TimePickerGridtokens.tokens.timePickerGridBorderRadius, function(param) {
     var width = param.width;
-    return (width === 'fullWidth' ? '100%' : width) || "var(".concat(_TimePickerGridtokens.tokens.timePickerGridWidth, ")");
+    if (width === 'fullWidth') return '100%';
+    if (width === 'fixed' || width === undefined) return "var(".concat(_TimePickerGridtokens.tokens.timePickerGridWidth, ")");
+    return width;
 }, _TimePickerGridtokens.tokens.timePickerGridPadding, _TimePickerGridtokens.tokens.scrollbarWidth, _TimePickerGridtokens.tokens.columnHeight);

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

@@ -26,8 +26,9 @@ var config = {
                 ":var(--text-primary-hover);",
                 ":var(--text-primary-active);",
                 ":var(--surface-accent);",
-                ":var(--text-primary-hover);"
-            ], _LinkButton.linkButtonTokens.linkButtonColor, _LinkButton.linkButtonTokens.linkButtonIconColor, _LinkButton.linkButtonTokens.linkButtonTextColor, _LinkButton.linkButtonTokens.linkButtonBackgroundColor, _LinkButton.linkButtonTokens.linkButtonColorHover, _LinkButton.linkButtonTokens.linkButtonColorActive, _LinkButton.linkButtonTokens.linkButtonFocusColor, _LinkButton.linkButtonTokens.linkButtonTextColorHover),
+                ":var(--text-primary-hover);",
+                ":var(--text-primary-active);"
+            ], _LinkButton.linkButtonTokens.linkButtonColor, _LinkButton.linkButtonTokens.linkButtonIconColor, _LinkButton.linkButtonTokens.linkButtonTextColor, _LinkButton.linkButtonTokens.linkButtonBackgroundColor, _LinkButton.linkButtonTokens.linkButtonColorHover, _LinkButton.linkButtonTokens.linkButtonColorActive, _LinkButton.linkButtonTokens.linkButtonFocusColor, _LinkButton.linkButtonTokens.linkButtonTextColorHover, _LinkButton.linkButtonTokens.linkButtonTextColorActive),
             accent: (0, _styledcomponents.css)([
                 "",
                 ":var(--text-accent);",
@@ -37,8 +38,9 @@ var config = {
                 ":var(--text-accent-hover);",
                 ":var(--text-accent-active);",
                 ":var(--surface-accent);",
-                ":var(--text-accent-hover);"
-            ], _LinkButton.linkButtonTokens.linkButtonColor, _LinkButton.linkButtonTokens.linkButtonIconColor, _LinkButton.linkButtonTokens.linkButtonTextColor, _LinkButton.linkButtonTokens.linkButtonBackgroundColor, _LinkButton.linkButtonTokens.linkButtonColorHover, _LinkButton.linkButtonTokens.linkButtonColorActive, _LinkButton.linkButtonTokens.linkButtonFocusColor, _LinkButton.linkButtonTokens.linkButtonTextColorHover),
+                ":var(--text-accent-hover);",
+                ":var(--text-accent-active);"
+            ], _LinkButton.linkButtonTokens.linkButtonColor, _LinkButton.linkButtonTokens.linkButtonIconColor, _LinkButton.linkButtonTokens.linkButtonTextColor, _LinkButton.linkButtonTokens.linkButtonBackgroundColor, _LinkButton.linkButtonTokens.linkButtonColorHover, _LinkButton.linkButtonTokens.linkButtonColorActive, _LinkButton.linkButtonTokens.linkButtonFocusColor, _LinkButton.linkButtonTokens.linkButtonTextColorHover, _LinkButton.linkButtonTokens.linkButtonTextColorActive),
             secondary: (0, _styledcomponents.css)([
                 "",
                 ":var(--text-secondary);",
@@ -48,8 +50,9 @@ var config = {
                 ":var(--text-secondary-hover);",
                 ":var(--text-secondary-active);",
                 ":var(--surface-accent);",
-                ":var(--text-secondary-hover);"
-            ], _LinkButton.linkButtonTokens.linkButtonColor, _LinkButton.linkButtonTokens.linkButtonIconColor, _LinkButton.linkButtonTokens.linkButtonTextColor, _LinkButton.linkButtonTokens.linkButtonBackgroundColor, _LinkButton.linkButtonTokens.linkButtonColorHover, _LinkButton.linkButtonTokens.linkButtonColorActive, _LinkButton.linkButtonTokens.linkButtonFocusColor, _LinkButton.linkButtonTokens.linkButtonTextColorHover),
+                ":var(--text-secondary-hover);",
+                ":var(--text-secondary-active);"
+            ], _LinkButton.linkButtonTokens.linkButtonColor, _LinkButton.linkButtonTokens.linkButtonIconColor, _LinkButton.linkButtonTokens.linkButtonTextColor, _LinkButton.linkButtonTokens.linkButtonBackgroundColor, _LinkButton.linkButtonTokens.linkButtonColorHover, _LinkButton.linkButtonTokens.linkButtonColorActive, _LinkButton.linkButtonTokens.linkButtonFocusColor, _LinkButton.linkButtonTokens.linkButtonTextColorHover, _LinkButton.linkButtonTokens.linkButtonTextColorActive),
             positive: (0, _styledcomponents.css)([
                 "",
                 ":var(--text-positive);",
@@ -59,8 +62,9 @@ var config = {
                 ":var(--text-positive-hover);",
                 ":var(--text-positive-active);",
                 ":var(--surface-accent);",
-                ":var(--text-positive-hover);"
-            ], _LinkButton.linkButtonTokens.linkButtonColor, _LinkButton.linkButtonTokens.linkButtonIconColor, _LinkButton.linkButtonTokens.linkButtonTextColor, _LinkButton.linkButtonTokens.linkButtonBackgroundColor, _LinkButton.linkButtonTokens.linkButtonColorHover, _LinkButton.linkButtonTokens.linkButtonColorActive, _LinkButton.linkButtonTokens.linkButtonFocusColor, _LinkButton.linkButtonTokens.linkButtonTextColorHover),
+                ":var(--text-positive-hover);",
+                ":var(--text-positive-active);"
+            ], _LinkButton.linkButtonTokens.linkButtonColor, _LinkButton.linkButtonTokens.linkButtonIconColor, _LinkButton.linkButtonTokens.linkButtonTextColor, _LinkButton.linkButtonTokens.linkButtonBackgroundColor, _LinkButton.linkButtonTokens.linkButtonColorHover, _LinkButton.linkButtonTokens.linkButtonColorActive, _LinkButton.linkButtonTokens.linkButtonFocusColor, _LinkButton.linkButtonTokens.linkButtonTextColorHover, _LinkButton.linkButtonTokens.linkButtonTextColorActive),
             warning: (0, _styledcomponents.css)([
                 "",
                 ":var(--text-warning);",
@@ -70,8 +74,9 @@ var config = {
                 ":var(--text-warning-hover);",
                 ":var(--text-warning-active);",
                 ":var(--surface-accent);",
-                ":var(--text-warning-hover);"
-            ], _LinkButton.linkButtonTokens.linkButtonColor, _LinkButton.linkButtonTokens.linkButtonIconColor, _LinkButton.linkButtonTokens.linkButtonTextColor, _LinkButton.linkButtonTokens.linkButtonBackgroundColor, _LinkButton.linkButtonTokens.linkButtonColorHover, _LinkButton.linkButtonTokens.linkButtonColorActive, _LinkButton.linkButtonTokens.linkButtonFocusColor, _LinkButton.linkButtonTokens.linkButtonTextColorHover),
+                ":var(--text-warning-hover);",
+                ":var(--text-warning-active);"
+            ], _LinkButton.linkButtonTokens.linkButtonColor, _LinkButton.linkButtonTokens.linkButtonIconColor, _LinkButton.linkButtonTokens.linkButtonTextColor, _LinkButton.linkButtonTokens.linkButtonBackgroundColor, _LinkButton.linkButtonTokens.linkButtonColorHover, _LinkButton.linkButtonTokens.linkButtonColorActive, _LinkButton.linkButtonTokens.linkButtonFocusColor, _LinkButton.linkButtonTokens.linkButtonTextColorHover, _LinkButton.linkButtonTokens.linkButtonTextColorActive),
             negative: (0, _styledcomponents.css)([
                 "",
                 ":var(--text-negative);",
@@ -81,8 +86,9 @@ var config = {
                 ":var(--text-negative-hover);",
                 ":var(--text-negative-active);",
                 ":var(--surface-accent);",
-                ":var(--text-negative-hover);"
-            ], _LinkButton.linkButtonTokens.linkButtonColor, _LinkButton.linkButtonTokens.linkButtonIconColor, _LinkButton.linkButtonTokens.linkButtonTextColor, _LinkButton.linkButtonTokens.linkButtonBackgroundColor, _LinkButton.linkButtonTokens.linkButtonColorHover, _LinkButton.linkButtonTokens.linkButtonColorActive, _LinkButton.linkButtonTokens.linkButtonFocusColor, _LinkButton.linkButtonTokens.linkButtonTextColorHover)
+                ":var(--text-negative-hover);",
+                ":var(--text-negative-active);"
+            ], _LinkButton.linkButtonTokens.linkButtonColor, _LinkButton.linkButtonTokens.linkButtonIconColor, _LinkButton.linkButtonTokens.linkButtonTextColor, _LinkButton.linkButtonTokens.linkButtonBackgroundColor, _LinkButton.linkButtonTokens.linkButtonColorHover, _LinkButton.linkButtonTokens.linkButtonColorActive, _LinkButton.linkButtonTokens.linkButtonFocusColor, _LinkButton.linkButtonTokens.linkButtonTextColorHover, _LinkButton.linkButtonTokens.linkButtonTextColorActive)
         },
         size: {
             xl: (0, _styledcomponents.css)([

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

@@ -17,14 +17,14 @@ export var base = css([
 }));
 export var StyledAdditionalContent = styled.div.withConfig({
     displayName: "LinkButton.styles__StyledAdditionalContent",
-    componentId: "sc-2c073fa1-0"
+    componentId: "sc-e83eddac-0"
 })([
     "display:flex;align-items:center;margin:var(",
     ");"
 ], tokens.linkButtonAdditionalContentMargin);
 export var LoadWrap = styled.div.withConfig({
     displayName: "LinkButton.styles__LoadWrap",
-    componentId: "sc-2c073fa1-1"
+    componentId: "sc-e83eddac-1"
 })([
     "opacity:",
     ";display:flex;align-items:inherit;justify-content:inherit;height:100%;width:100%;"
@@ -34,13 +34,13 @@ export var LoadWrap = styled.div.withConfig({
 });
 export var Loader = styled.div.withConfig({
     displayName: "LinkButton.styles__Loader",
-    componentId: "sc-2c073fa1-2"
+    componentId: "sc-e83eddac-2"
 })([
     "position:absolute;"
 ]);
 export var StyledSpinner = styled(Spinner).withConfig({
     displayName: "LinkButton.styles__StyledSpinner",
-    componentId: "sc-2c073fa1-3"
+    componentId: "sc-e83eddac-3"
 })([
     "",
     ":var(",
@@ -50,17 +50,18 @@ export var StyledSpinner = styled(Spinner).withConfig({
 ], spinnerTokens.size, tokens.linkButtonSpinnerSize, spinnerTokens.color, tokens.linkButtonSpinnerColor);
 export var LinkButtonText = styled.span.withConfig({
     displayName: "LinkButton.styles__LinkButtonText",
-    componentId: "sc-2c073fa1-4"
+    componentId: "sc-e83eddac-4"
 })([
     "padding:var(",
     ");color:var(",
     ");",
     " &:hover{color:var(",
+    ");}&:active{color:var(",
     ");}"
-], tokens.linkButtonTextPadding, tokens.linkButtonTextColor, applyEllipsis(), tokens.linkButtonTextColorHover);
+], tokens.linkButtonTextPadding, tokens.linkButtonTextColor, applyEllipsis(), tokens.linkButtonTextColorHover, tokens.linkButtonTextColorActive);
 export var StyledContentLeft = styled.div.withConfig({
     displayName: "LinkButton.styles__StyledContentLeft",
-    componentId: "sc-2c073fa1-5"
+    componentId: "sc-e83eddac-5"
 })([
     "line-height:0;color:var(",
     ");margin:var(",
@@ -68,7 +69,7 @@ export var StyledContentLeft = styled.div.withConfig({
 ], tokens.linkButtonIconColor, tokens.linkButtonLeftContentMargin);
 export var StyledContentRight = styled.div.withConfig({
     displayName: "LinkButton.styles__StyledContentRight",
-    componentId: "sc-2c073fa1-6"
+    componentId: "sc-e83eddac-6"
 })([
     "line-height:0;color:var(",
     ");margin:var(",

package/styled-components/es/components/LinkButton/LinkButton.tokens.js

@@ -6,6 +6,7 @@ export var tokens = {
     linkButtonColorHover: '--plasma-link-button-color-hover',
     linkButtonColorActive: '--plasma-link-button-color-active',
     linkButtonTextColorHover: '--plasma-link-button-text-color-hover',
+    linkButtonTextColorActive: '--plasma-link-button-text-color-active',
     linkButtonPadding: '--plasma-link-button-padding',
     linkButtonHeight: '--plasma-link-button-height',
     linkButtonWidth: '--plasma-link-button-width',

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

@@ -125,6 +125,7 @@ function _unsupported_iterable_to_array(o, minLen) {
 }
 import React, { forwardRef, useRef, useState, useEffect } from "react";
 import cls from "classnames";
+import { useForkRef } from "@salutejs/plasma-core";
 import { getPlacements } from "../../utils";
 import { processTimeInput, delimiter } from "./utils";
 import { base, StyledInput, StyledTimePickerGrid, StyledPopover } from "./TimePicker.styles";
@@ -170,17 +171,20 @@ export var timePickerRoot = function(Root) {
             "onChange"
         ]);
         var inputRef = useRef(null);
+        var rootRef = useRef(null);
+        var rootForkRef = useForkRef(rootRef, ref);
         var hoursHideTimeoutRef = useRef(null);
         var minutesHideTimeoutRef = useRef(null);
         var secondsHideTimeoutRef = useRef(null);
         var _useState = _sliced_to_array(useState(opened), 2), isInnerOpen = _useState[0], setIsInnerOpen = _useState[1];
         var _useState1 = _sliced_to_array(useState(outerValue || ''), 2), innerTime = _useState1[0], setInnerTime = _useState1[1];
-        var _useState2 = _sliced_to_array(useState({
+        var _useState2 = _sliced_to_array(useState(null), 2), rootWidth = _useState2[0], setRootWidth = _useState2[1];
+        var _useState3 = _sliced_to_array(useState({
             hours: null,
             minutes: null,
             seconds: null,
             currentColumn: null
-        }), 2), setActiveTime = _useState2[1];
+        }), 2), setActiveTime = _useState3[1];
         var viewValue = outerValue !== null && outerValue !== void 0 ? outerValue : innerTime;
         var format = columnsQuantity === 3 ? 'HH:mm:ss' : 'HH:mm';
         useEffect(function() {
@@ -224,6 +228,15 @@ export var timePickerRoot = function(Root) {
             disabled,
             readonly
         ]);
+        useEffect(function() {
+            if (dropdownWidth === 'fullWidth' && rootRef.current) {
+                var width = rootRef.current.offsetWidth;
+                setRootWidth(width);
+            }
+        }, [
+            dropdownWidth,
+            isInnerOpen
+        ]);
         var handleToggle = function() {
             if (disabled || readonly) return;
             var newState = !isInnerOpen;
@@ -325,6 +338,15 @@ export var timePickerRoot = function(Root) {
             labelPlacement: labelPlacement,
             keepPlaceholder: keepPlaceholder
         });
+        var getDropdownWidth = function() {
+            if (dropdownWidth === 'fixed' || dropdownWidth === undefined) {
+                return undefined;
+            }
+            if (dropdownWidth === 'fullWidth') {
+                return rootWidth !== null ? "".concat(rootWidth, "px") : 'fullWidth';
+            }
+            return dropdownWidth;
+        };
         return /*#__PURE__*/ React.createElement(Root, _object_spread({
             stretched: stretched,
             view: view,
@@ -332,7 +354,7 @@ export var timePickerRoot = function(Root) {
             className: cls(classes.timePickerRoot, className, _define_property({}, classes.timePickerstretched, stretched)),
             disabled: disabled,
             readonly: readonly,
-            ref: ref
+            ref: rootForkRef
         }, rest), /*#__PURE__*/ React.createElement(StyledPopover, {
             opened: isInnerOpen,
             usePortal: usePortal,
@@ -350,7 +372,7 @@ export var timePickerRoot = function(Root) {
             value: viewValue,
             onChange: handleOnChange,
             dropdownHeight: dropdownHeight,
-            dropdownWidth: dropdownWidth,
+            dropdownWidth: getDropdownWidth(),
             format: format,
             view: view,
             size: size,

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

@@ -6,7 +6,7 @@ export var base = css([
 ]);
 export var StyledTimePicker = styled.div.withConfig({
     displayName: "TimePickerGrid.styles__StyledTimePicker",
-    componentId: "sc-25f5922-0"
+    componentId: "sc-526cdfba-0"
 })([
     "background:var(",
     ");border-radius:var(",
@@ -17,5 +17,7 @@ export var StyledTimePicker = styled.div.withConfig({
     ");"
 ], tokens.timePickerGridBackground, tokens.timePickerGridBorderRadius, function(param) {
     var width = param.width;
-    return (width === 'fullWidth' ? '100%' : width) || "var(".concat(tokens.timePickerGridWidth, ")");
+    if (width === 'fullWidth') return '100%';
+    if (width === 'fixed' || width === undefined) return "var(".concat(tokens.timePickerGridWidth, ")");
+    return width;
 }, tokens.timePickerGridPadding, tokens.scrollbarWidth, tokens.columnHeight);

package/styled-components/es/examples/components/Combobox/Combobox.js

@@ -1,7 +0,0 @@
-import { component, mergeConfig } from "../../../engines";
-import { comboboxNewConfig } from "../../..";
-import { config } from "./Combobox.config";
-var mergedConfig = mergeConfig(comboboxNewConfig, config);
-var ComboboxComponent = component(mergedConfig);
-var Combobox = ComboboxComponent;
-export { Combobox };

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

@@ -16,8 +16,9 @@ export var config = {
                 ":var(--text-primary-hover);",
                 ":var(--text-primary-active);",
                 ":var(--surface-accent);",
-                ":var(--text-primary-hover);"
-            ], linkButtonTokens.linkButtonColor, linkButtonTokens.linkButtonIconColor, linkButtonTokens.linkButtonTextColor, linkButtonTokens.linkButtonBackgroundColor, linkButtonTokens.linkButtonColorHover, linkButtonTokens.linkButtonColorActive, linkButtonTokens.linkButtonFocusColor, linkButtonTokens.linkButtonTextColorHover),
+                ":var(--text-primary-hover);",
+                ":var(--text-primary-active);"
+            ], linkButtonTokens.linkButtonColor, linkButtonTokens.linkButtonIconColor, linkButtonTokens.linkButtonTextColor, linkButtonTokens.linkButtonBackgroundColor, linkButtonTokens.linkButtonColorHover, linkButtonTokens.linkButtonColorActive, linkButtonTokens.linkButtonFocusColor, linkButtonTokens.linkButtonTextColorHover, linkButtonTokens.linkButtonTextColorActive),
             accent: css([
                 "",
                 ":var(--text-accent);",
@@ -27,8 +28,9 @@ export var config = {
                 ":var(--text-accent-hover);",
                 ":var(--text-accent-active);",
                 ":var(--surface-accent);",
-                ":var(--text-accent-hover);"
-            ], linkButtonTokens.linkButtonColor, linkButtonTokens.linkButtonIconColor, linkButtonTokens.linkButtonTextColor, linkButtonTokens.linkButtonBackgroundColor, linkButtonTokens.linkButtonColorHover, linkButtonTokens.linkButtonColorActive, linkButtonTokens.linkButtonFocusColor, linkButtonTokens.linkButtonTextColorHover),
+                ":var(--text-accent-hover);",
+                ":var(--text-accent-active);"
+            ], linkButtonTokens.linkButtonColor, linkButtonTokens.linkButtonIconColor, linkButtonTokens.linkButtonTextColor, linkButtonTokens.linkButtonBackgroundColor, linkButtonTokens.linkButtonColorHover, linkButtonTokens.linkButtonColorActive, linkButtonTokens.linkButtonFocusColor, linkButtonTokens.linkButtonTextColorHover, linkButtonTokens.linkButtonTextColorActive),
             secondary: css([
                 "",
                 ":var(--text-secondary);",
@@ -38,8 +40,9 @@ export var config = {
                 ":var(--text-secondary-hover);",
                 ":var(--text-secondary-active);",
                 ":var(--surface-accent);",
-                ":var(--text-secondary-hover);"
-            ], linkButtonTokens.linkButtonColor, linkButtonTokens.linkButtonIconColor, linkButtonTokens.linkButtonTextColor, linkButtonTokens.linkButtonBackgroundColor, linkButtonTokens.linkButtonColorHover, linkButtonTokens.linkButtonColorActive, linkButtonTokens.linkButtonFocusColor, linkButtonTokens.linkButtonTextColorHover),
+                ":var(--text-secondary-hover);",
+                ":var(--text-secondary-active);"
+            ], linkButtonTokens.linkButtonColor, linkButtonTokens.linkButtonIconColor, linkButtonTokens.linkButtonTextColor, linkButtonTokens.linkButtonBackgroundColor, linkButtonTokens.linkButtonColorHover, linkButtonTokens.linkButtonColorActive, linkButtonTokens.linkButtonFocusColor, linkButtonTokens.linkButtonTextColorHover, linkButtonTokens.linkButtonTextColorActive),
             positive: css([
                 "",
                 ":var(--text-positive);",
@@ -49,8 +52,9 @@ export var config = {
                 ":var(--text-positive-hover);",
                 ":var(--text-positive-active);",
                 ":var(--surface-accent);",
-                ":var(--text-positive-hover);"
-            ], linkButtonTokens.linkButtonColor, linkButtonTokens.linkButtonIconColor, linkButtonTokens.linkButtonTextColor, linkButtonTokens.linkButtonBackgroundColor, linkButtonTokens.linkButtonColorHover, linkButtonTokens.linkButtonColorActive, linkButtonTokens.linkButtonFocusColor, linkButtonTokens.linkButtonTextColorHover),
+                ":var(--text-positive-hover);",
+                ":var(--text-positive-active);"
+            ], linkButtonTokens.linkButtonColor, linkButtonTokens.linkButtonIconColor, linkButtonTokens.linkButtonTextColor, linkButtonTokens.linkButtonBackgroundColor, linkButtonTokens.linkButtonColorHover, linkButtonTokens.linkButtonColorActive, linkButtonTokens.linkButtonFocusColor, linkButtonTokens.linkButtonTextColorHover, linkButtonTokens.linkButtonTextColorActive),
             warning: css([
                 "",
                 ":var(--text-warning);",
@@ -60,8 +64,9 @@ export var config = {
                 ":var(--text-warning-hover);",
                 ":var(--text-warning-active);",
                 ":var(--surface-accent);",
-                ":var(--text-warning-hover);"
-            ], linkButtonTokens.linkButtonColor, linkButtonTokens.linkButtonIconColor, linkButtonTokens.linkButtonTextColor, linkButtonTokens.linkButtonBackgroundColor, linkButtonTokens.linkButtonColorHover, linkButtonTokens.linkButtonColorActive, linkButtonTokens.linkButtonFocusColor, linkButtonTokens.linkButtonTextColorHover),
+                ":var(--text-warning-hover);",
+                ":var(--text-warning-active);"
+            ], linkButtonTokens.linkButtonColor, linkButtonTokens.linkButtonIconColor, linkButtonTokens.linkButtonTextColor, linkButtonTokens.linkButtonBackgroundColor, linkButtonTokens.linkButtonColorHover, linkButtonTokens.linkButtonColorActive, linkButtonTokens.linkButtonFocusColor, linkButtonTokens.linkButtonTextColorHover, linkButtonTokens.linkButtonTextColorActive),
             negative: css([
                 "",
                 ":var(--text-negative);",
@@ -71,8 +76,9 @@ export var config = {
                 ":var(--text-negative-hover);",
                 ":var(--text-negative-active);",
                 ":var(--surface-accent);",
-                ":var(--text-negative-hover);"
-            ], linkButtonTokens.linkButtonColor, linkButtonTokens.linkButtonIconColor, linkButtonTokens.linkButtonTextColor, linkButtonTokens.linkButtonBackgroundColor, linkButtonTokens.linkButtonColorHover, linkButtonTokens.linkButtonColorActive, linkButtonTokens.linkButtonFocusColor, linkButtonTokens.linkButtonTextColorHover)
+                ":var(--text-negative-hover);",
+                ":var(--text-negative-active);"
+            ], linkButtonTokens.linkButtonColor, linkButtonTokens.linkButtonIconColor, linkButtonTokens.linkButtonTextColor, linkButtonTokens.linkButtonBackgroundColor, linkButtonTokens.linkButtonColorHover, linkButtonTokens.linkButtonColorActive, linkButtonTokens.linkButtonFocusColor, linkButtonTokens.linkButtonTextColorHover, linkButtonTokens.linkButtonTextColorActive)
         },
         size: {
             xl: css([

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

@@ -1 +1 @@
-{"version":3,"file":"LinkButton.styles.d.ts","sourceRoot":"","sources":["../../../src/components/LinkButton/LinkButton.styles.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,IAAI,0CAoBhB,CAAC;AAEF,eAAO,MAAM,uBAAuB,qKAInC,CAAC;AAEF,eAAO,MAAM,QAAQ;gBAA4B,OAAO;EAOvD,CAAC;AAEF,eAAO,MAAM,MAAM,qKAElB,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;oDAGzB,CAAC;AAEF,eAAO,MAAM,cAAc,uKAS1B,CAAC;AAEF,eAAO,MAAM,iBAAiB,qKAK7B,CAAC;AAEF,eAAO,MAAM,kBAAkB,qKAK9B,CAAC"}
+{"version":3,"file":"LinkButton.styles.d.ts","sourceRoot":"","sources":["../../../src/components/LinkButton/LinkButton.styles.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,IAAI,0CAoBhB,CAAC;AAEF,eAAO,MAAM,uBAAuB,qKAInC,CAAC;AAEF,eAAO,MAAM,QAAQ;gBAA4B,OAAO;EAOvD,CAAC;AAEF,eAAO,MAAM,MAAM,qKAElB,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;oDAGzB,CAAC;AAEF,eAAO,MAAM,cAAc,uKAa1B,CAAC;AAEF,eAAO,MAAM,iBAAiB,qKAK7B,CAAC;AAEF,eAAO,MAAM,kBAAkB,qKAK9B,CAAC"}

package/types/components/LinkButton/LinkButton.tokens.d.ts

@@ -6,6 +6,7 @@ export declare const tokens: {
     linkButtonColorHover: string;
     linkButtonColorActive: string;
     linkButtonTextColorHover: string;
+    linkButtonTextColorActive: string;
     linkButtonPadding: string;
     linkButtonHeight: string;
     linkButtonWidth: string;

package/types/components/LinkButton/LinkButton.tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LinkButton.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/LinkButton/LinkButton.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BlB,CAAC"}
+{"version":3,"file":"LinkButton.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/LinkButton/LinkButton.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgClB,CAAC"}

package/types/components/TimePicker/TimePicker.d.ts

@@ -26,7 +26,7 @@ export declare const timePickerRoot: (Root: RootProps<HTMLDivElement, Omit<TimeP
     textBefore?: string;
     textAfter?: string;
     onChange?: (event: import("./TimePicker.types").TimePickerChangeEvent) => void;
-} & import("../TextField/TextField.types").LabelProps & import("./TimePicker.types").TimePickerPopoverProps & Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue"> & React.RefAttributes<HTMLInputElement>>;
+} & import("../TextField/TextField.types").LabelProps & import("./TimePicker.types").TimePickerPopoverProps & Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue"> & React.RefAttributes<HTMLDivElement>>;
 export declare const timePickerConfig: {
     name: string;
     tag: string;
@@ -55,7 +55,7 @@ export declare const timePickerConfig: {
         textBefore?: string;
         textAfter?: string;
         onChange?: (event: import("./TimePicker.types").TimePickerChangeEvent) => void;
-    } & import("../TextField/TextField.types").LabelProps & import("./TimePicker.types").TimePickerPopoverProps & Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue"> & React.RefAttributes<HTMLInputElement>>;
+    } & import("../TextField/TextField.types").LabelProps & import("./TimePicker.types").TimePickerPopoverProps & Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue"> & React.RefAttributes<HTMLDivElement>>;
     base: import("@linaria/core").LinariaClassName;
     variations: {
         view: {

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

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.d.ts","sourceRoot":"","sources":["../../../src/components/TimePicker/TimePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAGvE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAM7C,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAgBrD,eAAO,MAAM,cAAc,SACjB,SAAS,CAAC,cAAc,EAAE,IAAI,CAAC,eAAe,EAAE,QAAQ,GAAG,cAAc,GAAG,UAAU,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;kBAAvD,MAAO,YAAY;mBAE/C,MAAO,YAAY;;;;iNA2P7B,CAAC;AAEN,eAAO,MAAM,gBAAgB;;;mBA/PnB,SAAS,CAAC,cAAc,EAAE,IAAI,CAAC,eAAe,EAAE,QAAQ,GAAG,cAAc,GAAG,UAAU,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;sBAAvD,MAAO,YAAY;uBAE/C,MAAO,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;CAsRjC,CAAC"}
+{"version":3,"file":"TimePicker.d.ts","sourceRoot":"","sources":["../../../src/components/TimePicker/TimePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAGvE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAO7C,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAgBrD,eAAO,MAAM,cAAc,SACjB,SAAS,CAAC,cAAc,EAAE,IAAI,CAAC,eAAe,EAAE,QAAQ,GAAG,cAAc,GAAG,UAAU,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;kBAD3E,MAAO,YACpB;mBAA2D,MAAM,YAAY;;;;+MAiRlF,CAAC;AAEN,eAAO,MAAM,gBAAgB;;;mBAnRnB,SAAS,CAAC,cAAc,EAAE,IAAI,CAAC,eAAe,EAAE,QAAQ,GAAG,cAAc,GAAG,UAAU,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;sBAD3E,MAAO,YACpB;uBAA2D,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;CA4StF,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"TimePickerGrid.styles.d.ts","sourceRoot":"","sources":["../../../src/components/TimePickerGrid/TimePickerGrid.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,IAAI,0CAIhB,CAAC;AAEF,eAAO,MAAM,gBAAgB;YAAwB,MAAM,GAAG,MAAM;EAWnE,CAAC"}
+{"version":3,"file":"TimePickerGrid.styles.d.ts","sourceRoot":"","sources":["../../../src/components/TimePickerGrid/TimePickerGrid.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,IAAI,0CAIhB,CAAC;AAEF,eAAO,MAAM,gBAAgB;YAAwB,MAAM,GAAG,MAAM;EAenE,CAAC"}

package/types/examples/components/LinkButton/LinkButton.config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LinkButton.config.d.ts","sourceRoot":"","sources":["../../../../src/examples/components/LinkButton/LinkButton.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;CA6LlB,CAAC"}
+{"version":3,"file":"LinkButton.config.d.ts","sourceRoot":"","sources":["../../../../src/examples/components/LinkButton/LinkButton.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;CAmMlB,CAAC"}

package/types/examples/components/TimePicker/TimePicker.d.ts

@@ -39,5 +39,5 @@ export declare const TimePicker: import("react").FunctionComponent<import("../..
     textBefore?: string;
     textAfter?: string;
     onChange?: (event: import("../../../components/TimePicker/TimePicker.types").TimePickerChangeEvent) => void;
-} & import("../../../components/TextField/TextField.types").LabelProps & import("../../../components/TimePicker/TimePicker.types").TimePickerPopoverProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, "defaultValue"> & import("react").RefAttributes<HTMLInputElement>>;
+} & import("../../../components/TextField/TextField.types").LabelProps & import("../../../components/TimePicker/TimePicker.types").TimePickerPopoverProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, "defaultValue"> & import("react").RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=TimePicker.d.ts.map

package/types/examples/components/TimePicker/TimePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.d.ts","sourceRoot":"","sources":["../../../../src/examples/components/TimePicker/TimePicker.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBACy0B,MAAO,YAAY;mBAA0D,MAAO,YAAY;;;;mRAD/4B,CAAC"}
+{"version":3,"file":"TimePicker.d.ts","sourceRoot":"","sources":["../../../../src/examples/components/TimePicker/TimePicker.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBACy0B,MAAO,YAAY;mBAA0D,MAAO,YAAY;;;;iRAD/4B,CAAC"}