@salutejs/plasma-new-hope 0.68.0-canary.1104.8452846373.0 → 0.68.0-canary.1148.8452223133.0

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

@@ -0,0 +1,62 @@
+import React, { forwardRef } from 'react';
+import { cx } from '../../utils';
+import { CellLeft, CellRight, CellContentWrapper, CellContent } from './Cell.styles';
+import { classes } from './Cell.tokens';
+import { base as viewCSS } from './variations/_view/base';
+import { base as sizeCSS } from './variations/_size/base';
+import { base as stretchingCSS } from './variations/_stretching/base';
+import { Textbox } from './Textbox/Textbox';
+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,
+      children = _ref.children,
+      title = _ref.title,
+      subtitle = _ref.subtitle,
+      label = _ref.label,
+      stretching = _ref.stretching;
+    var stretchingClass = classes["".concat(stretching, "Stretching")];
+    return /*#__PURE__*/React.createElement(Root, {
+      ref: outerRootRef,
+      size: size,
+      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, {
+      label: label,
+      title: title,
+      subtitle: subtitle
+    }) : children && children), contentRight && /*#__PURE__*/React.createElement(CellRight, {
+      align: alignRight
+    }, contentRight)));
+  });
+};
+export var cellConfig = {
+  name: 'Cell',
+  tag: 'div',
+  layout: cellRoot,
+  base: '',
+  variations: {
+    view: {
+      css: viewCSS
+    },
+    size: {
+      css: sizeCSS
+    },
+    stretching: {
+      css: stretchingCSS
+    }
+  },
+  defaults: {
+    view: 'default',
+    size: 'm',
+    stretching: 'filled'
+  }
+};

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

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+import { tokens } from './Cell.tokens';
+var alignToFlex = {
+  center: 'center',
+  top: 'flex-start',
+  bottom: 'flex-end'
+};
+export var CellContentWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-16emz3n-0"
+})(["display:flex;flex:auto;justify-content:space-between;gap:var(", ");"], tokens.cellGap);
+export var CellContent = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-16emz3n-1"
+})(["display:flex;align-items:center;"]);
+export var CellLeft = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-16emz3n-2"
+})(["display:flex;align-items:", ";"], function (_ref) {
+  var align = _ref.align;
+  return alignToFlex[align];
+});
+export var CellRight = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-16emz3n-3"
+})(["display:flex;align-items:", ";text-align:right;"], function (_ref2) {
+  var align = _ref2.align;
+  return alignToFlex[align];
+});

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

@@ -0,0 +1,42 @@
+export var tokens = {
+  cellColor: '--plasma-cell-color',
+  cellBackgroundColor: '--plasma-cell-background-color',
+  cellPadding: '--plasma-cell-padding',
+  cellPaddingLeftContent: '--plasma-cell-padding-left-content',
+  cellPaddingContent: '--plasma-cell-padding-content',
+  cellPaddingRightContent: '--plasma-cell-padding-right-content',
+  cellTextboxGap: '--plasma-cell-textbox-gap',
+  cellGap: '--plasma-cell-gap',
+  cellWidth: '--plasma-cell-width',
+  cellLabelColor: '--plasma-cell-label-color',
+  cellLabelFontFamily: '--plasma-cell-label-font-family',
+  cellLabelFontSize: '--plasma-cell-label-font-size',
+  cellLabelFontStyle: '--plasma-cell-label-font-style',
+  cellLabelFontWeight: '--plasma-cell-label-font-weight',
+  cellLabelLetterSpacing: '--plasma-cell-label-letter-spacing',
+  cellLabelLineHeight: '--plasma-cell-label-line-height',
+  cellTitleColor: '--plasma-cell-title-color',
+  cellTitleFontFamily: '--plasma-cell-title-font-family',
+  cellTitleFontSize: '--plasma-cell-title-font-size',
+  cellTitleFontStyle: '--plasma-cell-title-font-style',
+  cellTitleFontWeight: '--plasma-cell-title-font-weight',
+  cellTitleLetterSpacing: '--plasma-cell-title-letter-spacing',
+  cellTitleLineHeight: '--plasma-cell-title-line-height',
+  cellSubtitleColor: '--plasma-cell-subtitle-color',
+  cellSubtitleFontFamily: '--plasma-cell-subtitle-font-family',
+  cellSubtitleFontSize: '--plasma-cell-subtitle-font-size',
+  cellSubtitleFontStyle: '--plasma-cell-subtitle-font-style',
+  cellSubtitleFontWeight: '--plasma-cell-subtitle-font-weight',
+  cellSubtitleLetterSpacing: '--plasma-cell-subtitle-letter-spacing',
+  cellSubtitleLineHeight: '--plasma-cell-subtitle-line-height'
+};
+export var classes = {
+  autoStretching: 'cell-stretching-auto',
+  filledStretching: 'cell-stretching-filled',
+  fixedStretching: 'cell-stretching-fixed',
+  cellWrapper: 'cell-wrapper',
+  cellRoot: 'cell-root',
+  cellContent: 'cell-content',
+  cellLeftContent: 'cell-left-content',
+  cellRightContent: 'cell-right-content'
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { TextboxStyled } from './Textbox.styles';
+import { TextLabel } from './ui/TextLabel';
+import { TextTitle } from './ui/TextTitle';
+import { TextSubtitle } from './ui/TextSubtitle';
+export var Textbox = function Textbox(_ref) {
+  var label = _ref.label,
+    title = _ref.title,
+    subtitle = _ref.subtitle,
+    children = _ref.children;
+  return /*#__PURE__*/React.createElement(TextboxStyled, null, label || title || subtitle ? /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement(TextLabel, null, label), title && /*#__PURE__*/React.createElement(TextTitle, null, title), subtitle && /*#__PURE__*/React.createElement(TextSubtitle, null, subtitle)) : children);
+};

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

