@salutejs/plasma-new-hope 0.194.0-canary.1558.11852073996.0 → 0.194.0-canary.1560.11855728487.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salutejs/plasma-new-hope",
-  "version": "0.194.0-canary.1558.11852073996.0",
+  "version": "0.194.0-canary.1560.11855728487.0",
   "description": "Salute Design System blueprint",
   "main": "cjs/index.js",
   "module": "es/index.js",
@@ -128,5 +128,5 @@
   "sideEffects": [
     "*.css"
   ],
-  "gitHead": "77b65a5bff681c71979e6960ad0a173d0c0f36cb"
+  "gitHead": "a8aafde3c5ae964b2f53e2743779d03e3beb8155"
 }

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

@@ -12,14 +12,11 @@ var _Popup = /*#__PURE__*/require("../Popup");
 var _Overlay = /*#__PURE__*/require("../Overlay");
 var _utils = /*#__PURE__*/require("../Popup/utils");
 var _hooks = /*#__PURE__*/require("../../hooks");
-var _IconClose2 = /*#__PURE__*/require("../_Icon/Icons/IconClose");
 var _Modal = /*#__PURE__*/require("./Modal.tokens");
 var _hooks2 = /*#__PURE__*/require("./hooks");
 var _base = /*#__PURE__*/require("./variations/_view/base");
 var _ModalContext = /*#__PURE__*/require("./ModalContext");
-var _Modal2 = /*#__PURE__*/require("./Modal.styles");
-var _IconClose;
-var _excluded = ["id", "withAnimation", "onClose", "onOverlayClick", "onEscKeyDown", "closeOnEsc", "closeOnOverlayClick", "withBlur", "initialFocusRef", "focusAfterRef", "zIndex", "popupInfo", "children", "view", "opened", "isOpen", "hasBody", "hasClose"];
+var _excluded = ["id", "withAnimation", "onClose", "onOverlayClick", "onEscKeyDown", "closeOnEsc", "closeOnOverlayClick", "withBlur", "initialFocusRef", "focusAfterRef", "zIndex", "popupInfo", "children", "view", "opened", "isOpen"];
 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 && {}.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; }
 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); }
@@ -52,11 +49,8 @@ var modalRoot = exports.modalRoot = function modalRoot(Root) {
       view = _ref.view,
       opened = _ref.opened,
       isOpen = _ref.isOpen,
-      hasBody = _ref.hasBody,
-      hasClose = _ref.hasClose,
       rest = _objectWithoutProperties(_ref, _excluded);
     var innerIsOpen = Boolean(isOpen || opened);
-    var innerHasClose = hasClose === undefined && hasBody || hasClose;
     var trapRef = (0, _hooks.useFocusTrap)(true, initialFocusRef, focusAfterRef, true);
     var popupController = (0, _Popup.usePopupContext)();
     var innerRef = (0, _plasmaCore.useForkRef)(trapRef, outerRootRef);
@@ -84,15 +78,6 @@ var modalRoot = exports.modalRoot = function modalRoot(Root) {
         onClose();
       }
     }, [closeOnOverlayClick, onOverlayClick, onClose]);
