@sberbusiness/triplex-next 1.44.0 → 1.45.0

package/components/AmountField/AmountField.js

@@ -1,5 +1,6 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import React__default, { useRef, useLayoutEffect } from "react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React__default, { useRef, useLayoutEffect, useMemo } from "react";
+import { c as clsx } from "../../chunks/vendor-D4wvHis9.js";
 import { TextFieldBase } from "../TextField/TextFieldBase.js";
 import { EFormFieldStatus } from "../FormField/enums.js";
 import { FormFieldClear } from "../FormField/components/FormFieldClear.js";
@@ -13,24 +14,49 @@ import "../FormField/components/FormFieldPrefix.js";
 import "../FormField/components/FormFieldTarget.js";
 import "../FormField/components/FormFieldTextarea.js";
 import "../FormField/FormField.js";
-import { EFontType, ETextSize } from "../Typography/enums.js";
-import "../Typography/Caption.js";
-import "../Typography/CodeText.js";
-import { Text } from "../Typography/Text.js";
-import "../Typography/Title.js";
 import { AmountBaseInputCore } from "./AmountBaseInputCore.js";
+import { createSizeToClassNameMap } from "../../utils/classNameMaps.js";
 import { setCaretPosition } from "../../utils/inputUtils.js";
 import { createPlaceholder, setFallbackCaret } from "./utils.js";