@@ -0,0 +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"
+})(["display:flex;flex-direction:column;gap:var(", ");"], tokens.cellTextboxGap);

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

@@ -0,0 +1 @@
+export {};

package/styled-components/es/components/Cell/Textbox/ui/TextLabel.js

@@ -0,0 +1,9 @@
+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"
+})(["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) {
+  return /*#__PURE__*/React.createElement(StyledTextLabel, null, props.children);
+};

package/styled-components/es/components/Cell/Textbox/ui/TextSubtitle.js

@@ -0,0 +1,9 @@
+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"
+})(["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) {
+  return /*#__PURE__*/React.createElement(StyledTextSubtitle, null, props.children);
+};

package/styled-components/es/components/Cell/Textbox/ui/TextTitle.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import styled from 'styled-components';
+import { tokens } from '../../Cell.tokens';
+var StyledTextTitle = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-1mxjeba-0"
+})(["color:var(", ");font-size:var(", ");font-weight:var(", ");font-family:var(", ");font-style:var(", ");line-height:var(", ");letter-spacing:var(", ");"], tokens.cellTitleColor, tokens.cellTitleFontSize, tokens.cellTitleFontWeight, tokens.cellTitleFontFamily, tokens.cellTitleFontStyle, tokens.cellTitleLineHeight, tokens.cellTitleLetterSpacing);
+export var TextTitle = function TextTitle(props) {
+  return /*#__PURE__*/React.createElement(StyledTextTitle, null, props.children);
+};

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

@@ -0,0 +1,6 @@
+export { TextLabel } from './Textbox/ui/TextLabel';
+export { TextTitle } from './Textbox/ui/TextTitle';
+export { TextSubtitle } from './Textbox/ui/TextSubtitle';
+export { cellRoot, cellConfig } from './Cell';
+export { tokens as cellTokens, classes as cellClasses } from './Cell.tokens';
+export { Textbox } from './Textbox/Textbox';

package/styled-components/es/components/Cell/variations/_size/base.js

@@ -0,0 +1,2 @@
+import { css } from 'styled-components';
+export var base = /*#__PURE__*/css([""]);

package/styled-components/es/components/Cell/variations/_size/tokens.json

@@ -0,0 +1 @@
+["--plasma-cell-left-height", "--plasma-cell-right-height", "--plasma-cell-height"]

package/styled-components/es/components/Cell/variations/_stretching/base.js

@@ -0,0 +1,3 @@
+import { css } from 'styled-components';
+import { classes, tokens } from '../../Cell.tokens';
+export var base = /*#__PURE__*/css(["&.", "{width:var(", ");}&.", "{width:100%;}&.", "{width:auto;}"], classes.fixedStretching, tokens.cellWidth, classes.filledStretching, classes.autoStretching);

package/styled-components/es/components/Cell/variations/_stretching/tokens.json

@@ -0,0 +1 @@
+["--plasma-button-width"]

package/styled-components/es/components/Cell/variations/_view/base.js

