@salutejs/plasma-new-hope 0.68.0-canary.1148.8464595999.0 → 0.68.0-canary.1148.8482525044.0

package/styled-components/cjs/components/Cell/{Textbox/ui/TextSubtitle.js → CellTextbox/ui/CellTextSubtitle.js}

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TextSubtitle = void 0;
+exports.CellTextboxSubtitle = void 0;
 var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
 var _styledComponents = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("styled-components"));
 var _Cell = /*#__PURE__*/require("../../Cell.tokens");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 var StyledTextSubtitle = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  componentId: "plasma-new-hope__sc-jj01ut-0"
+  componentId: "plasma-new-hope__sc-ulqa2a-0"
 })(["color:var(", ");font-size:var(", ");font-weight:var(", ");font-family:var(", ");font-style:var(", ");line-height:var(", ");letter-spacing:var(", ");"], _Cell.tokens.cellSubtitleColor, _Cell.tokens.cellSubtitleFontSize, _Cell.tokens.cellSubtitleFontWeight, _Cell.tokens.cellSubtitleFontFamily, _Cell.tokens.cellSubtitleFontStyle, _Cell.tokens.cellSubtitleLineHeight, _Cell.tokens.cellSubtitleLetterSpacing);
-var TextSubtitle = exports.TextSubtitle = function TextSubtitle(props) {
+var CellTextboxSubtitle = exports.CellTextboxSubtitle = function CellTextboxSubtitle(props) {
   return /*#__PURE__*/_react["default"].createElement(StyledTextSubtitle, null, props.children);
 };

package/styled-components/cjs/components/Cell/{Textbox/ui/TextTitle.js → CellTextbox/ui/CellTextTitle.js}

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TextTitle = void 0;
+exports.CellTextboxTitle = void 0;
 var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
 var _styledComponents = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("styled-components"));
 var _Cell = /*#__PURE__*/require("../../Cell.tokens");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 var StyledTextTitle = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  componentId: "plasma-new-hope__sc-1mxjeba-0"
+  componentId: "plasma-new-hope__sc-o4ebas-0"
 })(["color:var(", ");font-size:var(", ");font-weight:var(", ");font-family:var(", ");font-style:var(", ");line-height:var(", ");letter-spacing:var(", ");"], _Cell.tokens.cellTitleColor, _Cell.tokens.cellTitleFontSize, _Cell.tokens.cellTitleFontWeight, _Cell.tokens.cellTitleFontFamily, _Cell.tokens.cellTitleFontStyle, _Cell.tokens.cellTitleLineHeight, _Cell.tokens.cellTitleLetterSpacing);