-    var overlayNode = /*#__PURE__*/_react["default"].createElement(_Overlay.Overlay, {
-      className: _Modal.classes.overlay,
-      zIndex: zIndex || _utils.DEFAULT_Z_INDEX,
-      backgroundColorProperty: overlayBackgroundToken,
-      withBlur: withBlur,
-      transparent: transparent,
-      isClickable: closeOnOverlayClick,
-      onOverlayClick: onModalOverlayKeyDown
-    });
     return /*#__PURE__*/_react["default"].createElement(Popup, _extends({
       id: innerId,
       opened: innerIsOpen,
@@ -100,17 +85,18 @@ var modalRoot = exports.modalRoot = function modalRoot(Root) {
       popupInfo: modalInfo,
       withAnimation: withAnimation,
       zIndex: zIndex,
-      overlay: hasBody ? overlayNode : /*#__PURE__*/_react["default"].createElement(Root, {
+      overlay: /*#__PURE__*/_react["default"].createElement(Root, {
         view: view
-      }, overlayNode)
-    }, rest), hasBody ? /*#__PURE__*/_react["default"].createElement(Root, {
-      view: view
-    }, /*#__PURE__*/_react["default"].createElement(_Modal2.ModalBody, null, /*#__PURE__*/_react["default"].createElement(_Modal2.ModalContent, null, innerHasClose && /*#__PURE__*/_react["default"].createElement(_Modal2.CloseButton, {
-      onClick: onClose,
-      "data-test": "modal-close"
-    }, _IconClose || (_IconClose = /*#__PURE__*/_react["default"].createElement(_IconClose2.IconClose, {
-      size: "s"
-    }))), children))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, children));
+      }, /*#__PURE__*/_react["default"].createElement(_Overlay.Overlay, {
+        className: _Modal.classes.overlay,
+        zIndex: zIndex || _utils.DEFAULT_Z_INDEX,
+        backgroundColorProperty: overlayBackgroundToken,
+        withBlur: withBlur,
+        transparent: transparent,
+        isClickable: closeOnOverlayClick,
+        onOverlayClick: onModalOverlayKeyDown
+      }))
+    }, rest), children);
   });
 };
 var modalConfig = exports.modalConfig = {

package/styled-components/cjs/components/Modal/Modal.template-doc.mdx

@@ -62,53 +62,6 @@ export function App() {
 }
 ```
 
-## Использование стилизованной обертки
-
-Для использования стилизованного мобального окна с отступами и крестиком для закрытия, добавьте свойство `hasBody`.
-```tsx live
-import React, { useState } from 'react';
-import { SSRProvider, Button, Modal, PopupProvider } from '@salutejs/{{ package }}';
-
-export function App() {
-    const [isOpenA, setIsOpenA] = useState(false);
-    const [isOpenB, setIsOpenB] = useState(false);
-
-    return (
-        <SSRProvider>
-            <PopupProvider>
-                <div style=\{{ height: "300px" }}>
-                    <div style=\{{ display: 'flex', flexDirection: 'column' }}>
-                        <Button text="Открыть A" onClick={() => setIsOpenA(true)} />
-                    </div>
-                    <Modal
-                        id="modalA"
-                        onClose={() => setIsOpenA(false)}
-                        opened={isOpenA}
-                        placement="center"
-                        offset={[0, 0]}
-                        hasBody
-                    >
-                        <Button onClick={() => setIsOpenA(false)}>Close</Button>
-                        <Button text="Открыть B" onClick={() => setIsOpenB(true)} />
-                        Content
-                        <Modal
-                            id="modalB"
-                            onClose={() => setIsOpenB(false)}
-                            opened={isOpenB}
-                            placement="right"
-                            offset={[0, 0]}
-                        >
-                            <Button onClick={() => setIsOpenB(false)}>Close</Button>
-                            Content
-                        </Modal>
-                    </Modal>
-                </div>
-            </PopupProvider>
-        </SSRProvider>
-    );
-}
-```
-
 ## Подключение анимации
 Подключение анимации аналогично тому, как это происходит в `Popup` - через свойство `withAnimation`(управление через `popupClasses`, `modalClasses`).
 Для добавления анимации в оверлей необходимо использовать класс `.modal-overlay` через переменную `modalClasses.overlay` из пакета.

package/styled-components/cjs/components/Modal/Modal.tokens.js

@@ -12,11 +12,5 @@ var classes = exports.classes = {
 };
 var tokens = exports.tokens = {
   modalOverlayWithBlurColor: '--plasma-modal-overlay-with-blur-color',
-  modalOverlayColor: '--plasma-modal-overlay-color',
-  modalBodyBackground: '--plasma-modal-body-background',
-  modalBodyBorderRadius: '--plasma-modal-body-border-radius',
-  modalBodyPadding: '--plasma-modal-body-padding',
-  modalContentPadding: '--plasma-modal-content-padding',
-  modalOutlineFocusColor: '--plasma-modal-outline-focus-color',
-  modalCloseButtonRadius: '--plasma-modal-close-button-radius'
+  modalOverlayColor: '--plasma-modal-overlay-color'
 };

package/styled-components/cjs/components/Switch/Switch.tokens.js

@@ -29,6 +29,11 @@ var tokens = exports.tokens = {
   verticalGap: '--plasma-switch-vertical-gap',
   trackWidth: '--plasma-switch__track-width',
   trackHeight: '--plasma-switch__track-height',
+  trackBorderWidth: '--plasma-switch__track-border',
+  trackBorderColorOn: '--plasma-switch__track-checked_true-border-color',
+  trackBorderColorOnHover: '--plasma-switch__track-checked_true_hovered_true-border-color',
+  trackBorderColorOff: '--plasma-switch__track-checked_false-border-color',
+  trackBorderColorOffHover: '--plasma-switch__track-checked_false_hovered_true-border-color',
   trackBorderRadius: '--plasma-switch__track-border-radius',
   // NOTE: could be intersection with checked
   trackBackgroundColorOn: '--plasma-switch__track_checked_true-bg-color',
@@ -40,7 +45,8 @@ var tokens = exports.tokens = {
   thumbOffset: '--plasma-switch__thumb-offset',
   thumbBorderRadius: '--plasma-switch__thumb-border-radius',
   thumbPressScale: '--plasma-switch__thumb-scale',
-  thumbBackgroundColor: '--plasma-switch__thumb-bg-color',
+  thumbBackgroundColorOn: '--plasma-switch__thumb_checked_true-bg-color',
+  thumbBackgroundColorOff: '--plasma-switch__thumb-checked_false-bg-color',
   thumbBoxShadow: '--plasma-switch__thumb-box-shadow',
   thumbBoxShadowOn: '--plasma-switch__thumb-box-shadow_checked_true',
   labelOffsetPrivate: '--plasma_private-switch__label-offset'

package/styled-components/cjs/components/Switch/_toggleSize/base.js

@@ -7,4 +7,4 @@ exports.base = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
 var _Switch = /*#__PURE__*/require("../Switch.tokens");
 var _Switch2 = /*#__PURE__*/require("../Switch.styles");
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["", "{flex:0 0 var(", ");width:var(", ");height:var(", ");border-radius:var(", ");&::after{width:var(", ");height:var(", ");border-radius:var(", ");margin:auto var(", ");}}:active:not([disabled]) ", "::after{width:calc(var(", ") * var(", ",1));}"], _Switch2.StyledTrigger, _Switch.tokens.trackWidth, _Switch.tokens.trackWidth, _Switch.tokens.trackHeight, _Switch.tokens.trackBorderRadius, _Switch.tokens.thumbSize, _Switch.tokens.thumbSize, _Switch.tokens.thumbBorderRadius, _Switch.tokens.thumbOffset, _Switch2.StyledTrigger, _Switch.tokens.thumbSize, _Switch.tokens.thumbPressScale);
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["", "{--plasma_private-thumbSize:calc(var(", ") - (2 * var(", ")));box-sizing:border-box;flex:0 0 var(", ");border-style:solid;border-width:var(", ");border-radius:var(", ");width:var(", ");height:var(", ");&::after{width:var(--plasma_private-thumbSize);height:var(--plasma_private-thumbSize);border-radius:var(", ");margin:auto var(", ");}}:active:not([disabled]) ", "::after{width:calc(var(", ") * var(", ",1));}"], _Switch2.StyledTrigger, _Switch.tokens.thumbSize, _Switch.tokens.trackBorderWidth, _Switch.tokens.trackWidth, _Switch.tokens.trackBorderWidth, _Switch.tokens.trackBorderRadius, _Switch.tokens.trackWidth, _Switch.tokens.trackHeight, _Switch.tokens.thumbBorderRadius, _Switch.tokens.thumbOffset, _Switch2.StyledTrigger, _Switch.tokens.thumbSize, _Switch.tokens.thumbPressScale);

package/styled-components/cjs/components/Switch/_view/base.js

@@ -7,4 +7,4 @@ exports.base = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
 var _Switch = /*#__PURE__*/require("../Switch.tokens");
 var _Switch2 = /*#__PURE__*/require("../Switch.styles");
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["", "{background-color:var(", ");}", ":not([disabled]) ~ ", ":hover{background-color:var(", ",var(", "));}", ":checked ~ ", "{background-color:var(", ");}", ":checked:not([disabled]) ~ ", ":hover{background-color:var(", ",var(", "));}", "::after{background-color:var(", ");box-shadow:var(", ");}", ":checked ~ ", "::after{box-shadow:var(", ",var(", "));}", "{color:var(", ");}", "{color:var(", ");}"], _Switch2.StyledTrigger, _Switch.tokens.trackBackgroundColorOff, _Switch2.StyledInput, _Switch2.StyledTrigger, _Switch.tokens.trackBackgroundColorOffHover, _Switch.tokens.trackBackgroundColorOff, _Switch2.StyledInput, _Switch2.StyledTrigger, _Switch.tokens.trackBackgroundColorOn, _Switch2.StyledInput, _Switch2.StyledTrigger, _Switch.tokens.trackBackgroundColorOnHover, _Switch.tokens.trackBackgroundColorOn, _Switch2.StyledTrigger, _Switch.tokens.thumbBackgroundColor, _Switch.tokens.thumbBoxShadow, _Switch2.StyledInput, _Switch2.StyledTrigger, _Switch.tokens.thumbBoxShadowOn, _Switch.tokens.thumbBoxShadow, _Switch2.StyledLabel, _Switch.tokens.labelColor, _Switch2.StyledDescription, _Switch.tokens.descriptionColor);
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["", "{background-color:var(", ");border-color:var(", ");}", ":not([disabled]) ~ ", ":hover{background-color:var(", ",var(", "));border-color:var(", ",var(", "));}", ":checked ~ ", "{background-color:var(", ");border-color:var(", ");}", ":checked:not([disabled]) ~ ", ":hover{background-color:var(", ",var(", "));border-color:var(", ",var(", "));}", "::after{background-color:var(", ");box-shadow:var(", ");}", ":checked ~ ", "::after{background-color:var(", ");box-shadow:var(", ",var(", "));}", "{color:var(", ");}", "{color:var(", ");}"], _Switch2.StyledTrigger, _Switch.tokens.trackBackgroundColorOff, _Switch.tokens.trackBorderColorOff, _Switch2.StyledInput, _Switch2.StyledTrigger, _Switch.tokens.trackBackgroundColorOffHover, _Switch.tokens.trackBackgroundColorOff, _Switch.tokens.trackBorderColorOffHover, _Switch.tokens.trackBorderColorOff, _Switch2.StyledInput, _Switch2.StyledTrigger, _Switch.tokens.trackBackgroundColorOn, _Switch.tokens.trackBorderColorOn, _Switch2.StyledInput, _Switch2.StyledTrigger, _Switch.tokens.trackBackgroundColorOnHover, _Switch.tokens.trackBackgroundColorOn, _Switch.tokens.trackBorderColorOnHover, _Switch.tokens.trackBorderColorOn, _Switch2.StyledTrigger, _Switch.tokens.thumbBackgroundColorOff, _Switch.tokens.thumbBoxShadow, _Switch2.StyledInput, _Switch2.StyledTrigger, _Switch.tokens.thumbBackgroundColorOn, _Switch.tokens.thumbBoxShadowOn, _Switch.tokens.thumbBoxShadow, _Switch2.StyledLabel, _Switch.tokens.labelColor, _Switch2.StyledDescription, _Switch.tokens.descriptionColor);

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

@@ -12,7 +12,7 @@ var config = exports.config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--overlay-blur);", ":var(--overlay-soft);", ":var(--surface-solid-card);", ":1.25rem;", ":2rem;", ":0.625rem;", ":0.375rem;", ":var(--surface-accent);"], _Modal.modalTokens.modalOverlayWithBlurColor, _Modal.modalTokens.modalOverlayColor, _Modal.modalTokens.modalBodyBackground, _Modal.modalTokens.modalBodyBorderRadius, _Modal.modalTokens.modalBodyPadding, _Modal.modalTokens.modalContentPadding, _Modal.modalTokens.modalCloseButtonRadius, _Modal.modalTokens.modalOutlineFocusColor)
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--overlay-blur);", ":var(--overlay-soft);"], _Modal.modalTokens.modalOverlayWithBlurColor, _Modal.modalTokens.modalOverlayColor)
     }
   }
 };

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

@@ -3,7 +3,6 @@ import styled from 'styled-components';
 import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { SSRProvider } from '@salutejs/plasma-core';
-import { disableProps } from '@salutejs/plasma-sb-utils';
 
 import { PopupProvider, popupClasses } from '../Popup/Popup';
 import { Button } from '../Button/Button';
@@ -19,7 +18,6 @@ export default {
         docs: { story: { inline: false, iframeHeight: '30rem' } },
     },
     argTypes: {
-        ...disableProps(['hasBody']),
         placement: {
             options: [
                 'center',
@@ -77,7 +75,6 @@ type StoryModalProps = ComponentProps<typeof Modal> & {
     closeOnEsc: boolean;
     closeOnOverlayClick: boolean;
     withBlur: boolean;
-    hasClose?: boolean;
 };
 
 const StyledButton = styled(Button)`
@@ -138,72 +135,6 @@ const StoryModalDemo = ({ placement, offsetX, offsetY, ...rest }: StoryModalProp
     const [isOpenB, setIsOpenB] = useState(false);
     const [isOpenC, setIsOpenC] = useState(false);
 
-    return (
-        <SSRProvider>
-            <StyledWrapper>
-                <PopupProvider>
-                    <ButtonWrapper>
-                        <StyledButton text="Открыть A" onClick={() => setIsOpenA(true)} />
-                    </ButtonWrapper>
-                    <StyledModal
-                        id="modalA"
-                        frame="theme-root"
-                        withAnimation
-                        onClose={() => setIsOpenA(false)}
-                        opened={isOpenA}
-                        placement={placement}
-                        offset={[offsetX, offsetY]}
-                        hasBody
-                        {...rest}
-                    >
-                        <Button onClick={() => setIsOpenA(false)}>Close</Button>
-                        <ButtonWrapper>
-                            <StyledButton text="Открыть B" onClick={() => setIsOpenB(true)} />
-                        </ButtonWrapper>
-                        <Modal
-                            id="modalB"
-                            frame="theme-root"
-                            onClose={() => setIsOpenB(false)}
-                            opened={isOpenB}
-                            placement="left"
-                            offset={[offsetX, offsetY]}
-                            hasBody
-                            {...rest}
-                        >
-                            <Button style={{ marginRight: '1rem' }} onClick={() => setIsOpenB(false)}>
-                                Close
-                            </Button>
-                            <ButtonWrapper>
-                                <StyledButton text="Открыть C" onClick={() => setIsOpenC(true)} />
-                            </ButtonWrapper>
-                            <Modal
-                                id="modalC"
-                                frame="theme-root"
-                                onClose={() => setIsOpenC(false)}
-                                opened={isOpenC}
-                                placement="top"
-                                offset={[offsetX, offsetY]}
-                                hasBody
-                                {...rest}
-                            >
-                                <Button style={{ marginRight: '1rem' }} onClick={() => setIsOpenC(false)}>
-                                    Close
-                                </Button>
-                                <>Content</>
-                            </Modal>
-                        </Modal>
-                    </StyledModal>
-                </PopupProvider>
-            </StyledWrapper>
-        </SSRProvider>
-    );
-};
-
-const StoryCustomModalDemo = ({ placement, offsetX, offsetY, ...rest }: StoryModalProps) => {
-    const [isOpenA, setIsOpenA] = useState(false);
-    const [isOpenB, setIsOpenB] = useState(false);
-    const [isOpenC, setIsOpenC] = useState(false);
-
     return (
         <SSRProvider>
             <StyledWrapper>
@@ -268,7 +199,7 @@ const StoryCustomModalDemo = ({ placement, offsetX, offsetY, ...rest }: StoryMod
     );
 };
 
-export const Default: StoryObj<StoryModalProps> = {
+export const ModalDemo: StoryObj<StoryModalProps> = {
     args: {
         placement: 'center',
         withBlur: false,
@@ -276,30 +207,10 @@ export const Default: StoryObj<StoryModalProps> = {
         closeOnOverlayClick: true,
         offsetX: 0,
         offsetY: 0,
-        hasClose: true,
-    },
-    argTypes: {
-        hasClose: {
-            control: {
-                type: 'boolean',
-            },
-        },
     },
     render: (args) => <StoryModalDemo {...args} />,
 };
 
-export const CustomModalDemo: StoryObj<StoryModalProps> = {
-    args: {
-        placement: 'center',
-        withBlur: false,
-        closeOnEsc: true,
-        closeOnOverlayClick: true,
-        offsetX: 0,
-        offsetY: 0,
-    },
-    render: (args) => <StoryCustomModalDemo {...args} />,
-};
-
 const StyledModalAnimation = styled(Modal)`
     /* stylelint-disable */
     && .${popupClasses.root} {

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

@@ -25,7 +25,7 @@ var config = exports.config = {
       s: /*#__PURE__*/(0, _styledComponents.css)(["", ":2rem;", ":1.25rem;", ":calc(var(", ") / 2);", ":1rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;"], _Switch.switchTokens.trackWidth, _Switch.switchTokens.trackHeight, _Switch.switchTokens.trackBorderRadius, _Switch.switchTokens.trackHeight, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbBorderRadius, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbOffset, _Switch.switchTokens.thumbPressScale)
     },
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-accent);", ":var(--surface-accent-hover);", ":var(--surface-transparent-tertiary);", ":var(--surface-transparent-tertiary-hover);", ":var(--on-dark-surface-solid-default);", ":0 1px 1px rgba(0,0,0,0.11);"], _Switch.switchTokens.labelColor, _Switch.switchTokens.descriptionColor, _Switch.switchTokens.trackBackgroundColorOn, _Switch.switchTokens.trackBackgroundColorOnHover, _Switch.switchTokens.trackBackgroundColorOff, _Switch.switchTokens.trackBackgroundColorOffHover, _Switch.switchTokens.thumbBackgroundColor, _Switch.switchTokens.thumbBoxShadow)
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-accent);", ":var(--surface-accent-hover);", ":var(--surface-transparent-tertiary);", ":var(--surface-transparent-tertiary-hover);", ":0rem;", ":transparent;", ":transparent;", ":transparent;", ":transparent;", ":var(--on-dark-surface-solid-default);", ":var(--on-dark-surface-solid-default);", ":0 1px 1px rgba(0,0,0,0.11);"], _Switch.switchTokens.labelColor, _Switch.switchTokens.descriptionColor, _Switch.switchTokens.trackBackgroundColorOn, _Switch.switchTokens.trackBackgroundColorOnHover, _Switch.switchTokens.trackBackgroundColorOff, _Switch.switchTokens.trackBackgroundColorOffHover, _Switch.switchTokens.trackBorderWidth, _Switch.switchTokens.trackBorderColorOff, _Switch.switchTokens.trackBorderColorOffHover, _Switch.switchTokens.trackBorderColorOn, _Switch.switchTokens.trackBorderColorOnHover, _Switch.switchTokens.thumbBackgroundColorOff, _Switch.switchTokens.thumbBackgroundColorOn, _Switch.switchTokens.thumbBoxShadow)
     },
     disabled: {
       "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Switch.switchTokens.disabledOpacity)

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

@@ -3,9 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Switch = void 0;
+exports.SwitchOutline = exports.Switch = void 0;
 var _Switch = /*#__PURE__*/require("../../../../components/Switch");
 var _engines = /*#__PURE__*/require("../../../../engines");
 var _Switch2 = /*#__PURE__*/require("./Switch.config");
+var _SwitchOutline = /*#__PURE__*/require("./Switch.outline.config");
 var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Switch.switchConfig, _Switch2.config);
-var Switch = exports.Switch = /*#__PURE__*/(0, _engines.component)(mergedConfig);
+var Switch = exports.Switch = /*#__PURE__*/(0, _engines.component)(mergedConfig);
+var mergedOutlineConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Switch.switchConfig, _SwitchOutline.config);
+var SwitchOutline = exports.SwitchOutline = /*#__PURE__*/(0, _engines.component)(mergedOutlineConfig);

package/styled-components/cjs/examples/plasma_b2c/components/Switch/Switch.outline.config.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _Switch = /*#__PURE__*/require("../../../../components/Switch");
+var config = exports.config = {
+  defaults: {
+    view: 'default',
+    size: 'm',
+    toggleSize: 'l',
+    labelPosition: 'before',
+    focused: 'true'
+  },
+  variations: {
+    size: {
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-letter-spacing);", ":0.25rem;", ":0.75rem;"], _Switch.switchTokens.fontFamily, _Switch.switchTokens.fontStyle, _Switch.switchTokens.fontWeight, _Switch.switchTokens.lineHeight, _Switch.switchTokens.fontSize, _Switch.switchTokens.letterSpacing, _Switch.switchTokens.descriptionFontFamily, _Switch.switchTokens.descriptionFontStyle, _Switch.switchTokens.descriptionFontWeight, _Switch.switchTokens.descriptionLineHeight, _Switch.switchTokens.descriptionFontSize, _Switch.switchTokens.descriptionLetterSpacing, _Switch.switchTokens.verticalGap, _Switch.switchTokens.labelOffset),
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-xs-letter-spacing);", ":0.25rem;", ":0.75rem;"], _Switch.switchTokens.fontFamily, _Switch.switchTokens.fontStyle, _Switch.switchTokens.fontWeight, _Switch.switchTokens.lineHeight, _Switch.switchTokens.fontSize, _Switch.switchTokens.letterSpacing, _Switch.switchTokens.descriptionFontFamily, _Switch.switchTokens.descriptionFontStyle, _Switch.switchTokens.descriptionFontWeight, _Switch.switchTokens.descriptionLineHeight, _Switch.switchTokens.descriptionFontSize, _Switch.switchTokens.descriptionLetterSpacing, _Switch.switchTokens.verticalGap, _Switch.switchTokens.labelOffset),
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-xs-letter-spacing);", ":0.25rem;", ":0.75rem;"], _Switch.switchTokens.fontFamily, _Switch.switchTokens.fontStyle, _Switch.switchTokens.fontWeight, _Switch.switchTokens.lineHeight, _Switch.switchTokens.fontSize, _Switch.switchTokens.letterSpacing, _Switch.switchTokens.descriptionFontFamily, _Switch.switchTokens.descriptionFontStyle, _Switch.switchTokens.descriptionFontWeight, _Switch.switchTokens.descriptionLineHeight, _Switch.switchTokens.descriptionFontSize, _Switch.switchTokens.descriptionLetterSpacing, _Switch.switchTokens.verticalGap, _Switch.switchTokens.labelOffset)
+    },
+    toggleSize: {
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.75rem;", ":1.75rem;", ":calc(var(", ") / 2);", ":1.5rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;"], _Switch.switchTokens.trackWidth, _Switch.switchTokens.trackHeight, _Switch.switchTokens.trackBorderRadius, _Switch.switchTokens.trackHeight, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbBorderRadius, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbOffset, _Switch.switchTokens.thumbPressScale),
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":2rem;", ":1.25rem;", ":calc(var(", ") / 2);", ":1rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;"], _Switch.switchTokens.trackWidth, _Switch.switchTokens.trackHeight, _Switch.switchTokens.trackBorderRadius, _Switch.switchTokens.trackHeight, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbBorderRadius, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbOffset, _Switch.switchTokens.thumbPressScale)
+    },
+    view: {
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":transparent;", ":transparent;", ":transparent;", ":0.0625rem;", ":var(--outline-secondary);", ":var(--outline-secondary-hover);", ":var(--outline-accent);", ":var(--outline-accent-hover);", ":var(--text-tertiary);", ":var(--text-accent);", ":0 1px 1px rgba(0,0,0,0.11);"], _Switch.switchTokens.labelColor, _Switch.switchTokens.descriptionColor, _Switch.switchTokens.trackBackgroundColorOn, _Switch.switchTokens.trackBackgroundColorOnHover, _Switch.switchTokens.trackBackgroundColorOff, _Switch.switchTokens.trackBackgroundColorOffHover, _Switch.switchTokens.trackBorderWidth, _Switch.switchTokens.trackBorderColorOff, _Switch.switchTokens.trackBorderColorOffHover, _Switch.switchTokens.trackBorderColorOn, _Switch.switchTokens.trackBorderColorOnHover, _Switch.switchTokens.thumbBackgroundColorOff, _Switch.switchTokens.thumbBackgroundColorOn, _Switch.switchTokens.thumbBoxShadow)
+    },
+    disabled: {
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Switch.switchTokens.disabledOpacity)
+    },
+    focused: {
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-accent);"], _Switch.switchTokens.trackFocusColor)
+    }
+  }
+};

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

@@ -9,7 +9,7 @@ import { mergeConfig } from '../../../../engines';
 import { WithTheme, argTypesFromConfig } from '../../../_helpers';
 
 import { config } from './Switch.config';
-import { Switch } from './Switch';
+import { Switch, SwitchOutline } from './Switch';
 
 type SwitchProps = ComponentProps<typeof Switch>;
 
@@ -72,3 +72,35 @@ export const Default: StoryObj<SwitchProps> = {
     },
     render: (args) => <StoryDefault {...args} />,
 };
+
+const StoryOutline = (args: SwitchProps) => {
+    const value = 'yes';
+    const name = 'agree';
+    const [checked, setChecked] = useState(true);
+
+    return (
+        <StyledWrapper>
+            <SwitchOutline
+                value={value}
+                name={name}
+                checked={checked}
+                onChange={(event) => {
+                    setChecked(event.target.checked);
+                    onChange(event);
+                }}
+                onFocus={onFocus}
+                onBlur={onBlur}
+                {...args}
+            />
+        </StyledWrapper>
+    );
+};
+
+export const Outline: StoryObj<SwitchProps> = {
+    args: {
+        size: 'm',
+        toggleSize: 'l',
+        disabled: false,
+    },
+    render: (args) => <StoryOutline {...args} />,
+};

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

@@ -12,7 +12,7 @@ var config = exports.config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--overlay-blur);", ":var(--overlay-soft);", ":var(--surface-solid-card);", ":1.25rem;", ":2rem;", ":0.625rem;", ":0.375rem;", ":var(--surface-accent);"], _Modal.modalTokens.modalOverlayWithBlurColor, _Modal.modalTokens.modalOverlayColor, _Modal.modalTokens.modalBodyBackground, _Modal.modalTokens.modalBodyBorderRadius, _Modal.modalTokens.modalBodyPadding, _Modal.modalTokens.modalContentPadding, _Modal.modalTokens.modalCloseButtonRadius, _Modal.modalTokens.modalOutlineFocusColor)
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--overlay-blur);", ":var(--overlay-soft);"], _Modal.modalTokens.modalOverlayWithBlurColor, _Modal.modalTokens.modalOverlayColor)
     }
   }
 };

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

@@ -3,7 +3,6 @@ import styled from 'styled-components';
 import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { SSRProvider } from '@salutejs/plasma-core';
-import { disableProps } from '@salutejs/plasma-sb-utils';
 
 import { PopupProvider, popupClasses } from '../Popup/Popup';
 import { Button } from '../Button/Button';
@@ -19,7 +18,6 @@ export default {
         docs: { story: { inline: false, iframeHeight: '30rem' } },
     },
     argTypes: {
-        ...disableProps(['hasBody']),
         placement: {
             options: [
                 'center',
@@ -77,7 +75,6 @@ type StoryModalProps = ComponentProps<typeof Modal> & {
     closeOnEsc: boolean;
     closeOnOverlayClick: boolean;
     withBlur: boolean;
-    hasClose?: boolean;
 };
 
 const StyledButton = styled(Button)`
@@ -138,72 +135,6 @@ const StoryModalDemo = ({ placement, offsetX, offsetY, ...rest }: StoryModalProp
     const [isOpenB, setIsOpenB] = useState(false);
     const [isOpenC, setIsOpenC] = useState(false);
 
-    return (
-        <SSRProvider>
-            <StyledWrapper>
-                <PopupProvider>
-                    <ButtonWrapper>
-                        <StyledButton text="Открыть A" onClick={() => setIsOpenA(true)} />
-                    </ButtonWrapper>
-                    <StyledModal
-                        id="modalA"
-                        frame="theme-root"
-                        withAnimation
-                        onClose={() => setIsOpenA(false)}
-                        opened={isOpenA}
-                        placement={placement}
-                        offset={[offsetX, offsetY]}
-                        hasBody
-                        {...rest}
-                    >
-                        <Button onClick={() => setIsOpenA(false)}>Close</Button>
-                        <ButtonWrapper>
-                            <StyledButton text="Открыть B" onClick={() => setIsOpenB(true)} />
-                        </ButtonWrapper>
-                        <Modal
-                            id="modalB"
-                            frame="theme-root"
-                            onClose={() => setIsOpenB(false)}
-                            opened={isOpenB}
-                            placement="left"
-                            offset={[offsetX, offsetY]}
-                            hasBody
-                            {...rest}
-                        >
-                            <Button style={{ marginRight: '1rem' }} onClick={() => setIsOpenB(false)}>
-                                Close
-                            </Button>
-                            <ButtonWrapper>
-                                <StyledButton text="Открыть C" onClick={() => setIsOpenC(true)} />
-                            </ButtonWrapper>
-                            <Modal
-                                id="modalC"
-                                frame="theme-root"
-                                onClose={() => setIsOpenC(false)}
-                                opened={isOpenC}
-                                placement="top"
-                                offset={[offsetX, offsetY]}
-                                hasBody
-                                {...rest}
-                            >
-                                <Button style={{ marginRight: '1rem' }} onClick={() => setIsOpenC(false)}>
-                                    Close
-                                </Button>
-                                <>Content</>
-                            </Modal>
-                        </Modal>
-                    </StyledModal>
-                </PopupProvider>
-            </StyledWrapper>
-        </SSRProvider>
-    );
-};
-
-const StoryCustomModalDemo = ({ placement, offsetX, offsetY, ...rest }: StoryModalProps) => {
-    const [isOpenA, setIsOpenA] = useState(false);
-    const [isOpenB, setIsOpenB] = useState(false);
-    const [isOpenC, setIsOpenC] = useState(false);
-
     return (
         <SSRProvider>
             <StyledWrapper>
@@ -268,7 +199,7 @@ const StoryCustomModalDemo = ({ placement, offsetX, offsetY, ...rest }: StoryMod
     );
 };
 
-export const Default: StoryObj<StoryModalProps> = {
+export const ModalDemo: StoryObj<StoryModalProps> = {
     args: {
         placement: 'center',
         withBlur: false,
@@ -276,30 +207,10 @@ export const Default: StoryObj<StoryModalProps> = {
         closeOnOverlayClick: true,
         offsetX: 0,
         offsetY: 0,
-        hasClose: true,
-    },
-    argTypes: {
-        hasClose: {
-            control: {
-                type: 'boolean',
-            },
-        },
     },
     render: (args) => <StoryModalDemo {...args} />,
 };
 
-export const CustomModalDemo: StoryObj<StoryModalProps> = {
-    args: {
-        placement: 'center',
-        withBlur: false,
-        closeOnEsc: true,
-        closeOnOverlayClick: true,
-        offsetX: 0,
-        offsetY: 0,
-    },
-    render: (args) => <StoryCustomModalDemo {...args} />,
-};
-
 const StyledModalAnimation = styled(Modal)`
     /* stylelint-disable */
     && .${popupClasses.root} {

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

@@ -25,7 +25,7 @@ var config = exports.config = {
       s: /*#__PURE__*/(0, _styledComponents.css)(["", ":2rem;", ":1.25rem;", ":calc(var(", ") / 2);", ":1rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;"], _Switch.switchTokens.trackWidth, _Switch.switchTokens.trackHeight, _Switch.switchTokens.trackBorderRadius, _Switch.switchTokens.trackHeight, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbBorderRadius, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbOffset, _Switch.switchTokens.thumbPressScale)
     },
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-accent);", ":var(--surface-accent-hover);", ":var(--surface-transparent-tertiary);", ":var(--surface-transparent-tertiary-hover);", ":var(--on-dark-surface-solid-default);", ":0 1px 1px rgba(0,0,0,0.11);"], _Switch.switchTokens.labelColor, _Switch.switchTokens.descriptionColor, _Switch.switchTokens.trackBackgroundColorOn, _Switch.switchTokens.trackBackgroundColorOnHover, _Switch.switchTokens.trackBackgroundColorOff, _Switch.switchTokens.trackBackgroundColorOffHover, _Switch.switchTokens.thumbBackgroundColor, _Switch.switchTokens.thumbBoxShadow)
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-accent);", ":var(--surface-accent-hover);", ":var(--surface-transparent-tertiary);", ":var(--surface-transparent-tertiary-hover);", ":0rem;", ":transparent;", ":transparent;", ":transparent;", ":transparent;", ":var(--on-dark-surface-solid-default);", ":var(--on-dark-surface-solid-default);", ":0 1px 1px rgba(0,0,0,0.11);"], _Switch.switchTokens.labelColor, _Switch.switchTokens.descriptionColor, _Switch.switchTokens.trackBackgroundColorOn, _Switch.switchTokens.trackBackgroundColorOnHover, _Switch.switchTokens.trackBackgroundColorOff, _Switch.switchTokens.trackBackgroundColorOffHover, _Switch.switchTokens.trackBorderWidth, _Switch.switchTokens.trackBorderColorOff, _Switch.switchTokens.trackBorderColorOffHover, _Switch.switchTokens.trackBorderColorOn, _Switch.switchTokens.trackBorderColorOnHover, _Switch.switchTokens.thumbBackgroundColorOff, _Switch.switchTokens.thumbBackgroundColorOn, _Switch.switchTokens.thumbBoxShadow)
     },
     disabled: {
       "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Switch.switchTokens.disabledOpacity)