@@ -0,0 +1,3 @@
+import { css } from 'styled-components';
+import { tokens } from '../../Cell.tokens';
+export var base = /*#__PURE__*/css(["color:var(", ");background-color:var(", ");width:100%;display:flex;gap:var(", ");&:focus{outline:0 none;}"], tokens.cellColor, tokens.cellBackgroundColor, tokens.cellGap);

package/styled-components/es/components/Cell/variations/_view/tokens.json

@@ -0,0 +1 @@
+["--plasma-cell-color", "--plasma-cell-background-color"]

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

@@ -62,7 +62,6 @@ export var dropdownRoot = function dropdownRoot(Root) {
       placement: getPlacements(placement),
       trigger: trigger,
       closeOnOverlayClick: closeOnOverlayClick,
-      closeOnBeyondTargetHover: false,
       closeOnEsc: closeOnEsc,
       isFocusTrapped: isFocusTrapped,
       frame: frame
@@ -87,7 +86,7 @@ export var dropdownConfig = {
     }
   },
   defaults: {
-    view: 'default',
+    view: 'primary',
     size: 'm'
   }
 };

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

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["target", "children", "isOpen", "trigger", "hasArrow", "frame", "className", "placement", "offset", "zIndex", "isFocusTrapped", "closeOnEsc", "preventOverflow", "usePortal", "view", "onToggle"];
+var _excluded = ["target", "children", "isOpen", "trigger", "hasArrow", "frame", "className", "placement", "offset", "zIndex", "isFocusTrapped", "closeOnOverlayClick", "closeOnEsc", "preventOverflow", "usePortal", "view", "onToggle"];
 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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -30,41 +30,33 @@ export var POPOVER_PORTAL_ID = 'plasma-popover-root';
  * и вызова по клику либо ховеру.
  */
 export var popoverRoot = function popoverRoot(Root) {
-  return /*#__PURE__*/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;
-    }
+  return /*#__PURE__*/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);
     var rootRef = useRef(null);
     var popoverRef = useRef(null);
     var handleRef = useForkRef(rootRef, outerRootRef);