-var TextTitle = exports.TextTitle = function TextTitle(props) {
+var CellTextboxTitle = exports.CellTextboxTitle = function CellTextboxTitle(props) {
   return /*#__PURE__*/_react["default"].createElement(StyledTextTitle, null, props.children);
 };

package/styled-components/cjs/components/Cell/index.js

@@ -3,28 +3,28 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "TextLabel", {
+Object.defineProperty(exports, "CellTextbox", {
   enumerable: true,
   get: function get() {
-    return _TextLabel.TextLabel;
+    return _CellTextbox.CellTextbox;
   }
 });
-Object.defineProperty(exports, "TextSubtitle", {
+Object.defineProperty(exports, "CellTextboxLabel", {
   enumerable: true,
   get: function get() {
-    return _TextSubtitle.TextSubtitle;
+    return _CellTextLabel.CellTextboxLabel;
   }
 });
-Object.defineProperty(exports, "TextTitle", {
+Object.defineProperty(exports, "CellTextboxSubtitle", {
   enumerable: true,
   get: function get() {
-    return _TextTitle.TextTitle;
+    return _CellTextSubtitle.CellTextboxSubtitle;
   }
 });
-Object.defineProperty(exports, "Textbox", {
+Object.defineProperty(exports, "CellTextboxTitle", {
   enumerable: true,
   get: function get() {
-    return _Textbox.Textbox;
+    return _CellTextTitle.CellTextboxTitle;
   }
 });
 Object.defineProperty(exports, "cellClasses", {
@@ -51,9 +51,9 @@ Object.defineProperty(exports, "cellTokens", {
     return _Cell2.tokens;
   }
 });
-var _TextLabel = /*#__PURE__*/require("./Textbox/ui/TextLabel");
-var _TextTitle = /*#__PURE__*/require("./Textbox/ui/TextTitle");
-var _TextSubtitle = /*#__PURE__*/require("./Textbox/ui/TextSubtitle");
+var _CellTextLabel = /*#__PURE__*/require("./CellTextbox/ui/CellTextLabel");
+var _CellTextTitle = /*#__PURE__*/require("./CellTextbox/ui/CellTextTitle");
+var _CellTextSubtitle = /*#__PURE__*/require("./CellTextbox/ui/CellTextSubtitle");
 var _Cell = /*#__PURE__*/require("./Cell");
 var _Cell2 = /*#__PURE__*/require("./Cell.tokens");
-var _Textbox = /*#__PURE__*/require("./Textbox/Textbox");
+var _CellTextbox = /*#__PURE__*/require("./CellTextbox/CellTextbox");

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

@@ -71,6 +71,7 @@ var dropdownRoot = exports.dropdownRoot = function dropdownRoot(Root) {
       placement: (0, _utils.getPlacements)(placement),
       trigger: trigger,
       closeOnOverlayClick: closeOnOverlayClick,
+      closeOnBeyondTargetHover: false,
       closeOnEsc: closeOnEsc,
       isFocusTrapped: isFocusTrapped,
       frame: frame
@@ -95,7 +96,7 @@ var dropdownConfig = exports.dropdownConfig = {
     }
   },
   defaults: {
-    view: 'primary',
+    view: 'default',
     size: 'm'
   }
 };

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

@@ -13,7 +13,7 @@ var _utils = /*#__PURE__*/require("../../utils");
 var _base = /*#__PURE__*/require("./variations/_view/base");
 var _Popover = /*#__PURE__*/require("./Popover.styles");
 var _Popover2 = /*#__PURE__*/require("./Popover.tokens");
-var _excluded = ["target", "children", "isOpen", "trigger", "hasArrow", "frame", "className", "placement", "offset", "zIndex", "isFocusTrapped", "closeOnOverlayClick", "closeOnEsc", "preventOverflow", "usePortal", "view", "onToggle"];
+var _excluded = ["target", "children", "isOpen", "trigger", "hasArrow", "frame", "className", "placement", "offset", "zIndex", "isFocusTrapped", "closeOnEsc", "preventOverflow", "usePortal", "view", "onToggle"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
@@ -39,33 +39,41 @@ var POPOVER_PORTAL_ID = exports.POPOVER_PORTAL_ID = 'plasma-popover-root';
  * и вызова по клику либо ховеру.
  */
 var popoverRoot = exports.popoverRoot = function popoverRoot(Root) {
-  return /*#__PURE__*/(0, _react.forwardRef)(function (_ref, outerRootRef) {
-    var target = _ref.target,
-      children = _ref.children,
-      isOpen = _ref.isOpen,
-      trigger = _ref.trigger,
-      hasArrow = _ref.hasArrow,
-      _ref$frame = _ref.frame,
-      frame = _ref$frame === void 0 ? 'document' : _ref$frame,
-      className = _ref.className,
-      _ref$placement = _ref.placement,
-      placement = _ref$placement === void 0 ? 'auto' : _ref$placement,
-      _ref$offset = _ref.offset,
-      offset = _ref$offset === void 0 ? [0, 0] : _ref$offset,
-      zIndex = _ref.zIndex,
-      _ref$isFocusTrapped = _ref.isFocusTrapped,
-      isFocusTrapped = _ref$isFocusTrapped === void 0 ? true : _ref$isFocusTrapped,
-      _ref$closeOnOverlayCl = _ref.closeOnOverlayClick,
-      closeOnOverlayClick = _ref$closeOnOverlayCl === void 0 ? true : _ref$closeOnOverlayCl,
-      _ref$closeOnEsc = _ref.closeOnEsc,
-      closeOnEsc = _ref$closeOnEsc === void 0 ? true : _ref$closeOnEsc,
-      _ref$preventOverflow = _ref.preventOverflow,
-      preventOverflow = _ref$preventOverflow === void 0 ? true : _ref$preventOverflow,
-      _ref$usePortal = _ref.usePortal,
-      usePortal = _ref$usePortal === void 0 ? false : _ref$usePortal,
-      view = _ref.view,
-      onToggle = _ref.onToggle,
-      rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/(0, _react.forwardRef)(function (props, outerRootRef) {
+    var _placement$;
+    var target = props.target,
+      children = props.children,
+      isOpen = props.isOpen,
+      _props$trigger = props.trigger,
+      trigger = _props$trigger === void 0 ? 'click' : _props$trigger,
+      hasArrow = props.hasArrow,
+      _props$frame = props.frame,
+      frame = _props$frame === void 0 ? 'document' : _props$frame,
+      className = props.className,
+      _props$placement = props.placement,
+      placement = _props$placement === void 0 ? 'auto' : _props$placement,
+      _props$offset = props.offset,
+      offset = _props$offset === void 0 ? [0, 0] : _props$offset,
+      zIndex = props.zIndex,
+      _props$isFocusTrapped = props.isFocusTrapped,
+      isFocusTrapped = _props$isFocusTrapped === void 0 ? true : _props$isFocusTrapped,
+      _props$closeOnEsc = props.closeOnEsc,
+      closeOnEsc = _props$closeOnEsc === void 0 ? true : _props$closeOnEsc,
+      _props$preventOverflo = props.preventOverflow,
+      preventOverflow = _props$preventOverflo === void 0 ? true : _props$preventOverflo,
+      _props$usePortal = props.usePortal,
+      usePortal = _props$usePortal === void 0 ? false : _props$usePortal,
+      view = props.view,
+      onToggle = props.onToggle,
+      rest = _objectWithoutProperties(props, _excluded);
+    var closeOnOverlayClick = true;
+    var closeOnBeyondTargetHover = true;
+    if (props.trigger === 'click' && props.closeOnOverlayClick === false) {
+      closeOnOverlayClick = false;
+    }
+    if (props.trigger === 'hover' && props.closeOnBeyondTargetHover === false) {
+      closeOnBeyondTargetHover = false;
+    }
     var rootRef = (0, _react.useRef)(null);
     var popoverRef = (0, _react.useRef)(null);
     var handleRef = (0, _plasmaCore.useForkRef)(rootRef, outerRootRef);
@@ -86,7 +94,9 @@ var popoverRoot = exports.popoverRoot = function popoverRoot(Root) {
       opacity: isOpen ? 1 : 0
     };
     var _usePopper = (0, _reactPopper.usePopper)(rootRef.current, popoverRef.current, {
-        placement: isAutoArray ? 'auto' : placement,
+        // TODO: #1121
+        // eslint-disable-next-line no-nested-ternary
+        placement: isAutoArray ? (_placement$ = placement[0]) !== null && _placement$ !== void 0 && _placement$.endsWith('start') ? 'auto-start' : 'auto' : placement,
         modifiers: [{
           name: 'preventOverflow',
           options: {
@@ -222,10 +232,15 @@ var popoverRoot = exports.popoverRoot = function popoverRoot(Root) {
     }, target), children && portalRef.current && /*#__PURE__*/_reactDom["default"].createPortal( /*#__PURE__*/_react["default"].createElement(Root, _extends({
       view: view,
       className: className
-    }, rest), /*#__PURE__*/_react["default"].createElement(_Popover.StyledPopover, _extends({}, attributes.popper, {
+    }, rest, {
+      onMouseEnter: closeOnBeyondTargetHover ? undefined : onMouseEnter,
+      onMouseLeave: closeOnBeyondTargetHover ? undefined : onMouseEnter
+    }), /*#__PURE__*/_react["default"].createElement(_Popover.StyledPopover, _extends({}, attributes.popper, {
       className: _Popover2.classes.root,
       ref: popoverForkRef,
-      style: _objectSpread(_objectSpread({}, styles.popper), initialStyles),
+      style: _objectSpread(_objectSpread(_objectSpread({}, styles.popper), {
+        display: isOpen ? 'block' : 'none'
+      }), initialStyles),
       zIndex: zIndex
     }), hasArrow && /*#__PURE__*/_react["default"].createElement(_Popover.StyledArrow, _extends({
       className: _Popover2.classes.arrow,

package/styled-components/cjs/examples/plasma_b2c/components/Cell/Cell.config.js

@@ -7,11 +7,6 @@ exports.config = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
 var _Cell = /*#__PURE__*/require("../../../../components/Cell");
 var config = exports.config = {
-  defaults: {
-    view: 'default',
-    size: 'm',
-    stretching: 'filled'
-  },
   variations: {
     view: {
       "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;"], _Cell.cellTokens.cellColor, _Cell.cellTokens.cellLabelColor, _Cell.cellTokens.cellTitleColor, _Cell.cellTokens.cellSubtitleColor, _Cell.cellTokens.cellBackgroundColor)

package/styled-components/cjs/examples/plasma_b2c/components/Cell/Cell.js

@@ -4,28 +4,28 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Cell = void 0;
-Object.defineProperty(exports, "TextLabel", {
+Object.defineProperty(exports, "CellTextbox", {
   enumerable: true,
   get: function get() {
-    return _Cell.TextLabel;
+    return _Cell.CellTextbox;
   }
 });
-Object.defineProperty(exports, "TextSubtitle", {
+Object.defineProperty(exports, "CellTextboxLabel", {
   enumerable: true,
   get: function get() {
-    return _Cell.TextSubtitle;
+    return _Cell.CellTextboxLabel;
   }
 });
-Object.defineProperty(exports, "TextTitle", {
+Object.defineProperty(exports, "CellTextboxSubtitle", {
   enumerable: true,
   get: function get() {
-    return _Cell.TextTitle;
+    return _Cell.CellTextboxSubtitle;
   }
 });
-Object.defineProperty(exports, "Textbox", {
+Object.defineProperty(exports, "CellTextboxTitle", {
   enumerable: true,
   get: function get() {
-    return _Cell.Textbox;
+    return _Cell.CellTextboxTitle;
   }
 });
 var _Cell = /*#__PURE__*/require("../../../../components/Cell");

package/styled-components/cjs/examples/plasma_b2c/components/Cell/Cell.stories.tsx

@@ -7,7 +7,7 @@ import { WithTheme } from '../../../_helpers';
 import { Avatar } from '../Avatar/Avatar';
 import { IconChevronLeft } from '../../../../components/_Icon';
 
-import { Cell, Textbox, TextTitle } from './Cell';
+import { Cell, CellTextbox, CellTextboxTitle } from './Cell';
 
 type StoryProps = ComponentProps<typeof Cell> & {
     itemsCount?: number;
@@ -48,13 +48,13 @@ const meta: Meta<typeof Cell> = {
                 type: 'select',
             },
         },
-        alignLeft: {
+        alignContentLeft: {
             options: alignLeft,
             control: {
                 type: 'select',
             },
         },
-        alignRight: {
+        alignContentRight: {
             options: alignRight,
             control: {
                 type: 'select',
@@ -76,8 +76,8 @@ export const Default: Story = {
         stretching: 'filled',
         enableLeftContent: false,
         enableRightContent: false,
-        alignLeft: 'center',
-        alignRight: 'center',
+        alignContentLeft: 'center',
+        alignContentRight: 'center',
         title: 'Title',
         subtitle: 'Subtitle',
         label: 'Label',
@@ -90,12 +90,7 @@ export const Default: Story = {
                         <Avatar size={getSize(args.size)} url="https://avatars.githubusercontent.com/u/1813468?v=4" />
                     )
                 }
-                alignLeft={args.alignLeft}
                 contentRight={!args.enableRightContent && <ChevronRight color="inherit" size="xs" />}
-                alignRight={args.alignRight}
-                title={args.title}
-                subtitle={args.subtitle}
-                label={args.label}
                 {...args}
             />
         );
@@ -115,16 +110,18 @@ export const WithContentTextboxCustom: Story = {
         `;
         return (
             <Cell
+                view="default"
+                size={args.size}
+                stretching={args.stretching}
                 contentLeft={
                     <Avatar size={getSize(args.size)} url="https://avatars.githubusercontent.com/u/1813468?v=4" />
                 }
-                contentRight={<ChevronRight color="inherit" size="xs" />}
-                {...args}
+                contentRight={!args.enableRightContent && <ChevronRight color="inherit" size="xs" />}
             >
-                <Textbox>
-                    <TextTitle>Title</TextTitle>
+                <CellTextboxTitle>
+                    <CellTextbox>Title</CellTextbox>
                     <MyStyledText>My styled Text</MyStyledText>
-                </Textbox>
+                </CellTextboxTitle>
             </Cell>
         );
     },

package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.stories.tsx

@@ -51,7 +51,7 @@ const meta: Meta<StoryDropdownProps> = {
         closeOnEsc: true,
         isFocusTrapped: true,
         skidding: 0,
-        distance: 6,
+        distance: 0,
     },
 };
 

package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.stories.tsx

@@ -51,7 +51,7 @@ const meta: Meta<StoryDropdownProps> = {
         closeOnEsc: true,
         isFocusTrapped: true,
         skidding: 0,
-        distance: 6,
+        distance: 0,
     },
 };
 

package/styled-components/cjs/examples/plasma_b2c/components/Popover/Popover.stories.tsx

@@ -33,6 +33,12 @@ const meta: Meta<typeof Popover> = {
             },
             table: { defaultValue: { summary: true } },
         },
+        closeOnBeyondTargetHover: {
+            control: {
+                type: 'boolean',
+            },
+            table: { defaultValue: { summary: true } },
+        },
         closeOnEsc: {
             control: {
                 type: 'boolean',
@@ -62,6 +68,7 @@ const meta: Meta<typeof Popover> = {
         placement: 'bottom',
         trigger: 'click',
         closeOnOverlayClick: true,
+        closeOnBeyondTargetHover: true,
         closeOnEsc: true,
         isFocusTrapped: true,
         skidding: 0,

package/styled-components/cjs/examples/plasma_web/components/Cell/Cell.config.js

@@ -7,11 +7,6 @@ exports.config = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
 var _Cell = /*#__PURE__*/require("../../../../components/Cell");
 var config = exports.config = {
-  defaults: {
-    view: 'default',
-    size: 'm',
-    stretching: 'filled'
-  },
   variations: {
     view: {
       "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;"], _Cell.cellTokens.cellColor, _Cell.cellTokens.cellLabelColor, _Cell.cellTokens.cellTitleColor, _Cell.cellTokens.cellSubtitleColor, _Cell.cellTokens.cellBackgroundColor)

package/styled-components/cjs/examples/plasma_web/components/Cell/Cell.js

@@ -4,32 +4,32 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Cell = void 0;
-Object.defineProperty(exports, "TextLabel", {
+Object.defineProperty(exports, "CellTextbox", {
   enumerable: true,
   get: function get() {
-    return _Cell.TextLabel;
+    return _Cell.CellTextbox;
   }
 });
-Object.defineProperty(exports, "TextSubtitle", {
+Object.defineProperty(exports, "CellTextboxLabel", {
   enumerable: true,
   get: function get() {
-    return _Cell.TextSubtitle;
+    return _Cell.CellTextboxLabel;
   }
 });
-Object.defineProperty(exports, "TextTitle", {
+Object.defineProperty(exports, "CellTextboxSubtitle", {
   enumerable: true,
   get: function get() {
-    return _Cell.TextTitle;
+    return _Cell.CellTextboxSubtitle;
   }
 });
-Object.defineProperty(exports, "Textbox", {
+Object.defineProperty(exports, "CellTextboxTitle", {
   enumerable: true,
   get: function get() {
-    return _Cell.Textbox;
+    return _Cell.CellTextboxTitle;
   }
 });
-var _Cell = /*#__PURE__*/require("../../../../components/Cell");
 var _engines = /*#__PURE__*/require("../../../../engines");
+var _Cell = /*#__PURE__*/require("../../../../components/Cell");
 var _Cell2 = /*#__PURE__*/require("./Cell.config");
 var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Cell.cellConfig, _Cell2.config);
 var Cell = exports.Cell = /*#__PURE__*/(0, _engines.component)(mergedConfig);

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

@@ -7,7 +7,7 @@ import { WithTheme } from '../../../_helpers';
 import { Avatar } from '../Avatar/Avatar';
 import { IconChevronLeft } from '../../../../components/_Icon';
 
-import { Cell, Textbox, TextTitle } from './Cell';
+import { Cell, CellTextbox, CellTextboxTitle } from './Cell';
 
 type StoryProps = ComponentProps<typeof Cell> & {
     itemsCount?: number;
@@ -48,13 +48,13 @@ const meta: Meta<typeof Cell> = {
                 type: 'select',
             },
         },
-        alignLeft: {
+        alignContentLeft: {
             options: alignLeft,
             control: {
                 type: 'select',
             },
         },
-        alignRight: {
+        alignContentRight: {
             options: alignRight,
             control: {
                 type: 'select',
@@ -76,8 +76,8 @@ export const Default: Story = {
         stretching: 'filled',
         enableLeftContent: false,
         enableRightContent: false,
-        alignLeft: 'center',
-        alignRight: 'center',
+        alignContentLeft: 'center',
+        alignContentRight: 'center',
         title: 'Title',
         subtitle: 'Subtitle',
         label: 'Label',
@@ -90,12 +90,7 @@ export const Default: Story = {
                         <Avatar size={getSize(args.size)} url="https://avatars.githubusercontent.com/u/1813468?v=4" />
                     )
                 }
-                alignLeft={args.alignLeft}
                 contentRight={!args.enableRightContent && <ChevronRight color="inherit" size="xs" />}
-                alignRight={args.alignRight}
-                title={args.title}
-                subtitle={args.subtitle}
-                label={args.label}
                 {...args}
             />
         );
@@ -115,16 +110,18 @@ export const WithContentTextboxCustom: Story = {
         `;
         return (
             <Cell
+                view="default"
+                size={args.size}
+                stretching={args.stretching}
                 contentLeft={
                     <Avatar size={getSize(args.size)} url="https://avatars.githubusercontent.com/u/1813468?v=4" />
                 }
                 contentRight={<ChevronRight color="inherit" size="xs" />}
-                {...args}
             >
-                <Textbox>
-                    <TextTitle>Title</TextTitle>
+                <CellTextbox>
+                    <CellTextboxTitle>Title</CellTextboxTitle>
                     <MyStyledText>My styled Text</MyStyledText>
-                </Textbox>
+                </CellTextbox>
             </Cell>
         );
     },

package/styled-components/cjs/examples/plasma_web/components/Dropdown/Normal/Dropdown.stories.tsx

@@ -51,7 +51,7 @@ const meta: Meta<StoryDropdownProps> = {
         closeOnEsc: true,
         isFocusTrapped: true,
         skidding: 0,
-        distance: 6,
+        distance: 0,
     },
 };
 

package/styled-components/cjs/examples/plasma_web/components/Dropdown/Tight/Dropdown.stories.tsx

@@ -51,7 +51,7 @@ const meta: Meta<StoryDropdownProps> = {
         closeOnEsc: true,
         isFocusTrapped: true,
         skidding: 0,
-        distance: 6,
+        distance: 0,
     },
 };
 

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

@@ -4,22 +4,25 @@ import { base, CellLeft, CellRight, CellContentWrapper, CellContent } from './Ce
 import { classes } from './Cell.tokens';
 import { base as viewCSS } from './variations/_view/base';
 import { base as sizeCSS } from './variations/_size/base';
-import { Textbox } from './Textbox/Textbox';
+import { CellTextbox } from './CellTextbox/CellTextbox';
 export var cellRoot = function cellRoot(Root) {
   return /*#__PURE__*/forwardRef(function (_ref, outerRootRef) {
     var size = _ref.size,
       view = _ref.view,
       contentLeft = _ref.contentLeft,
       contentRight = _ref.contentRight,
-      _ref$alignLeft = _ref.alignLeft,
-      alignLeft = _ref$alignLeft === void 0 ? 'center' : _ref$alignLeft,
-      _ref$alignRight = _ref.alignRight,
-      alignRight = _ref$alignRight === void 0 ? 'center' : _ref$alignRight,
+      _ref$alignContentLeft = _ref.alignContentLeft,
+      alignContentLeft = _ref$alignContentLeft === void 0 ? 'center' : _ref$alignContentLeft,
+      _ref$alignContentRigh = _ref.alignContentRight,
+      alignContentRight = _ref$alignContentRigh === void 0 ? 'center' : _ref$alignContentRigh,
       children = _ref.children,
       title = _ref.title,
       subtitle = _ref.subtitle,
       label = _ref.label,
-      stretching = _ref.stretching;
+      description = _ref.description,
+      content = _ref.content,
+      _ref$stretching = _ref.stretching,
+      stretching = _ref$stretching === void 0 ? 'filled' : _ref$stretching;
     var stretchingClass = classes["".concat(stretching, "Stretching")];
     return /*#__PURE__*/React.createElement(Root, {
       ref: outerRootRef,
@@ -27,13 +30,14 @@ export var cellRoot = function cellRoot(Root) {
       view: view,
       className: cx(stretchingClass, classes.cellRoot)
     }, contentLeft && /*#__PURE__*/React.createElement(CellLeft, {
-      align: alignLeft
-    }, contentLeft), /*#__PURE__*/React.createElement(CellContentWrapper, null, /*#__PURE__*/React.createElement(CellContent, null, title || subtitle || label ? /*#__PURE__*/React.createElement(Textbox, {
+      align: alignContentLeft
+    }, contentLeft), /*#__PURE__*/React.createElement(CellContentWrapper, null, /*#__PURE__*/React.createElement(CellContent, null, title || description || subtitle || label ? /*#__PURE__*/React.createElement(CellTextbox, {
       label: label,
+      description: description,
       title: title,
       subtitle: subtitle
-    }) : children && children), contentRight && /*#__PURE__*/React.createElement(CellRight, {
-      align: alignRight
+    }) : children || content), contentRight && /*#__PURE__*/React.createElement(CellRight, {
+      align: alignContentRight
     }, contentRight)));
   });
 };
@@ -52,7 +56,6 @@ export var cellConfig = {
   },
   defaults: {
     view: 'default',
-    size: 'm',
-    stretching: 'filled'
+    size: 'm'
   }
 };

package/styled-components/es/components/Cell/CellTextbox/CellTextbox.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { CellTextboxStyled } from './CellTextbox.styles';
+import { CellTextboxLabel } from './ui/CellTextLabel';
+import { CellTextboxTitle } from './ui/CellTextTitle';
+import { CellTextboxSubtitle } from './ui/CellTextSubtitle';
+export var CellTextbox = function CellTextbox(_ref) {
+  var label = _ref.label,
+    title = _ref.title,
+    subtitle = _ref.subtitle,
+    description = _ref.description,
+    children = _ref.children;
+  return /*#__PURE__*/React.createElement(CellTextboxStyled, null, label || title || description || subtitle ? /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement(CellTextboxLabel, null, label), (title || description) && /*#__PURE__*/React.createElement(CellTextboxTitle, null, title || description), subtitle && /*#__PURE__*/React.createElement(CellTextboxSubtitle, null, subtitle)) : children);
+};

package/styled-components/es/components/Cell/{Textbox/Textbox.styles.js → CellTextbox/CellTextbox.styles.js}

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
 import { tokens } from '../Cell.tokens';
-export var TextboxStyled = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-t2ald4-0"
+export var CellTextboxStyled = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-1ts73cj-0"
 })(["display:flex;flex-direction:column;gap:var(", ");"], tokens.cellTextboxGap);

package/styled-components/es/components/Cell/{Textbox/ui/TextLabel.js → CellTextbox/ui/CellTextLabel.js}

@@ -2,8 +2,8 @@ import React from 'react';
 import styled from 'styled-components';
 import { tokens } from '../../Cell.tokens';
 var StyledTextLabel = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-6e2num-0"
+  componentId: "plasma-new-hope__sc-1syy9dx-0"
 })(["color:var(", ");font-size:var(", ");font-weight:var(", ");font-family:var(", ");font-style:var(", ");line-height:var(", ");letter-spacing:var(", ");"], tokens.cellLabelColor, tokens.cellLabelFontSize, tokens.cellLabelFontWeight, tokens.cellLabelFontFamily, tokens.cellLabelFontStyle, tokens.cellLabelLineHeight, tokens.cellLabelLetterSpacing);
-export var TextLabel = function TextLabel(props) {
+export var CellTextboxLabel = function CellTextboxLabel(props) {
   return /*#__PURE__*/React.createElement(StyledTextLabel, null, props.children);
 };

package/styled-components/es/components/Cell/{Textbox/ui/TextSubtitle.js → CellTextbox/ui/CellTextSubtitle.js}

@@ -2,8 +2,8 @@ import React from 'react';
 import styled from 'styled-components';
 import { tokens } from '../../Cell.tokens';
 var StyledTextSubtitle = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-jj01ut-0"
+  componentId: "plasma-new-hope__sc-ulqa2a-0"
 })(["color:var(", ");font-size:var(", ");font-weight:var(", ");font-family:var(", ");font-style:var(", ");line-height:var(", ");letter-spacing:var(", ");"], tokens.cellSubtitleColor, tokens.cellSubtitleFontSize, tokens.cellSubtitleFontWeight, tokens.cellSubtitleFontFamily, tokens.cellSubtitleFontStyle, tokens.cellSubtitleLineHeight, tokens.cellSubtitleLetterSpacing);
-export var TextSubtitle = function TextSubtitle(props) {
+export var CellTextboxSubtitle = function CellTextboxSubtitle(props) {
   return /*#__PURE__*/React.createElement(StyledTextSubtitle, null, props.children);
 };