@salutejs/plasma-new-hope 0.320.1-canary.1917.14487866851.0 → 0.320.1-canary.1921.14492825856.0

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

@@ -92,19 +92,27 @@ export var tableRoot = function tableRoot(Root) {
       return [].concat(_toConsumableArray(enableSelection ? [{
         id: SELECT_COLUMN_ID,
         header: function header(_ref2) {
+          var _checkboxAppearance;
           var table = _ref2.table;
           return /*#__PURE__*/React.createElement(StyledCheckbox, {
             checked: table.getIsSomeRowsSelected() || table.getIsAllRowsSelected(),
             indeterminate: table.getIsSomeRowsSelected(),
             onChange: table.getToggleAllRowsSelectedHandler()
+            // eslint-disable-next-line no-underscore-dangle
+            ,
+            appearance: (_checkboxAppearance = props._checkboxAppearance) !== null && _checkboxAppearance !== void 0 ? _checkboxAppearance : 'default'
           });
         },
         cell: function cell(_ref3) {
+          var _checkboxAppearance2;
           var row = _ref3.row;
           return /*#__PURE__*/React.createElement(StyledCheckbox, {
             checked: row.getIsSelected(),
             indeterminate: row.getIsSomeSelected(),
             onChange: row.getToggleSelectedHandler()
+            // eslint-disable-next-line no-underscore-dangle
+            ,
+            appearance: (_checkboxAppearance2 = props._checkboxAppearance) !== null && _checkboxAppearance2 !== void 0 ? _checkboxAppearance2 : 'default'
           });
         },
         enableResizing: false

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

@@ -63,7 +63,7 @@ export var Th = /*#__PURE__*/styled.th.withConfig({
 }, Resizer);
 export var StyledCheckbox = /*#__PURE__*/styled(Checkbox).withConfig({
   componentId: "plasma-new-hope__sc-1nklm7n-6"
-})(["", ":var(", ");", ":var(", ");", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(", ");", ":var(", ");", ":var(--text-secondary);"], checkboxTokens.triggerSize, tokens.checkboxTriggerSize, checkboxTokens.triggerBorderRadius, tokens.checkboxTriggerBorderRadius, checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.triggerBorderCheckedColor, tokens.checkboxTriggerBorderCheckedColor, checkboxTokens.triggerBorderWidth, tokens.checkboxTriggerBorderWidth, checkboxTokens.triggerBorderColor);
+})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");"], checkboxTokens.triggerSize, tokens.checkboxTriggerSize, checkboxTokens.triggerBorderRadius, tokens.checkboxTriggerBorderRadius, checkboxTokens.fillColor, tokens.checkboxFillColor, checkboxTokens.iconColor, tokens.checkboxTriggerIconColor, checkboxTokens.triggerBorderCheckedColor, tokens.checkboxTriggerBorderCheckedColor, checkboxTokens.triggerBorderWidth, tokens.checkboxTriggerBorderWidth, checkboxTokens.triggerBorderColor, tokens.checkboxTriggerBorderColor);
 export var StyledDivider = /*#__PURE__*/styled(Divider).withConfig({
   componentId: "plasma-new-hope__sc-1nklm7n-7"
 })(["", ":0.0625rem;", ":var(--surface-transparent-tertiary);", ":0.0625rem;"], dividerTokens.baseSideSize, dividerTokens.background, dividerTokens.borderRadius);

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

@@ -22,6 +22,9 @@ export var tableTokens = {
   checkboxTriggerBorderCheckedColor: '--plasma-table-checkbox-trigger-border-checked-color',
   checkboxTriggerBorderRadius: '--plasma-table-checkbox-trigger-border-radius',
   checkboxTriggerBorderWidth: '--plasma-table-checkbox-trigger-border-width',
+  checkboxTriggerBorderColor: '--plasma-table-checkbox-trigger-border-color',
+  checkboxFillColor: '--plasma-table-checkbox-fill-color',
+  checkboxTriggerIconColor: '--plasma-table-checkbox-trigger-icon-color',
   editableCellIconGap: '--plasma-table-editable-cell-icon-gap',
   editableCellIconButtonWidth: '--plasma-table-editable-cell-icon-button-width',
   editableCellIconButtonHeight: '--plasma-table-editable-cell-icon-button-height',

package/styled-components/es/components/Toast/ToastNew/ToastNew.js

@@ -0,0 +1,113 @@
+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 = ["hasClose", "view", "size", "pilled", "contentLeft", "width", "textColor", "position", "duration", "gap", "onCloseButtonClick"];
+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; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { forwardRef } from 'react';
+import toast, { Toaster, resolveValue } from 'react-hot-toast';
+import { tokens } from "../Toast.tokens";
+import { IconCrossThin } from "../../_Icon/Icons/IconCrossThin";
+import { base, Toast, CloseIconWrapper, StyledContentLeft } from "./ToastNew.styles";
+export var toastContainerRoot = function toastContainerRoot(Root) {
+  return /*#__PURE__*/forwardRef(function (props, ref) {
+    var _props$hasClose = props.hasClose,
+      hasClose = _props$hasClose === void 0 ? true : _props$hasClose,
+      view = props.view,
+      size = props.size,
+      pilled = props.pilled,
+      contentLeft = props.contentLeft,
+      width = props.width,
+      textColor = props.textColor,
+      _props$position = props.position,
+      position = _props$position === void 0 ? 'bottom-center' : _props$position,
+      _props$duration = props.duration,
+      duration = _props$duration === void 0 ? Infinity : _props$duration,
+      gap = props.gap,
+      onCloseButtonClick = props.onCloseButtonClick,
+      rest = _objectWithoutProperties(props, _excluded);
+    return /*#__PURE__*/React.createElement(Root, _extends({
+      ref: ref,
+      view: view,
+      size: size,
+      pilled: pilled
+    }, rest), /*#__PURE__*/React.createElement(Toaster, {
+      gutter: gap,
+      toastOptions: {
+        duration: duration,
+        position: position
+      }
+    }, function (options) {
+      var _options$plasmaOption, _options$plasmaOption2, _options$plasmaOption3, _options$plasmaOption4, _options$plasmaOption5, _options$plasmaOption6, _options$plasmaOption7, _options$plasmaOption8, _options$plasmaOption9, _options$plasmaOption10;
+      return /*#__PURE__*/React.createElement(Root, {
+        view: (_options$plasmaOption = options.plasmaOptions) === null || _options$plasmaOption === void 0 ? void 0 : _options$plasmaOption.view,
+        size: (_options$plasmaOption2 = options.plasmaOptions) === null || _options$plasmaOption2 === void 0 ? void 0 : _options$plasmaOption2.size,
+        pilled: (_options$plasmaOption3 = options.plasmaOptions) === null || _options$plasmaOption3 === void 0 ? void 0 : _options$plasmaOption3.pilled
+      }, /*#__PURE__*/React.createElement(Toast, {
+        style: {
+          opacity: options.visible ? 1 : 0
+        },
+        width: ((_options$plasmaOption4 = options.plasmaOptions) === null || _options$plasmaOption4 === void 0 ? void 0 : _options$plasmaOption4.width) || width,
+        textColor: ((_options$plasmaOption5 = options.plasmaOptions) === null || _options$plasmaOption5 === void 0 ? void 0 : _options$plasmaOption5.textColor) || textColor
+      }, (((_options$plasmaOption6 = options.plasmaOptions) === null || _options$plasmaOption6 === void 0 ? void 0 : _options$plasmaOption6.contentLeft) || contentLeft) && /*#__PURE__*/React.createElement(StyledContentLeft, null, ((_options$plasmaOption7 = options.plasmaOptions) === null || _options$plasmaOption7 === void 0 ? void 0 : _options$plasmaOption7.contentLeft) || contentLeft), resolveValue(options.message, options), (((_options$plasmaOption8 = options.plasmaOptions) === null || _options$plasmaOption8 === void 0 ? void 0 : _options$plasmaOption8.hasClose) || ((_options$plasmaOption9 = (_options$plasmaOption10 = options.plasmaOptions) === null || _options$plasmaOption10 === void 0 ? void 0 : _options$plasmaOption10.hasClose) !== null && _options$plasmaOption9 !== void 0 ? _options$plasmaOption9 : hasClose)) && /*#__PURE__*/React.createElement(CloseIconWrapper, {
+        view: "clear",
+        size: "s",
+        stretching: "fixed",
+        onClick: function onClick() {
+          if (onCloseButtonClick) {
+            onCloseButtonClick();
+          }
+          toast.dismiss(options.id);
+        }
+      }, /*#__PURE__*/React.createElement(IconCrossThin, {
+        size: "s",
+        color: "inherit",
+        sizeCustomProperty: tokens.closeIconSize
+      }))));
+    }));
+  });
+};
+export var showToast = function showToast(text, options) {
+  toast(text, _objectSpread(_objectSpread(_objectSpread({}, options !== null && options !== void 0 && options.position ? {
+    position: options === null || options === void 0 ? void 0 : options.position
+  } : undefined), options !== null && options !== void 0 && options.duration ? {
+    duration: options === null || options === void 0 ? void 0 : options.duration
+  } : undefined), {}, {
+    // @ts-ignore
+    plasmaOptions: {
+      view: options === null || options === void 0 ? void 0 : options.view,
+      size: options === null || options === void 0 ? void 0 : options.size,
+      pilled: options === null || options === void 0 ? void 0 : options.pilled,
+      contentLeft: options === null || options === void 0 ? void 0 : options.contentLeft,
+      hasClose: options === null || options === void 0 ? void 0 : options.hasClose,
+      width: options === null || options === void 0 ? void 0 : options.width,
+      textColor: options === null || options === void 0 ? void 0 : options.textColor
+    }
+  }));
+};
+export var toastContainerConfig = {
+  name: 'ToastContainer',
+  tag: 'div',
+  layout: toastContainerRoot,
+  base: base,
+  variations: {
+    view: {
+      css: ''
+    },
+    size: {
+      css: ''
+    },
+    pilled: {
+      css: '',
+      attrs: true
+    }
+  },
+  defaults: {
+    view: 'default',
+    size: 'm'
+  }
+};

package/styled-components/es/components/Toast/ToastNew/ToastNew.styles.js

@@ -0,0 +1,25 @@
+var _templateObject;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import { css } from 'styled-components';
+import styled from 'styled-components';
+import { component, mergeConfig } from "../../../engines";
+import { buttonConfig } from "../../Button";
+import { tokens } from "./ToastNew.tokens";
+var mergedButtonConfig = /*#__PURE__*/mergeConfig(buttonConfig);
+var Button = /*#__PURE__*/component(mergedButtonConfig);
+export var base = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral([""])));
+export var Toast = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-ifj8bd-0"
+})(["display:flex;align-items:center;background:var(", ");color:", ";padding:var(", ");border-radius:var(", ");max-width:var(", ");width:", ";font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], tokens.background, function (_ref) {
+  var textColor = _ref.textColor;
+  return textColor || "var(".concat(tokens.color, ")");
+}, tokens.padding, tokens.borderRadius, tokens.maxWidth, function (_ref2) {
+  var width = _ref2.width;
+  return width || 'auto';
+}, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight);
+export var CloseIconWrapper = /*#__PURE__*/styled(Button).withConfig({
+  componentId: "plasma-new-hope__sc-ifj8bd-1"
+})(["height:var(", ");margin:var(", ");color:var(", ");:hover{color:var(", ");}"], tokens.closeIconButtonSize, tokens.closeIconMargin, tokens.closeIconColor, tokens.closeIconColorOnHover);
+export var StyledContentLeft = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-ifj8bd-2"
+})(["margin:var(", ");color:var(", ");line-height:0;"], tokens.contentLeftMargin, tokens.contentLeftColor);

