@salutejs/plasma-new-hope 0.341.0-canary.2328.19429012981.0 → 0.341.0-canary.2329.19494526634.0

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

@@ -107,7 +107,7 @@ var base = (0, _styledcomponents.css)([
 ]);
 var Table = _styledcomponents.default.table.withConfig({
     displayName: "Table.styles__Table",
-    componentId: "sc-382f3104-0"
+    componentId: "sc-20d0d4bc-0"
 })([
     "width:fit-content;font-family:var(",
     ");font-size:var(",
@@ -123,9 +123,9 @@ var Table = _styledcomponents.default.table.withConfig({
 });
 var Tr = _styledcomponents.default.tr.withConfig({
     displayName: "Table.styles__Tr",
-    componentId: "sc-382f3104-1"
+    componentId: "sc-20d0d4bc-1"
 })([
-    "box-sizing:content-box;width:fit-content;background-color:",
+    "width:fit-content;background-color:",
     ";"
 ], function(param) {
     var selected = param.selected;
@@ -133,7 +133,7 @@ var Tr = _styledcomponents.default.tr.withConfig({
 });
 var Thead = _styledcomponents.default.thead.withConfig({
     displayName: "Table.styles__Thead",
-    componentId: "sc-382f3104-2"
+    componentId: "sc-20d0d4bc-2"
 })([
     "position:",
     ";top:0;background:",
@@ -153,13 +153,13 @@ var Thead = _styledcomponents.default.thead.withConfig({
 }, Tr);
 var Tbody = _styledcomponents.default.tbody.withConfig({
     displayName: "Table.styles__Tbody",
-    componentId: "sc-382f3104-3"
+    componentId: "sc-20d0d4bc-3"
 })([
     ""
 ]);
 var Resizer = _styledcomponents.default.div.withConfig({
     displayName: "Table.styles__Resizer",
-    componentId: "sc-382f3104-4"
+    componentId: "sc-20d0d4bc-4"
 })([
     "display:",
     ";position:absolute;z-index:1;top:-0.0625rem;bottom:0;right:-0.125rem;width:0.1875rem;background:var(--outline-accent);cursor:col-resize;user-select:none;touch-action:none;"
@@ -169,11 +169,11 @@ var Resizer = _styledcomponents.default.div.withConfig({
 });
 var Th = _styledcomponents.default.th.withConfig({
     displayName: "Table.styles__Th",
-    componentId: "sc-382f3104-5"
+    componentId: "sc-20d0d4bc-5"
 })([
     "padding:",
     ";position:relative;font-weight:600;text-align:left;height:var(",
-    ");background-color:transparent;color:inherit;box-sizing:content-box;border-width:0.0625rem;border-top-width:0;border-bottom-width:0;border-style:solid;border-color:",
+    ");background-color:transparent;color:inherit;border-width:0.0625rem;border-top-width:0;border-bottom-width:0;border-style:solid;border-color:",
     ";&:hover{",
     "{display:block;}}"
 ], function(param) {
@@ -185,7 +185,7 @@ var Th = _styledcomponents.default.th.withConfig({
 }, Resizer);
 var StyledCheckbox = (0, _styledcomponents.default)(Checkbox).withConfig({
     displayName: "Table.styles__StyledCheckbox",
-    componentId: "sc-382f3104-6"
+    componentId: "sc-20d0d4bc-6"
 })([
     "",
     ":var(",
@@ -205,7 +205,7 @@ var StyledCheckbox = (0, _styledcomponents.default)(Checkbox).withConfig({
 ], _Checkbox.checkboxTokens.triggerSize, _Tabletokens.tableTokens.checkboxTriggerSize, _Checkbox.checkboxTokens.triggerBorderRadius, _Tabletokens.tableTokens.checkboxTriggerBorderRadius, _Checkbox.checkboxTokens.fillColor, _Tabletokens.tableTokens.checkboxFillColor, _Checkbox.checkboxTokens.iconColor, _Tabletokens.tableTokens.checkboxTriggerIconColor, _Checkbox.checkboxTokens.triggerBorderCheckedColor, _Tabletokens.tableTokens.checkboxTriggerBorderCheckedColor, _Checkbox.checkboxTokens.triggerBorderWidth, _Tabletokens.tableTokens.checkboxTriggerBorderWidth, _Checkbox.checkboxTokens.triggerBorderColor, _Tabletokens.tableTokens.checkboxTriggerBorderColor);
 var StyledDivider = (0, _styledcomponents.default)(Divider).withConfig({
     displayName: "Table.styles__StyledDivider",
-    componentId: "sc-382f3104-7"
+    componentId: "sc-20d0d4bc-7"
 })([
     "",
     ":0.0625rem;",
@@ -214,7 +214,7 @@ var StyledDivider = (0, _styledcomponents.default)(Divider).withConfig({
 ], _Divider.dividerTokens.baseSideSize, _Divider.dividerTokens.background, _Divider.dividerTokens.borderRadius);
 var Button = (0, _styledcomponents.default)(ButtonBase).withConfig({
     displayName: "Table.styles__Button",
-    componentId: "sc-382f3104-8"
+    componentId: "sc-20d0d4bc-8"
 })([
     "",
     ":var(",
@@ -235,7 +235,7 @@ var Button = (0, _styledcomponents.default)(ButtonBase).withConfig({
 ], _Button.buttonTokens.buttonHeight, _Tabletokens.tableTokens.buttonHeight, _Button.buttonTokens.buttonDisabledOpacity, _Button.buttonTokens.buttonFontFamily, _Tabletokens.tableTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Tabletokens.tableTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Tabletokens.tableTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Tabletokens.tableTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Tabletokens.tableTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Tabletokens.tableTokens.buttonLineHeight);
 var ButtonAccent = (0, _styledcomponents.default)(Button).withConfig({
     displayName: "Table.styles__ButtonAccent",
-    componentId: "sc-382f3104-9"
+    componentId: "sc-20d0d4bc-9"
 })([
     "",
     ":var(--on-dark-text-primary);",
@@ -246,7 +246,7 @@ var ButtonAccent = (0, _styledcomponents.default)(Button).withConfig({
 ], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonValueColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonBackgroundColorActive);
 var LinkButton = (0, _styledcomponents.default)(LinkButtonBase).withConfig({
     displayName: "Table.styles__LinkButton",
-    componentId: "sc-382f3104-10"
+    componentId: "sc-20d0d4bc-10"
 })([
     "",
     ":var(--text-primary);",

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

@@ -605,11 +605,15 @@ var textFieldRoot = function(Root) {
             "data-root": true,
             id: labelId,
             htmlFor: innerId
-        }, innerLabelValue, optionalTextNode), placeholderShown && !hasValue && /*#__PURE__*/ _react.default.createElement(_TextFieldstyles.InputPlaceholder, {
+        }, /*#__PURE__*/ _react.default.createElement(_TextFieldstyles.InputPlaceholderValue, {
+            className: (0, _utils.cx)(classTextEllipsis)
+        }, innerLabelValue), optionalTextNode), placeholderShown && !hasValue && /*#__PURE__*/ _react.default.createElement(_TextFieldstyles.InputPlaceholder, {
             hasPadding: hasPlaceholderPadding
         }, hasTextBefore && /*#__PURE__*/ _react.default.createElement(_TextFieldstyles.StyledTextBefore, {
             isHidden: true
-        }, textBefore), innerPlaceholderValue, hasPlaceholderOptional && optionalTextNode), hasTextAfter && /*#__PURE__*/ _react.default.createElement(_TextFieldstyles.StyledTextAfter, null, textAfter))), /*#__PURE__*/ _react.default.createElement(_TextFieldstyles.StyledContentRightWrapper, {
+        }, textBefore), innerPlaceholderValue && /*#__PURE__*/ _react.default.createElement(_TextFieldstyles.InputPlaceholderValue, {
+            className: (0, _utils.cx)(classTextEllipsis)
+        }, innerPlaceholderValue), hasPlaceholderOptional && optionalTextNode), hasTextAfter && /*#__PURE__*/ _react.default.createElement(_TextFieldstyles.StyledTextAfter, null, textAfter))), /*#__PURE__*/ _react.default.createElement(_TextFieldstyles.StyledContentRightWrapper, {
             className: (0, _utils.cx)(contentRightCompensationMargin)
         }, contentRight && /*#__PURE__*/ _react.default.createElement(_TextFieldstyles.StyledContentRight, {
             "data-root": true

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

@@ -30,6 +30,9 @@ _export(exports, {
     get InputPlaceholder () {
         return InputPlaceholder;
     },
+    get InputPlaceholderValue () {
+        return InputPlaceholderValue;
+    },
     get InputWrapper () {
         return InputWrapper;
     },
@@ -91,13 +94,13 @@ var mergedConfig = (0, _engines.mergeConfig)(_Tooltip.tooltipConfig);
 var Tooltip = (0, _engines.component)(mergedConfig);
 var InputWrapper = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__InputWrapper",
-    componentId: "sc-28a93ab-0"
+    componentId: "sc-a8826f8a-0"
 })([
     "position:relative;display:flex;align-items:center;box-sizing:border-box;"
 ]);
 var InputLabelWrapper = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__InputLabelWrapper",
-    componentId: "sc-28a93ab-1"
+    componentId: "sc-a8826f8a-1"
 })([
     "flex:1;overflow:scroll;position:relative;width:100%;display:inline-flex;align-items:center;::-webkit-scrollbar{display:none;}scrollbar-width:none;overscroll-behavior:contain;&.",
     "{height:var(",
@@ -106,7 +109,7 @@ var InputLabelWrapper = _styledcomponents.default.div.withConfig({
 ], String(_TextFieldtokens.classes.hasChips), _TextFieldtokens.tokens.chipHeight, _TextFieldtokens.tokens.chipBorderRadius);
 var StyledChips = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__StyledChips",
-    componentId: "sc-28a93ab-2"
+    componentId: "sc-a8826f8a-2"
 })([
     "display:flex;gap:var(",
     ");margin-right:var(",
@@ -115,7 +118,7 @@ var StyledChips = _styledcomponents.default.div.withConfig({
 ], _TextFieldtokens.tokens.chipGap, _TextFieldtokens.tokens.chipMarginRight, _TextFieldtokens.tokens.chipGap);
 var Input = _styledcomponents.default.input.withConfig({
     displayName: "TextField.styles__Input",
-    componentId: "sc-28a93ab-3"
+    componentId: "sc-a8826f8a-3"
 })([
     "box-sizing:border-box;appearance:none;border:0;padding:0;background-color:transparent;outline:none;width:100%;z-index:1;&.",
     "{",
@@ -123,7 +126,7 @@ var Input = _styledcomponents.default.input.withConfig({
 ], _TextFieldtokens.classes.inputTextEllipsis, (0, _mixins.applyEllipsis)());
 var InputContainer = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__InputContainer",
-    componentId: "sc-28a93ab-4"
+    componentId: "sc-a8826f8a-4"
 })([
     "position:relative;display:flex;flex:1;min-width:",
     ";",
@@ -138,7 +141,7 @@ var InputContainer = _styledcomponents.default.div.withConfig({
 });
 var InputPlaceholder = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__InputPlaceholder",
-    componentId: "sc-28a93ab-5"
+    componentId: "sc-a8826f8a-5"
 })([
     "display:flex;position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;white-space:nowrap;pointer-events:none;user-select:none;font:inherit;letter-spacing:inherit;line-height:inherit;color:var(",
     ");padding:",
@@ -147,9 +150,17 @@ var InputPlaceholder = _styledcomponents.default.div.withConfig({
     var hasPadding = param.hasPadding;
     return hasPadding ? "var(".concat(_TextFieldtokens.tokens.contentLabelInnerPadding, ")") : '0';
 });
+var InputPlaceholderValue = _styledcomponents.default.div.withConfig({
+    displayName: "TextField.styles__InputPlaceholderValue",
+    componentId: "sc-a8826f8a-6"
+})([
+    "&.",
+    "{",
+    "}"
+], _TextFieldtokens.classes.inputTextEllipsis, (0, _mixins.applyEllipsis)());
 var OuterLabelWrapper = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__OuterLabelWrapper",
-    componentId: "sc-28a93ab-6"
+    componentId: "sc-a8826f8a-7"
 })([
     "display:flex;align-items:center;white-space:",
     ";margin-bottom:",
@@ -163,25 +174,25 @@ var OuterLabelWrapper = _styledcomponents.default.div.withConfig({
 });
 var TitleCaption = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__TitleCaption",
-    componentId: "sc-28a93ab-7"
+    componentId: "sc-a8826f8a-8"
 })([
     "display:inline-block;margin-left:auto;"
 ]);
 var StyledIndicatorWrapper = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__StyledIndicatorWrapper",
-    componentId: "sc-28a93ab-8"
+    componentId: "sc-a8826f8a-9"
 })([
     "position:relative;display:inline-flex;align-items:center;"
 ]);
 var Label = _styledcomponents.default.label.withConfig({
     displayName: "TextField.styles__Label",
-    componentId: "sc-28a93ab-9"
+    componentId: "sc-a8826f8a-10"
 })([
     "display:inline-flex;"
 ]);
 var StyledContentLeft = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__StyledContentLeft",
-    componentId: "sc-28a93ab-10"
+    componentId: "sc-a8826f8a-11"
 })([
     "--private_content-slot-color:",
     ";margin:var(",
@@ -194,13 +205,13 @@ var StyledContentLeft = _styledcomponents.default.div.withConfig({
 }, _TextFieldtokens.tokens.leftContentMargin, _TextFieldtokens.tokens.contentSlotColorHover, _TextFieldtokens.tokens.contentSlotColorActive);
 var StyledContentRightWrapper = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__StyledContentRightWrapper",
-    componentId: "sc-28a93ab-11"
+    componentId: "sc-a8826f8a-12"
 })([
     "display:flex;align-items:center;"
 ]);
 var StyledContentRight = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__StyledContentRight",
-    componentId: "sc-28a93ab-12"
+    componentId: "sc-a8826f8a-13"
 })([
     "line-height:0;margin:var(",
     ");color:var(",
@@ -213,13 +224,13 @@ var StyledContentRight = _styledcomponents.default.div.withConfig({
 ], _TextFieldtokens.tokens.rightContentMargin, _TextFieldtokens.tokens.contentSlotRightColor, _TextFieldtokens.tokens.contentSlotColor, _TextFieldtokens.tokens.contentSlotRightColorHover, _TextFieldtokens.tokens.contentSlotColorHover, _TextFieldtokens.tokens.contentSlotRightColorActive, _TextFieldtokens.tokens.contentSlotColorActive);
 var LeftHelper = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__LeftHelper",
-    componentId: "sc-28a93ab-13"
+    componentId: "sc-a8826f8a-14"
 })([
     ""
 ]);
 var StyledTextBefore = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__StyledTextBefore",
-    componentId: "sc-28a93ab-14"
+    componentId: "sc-a8826f8a-15"
 })([
     "visibility:",
     ";"
@@ -229,20 +240,20 @@ var StyledTextBefore = _styledcomponents.default.div.withConfig({
 });
 var StyledTextAfter = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__StyledTextAfter",
-    componentId: "sc-28a93ab-15"
+    componentId: "sc-a8826f8a-16"
 })([
     ""
 ]);
 var StyledOptionalText = _styledcomponents.default.span.withConfig({
     displayName: "TextField.styles__StyledOptionalText",
-    componentId: "sc-28a93ab-16"
+    componentId: "sc-a8826f8a-17"
 })([
     "color:var(",
     ");"
 ], _TextFieldtokens.tokens.optionalColor);
 var StyledHintWrapper = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__StyledHintWrapper",
-    componentId: "sc-28a93ab-17"
+    componentId: "sc-a8826f8a-18"
 })([
     "display:inline-block;line-height:0;&.",
     "{position:absolute;margin:0;inset:var(",
@@ -250,14 +261,14 @@ var StyledHintWrapper = _styledcomponents.default.div.withConfig({
 ], _TextFieldtokens.classes.innerLabelPlacement, _TextFieldtokens.tokens.hintInnerLabelPlacementOffset);
 var HintTargetWrapper = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__HintTargetWrapper",
-    componentId: "sc-28a93ab-18"
+    componentId: "sc-a8826f8a-19"
 })([
     "color:var(",
     ");display:flex;justify-content:center;align-items:center;"
 ], _TextFieldtokens.tokens.hintIconColor);
 var Hint = (0, _styledcomponents.default)(Tooltip).withConfig({
     displayName: "TextField.styles__Hint",
-    componentId: "sc-28a93ab-19"
+    componentId: "sc-a8826f8a-20"
 })([
     "",
     " .",
@@ -265,13 +276,13 @@ var Hint = (0, _styledcomponents.default)(Tooltip).withConfig({
 ], HintTargetWrapper, _Popover.popoverClasses.root);
 var HintIconWrapper = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__HintIconWrapper",
-    componentId: "sc-28a93ab-20"
+    componentId: "sc-a8826f8a-21"
 })([
     "display:flex;"
 ]);
 var StyledIndicator = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__StyledIndicator",
-    componentId: "sc-28a93ab-21"
+    componentId: "sc-a8826f8a-22"
 })([
     "position:absolute;border-radius:50%;background-color:var(",
     ");&.",

package/styled-components/cjs/components/TextField/variations/_label-placement/base.js

@@ -37,7 +37,7 @@ var base = (0, _styledcomponents.css)([
     ");line-height:var(",
     ");}",
     "{color:var(",
-    ");pointer-events:none;position:absolute;top:0;display:flex;align-items:center;box-sizing:border-box;height:100%;}&.",
+    ");pointer-events:none;position:absolute;top:0;display:flex;align-items:center;box-sizing:border-box;height:100%;width:100%;}&.",
     " ",
     "{color:var(",
     ");}}"

package/styled-components/cjs/components/Toast/variations/_size/base.js

@@ -11,7 +11,7 @@ Object.defineProperty(exports, "base", {
 var _styledcomponents = require("styled-components");
 var _Toasttokens = require("../../Toast.tokens");
 var base = (0, _styledcomponents.css)([
-    "box-sizing:content-box;padding:var(",
+    "padding:var(",
     ");border-radius:var(",
     ");max-width:var(",
     ");flex-shrink:0;transform:translateX(-50%);font-family:var(",

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

@@ -1 +1,16 @@
 "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Combobox", {
+    enumerable: true,
+    get: function() {
+        return Combobox;
+    }
+});
+var _engines = require("../../../engines");
+var _ = require("../../..");
+var _Comboboxconfig = require("./Combobox.config");
+var mergedConfig = (0, _engines.mergeConfig)(_.comboboxNewConfig, _Comboboxconfig.config);
+var ComboboxComponent = (0, _engines.component)(mergedConfig);
+var Combobox = ComboboxComponent;

package/styled-components/es/components/Carousel/CarouselOld/CarouselItem.js

@@ -57,9 +57,9 @@ import React from "react";
 import styled from "styled-components";
 var StyledItem = styled.div.withConfig({
     displayName: "CarouselItem__StyledItem",
-    componentId: "sc-6bff0f9e-0"
+    componentId: "sc-5af2bbd6-0"
 })([
-    "box-sizing:content-box;scroll-snap-align:",
+    "scroll-snap-align:",
     ";scroll-snap-stop:",
     ";"
 ], function(param) {

package/styled-components/es/components/Steps/ui/StepItem/StepItem.styles.js

@@ -7,7 +7,7 @@ var mergedConfig = mergeConfig(spinnerConfig);
 var Spinner = component(mergedConfig);
 export var SpinnerStyled = styled(Spinner).withConfig({
     displayName: "StepItem.styles__SpinnerStyled",
-    componentId: "sc-ba9b3eb5-0"
+    componentId: "sc-b7ba9e5c-0"
 })([
     "",
     ":",
@@ -20,7 +20,7 @@ export var SpinnerStyled = styled(Spinner).withConfig({
 }, spinnerTokens.color, tokens.activeIndicatorColor);
 export var StepItemTitle = styled.div.withConfig({
     displayName: "StepItem.styles__StepItemTitle",
-    componentId: "sc-ba9b3eb5-1"
+    componentId: "sc-b7ba9e5c-1"
 })([
     "padding-top:var(",
     ");padding-right:var(",
@@ -34,7 +34,7 @@ export var StepItemTitle = styled.div.withConfig({
 ], tokens.titlePaddingTop, tokens.contentSidePadding, tokens.titleFontFamily, tokens.titleFontSize, tokens.titleFontStyle, tokens.titleFontWeight, tokens.titleLetterSpacing, tokens.titleLineHeight);
 export var StepItemContent = styled.div.withConfig({
     displayName: "StepItem.styles__StepItemContent",
-    componentId: "sc-ba9b3eb5-2"
+    componentId: "sc-b7ba9e5c-2"
 })([
     "padding-top:var(",
     ");padding-right:var(",
@@ -49,9 +49,9 @@ export var StepItemContent = styled.div.withConfig({
 ], tokens.contentPaddingTop, tokens.contentSidePadding, tokens.contentFontFamily, tokens.contentFontSize, tokens.contentFontStyle, tokens.contentFontWeight, tokens.contentLetterSpacing, tokens.contentLineHeight, tokens.contentColor);
 export var BulletIndicatorWrapper = styled.div.withConfig({
     displayName: "StepItem.styles__BulletIndicatorWrapper",
-    componentId: "sc-ba9b3eb5-3"
+    componentId: "sc-b7ba9e5c-3"
 })([
-    "display:flex;align-items:center;box-sizing:content-box;&:not(.",
+    "display:flex;align-items:center;&:not(.",
     "){flex:0;&.",
     "{width:100%;min-height:var(",
     ");}&:not(.",
@@ -73,7 +73,7 @@ export var BulletIndicatorWrapper = styled.div.withConfig({
 ], classes.simple, classes.hasIndicator, tokens.activeIndicatorSize, classes.hasIndicator, tokens.activeBulletSize, classes.verticalOrientation, tokens.verticalContentPaddingLeft, classes.simple, classes.hasIndicator, tokens.activeIndicatorSize, classes.hasIndicator, tokens.activeBulletSize, classes.verticalOrientation, classes.hasIndicator, tokens.activeIndicatorSize, classes.hasIndicator, tokens.activeBulletSize, classes.centered);
 export var BulletIndicator = styled.button.withConfig({
     displayName: "StepItem.styles__BulletIndicator",
-    componentId: "sc-ba9b3eb5-4"
+    componentId: "sc-b7ba9e5c-4"
 })([
     "display:flex;align-items:center;justify-content:center;width:var(",
     ");height:var(",
@@ -119,7 +119,7 @@ export var BulletIndicator = styled.button.withConfig({
 }), classes.inactive, tokens.inactiveIndicatorColor, tokens.inactiveIndicatorBackground, classes.simple, tokens.dividerColor);
 export var Bullet = styled(BulletIndicator).withConfig({
     displayName: "StepItem.styles__Bullet",
-    componentId: "sc-ba9b3eb5-5"
+    componentId: "sc-b7ba9e5c-5"
 })([
     "width:var(",
     ");height:var(",
@@ -133,7 +133,7 @@ export var Bullet = styled(BulletIndicator).withConfig({
 ], tokens.bulletSize, tokens.bulletSize, classes.active, tokens.activeBulletSize, tokens.activeBulletSize, tokens.dividerThickness, tokens.activeIndicatorBorder, tokens.activeIndicatorBackground);
 export var StepItemDivider = styled.div.withConfig({
     displayName: "StepItem.styles__StepItemDivider",
-    componentId: "sc-ba9b3eb5-6"
+    componentId: "sc-b7ba9e5c-6"
 })([
     "flex:1;width:100%;height:var(",
     ");background:var(",
@@ -162,7 +162,7 @@ export var StepItemDivider = styled.div.withConfig({
 }, classes.simple);
 export var StepItemContentWrapper = styled.div.withConfig({
     displayName: "StepItem.styles__StepItemContentWrapper",
-    componentId: "sc-ba9b3eb5-7"
+    componentId: "sc-b7ba9e5c-7"
 })([
     "&.",
     "{",
@@ -174,7 +174,7 @@ export var StepItemContentWrapper = styled.div.withConfig({
 ], classes.verticalOrientation, StepItemTitle, tokens.contentVerticalPadding, StepItemContent, tokens.contentVerticalPadding, tokens.contentVerticalPadding);
 export var StepItemStyled = styled.div.withConfig({
     displayName: "StepItem.styles__StepItemStyled",
-    componentId: "sc-ba9b3eb5-8"
+    componentId: "sc-b7ba9e5c-8"
 })([
     "position:relative;display:flex;flex-direction:column;align-items:flex-start;flex:1;color:var(",
     ");&.",

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

@@ -19,7 +19,7 @@ export var base = css([
 ]);
 export var Table = styled.table.withConfig({
     displayName: "Table.styles__Table",
-    componentId: "sc-382f3104-0"
+    componentId: "sc-20d0d4bc-0"
 })([
     "width:fit-content;font-family:var(",
     ");font-size:var(",
@@ -35,9 +35,9 @@ export var Table = styled.table.withConfig({
 });
 export var Tr = styled.tr.withConfig({
     displayName: "Table.styles__Tr",
-    componentId: "sc-382f3104-1"
+    componentId: "sc-20d0d4bc-1"
 })([
-    "box-sizing:content-box;width:fit-content;background-color:",
+    "width:fit-content;background-color:",
     ";"
 ], function(param) {
     var selected = param.selected;
@@ -45,7 +45,7 @@ export var Tr = styled.tr.withConfig({
 });
 export var Thead = styled.thead.withConfig({
     displayName: "Table.styles__Thead",
-    componentId: "sc-382f3104-2"
+    componentId: "sc-20d0d4bc-2"
 })([
     "position:",
     ";top:0;background:",
@@ -65,13 +65,13 @@ export var Thead = styled.thead.withConfig({
 }, Tr);
 export var Tbody = styled.tbody.withConfig({
     displayName: "Table.styles__Tbody",
-    componentId: "sc-382f3104-3"
+    componentId: "sc-20d0d4bc-3"
 })([
     ""
 ]);
 export var Resizer = styled.div.withConfig({
     displayName: "Table.styles__Resizer",
-    componentId: "sc-382f3104-4"
+    componentId: "sc-20d0d4bc-4"
 })([
     "display:",
     ";position:absolute;z-index:1;top:-0.0625rem;bottom:0;right:-0.125rem;width:0.1875rem;background:var(--outline-accent);cursor:col-resize;user-select:none;touch-action:none;"
@@ -81,11 +81,11 @@ export var Resizer = styled.div.withConfig({
 });
 export var Th = styled.th.withConfig({
     displayName: "Table.styles__Th",
-    componentId: "sc-382f3104-5"
+    componentId: "sc-20d0d4bc-5"
 })([
     "padding:",
     ";position:relative;font-weight:600;text-align:left;height:var(",
-    ");background-color:transparent;color:inherit;box-sizing:content-box;border-width:0.0625rem;border-top-width:0;border-bottom-width:0;border-style:solid;border-color:",
+    ");background-color:transparent;color:inherit;border-width:0.0625rem;border-top-width:0;border-bottom-width:0;border-style:solid;border-color:",
     ";&:hover{",
     "{display:block;}}"
 ], function(param) {
@@ -97,7 +97,7 @@ export var Th = styled.th.withConfig({
 }, Resizer);
 export var StyledCheckbox = styled(Checkbox).withConfig({
     displayName: "Table.styles__StyledCheckbox",
-    componentId: "sc-382f3104-6"
+    componentId: "sc-20d0d4bc-6"
 })([
     "",
     ":var(",
@@ -117,7 +117,7 @@ export var StyledCheckbox = styled(Checkbox).withConfig({
 ], checkboxTokens.triggerSize, tokens.checkboxTriggerSize, checkboxTokens.triggerBorderRadius, tokens.checkboxTriggerBorderRadius, checkboxTokens.fillColor, tokens.checkboxFillColor, checkboxTokens.iconColor, tokens.checkboxTriggerIconColor, checkboxTokens.triggerBorderCheckedColor, tokens.checkboxTriggerBorderCheckedColor, checkboxTokens.triggerBorderWidth, tokens.checkboxTriggerBorderWidth, checkboxTokens.triggerBorderColor, tokens.checkboxTriggerBorderColor);
 export var StyledDivider = styled(Divider).withConfig({
     displayName: "Table.styles__StyledDivider",
-    componentId: "sc-382f3104-7"
+    componentId: "sc-20d0d4bc-7"
 })([
     "",
     ":0.0625rem;",
@@ -126,7 +126,7 @@ export var StyledDivider = styled(Divider).withConfig({
 ], dividerTokens.baseSideSize, dividerTokens.background, dividerTokens.borderRadius);
 export var Button = styled(ButtonBase).withConfig({
     displayName: "Table.styles__Button",
-    componentId: "sc-382f3104-8"
+    componentId: "sc-20d0d4bc-8"
 })([
     "",
     ":var(",
@@ -147,7 +147,7 @@ export var Button = styled(ButtonBase).withConfig({
 ], buttonTokens.buttonHeight, tokens.buttonHeight, buttonTokens.buttonDisabledOpacity, buttonTokens.buttonFontFamily, tokens.buttonFontFamily, buttonTokens.buttonFontSize, tokens.buttonFontSize, buttonTokens.buttonFontStyle, tokens.buttonFontStyle, buttonTokens.buttonFontWeight, tokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, tokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, tokens.buttonLineHeight);
 export var ButtonAccent = styled(Button).withConfig({
     displayName: "Table.styles__ButtonAccent",
-    componentId: "sc-382f3104-9"
+    componentId: "sc-20d0d4bc-9"
 })([
     "",
     ":var(--on-dark-text-primary);",
@@ -158,7 +158,7 @@ export var ButtonAccent = styled(Button).withConfig({
 ], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonBackgroundColorActive);
 export var LinkButton = styled(LinkButtonBase).withConfig({
     displayName: "Table.styles__LinkButton",
-    componentId: "sc-382f3104-10"
+    componentId: "sc-20d0d4bc-10"
 })([
     "",
     ":var(--text-primary);",

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

@@ -113,7 +113,7 @@ import { base as labelPlacementCSS } from "./variations/_label-placement/base";
 import { base as hintViewCSS } from "./variations/_hint-view/base";
 import { base as hintSizeCSS } from "./variations/_hint-size/base";
 import { base as chipViewCSS } from "./variations/_chip-view/base";
-import { Input, InputContainer, LeftHelper, Label, InputWrapper, InputLabelWrapper, StyledContentLeft, StyledContentRight, StyledChips, StyledTextBefore, StyledTextAfter, StyledIndicator, StyledOptionalText, InputPlaceholder, OuterLabelWrapper, TitleCaption, StyledHintWrapper, StyledIndicatorWrapper, StyledContentRightWrapper } from "./TextField.styles";
+import { Input, InputContainer, LeftHelper, Label, InputWrapper, InputLabelWrapper, StyledContentLeft, StyledContentRight, StyledChips, StyledTextBefore, StyledTextAfter, StyledIndicator, StyledOptionalText, InputPlaceholder, OuterLabelWrapper, TitleCaption, StyledHintWrapper, StyledIndicatorWrapper, StyledContentRightWrapper, InputPlaceholderValue } from "./TextField.styles";
 import { classes } from "./TextField.tokens";
 import { TextFieldChip, TextFieldChipNew } from "./ui";
 import { useKeyNavigation } from "./hooks";
@@ -543,11 +543,15 @@ export var textFieldRoot = function(Root) {
             "data-root": true,
             id: labelId,
             htmlFor: innerId
-        }, innerLabelValue, optionalTextNode), placeholderShown && !hasValue && /*#__PURE__*/ React.createElement(InputPlaceholder, {
+        }, /*#__PURE__*/ React.createElement(InputPlaceholderValue, {
+            className: cx(classTextEllipsis)
+        }, innerLabelValue), optionalTextNode), placeholderShown && !hasValue && /*#__PURE__*/ React.createElement(InputPlaceholder, {
             hasPadding: hasPlaceholderPadding
         }, hasTextBefore && /*#__PURE__*/ React.createElement(StyledTextBefore, {
             isHidden: true
-        }, textBefore), innerPlaceholderValue, hasPlaceholderOptional && optionalTextNode), hasTextAfter && /*#__PURE__*/ React.createElement(StyledTextAfter, null, textAfter))), /*#__PURE__*/ React.createElement(StyledContentRightWrapper, {
+        }, textBefore), innerPlaceholderValue && /*#__PURE__*/ React.createElement(InputPlaceholderValue, {
+            className: cx(classTextEllipsis)
+        }, innerPlaceholderValue), hasPlaceholderOptional && optionalTextNode), hasTextAfter && /*#__PURE__*/ React.createElement(StyledTextAfter, null, textAfter))), /*#__PURE__*/ React.createElement(StyledContentRightWrapper, {
             className: cx(contentRightCompensationMargin)
         }, contentRight && /*#__PURE__*/ React.createElement(StyledContentRight, {
             "data-root": true