@salutejs/plasma-new-hope 0.194.0-canary.1565.11870784206.0 → 0.194.0-dev.0

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

@@ -1,4 +1,4 @@
 import { css } from 'styled-components';
 import { tokens } from '../Switch.tokens';
 import { StyledTrigger } from '../Switch.styles';
-export var base = /*#__PURE__*/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));}"], StyledTrigger, tokens.trackWidth, tokens.trackWidth, tokens.trackHeight, tokens.trackBorderRadius, tokens.thumbSize, tokens.thumbSize, tokens.thumbBorderRadius, tokens.thumbOffset, StyledTrigger, tokens.thumbSize, tokens.thumbPressScale);
+export var base = /*#__PURE__*/css(["", "{box-sizing:border-box;flex:0 0 var(", ");border-style:solid;border-width:var(", ");border-radius:var(", ");width:var(", ");height:var(", ");&::after{width:var(", ");height:var(", ");border-radius:var(", ");margin:auto var(", ");}}:active:not([disabled]) ", "::after{width:calc(var(", ") * var(", ",1));}"], StyledTrigger, tokens.trackWidth, tokens.trackBorderWidth, tokens.trackBorderRadius, tokens.trackWidth, tokens.trackHeight, tokens.thumbSize, tokens.thumbSize, tokens.thumbBorderRadius, tokens.thumbOffset, StyledTrigger, tokens.thumbSize, tokens.thumbPressScale);

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

@@ -1,4 +1,4 @@
 import { css } from 'styled-components';
 import { tokens } from '../Switch.tokens';
 import { StyledTrigger, StyledInput, StyledLabel, StyledDescription } from '../Switch.styles';
-export var base = /*#__PURE__*/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(", ");}"], StyledTrigger, tokens.trackBackgroundColorOff, StyledInput, StyledTrigger, tokens.trackBackgroundColorOffHover, tokens.trackBackgroundColorOff, StyledInput, StyledTrigger, tokens.trackBackgroundColorOn, StyledInput, StyledTrigger, tokens.trackBackgroundColorOnHover, tokens.trackBackgroundColorOn, StyledTrigger, tokens.thumbBackgroundColor, tokens.thumbBoxShadow, StyledInput, StyledTrigger, tokens.thumbBoxShadowOn, tokens.thumbBoxShadow, StyledLabel, tokens.labelColor, StyledDescription, tokens.descriptionColor);
+export var base = /*#__PURE__*/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(", ");}"], StyledTrigger, tokens.trackBackgroundColorOff, tokens.trackBorderColorOff, StyledInput, StyledTrigger, tokens.trackBackgroundColorOffHover, tokens.trackBackgroundColorOff, tokens.trackBorderColorOffHover, tokens.trackBorderColorOff, StyledInput, StyledTrigger, tokens.trackBackgroundColorOn, tokens.trackBorderColorOn, StyledInput, StyledTrigger, tokens.trackBackgroundColorOnHover, tokens.trackBackgroundColorOn, tokens.trackBorderColorOnHover, tokens.trackBorderColorOn, StyledTrigger, tokens.thumbBackgroundColorOff, tokens.thumbBoxShadow, StyledInput, StyledTrigger, tokens.thumbBackgroundColorOn, tokens.thumbBoxShadowOn, tokens.thumbBoxShadow, StyledLabel, tokens.labelColor, StyledDescription, tokens.descriptionColor);

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