package/styled-components/es/components/Toast/ToastNew/ToastNew.tokens.js

@@ -0,0 +1,21 @@
+export var classes = {};
+export var tokens = {
+  background: '--plasma-toast-background',
+  color: '--plasma-toast-color',
+  padding: '--plasma-toast-padding',
+  borderRadius: '--plasma-toast-border-radius',
+  maxWidth: '--plasma-toast-max-width',
+  fontFamily: '--plasma-toast-font-family',
+  fontSize: '--plasma-toast-font-size',
+  fontStyle: '--plasma-toast-font-style',
+  fontWeight: '--plasma-toast-font-weight',
+  letterSpacing: '--plasma-toast-letter-spacing',
+  lineHeight: '--plasma-toast-line-height',
+  contentLeftMargin: '--plasma-toast-content-left-margin',
+  contentLeftColor: '--plasma-toast-content-left-color',
+  closeIconMargin: '--plasma-toast-close-icon-margin',
+  closeIconColor: '--plasma-toast-close-icon-color',
+  closeIconColorOnHover: '--plasma-toast-close-icon-color-on-hover',
+  closeIconSize: '--plasma-toast-close-icon-size',
+  closeIconButtonSize: '--plasma-toast-close-icon-button-size'
+};

package/styled-components/es/components/Toast/ToastNew/ToastNew.types.js

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

