@salutejs/plasma-new-hope 0.195.2-canary.1580.11946918297.0 → 0.196.0-canary.1556.11950950085.0

package/styled-components/cjs/examples/plasma_web/components/Slider/Slider.stories.tsx

@@ -18,7 +18,7 @@ const scaleAligns = ['side', 'bottom'];
 const orientations: Array<string> = ['vertical', 'horizontal'];
 
 const meta: Meta<typeof Slider> = {
-    title: 'web/Data Entry/Slider',
+    title: 'plasma_web/Slider',
     component: Slider,
     decorators: [WithTheme],
     argTypes: {

package/styled-components/cjs/examples/plasma_web/components/Spinner/Spinner.stories.tsx

@@ -10,7 +10,7 @@ import { config } from './Spinner.config';
 import { Spinner } from './Spinner';
 
 const meta: Meta<typeof Spinner> = {
-    title: 'web/Data Display/Spinner',
+    title: 'plasma_web/Spinner',
     decorators: [WithTheme],
     component: Spinner,
     args: {

package/styled-components/cjs/examples/plasma_web/components/Steps/Steps.stories.tsx

@@ -10,7 +10,7 @@ import { StepItemProps } from '../../../../components/Steps/ui';
 import { Steps, mergedConfig } from './Steps';
 
 const meta: Meta<typeof Steps> = {
-    title: 'web/Navigation/Steps',
+    title: 'plasma_web/Steps',
     decorators: [WithTheme],
     component: Steps,
     argTypes: {

package/styled-components/cjs/examples/plasma_web/components/Switch/Switch.stories.tsx

@@ -14,7 +14,7 @@ import { Switch, SwitchOutline } from './Switch';
 type SwitchProps = ComponentProps<typeof Switch>;
 
 const meta: Meta<SwitchProps> = {
-    title: 'web/Data Entry/Switch',
+    title: 'plasma_web/Switch',
     decorators: [WithTheme],
     component: Switch,
     argTypes: {

package/styled-components/cjs/examples/plasma_web/components/Tabs/Tabs.stories.tsx

@@ -56,7 +56,7 @@ type HorizontalStoryTabsProps = StoryTabsProps & { width: string };
 type VerticalStoryTabsProps = StoryTabsProps & { height: string };
 
 const meta: Meta<StoryTabsProps> = {
-    title: 'web/Navigation/Tabs',
+    title: 'plasma_web/Tabs',
     component: Tabs,
     decorators: [WithTheme],
     argTypes: {

package/styled-components/cjs/examples/plasma_web/components/TextArea/TextArea.stories.tsx

@@ -44,7 +44,7 @@ type StoryTextAreaPropsCustom = {
 type StoryTextAreaProps = ComponentProps<typeof TextArea> & StoryTextAreaPropsCustom;
 
 const meta: Meta<StoryTextAreaProps> = {
-    title: 'web/Data Entry/TextArea',
+    title: 'plasma_web/TextArea',
     decorators: [WithTheme],
     component: TextArea,
     argTypes: {

package/styled-components/cjs/examples/plasma_web/components/TextField/TextField.stories.tsx

@@ -42,7 +42,7 @@ const placements: Array<PopoverPlacement> = [
 ];
 
 const meta: Meta<typeof TextField> = {
-    title: 'web/Data Entry/TextField',
+    title: 'plasma_web/TextField',
     component: TextField,
     decorators: [WithTheme],
     argTypes: {
@@ -87,6 +87,12 @@ const meta: Meta<typeof TextField> = {
                 type: 'inline-radio',
             },
         },
+        hasPlaceholder: {
+            control: {
+                type: 'boolean',
+            },
+            if: { arg: 'labelPlacement', eq: 'inner' },
+        },
         size: {
             options: sizes,
             control: {
@@ -210,6 +216,7 @@ export const Default: StoryObj<StoryPropsDefault> = {
         view: 'default',
         label: 'Лейбл',
         labelPlacement: 'outer',
+        hasPlaceholder: false,
         titleCaption: 'Подпись к полю',
         textBefore: '',
         textAfter: '',
@@ -219,11 +226,11 @@ export const Default: StoryObj<StoryPropsDefault> = {
         readOnly: false,
         enableContentLeft: true,
         enableContentRight: true,
-        clear: false,
-        hasDivider: false,
         optional: false,
         required: false,
         requiredPlacement: 'right',
+        clear: false,
+        hasDivider: false,
         hasHint: true,
         hintText: 'Текст подсказки',
         hintTrigger: 'hover',

package/styled-components/cjs/examples/plasma_web/components/TextFieldGroup/TextFieldGroup.stories.tsx

@@ -23,7 +23,7 @@ const shapeValues = ['segmented', 'default'];
 const stretchingValues = ['auto', 'filled'];
 
 const meta: Meta<typeof TextFieldGroup> = {
-    title: 'web/Data Entry/TextFieldGroup',
+    title: 'plasma_web/TextFieldGroup',
     decorators: [WithTheme],
     argTypes: {
         size: {

package/styled-components/cjs/examples/plasma_web/components/Toast/Toast.stories.tsx

@@ -17,7 +17,7 @@ import { config } from './Toast.config';
 import { Toast, ToastController, ToastProvider, useToast } from './Toast';
 
 const meta: Meta<typeof ToastController> = {
-    title: 'web/Overlay/Toast',
+    title: 'plasma_web/Toast',
     decorators: [WithTheme],
 };
 

package/styled-components/cjs/examples/plasma_web/components/Toolbar/Toolbar.stories.tsx

@@ -25,7 +25,7 @@ const ToolbarWrapper = (props: ComponentProps<typeof Toolbar>) => {
 };
 
 const meta: Meta<typeof Toolbar> = {
-    title: 'web/Overlay/Toolbar',
+    title: 'plasma_web/Toolbar',
     component: ToolbarWrapper,
     decorators: [WithTheme],
     argTypes: {

package/styled-components/cjs/examples/plasma_web/components/Tooltip/Tooltip.stories.tsx

@@ -31,7 +31,7 @@ const placements: Array<PopoverPlacement> = [
 ];
 
 const meta: Meta<TooltipProps> = {
-    title: 'web/Overlay/Tooltip',
+    title: 'plasma_web/Tooltip',
     decorators: [WithTheme],
     component: Tooltip,
     parameters: {

package/styled-components/cjs/examples/plasma_web/components/ViewContainer/ViewContainer.stories.tsx

@@ -10,7 +10,7 @@ import { ViewContainer } from './ViewContainer';
 type StoryViewProps = ComponentProps<typeof ViewContainer>;
 
 const meta: Meta<StoryViewProps> = {
-    title: 'web/Data Display/ViewContainer',
+    title: 'plasma_web/ViewContainer',
 };
 
 export default meta;

package/styled-components/cjs/examples/typograpy/components/Body/Body.stories.tsx

@@ -9,7 +9,7 @@ import { Body } from './Body';
 import { config } from './Body.config';
 
 const meta: Meta<typeof Body> = {
-    title: 'Data Display/Typography/Body',
+    title: 'typography/Body',
     decorators: [WithTheme],
     component: Body,
     argTypes: argTypesFromConfig(mergeConfig(bodyConfig, config)),

package/styled-components/cjs/examples/typograpy/components/Dspl/Dspl.stories.tsx

@@ -9,7 +9,7 @@ import { Dspl } from './Dspl';
 import { config } from './Dspl.config';
 
 const meta: Meta<typeof Dspl> = {
-    title: 'Data Display/Typography/Dspl',
+    title: 'typography/Dspl',
     decorators: [WithTheme],
     component: Dspl,
     argTypes: argTypesFromConfig(mergeConfig(dsplConfig, config)),

package/styled-components/cjs/examples/typograpy/components/Heading/Heading.stories.tsx

@@ -9,7 +9,7 @@ import { Heading } from './Heading';
 import { config } from './Heading.config';
 
 const meta: Meta<typeof Heading> = {
-    title: 'Data Display/Typography/Heading',
+    title: 'typography/Heading',
     decorators: [WithTheme],
     component: Heading,
     argTypes: argTypesFromConfig(mergeConfig(dsplConfig, config)),

package/styled-components/cjs/examples/typograpy/components/Old/Body/Body.stories.tsx

@@ -9,7 +9,7 @@ import { OldBody } from './Body';
 import { config } from './Body.config';
 
 const meta: Meta<typeof OldBody> = {
-    title: 'Data Display/Typography/Old/Body',
+    title: 'typography/Old/Body',
     decorators: [WithTheme],
     component: OldBody,
     argTypes: argTypesFromConfig(mergeConfig(oldBodyConfig, config)),

package/styled-components/cjs/examples/typograpy/components/Old/Button/Button.stories.tsx

@@ -9,7 +9,7 @@ import { Button } from './Button';
 import { config } from './Button.config';
 
 const meta: Meta<typeof Button> = {
-    title: 'Data Display/Typography/Old/Button',
+    title: 'typography/Old/Button',
     decorators: [WithTheme],
     component: Button,
     argTypes: argTypesFromConfig(mergeConfig(buttonTypographyConfig, config)),

package/styled-components/cjs/examples/typograpy/components/Old/Caption/Caption.stories.tsx

@@ -9,7 +9,7 @@ import { Caption } from './Caption';
 import { config } from './Caption.config';
 
 const meta: Meta<typeof Caption> = {
-    title: 'Data Display/Typography/Old/Caption',
+    title: 'typography/Old/Caption',
     decorators: [WithTheme],
     component: Caption,
     argTypes: argTypesFromConfig(mergeConfig(captionConfig, config)),

package/styled-components/cjs/examples/typograpy/components/Old/Display/Display.stories.tsx

@@ -9,7 +9,7 @@ import { Display } from './Display';
 import { config } from './Display.config';
 
 const meta: Meta<typeof Display> = {
-    title: 'Data Display/Typography/Old/Display',
+    title: 'typography/Old/Display',
     decorators: [WithTheme],
     component: Display,
     argTypes: argTypesFromConfig(mergeConfig(displayConfig, config)),

package/styled-components/cjs/examples/typograpy/components/Old/Footnote/Footnote.stories.tsx

@@ -9,7 +9,7 @@ import { Footnote } from './Footnote';
 import { config } from './Footnote.config';
 
 const meta: Meta<typeof Footnote> = {
-    title: 'Data Display/Typography/Old/Footnote',
+    title: 'typography/Old/Footnote',
     decorators: [WithTheme],
     component: Footnote,
     argTypes: argTypesFromConfig(mergeConfig(footnoteConfig, config)),

package/styled-components/cjs/examples/typograpy/components/Old/Headline/Headline.stories.tsx

@@ -9,7 +9,7 @@ import { Headline } from './Headline';
 import { config } from './Headline.config';
 
 const meta: Meta<typeof Headline> = {
-    title: 'Data Display/Typography/Old/Headline',
+    title: 'typography/Old/Headline',
     decorators: [WithTheme],
     component: Headline,
     argTypes: argTypesFromConfig(mergeConfig(headlineConfig, config)),

package/styled-components/cjs/examples/typograpy/components/Old/Paragraph/Paragraph.stories.tsx

@@ -9,7 +9,7 @@ import { Paragraph } from './Paragraph';
 import { config } from './Paragraph.config';
 
 const meta: Meta<typeof Paragraph> = {
-    title: 'Data Display/Typography/Old/Paragraph',
+    title: 'typography/Old/Paragraph',
     decorators: [WithTheme],
     component: Paragraph,
     argTypes: argTypesFromConfig(mergeConfig(paragraphConfig, config)),

package/styled-components/cjs/examples/typograpy/components/Old/Subtitle/Subtitle.stories.tsx

@@ -9,7 +9,7 @@ import { Subtitle } from './Subtitle';
 import { config } from './Subtitle.config';
 
 const meta: Meta<typeof Subtitle> = {
-    title: 'Data Display/Typography/Old/Subtitle',
+    title: 'typography/Old/Subtitle',
     decorators: [WithTheme],
     component: Subtitle,
     argTypes: argTypesFromConfig(mergeConfig(subtitleConfig, config)),

package/styled-components/cjs/examples/typograpy/components/Old/Underline/Underline.stories.tsx

@@ -9,7 +9,7 @@ import { Underline } from './Underline';
 import { config } from './Underline.config';
 
 const meta: Meta<typeof Underline> = {
-    title: 'Data Display/Typography/Old/Underline',
+    title: 'typography/Old/Underline',
     decorators: [WithTheme],
     component: Underline,
     argTypes: argTypesFromConfig(mergeConfig(underlineConfig, config)),

package/styled-components/cjs/examples/typograpy/components/Text/Text.stories.tsx

@@ -9,7 +9,7 @@ import { Text } from './Text';
 import { config } from './Text.config';
 
 const meta: Meta<typeof Text> = {
-    title: 'Data Display/Typography/Text',
+    title: 'typography/Text',
     decorators: [WithTheme],
     component: Text,
     argTypes: argTypesFromConfig(mergeConfig(textConfig, config)),

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

@@ -1,4 +1,4 @@
-var _excluded = ["value", "onChange", "suggestions", "view", "size", "labelPlacement", "disabled", "readOnly", "label", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "onScroll", "listMaxHeight", "listWidth", "portal", "filter", "onSuggestionSelect", "threshold", "renderList", "renderListEnd", "onSearch", "hintText"];
+var _excluded = ["value", "onChange", "suggestions", "view", "size", "labelPlacement", "hasPlaceholder", "disabled", "readOnly", "label", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "onScroll", "listMaxHeight", "listWidth", "portal", "filter", "onSuggestionSelect", "threshold", "renderList", "renderListEnd", "onSearch", "hintText"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -28,6 +28,7 @@ export var autocompleteRoot = function autocompleteRoot(Root) {
       view = _ref.view,
       size = _ref.size,
       labelPlacement = _ref.labelPlacement,
+      hasPlaceholder = _ref.hasPlaceholder,
       disabled = _ref.disabled,
       readOnly = _ref.readOnly,
       label = _ref.label,
@@ -147,6 +148,11 @@ export var autocompleteRoot = function autocompleteRoot(Root) {
         "aria-activedescendant": "".concat(listId, "/").concat(focused),
         "aria-describedby": helperTextId,
         hintText: String(hintText || '')
+      }, labelPlacement === 'inner' ? {
+        labelPlacement: labelPlacement,
+        hasPlaceholder: hasPlaceholder
+      } : {
+        labelPlacement: labelPlacement
       }, rest)),
       preventOverflow: false,
       ref: targetRef,

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

@@ -1,4 +1,4 @@
-var _excluded = ["multiple", "value", "onChange", "isTargetAmount", "targetAmount", "items", "placement", "label", "placeholder", "helperText", "contentLeft", "textBefore", "textAfter", "variant", "listOverflow", "listHeight", "listWidth", "portal", "renderItem", "view", "size", "labelPlacement", "readOnly", "disabled", "alwaysOpened", "filter", "closeAfterSelect", "renderValue"];
+var _excluded = ["multiple", "value", "onChange", "isTargetAmount", "targetAmount", "items", "placement", "label", "placeholder", "helperText", "contentLeft", "textBefore", "textAfter", "variant", "listOverflow", "listHeight", "listWidth", "portal", "renderItem", "view", "size", "labelPlacement", "hasPlaceholder", "readOnly", "disabled", "alwaysOpened", "filter", "closeAfterSelect", "renderValue"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -59,6 +59,7 @@ export var comboboxRoot = function comboboxRoot(Root) {
       view = props.view,
       size = props.size,
       labelPlacement = props.labelPlacement,
+      hasPlaceholder = props.hasPlaceholder,
       _props$readOnly = props.readOnly,
       readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
       _props$disabled = props.disabled,
@@ -386,7 +387,6 @@ export var comboboxRoot = function comboboxRoot(Root) {
           onChange: handleTextValueChange,
           size: size,
           view: view,
-          labelPlacement: labelPlacement,
           disabled: disabled,
           readOnly: readOnly,
           label: label,
@@ -409,6 +409,11 @@ export var comboboxRoot = function comboboxRoot(Root) {
           "aria-controls": "".concat(treeId, "_tree_level_1"),
           "aria-expanded": isCurrentListOpen,
           "aria-activedescendant": activeDescendantItemValue ? getItemId(treeId, activeDescendantItemValue) : ''
+        }, labelPlacement === 'inner' ? {
+          labelPlacement: labelPlacement,
+          hasPlaceholder: hasPlaceholder
+        } : {
+          labelPlacement: labelPlacement
         }, multiple ? {
           enumerationType: 'chip',
           chips: getChips(),

package/styled-components/es/components/DatePicker/SingleDate/SingleDate.js

@@ -1,4 +1,4 @@
-var _excluded = ["className", "opened", "label", "labelPlacement", "placeholder", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "view", "size", "readOnly", "disabled", "name", "defaultDate", "valueError", "valueSuccess", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "frame", "usePortal", "placement", "closeOnOverlayClick", "closeOnEsc", "offset", "onChangeValue", "onCommitDate", "onToggle", "onFocus", "onBlur", "onChange"];
+var _excluded = ["className", "opened", "label", "labelPlacement", "hasPlaceholder", "placeholder", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "view", "size", "readOnly", "disabled", "name", "defaultDate", "valueError", "valueSuccess", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "frame", "usePortal", "placement", "closeOnOverlayClick", "closeOnEsc", "offset", "onChangeValue", "onCommitDate", "onToggle", "onFocus", "onBlur", "onChange"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -28,6 +28,7 @@ export var datePickerRoot = function datePickerRoot(Root) {
       label = _ref.label,
       _ref$labelPlacement = _ref.labelPlacement,
       labelPlacement = _ref$labelPlacement === void 0 ? 'outer' : _ref$labelPlacement,
+      hasPlaceholder = _ref.hasPlaceholder,
       placeholder = _ref.placeholder,
       leftHelper = _ref.leftHelper,
       contentLeft = _ref.contentLeft,
@@ -164,10 +165,14 @@ export var datePickerRoot = function datePickerRoot(Root) {
       },
       onFocus: onFocus,
       onBlur: onBlur,
-      onKeyDown: onKeyDown
-    }, innerLabelPlacement && {
-      label: label,
+      onKeyDown: onKeyDown,
       labelPlacement: labelPlacement
+    }, labelPlacement === 'inner' ? {
+      label: label,
+      labelPlacement: labelPlacement,
+      hasPlaceholder: hasPlaceholder
+    } : {
+      labelPlacement: undefined
     }));
     useEffect(function () {
       setIsInnerOpen(function (prevOpen) {

package/styled-components/es/components/Select/ui/Target/ui/Textfield/Textfield.js

@@ -16,9 +16,10 @@ export var Textfield = /*#__PURE__*/forwardRef(function (_ref, ref) {
     multiselect = _ref.multiselect,
     value = _ref.value,
     label = _ref.label,
+    labelPlacement = _ref.labelPlacement,
+    hasPlaceholder = _ref.hasPlaceholder,
     placeholder = _ref.placeholder,
     onKeyDown = _ref.onKeyDown,
-    labelPlacement = _ref.labelPlacement,
     size = _ref.size,
     view = _ref.view,
     handleClickArrow = _ref.handleClickArrow,
@@ -80,10 +81,16 @@ export var Textfield = /*#__PURE__*/forwardRef(function (_ref, ref) {
     value: multiselect ? undefined : ((_valueToItemMap$get = valueToItemMap.get(value.toString())) === null || _valueToItemMap$get === void 0 ? void 0 : _valueToItemMap$get.label) || '',
     size: size,
     view: view,
-    chipView: chipView,
+    chipView: chipView
+  }, labelPlacement === 'inner' ? {
+    label: label,
     labelPlacement: labelPlacement,
-    disabled: disabled,
+    hasPlaceholder: hasPlaceholder
+  } : {
     label: label,
+    labelPlacement: labelPlacement
+  }, {
+    disabled: disabled,
     placeholder: value instanceof Array && value.length ? '' : placeholder,
     contentLeft: contentLeft,
     contentRight: /*#__PURE__*/React.createElement(IconArrowWrapper, {

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

@@ -1,4 +1,4 @@
-var _excluded = ["id", "className", "style", "contentLeft", "contentRight", "label", "labelPlacement", "textBefore", "textAfter", "placeholder", "leftHelper", "enumerationType", "requiredPlacement", "titleCaption", "hintTrigger", "hintText", "hintView", "hintSize", "hintTargetIcon", "hintPlacement", "hintHasArrow", "hintOffset", "hintWidth", "hintContentLeft", "view", "size", "readOnly", "disabled", "required", "clear", "optional", "hasDivider", "value", "chips", "onChange", "onChangeChips", "onSearch", "onKeyDown"];
+var _excluded = ["id", "className", "style", "contentLeft", "contentRight", "label", "labelPlacement", "hasPlaceholder", "textBefore", "textAfter", "placeholder", "leftHelper", "enumerationType", "requiredPlacement", "titleCaption", "hintTrigger", "hintText", "hintView", "hintSize", "hintTargetIcon", "hintPlacement", "hintHasArrow", "hintOffset", "hintWidth", "hintContentLeft", "view", "size", "readOnly", "disabled", "required", "clear", "optional", "hasDivider", "value", "chips", "onChange", "onChangeChips", "onSearch", "onKeyDown"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -39,6 +39,7 @@ export var textFieldRoot = function textFieldRoot(Root) {
       contentRight = _ref.contentRight,
       label = _ref.label,
       labelPlacement = _ref.labelPlacement,
+      hasPlaceholder = _ref.hasPlaceholder,
       textBefore = _ref.textBefore,
       textAfter = _ref.textAfter,
       placeholder = _ref.placeholder,
@@ -114,10 +115,10 @@ export var textFieldRoot = function textFieldRoot(Root) {
     var hasLabelValue = Boolean(label);
     var hasInnerLabel = size !== 'xs' && labelPlacement === 'inner' && !isChipsVisible && hasLabelValue;
     var hasOuterLabel = labelPlacement === 'outer' && hasLabelValue;
-    var hasPlaceholder = Boolean(placeholder) && !hasInnerLabel;
+    var innerHasPlaceholder = Boolean(placeholder) && (hasPlaceholder || !hasInnerLabel);
     var innerLabelValue = hasInnerLabel || hasOuterLabel ? label : undefined;
     var innerLabelPlacementValue = labelPlacement === 'inner' && !hasInnerLabel ? undefined : labelPlacement;
-    var innerPlaceholderValue = hasPlaceholder ? placeholder : undefined;
+    var innerPlaceholderValue = innerHasPlaceholder ? placeholder : undefined;
     var placeholderShown = Boolean(innerPlaceholderValue) && !hasValue;
     var clearClass = clear ? classes.clear : undefined;
     var hasDividerClass = hasDivider ? classes.hasDivider : undefined;
@@ -125,6 +126,7 @@ export var textFieldRoot = function textFieldRoot(Root) {
     var requiredPlacementClass = requiredPlacement === 'right' ? classes.requiredAlignRight : undefined;
     var labelPlacementClass = innerLabelPlacementValue ? classes["".concat(innerLabelPlacementValue, "LabelPlacement")] : undefined;
     var hasValueClass = hasValue ? classes.hasValue : undefined;
+    var hasPlaceholderClass = innerHasPlaceholder && placeholderShown && classes.forcePlaceholder;
     var wrapperWithoutLeftContent = !contentLeft && isChipsVisible ? classes.hasEmptyContentLeft : undefined;
     var wrapperWithoutRightContent = !contentRight && isChipsVisible ? classes.hasEmptyContentRight : undefined;
     var hintRef = useOutsideClick(function () {
@@ -333,7 +335,7 @@ export var textFieldRoot = function textFieldRoot(Root) {
       "aria-labelledby": labelId,
       "aria-describedby": helperTextId,
       placeholder: innerPlaceholderValue,
-      className: cx(hasValueClass),
+      className: cx(hasValueClass, hasPlaceholderClass),
       disabled: disabled,
       readOnly: !disabled && readOnly,
       onInput: handleInput,
@@ -342,7 +344,9 @@ export var textFieldRoot = function textFieldRoot(Root) {
     }, rest)), hasInnerLabel && /*#__PURE__*/React.createElement(Label, {
       id: labelId,
       htmlFor: innerId
-    }, innerLabelValue, optionalTextNode), placeholderShown && !hasValue && /*#__PURE__*/React.createElement(InputPlaceholder, null, innerPlaceholderValue, hasPlaceholderOptional && optionalTextNode)), textAfter && /*#__PURE__*/React.createElement(StyledTextAfter, null, textAfter)), contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight)), leftHelper && /*#__PURE__*/React.createElement(LeftHelper, {
+    }, innerLabelValue, optionalTextNode), placeholderShown && !hasValue && /*#__PURE__*/React.createElement(InputPlaceholder, {
+      hasPadding: hasPlaceholder && size !== 'xs'
+    }, innerPlaceholderValue, hasPlaceholderOptional && optionalTextNode)), textAfter && /*#__PURE__*/React.createElement(StyledTextAfter, null, textAfter)), contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight)), leftHelper && /*#__PURE__*/React.createElement(LeftHelper, {
       id: helperTextId
     }, leftHelper));
   });

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

@@ -24,11 +24,14 @@ export var InputContainer = /*#__PURE__*/styled.div.withConfig({
 })(["position:relative;flex:1;min-width:60%;"]);
 export var InputPlaceholder = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-g4vxbb-6"
-})(["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(", ");"], tokens.placeholderColor);
+})(["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:", ";"], tokens.placeholderColor, function (_ref) {
+  var hasPadding = _ref.hasPadding;
+  return hasPadding ? "var(".concat(tokens.contentLabelInnerPadding, ")") : '0';
+});
 export var OuterLabelWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-g4vxbb-7"
-})(["display:flex;align-items:center;margin-bottom:", ";"], function (_ref) {
-  var isInnerLabel = _ref.isInnerLabel;
+})(["display:flex;align-items:center;margin-bottom:", ";"], function (_ref2) {
+  var isInnerLabel = _ref2.isInnerLabel;
   return isInnerLabel ? "var(".concat(tokens.titleCaptionInnerLabelOffset, ")") : "var(".concat(tokens.labelOffset, ")");
 });
 export var TitleCaption = /*#__PURE__*/styled.div.withConfig({
@@ -42,9 +45,9 @@ export var Label = /*#__PURE__*/styled.label.withConfig({
 })(["display:inline-flex;"]);
 export var StyledContentLeft = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-g4vxbb-11"
-})(["margin:var(", ");color:", ";line-height:0;"], tokens.leftContentMargin, function (_ref2) {
-  var isDefaultView = _ref2.isDefaultView,
-    isClear = _ref2.isClear;
+})(["margin:var(", ");color:", ";line-height:0;"], tokens.leftContentMargin, function (_ref3) {
+  var isDefaultView = _ref3.isDefaultView,
+    isClear = _ref3.isClear;
   return !isDefaultView && isClear ? "var(".concat(tokens.clearColor, ")") : "var(".concat(tokens.contentSlotColor, ")");
 });
 export var StyledContentRight = /*#__PURE__*/styled.div.withConfig({

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

@@ -1,6 +1,7 @@
 export var classes = {
   hasChips: 'has-chips',
   hasValue: 'has-value',
+  forcePlaceholder: 'force-placeholder',
   hasEmptyContentLeft: 'has-empty-content-left',
   hasEmptyContentRight: 'has-empty-content-right',
   innerLabelPlacement: 'label-placement-inner',

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

@@ -1,4 +1,4 @@
 import { css } from 'styled-components';
 import { classes, tokens } from '../../TextField.tokens';
 import { Input, InputContainer, Label, StyledTextAfter, StyledTextBefore } from '../../TextField.styles';
-export var base = /*#__PURE__*/css(["&.", "{", "{position:relative;display:inline-block;color:var(", ");}}&.", "{", "{padding:var(", ");}", ",", "{padding:var(", ");}", ":focus ~ ", ",", ".", " ~ ", "{color:var(", ");align-items:flex-start;padding:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{color:var(", ");pointer-events:none;position:absolute;top:0;display:flex;align-items:center;box-sizing:border-box;height:var(", ");padding-top:calc(calc(var(", ") - var(", ")) / 2);padding-bottom:calc(calc(var(", ") - var(", ")) / 2);}&.", " ", "{color:var(", ");}}"], classes.outerLabelPlacement, Label, tokens.labelColor, classes.innerLabelPlacement, InputContainer, tokens.contentLabelInnerPadding, StyledTextAfter, StyledTextBefore, tokens.contentLabelInnerPadding, Input, Label, Input, classes.hasValue, Label, tokens.placeholderColor, tokens.labelInnerPadding, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight, Label, tokens.placeholderColor, tokens.height, tokens.height, tokens.labelLineHeight, tokens.height, tokens.labelLineHeight, classes.clear, Label, tokens.clearPlaceholderColor);
+export var base = /*#__PURE__*/css(["&.", "{", "{position:relative;display:inline-block;color:var(", ");}}&.", "{", "{padding:var(", ");}", ",", "{padding:var(", ");}", ":focus ~ ", ",", ".", " ~ ", ",", ".", " ~ ", "{color:var(", ");align-items:flex-start;padding:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{color:var(", ");pointer-events:none;position:absolute;top:0;display:flex;align-items:center;box-sizing:border-box;height:var(", ");padding-top:calc(calc(var(", ") - var(", ")) / 2);padding-bottom:calc(calc(var(", ") - var(", ")) / 2);}&.", " ", "{color:var(", ");}}"], classes.outerLabelPlacement, Label, tokens.labelColor, classes.innerLabelPlacement, InputContainer, tokens.contentLabelInnerPadding, StyledTextAfter, StyledTextBefore, tokens.contentLabelInnerPadding, Input, Label, Input, classes.hasValue, Label, Input, classes.forcePlaceholder, Label, tokens.placeholderColor, tokens.labelInnerPadding, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight, Label, tokens.placeholderColor, tokens.height, tokens.height, tokens.labelLineHeight, tokens.height, tokens.labelLineHeight, classes.clear, Label, tokens.clearPlaceholderColor);

package/styled-components/es/examples/plasma_b2c/components/Accordion/Accordion.stories.tsx

@@ -24,7 +24,7 @@ type AccordionItemCustomProps = {
 type AccordionProps = ComponentProps<typeof Accordion> & AccordionItemCustomProps;
 
 const meta: Meta<AccordionProps> = {
-    title: 'b2c/Data Display/Accordion',
+    title: 'plasma_b2c/Accordion',
     decorators: [WithTheme],
     component: Accordion,
     args: {

package/styled-components/es/examples/plasma_b2c/components/Attach/Attach.stories.tsx

@@ -47,7 +47,7 @@ type StoryAttachProps = ComponentProps<typeof Attach> & {
 };
 
 const meta: Meta<StoryAttachProps> = {
-    title: 'b2c/Data Entry/Attach',
+    title: 'plasma_b2c/Attach',
     decorators: [WithTheme],
     component: Attach,
     argTypes: {

package/styled-components/es/examples/plasma_b2c/components/Autocomplete/Autocomplete.stories.tsx

@@ -70,7 +70,7 @@ type StoryProps = ComponentProps<typeof Autocomplete> & {
 };
 
 const meta: Meta<StoryProps> = {
-    title: 'b2c/Data Entry/Autocomplete',
+    title: 'plasma_b2c/Autocomplete',
     decorators: [WithTheme],
     component: Autocomplete,
     argTypes: {

package/styled-components/es/examples/plasma_b2c/components/Avatar/Avatar.stories.tsx

@@ -7,7 +7,7 @@ import { argTypesFromConfig, WithTheme } from '../../../_helpers';
 import { Avatar, mergedConfig } from './Avatar';
 
 const meta: Meta<typeof Avatar> = {
-    title: 'b2c/Data Display/Avatar',
+    title: 'plasma_b2c/Avatar',
     decorators: [WithTheme],
     component: Avatar,
     argTypes: {

package/styled-components/es/examples/plasma_b2c/components/AvatarGroup/AvatarGroup.stories.tsx

@@ -11,7 +11,7 @@ type Story = StoryObj<ComponentProps<typeof AvatarGroup>>;
 type Avatar = ComponentProps<typeof Avatar>;
 
 const meta: Meta<typeof AvatarGroup> = {
-    title: 'b2c/Data Display/AvatarGroup',
+    title: 'plasma_b2c/AvatarGroup',
     decorators: [WithTheme],
     component: AvatarGroup,
 };

package/styled-components/es/examples/plasma_b2c/components/Badge/Badge.stories.tsx

@@ -7,7 +7,7 @@ import { WithTheme } from '../../../_helpers';
 import { Badge } from './Badge';
 
 const meta: Meta<typeof Badge> = {
-    title: 'b2c/Data Display/Badge',
+    title: 'plasma_b2c/Badge',
     component: Badge,
     decorators: [WithTheme],
     argTypes: {

package/styled-components/es/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -13,7 +13,7 @@ import { Breadcrumbs } from './Breadcrumbs';
 type BreadcrumbsProps = ComponentProps<typeof Breadcrumbs>;
 
 const meta: Meta<BreadcrumbsProps> = {
-    title: 'b2c/Navigation/Breadcrumbs',
+    title: 'plasma_b2c/Breadcrumbs',
     decorators: [WithTheme],
     component: Breadcrumbs,
     args: {

package/styled-components/es/examples/plasma_b2c/components/Button/Button.stories.tsx

@@ -24,7 +24,7 @@ const pinValues = [
 const contentPlacinValues = ['default', 'relaxed'];
 
 const meta: Meta<typeof Button> = {
-    title: 'b2c/Data Entry/Button',
+    title: 'plasma_b2c/Button',
     decorators: [WithTheme],
     component: Button,
     args: {