@sberbusiness/triplex-next 1.44.0 → 1.45.0

package/components/Notification/components/NotificationGroupedFooter.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { c as clsx } from "../../../chunks/vendor-D4wvHis9.js";
-import { s as styles } from "../../../chunks/Notification.module-DuwX9b1Z.js";
+import { s as styles } from "../../../chunks/Notification.module-BgjNhU2P.js";
 const NotificationGroupedFooter = () => /* @__PURE__ */ jsxs("div", { children: [
   /* @__PURE__ */ jsx("div", { className: clsx(styles.notificationGroupedFooterItem, styles.first) }),
   /* @__PURE__ */ jsx("div", { className: clsx(styles.notificationGroupedFooterItem, styles.second) })

package/components/Notification/components/NotificationHeader.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { s as styles } from "../../../chunks/Notification.module-DuwX9b1Z.js";
+import { s as styles } from "../../../chunks/Notification.module-BgjNhU2P.js";
 const NotificationHeader = ({ children }) => /* @__PURE__ */ jsx("h3", { className: styles.notificationHeader, children });
 NotificationHeader.displayName = "NotificationHeader";
 export {

package/components/Notification/components/NotificationIcon.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { s as styles } from "../../../chunks/Notification.module-DuwX9b1Z.js";
+import { s as styles } from "../../../chunks/Notification.module-BgjNhU2P.js";
 const NotificationIcon = ({ children }) => /* @__PURE__ */ jsx("div", { className: styles.notificationIcon, children });
 NotificationIcon.displayName = "NotificationIcon";
 export {

package/components/Notification/components/NotificationTime.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { s as styles } from "../../../chunks/Notification.module-DuwX9b1Z.js";
+import { s as styles } from "../../../chunks/Notification.module-BgjNhU2P.js";
 const NotificationTime = ({ time }) => /* @__PURE__ */ jsx("span", { className: styles.notificationTime, children: time });
 NotificationTime.displayName = "NotificationTime";
 export {

package/components/OrderedList/OrderedList.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import { c as clsx } from "../../chunks/vendor-D4wvHis9.js";
 import { OrderedListItem } from "./OrderedListItem.js";
-const orderedList = "orderedList__5a3f0cf5";
+const orderedList = "orderedList__76596af5";
 const styles = {
   orderedList
 };
@@ -17,7 +17,7 @@ const OrderedList = Object.assign(
         ["--start-index-tx"]: start - 1
       } : style,
       ...restProps,
-      "data-tx": "1.44.0",
+      "data-tx": "1.45.0",
       ref
     }
   )),

package/components/OrderedList/OrderedListItem.js

@@ -6,7 +6,7 @@ import "../Typography/Caption.js";
 import "../Typography/CodeText.js";
 import { Text } from "../Typography/Text.js";
 import "../Typography/Title.js";
-const orderedListItem = "orderedListItem__4e17e016";
+const orderedListItem = "orderedListItem__fe6eba6f";
 const styles = {
   orderedListItem
 };
@@ -18,7 +18,7 @@ const OrderedListItem = React__default.forwardRef(
       size: ETextSize.B3,
       tag: "li",
       ...restProps,
-      "data-tx": "1.44.0",
+      "data-tx": "1.45.0",
       ref
     }
   )

package/components/Overlay/Overlay.js

@@ -4,7 +4,7 @@ import { c as clsx } from "../../chunks/vendor-D4wvHis9.js";
 import { OverlayBase } from "./OverlayBase.js";
 import { OverlayMask } from "./OverlayMask.js";
 import { OverlayPanel } from "./OverlayPanel.js";
-import { s as styles } from "../../chunks/Overlay.module-Cuh6SDnR.js";
+import { s as styles } from "../../chunks/Overlay.module-DlzZBVdp.js";
 const Overlay = Object.assign(
   React__default.forwardRef(
     ({

package/components/Overlay/OverlayMask.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import { c as clsx } from "../../chunks/vendor-D4wvHis9.js";
-import { s as styles } from "../../chunks/Overlay.module-Cuh6SDnR.js";
+import { s as styles } from "../../chunks/Overlay.module-DlzZBVdp.js";
 const OverlayMask = React__default.forwardRef(
   ({ className, opened, ...htmlDivAttributes }, ref) => /* @__PURE__ */ jsx(
     "div",

package/components/Overlay/OverlayPanel.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import { c as clsx } from "../../chunks/vendor-D4wvHis9.js";
 import { EOverlayDirection } from "./OverlayBase.js";
-import { s as styles } from "../../chunks/Overlay.module-Cuh6SDnR.js";
+import { s as styles } from "../../chunks/Overlay.module-DlzZBVdp.js";
 const OverlayPanel = React__default.forwardRef(
   ({
     children,

package/components/Page/Page.js

@@ -4,7 +4,7 @@ import { c as clsx } from "../../chunks/vendor-D4wvHis9.js";
 import { BodyPage } from "./components/BodyPage.js";
 import { HeaderPage } from "./components/HeaderPage.js";
 import { FooterPage } from "./components/FooterPage.js";
-import { s as styles } from "../../chunks/Page.module-Bso9TRUt.js";
+import { s as styles } from "../../chunks/Page.module-CEeCuq1n.js";
 import "./components/enums.js";
 const Page = Object.assign(
   React__default.forwardRef(function Page2({ children, className, ...rest }, ref) {

package/components/Page/components/BodyPage.js

@@ -5,13 +5,13 @@ import { c as clsx } from "../../../chunks/vendor-D4wvHis9.js";
 import { EBodyPageVerticalMargin, EBodyPageType } from "./enums.js";
 import { Island } from "../../Island/Island.js";
 import { EIslandType } from "../../Island/enums.js";
-const bodyPage = "bodyPage__cb44e9d2";
-const marginTopLarge = "marginTopLarge__6bcb07b5";
-const marginTopSmall = "marginTopSmall__e1c017b7";
-const marginTopNone = "marginTopNone__26cd4c62";
-const marginBottomLarge = "marginBottomLarge__32dd290b";
-const marginBottomSmall = "marginBottomSmall__939e2687";
-const marginBottomNone = "marginBottomNone__e5cf045d";
+const bodyPage = "bodyPage__cea56cd1";
+const marginTopLarge = "marginTopLarge__c2a40dbb";
+const marginTopSmall = "marginTopSmall__ebafd9ec";
+const marginTopNone = "marginTopNone__5bd117df";
+const marginBottomLarge = "marginBottomLarge__63fb2409";
+const marginBottomSmall = "marginBottomSmall__ead04e0e";
+const marginBottomNone = "marginBottomNone__ceab8593";
 const styles = {
   bodyPage,
   marginTopLarge,

package/components/Page/components/FooterPage.js

@@ -9,7 +9,7 @@ import { EIslandType } from "../../Island/enums.js";
 import "../../Island/components/IslandBody.js";
 import "../../Island/components/IslandHeader.js";
 import "../../Island/components/IslandFooter.js";
-import { s as styles } from "../../../chunks/Page.module-Bso9TRUt.js";
+import { s as styles } from "../../../chunks/Page.module-CEeCuq1n.js";
 const FooterPage = Object.assign(
   React__default.forwardRef(
     ({ className, type, size, sticky, ...rest }, ref) => {

package/components/Page/components/HeaderPage.js

@@ -9,7 +9,7 @@ import { EIslandType } from "../../Island/enums.js";
 import "../../Island/components/IslandBody.js";
 import "../../Island/components/IslandHeader.js";
 import "../../Island/components/IslandFooter.js";
-import { s as styles } from "../../../chunks/Page.module-Bso9TRUt.js";
+import { s as styles } from "../../../chunks/Page.module-CEeCuq1n.js";
 const HeaderPage = Object.assign(
   React__default.forwardRef(
     ({ className, type, size, sticky, ...rest }, ref) => {

package/components/Pagination/components/PaginationExtended.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { c as clsx } from "../../../chunks/vendor-D4wvHis9.js";
 import React__default from "react";
-const paginationExtended = "paginationExtended__525b7ee2";
+const paginationExtended = "paginationExtended__1f83b609";
 const styles = {
   paginationExtended
 };
@@ -11,7 +11,7 @@ const PaginationExtended = React__default.forwardRef(
       "nav",
       {
         className: clsx(styles.paginationExtended, className),
-        "data-tx": "1.44.0",
+        "data-tx": "1.45.0",
         ...rest,
         ref,
         children

package/components/Pagination/components/PaginationNavigationButton.js

@@ -5,8 +5,8 @@ import { EButtonIconShape } from "../../Button/enums.js";
 import { EPaginationNavigationIconDirection } from "../enums.js";
 import { CaretleftStrokeSrvIcon24 } from "@sberbusiness/icons-next";
 import { MasterTableContext } from "../../Table/MasterTableContext.js";
-const paginationNavigationButton = "paginationNavigationButton__75d675c5";
-const directionIconNext = "directionIconNext__8c140da7";
+const paginationNavigationButton = "paginationNavigationButton__88e96d5d";
+const directionIconNext = "directionIconNext__74b18094";
 const styles = {
   paginationNavigationButton,
   directionIconNext

package/components/Pagination/components/PaginationNavigationExtended.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import { c as clsx } from "../../../chunks/vendor-D4wvHis9.js";
-const paginationNavigationExtended = "paginationNavigationExtended__7aa36626";
+const paginationNavigationExtended = "paginationNavigationExtended__7965eadb";
 const styles = {
   paginationNavigationExtended
 };

package/components/Pagination/components/PaginationPageButton.js

@@ -8,8 +8,8 @@ import { Text } from "../../Typography/Text.js";
 import "../../Typography/Title.js";
 import { ButtonBase } from "../../Button/ButtonBase.js";
 import { MasterTableContext } from "../../Table/MasterTableContext.js";
-const paginationPageButton = "paginationPageButton__682d9838";
-const currentPage = "currentPage__afad0cbd";
+const paginationPageButton = "paginationPageButton__cb6ebd58";
+const currentPage = "currentPage__ce6c1cb7";
 const styles = {
   paginationPageButton,
   currentPage

package/components/Pagination/components/PaginationPageEllipsis.js

@@ -6,7 +6,7 @@ import "../../Typography/Caption.js";
 import "../../Typography/CodeText.js";
 import { Text } from "../../Typography/Text.js";
 import "../../Typography/Title.js";
-const paginationPageEllipsis = "paginationPageEllipsis__3707b7be";
+const paginationPageEllipsis = "paginationPageEllipsis__acc859f6";
 const styles = {
   paginationPageEllipsis
 };

package/components/Pagination/components/PaginationSelect.js

@@ -10,14 +10,24 @@ import { SelectField } from "../../SelectField/SelectField.js";
 import { EFormFieldStatus } from "../../FormField/enums.js";
 import { MasterTableContext } from "../../Table/MasterTableContext.js";
 import { EComponentSize } from "../../../enums/EComponentSize.js";
-const paginationSelect = "paginationSelect__9706eb65";
-const paginationSelectControl = "paginationSelectControl__d88949b4";
+const paginationSelect = "paginationSelect__349aa2aa";
+const paginationSelectControl = "paginationSelectControl__ae1123b9";
 const styles = {
   paginationSelect,
   paginationSelectControl
 };
 const PaginationSelect = React__default.forwardRef(
-  ({ paginationLabel, className, options, value, onChange, status }, ref) => {
+  ({
+    paginationLabel,
+    className,
+    options,
+    value,
+    onChange,
+    status,
+    targetProps,
+    mobileTitle = paginationLabel,
+    ...rest
+  }, ref) => {
     const [instanceId] = useState(() => `Pagination-${uniqueId()}`);
     const { loading } = useContext(MasterTableContext);
     return /* @__PURE__ */ jsxs("div", { className: clsx(styles.paginationSelect, className), ref, children: [
@@ -27,14 +37,13 @@ const PaginationSelect = React__default.forwardRef(
         {
           size: EComponentSize.SM,
           value,
-          mobileTitle: paginationLabel,
+          mobileTitle,
           options,
           onChange,
           status: loading ? EFormFieldStatus.DISABLED : status,
-          targetProps: {
-            fieldLabel: ""
-          },
-          "aria-labelledby": instanceId
+          "aria-labelledby": instanceId,
+          ...rest,
+          targetProps: { fieldLabel: "", ...targetProps }
         }
       ) })
     ] });

package/components/Pagination/components/PaginationSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationSelect.js","sources":["../../../../src/components/Pagination/components/PaginationSelect.tsx"],"sourcesContent":["import React, { useContext, useState } from \"react\";\nimport { uniqueId } from \"lodash-es\";\nimport clsx from \"clsx\";\nimport styles from \"../styles/PaginationSelect.module.less\";\nimport { ETextSize, Text } from \"../../Typography\";\nimport { SelectField, ISelectFieldProps } from \"../../SelectField\";\nimport { EFormFieldStatus } from \"../../FormField/enums\";\nimport { MasterTableContext } from \"@sberbusiness/triplex-next/components/Table/MasterTableContext\";\nimport { EComponentSize } from \"@sberbusiness/triplex-next/enums/EComponentSize\";\n\n/** Свойства компонента PaginationSelect. */\nexport interface IPaginationSelectProps\n    extends Omit<ISelectFieldProps, \"size\" | \"value\">, Required<Pick<ISelectFieldProps, \"value\">> {\n    /** Текст лейбла пагинации. */\n    paginationLabel: React.ReactNode;\n}\n\n/** Выбор количества элементов на странице. */\nexport const PaginationSelect = React.forwardRef<HTMLDivElement, IPaginationSelectProps>(\n    ({ paginationLabel, className, options, value, onChange, status }, ref) => {\n        const [instanceId] = useState(() => `Pagination-${uniqueId()}`);\n        const { loading } = useContext(MasterTableContext);\n\n        return (\n            <div className={clsx(styles.paginationSelect, className)} ref={ref}>\n                <Text size={ETextSize.B3} id={instanceId}>\n                    {paginationLabel}\n                </Text>\n                <div className={styles.paginationSelectControl}>\n                    <SelectField\n                        size={EComponentSize.SM}\n                        value={value}\n                        mobileTitle={paginationLabel}\n                        options={options}\n                        onChange={onChange}\n                        status={loading ? EFormFieldStatus.DISABLED : status}\n                        targetProps={{\n                            fieldLabel: \"\",\n                        }}\n                        aria-labelledby={instanceId}\n                    />\n                </div>\n            </div>\n        );\n    },\n);\n\nPaginationSelect.displayName = \"PaginationSelect\";\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;AAkBO,MAAM,mBAAmBA,eAAM;AAAA,EAClC,CAAC,EAAE,iBAAiB,WAAW,SAAS,OAAO,UAAU,OAAA,GAAU,QAAQ;AACvE,UAAM,CAAC,UAAU,IAAI,SAAS,MAAM,cAAc,SAAA,CAAU,EAAE;AAC9D,UAAM,EAAE,QAAA,IAAY,WAAW,kBAAkB;AAEjD,WACI,qBAAC,SAAI,WAAW,KAAK,OAAO,kBAAkB,SAAS,GAAG,KACtD,UAAA;AAAA,MAAA,oBAAC,QAAK,MAAM,UAAU,IAAI,IAAI,YACzB,UAAA,iBACL;AAAA,MACA,oBAAC,OAAA,EAAI,WAAW,OAAO,yBACnB,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,MAAM,eAAe;AAAA,UACrB;AAAA,UACA,aAAa;AAAA,UACb;AAAA,UACA;AAAA,UACA,QAAQ,UAAU,iBAAiB,WAAW;AAAA,UAC9C,aAAa;AAAA,YACT,YAAY;AAAA,UAAA;AAAA,UAEhB,mBAAiB;AAAA,QAAA;AAAA,MAAA,EACrB,CACJ;AAAA,IAAA,GACJ;AAAA,EAER;AACJ;AAEA,iBAAiB,cAAc;"}
+{"version":3,"file":"PaginationSelect.js","sources":["../../../../src/components/Pagination/components/PaginationSelect.tsx"],"sourcesContent":["import React, { useContext, useState } from \"react\";\nimport { uniqueId } from \"lodash-es\";\nimport clsx from \"clsx\";\nimport styles from \"../styles/PaginationSelect.module.less\";\nimport { ETextSize, Text } from \"../../Typography\";\nimport { SelectField, ISelectFieldProps } from \"../../SelectField\";\nimport { EFormFieldStatus } from \"../../FormField/enums\";\nimport { MasterTableContext } from \"@sberbusiness/triplex-next/components/Table/MasterTableContext\";\nimport { EComponentSize } from \"@sberbusiness/triplex-next/enums/EComponentSize\";\n\n/** Свойства компонента PaginationSelect. */\nexport interface IPaginationSelectProps\n    extends Omit<ISelectFieldProps, \"size\" | \"value\">, Required<Pick<ISelectFieldProps, \"value\">> {\n    /** Текст лейбла пагинации. */\n    paginationLabel: React.ReactNode;\n}\n\n/** Выбор количества элементов на странице. */\nexport const PaginationSelect = React.forwardRef<HTMLDivElement, IPaginationSelectProps>(\n    (\n        {\n            paginationLabel,\n            className,\n            options,\n            value,\n            onChange,\n            status,\n            targetProps,\n            mobileTitle = paginationLabel,\n            ...rest\n        },\n        ref,\n    ) => {\n        const [instanceId] = useState(() => `Pagination-${uniqueId()}`);\n        const { loading } = useContext(MasterTableContext);\n\n        return (\n            <div className={clsx(styles.paginationSelect, className)} ref={ref}>\n                <Text size={ETextSize.B3} id={instanceId}>\n                    {paginationLabel}\n                </Text>\n                <div className={styles.paginationSelectControl}>\n                    <SelectField\n                        size={EComponentSize.SM}\n                        value={value}\n                        mobileTitle={mobileTitle}\n                        options={options}\n                        onChange={onChange}\n                        status={loading ? EFormFieldStatus.DISABLED : status}\n                        aria-labelledby={instanceId}\n                        {...rest}\n                        targetProps={{ fieldLabel: \"\", ...targetProps }}\n                    />\n                </div>\n            </div>\n        );\n    },\n);\n\nPaginationSelect.displayName = \"PaginationSelect\";\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;AAkBO,MAAM,mBAAmBA,eAAM;AAAA,EAClC,CACI;AAAA,IACI;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,GAAG;AAAA,EAAA,GAEP,QACC;AACD,UAAM,CAAC,UAAU,IAAI,SAAS,MAAM,cAAc,SAAA,CAAU,EAAE;AAC9D,UAAM,EAAE,QAAA,IAAY,WAAW,kBAAkB;AAEjD,WACI,qBAAC,SAAI,WAAW,KAAK,OAAO,kBAAkB,SAAS,GAAG,KACtD,UAAA;AAAA,MAAA,oBAAC,QAAK,MAAM,UAAU,IAAI,IAAI,YACzB,UAAA,iBACL;AAAA,MACA,oBAAC,OAAA,EAAI,WAAW,OAAO,yBACnB,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,MAAM,eAAe;AAAA,UACrB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,QAAQ,UAAU,iBAAiB,WAAW;AAAA,UAC9C,mBAAiB;AAAA,UAChB,GAAG;AAAA,UACJ,aAAa,EAAE,YAAY,IAAI,GAAG,YAAA;AAAA,QAAY;AAAA,MAAA,EAClD,CACJ;AAAA,IAAA,GACJ;AAAA,EAER;AACJ;AAEA,iBAAiB,cAAc;"}

package/components/Radio/Radio.js

@@ -8,14 +8,14 @@ import { Text } from "../Typography/Text.js";
 import "../Typography/Title.js";
 import { EComponentSize } from "../../enums/EComponentSize.js";
 import { createSizeToClassNameMap } from "../../utils/classNameMaps.js";
-const label = "label__9b03e137";
-const sm = "sm__9918642f";
-const nonempty = "nonempty__fe999f04";
-const md = "md__ceb3a62c";
-const lg = "lg__f2c71f4e";
-const disabled = "disabled__1108def2";
-const radio = "radio__63d081c0";
-const radioIcon = "radioIcon__6baf296f";
+const label = "label__a718eaa9";
+const sm = "sm__4cc031da";
+const nonempty = "nonempty__ec3ae951";
+const md = "md__5f72b53c";
+const lg = "lg__7656ace4";
+const disabled = "disabled__8653eb29";
+const radio = "radio__5288cee4";
+const radioIcon = "radioIcon__0c10e02f";
 const styles = {
   label,
   sm,
@@ -41,7 +41,7 @@ const Radio = React__default.forwardRef((props, ref) => {
     { [styles.disabled]: !!disabled2, [styles.nonempty]: !!children },
     labelAttributes == null ? void 0 : labelAttributes.className
   );
-  return /* @__PURE__ */ jsxs("label", { ...labelAttributes, className: classNamesLabel, "data-tx": "1.44.0", children: [
+  return /* @__PURE__ */ jsxs("label", { ...labelAttributes, className: classNamesLabel, "data-tx": "1.45.0", children: [
     /* @__PURE__ */ jsx("input", { type: "radio", className: classNames, disabled: disabled2, ...inputAttributes, ref }),
     /* @__PURE__ */ jsx("span", { className: styles.radioIcon }),
     children && /* @__PURE__ */ jsx(Text, { size: sizeToTextSizeMap[size], tag: "div", children })

package/components/Radio/RadioXGroup.js

@@ -1,16 +1,16 @@
 import { jsx } from "react/jsx-runtime";
 import { c as clsx } from "../../chunks/vendor-D4wvHis9.js";
-const radioXGroup = "radioXGroup__5c5a2f87";
-const label = "label__9b03e137";
+const radioXGroup = "radioXGroup__8419ca2a";
+const label = "label__a718eaa9";
 const styles = {
   radioXGroup,
-  "indent-12": "indent-12__dca8addd",
+  "indent-12": "indent-12__3c380dbf",
   label,
-  "indent-16": "indent-16__f84c6344",
-  "indent-20": "indent-20__5b102e9d",
-  "indent-24": "indent-24__3d53a61e",
-  "indent-28": "indent-28__3c58a7a8",
-  "indent-32": "indent-32__22850c09"
+  "indent-16": "indent-16__b21587bb",
+  "indent-20": "indent-20__ddaa155e",
+  "indent-24": "indent-24__94cae224",
+  "indent-28": "indent-28__4b478709",
+  "indent-32": "indent-32__39da216f"
 };
 const RadioXGroup = (props) => {
   const { children, className, indent = 12, ...rest } = props;

package/components/Radio/RadioYGroup.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { c as clsx } from "../../chunks/vendor-D4wvHis9.js";
-const radioYGroup = "radioYGroup__9b83d21f";
+const radioYGroup = "radioYGroup__b17be09d";
 const styles = {
   radioYGroup
 };

package/components/Row/Row.js

@@ -3,10 +3,10 @@ import React__default from "react";
 import { c as clsx } from "../../chunks/vendor-D4wvHis9.js";
 import { EComponentSize } from "../../enums/EComponentSize.js";
 import { RowContext } from "./RowContext.js";
-const row = "row__acf44e8c";
-const noPaddingBottom = "noPaddingBottom__935908b3";
-const SM = "SM__a6cd7eca";
-const MD = "MD__056a46a3";
+const row = "row__b5d2f522";
+const noPaddingBottom = "noPaddingBottom__a6bd3fec";
+const SM = "SM__7d99f09c";
+const MD = "MD__c9f05323";
 const styles = {
   row,
   noPaddingBottom,

package/components/SMSField/SMSField.js

@@ -1,16 +1,37 @@
 import { jsx } from "react/jsx-runtime";
 import { c as clsx } from "../../chunks/vendor-D4wvHis9.js";
 import { useState } from "react";
+import { EFormFieldStatus } from "../FormField/enums.js";
+import "../FormField/components/FormFieldClear.js";
+import "../FormField/components/FormFieldCounter.js";
+import "../FormField/components/FormFieldDescription.js";
+import "../FormField/components/FormFieldInput.js";
+import "../FormField/components/FormFieldLabel.js";
+import "../FormField/components/FormFieldMaskedInput.js";
+import "../FormField/components/FormFieldPostfix.js";
+import "../FormField/components/FormFieldPrefix.js";
+import "../FormField/components/FormFieldTarget.js";
+import "../FormField/components/FormFieldTextarea.js";
+import "../FormField/FormField.js";
 import { SMSFieldContext } from "./SMSFieldContext.js";
 import { SMSFieldInput } from "./components/SMSFieldInput.js";
 import { SMSFieldRefresh } from "./components/SMSFieldRefresh.js";
 import { SMSFieldSubmit } from "./components/SMSFieldSubmit.js";
 import { SMSFieldTooltip } from "./components/SMSFieldTooltip.js";
-import { s as styles } from "../../chunks/SMSField.module-DHnJVbUI.js";
+import { s as styles } from "../../chunks/SMSField.module-CGuPONeF.js";
 import { createSizeToClassNameMap } from "../../utils/classNameMaps.js";
 const sizeToClassNameMap = createSizeToClassNameMap(styles);
 const SMSField = (props) => {
-  const { children, className, code, disabled, error, onChangeCode, onSubmitCode, size, ...htmlDivAttributes } = props;
+  const {
+    children,
+    className,
+    code,
+    onChangeCode,
+    onSubmitCode,
+    size,
+    status = EFormFieldStatus.DEFAULT,
+    ...htmlDivAttributes
+  } = props;
   const [disabledSubmit, setDisabledSubmit] = useState(true);
   const [tooltipId, setTooltipId] = useState();
   const classSMSField = clsx(styles.smsField, className);
@@ -19,18 +40,17 @@ const SMSField = (props) => {
     {
       value: {
         code,
-        disabled: !!disabled,
         disabledSubmit,
-        error: !!error,
         onChangeCode,
         onSubmitCode,
         setDisabledSubmit,
         setTooltipId,
         size,
         sizeClassName: sizeToClassNameMap[size],
+        status,
         tooltipId
       },
-      children: /* @__PURE__ */ jsx("div", { className: classSMSField, ...htmlDivAttributes, "data-tx": "1.44.0", children })
+      children: /* @__PURE__ */ jsx("div", { className: classSMSField, ...htmlDivAttributes, "data-tx": "1.45.0", children })
     }
   );
 };

package/components/SMSField/SMSField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SMSField.js","sources":["../../../src/components/SMSField/SMSField.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useState } from \"react\";\nimport { SMSFieldContext } from \"@sberbusiness/triplex-next/components/SMSField/SMSFieldContext\";\nimport { ISMSFieldProps } from \"@sberbusiness/triplex-next/components/SMSField/types\";\nimport { SMSFieldInput } from \"@sberbusiness/triplex-next/components/SMSField/components/SMSFieldInput\";\nimport { SMSFieldRefresh } from \"@sberbusiness/triplex-next/components/SMSField/components/SMSFieldRefresh\";\nimport { SMSFieldSubmit } from \"@sberbusiness/triplex-next/components/SMSField/components/SMSFieldSubmit\";\nimport { SMSFieldTooltip } from \"@sberbusiness/triplex-next/components/SMSField/components/SMSFieldTooltip\";\nimport styles from \"@sberbusiness/triplex-next/components/SMSField/styles/SMSField.module.less\";\nimport { createSizeToClassNameMap } from \"@sberbusiness/triplex-next/utils/classNameMaps\";\n\n// Соответствие размера имени класса.\nconst sizeToClassNameMap = createSizeToClassNameMap(styles);\n\n/** Внутренние составляющие SMSField. */\ninterface ISMSFieldComposition {\n    Tooltip: typeof SMSFieldTooltip;\n    Refresh: typeof SMSFieldRefresh;\n    Input: typeof SMSFieldInput;\n    Submit: typeof SMSFieldSubmit;\n}\n\n/** Компонент для ввода СМС. */\nexport const SMSField: React.FC<ISMSFieldProps> & ISMSFieldComposition = (props) => {\n    const { children, className, code, disabled, error, onChangeCode, onSubmitCode, size, ...htmlDivAttributes } =\n        props;\n\n    const [disabledSubmit, setDisabledSubmit] = useState(true);\n    const [tooltipId, setTooltipId] = useState<string>();\n    const classSMSField = clsx(styles.smsField, className);\n\n    return (\n        <SMSFieldContext.Provider\n            value={{\n                code,\n                disabled: !!disabled,\n                disabledSubmit,\n                error: !!error,\n                onChangeCode,\n                onSubmitCode,\n                setDisabledSubmit,\n                setTooltipId,\n                size,\n                sizeClassName: sizeToClassNameMap[size],\n                tooltipId,\n            }}\n        >\n            <div className={classSMSField} {...htmlDivAttributes} data-tx={process.env.npm_package_version}>\n                {children}\n            </div>\n        </SMSFieldContext.Provider>\n    );\n};\n\nSMSField.displayName = \"SMSField\";\nSMSField.Tooltip = SMSFieldTooltip;\nSMSField.Refresh = SMSFieldRefresh;\nSMSField.Input = SMSFieldInput;\nSMSField.Submit = SMSFieldSubmit;\n"],"names":[],"mappings":";;;;;;;;;;AAYA,MAAM,qBAAqB,yBAAyB,MAAM;AAWnD,MAAM,WAA4D,CAAC,UAAU;AAChF,QAAM,EAAE,UAAU,WAAW,MAAM,UAAU,OAAO,cAAc,cAAc,MAAM,GAAG,kBAAA,IACrF;AAEJ,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,IAAI;AACzD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAA;AAClC,QAAM,gBAAgB,KAAK,OAAO,UAAU,SAAS;AAErD,SACI;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACG,OAAO;AAAA,QACH;AAAA,QACA,UAAU,CAAC,CAAC;AAAA,QACZ;AAAA,QACA,OAAO,CAAC,CAAC;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe,mBAAmB,IAAI;AAAA,QACtC;AAAA,MAAA;AAAA,MAGJ,UAAA,oBAAC,OAAA,EAAI,WAAW,eAAgB,GAAG,mBAAmB,WAAS,UAC1D,SAAA,CACL;AAAA,IAAA;AAAA,EAAA;AAGZ;AAEA,SAAS,cAAc;AACvB,SAAS,UAAU;AACnB,SAAS,UAAU;AACnB,SAAS,QAAQ;AACjB,SAAS,SAAS;"}
+{"version":3,"file":"SMSField.js","sources":["../../../src/components/SMSField/SMSField.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useState } from \"react\";\nimport { EFormFieldStatus } from \"@sberbusiness/triplex-next/components/FormField\";\nimport { SMSFieldContext } from \"@sberbusiness/triplex-next/components/SMSField/SMSFieldContext\";\nimport { ISMSFieldProps } from \"@sberbusiness/triplex-next/components/SMSField/types\";\nimport { SMSFieldInput } from \"@sberbusiness/triplex-next/components/SMSField/components/SMSFieldInput\";\nimport { SMSFieldRefresh } from \"@sberbusiness/triplex-next/components/SMSField/components/SMSFieldRefresh\";\nimport { SMSFieldSubmit } from \"@sberbusiness/triplex-next/components/SMSField/components/SMSFieldSubmit\";\nimport { SMSFieldTooltip } from \"@sberbusiness/triplex-next/components/SMSField/components/SMSFieldTooltip\";\nimport styles from \"@sberbusiness/triplex-next/components/SMSField/styles/SMSField.module.less\";\nimport { createSizeToClassNameMap } from \"@sberbusiness/triplex-next/utils/classNameMaps\";\n\n// Соответствие размера имени класса.\nconst sizeToClassNameMap = createSizeToClassNameMap(styles);\n\n/** Внутренние составляющие SMSField. */\ninterface ISMSFieldComposition {\n    Tooltip: typeof SMSFieldTooltip;\n    Refresh: typeof SMSFieldRefresh;\n    Input: typeof SMSFieldInput;\n    Submit: typeof SMSFieldSubmit;\n}\n\n/** Компонент для ввода СМС. */\nexport const SMSField: React.FC<ISMSFieldProps> & ISMSFieldComposition = (props) => {\n    const {\n        children,\n        className,\n        code,\n        onChangeCode,\n        onSubmitCode,\n        size,\n        status = EFormFieldStatus.DEFAULT,\n        ...htmlDivAttributes\n    } = props;\n\n    const [disabledSubmit, setDisabledSubmit] = useState(true);\n    const [tooltipId, setTooltipId] = useState<string>();\n    const classSMSField = clsx(styles.smsField, className);\n\n    return (\n        <SMSFieldContext.Provider\n            value={{\n                code,\n                disabledSubmit,\n                onChangeCode,\n                onSubmitCode,\n                setDisabledSubmit,\n                setTooltipId,\n                size,\n                sizeClassName: sizeToClassNameMap[size],\n                status,\n                tooltipId,\n            }}\n        >\n            <div className={classSMSField} {...htmlDivAttributes} data-tx={process.env.npm_package_version}>\n                {children}\n            </div>\n        </SMSFieldContext.Provider>\n    );\n};\n\nSMSField.displayName = \"SMSField\";\nSMSField.Tooltip = SMSFieldTooltip;\nSMSField.Refresh = SMSFieldRefresh;\nSMSField.Input = SMSFieldInput;\nSMSField.Submit = SMSFieldSubmit;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAaA,MAAM,qBAAqB,yBAAyB,MAAM;AAWnD,MAAM,WAA4D,CAAC,UAAU;AAChF,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS,iBAAiB;AAAA,IAC1B,GAAG;AAAA,EAAA,IACH;AAEJ,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,IAAI;AACzD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAA;AAClC,QAAM,gBAAgB,KAAK,OAAO,UAAU,SAAS;AAErD,SACI;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACG,OAAO;AAAA,QACH;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe,mBAAmB,IAAI;AAAA,QACtC;AAAA,QACA;AAAA,MAAA;AAAA,MAGJ,UAAA,oBAAC,OAAA,EAAI,WAAW,eAAgB,GAAG,mBAAmB,WAAS,UAC1D,SAAA,CACL;AAAA,IAAA;AAAA,EAAA;AAGZ;AAEA,SAAS,cAAc;AACvB,SAAS,UAAU;AACnB,SAAS,UAAU;AACnB,SAAS,QAAQ;AACjB,SAAS,SAAS;"}

package/components/SMSField/SMSFieldContext.js

@@ -1,10 +1,20 @@
 import React__default from "react";
+import { EFormFieldStatus } from "../FormField/enums.js";
+import "../FormField/components/FormFieldClear.js";
+import "../FormField/components/FormFieldCounter.js";
+import "../FormField/components/FormFieldDescription.js";
+import "../FormField/components/FormFieldInput.js";
+import "../FormField/components/FormFieldLabel.js";
+import "../FormField/components/FormFieldMaskedInput.js";
+import "../FormField/components/FormFieldPostfix.js";
+import "../FormField/components/FormFieldPrefix.js";
+import "../FormField/components/FormFieldTarget.js";
+import "../FormField/components/FormFieldTextarea.js";
+import "../FormField/FormField.js";
 import { EComponentSize } from "../../enums/EComponentSize.js";
 const contextInitial = {
   code: "",
-  disabled: false,
   disabledSubmit: true,
-  error: false,
   onChangeCode: () => {
   },
   onSubmitCode: () => {
@@ -15,6 +25,7 @@ const contextInitial = {
   },
   size: EComponentSize.LG,
   sizeClassName: "",
+  status: EFormFieldStatus.DEFAULT,
   tooltipId: void 0
 };
 const SMSFieldContext = React__default.createContext(contextInitial);

package/components/SMSField/SMSFieldContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"SMSFieldContext.js","sources":["../../../src/components/SMSField/SMSFieldContext.ts"],"sourcesContent":["import React from \"react\";\nimport { EComponentSize } from \"@sberbusiness/triplex-next/enums/EComponentSize\";\n\nexport interface ISMSFieldContext {\n    /** Значение кода. */\n    code: string;\n    /** Признак блокировки компонента. */\n    disabled: boolean;\n    /** Отключённое состояние кнопки Submit. */\n    disabledSubmit: boolean;\n    /** Признак наличия ошибки. */\n    error: boolean;\n    /** Обработчик изменения кода. */\n    onChangeCode: (code: string) => void;\n    /** Обработчик отправки кода. */\n    onSubmitCode: (code: string) => void;\n    /** Установить отключённое состояние кнопки Submit. */\n    setDisabledSubmit: (disabled: boolean) => void;\n    /** Установить уникальный идентификатор Tooltip. */\n    setTooltipId: (id: string) => void;\n    /** Размер поля. */\n    size: EComponentSize;\n    /** CSS класс размера. */\n    sizeClassName: string;\n    /** Уникальный идентификатор Tooltip. */\n    tooltipId?: string;\n}\n\nconst contextInitial: ISMSFieldContext = {\n    code: \"\",\n    disabled: false,\n    disabledSubmit: true,\n    error: false,\n    onChangeCode: () => {},\n    onSubmitCode: () => {},\n    setDisabledSubmit: () => {},\n    setTooltipId: () => {},\n    size: EComponentSize.LG,\n    sizeClassName: \"\",\n    tooltipId: undefined,\n};\n\nexport const SMSFieldContext = React.createContext(contextInitial);\n"],"names":["React"],"mappings":";;AA4BA,MAAM,iBAAmC;AAAA,EACrC,MAAM;AAAA,EACN,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,OAAO;AAAA,EACP,cAAc,MAAM;AAAA,EAAC;AAAA,EACrB,cAAc,MAAM;AAAA,EAAC;AAAA,EACrB,mBAAmB,MAAM;AAAA,EAAC;AAAA,EAC1B,cAAc,MAAM;AAAA,EAAC;AAAA,EACrB,MAAM,eAAe;AAAA,EACrB,eAAe;AAAA,EACf,WAAW;AACf;AAEO,MAAM,kBAAkBA,eAAM,cAAc,cAAc;"}
+{"version":3,"file":"SMSFieldContext.js","sources":["../../../src/components/SMSField/SMSFieldContext.ts"],"sourcesContent":["import React from \"react\";\nimport { EFormFieldStatus } from \"@sberbusiness/triplex-next/components/FormField\";\nimport { EComponentSize } from \"@sberbusiness/triplex-next/enums/EComponentSize\";\n\nexport interface ISMSFieldContext {\n    /** Значение кода. */\n    code: string;\n    /** Отключённое состояние кнопки Submit. */\n    disabledSubmit: boolean;\n    /** Обработчик изменения кода. */\n    onChangeCode: (code: string) => void;\n    /** Обработчик отправки кода. */\n    onSubmitCode: (code: string) => void;\n    /** Установить отключённое состояние кнопки Submit. */\n    setDisabledSubmit: (disabled: boolean) => void;\n    /** Установить уникальный идентификатор Tooltip. */\n    setTooltipId: (id: string) => void;\n    /** Размер поля. */\n    size: EComponentSize;\n    /** CSS класс размера. */\n    sizeClassName: string;\n    /** Визуальное состояние компонента. */\n    status: Exclude<EFormFieldStatus, EFormFieldStatus.WARNING>;\n    /** Уникальный идентификатор Tooltip. */\n    tooltipId?: string;\n}\n\nconst contextInitial: ISMSFieldContext = {\n    code: \"\",\n    disabledSubmit: true,\n    onChangeCode: () => {},\n    onSubmitCode: () => {},\n    setDisabledSubmit: () => {},\n    setTooltipId: () => {},\n    size: EComponentSize.LG,\n    sizeClassName: \"\",\n    status: EFormFieldStatus.DEFAULT,\n    tooltipId: undefined,\n};\n\nexport const SMSFieldContext = React.createContext(contextInitial);\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;AA2BA,MAAM,iBAAmC;AAAA,EACrC,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,cAAc,MAAM;AAAA,EAAC;AAAA,EACrB,cAAc,MAAM;AAAA,EAAC;AAAA,EACrB,mBAAmB,MAAM;AAAA,EAAC;AAAA,EAC1B,cAAc,MAAM;AAAA,EAAC;AAAA,EACrB,MAAM,eAAe;AAAA,EACrB,eAAe;AAAA,EACf,QAAQ,iBAAiB;AAAA,EACzB,WAAW;AACf;AAEO,MAAM,kBAAkBA,eAAM,cAAc,cAAc;"}

package/components/SMSField/components/RefreshIcon.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { c as clsx } from "../../../chunks/vendor-D4wvHis9.js";
-import { s as styles } from "../../../chunks/SMSField.module-DHnJVbUI.js";
+import { s as styles } from "../../../chunks/SMSField.module-CGuPONeF.js";
 import { EComponentSize } from "../../../enums/EComponentSize.js";
 const iconPath = "M2 10c0-4.42 3.58-8 8-8 2.52 0 4.77 1.16 6.24 3H13.5c-.56 0-1 .44-1 1 0 .55.44 1 1 1h5c.55 0 1-.45 1-1V1c0-.56-.45-1-1-1-.56 0-1 .44-1 1v2.38A10.02 10.02 0 0 0 10 0C4.47 0 0 4.47 0 10c0 5.52 4.47 10 10 10 5.52 0 10-4.48 10-10 0-.56-.45-1-1-1-.56 0-1 .44-1 1 0 4.41-3.59 8-8 8-4.42 0-8-3.59-8-8";
 const bigIconPath = "M27 16c0 .81-.09 1.61-.27 2.39a10.9 10.9 0 0 1-1.54 3.65c-.41.62-.88 1.2-1.42 1.73-.53.54-1.11 1.01-1.73 1.42a10.906 10.906 0 0 1-3.65 1.54c-.78.18-1.58.27-2.39.27q-1.23 0-2.4-.27a10.9 10.9 0 0 1-3.65-1.54c-.62-.41-1.2-.88-1.73-1.42-.54-.53-1.01-1.11-1.42-1.73a10.906 10.906 0 0 1-1.54-3.65C5.08 17.61 5 16.81 5 16c0-.82.08-1.62.26-2.4A10.9 10.9 0 0 1 6.8 9.95c.41-.62.88-1.2 1.42-1.73.53-.54 1.11-1.01 1.73-1.42a10.906 10.906 0 0 1 3.65-1.54C14.38 5.08 15.18 5 16 5a11.1 11.1 0 0 1 2.93.39c.44.12.86.27 1.27.44.47.19.93.42 1.37.68.39.23.75.47 1.1.74.4.31.78.64 1.14 1 .06.06.12.13.19.2V6c0-.57.44-1 1-1s1 .43 1 1v5c0 .66-.34 1-1 1h-5c-.56 0-1-.44-1-1 0-.57.44-1 1-1h2.7c-.1-.12-.21-.23-.31-.34-.3-.3-.61-.58-.95-.83-.28-.21-.57-.41-.88-.59a8.753 8.753 0 0 0-3-1.11C17.05 7.04 16.53 7 16 7c-.69 0-1.35.07-2 .22-.52.11-1.02.27-1.51.48-.5.21-.97.47-1.42.76a9 9 0 0 0-2.61 2.61c-.29.45-.55.92-.76 1.42-.21.49-.37.99-.48 1.51A8.8 8.8 0 0 0 7 16c0 .68.07 1.34.22 1.99.11.52.27 1.02.48 1.51.21.5.47.97.76 1.42q.51.78 1.17 1.44c.45.44.92.83 1.44 1.17.45.29.92.55 1.42.76.49.21.99.37 1.51.48a8.803 8.803 0 0 0 3.99 0c.52-.11 1.02-.27 1.51-.48.5-.21.97-.47 1.42-.76a9 9 0 0 0 2.61-2.61c.29-.45.55-.92.76-1.42.21-.49.37-.99.48-1.51.15-.65.23-1.31.23-1.99 0-.57.44-1 1-1s1 .43 1 1";

package/components/SMSField/components/SMSFieldInput.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { c as clsx } from "../../../chunks/vendor-D4wvHis9.js";
-import React__default, { useContext } from "react";
+import React__default, { useContext, useState } from "react";
 import { EFormFieldStatus } from "../../FormField/enums.js";
 import "../../FormField/components/FormFieldClear.js";
 import { FormFieldCounter } from "../../FormField/components/FormFieldCounter.js";
@@ -15,30 +15,33 @@ import "../../FormField/components/FormFieldTextarea.js";
 import { FormField } from "../../FormField/FormField.js";
 import { FormGroup } from "../../FormGroup/FormGroup.js";
 import { SMSFieldContext } from "../SMSFieldContext.js";
-import { s as styles } from "../../../chunks/SMSField.module-DHnJVbUI.js";
+import { s as styles } from "../../../chunks/SMSField.module-CGuPONeF.js";
 import { EVENT_KEY_CODES } from "../../../utils/keyboard.js";
 const regExp = new RegExp(/^[0-9]*$/);
 const SMSFieldInput = React__default.forwardRef(
-  ({ className, counter, description, disabled, maxLength = 8, onChange, onKeyDown, placeholder, ...restProps }, ref) => {
-    const {
-      code,
-      disabled: allDisabled,
-      disabledSubmit,
-      error,
-      onChangeCode,
-      onSubmitCode,
-      size,
-      sizeClassName
-    } = useContext(SMSFieldContext);
-    const inputDisabled = allDisabled || disabled;
-    const inputClassName = clsx(styles.input, sizeClassName, className);
-    let status = EFormFieldStatus.DEFAULT;
-    if (inputDisabled) {
-      status = EFormFieldStatus.DISABLED;
-    }
-    if (error) {
-      status = EFormFieldStatus.ERROR;
-    }
+  ({
+    className,
+    counter,
+    description,
+    errorText,
+    maxLength = 8,
+    onBlur,
+    onChange,
+    onFocus,
+    onKeyDown,
+    placeholder,
+    ...restProps
+  }, ref) => {
+    const { code, disabledSubmit, onChangeCode, onSubmitCode, size, sizeClassName, status } = useContext(SMSFieldContext);
+    const [focused, setFocused] = useState(false);
+    const error = status === EFormFieldStatus.ERROR;
+    const showErrorText = error && !focused && Boolean(errorText);
+    const inputClassName = clsx(
+      styles.input,
+      sizeClassName,
+      { [styles.errorPlaceholder]: showErrorText },
+      className
+    );
     const handleChange = (e) => {
       const value = e.target.value;
       if (!regExp.test(value)) {
@@ -47,6 +50,14 @@ const SMSFieldInput = React__default.forwardRef(
       onChangeCode(value);
       onChange == null ? void 0 : onChange(e);
     };
+    const handleFocus = (e) => {
+      setFocused(true);
+      onFocus == null ? void 0 : onFocus(e);
+    };
+    const handleBlur = (e) => {
+      setFocused(false);
+      onBlur == null ? void 0 : onBlur(e);
+    };
     const handleKeyDown = (e) => {
       if (e.keyCode === EVENT_KEY_CODES.ENTER && !disabledSubmit) {
         onSubmitCode(code);
@@ -60,11 +71,14 @@ const SMSFieldInput = React__default.forwardRef(
           autoComplete: "off",
           className: inputClassName,
           maxLength,
+          onBlur: handleBlur,
           onChange: handleChange,
-          placeholder,
+          onFocus: handleFocus,
+          placeholder: showErrorText ? errorText : placeholder,
           ref,
           value: code,
-          ...restProps
+          ...restProps,
+          "aria-invalid": error || void 0
         }
       ) }),
       description || counter ? /* @__PURE__ */ jsxs(FormFieldDescription, { children: [