@@ -85,9 +77,7 @@ export var popoverRoot = function popoverRoot(Root) {
       opacity: isOpen ? 1 : 0
     };
     var _usePopper = usePopper(rootRef.current, popoverRef.current, {
-        // 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,
+        placement: isAutoArray ? 'auto' : placement,
         modifiers: [{
           name: 'preventOverflow',
           options: {
@@ -223,15 +213,10 @@ export var popoverRoot = function popoverRoot(Root) {
     }, target), children && portalRef.current && /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(Root, _extends({
       view: view,
       className: className
-    }, rest, {
-      onMouseEnter: closeOnBeyondTargetHover ? undefined : onMouseEnter,
-      onMouseLeave: closeOnBeyondTargetHover ? undefined : onMouseEnter
-    }), /*#__PURE__*/React.createElement(StyledPopover, _extends({}, attributes.popper, {
+    }, rest), /*#__PURE__*/React.createElement(StyledPopover, _extends({}, attributes.popper, {
       className: classes.root,
       ref: popoverForkRef,
-      style: _objectSpread(_objectSpread(_objectSpread({}, styles.popper), {
-        display: isOpen ? 'block' : 'none'
-      }), initialStyles),
+      style: _objectSpread(_objectSpread({}, styles.popper), initialStyles),
       zIndex: zIndex
     }), hasArrow && /*#__PURE__*/React.createElement(StyledArrow, _extends({
       className: classes.arrow,

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

@@ -0,0 +1,25 @@
+import { css } from 'styled-components';
+import { cellTokens } from '../../../../components/Cell';
+export var config = {
+  defaults: {
+    view: 'default',
+    size: 'm',
+    stretching: 'filled'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;"], cellTokens.cellColor, cellTokens.cellLabelColor, cellTokens.cellTitleColor, cellTokens.cellSubtitleColor, cellTokens.cellBackgroundColor)
+    },
+    size: {
+      l: /*#__PURE__*/css(["", ":15rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":0.375rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], cellTokens.cellWidth, cellTokens.cellPadding, cellTokens.cellPaddingLeftContent, cellTokens.cellPaddingContent, cellTokens.cellPaddingRightContent, cellTokens.cellTextboxGap, cellTokens.cellGap, cellTokens.cellLabelFontFamily, cellTokens.cellLabelFontSize, cellTokens.cellLabelFontStyle, cellTokens.cellLabelFontWeight, cellTokens.cellLabelLetterSpacing, cellTokens.cellLabelLineHeight, cellTokens.cellTitleFontFamily, cellTokens.cellTitleFontSize, cellTokens.cellTitleFontStyle, cellTokens.cellTitleFontWeight, cellTokens.cellTitleLetterSpacing, cellTokens.cellTitleLineHeight, cellTokens.cellSubtitleFontFamily, cellTokens.cellSubtitleFontSize, cellTokens.cellSubtitleFontStyle, cellTokens.cellSubtitleFontWeight, cellTokens.cellSubtitleLetterSpacing, cellTokens.cellSubtitleLineHeight),
+      m: /*#__PURE__*/css(["", ":15rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":0.375rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], cellTokens.cellWidth, cellTokens.cellPadding, cellTokens.cellPaddingLeftContent, cellTokens.cellPaddingContent, cellTokens.cellPaddingRightContent, cellTokens.cellTextboxGap, cellTokens.cellGap, cellTokens.cellLabelFontFamily, cellTokens.cellLabelFontSize, cellTokens.cellLabelFontStyle, cellTokens.cellLabelFontWeight, cellTokens.cellLabelLetterSpacing, cellTokens.cellLabelLineHeight, cellTokens.cellTitleFontFamily, cellTokens.cellTitleFontSize, cellTokens.cellTitleFontStyle, cellTokens.cellTitleFontWeight, cellTokens.cellTitleLetterSpacing, cellTokens.cellTitleLineHeight, cellTokens.cellSubtitleFontFamily, cellTokens.cellSubtitleFontSize, cellTokens.cellSubtitleFontStyle, cellTokens.cellSubtitleFontWeight, cellTokens.cellSubtitleLetterSpacing, cellTokens.cellSubtitleLineHeight),
+      s: /*#__PURE__*/css(["", ":15rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":0.375rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], cellTokens.cellWidth, cellTokens.cellPadding, cellTokens.cellPaddingLeftContent, cellTokens.cellPaddingContent, cellTokens.cellPaddingRightContent, cellTokens.cellTextboxGap, cellTokens.cellGap, cellTokens.cellLabelFontFamily, cellTokens.cellLabelFontSize, cellTokens.cellLabelFontStyle, cellTokens.cellLabelFontWeight, cellTokens.cellLabelLetterSpacing, cellTokens.cellLabelLineHeight, cellTokens.cellTitleFontFamily, cellTokens.cellTitleFontSize, cellTokens.cellTitleFontStyle, cellTokens.cellTitleFontWeight, cellTokens.cellTitleLetterSpacing, cellTokens.cellTitleLineHeight, cellTokens.cellSubtitleFontFamily, cellTokens.cellSubtitleFontSize, cellTokens.cellSubtitleFontStyle, cellTokens.cellSubtitleFontWeight, cellTokens.cellSubtitleLetterSpacing, cellTokens.cellSubtitleLineHeight),
+      xs: /*#__PURE__*/css(["", ":15rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], cellTokens.cellWidth, cellTokens.cellPadding, cellTokens.cellPaddingLeftContent, cellTokens.cellPaddingContent, cellTokens.cellPaddingRightContent, cellTokens.cellTextboxGap, cellTokens.cellGap, cellTokens.cellLabelFontFamily, cellTokens.cellLabelFontSize, cellTokens.cellLabelFontStyle, cellTokens.cellLabelFontWeight, cellTokens.cellLabelLetterSpacing, cellTokens.cellLabelLineHeight, cellTokens.cellTitleFontFamily, cellTokens.cellTitleFontSize, cellTokens.cellTitleFontStyle, cellTokens.cellTitleFontWeight, cellTokens.cellTitleLetterSpacing, cellTokens.cellTitleLineHeight, cellTokens.cellSubtitleFontFamily, cellTokens.cellSubtitleFontSize, cellTokens.cellSubtitleFontStyle, cellTokens.cellSubtitleFontWeight, cellTokens.cellSubtitleLetterSpacing, cellTokens.cellSubtitleLineHeight)
+    },
+    stretching: {
+      auto: /*#__PURE__*/css([""]),
+      filled: /*#__PURE__*/css([""]),
+      fixed: /*#__PURE__*/css([""])
+    }
+  }
+};

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

@@ -0,0 +1,6 @@
+import { cellConfig, Textbox, TextLabel, TextSubtitle, TextTitle } from '../../../../components/Cell';
+import { component, mergeConfig } from '../../../../engines';
+import { config } from './Cell.config';
+var mergedConfig = /*#__PURE__*/mergeConfig(cellConfig, config);
+export var Cell = /*#__PURE__*/component(mergedConfig);
+export { Textbox, TextLabel, TextSubtitle, TextTitle };

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

@@ -0,0 +1,131 @@
+import React from 'react';
+import type { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import styled from 'styled-components';
+
+import { WithTheme } from '../../../_helpers';
+import { Avatar } from '../Avatar/Avatar';
+import { IconChevronLeft } from '../../../../components/_Icon';
+
+import { Cell, Textbox, TextTitle } from './Cell';
+
+type StoryProps = ComponentProps<typeof Cell> & {
+    itemsCount?: number;
+    enableLeftContent?: boolean;
+    enableRightContent?: boolean;
+};
+type Story = StoryObj<StoryProps>;
+
+const sizes = ['l', 'm', 's', 'xs'];
+const stretchingValues = ['fixed', 'filled', 'auto'];
+const alignLeft = ['top', 'center', 'bottom'];
+const alignRight = ['top', 'center', 'bottom'];
+
+type SizesCell = 'xs' | 'l' | 'm' | 's' | undefined;
+type SizesAvatar = 'l' | 'm' | 's';
+
+const getSize = (size: SizesCell): SizesAvatar => {
+    if (size === 'xs' || !size) {
+        return 's';
+    }
+
+    return size;
+};
+
+const meta: Meta<typeof Cell> = {
+    title: 'plasma_b2c/Cell',
+    decorators: [WithTheme],
+    argTypes: {
+        size: {
+            options: sizes,
+            control: {
+                type: 'select',
+            },
+        },
+        stretching: {
+            options: stretchingValues,
+            control: {
+                type: 'select',
+            },
+        },
+        alignLeft: {
+            options: alignLeft,
+            control: {
+                type: 'select',
+            },
+        },
+        alignRight: {
+            options: alignRight,
+            control: {
+                type: 'select',
+            },
+        },
+    },
+};
+
+export default meta;
+
+const ChevronRight = styled(IconChevronLeft)`
+    transform: rotate(180deg);
+    color: var(--text-secondary);
+`;
+
+export const Default: Story = {
+    args: {
+        size: 'm',
+        stretching: 'filled',
+        enableLeftContent: false,
+        enableRightContent: false,
+        alignLeft: 'center',
+        alignRight: 'center',
+        title: 'Title',
+        subtitle: 'Subtitle',
+        label: 'Label',
+    },
+    render: ({ ...args }: StoryProps) => {
+        return (
+            <Cell
+                contentLeft={
+                    !args.enableLeftContent && (
+                        <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}
+            />
+        );
+    },
+};
+
+export const WithContentTextboxCustom: Story = {
+    args: {
+        size: 'm',
+        stretching: 'filled',
+    },
+    render: ({ ...args }: StoryProps) => {
+        const MyStyledText = styled.div`
+            font-size: 12px;
+            font-weight: 600;
+            opacity: 0.5;
+        `;
+        return (
+            <Cell
+                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>
+                    <MyStyledText>My styled Text</MyStyledText>
+                </Textbox>
+            </Cell>
+        );
+    },
+};

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

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

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

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

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

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

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

@@ -0,0 +1,25 @@
+import { css } from 'styled-components';
+import { cellTokens } from '../../../../components/Cell';
+export var config = {
+  defaults: {
+    view: 'default',
+    size: 'm',
+    stretching: 'filled'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;"], cellTokens.cellColor, cellTokens.cellLabelColor, cellTokens.cellTitleColor, cellTokens.cellSubtitleColor, cellTokens.cellBackgroundColor)
+    },
+    size: {
+      l: /*#__PURE__*/css(["", ":15rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":0.375rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], cellTokens.cellWidth, cellTokens.cellPadding, cellTokens.cellPaddingLeftContent, cellTokens.cellPaddingContent, cellTokens.cellPaddingRightContent, cellTokens.cellTextboxGap, cellTokens.cellGap, cellTokens.cellLabelFontFamily, cellTokens.cellLabelFontSize, cellTokens.cellLabelFontStyle, cellTokens.cellLabelFontWeight, cellTokens.cellLabelLetterSpacing, cellTokens.cellLabelLineHeight, cellTokens.cellTitleFontFamily, cellTokens.cellTitleFontSize, cellTokens.cellTitleFontStyle, cellTokens.cellTitleFontWeight, cellTokens.cellTitleLetterSpacing, cellTokens.cellTitleLineHeight, cellTokens.cellSubtitleFontFamily, cellTokens.cellSubtitleFontSize, cellTokens.cellSubtitleFontStyle, cellTokens.cellSubtitleFontWeight, cellTokens.cellSubtitleLetterSpacing, cellTokens.cellSubtitleLineHeight),
+      m: /*#__PURE__*/css(["", ":15rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":0.375rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], cellTokens.cellWidth, cellTokens.cellPadding, cellTokens.cellPaddingLeftContent, cellTokens.cellPaddingContent, cellTokens.cellPaddingRightContent, cellTokens.cellTextboxGap, cellTokens.cellGap, cellTokens.cellLabelFontFamily, cellTokens.cellLabelFontSize, cellTokens.cellLabelFontStyle, cellTokens.cellLabelFontWeight, cellTokens.cellLabelLetterSpacing, cellTokens.cellLabelLineHeight, cellTokens.cellTitleFontFamily, cellTokens.cellTitleFontSize, cellTokens.cellTitleFontStyle, cellTokens.cellTitleFontWeight, cellTokens.cellTitleLetterSpacing, cellTokens.cellTitleLineHeight, cellTokens.cellSubtitleFontFamily, cellTokens.cellSubtitleFontSize, cellTokens.cellSubtitleFontStyle, cellTokens.cellSubtitleFontWeight, cellTokens.cellSubtitleLetterSpacing, cellTokens.cellSubtitleLineHeight),
+      s: /*#__PURE__*/css(["", ":15rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":0.375rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], cellTokens.cellWidth, cellTokens.cellPadding, cellTokens.cellPaddingLeftContent, cellTokens.cellPaddingContent, cellTokens.cellPaddingRightContent, cellTokens.cellTextboxGap, cellTokens.cellGap, cellTokens.cellLabelFontFamily, cellTokens.cellLabelFontSize, cellTokens.cellLabelFontStyle, cellTokens.cellLabelFontWeight, cellTokens.cellLabelLetterSpacing, cellTokens.cellLabelLineHeight, cellTokens.cellTitleFontFamily, cellTokens.cellTitleFontSize, cellTokens.cellTitleFontStyle, cellTokens.cellTitleFontWeight, cellTokens.cellTitleLetterSpacing, cellTokens.cellTitleLineHeight, cellTokens.cellSubtitleFontFamily, cellTokens.cellSubtitleFontSize, cellTokens.cellSubtitleFontStyle, cellTokens.cellSubtitleFontWeight, cellTokens.cellSubtitleLetterSpacing, cellTokens.cellSubtitleLineHeight),
+      xs: /*#__PURE__*/css(["", ":15rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":0.25rem;", ":0.375rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], cellTokens.cellWidth, cellTokens.cellPadding, cellTokens.cellPaddingLeftContent, cellTokens.cellPaddingContent, cellTokens.cellPaddingRightContent, cellTokens.cellTextboxGap, cellTokens.cellGap, cellTokens.cellGap, cellTokens.cellLabelFontFamily, cellTokens.cellLabelFontSize, cellTokens.cellLabelFontStyle, cellTokens.cellLabelFontWeight, cellTokens.cellLabelLetterSpacing, cellTokens.cellLabelLineHeight, cellTokens.cellTitleFontFamily, cellTokens.cellTitleFontSize, cellTokens.cellTitleFontStyle, cellTokens.cellTitleFontWeight, cellTokens.cellTitleLetterSpacing, cellTokens.cellTitleLineHeight, cellTokens.cellSubtitleFontFamily, cellTokens.cellSubtitleFontSize, cellTokens.cellSubtitleFontStyle, cellTokens.cellSubtitleFontWeight, cellTokens.cellSubtitleLetterSpacing, cellTokens.cellSubtitleLineHeight)
+    },
+    stretching: {
+      auto: /*#__PURE__*/css([""]),
+      filled: /*#__PURE__*/css([""]),
+      fixed: /*#__PURE__*/css([""])
+    }
+  }
+};

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

@@ -0,0 +1,6 @@
+import { cellConfig, Textbox, TextLabel, TextSubtitle, TextTitle } from '../../../../components/Cell';
+import { component, mergeConfig } from '../../../../engines';
+import { config } from './Cell.config';
+var mergedConfig = /*#__PURE__*/mergeConfig(cellConfig, config);
+export var Cell = /*#__PURE__*/component(mergedConfig);
+export { Textbox, TextLabel, TextSubtitle, TextTitle };