@@ -1,4 +1,4 @@
-var _excluded = ["id", "className", "style", "contentLeft", "contentRight", "label", "labelPlacement", "textBefore", "textAfter", "placeholder", "leftHelper", "enumerationType", "requiredPlacement", "titleCaption", "hintTrigger", "hintText", "hintView", "hintSize", "hintTargetIcon", "hintPlacement", "hintHasArrow", "hintOffset", "hintWidth", "hintContentLeft", "view", "size", "readOnly", "disabled", "required", "clear", "optional", "hasDivider", "value", "chips", "validationType", "options", "passwordHidden", "onValidate", "onChange", "onBlur", "onChangeChips", "onSearch", "onKeyDown"];
+var _excluded = ["id", "className", "style", "contentLeft", "contentRight", "label", "labelPlacement", "textBefore", "textAfter", "placeholder", "leftHelper", "enumerationType", "requiredPlacement", "titleCaption", "hintTrigger", "hintText", "hintView", "hintSize", "hintTargetIcon", "hintPlacement", "hintHasArrow", "hintOffset", "hintWidth", "hintContentLeft", "view", "size", "readOnly", "disabled", "required", "clear", "optional", "hasDivider", "value", "chips", "onChange", "onChangeChips", "onSearch", "onKeyDown"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -24,7 +24,7 @@ import { base as hintSizeCSS } from './variations/_hint-size/base';
 import { Input, InputContainer, LeftHelper, Label, InputWrapper, InputLabelWrapper, StyledContentLeft, StyledContentRight, StyledChips, StyledTextBefore, StyledTextAfter, StyledIndicator, StyledOptionalText, InputPlaceholder, OuterLabelWrapper, TitleCaption, StyledHintWrapper, StyledIndicatorWrapper } from './TextField.styles';
 import { classes } from './TextField.tokens';
 import { TextFieldChip } from './ui';
-import { useKeyNavigation, useValidation } from './hooks';
+import { useKeyNavigation } from './hooks';
 import { HintComponent } from './ui/Hint/Hint';
 var optionalText = 'optional';
 export var base = /*#__PURE__*/css(["display:block;"]);
@@ -77,12 +77,7 @@ export var textFieldRoot = function textFieldRoot(Root) {
       hasDivider = _ref.hasDivider,
       outerValue = _ref.value,
       values = _ref.chips,
-      validationType = _ref.validationType,
-      options = _ref.options,
-      passwordHidden = _ref.passwordHidden,
-      onValidate = _ref.onValidate,
       onChange = _ref.onChange,
-      onBlur = _ref.onBlur,
       onChangeChips = _ref.onChangeChips,
       onSearch = _ref.onSearch,
       onKeyDown = _ref.onKeyDown,
@@ -132,7 +127,6 @@ export var textFieldRoot = function textFieldRoot(Root) {
     var hasValueClass = hasValue ? classes.hasValue : undefined;
     var wrapperWithoutLeftContent = !contentLeft && isChipsVisible ? classes.hasEmptyContentLeft : undefined;
     var wrapperWithoutRightContent = !contentRight && isChipsVisible ? classes.hasEmptyContentRight : undefined;
-    var isPasswordHidden = validationType === 'password' && passwordHidden;
     var hintRef = useOutsideClick(function () {
       setIsHintVisible(false);
     });
@@ -175,13 +169,6 @@ export var textFieldRoot = function textFieldRoot(Root) {
       setChips(newChips);
       onChangeChips === null || onChangeChips === void 0 || onChangeChips(newValues);
     };
-    var _useValidation = useValidation({
-        validationType: validationType,
-        options: options,
-        onValidate: onValidate
-      }),
-      handleValidationBlur = _useValidation.handleValidationBlur,
-      handleValidationKeyDown = _useValidation.handleValidationKeyDown;
     var _useKeyNavigation = useKeyNavigation({
         controlledRefs: controlledRefs,
         disabled: disabled,
@@ -211,12 +198,6 @@ export var textFieldRoot = function textFieldRoot(Root) {
       });
       inputRef.current.focus();
     };
-    var handleInputBlur = function handleInputBlur(event) {
-      if (onBlur) {
-        onBlur(event);
-      }
-      handleValidationBlur(event);
-    };
     var getRef = function getRef(element, index) {
       if (element && chipsRefs !== null && chipsRefs !== void 0 && chipsRefs.current) {
         chipsRefs.current[index] = element;
@@ -224,7 +205,6 @@ export var textFieldRoot = function textFieldRoot(Root) {
     };
     var handleOnKeyDown = function handleOnKeyDown(event) {
       handleInputKeydown(event);
-      handleValidationKeyDown(event);
       if (onKeyDown) {
         onKeyDown(event);
       }
@@ -358,11 +338,8 @@ export var textFieldRoot = function textFieldRoot(Root) {
       readOnly: !disabled && readOnly,
       onInput: handleInput,
       onChange: handleChange,
-      onKeyDown: handleOnKeyDown,
-      onBlur: handleInputBlur
-    }, rest, isPasswordHidden && {
-      type: 'password'
-    })), hasInnerLabel && /*#__PURE__*/React.createElement(Label, {
+      onKeyDown: handleOnKeyDown
+    }, rest)), hasInnerLabel && /*#__PURE__*/React.createElement(Label, {
       id: labelId,
       htmlFor: innerId
     }, innerLabelValue, optionalTextNode), placeholderShown && !hasValue && /*#__PURE__*/React.createElement(InputPlaceholder, null, innerPlaceholderValue, hasPlaceholderOptional && optionalTextNode)), textAfter && /*#__PURE__*/React.createElement(StyledTextAfter, null, textAfter)), contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight)), leftHelper && /*#__PURE__*/React.createElement(LeftHelper, {

package/styled-components/es/components/TextField/TextField.template-doc.mdx

@@ -5,9 +5,6 @@ title: TextField
 
 import { PropsTable, Description } from '@site/src/components';
 
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
 # TextField
 <Description name="TextField" />
 <PropsTable name="TextField" exclude={['$isFocused']} />
@@ -201,330 +198,3 @@ export function App() {
     );
 }
 ```
-
-### Валидация
-Поддерживается валидация почты и пароля:
-
-<Tabs>
-    <TabItem value="email" label="Email" default>
-        Свойства доступные при валидации почты:
-        ```tsx
-        type ValidationProps = {
-            /*
-            * Тип валидации
-            */
-            validationType: 'email';
-            /*
-            * Опции валидации
-            */
-            options?: EmailValidationOptions;
-            /*
-            * Функция, вызываемая при валидации значения.
-            * Вызывается при событии onBlur и по нажатию Enter, когда фокус на поле ввода
-            */
-            onValidate?: (args: OnValidateArgs) => void;
-        }
-        ```
-        Свойство `options` имеет следующий вид:
-        ```tsx
-        type EmailValidationOptions = {
-            /*
-            * Пользовательское регулярное выражение, для проверки почты на валидность
-            */
-            customEmailRegex?: {
-                value?: RegExp;
-                errorMessage?: string;
-            };
-            /*
-            * Минимальная длина почты
-            */
-            minLength?: {
-                value?: number;
-                errorMessage?: string;
-            };
-            /*
-            * Максимальная длина почты
-            */
-            maxLength?: {
-                value?: number;
-                errorMessage?: string;
-            };
-            /*
-            * Минимальная длина хоста (часть почты до `@`)
-            */
-            minHostLength?: {
-                value?: number;
-                errorMessage?: string;
-            };
-            /*
-            * Максимальная длина хоста (часть почты до `@`)
-            */
-            maxHostLength?: {
-                value?: number;
-                errorMessage?: string;
-            };
-            /*
-            * Минимальная длина домена (часть почты от `@` до `.` перед доменной зоной)
-            */
-            minDomainLength?: {
-                value?: number;
-                errorMessage?: string;
-            };
-            /*
-            * Максимальная длина домена (часть почты от `@` до `.` перед доменной зоной)
-            */
-            maxDomainLength?: {
-                value?: number;
-                errorMessage?: string;
-            };
-            /*
-            * Минимальная длина доменной зоны (часть почты от `.`; например `ru`, `com`...)
-            */
-            minZoneLength?: {
-                value?: number;
-                errorMessage?: string;
-            };
-            /*
-            * Максимальная длина доменной зоны (часть почты от `.`; например `ru`, `com`...)
-            */
-            maxZoneLength?: {
-                value?: number;
-                errorMessage?: string;
-            };
-            /*
-            * Список разрешенных доменов (например `['mail.ru', 'yahoo.ru', 'gmail.com']`)
-            */
-            whitelistDomains?: {
-                value?: string[];
-                errorMessage?: string;
-            };
-            /*
-            * Список запрещенных доменов (например `['org.biz', 'expressmail.com']`)
-            */
-            blacklistDomains?: {
-                value?: string[];
-                errorMessage?: string;
-            };
-        };
-        ```
-
-        ```tsx live
-        import React, { useState } from 'react';
-        import { TextField } from '@salutejs/{{ package }}';
-
-        export function App() {
-            const options = {
-                minLength: {
-                    value: 7,
-                    errorMessage: 'Почта слишком короткая',
-                },
-                maxLength: {
-                    value: 30,
-                    errorMessage: 'Почта слишком длинная',
-                },
-                minHostLength: {
-                    value: 2,
-                    errorMessage: 'Хост слишком короткий',
-                },
-                maxHostLength: {
-                    value: 12,
-                    errorMessage: 'Хост слишком длинный',
-                },
-                minDomainLength: {
-                    value: 3,
-                    errorMessage: 'Домен слишком короткий',
-                },
-                maxDomainLength: {
-                    value: 6,
-                    errorMessage: 'Домен слишком длинный',
-                },
-                minZoneLength: {
-                    value: 2,
-                    errorMessage: 'Доменная зона слишком короткая',
-                },
-                maxZoneLength: {
-                    value: 5,
-                    errorMessage: 'Доменная зона слишком длинная',
-                },
-                whitelistDomains: {
-                    value: ['plasma.ru', 'gmail.com', 'mail.ru'],
-                    errorMessage: 'Домен не разрешен',
-                },
-                blacklistDomains: {
-                    value: ['hah.ah', 'heh.eh'],
-                    errorMessage: 'Домен запрещен',
-                },
-            };
-
-            const [error, setError] = useState('');
-
-            const handleOnChange = () => {
-                setError('');
-            };
-
-            const handleOnValidate = ({ errorMessage }: { errorMessage?: string }) => {
-                setError(errorMessage || '');
-            };
-
-            return (
-                <div>
-                    <TextField
-                        label="Валидация почты"
-                        placeholder="Заполните поле"
-                        validationType="email"
-                        options={options}
-                        view={error ? 'negative' : 'default}
-                        helperText={error || 'Валидация почты'}
-                        onChange={handleOnChange}
-                        onValidate={handleOnValidate}
-                    />
-                </div>
-            );
-        }
-        ```
-    </TabItem>
-
-    <TabItem value="password" label="Password" default>
-        Свойства доступные при валидации пароля:
-        ```tsx
-        type ValidationProps = {
-            /*
-            * Тип валидации
-            */
-            validationType: 'password';
-            /*
-            * Опции валидации
-            */
-            options?: PasswordValidationOptions;
-            /*
-            * Состояние сокрытия оригинального пароля
-            */
-            passwordHidden?: boolean;
-            /*
-            * Функция, вызываемая при валидации значения.
-            * Вызывается при событии onBlur и по нажатию Enter, когда фокус на поле ввода
-            */
-            onValidate?: (args: OnValidateArgs) => void;
-        }
-        ```
-        Свойство `options` имеет следующий вид:
-        ```tsx
-        type PasswordValidationOptions = {
-            /*
-            * Минимальная длина пароля
-            */
-            minLength?: {
-                value?: number;
-                errorMessage?: string;
-            };
-            /*
-            * Максимальная длина пароля
-            */
-            maxLength?: {
-                value?: number;
-                errorMessage?: string;
-            };
-            /*
-            * Должны ли быть буквы верхнего регистра в пароле
-            */
-            includeUppercase?: {
-                value?: boolean;
-                errorMessage?: string;
-            };
-            /*
-            * Должны ли быть буквы нижнего регистра в пароле
-            */
-            includeLowercase?: {
-                value?: boolean;
-                errorMessage?: string;
-            };
-            /*
-            * Должны ли быть цифры в пароле
-            */
-            includeDigits?: {
-                value?: boolean;
-                errorMessage?: string;
-            };
-            /*
-            * Должны ли быть специальные символы в пароле
-            */
-            includeSpecialSymbols?: {
-                value?: boolean;
-                errorMessage?: string;
-            };
-        };
-        ```
-
-        ```tsx live
-        import React, { useState } from 'react';
-        import { TextField, IconButton } from '@salutejs/{{ package }}';
-        import { IconEyeFill, IconEyeClosedFill } from '@salutejs/plasma-icons';
-
-        export function App() {
-            const options = {
-                minLength: {
-                    value: 5,
-                    errorMessage: 'Пароль слишком короткий',
-                },
-                maxLength: {
-                    value: 20,
-                    errorMessage: 'Пароль слишком длинный',
-                },
-                includeUppercase: {
-                    value: true,
-                    errorMessage: 'Пароль должен содержать хотя бы одну заглавную букву',
-                },
-                includeLowercase: {
-                    value: true,
-                    errorMessage: 'Пароль должен содержать хотя бы одну строчную букву',
-                },
-                includeDigits: {
-                    value: true,
-                    errorMessage: 'Пароль должен содержать хотя бы одну цифру',
-                },
-                includeSpecialSymbols: {
-                    value: true,
-                    errorMessage: 'Пароль должен содержать хотя бы один специальный символ',
-                },
-            };
-
-            const [error, setError] = useState('');
-            const [hidden, setHidden] = useState(false);
-
-            const handleOnChange = () => {
-                setError('');
-            };
-
-            const handleOnValidate = ({ errorMessage }: { errorMessage?: string }) => {
-                setError(errorMessage || '');
-            };
-
-            const toggleShowPassword = () => setHidden(!hidden);
-
-            const HideButton = () => (
-                <IconButton size="s" view="clear" onClick={toggleShowPassword}>
-                    {hidden ? <IconEyeClosedFill size="xs" color="inherit" /> : <IconEyeFill size="xs" color="inherit" />}
-                </IconButton>
-            )
-
-            return (
-                <div>
-                    <TextField
-                        label="Валидация пароля"
-                        placeholder="Заполните поле"
-                        validationType="password"
-                        options={options}
-                        view={error ? 'negative' : 'default'}
-                        leftHelper={error || 'Валидация пароля'}
-                        onChange={handleOnChange}
-                        onValidate={handleOnValidate}
-                        passwordHidden={hidden}
-                        contentLeft={<HideButton />}
-                    />
-                </div>
-            );
-        }
-        ```
-    </TabItem>
-</Tabs>
-

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

@@ -1,2 +1 @@
-export { useKeyNavigation } from './useKeyNavigation';
-export { useValidation } from './useValidation';
+export { useKeyNavigation } from './useKeyNavigation';

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

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

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

@@ -1,5 +1,8 @@
 import { switchConfig } from '../../../../components/Switch';
 import { component, mergeConfig } from '../../../../engines';
 import { config } from './Switch.config';
+import { config as outlineConfig } from './Switch.outline.config';
 var mergedConfig = /*#__PURE__*/mergeConfig(switchConfig, config);
-export var Switch = /*#__PURE__*/component(mergedConfig);
+export var Switch = /*#__PURE__*/component(mergedConfig);
+var mergedOutlineConfig = /*#__PURE__*/mergeConfig(switchConfig, outlineConfig);
+export var SwitchOutline = /*#__PURE__*/component(mergedOutlineConfig);

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

@@ -0,0 +1,31 @@
+import { css } from 'styled-components';
+import { switchTokens } from '../../../../components/Switch';
+export var config = {
+  defaults: {
+    view: 'default',
+    size: 'm',
+    toggleSize: 'l',
+    labelPosition: 'before',
+    focused: 'true'
+  },
+  variations: {
+    size: {
+      s: /*#__PURE__*/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;"], switchTokens.fontFamily, switchTokens.fontStyle, switchTokens.fontWeight, switchTokens.lineHeight, switchTokens.fontSize, switchTokens.letterSpacing, switchTokens.descriptionFontFamily, switchTokens.descriptionFontStyle, switchTokens.descriptionFontWeight, switchTokens.descriptionLineHeight, switchTokens.descriptionFontSize, switchTokens.descriptionLetterSpacing, switchTokens.verticalGap, switchTokens.labelOffset),
+      m: /*#__PURE__*/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;"], switchTokens.fontFamily, switchTokens.fontStyle, switchTokens.fontWeight, switchTokens.lineHeight, switchTokens.fontSize, switchTokens.letterSpacing, switchTokens.descriptionFontFamily, switchTokens.descriptionFontStyle, switchTokens.descriptionFontWeight, switchTokens.descriptionLineHeight, switchTokens.descriptionFontSize, switchTokens.descriptionLetterSpacing, switchTokens.verticalGap, switchTokens.labelOffset),
+      l: /*#__PURE__*/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;"], switchTokens.fontFamily, switchTokens.fontStyle, switchTokens.fontWeight, switchTokens.lineHeight, switchTokens.fontSize, switchTokens.letterSpacing, switchTokens.descriptionFontFamily, switchTokens.descriptionFontStyle, switchTokens.descriptionFontWeight, switchTokens.descriptionLineHeight, switchTokens.descriptionFontSize, switchTokens.descriptionLetterSpacing, switchTokens.verticalGap, switchTokens.labelOffset)
+    },
+    toggleSize: {
+      l: /*#__PURE__*/css(["", ":2.75rem;", ":1.75rem;", ":calc(var(", ") / 2);", ":1.375rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;"], switchTokens.trackWidth, switchTokens.trackHeight, switchTokens.trackBorderRadius, switchTokens.trackHeight, switchTokens.thumbSize, switchTokens.thumbBorderRadius, switchTokens.thumbSize, switchTokens.thumbOffset, switchTokens.thumbPressScale),
+      s: /*#__PURE__*/css(["", ":2rem;", ":1.25rem;", ":calc(var(", ") / 2);", ":0.875rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;"], switchTokens.trackWidth, switchTokens.trackHeight, switchTokens.trackBorderRadius, switchTokens.trackHeight, switchTokens.thumbSize, switchTokens.thumbBorderRadius, switchTokens.thumbSize, switchTokens.thumbOffset, switchTokens.thumbPressScale)
+    },
+    view: {
+      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":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);"], switchTokens.labelColor, switchTokens.descriptionColor, switchTokens.trackBorderWidth, switchTokens.trackBorderColorOff, switchTokens.trackBorderColorOffHover, switchTokens.trackBorderColorOn, switchTokens.trackBorderColorOnHover, switchTokens.thumbBackgroundColorOff, switchTokens.thumbBackgroundColorOn, switchTokens.thumbBoxShadow)
+    },
+    disabled: {
+      "true": /*#__PURE__*/css(["", ":0.4;"], switchTokens.disabledOpacity)
+    },
+    focused: {
+      "true": /*#__PURE__*/css(["", ":var(--surface-accent);"], switchTokens.trackFocusColor)
+    }
+  }
+};

package/styled-components/es/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} />,
+};