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

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

@@ -1,7 +1,7 @@
 import React, { ComponentProps, useState } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { disableProps, IconPlaceholder } from '@salutejs/plasma-sb-utils';
+import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
 
 import { WithTheme } from '../../../_helpers';
 import { IconCross } from '../../../../components/_Icon';
@@ -291,255 +291,3 @@ export const Chips: StoryObj<StoryPropsChips> = {
     },
     render: (args) => <StoryChips {...args} />,
 };
-
-type StoryEmailValidationProps = StoryPropsDefault & {
-    minLengthValue?: number;
-    minLengthErrorMessage?: string;
-    maxLengthValue?: number;
-    maxLengthErrorMessage?: string;
-    minHostLengthValue?: number;
-    minHostLengthErrorMessage?: string;
-    maxHostLengthValue?: number;
-    maxHostLengthErrorMessage?: string;
-    minDomainLengthValue?: number;
-    minDomainLengthErrorMessage?: string;
-    maxDomainLengthValue?: number;
-    maxDomainLengthErrorMessage?: string;
-    minZoneLengthValue?: number;
-    minZoneLengthErrorMessage?: string;
-    maxZoneLengthValue?: number;
-    maxZoneLengthErrorMessage?: string;
-    whitelistDomainsValue?: string;
-    whitelistDomainsErrorMessage?: string;
-    blacklistDomainsValue?: string;
-    blacklistDomainsErrorMessage?: string;
-};
-
-const StoryEmailValidation = ({
-    minLengthValue,
-    minLengthErrorMessage,
-    maxLengthValue,
-    maxLengthErrorMessage,
-    minHostLengthValue,
-    minHostLengthErrorMessage,
-    maxHostLengthValue,
-    maxHostLengthErrorMessage,
-    minDomainLengthValue,
-    minDomainLengthErrorMessage,
-    maxDomainLengthValue,
-    maxDomainLengthErrorMessage,
-    minZoneLengthValue,
-    minZoneLengthErrorMessage,
-    maxZoneLengthValue,
-    maxZoneLengthErrorMessage,
-    whitelistDomainsValue,
-    whitelistDomainsErrorMessage,
-    blacklistDomainsValue,
-    blacklistDomainsErrorMessage,
-    ...rest
-}: StoryEmailValidationProps) => {
-    const [error, setError] = useState('');
-
-    const validationOptions = {
-        minLength: {
-            value: minLengthValue || undefined,
-            errorMessage: minLengthErrorMessage || 'Почта слишком короткая',
-        },
-        maxLength: {
-            value: maxLengthValue || undefined,
-            errorMessage: maxLengthErrorMessage || 'Почта слишком длинная',
-        },
-        minHostLength: {
-            value: minHostLengthValue || undefined,
-            errorMessage: minHostLengthErrorMessage || 'Хост слишком короткий',
-        },
-        maxHostLength: {
-            value: maxHostLengthValue || undefined,
-            errorMessage: maxHostLengthErrorMessage || 'Хост слишком длинный',
-        },
-        minDomainLength: {
-            value: minDomainLengthValue || undefined,
-            errorMessage: minDomainLengthErrorMessage || 'Домен слишком короткий',
-        },
-        maxDomainLength: {
-            value: maxDomainLengthValue || undefined,
-            errorMessage: maxDomainLengthErrorMessage || 'Домен слишком длинный',
-        },
-        minZoneLength: {
-            value: minZoneLengthValue || undefined,
-            errorMessage: minZoneLengthErrorMessage || 'Доменная зона слишком короткая',
-        },
-        maxZoneLength: {
-            value: maxZoneLengthValue || undefined,
-            errorMessage: maxZoneLengthErrorMessage || 'Доменная зона слишком длинная',
-        },
-        whitelistDomains: {
-            value: whitelistDomainsValue?.split(',') || undefined,
-            errorMessage: whitelistDomainsErrorMessage || 'Домен не разрешен',
-        },
-        blacklistDomains: {
-            value: blacklistDomainsValue?.split(',') || undefined,
-            errorMessage: blacklistDomainsErrorMessage || 'Домен запрещен',
-        },
-    };
-
-    const handleOnChange = () => {
-        setError('');
-    };
-
-    const handleOnValidate = ({ errorMessage }: { errorMessage?: string }) => {
-        setError(errorMessage || '');
-    };
-
-    return (
-        <TextField
-            label="Валидация почты"
-            validationType="email"
-            options={validationOptions}
-            size="l"
-            view={error ? 'negative' : 'default'}
-            leftHelper={error || 'Валидация почты'}
-            onChange={handleOnChange}
-            onValidate={handleOnValidate}
-            {...rest}
-        />
-    );
-};
-
-export const EmailValidation: StoryObj<StoryEmailValidationProps> = {
-    argTypes: {
-        ...disableProps(['view', 'size', 'maxLength', 'required', 'requiredPlacement', 'optional']),
-    },
-    args: {
-        labelPlacement: 'outer',
-        placeholder: 'Заполните поле',
-        minLengthValue: 5,
-        minLengthErrorMessage: 'Почта слишком короткая',
-        maxLengthValue: 25,
-        maxLengthErrorMessage: 'Почта слишком длинная',
-        minHostLengthValue: 1,
-        minHostLengthErrorMessage: 'Хост слишком короткий',
-        maxHostLengthValue: 12,
-        maxHostLengthErrorMessage: 'Хост слишком длинный',
-        minDomainLengthValue: 1,
-        minDomainLengthErrorMessage: 'Домен слишком короткий',
-        maxDomainLengthValue: 6,
-        maxDomainLengthErrorMessage: 'Домен слишком длинный',
-        minZoneLengthValue: 1,
-        minZoneLengthErrorMessage: 'Доменная зона слишком короткая',
-        maxZoneLengthValue: 5,
-        maxZoneLengthErrorMessage: 'Доменная зона слишком длинная',
-        whitelistDomainsValue: 'gmail.com,yandex.ru,mail.ru,mail.com',
-        whitelistDomainsErrorMessage: 'Домен не разрешен',
-        blacklistDomainsValue: 'heh.org,hah.ha',
-        blacklistDomainsErrorMessage: 'Домен запрещен',
-    },
-    render: (args) => <StoryEmailValidation {...args} />,
-};
-
-type StoryPasswordValidationProps = StoryPropsDefault & {
-    minLengthValue?: number;
-    minLengthErrorMessage?: string;
-    maxLengthValue?: number;
-    maxLengthErrorMessage?: string;
-    includeUppercase?: boolean;
-    includeUppercaseErrorMessage?: string;
-    includeLowercase?: boolean;
-    includeLowercaseErrorMessage?: string;
-    includeDigits?: boolean;
-    includeDigitsErrorMessage?: string;
-    includeSpecialSymbols?: boolean;
-    includeSpecialSymbolsErrorMessage?: string;
-};
-
-const StoryPasswordValidation = ({
-    minLengthValue,
-    minLengthErrorMessage,
-    maxLengthValue,
-    maxLengthErrorMessage,
-    includeUppercase,
-    includeUppercaseErrorMessage,
-    includeLowercase,
-    includeLowercaseErrorMessage,
-    includeDigits,
-    includeDigitsErrorMessage,
-    includeSpecialSymbols,
-    includeSpecialSymbolsErrorMessage,
-    ...rest
-}: StoryPasswordValidationProps) => {
-    const [error, setError] = useState('');
-
-    const validationOptions = {
-        minLength: {
-            value: minLengthValue || undefined,
-            errorMessage: minLengthErrorMessage || 'Пароль слишком короткий',
-        },
-        maxLength: {
-            value: maxLengthValue || undefined,
-            errorMessage: maxLengthErrorMessage || 'Пароль слишком длинный',
-        },
-        includeUppercase: {
-            value: includeUppercase,
-            errorMessage: includeUppercaseErrorMessage || 'Пароль должен содержать хотя бы одну заглавную букву',
-        },
-        includeLowercase: {
-            value: includeLowercase,
-            errorMessage: includeLowercaseErrorMessage || 'Пароль должен содержать хотя бы одну строчную букву',
-        },
-        includeDigits: {
-            value: includeDigits,
-            errorMessage: includeDigitsErrorMessage || 'Пароль должен содержать хотя бы одну цифру',
-        },
-        includeSpecialSymbols: {
-            value: includeSpecialSymbols,
-            errorMessage:
-                includeSpecialSymbolsErrorMessage || 'Пароль должен содержать хотя бы один специальный символ',
-        },
-    };
-
-    const handleOnChange = () => {
-        setError('');
-    };
-
-    const handleOnValidate = ({ errorMessage }: { errorMessage?: string }) => {
-        setError(errorMessage || '');
-    };
-
-    return (
-        <TextField
-            label="Валидация пароля"
-            validationType="password"
-            options={validationOptions}
-            size="l"
-            view={error ? 'negative' : 'default'}
-            leftHelper={error || 'Валидация пароля'}
-            onChange={handleOnChange}
-            onValidate={handleOnValidate}
-            {...rest}
-        />
-    );
-};
-
-export const PasswordValidation: StoryObj<StoryPasswordValidationProps> = {
-    argTypes: {
-        ...disableProps(['view', 'size', 'maxLength', 'required', 'requiredPlacement', 'optional']),
-    },
-    args: {
-        labelPlacement: 'outer',
-        placeholder: 'Заполните поле',
-        passwordHidden: false,
-        minLengthValue: 5,
-        minLengthErrorMessage: 'Пароль слишком короткий',
-        maxLengthValue: 25,
-        maxLengthErrorMessage: 'Пароль слишком длинный',
-        includeUppercase: true,
-        includeUppercaseErrorMessage: 'Пароль должен содержать хотя бы одну заглавную букву',
-        includeLowercase: true,
-        includeLowercaseErrorMessage: 'Пароль должен содержать хотя бы одну строчную букву',
-        includeDigits: true,
-        includeDigitsErrorMessage: 'Пароль должен содержать хотя бы одну цифру',
-        includeSpecialSymbols: true,
-        includeSpecialSymbolsErrorMessage: 'Пароль должен содержать хотя бы один специальный символ',
-    },
-    render: (args) => <StoryPasswordValidation {...args} />,
-};

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;", ":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.thumbBackgroundColorOff, _Switch.switchTokens.thumbBackgroundColorOn, _Switch.switchTokens.thumbBoxShadow)
     },
     disabled: {
       "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Switch.switchTokens.disabledOpacity)

package/styled-components/cjs/examples/plasma_web/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_web/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.375rem;", ":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);", ":0.875rem;", ":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);", ":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.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_web/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/TextField/TextField.stories.tsx

