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

package/styled-components/es/components/Card/Card.api.mdx

@@ -0,0 +1,184 @@
+---
+id: card
+title: Card
+---
+
+отличия от https://plasma.sberdevices.ru/b2c/components/card/:
+* избавляемся от CardBody
+* убираем дублирование disabled
+
+примеры дизайна https://www.figma.com/design/MXl0ZkXEqEhIFDS2H6b3yk/StarDS-Cards?node-id=2-690&node-type=instance&t=TJN8Nqyiky3Dfw2T-0
+
+другие либы:
+https://ant.design/components/card#
+https://mui.com/material-ui/react-card/
+
+```tsx live
+import React, { ReactNode } from "react";
+
+/**
+ * Набор часто встречающихся скруглений.
+ */
+
+export const radiuses = {
+  250: 15.625,
+  32: 2,
+  28: 1.75,
+  24: 1.5,
+  20: 1.25,
+  18: 1.125,
+  16: 1,
+  14: 0.875,
+  12: 0.75,
+  8: 0.5,
+  0: 0,
+};
+
+export type Roundness = keyof typeof radiuses;
+
+export interface RoundnessProps {
+  /** Скругленность */
+  roundness: Roundness;
+}
+
+interface Card {
+  /** Компонент в фокусе */
+  focused?: boolean;
+  /** Увеличение по фокусу */
+  scaleOnFocus?: boolean;
+  /** Компонент неактивен */
+  disabled?: boolean;
+  /** Добавить рамку при фокусе */
+  outlined?: boolean;
+  /** Цвет подложки */
+  background?: string;
+  /** Делает карточку квадратной */
+  square?: boolean;
+  /** Заголовок */
+  title?: string | ReactNode;
+  /** Подзаголовок */
+  subtitle?: string | ReactNode;
+  /** Расположение заголовка и подзаголовка, пока нет в дизайне */
+  titlePlacement?: "inner" | "outer";
+  /** Выравнивание заголовка и подзаголовка */
+  titleAlign?: "left" | "center";
+  /** Подвал, или вынести в
+   * <CardContent footer={<CardTimeline />} /> или <CardFooter><CardTimeline /></CardFooter>
+   * */
+  footer?: ReactNode;
+}
+
+const ratios = {
+  "1 / 1": "100",
+  "1/1": "100",
+  "3 / 4": "133.3333",
+  "3/4": "133.3333",
+  "4 / 3": "75",
+  "4/3": "75",
+  "9 / 16": "177.7778",
+  "9/16": "177.7778",
+  "16 / 9": "56.25",
+  "16/9": "56.25",
+  "1 / 2": "200",
+  "1/2": "200",
+  "2 / 1": "50",
+  "2/1": "50",
+};
+
+export type Ratio = keyof typeof ratios;
+
+/**
+ * CardMedia из текущей реализации
+ * Стоит ли заменить пропсом `cover?: ReactNode;` в Card как в Ant?
+ * а width и height передавать в style...
+ *
+ * имхо, нет. у Card может быть title и subtitle под карточкой
+ * скорее всего, на них свойство height не должно распространяться
+ * стоит подождать финальный дизайн
+ */
+interface CardMedia {
+  base?: "img" | "div";
+  height?: string | number;
+  ratio?: Ratio;
+  customRatio?: string;
+}
+
+interface CardContent {
+  topLeft?: string | ReactNode;
+  topRight?: string | ReactNode;
+  bottomLeft?: string | ReactNode;
+  bottomRight?: string | ReactNode;
+  children?: ReactNode;
+}
+
+/** или */
+interface CardContent {
+  placement?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+  children?: ReactNode;
+}
+
+interface CardTimeline {
+  /**
+   * Описание, например время до конца фильма. Возможно,
+   * не нужно и стоит указывать bottomRight контент
+   */
+  text?: string;
+  progress?: string | number;
+  /**
+   * Не увеличивать высоту карточки
+   * @default true
+   */
+  inline?: boolean;
+}
+```
+
+```tsx live
+<Card title="Title" subtitle="Subtitle">
+  <CardContent placement="top-left">
+    <SomeIcon />
+  </CardContent>
+  <CardContent placement="top-right">
+    <SaveButton saved={isSaved} />
+  </CardContent>
+  <CardContent placement="bottom-right">18+</CardContent>
+</Card>;
+
+<Card title="Title" subtitle="Subtitle">
+  <CardContent
+    topLeft={<SomeIcon />}
+    topRight={<SaveButton saved={isSaved} />}
+    bottomRight="18+"
+  />
+</Card>;
+
+<Card title="Title" subtitle="Subtitle">
+  <CardMedia src={someSrc} alt="trailer" />
+  <CardContent
+    topLeft={<SomeIcon />}
+    topRight={<SaveButton saved={isSaved} />}
+    bottomRight="18+"
+  />
+  <CardTimeline text="еще 1ч 23мин" progress={56} />
+</Card>;
+
+<Card title="Title" subtitle="Subtitle">
+  <CardContent topLeft={<SomeIcon />} topRight={<SaveButton saved={isSaved} />}>
+    <CardMedia src={someSrc} alt="trailer" />
+  </CardContent>
+  <CardTimeline text="еще 1ч 23мин" progress={56} />
+</Card>;
+
+<Card
+  title="Title"
+  subtitle="Subtitle"
+  // как в ant, но кажется, что так менее гибко
+  cover={<CardMedia src={someSrc} alt="trailer" />}
+  square
+>
+  <CardContent
+    topLeft={<SomeIcon />}
+    topRight={<SaveButton saved={isSaved} />}
+  />
+  <CardTimeline text="еще 1ч 23мин" progress={56} />
+</Card>;
+```

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'

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)