package/styled-components/es/components/Toast/ToastNew/index.js

@@ -0,0 +1,2 @@
+export { toastContainerConfig, toastContainerRoot, showToast } from "./ToastNew";
+export { tokens as toastNewTokens } from "./ToastNew.tokens";

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

@@ -4,10 +4,13 @@ import { createConditionalComponent } from "../../../../utils/createConditionalC
 import { config } from "./Checkbox.config";
 import { config as outlineConfig } from "./Checkbox.outline.config";
 var mergedConfigDefault = /*#__PURE__*/mergeConfig(checkboxConfig, config);
-export var CheckboxDefalut = /*#__PURE__*/component(mergedConfigDefault);
+export var CheckboxDefault = /*#__PURE__*/component(mergedConfigDefault);
 var mergedConfigOutline = /*#__PURE__*/mergeConfig(checkboxConfig, outlineConfig);
 export var CheckboxOutline = /*#__PURE__*/component(mergedConfigOutline);
-export var Checkbox = /*#__PURE__*/createConditionalComponent(CheckboxDefalut, [{
+/**
+ * Флажок или чекбокс. Позволяет пользователю управлять параметром с двумя состояниями — ☑ включено и ☐ отключено.
+ */
+export var Checkbox = /*#__PURE__*/createConditionalComponent(CheckboxDefault, [{
   conditions: {
     prop: 'appearance',
     value: 'outline'

package/styled-components/es/examples/plasma_b2c/components/Checkbox/Checkbox.outline.config.js

@@ -17,7 +17,7 @@ export var config = {
      * Вид контрола.
      */
     view: {
-      accent: /*#__PURE__*/css(["", ":transparent;", ":var(--text-accent);", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);", ":var(--text-accent);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.labelColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderColor, checkboxTokens.triggerBorderCheckedColor),
+      accent: /*#__PURE__*/css(["", ":transparent;", ":var(--outline-accent);", ":var(--text-primary);", ":var(--outline-transparent-tertiary);", ":transparent;", ":var(--text-secondary);", ":var(--outline-accent);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.labelColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderColor, checkboxTokens.triggerBorderCheckedColor),
       // deprecated
       "default": /*#__PURE__*/css(["", ":transparent;", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);", ":var(--text-primary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.labelColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderColor, checkboxTokens.triggerBorderCheckedColor),
       // deprecated
@@ -30,7 +30,7 @@ export var config = {
       positive: /*#__PURE__*/css(["", ":transparent;", ":var(--text-positive);", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);", ":var(--text-positive);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.labelColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderColor, checkboxTokens.triggerBorderCheckedColor),
       // deprecated
       warning: /*#__PURE__*/css(["", ":transparent;", ":var(--text-warning);", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);", ":var(--text-warning);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.labelColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderColor, checkboxTokens.triggerBorderCheckedColor),
-      negative: /*#__PURE__*/css(["", ":transparent;", ":var(--text-negative);", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-negative);", ":var(--text-negative);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.labelColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderColor, checkboxTokens.triggerBorderCheckedColor)
+      negative: /*#__PURE__*/css(["", ":transparent;", ":var(--outline-negative);", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--outline-negative);", ":var(--outline-negative);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.labelColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderColor, checkboxTokens.triggerBorderCheckedColor)
     },
     disabled: {
       "true": /*#__PURE__*/css(["", ":0.4;"], checkboxTokens.disabledOpacity)

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

@@ -35,6 +35,11 @@ const meta: Meta<typeof Checkbox> = {
                 type: 'radio',
             },
         },
+        indeterminate: {
+            control: {
+                type: 'boolean',
+            },
+        },
     },
     args: {
         view: 'accent',
@@ -42,6 +47,7 @@ const meta: Meta<typeof Checkbox> = {
         disabled: false,
         focused: true,
         appearance: 'default',
+        indeterminate: false,
     },
 };
 

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

@@ -4,10 +4,10 @@ import { createConditionalComponent } from "../../../../utils/createConditionalC
 import { config } from "./Radiobox.config";
 import { config as outlineConfig } from "./Radiobox.outline.config";
 var mergedConfigDefault = /*#__PURE__*/mergeConfig(radioboxConfig, config);
-export var RadioboxDefalut = /*#__PURE__*/component(mergedConfigDefault);
+export var RadioboxDefault = /*#__PURE__*/component(mergedConfigDefault);
 var mergedConfigOutline = /*#__PURE__*/mergeConfig(radioboxConfig, outlineConfig);
 export var RadioboxOutline = /*#__PURE__*/component(mergedConfigOutline);
-export var Radiobox = /*#__PURE__*/createConditionalComponent(RadioboxDefalut, [{
+export var Radiobox = /*#__PURE__*/createConditionalComponent(RadioboxDefault, [{
   conditions: {
     prop: 'appearance',
     value: 'outline'

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

@@ -2,11 +2,16 @@ import { css } from 'styled-components';
 import { sheetTokens } from "../../../../components/Sheet";
 export var config = {
   defaults: {
-    view: 'default'
+    view: 'default',
+    handlePlacement: 'outer'
   },
   variations: {
     view: {
       "default": /*#__PURE__*/css(["", ":var(--overlay-soft);", ":var(--overlay-blur);", ":var(--surface-solid-card);", ":var(--surface-solid-tertiary);"], sheetTokens.sheetOverlayColor, sheetTokens.sheetOverlayWithBlurColor, sheetTokens.contentBackgroundColor, sheetTokens.handleBackgroundColor)
+    },
+    handlePlacement: {
+      inner: /*#__PURE__*/css(["", ":-2.375rem;"], sheetTokens.handleMarginTop),
+      outer: /*#__PURE__*/css(["", ":-1.375rem;"], sheetTokens.handleMarginTop)
     }
   }
 };

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

@@ -10,8 +10,16 @@ import { Body } from '../../../typography/components/Body/Body';
 import { Sheet } from './Sheet';
 
 const meta: Meta<typeof Sheet> = {
-    title: 'b2c/Overlay/Select',
+    title: 'b2c/Overlay/Sheet',
     decorators: [WithTheme],
+    argTypes: {
+        handlePlacement: {
+            options: ['inner', 'outer'],
+            control: {
+                type: 'inline-radio',
+            },
+        },
+    },
     args: {
         withBlur: false,
         withOverlay: true,
@@ -19,6 +27,8 @@ const meta: Meta<typeof Sheet> = {
         hasHandle: true,
         isHeaderFixed: false,
         isFooterFixed: false,
+        handlePlacement: 'outer',
+        fullScreen: false,
     },
 };
 
@@ -29,10 +39,18 @@ type StorySheetProps = ComponentProps<typeof Sheet> & {
     storyHasFooter: boolean;
 };
 
+type StorySheetPropsExtension = StorySheetProps & {
+    fullScreen: boolean;
+};
+
 const StyledBody = styled(Body)`
     padding-bottom: 300px;
 `;
 
+const StyledBodyFullScreen = styled(Body)`
+    height: calc(100vh - 10rem);
+`;
+
 const StoryDefault = ({
     withOverlay,
     withTransition,
@@ -42,7 +60,9 @@ const StoryDefault = ({
     isHeaderFixed,
     hasHandle,
     withBlur,
-}: StorySheetProps) => {
+    handlePlacement,
+    fullScreen,
+}: StorySheetPropsExtension) => {
     const [opened, setOpened] = useState(false);
 
     return (
@@ -50,6 +70,7 @@ const StoryDefault = ({
             <Button onClick={() => setOpened(true)}>Открыть</Button>
             <Sheet
                 opened={opened}
+                handlePlacement={handlePlacement}
                 withOverlay={withOverlay}
                 withTransition={withTransition}
                 onClose={() => setOpened(false)}
@@ -72,7 +93,7 @@ const StoryDefault = ({
                 }
                 isFooterFixed={isFooterFixed}
             >
-                <StyledBody>body</StyledBody>
+                {fullScreen ? <StyledBodyFullScreen>body</StyledBodyFullScreen> : <StyledBody>body</StyledBody>}
             </Sheet>
         </>
     );

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

@@ -11,9 +11,9 @@ export var config = {
       clear: /*#__PURE__*/css(["", ":transparent;"], tokens.borderColor)
     },
     size: {
-      l: /*#__PURE__*/css(["", ":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);", ":3.125rem;", ":3.125rem;", ":0.375rem 1rem;", ":0.375rem 1rem;", ":0.125rem;", ":transparent;", ":1.25rem;", ":0.375rem;", ":0.5rem;", ":3rem;", ":100%;", ":0.25rem;", ":0.875rem;", ":0 0.75rem;", ":var(--surface-transparent-tertiary);", ":0.75rem 0;", ":0.375rem 1rem;", ":2.5rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.125rem;", ":0.875rem;", ":1.5rem;", ":0.75rem 0.875rem;", ":0.75rem;", ":0 0.375rem 0 0;", ":1.5rem;", ":0;", ":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);", ":1.25rem;", ":0.375rem;", ":0.125rem;", ":transparent;", ":0.5rem 1rem;", ":0.5rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.headerRowHeight, tokens.rowHeight, tokens.cellPadding, tokens.checkboxCellPadding, tokens.checkboxTriggerBorderWidth, tokens.checkboxTriggerBorderCheckedColor, tokens.checkboxTriggerSize, tokens.checkboxTriggerBorderRadius, tokens.editableCellIconGap, tokens.editableCellIconButtonWidth, tokens.editableCellIconButtonHeight, tokens.editableCellPadding, tokens.editableCellInputBorderRadius, tokens.editableCellInputPadding, tokens.editableCellInputBackground, tokens.filterCheckboxPadding, tokens.filterDividerMargin, tokens.buttonHeight, tokens.buttonFontFamily, tokens.buttonFontSize, tokens.buttonFontStyle, tokens.buttonFontWeight, tokens.buttonLetterSpacing, tokens.buttonLineHeight, tokens.selectPadding, tokens.selectBorderRadius, tokens.selectItemHeight, tokens.selectItemPadding, tokens.selectItemBorderRadius, tokens.selectItemIconMargin, tokens.selectItemIconSize, tokens.selectCellPadding, tokens.selectCellTitleFontFamily, tokens.selectCellTitleFontSize, tokens.selectCellTitleFontStyle, tokens.selectCellTitleFontWeight, tokens.selectCellTitleLetterSpacing, tokens.selectCellTitleLineHeight, tokens.selectCheckboxTriggerSize, tokens.selectCheckboxTriggerBorderRadius, tokens.selectCheckboxTriggerBorderWidth, tokens.selectCheckboxTriggerBorderCheckedColor, tokens.selectControlPanelPadding, tokens.selectControlPanelGap, tokens.linkButtonFontFamily, tokens.linkButtonFontSize, tokens.linkButtonFontStyle, tokens.linkButtonFontWeight, tokens.linkButtonLetterSpacing, tokens.linkButtonLineHeight),
-      m: /*#__PURE__*/css(["", ":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);", ":2.75rem;", ":2.75rem;", ":0.25rem 0.875rem;", ":0.25rem 0.75rem;", ":0.125rem;", ":transparent;", ":1.25rem;", ":0.375rem;", ":0.375rem;", ":2.5rem;", ":100%;", ":0.25rem;", ":0.625rem;", ":0 0.625rem;", ":var(--surface-transparent-tertiary);", ":0.5rem 0;", ":0.375rem 0.875rem;", ":2rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.125rem;", ":0.75rem;", ":1.5rem;", ":0.5rem 0.625rem;", ":0.625rem;", ":0 0.375rem 0 0;", ":1.5rem;", ":0;", ":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);", ":1.25rem;", ":0.375rem;", ":0.125rem;", ":transparent;", ":0.25rem 0.875rem;", ":0.625rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.headerRowHeight, tokens.rowHeight, tokens.cellPadding, tokens.checkboxCellPadding, tokens.checkboxTriggerBorderWidth, tokens.checkboxTriggerBorderCheckedColor, tokens.checkboxTriggerSize, tokens.checkboxTriggerBorderRadius, tokens.editableCellIconGap, tokens.editableCellIconButtonWidth, tokens.editableCellIconButtonHeight, tokens.editableCellPadding, tokens.editableCellInputBorderRadius, tokens.editableCellInputPadding, tokens.editableCellInputBackground, tokens.filterCheckboxPadding, tokens.filterDividerMargin, tokens.buttonHeight, tokens.buttonFontFamily, tokens.buttonFontSize, tokens.buttonFontStyle, tokens.buttonFontWeight, tokens.buttonLetterSpacing, tokens.buttonLineHeight, tokens.selectPadding, tokens.selectBorderRadius, tokens.selectItemHeight, tokens.selectItemPadding, tokens.selectItemBorderRadius, tokens.selectItemIconMargin, tokens.selectItemIconSize, tokens.selectCellPadding, tokens.selectCellTitleFontFamily, tokens.selectCellTitleFontSize, tokens.selectCellTitleFontStyle, tokens.selectCellTitleFontWeight, tokens.selectCellTitleLetterSpacing, tokens.selectCellTitleLineHeight, tokens.selectCheckboxTriggerSize, tokens.selectCheckboxTriggerBorderRadius, tokens.selectCheckboxTriggerBorderWidth, tokens.selectCheckboxTriggerBorderCheckedColor, tokens.selectControlPanelPadding, tokens.selectControlPanelGap, tokens.linkButtonFontFamily, tokens.linkButtonFontSize, tokens.linkButtonFontStyle, tokens.linkButtonFontWeight, tokens.linkButtonLetterSpacing, tokens.linkButtonLineHeight),
-      s: /*#__PURE__*/css(["", ":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);", ":2.125rem;", ":2.125rem;", ":0.125rem 0.5rem;", ":0.125rem 0.625rem;", ":0.125rem;", ":transparent;", ":0.875rem;", ":0.25rem;", ":0.25rem;", ":2rem;", ":100%;", ":0.125rem;", ":0.5rem;", ":0 0.375rem;", ":var(--surface-transparent-tertiary);", ":0.5rem 0;", ":0.25rem 0.625rem;", ":1.5rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.125rem;", ":0.625rem;", ":1rem;", ":0.5rem;", ":0.5rem;", ":0 0.25rem 0 0;", ":1rem;", ":0;", ":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);", ":0.875rem;", ":0.25rem;", ":0.125rem;", ":transparent;", ":0.25rem 0.625rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.headerRowHeight, tokens.rowHeight, tokens.cellPadding, tokens.checkboxCellPadding, tokens.checkboxTriggerBorderWidth, tokens.checkboxTriggerBorderCheckedColor, tokens.checkboxTriggerSize, tokens.checkboxTriggerBorderRadius, tokens.editableCellIconGap, tokens.editableCellIconButtonWidth, tokens.editableCellIconButtonHeight, tokens.editableCellPadding, tokens.editableCellInputBorderRadius, tokens.editableCellInputPadding, tokens.editableCellInputBackground, tokens.filterCheckboxPadding, tokens.filterDividerMargin, tokens.buttonHeight, tokens.buttonFontFamily, tokens.buttonFontSize, tokens.buttonFontStyle, tokens.buttonFontWeight, tokens.buttonLetterSpacing, tokens.buttonLineHeight, tokens.selectPadding, tokens.selectBorderRadius, tokens.selectItemHeight, tokens.selectItemPadding, tokens.selectItemBorderRadius, tokens.selectItemIconMargin, tokens.selectItemIconSize, tokens.selectCellPadding, tokens.selectCellTitleFontFamily, tokens.selectCellTitleFontSize, tokens.selectCellTitleFontStyle, tokens.selectCellTitleFontWeight, tokens.selectCellTitleLetterSpacing, tokens.selectCellTitleLineHeight, tokens.selectCheckboxTriggerSize, tokens.selectCheckboxTriggerBorderRadius, tokens.selectCheckboxTriggerBorderWidth, tokens.selectCheckboxTriggerBorderCheckedColor, tokens.selectControlPanelPadding, tokens.selectControlPanelGap, tokens.linkButtonFontFamily, tokens.linkButtonFontSize, tokens.linkButtonFontStyle, tokens.linkButtonFontWeight, tokens.linkButtonLetterSpacing, tokens.linkButtonLineHeight)
+      l: /*#__PURE__*/css(["", ":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);", ":3.125rem;", ":3.125rem;", ":0.375rem 1rem;", ":0.375rem 1rem;", ":0.125rem;", ":transparent;", ":1.25rem;", ":0.375rem;", ":var(--text-secondary);", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":0.5rem;", ":3rem;", ":100%;", ":0.25rem;", ":0.875rem;", ":0 0.75rem;", ":var(--surface-transparent-tertiary);", ":0.75rem 0;", ":0.375rem 1rem;", ":2.5rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.125rem;", ":0.875rem;", ":1.5rem;", ":0.75rem 0.875rem;", ":0.75rem;", ":0 0.375rem 0 0;", ":1.5rem;", ":0;", ":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);", ":1.25rem;", ":0.375rem;", ":0.125rem;", ":transparent;", ":0.5rem 1rem;", ":0.5rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.headerRowHeight, tokens.rowHeight, tokens.cellPadding, tokens.checkboxCellPadding, tokens.checkboxTriggerBorderWidth, tokens.checkboxTriggerBorderCheckedColor, tokens.checkboxTriggerSize, tokens.checkboxTriggerBorderRadius, tokens.checkboxTriggerBorderColor, tokens.checkboxFillColor, tokens.checkboxTriggerIconColor, tokens.editableCellIconGap, tokens.editableCellIconButtonWidth, tokens.editableCellIconButtonHeight, tokens.editableCellPadding, tokens.editableCellInputBorderRadius, tokens.editableCellInputPadding, tokens.editableCellInputBackground, tokens.filterCheckboxPadding, tokens.filterDividerMargin, tokens.buttonHeight, tokens.buttonFontFamily, tokens.buttonFontSize, tokens.buttonFontStyle, tokens.buttonFontWeight, tokens.buttonLetterSpacing, tokens.buttonLineHeight, tokens.selectPadding, tokens.selectBorderRadius, tokens.selectItemHeight, tokens.selectItemPadding, tokens.selectItemBorderRadius, tokens.selectItemIconMargin, tokens.selectItemIconSize, tokens.selectCellPadding, tokens.selectCellTitleFontFamily, tokens.selectCellTitleFontSize, tokens.selectCellTitleFontStyle, tokens.selectCellTitleFontWeight, tokens.selectCellTitleLetterSpacing, tokens.selectCellTitleLineHeight, tokens.selectCheckboxTriggerSize, tokens.selectCheckboxTriggerBorderRadius, tokens.selectCheckboxTriggerBorderWidth, tokens.selectCheckboxTriggerBorderCheckedColor, tokens.selectControlPanelPadding, tokens.selectControlPanelGap, tokens.linkButtonFontFamily, tokens.linkButtonFontSize, tokens.linkButtonFontStyle, tokens.linkButtonFontWeight, tokens.linkButtonLetterSpacing, tokens.linkButtonLineHeight),
+      m: /*#__PURE__*/css(["", ":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);", ":2.75rem;", ":2.75rem;", ":0.25rem 0.875rem;", ":0.25rem 0.75rem;", ":0.125rem;", ":transparent;", ":1.25rem;", ":0.375rem;", ":var(--text-secondary);", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":0.375rem;", ":2.5rem;", ":100%;", ":0.25rem;", ":0.625rem;", ":0 0.625rem;", ":var(--surface-transparent-tertiary);", ":0.5rem 0;", ":0.375rem 0.875rem;", ":2rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.125rem;", ":0.75rem;", ":1.5rem;", ":0.5rem 0.625rem;", ":0.625rem;", ":0 0.375rem 0 0;", ":1.5rem;", ":0;", ":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);", ":1.25rem;", ":0.375rem;", ":0.125rem;", ":transparent;", ":0.25rem 0.875rem;", ":0.625rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.headerRowHeight, tokens.rowHeight, tokens.cellPadding, tokens.checkboxCellPadding, tokens.checkboxTriggerBorderWidth, tokens.checkboxTriggerBorderCheckedColor, tokens.checkboxTriggerSize, tokens.checkboxTriggerBorderRadius, tokens.checkboxTriggerBorderColor, tokens.checkboxFillColor, tokens.checkboxTriggerIconColor, tokens.editableCellIconGap, tokens.editableCellIconButtonWidth, tokens.editableCellIconButtonHeight, tokens.editableCellPadding, tokens.editableCellInputBorderRadius, tokens.editableCellInputPadding, tokens.editableCellInputBackground, tokens.filterCheckboxPadding, tokens.filterDividerMargin, tokens.buttonHeight, tokens.buttonFontFamily, tokens.buttonFontSize, tokens.buttonFontStyle, tokens.buttonFontWeight, tokens.buttonLetterSpacing, tokens.buttonLineHeight, tokens.selectPadding, tokens.selectBorderRadius, tokens.selectItemHeight, tokens.selectItemPadding, tokens.selectItemBorderRadius, tokens.selectItemIconMargin, tokens.selectItemIconSize, tokens.selectCellPadding, tokens.selectCellTitleFontFamily, tokens.selectCellTitleFontSize, tokens.selectCellTitleFontStyle, tokens.selectCellTitleFontWeight, tokens.selectCellTitleLetterSpacing, tokens.selectCellTitleLineHeight, tokens.selectCheckboxTriggerSize, tokens.selectCheckboxTriggerBorderRadius, tokens.selectCheckboxTriggerBorderWidth, tokens.selectCheckboxTriggerBorderCheckedColor, tokens.selectControlPanelPadding, tokens.selectControlPanelGap, tokens.linkButtonFontFamily, tokens.linkButtonFontSize, tokens.linkButtonFontStyle, tokens.linkButtonFontWeight, tokens.linkButtonLetterSpacing, tokens.linkButtonLineHeight),
+      s: /*#__PURE__*/css(["", ":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);", ":2.125rem;", ":2.125rem;", ":0.125rem 0.5rem;", ":0.125rem 0.625rem;", ":0.125rem;", ":transparent;", ":0.875rem;", ":0.25rem;", ":var(--text-secondary);", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":0.25rem;", ":2rem;", ":100%;", ":0.125rem;", ":0.5rem;", ":0 0.375rem;", ":var(--surface-transparent-tertiary);", ":0.5rem 0;", ":0.25rem 0.625rem;", ":1.5rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.125rem;", ":0.625rem;", ":1rem;", ":0.5rem;", ":0.5rem;", ":0 0.25rem 0 0;", ":1rem;", ":0;", ":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);", ":0.875rem;", ":0.25rem;", ":0.125rem;", ":transparent;", ":0.25rem 0.625rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.headerRowHeight, tokens.rowHeight, tokens.cellPadding, tokens.checkboxCellPadding, tokens.checkboxTriggerBorderWidth, tokens.checkboxTriggerBorderCheckedColor, tokens.checkboxTriggerSize, tokens.checkboxTriggerBorderRadius, tokens.checkboxTriggerBorderColor, tokens.checkboxFillColor, tokens.checkboxTriggerIconColor, tokens.editableCellIconGap, tokens.editableCellIconButtonWidth, tokens.editableCellIconButtonHeight, tokens.editableCellPadding, tokens.editableCellInputBorderRadius, tokens.editableCellInputPadding, tokens.editableCellInputBackground, tokens.filterCheckboxPadding, tokens.filterDividerMargin, tokens.buttonHeight, tokens.buttonFontFamily, tokens.buttonFontSize, tokens.buttonFontStyle, tokens.buttonFontWeight, tokens.buttonLetterSpacing, tokens.buttonLineHeight, tokens.selectPadding, tokens.selectBorderRadius, tokens.selectItemHeight, tokens.selectItemPadding, tokens.selectItemBorderRadius, tokens.selectItemIconMargin, tokens.selectItemIconSize, tokens.selectCellPadding, tokens.selectCellTitleFontFamily, tokens.selectCellTitleFontSize, tokens.selectCellTitleFontStyle, tokens.selectCellTitleFontWeight, tokens.selectCellTitleLetterSpacing, tokens.selectCellTitleLineHeight, tokens.selectCheckboxTriggerSize, tokens.selectCheckboxTriggerBorderRadius, tokens.selectCheckboxTriggerBorderWidth, tokens.selectCheckboxTriggerBorderCheckedColor, tokens.selectControlPanelPadding, tokens.selectControlPanelGap, tokens.linkButtonFontFamily, tokens.linkButtonFontSize, tokens.linkButtonFontStyle, tokens.linkButtonFontWeight, tokens.linkButtonLetterSpacing, tokens.linkButtonLineHeight)
     }
   }
 };

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

@@ -17,7 +17,7 @@ const views = ['default', 'positive', 'negative'];
 const closeIconTypes = ['default', 'thin'];
 
 const meta: Meta<typeof ToastController> = {
-    title: 'b2c/Overlay/Toast',
+    title: 'b2c/Overlay/Toast (Legacy)',
     decorators: [WithTheme],
     argTypes: {
         view: {

package/styled-components/es/examples/plasma_b2c/components/ToastNew/Toast.config.js

@@ -0,0 +1,19 @@
+import { css } from 'styled-components';
+import { toastNewTokens as toastTokens } from "../../../../components/Toast/ToastNew";
+export var config = {
+  defaults: {
+    view: 'default',
+    size: 'm'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-solid-card-brightness);", ":var(--text-secondary);", ":var(--text-secondary);"], toastTokens.color, toastTokens.background, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover)
+    },
+    size: {
+      m: /*#__PURE__*/css(["", ":0.75rem;", ":calc(100vw - 5rem);", ":0.5625rem 0.75rem;", ":1rem;", ":1rem;", ":-0.0625rem -0.25rem -0.0625rem 0.5rem;", ":-0.0625rem 0.375rem -0.0625rem -0.125rem;", ":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);"], toastTokens.borderRadius, toastTokens.maxWidth, toastTokens.padding, toastTokens.closeIconSize, toastTokens.closeIconButtonSize, toastTokens.closeIconMargin, toastTokens.contentLeftMargin, toastTokens.fontFamily, toastTokens.fontSize, toastTokens.fontStyle, toastTokens.fontWeight, toastTokens.letterSpacing, toastTokens.lineHeight)
+    },
+    pilled: {
+      "true": /*#__PURE__*/css(["", ":1.5rem;", ":-0.0625rem 0.375rem -0.0625rem -0.25rem;", ":-0.0625rem -0.25rem -0.0625rem 0.375rem;"], toastTokens.borderRadius, toastTokens.contentLeftMargin, toastTokens.closeIconMargin)
+    }
+  }
+};

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

@@ -0,0 +1,6 @@
+import { toastContainerConfig, showToast } from "../../../../components/Toast/ToastNew";
+import { component, mergeConfig } from "../../../../engines";
+import { config } from "./Toast.config";
+var mergedConfig = /*#__PURE__*/mergeConfig(toastContainerConfig, config);
+export var ToastContainer = /*#__PURE__*/component(mergedConfig);
+export { showToast };

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

@@ -0,0 +1,90 @@
+import React, { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+
+import { WithTheme } from '../../../_helpers';
+import { IconDone } from '../../../../components/_Icon';
+import { Button } from '../Button/Button';
+
+import { ToastContainer, showToast } from './ToastNew';
+
+const views = ['default'];
+const sizes = ['m'];
+const positions = ['top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'];
+
+const meta: Meta<typeof ToastContainer> = {
+    title: 'b2c/Overlay/Toast',
+    component: ToastContainer,
+    decorators: [WithTheme],
+    argTypes: {
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: sizes,
+            control: {
+                type: 'select',
+            },
+        },
+        pilled: {
+            control: { type: 'boolean' },
+        },
+        hasClose: {
+            control: { type: 'boolean' },
+        },
+        enableContentLeft: {
+            control: { type: 'boolean' },
+        },
+        width: {
+            control: { type: 'text' },
+        },
+        textColor: {
+            control: { type: 'text' },
+        },
+        duration: {
+            control: { type: 'number' },
+        },
+        position: {
+            options: positions,
+            control: {
+                type: 'select',
+            },
+        },
+        gap: {
+            control: { type: 'number' },
+        },
+    },
+};
+
+export default meta;
+
+type StoryPropsDefault = ComponentProps<typeof ToastContainer> & {
+    enableContentLeft?: boolean;
+};
+
+const StoryDefault = (args: StoryPropsDefault) => {
+    const handleShowToast = () => {
+        showToast('Текст всплывающего уведомления');
+    };
+
+    return (
+        <div>
+            <ToastContainer {...args} contentLeft={args.enableContentLeft && <IconDone size="xs" color="inherit" />} />
+
+            <Button onClick={handleShowToast}>Показать тост</Button>
+        </div>
+    );
+};
+
+export const Default: StoryObj<StoryPropsDefault> = {
+    args: {
+        view: 'default',
+        size: 'm',
+        pilled: false,
+        hasClose: true,
+        enableContentLeft: true,
+    },
+    render: StoryDefault,
+};

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

@@ -4,10 +4,10 @@ import { createConditionalComponent } from "../../../../utils/createConditionalC
 import { config } from "./Checkbox.config";
 import { config as outlineConfig } from "./Checkbox.outline.config";
 var mergedConfigDefault = /*#__PURE__*/mergeConfig(checkboxConfig, config);
-export var CheckboxDefalut = /*#__PURE__*/component(mergedConfigDefault);
+export var CheckboxDefault = /*#__PURE__*/component(mergedConfigDefault);
 var mergedConfigOutline = /*#__PURE__*/mergeConfig(checkboxConfig, outlineConfig);
 export var CheckboxOutline = /*#__PURE__*/component(mergedConfigOutline);
-export var Checkbox = /*#__PURE__*/createConditionalComponent(CheckboxDefalut, [{
+export var Checkbox = /*#__PURE__*/createConditionalComponent(CheckboxDefault, [{
   conditions: {
     prop: 'appearance',
     value: 'outline'

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

@@ -4,10 +4,10 @@ import { createConditionalComponent } from "../../../../utils/createConditionalC
 import { config } from "./Radiobox.config";
 import { config as outlineConfig } from "./Radiobox.outline.config";
 var mergedConfigDefault = /*#__PURE__*/mergeConfig(radioboxConfig, config);
-export var RadioboxDefalut = /*#__PURE__*/component(mergedConfigDefault);
+export var RadioboxDefault = /*#__PURE__*/component(mergedConfigDefault);
 var mergedConfigOutline = /*#__PURE__*/mergeConfig(radioboxConfig, outlineConfig);
 export var RadioboxOutline = /*#__PURE__*/component(mergedConfigOutline);
-export var Radiobox = /*#__PURE__*/createConditionalComponent(RadioboxDefalut, [{
+export var Radiobox = /*#__PURE__*/createConditionalComponent(RadioboxDefault, [{
   conditions: {
     prop: 'appearance',
     value: 'outline'

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

@@ -7,6 +7,10 @@ export var config = {
   variations: {
     view: {
       "default": /*#__PURE__*/css(["", ":var(--overlay-soft);", ":var(--overlay-blur);", ":var(--surface-solid-card);", ":var(--surface-solid-tertiary);"], sheetTokens.sheetOverlayColor, sheetTokens.sheetOverlayWithBlurColor, sheetTokens.contentBackgroundColor, sheetTokens.handleBackgroundColor)
+    },
+    handlePlacement: {
+      inner: /*#__PURE__*/css(["", ":-2.375rem;"], sheetTokens.handleMarginTop),
+      outer: /*#__PURE__*/css(["", ":-1.375rem;"], sheetTokens.handleMarginTop)
     }
   }
 };