+import { EComponentSize } from "../../enums/EComponentSize.js";
+const amountFieldInputWrapper = "amountFieldInputWrapper__613bdf36";
+const currencyLayout = "currencyLayout__1a546e08";
+const sm = "sm__6416d6a0";
+const md = "md__71f0af23";
+const lg = "lg__a41c8d8d";
+const valueMirror = "valueMirror__2f660d3b";
+const currencyUnit = "currencyUnit__54b9d0c7";
+const disabled = "disabled__033fdae2";
+const styles = {
+  amountFieldInputWrapper,
+  currencyLayout,
+  sm,
+  md,
+  lg,
+  valueMirror,
+  currencyUnit,
+  disabled
+};
+const SIZE_TO_CLASS_NAME_MAP = createSizeToClassNameMap(styles);
 const AmountField = React__default.forwardRef(
-  ({ inputProps, currency, postfix, maxIntegerDigits = 16, fractionDigits = 2, onClear, ...restProps }, ref) => {
+  ({
+    size = EComponentSize.LG,
+    postfix,
+    inputProps,
+    currency,
+    maxIntegerDigits = 16,
+    fractionDigits = 2,
+    onClear,
+    ...restProps
+  }, ref) => {
     const { status, "data-test-id": dataTestId } = restProps;
     const placeholder = inputProps.placeholder || createPlaceholder(fractionDigits);
-    const refInput = useRef(null);
+    const inputRef = useRef(null);
     const core = useRef();
     if (core.current === void 0) core.current = new AmountBaseInputCore(maxIntegerDigits, fractionDigits);
     useLayoutEffect(() => {
-      if (core.current && refInput.current == document.activeElement)
-        setCaretPosition(refInput.current, Math.max(core.current.caret, 0));
+      if (core.current && inputRef.current == document.activeElement)
+        setCaretPosition(inputRef.current, Math.max(core.current.caret, 0));
     }, [inputProps.value]);
     const getFormattedValue = () => {
       if (!core.current) return "";
@@ -42,6 +68,7 @@ const AmountField = React__default.forwardRef(
       core.current.cache.formattedValue = core.current.formattedValue;
       return core.current.formattedValue;
     };
+    const formattedValue = getFormattedValue();
     const handleChange = (event) => {
       if (!core.current) return;
       const caret = event.target.selectionStart ?? event.target.value.length;
@@ -64,48 +91,62 @@ const AmountField = React__default.forwardRef(
       core.current.cache.selectionDirection = event.currentTarget.selectionDirection;
       (_a = inputProps.onSelect) == null ? void 0 : _a.call(inputProps, event);
     };
-    const setRef = (instance) => {
-      refInput.current = instance;
-      if (typeof ref === "function") {
-        ref(instance);
-      } else if (ref) {
-        ref.current = instance;
+    const mergedInputRef = useMemo(() => {
+      const externalRef = inputProps.ref;
+      if (externalRef === void 0) {
+        return (instance) => {
+          inputRef.current = instance;
+        };
       }
-    };
-    return /* @__PURE__ */ jsx(
-      TextFieldBase,
-      {
-        postfix: /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
-          onClear !== void 0 && /* @__PURE__ */ jsx(FormFieldClear, { onClick: onClear }),
-          currency !== void 0 && /* @__PURE__ */ jsx(
-            Text,
-            {
-              size: ETextSize.B2,
-              type: status !== EFormFieldStatus.DISABLED ? EFontType.SECONDARY : EFontType.DISABLED,
-              "data-test-id": dataTestId && `${dataTestId}__unit`,
-              children: currency
-            }
-          ),
+      return (instance) => {
+        inputRef.current = instance;
+        if (typeof externalRef === "function") {
+          externalRef(instance);
+        } else {
+          externalRef.current = instance;
+        }
+      };
+    }, [inputProps.ref]);
+    const renderPostfix = () => {
+      if (onClear !== void 0) {
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(FormFieldClear, { onClick: onClear }),
           postfix
-        ] }),
-        ...restProps,
-        children: /* @__PURE__ */ jsx(
-          FormFieldInput,
+        ] });
+      }
+      return postfix;
+    };
+    const showCurrency = currency !== void 0 && formattedValue.length > 0;
+    return /* @__PURE__ */ jsx(TextFieldBase, { size, postfix: renderPostfix(), ...restProps, ref, children: /* @__PURE__ */ jsxs("div", { className: styles.amountFieldInputWrapper, children: [
+      showCurrency && /* @__PURE__ */ jsxs("div", { className: clsx(styles.currencyLayout, SIZE_TO_CLASS_NAME_MAP[size]), children: [
+        /* @__PURE__ */ jsx("span", { className: styles.valueMirror, "aria-hidden": "true", children: `${formattedValue} ` }),
+        /* @__PURE__ */ jsx(
+          "span",
           {
-            ...inputProps,
-            value: getFormattedValue(),
-            placeholder,
-            autoComplete: "off",
-            inputMode: "decimal",
-            "data-test-id": dataTestId && `${dataTestId}__input`,
-            onKeyDown: handleKeyDown,
-            onSelect: handleSelect,
-            onChange: handleChange,
-            ref: setRef
+            className: clsx(styles.currencyUnit, {
+              [styles.disabled]: status === EFormFieldStatus.DISABLED
+            }),
+            "data-test-id": dataTestId && `${dataTestId}__unit`,
+            children: currency
           }
         )
-      }
-    );
+      ] }),
+      /* @__PURE__ */ jsx(
+        FormFieldInput,
+        {
+          ...inputProps,
+          value: formattedValue,
+          placeholder,
+          autoComplete: "off",
+          inputMode: "decimal",
+          "data-test-id": dataTestId && `${dataTestId}__input`,
+          onKeyDown: handleKeyDown,
+          onSelect: handleSelect,
+          onChange: handleChange,
+          ref: mergedInputRef
+        }
+      )
+    ] }) });
   }
 );
 export {

package/components/AmountField/AmountField.js.map

@@ -1 +1 @@
-{"version":3,"file":"AmountField.js","sources":["../../../src/components/AmountField/AmountField.tsx"],"sourcesContent":["import React, { useLayoutEffect, useRef } from \"react\";\nimport { TextFieldBase, ITextFieldBaseProps } from \"../TextField/TextFieldBase\";\nimport { FormFieldInput, IFormFieldInputProps, EFormFieldStatus } from \"../FormField\";\nimport { FormFieldClear } from \"../FormField/components/FormFieldClear\";\nimport { Text, ETextSize, EFontType } from \"../Typography\";\nimport { AmountBaseInputCore } from \"./AmountBaseInputCore\";\nimport { setCaretPosition } from \"../../utils/inputUtils\";\nimport { createPlaceholder, setFallbackCaret } from \"./utils\";\n\nexport interface IAmountFieldProps extends Omit<ITextFieldBaseProps, \"children\"> {\n    /** Свойства поля ввода. */\n    inputProps: Omit<IFormFieldInputProps, \"type\" | \"maxLength\" | \"onChange\" | \"inputMode\" | \"autoComplete\"> & {\n        /** Значение. */\n        value: string;\n        /** Обработчик изменения значения. */\n        onChange: (value: string) => void;\n    };\n    /** Наименование валюты. */\n    currency?: string;\n    /** Максимальное количество знаков перед запятой. */\n    maxIntegerDigits?: number;\n    /** Количество знаков после запятой. */\n    fractionDigits?: number;\n    /** Обработчик очищения значения. */\n    onClear?: () => void;\n}\n\nexport const AmountField = React.forwardRef<HTMLInputElement, IAmountFieldProps>(\n    ({ inputProps, currency, postfix, maxIntegerDigits = 16, fractionDigits = 2, onClear, ...restProps }, ref) => {\n        const { status, \"data-test-id\": dataTestId } = restProps;\n        const placeholder = inputProps.placeholder || createPlaceholder(fractionDigits);\n\n        const refInput = useRef<HTMLInputElement | null>(null);\n        const core = useRef<AmountBaseInputCore>();\n        if (core.current === undefined) core.current = new AmountBaseInputCore(maxIntegerDigits, fractionDigits);\n\n        useLayoutEffect(() => {\n            if (core.current && refInput.current == document.activeElement)\n                setCaretPosition(refInput.current, Math.max(core.current.caret, 0));\n        }, [inputProps.value]);\n\n        /** Функция, возвращающая отформатированное значение. */\n        const getFormattedValue = () => {\n            if (!core.current) return \"\";\n\n            if (\n                inputProps.value != core.current.value ||\n                maxIntegerDigits != core.current.maxIntegerDigits ||\n                fractionDigits != core.current.fractionDigits\n            ) {\n                core.current.maxIntegerDigits = maxIntegerDigits;\n                core.current.fractionDigits = fractionDigits;\n                core.current.apply(inputProps.value, inputProps.value.length);\n            }\n\n            core.current.cache.formattedValue = core.current.formattedValue;\n\n            return core.current.formattedValue;\n        };\n\n        /** Обработчик изменения значения. */\n        const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n            if (!core.current) return;\n\n            const caret = event.target.selectionStart ?? event.target.value.length;\n\n            core.current.apply(event.target.value, caret);\n\n            setFallbackCaret(event.target, core.current, fractionDigits);\n\n            inputProps.onChange(core.current.value);\n        };\n\n        /** Обработчик нажатия клавиши. */\n        const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n            if (!core.current) return;\n\n            core.current.cache.key = event.key;\n\n            inputProps.onKeyDown?.(event);\n        };\n\n        /** Обработчик выбора текста. */\n        const handleSelect = (event: React.SyntheticEvent<HTMLInputElement>) => {\n            if (!core.current) return;\n\n            core.current.cache.key = \"\";\n            core.current.cache.selectionStart = event.currentTarget.selectionStart;\n            core.current.cache.selectionEnd = event.currentTarget.selectionEnd;\n            core.current.cache.selectionDirection = event.currentTarget.selectionDirection;\n\n            inputProps.onSelect?.(event);\n        };\n\n        /** Функция для хранения ссылки. */\n        const setRef = (instance: HTMLInputElement | null) => {\n            refInput.current = instance;\n\n            if (typeof ref === \"function\") {\n                ref(instance);\n            } else if (ref) {\n                ref.current = instance;\n            }\n        };\n\n        return (\n            <TextFieldBase\n                postfix={\n                    <React.Fragment>\n                        {onClear !== undefined && <FormFieldClear onClick={onClear} />}\n                        {currency !== undefined && (\n                            <Text\n                                size={ETextSize.B2}\n                                type={status !== EFormFieldStatus.DISABLED ? EFontType.SECONDARY : EFontType.DISABLED}\n                                data-test-id={dataTestId && `${dataTestId}__unit`}\n                            >\n                                {currency}\n                            </Text>\n                        )}\n                        {postfix}\n                    </React.Fragment>\n                }\n                {...restProps}\n            >\n                <FormFieldInput\n                    {...inputProps}\n                    // eslint-disable-next-line react-hooks/refs\n                    value={getFormattedValue()}\n                    placeholder={placeholder}\n                    autoComplete=\"off\"\n                    inputMode=\"decimal\"\n                    data-test-id={dataTestId && `${dataTestId}__input`}\n                    onKeyDown={handleKeyDown}\n                    onSelect={handleSelect}\n                    onChange={handleChange}\n                    ref={setRef}\n                />\n            </TextFieldBase>\n        );\n    },\n);\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"AmountField.js","sources":["../../../src/components/AmountField/AmountField.tsx"],"sourcesContent":["import React, { useRef, useLayoutEffect, useMemo } from \"react\";\nimport clsx from \"clsx\";\nimport { TextFieldBase, ITextFieldBaseProps } from \"../TextField/TextFieldBase\";\nimport { FormFieldInput, IFormFieldInputProps, EFormFieldStatus } from \"../FormField\";\nimport { FormFieldClear } from \"../FormField/components/FormFieldClear\";\nimport { AmountBaseInputCore } from \"./AmountBaseInputCore\";\nimport { setCaretPosition, createSizeToClassNameMap } from \"../../utils\";\nimport { createPlaceholder, setFallbackCaret } from \"./utils\";\nimport { EComponentSize } from \"../../enums\";\nimport styles from \"./styles/AmountField.module.less\";\n\n/** Свойства компонента AmountField. */\nexport interface IAmountFieldProps extends Omit<ITextFieldBaseProps, \"children\"> {\n    /** Свойства поля ввода. */\n    inputProps: Omit<IFormFieldInputProps, \"type\" | \"maxLength\" | \"onChange\" | \"inputMode\" | \"autoComplete\"> & {\n        /** Значение. */\n        value: string;\n        /** Обработчик изменения значения. */\n        onChange: (value: string) => void;\n        /** Ссылка на HTML-элемент поля ввода. */\n        ref?: React.Ref<HTMLInputElement>;\n    };\n    /** Наименование валюты. */\n    currency?: string;\n    /** Максимальное количество знаков перед запятой. */\n    maxIntegerDigits?: number;\n    /** Количество знаков после запятой. */\n    fractionDigits?: number;\n    /** Обработчик очищения значения. */\n    onClear?: () => void;\n}\n\n/** Соответствие размера имени класса. */\nconst SIZE_TO_CLASS_NAME_MAP = createSizeToClassNameMap(styles);\n\nexport const AmountField = React.forwardRef<HTMLDivElement, IAmountFieldProps>(\n    (\n        {\n            size = EComponentSize.LG,\n            postfix,\n            inputProps,\n            currency,\n            maxIntegerDigits = 16,\n            fractionDigits = 2,\n            onClear,\n            ...restProps\n        },\n        ref,\n    ) => {\n        const { status, \"data-test-id\": dataTestId } = restProps;\n        const placeholder = inputProps.placeholder || createPlaceholder(fractionDigits);\n\n        const inputRef = useRef<HTMLInputElement | null>(null);\n        const core = useRef<AmountBaseInputCore>();\n        if (core.current === undefined) core.current = new AmountBaseInputCore(maxIntegerDigits, fractionDigits);\n\n        useLayoutEffect(() => {\n            if (core.current && inputRef.current == document.activeElement)\n                setCaretPosition(inputRef.current, Math.max(core.current.caret, 0));\n        }, [inputProps.value]);\n\n        /** Функция, возвращающая отформатированное значение. */\n        const getFormattedValue = () => {\n            if (!core.current) return \"\";\n\n            if (\n                inputProps.value != core.current.value ||\n                maxIntegerDigits != core.current.maxIntegerDigits ||\n                fractionDigits != core.current.fractionDigits\n            ) {\n                core.current.maxIntegerDigits = maxIntegerDigits;\n                core.current.fractionDigits = fractionDigits;\n                core.current.apply(inputProps.value, inputProps.value.length);\n            }\n\n            core.current.cache.formattedValue = core.current.formattedValue;\n\n            return core.current.formattedValue;\n        };\n\n        const formattedValue = getFormattedValue();\n\n        /** Обработчик изменения значения. */\n        const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n            if (!core.current) return;\n\n            const caret = event.target.selectionStart ?? event.target.value.length;\n\n            core.current.apply(event.target.value, caret);\n\n            setFallbackCaret(event.target, core.current, fractionDigits);\n\n            inputProps.onChange(core.current.value);\n        };\n\n        /** Обработчик нажатия клавиши. */\n        const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n            if (!core.current) return;\n\n            core.current.cache.key = event.key;\n\n            inputProps.onKeyDown?.(event);\n        };\n\n        /** Обработчик выбора текста. */\n        const handleSelect = (event: React.SyntheticEvent<HTMLInputElement>) => {\n            if (!core.current) return;\n\n            core.current.cache.key = \"\";\n            core.current.cache.selectionStart = event.currentTarget.selectionStart;\n            core.current.cache.selectionEnd = event.currentTarget.selectionEnd;\n            core.current.cache.selectionDirection = event.currentTarget.selectionDirection;\n\n            inputProps.onSelect?.(event);\n        };\n\n        const mergedInputRef = useMemo(() => {\n            const externalRef = inputProps.ref;\n\n            if (externalRef === undefined) {\n                return (instance: HTMLInputElement | null) => {\n                    inputRef.current = instance;\n                };\n            }\n\n            return (instance: HTMLInputElement | null) => {\n                inputRef.current = instance;\n                if (typeof externalRef === \"function\") {\n                    externalRef(instance);\n                } else {\n                    (externalRef as React.MutableRefObject<HTMLInputElement | null>).current = instance;\n                }\n            };\n        }, [inputProps.ref]);\n\n        const renderPostfix = () => {\n            if (onClear !== undefined) {\n                return (\n                    <>\n                        <FormFieldClear onClick={onClear} />\n                        {postfix}\n                    </>\n                );\n            }\n            return postfix;\n        };\n\n        const showCurrency = currency !== undefined && formattedValue.length > 0;\n\n        return (\n            <TextFieldBase size={size} postfix={renderPostfix()} {...restProps} ref={ref}>\n                <div className={styles.amountFieldInputWrapper}>\n                    {showCurrency && (\n                        <div className={clsx(styles.currencyLayout, SIZE_TO_CLASS_NAME_MAP[size])}>\n                            <span className={styles.valueMirror} aria-hidden=\"true\">\n                                {`${formattedValue} `}\n                            </span>\n                            <span\n                                className={clsx(styles.currencyUnit, {\n                                    [styles.disabled]: status === EFormFieldStatus.DISABLED,\n                                })}\n                                data-test-id={dataTestId && `${dataTestId}__unit`}\n                            >\n                                {currency}\n                            </span>\n                        </div>\n                    )}\n                    <FormFieldInput\n                        {...inputProps}\n                        value={formattedValue}\n                        placeholder={placeholder}\n                        autoComplete=\"off\"\n                        inputMode=\"decimal\"\n                        data-test-id={dataTestId && `${dataTestId}__input`}\n                        onKeyDown={handleKeyDown}\n                        onSelect={handleSelect}\n                        onChange={handleChange}\n                        ref={mergedInputRef}\n                    />\n                </div>\n            </TextFieldBase>\n        );\n    },\n);\n"],"names":["React"],"mappings":"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"}

package/components/Avatar/Avatar.js

@@ -2,19 +2,19 @@ import { EAvatarSize } from "./enums.js";
 import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import { c as clsx } from "../../chunks/vendor-D4wvHis9.js";
-const avatar = "avatar__e7fc7e53";
-const borderRadius6 = "borderRadius6__49651047";
-const borderRadius8 = "borderRadius8__5b36cb56";
-const borderRadius10 = "borderRadius10__05b2c8ae";
-const borderRadius12 = "borderRadius12__1ab94146";
-const borderRadius16 = "borderRadius16__f5e5d920";
-const xxs = "xxs__83af4a9b";
-const xs = "xs__408c61d6";
-const sm = "sm__259db1f5";
-const md = "md__61b8b91d";
-const lg = "lg__de37ca6f";
-const xl = "xl__d69f59b5";
-const xxl = "xxl__98867846";
+const avatar = "avatar__8a537c96";
+const borderRadius6 = "borderRadius6__a8ff7006";
+const borderRadius8 = "borderRadius8__8f38a0a3";
+const borderRadius10 = "borderRadius10__0bc3038a";
+const borderRadius12 = "borderRadius12__5bdcf8bb";
+const borderRadius16 = "borderRadius16__1d637e89";
+const xxs = "xxs__bac1a9ba";
+const xs = "xs__25a617b8";
+const sm = "sm__def5a40a";
+const md = "md__629e2cb4";
+const lg = "lg__b922fd9d";
+const xl = "xl__8e31eaac";
+const xxl = "xxl__59f3c605";
 const styles = {
   avatar,
   borderRadius6,

package/components/Badge/Badge.js

@@ -6,10 +6,10 @@ import { BadgeDot } from "./BadgeDot.js";
 import { BadgeContent } from "./components/BadgeContent.js";
 import { BadgePrefix } from "./components/BadgePrefix.js";
 import { BadgePostfix } from "./components/BadgePostfix.js";
-const badge = "badge__ea3d0e7f";
-const sm = "sm__4f673bba";
-const md = "md__5f912294";
-const lg = "lg__40eb51c0";
+const badge = "badge__57582445";
+const sm = "sm__7d0dc0b2";
+const md = "md__99c836e4";
+const lg = "lg__f7a60e19";
 const styles = {
   badge,
   sm,

package/components/Badge/BadgeDot.js

@@ -2,10 +2,10 @@ import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import { c as clsx } from "../../chunks/vendor-D4wvHis9.js";
 import { createSizeToClassNameMap } from "../../utils/classNameMaps.js";
-const badgeDot = "badgeDot__b7ec82af";
-const sm = "sm__4f673bba";
-const md = "md__5f912294";
-const lg = "lg__40eb51c0";
+const badgeDot = "badgeDot__b52fb5ac";
+const sm = "sm__7d0dc0b2";
+const md = "md__99c836e4";
+const lg = "lg__f7a60e19";
 const styles = {
   badgeDot,
   sm,

package/components/Badge/components/BadgeContent.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import { c as clsx } from "../../../chunks/vendor-D4wvHis9.js";
 import { createSizeToClassNameMap } from "../../../utils/classNameMaps.js";
-const badgeContent = "badgeContent__e48b1960";
-const sm = "sm__4f673bba";
-const md = "md__5f912294";
-const lg = "lg__40eb51c0";
-const noPaddingLeft = "noPaddingLeft__abee44c3";
-const noPaddingRight = "noPaddingRight__e0d0d72b";
+const badgeContent = "badgeContent__4eb95716";
+const sm = "sm__7d0dc0b2";
+const md = "md__99c836e4";
+const lg = "lg__f7a60e19";
+const noPaddingLeft = "noPaddingLeft__5da6a612";
+const noPaddingRight = "noPaddingRight__2b255c5a";
 const styles = {
   badgeContent,
   sm,

package/components/Badge/components/BadgePostfix.js

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

package/components/Badge/components/BadgePrefix.js

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

package/components/Body/Body.js

@@ -1,13 +1,13 @@
 import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import { c as clsx } from "../../chunks/vendor-D4wvHis9.js";
-const body = "body__1007c0bc";
-const bodyInner = "bodyInner__b3f53ad5";
+const body = "body__916ac0ce";
+const bodyInner = "bodyInner__c0e8a01c";
 const styles = {
   body,
   bodyInner
 };
-const Body = React__default.forwardRef(({ children, className, ...rest }, ref) => /* @__PURE__ */ jsx("div", { className: clsx(styles.body, className), ...rest, "data-tx": "1.44.0", ref, children: /* @__PURE__ */ jsx("div", { className: styles.bodyInner, children }) }));
+const Body = React__default.forwardRef(({ children, className, ...rest }, ref) => /* @__PURE__ */ jsx("div", { className: clsx(styles.body, className), ...rest, "data-tx": "1.45.0", ref, children: /* @__PURE__ */ jsx("div", { className: styles.bodyInner, children }) }));
 Body.displayName = "Body";
 export {
   Body

package/components/Button/Button.js

@@ -9,46 +9,46 @@ import { EButtonTheme } from "./enums.js";
 import { EComponentSize } from "../../enums/EComponentSize.js";
 import { IconWrapper } from "../IconWrapper/IconWrapper.js";
 import { createSizeToClassNameMap } from "../../utils/classNameMaps.js";
-const general = "general__9b8b5c66";
-const expanded$4 = "expanded__511d9538";
+const general = "general__28dcbd08";
+const expanded$4 = "expanded__8076252e";
 const generalStyles = {
   general,
   expanded: expanded$4
 };
-const secondary = "secondary__1e859460";
-const expanded$3 = "expanded__511d9538";
+const secondary = "secondary__d6916111";
+const expanded$3 = "expanded__8076252e";
 const secondaryStyles = {
   secondary,
   expanded: expanded$3
 };
-const secondaryLight = "secondaryLight__db14a74b";
-const expanded$2 = "expanded__511d9538";
+const secondaryLight = "secondaryLight__46372b7e";
+const expanded$2 = "expanded__8076252e";
 const secondaryLightStyles = {
   secondaryLight,
   expanded: expanded$2
 };
-const danger = "danger__e0e19aaa";
-const expanded$1 = "expanded__511d9538";
+const danger = "danger__1caa1869";
+const expanded$1 = "expanded__8076252e";
 const dangerStyles = {
   danger,
   expanded: expanded$1
 };
-const link = "link__8f208150";
-const expanded = "expanded__511d9538";
+const link = "link__ace3790f";
+const expanded = "expanded__8076252e";
 const linkStyles = {
   link,
   expanded
 };
-const button = "button__346ded96";
-const sm = "sm__2677eeb1";
-const icon = "icon__aa5c40ff";
-const md = "md__00724582";
-const lg = "lg__da86f767";
-const block = "block__b63b89f2";
-const content = "content__d73a02c0";
-const loading = "loading__2409f2f4";
-const loader = "loader__4d8b65e9";
-const hidden = "hidden__071c3e5b";
+const button = "button__ef57e984";
+const sm = "sm__d3759cc4";
+const icon = "icon__1b7b2e3d";
+const md = "md__0f05b0d0";
+const lg = "lg__ad073172";
+const block = "block__1ece85f2";
+const content = "content__160940eb";
+const loading = "loading__54c316c1";
+const loader = "loader__c50e4eb2";
+const hidden = "hidden__414722ca";
 const styles = {
   button,
   sm,

package/components/Button/ButtonBase.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 const ButtonBase = React__default.forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsx("button", { type: "button", ...props, "data-tx": "1.44.0", ref });
+  return /* @__PURE__ */ jsx("button", { type: "button", ...props, "data-tx": "1.45.0", ref });
 });
 ButtonBase.displayName = "ButtonBase";
 export {

package/components/Button/ButtonDropdown.js

@@ -10,7 +10,7 @@ import { isKey } from "../../utils/keyboard.js";
 import { DropdownListContext } from "../Dropdown/DropdownListContext.js";
 import "../Dropdown/desktop/DropdownDesktop.js";
 import { DropdownList } from "../Dropdown/desktop/DropdownList.js";
-import "../../chunks/DropdownListItem-DOjFvzKN.js";
+import "../../chunks/DropdownListItem-kMroiHoh.js";
 import { EDropdownAlignment, EDropdownWidth } from "../Dropdown/desktop/enums.js";
 import "../Dropdown/mobile/DropdownMobile.js";
 import { DropdownMobileBody } from "../Dropdown/mobile/DropdownMobileBody.js";
@@ -30,13 +30,13 @@ import "../Typography/Caption.js";
 import "../Typography/CodeText.js";
 import { Text } from "../Typography/Text.js";
 import "../Typography/Title.js";
-const buttonDropdown = "buttonDropdown__7225c33b";
-const block = "block__b63b89f2";
-const buttonDropdownTarget = "buttonDropdownTarget__beeeae1f";
-const dots = "dots__4884c97f";
-const caretIcon = "caretIcon__e11f6c51";
-const active = "active__28f38fb5";
-const buttonDropdownMenuItem = "buttonDropdownMenuItem__7856141c";
+const buttonDropdown = "buttonDropdown__ce618d19";
+const block = "block__1ece85f2";
+const buttonDropdownTarget = "buttonDropdownTarget__2e861efe";
+const dots = "dots__b4e530ee";
+const caretIcon = "caretIcon__d732e5f3";
+const active = "active__969600ee";
+const buttonDropdownMenuItem = "buttonDropdownMenuItem__ffa0f776";
 const styles = {
   buttonDropdown,
   block,

package/components/Button/ButtonDropdownExtended.js

@@ -1,70 +1,86 @@
 import { jsxs } from "react/jsx-runtime";
-import { useRef, useState, useCallback, useEffect } from "react";
+import React__default, { useRef, useCallback, useState, useEffect } from "react";
 import { Dropdown } from "../Dropdown/Dropdown.js";
 import { isKey } from "../../utils/keyboard.js";
 import { DropdownList } from "../Dropdown/desktop/DropdownList.js";
 import { c as clsx } from "../../chunks/vendor-D4wvHis9.js";
-const buttonDropdownExtended = "buttonDropdownExtended__c9a73e52";
-const buttonDropdownExtendedBlock = "buttonDropdownExtendedBlock__392d8418";
+const buttonDropdownExtended = "buttonDropdownExtended__c53f5d30";
+const buttonDropdownExtendedBlock = "buttonDropdownExtendedBlock__dc0085a2";
 const styles = {
   buttonDropdownExtended,
   buttonDropdownExtendedBlock
 };
-const ButtonDropdownExtended = (props) => {
-  const { className, opened, setOpened, renderButton, renderDropdown, dropdownRef, closeOnTab, ...rest } = props;
-  const containerRef = useRef(null);
-  const [isControlled] = useState(() => opened !== void 0);
-  const [uncontrolledOpened, setUncontrolledOpened] = useState(false);
-  const computedOpened = isControlled ? !!opened : uncontrolledOpened;
-  const handleOpenedChange = useCallback(
-    (nextOpened) => {
-      if (isControlled) {
-        setOpened == null ? void 0 : setOpened(nextOpened);
+const ButtonDropdownExtended = Object.assign(
+  React__default.forwardRef(function ButtonDropdownExtended2(props, ref) {
+    const { className, opened, setOpened, renderButton, renderDropdown, dropdownRef, closeOnTab, ...rest } = props;
+    const containerRef = useRef(null);
+    const setContainerRef = useCallback(
+      (instance) => {
+        containerRef.current = instance;
+        if (typeof ref === "function") {
+          ref(instance);
+        } else if (ref) {
+          ref.current = instance;
+        }
+      },
+      [ref]
+    );
+    const [isControlled] = useState(() => opened !== void 0);
+    const [uncontrolledOpened, setUncontrolledOpened] = useState(false);
+    const computedOpened = isControlled ? !!opened : uncontrolledOpened;
+    const handleOpenedChange = useCallback(
+      (nextOpened) => {
+        if (isControlled) {
+          setOpened == null ? void 0 : setOpened(nextOpened);
+          return;
+        }
+        setUncontrolledOpened(nextOpened);
+      },
+      [isControlled, setOpened]
+    );
+    useEffect(() => {
+      if (!computedOpened) {
         return;
       }
-      setUncontrolledOpened(nextOpened);
-    },
-    [isControlled, setOpened]
-  );
-  useEffect(() => {
-    if (!computedOpened) {
-      return;
-    }
-    const handleKeyDown = (event) => {
-      const key = event.code || event.keyCode;
-      if (isKey(key, "ESCAPE") || closeOnTab && isKey(key, "TAB")) {
-        handleOpenedChange(false);
-      }
-    };
-    const handleClickOutside = (event) => {
-      const button = containerRef.current;
-      const dropdown = dropdownRef.current;
-      const targetNode = event.target;
-      if (targetNode && !(button == null ? void 0 : button.contains(targetNode)) && !(dropdown == null ? void 0 : dropdown.contains(targetNode))) {
-        handleOpenedChange(false);
-      }
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    document.addEventListener("mousedown", handleClickOutside);
-    document.addEventListener("touchstart", handleClickOutside);
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown);
-      document.removeEventListener("mousedown", handleClickOutside);
-      document.removeEventListener("touchstart", handleClickOutside);
-    };
-  }, [computedOpened, closeOnTab, dropdownRef, handleOpenedChange]);
-  const classNames = clsx(styles.buttonDropdownExtended, className);
-  return /* @__PURE__ */ jsxs("div", { className: classNames, ref: containerRef, ...rest, children: [
-    renderButton({ opened: computedOpened, setOpened: handleOpenedChange }),
-    renderDropdown({
-      className: styles.buttonDropdownExtendedBlock,
-      opened: computedOpened,
-      setOpened: handleOpenedChange
-    })
-  ] });
-};
-ButtonDropdownExtended.Dropdown = Dropdown;
-ButtonDropdownExtended.DropdownList = DropdownList;
+      const handleKeyDown = (event) => {
+        const key = event.code || event.keyCode;
+        if (isKey(key, "ESCAPE") || closeOnTab && isKey(key, "TAB")) {
+          handleOpenedChange(false);
+        }
+      };
+      const handleClickOutside = (event) => {
+        const button = containerRef.current;
+        const dropdown = dropdownRef.current;
+        const targetNode = event.target;
+        if (targetNode && !(button == null ? void 0 : button.contains(targetNode)) && !(dropdown == null ? void 0 : dropdown.contains(targetNode))) {
+          handleOpenedChange(false);
+        }
+      };
+      document.addEventListener("keydown", handleKeyDown);
+      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("touchstart", handleClickOutside);
+      return () => {
+        document.removeEventListener("keydown", handleKeyDown);
+        document.removeEventListener("mousedown", handleClickOutside);
+        document.removeEventListener("touchstart", handleClickOutside);
+      };
+    }, [computedOpened, closeOnTab, dropdownRef, handleOpenedChange]);
+    const classNames = clsx(styles.buttonDropdownExtended, className);
+    return /* @__PURE__ */ jsxs("div", { className: classNames, ref: setContainerRef, ...rest, children: [
+      renderButton({ opened: computedOpened, setOpened: handleOpenedChange }),
+      renderDropdown({
+        className: styles.buttonDropdownExtendedBlock,
+        opened: computedOpened,
+        setOpened: handleOpenedChange
+      })
+    ] });
+  }),
+  {
+    Dropdown,
+    DropdownList
+  }
+);
+ButtonDropdownExtended.displayName = "ButtonDropdownExtended";
 export {
   ButtonDropdownExtended
 };