@@ -291,255 +291,3 @@ export const Chips: StoryObj<StoryPropsChips> = {
     },
     render: (args) => <StoryChips {...args} />,
 };
-
-type StoryEmailValidationProps = StoryPropsDefault & {
-    minLengthValue?: number;
-    minLengthErrorMessage?: string;
-    maxLengthValue?: number;
-    maxLengthErrorMessage?: string;
-    minHostLengthValue?: number;
-    minHostLengthErrorMessage?: string;
-    maxHostLengthValue?: number;
-    maxHostLengthErrorMessage?: string;
-    minDomainLengthValue?: number;
-    minDomainLengthErrorMessage?: string;
-    maxDomainLengthValue?: number;
-    maxDomainLengthErrorMessage?: string;
-    minZoneLengthValue?: number;
-    minZoneLengthErrorMessage?: string;
-    maxZoneLengthValue?: number;
-    maxZoneLengthErrorMessage?: string;
-    whitelistDomainsValue?: string;
-    whitelistDomainsErrorMessage?: string;
-    blacklistDomainsValue?: string;
-    blacklistDomainsErrorMessage?: string;
-};
-
-const StoryEmailValidation = ({
-    minLengthValue,
-    minLengthErrorMessage,
-    maxLengthValue,
-    maxLengthErrorMessage,
-    minHostLengthValue,
-    minHostLengthErrorMessage,
-    maxHostLengthValue,
-    maxHostLengthErrorMessage,
-    minDomainLengthValue,
-    minDomainLengthErrorMessage,
-    maxDomainLengthValue,
-    maxDomainLengthErrorMessage,
-    minZoneLengthValue,
-    minZoneLengthErrorMessage,
-    maxZoneLengthValue,
-    maxZoneLengthErrorMessage,
-    whitelistDomainsValue,
-    whitelistDomainsErrorMessage,
-    blacklistDomainsValue,
-    blacklistDomainsErrorMessage,
-    ...rest
-}: StoryEmailValidationProps) => {
-    const [error, setError] = useState('');
-
-    const validationOptions = {
-        minLength: {
-            value: minLengthValue || undefined,
-            errorMessage: minLengthErrorMessage || 'Почта слишком короткая',
-        },
-        maxLength: {
-            value: maxLengthValue || undefined,
-            errorMessage: maxLengthErrorMessage || 'Почта слишком длинная',
-        },
-        minHostLength: {
-            value: minHostLengthValue || undefined,
-            errorMessage: minHostLengthErrorMessage || 'Хост слишком короткий',
-        },
-        maxHostLength: {
-            value: maxHostLengthValue || undefined,
-            errorMessage: maxHostLengthErrorMessage || 'Хост слишком длинный',
-        },
-        minDomainLength: {
-            value: minDomainLengthValue || undefined,
-            errorMessage: minDomainLengthErrorMessage || 'Домен слишком короткий',
-        },
-        maxDomainLength: {
-            value: maxDomainLengthValue || undefined,
-            errorMessage: maxDomainLengthErrorMessage || 'Домен слишком длинный',
-        },
-        minZoneLength: {
-            value: minZoneLengthValue || undefined,
-            errorMessage: minZoneLengthErrorMessage || 'Доменная зона слишком короткая',
-        },
-        maxZoneLength: {
-            value: maxZoneLengthValue || undefined,
-            errorMessage: maxZoneLengthErrorMessage || 'Доменная зона слишком длинная',
-        },
-        whitelistDomains: {
-            value: whitelistDomainsValue?.split(',') || undefined,
-            errorMessage: whitelistDomainsErrorMessage || 'Домен не разрешен',
-        },
-        blacklistDomains: {
-            value: blacklistDomainsValue?.split(',') || undefined,
-            errorMessage: blacklistDomainsErrorMessage || 'Домен запрещен',
-        },
-    };
-
-    const handleOnChange = () => {
-        setError('');
-    };
-
-    const handleOnValidate = ({ errorMessage }: { errorMessage?: string }) => {
-        setError(errorMessage || '');
-    };
-
-    return (
-        <TextField
-            label="Валидация почты"
-            validationType="email"
-            options={validationOptions}
-            size="l"
-            view={error ? 'negative' : 'default'}
-            leftHelper={error || 'Валидация почты'}
-            onChange={handleOnChange}
-            onValidate={handleOnValidate}
-            {...rest}
-        />
-    );
-};
-
-export const EmailValidation: StoryObj<StoryEmailValidationProps> = {
-    argTypes: {
-        ...disableProps(['view', 'size', 'maxLength', 'required', 'requiredPlacement', 'optional']),
-    },
-    args: {
-        labelPlacement: 'outer',
-        placeholder: 'Заполните поле',
-        minLengthValue: 5,
-        minLengthErrorMessage: 'Почта слишком короткая',
-        maxLengthValue: 25,
-        maxLengthErrorMessage: 'Почта слишком длинная',
-        minHostLengthValue: 1,
-        minHostLengthErrorMessage: 'Хост слишком короткий',
-        maxHostLengthValue: 12,
-        maxHostLengthErrorMessage: 'Хост слишком длинный',
-        minDomainLengthValue: 1,
-        minDomainLengthErrorMessage: 'Домен слишком короткий',
-        maxDomainLengthValue: 6,
-        maxDomainLengthErrorMessage: 'Домен слишком длинный',
-        minZoneLengthValue: 1,
-        minZoneLengthErrorMessage: 'Доменная зона слишком короткая',
-        maxZoneLengthValue: 5,
-        maxZoneLengthErrorMessage: 'Доменная зона слишком длинная',
-        whitelistDomainsValue: 'gmail.com,yandex.ru,mail.ru,mail.com',
-        whitelistDomainsErrorMessage: 'Домен не разрешен',
-        blacklistDomainsValue: 'heh.org,hah.ha',
-        blacklistDomainsErrorMessage: 'Домен запрещен',
-    },
-    render: (args) => <StoryEmailValidation {...args} />,
-};
-
-type StoryPasswordValidationProps = StoryPropsDefault & {
-    minLengthValue?: number;
-    minLengthErrorMessage?: string;
-    maxLengthValue?: number;
-    maxLengthErrorMessage?: string;
-    includeUppercase?: boolean;
-    includeUppercaseErrorMessage?: string;
-    includeLowercase?: boolean;
-    includeLowercaseErrorMessage?: string;
-    includeDigits?: boolean;
-    includeDigitsErrorMessage?: string;
-    includeSpecialSymbols?: boolean;
-    includeSpecialSymbolsErrorMessage?: string;
-};
-
-const StoryPasswordValidation = ({
-    minLengthValue,
-    minLengthErrorMessage,
-    maxLengthValue,
-    maxLengthErrorMessage,
-    includeUppercase,
-    includeUppercaseErrorMessage,
-    includeLowercase,
-    includeLowercaseErrorMessage,
-    includeDigits,
-    includeDigitsErrorMessage,
-    includeSpecialSymbols,
-    includeSpecialSymbolsErrorMessage,
-    ...rest
-}: StoryPasswordValidationProps) => {
-    const [error, setError] = useState('');
-
-    const validationOptions = {
-        minLength: {
-            value: minLengthValue || undefined,
-            errorMessage: minLengthErrorMessage || 'Пароль слишком короткий',
-        },
-        maxLength: {
-            value: maxLengthValue || undefined,
-            errorMessage: maxLengthErrorMessage || 'Пароль слишком длинный',
-        },
-        includeUppercase: {
-            value: includeUppercase,
-            errorMessage: includeUppercaseErrorMessage || 'Пароль должен содержать хотя бы одну заглавную букву',
-        },
-        includeLowercase: {
-            value: includeLowercase,
-            errorMessage: includeLowercaseErrorMessage || 'Пароль должен содержать хотя бы одну строчную букву',
-        },
-        includeDigits: {
-            value: includeDigits,
-            errorMessage: includeDigitsErrorMessage || 'Пароль должен содержать хотя бы одну цифру',
-        },
-        includeSpecialSymbols: {
-            value: includeSpecialSymbols,
-            errorMessage:
-                includeSpecialSymbolsErrorMessage || 'Пароль должен содержать хотя бы один специальный символ',
-        },
-    };
-
-    const handleOnChange = () => {
-        setError('');
-    };
-
-    const handleOnValidate = ({ errorMessage }: { errorMessage?: string }) => {
-        setError(errorMessage || '');
-    };
-
-    return (
-        <TextField
-            label="Валидация пароля"
-            validationType="password"
-            options={validationOptions}
-            size="l"
-            view={error ? 'negative' : 'default'}
-            leftHelper={error || 'Валидация пароля'}
-            onChange={handleOnChange}
-            onValidate={handleOnValidate}
-            {...rest}
-        />
-    );
-};
-
-export const PasswordValidation: StoryObj<StoryPasswordValidationProps> = {
-    argTypes: {
-        ...disableProps(['view', 'size', 'maxLength', 'required', 'requiredPlacement', 'optional']),
-    },
-    args: {
-        labelPlacement: 'outer',
-        placeholder: 'Заполните поле',
-        passwordHidden: false,
-        minLengthValue: 5,
-        minLengthErrorMessage: 'Пароль слишком короткий',
-        maxLengthValue: 25,
-        maxLengthErrorMessage: 'Пароль слишком длинный',
-        includeUppercase: true,
-        includeUppercaseErrorMessage: 'Пароль должен содержать хотя бы одну заглавную букву',
-        includeLowercase: true,
-        includeLowercaseErrorMessage: 'Пароль должен содержать хотя бы одну строчную букву',
-        includeDigits: true,
-        includeDigitsErrorMessage: 'Пароль должен содержать хотя бы одну цифру',
-        includeSpecialSymbols: true,
-        includeSpecialSymbolsErrorMessage: 'Пароль должен содержать хотя бы один специальный символ',
-    },
-    render: (args) => <StoryPasswordValidation {...args} />,
-};

package/styled-components/cjs/utils/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.specialCharacters = exports.keyCodes = exports.emailPattern = void 0;
+exports.keyCodes = void 0;
 var keyCodes = exports.keyCodes = {
   PageUp: 33,
   PageDown: 34,
@@ -16,6 +16,4 @@ var keyCodes = exports.keyCodes = {
   Enter: 13,
   Space: 32,
   Escape: 27
-};
-var emailPattern = exports.emailPattern = /^[^\s@]+@([^\s@.,]+\.)+[^\s@.,]{2,}$/;
-var specialCharacters = exports.specialCharacters = /[!@#$%^&*(),.?":{}|<>]/;
+};

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

@@ -23,6 +23,11 @@ export var 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',
@@ -34,7 +39,8 @@ export var 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'