@kommo-crm/crm-react-ui-kit 1.1.1-beta.1 → 1.1.1-beta.3

package/dist/components/SelectButton/index.js

@@ -1,7 +1,2 @@
-import { SelectButton as o } from "./SelectButton.js";
-import { SelectButtonDarkTheme as m, SelectButtonLightTheme as c } from "./SelectButton.theme.js";
-export {
-  o as SelectButton,
-  m as SelectButtonDarkTheme,
-  c as SelectButtonLightTheme
-};
+export { SelectButton } from './SelectButton';
+export { SelectButtonLightTheme, SelectButtonDarkTheme, } from './SelectButton.theme';

package/dist/components/Spinner/Spinner.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 import { SpinnerProps } from './Spinner.props';
 export declare const Spinner: React.ForwardRefExoticComponent<Omit<SpinnerProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 //# sourceMappingURL=Spinner.d.ts.map

package/dist/components/Spinner/Spinner.js

@@ -1,29 +1,12 @@
-import { jsx as a } from "react/jsx-runtime";
-import { forwardRef as c } from "react";
-import { c as i } from "../../index-L8X2o7IH.mjs";
-import { useThemeClassName as d } from "../../hooks/useThemeClassName/useThemeClassName.js";
-import '../../assets/Spinner.css';const f = "_spinner_4ps24_11", l = "_centered_4ps24_29", e = {
-  spinner: f,
-  centered: l
-}, _ = c((s, n) => {
-  const { isCentered: r = !1, className: t = "", theme: m, ...o } = s, p = d(m);
-  return /* @__PURE__ */ a(
-    "span",
-    {
-      ref: n,
-      className: i(
-        e.spinner,
-        {
-          [e.centered]: r
-        },
-        p,
-        t
-      ),
-      ...o
-    }
-  );
+import React, { forwardRef } from 'react';
+import cx from 'classnames';
+import { useThemeClassName } from 'src/hooks/useThemeClassName';
+import s from './Spinner.module.css';
+export const Spinner = forwardRef((props, ref) => {
+    const { isCentered = false, className = '', theme, ...rest } = props;
+    const themeClassName = useThemeClassName(theme);
+    return (React.createElement("span", { ref: ref, className: cx(s.spinner, {
+            [s.centered]: isCentered,
+        }, themeClassName, className), ...rest }));
 });
-_.displayName = "Spinner";
-export {
-  _ as Spinner
-};
+Spinner.displayName = 'Spinner';

package/dist/components/Spinner/Spinner.props.js

@@ -1 +1 @@
-
+export {};

package/dist/components/Spinner/Spinner.themes.js

@@ -1,9 +1,6 @@
-const r = {
-  "--crm-ui-kit-spinner-border-color": "var(--crm-ui-kit-color-bright-blue)",
-  "--crm-ui-kit-spinner-border-width": "2px",
-  "--crm-ui-kit-spinner-circle-size": "16px",
-  "--crm-ui-kit-spinner-border-style": "solid"
-};
-export {
-  r as SpinnerPrimaryTheme
+export const SpinnerPrimaryTheme = {
+    '--crm-ui-kit-spinner-border-color': 'var(--crm-ui-kit-color-bright-blue)',
+    '--crm-ui-kit-spinner-border-width': '2px',
+    '--crm-ui-kit-spinner-circle-size': '16px',
+    '--crm-ui-kit-spinner-border-style': 'solid',
 };

package/dist/components/Spinner/index.js

@@ -1,6 +1,2 @@
-import { Spinner as m } from "./Spinner.js";
-import { SpinnerPrimaryTheme as o } from "./Spinner.themes.js";
-export {
-  m as Spinner,
-  o as SpinnerPrimaryTheme
-};
+export { Spinner } from './Spinner';
+export { SpinnerPrimaryTheme } from './Spinner.themes';

package/dist/components/Switcher/Switcher.js

@@ -1,36 +1,15 @@
-import { jsxs as l, jsx as s } from "react/jsx-runtime";
-import { forwardRef as h } from "react";
-import { c as e } from "../../index-L8X2o7IH.mjs";
-import { useThemeClassName as w } from "../../hooks/useThemeClassName/useThemeClassName.js";
-import { VisuallyHiddenInput as u } from "../VisuallyHiddenInput/VisuallyHiddenInput.js";
-import { Label as _ } from "../Label/Label.js";
-import '../../assets/Switcher.css';const f = "_wrapper_1n2ce_1", N = "_switcher_1n2ce_18", d = "_input_1n2ce_64", r = {
-  wrapper: f,
-  switcher: N,
-  input: d
-}, t = h((a, c) => {
-  const {
-    className: p = "",
-    value: m = "Y",
-    theme: o,
-    ...i
-  } = a, n = w(o);
-  return /* @__PURE__ */ l("div", { className: e(r.wrapper, n, p), children: [
-    /* @__PURE__ */ s(
-      u,
-      {
-        className: e(r.input),
-        ref: c,
-        value: m,
-        type: "checkbox",
-        ...i
-      }
-    ),
-    /* @__PURE__ */ s("span", { className: e(r.switcher) })
-  ] });
+import React, { forwardRef } from 'react';
+import cx from 'classnames';
+import { useThemeClassName } from 'src/hooks/useThemeClassName';
+import { VisuallyHiddenInput } from 'src/components/VisuallyHiddenInput';
+import { Label } from 'src/components/Label';
+import s from './Switcher.module.css';
+export const Switcher = forwardRef((props, ref) => {
+    const { className = '', value = 'Y', theme, ...rest } = props;
+    const themeClassName = useThemeClassName(theme);
+    return (React.createElement("div", { className: cx(s.wrapper, themeClassName, className) },
+        React.createElement(VisuallyHiddenInput, { className: cx(s.input), ref: ref, value: value, type: "checkbox", ...rest }),
+        React.createElement("span", { className: cx(s.switcher) })));
 });
-t.Label = _;
-t.displayName = "Switcher";
-export {
-  t as Switcher
-};
+Switcher.Label = Label;
+Switcher.displayName = 'Switcher';

package/dist/components/Switcher/Switcher.props.d.ts

@@ -1,6 +1,6 @@
-import { VisuallyHiddenInputProps } from '../VisuallyHiddenInput/VisuallyHiddenInput.props';
-import { LabelProps } from '../Label';
-import { SwitcherTheme } from './Switcher.themes';
+import { type VisuallyHiddenInputProps } from 'src/components/VisuallyHiddenInput/VisuallyHiddenInput.props';
+import { type LabelProps } from 'src/components/Label';
+import { type SwitcherTheme } from './Switcher.themes';
 type BaseSwitcherProps = {
     /**
      * Object with CSS properties of the theme.

package/dist/components/Switcher/Switcher.props.js

@@ -1 +1 @@
-
+export {};

package/dist/components/Switcher/Switcher.themes.js

@@ -1,17 +1,14 @@
-const i = {
-  "--crm-ui-kit-switcher-active-element-color": "var(--crm-ui-kit-palette-active-element-900)",
-  "--crm-ui-kit-switcher-border-color": "var(--crm-ui-kit-palette-switcher-border-default)",
-  "--crm-ui-kit-switcher-line-border-radius": "26px",
-  "--crm-ui-kit-switcher-circle-size": "14px",
-  "--crm-ui-kit-switcher-line-width": "9px",
-  "--crm-ui-kit-switcher-border-width": "1px",
-  "--crm-ui-kit-switcher-disabled-opacity": "var(--crm-ui-kit-disabled-opacity)",
-  "--crm-ui-kit-switcher-focus-visible-outline-color": "var(--crm-ui-kit-palette-focus-visible-color)",
-  "--crm-ui-kit-switcher-focus-visible-outline-width": "var(--crm-ui-kit-palette-focus-visible-outline-width)",
-  "--crm-ui-kit-switcher-focus-visible-outline-style": "var(--crm-ui-kit-palette-focus-visible-outline-style)",
-  "--crm-ui-kit-switcher-focus-visible-outline-offset": "var(--crm-ui-kit-palette-focus-visible-outline-offset)",
-  "--crm-ui-kit-switcher-focus-visible-border-radius": "var(--crm-ui-kit-palette-focus-visible-border-radius)"
-};
-export {
-  i as SwitcherPrimaryTheme
+export const SwitcherPrimaryTheme = {
+    '--crm-ui-kit-switcher-active-element-color': 'var(--crm-ui-kit-palette-active-element-900)',
+    '--crm-ui-kit-switcher-border-color': 'var(--crm-ui-kit-palette-switcher-border-default)',
+    '--crm-ui-kit-switcher-line-border-radius': '26px',
+    '--crm-ui-kit-switcher-circle-size': '14px',
+    '--crm-ui-kit-switcher-line-width': '9px',
+    '--crm-ui-kit-switcher-border-width': '1px',
+    '--crm-ui-kit-switcher-disabled-opacity': 'var(--crm-ui-kit-disabled-opacity)',
+    '--crm-ui-kit-switcher-focus-visible-outline-color': 'var(--crm-ui-kit-palette-focus-visible-color)',
+    '--crm-ui-kit-switcher-focus-visible-outline-width': 'var(--crm-ui-kit-palette-focus-visible-outline-width)',
+    '--crm-ui-kit-switcher-focus-visible-outline-style': 'var(--crm-ui-kit-palette-focus-visible-outline-style)',
+    '--crm-ui-kit-switcher-focus-visible-outline-offset': 'var(--crm-ui-kit-palette-focus-visible-outline-offset)',
+    '--crm-ui-kit-switcher-focus-visible-border-radius': 'var(--crm-ui-kit-palette-focus-visible-border-radius)',
 };

package/dist/components/Switcher/index.js

@@ -1,6 +1,2 @@
-import { Switcher as m } from "./Switcher.js";
-import { SwitcherPrimaryTheme as t } from "./Switcher.themes.js";
-export {
-  m as Switcher,
-  t as SwitcherPrimaryTheme
-};
+export { Switcher } from './Switcher';
+export { SwitcherPrimaryTheme } from './Switcher.themes';

package/dist/components/Text/Text.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
-import { TextProps } from './Text.props';
+import React from 'react';
+import { type TextProps } from './Text.props';
 export declare const Text: React.ForwardRefExoticComponent<Omit<TextProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 //# sourceMappingURL=Text.d.ts.map

package/dist/components/Text/Text.js

@@ -1,59 +1,33 @@
-import { jsx as x } from "react/jsx-runtime";
-import { forwardRef as f } from "react";
-import { c as h } from "../../index-L8X2o7IH.mjs";
-import { useThemeClassName as g } from "../../hooks/useThemeClassName/useThemeClassName.js";
-import '../../assets/Text.css';const w = "_text_1thgf_1", d = "_ellipsis_1thgf_7", N = "_line_clamp_1thgf_13", C = "_s_1thgf_23", y = "_m_1thgf_28", T = "_ms_1thgf_33", k = "_l_1thgf_13", u = "_xl_1thgf_43", s = {
-  text: w,
-  ellipsis: d,
-  line_clamp: N,
-  s: C,
-  m: y,
-  ms: T,
-  l: k,
-  xl: u
-}, z = {
-  s: s.s,
-  m: s.m,
-  ms: s.ms,
-  l: s.l,
-  xl: s.xl
-}, E = f((m, c) => {
-  const {
-    children: n,
-    className: o = "",
-    isEllipsis: i = !1,
-    maxRows: e = 1,
-    theme: _,
-    style: a = {},
-    size: t,
-    ...r
-  } = m, p = g(_), l = e > 1;
-  switch (t) {
-    case "s":
-    case "m":
-    case "ms":
-    case "l":
-    case "xl":
-      return /* @__PURE__ */ x(
-        "span",
-        {
-          ref: c,
-          style: {
-            ...l && { WebkitLineClamp: e },
-            ...a
-          },
-          className: h(s.text, z[t], p, o, {
-            [s.ellipsis]: i,
-            [s.line_clamp]: l
-          }),
-          ...r,
-          children: n
-        }
-      );
-  }
-  throw new Error("Unknown size was presented");
-});
-E.displayName = "Text";
-export {
-  E as Text
+import React, { forwardRef } from 'react';
+import cx from 'classnames';
+import { useThemeClassName } from 'src/hooks/useThemeClassName';
+import s from './Text.module.css';
+const cn = {
+    s: s.s,
+    m: s.m,
+    ms: s.ms,
+    l: s.l,
+    xl: s.xl,
 };
+export const Text = forwardRef((props, ref) => {
+    const { children, className = '', isEllipsis = false, maxRows = 1, theme, style = {}, size, ...rest } = props;
+    const themeClassName = useThemeClassName(theme);
+    const isLineClampAllowed = maxRows > 1;
+    switch (size) {
+        case 's':
+        case 'm':
+        case 'ms':
+        case 'l':
+        case 'xl':
+            return (React.createElement("span", { ref: ref, style: {
+                    ...(isLineClampAllowed && { WebkitLineClamp: maxRows }),
+                    ...style,
+                }, className: cx(s.text, cn[size], themeClassName, className, {
+                    [s.ellipsis]: isEllipsis,
+                    [s.line_clamp]: isLineClampAllowed,
+                }), ...rest }, children));
+        default:
+    }
+    throw new Error('Unknown size was presented');
+});
+Text.displayName = 'Text';

package/dist/components/Text/Text.props.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 import { TextTheme } from './Text.themes';
 type SpanAttributes = React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
 export type TextSizes = 's' | 'm' | 'ms' | 'l' | 'xl';

package/dist/components/Text/Text.props.js

@@ -1 +1 @@
-
+export {};

package/dist/components/Text/Text.themes.js

@@ -1,35 +1,32 @@
-const t = {
-  "--crm-ui-kit-text-size-s-font-size": "11px",
-  "--crm-ui-kit-text-size-s-line-height": "15px",
-  "--crm-ui-kit-text-size-m-font-size": "13px",
-  "--crm-ui-kit-text-size-m-line-height": "20px",
-  "--crm-ui-kit-text-size-ms-font-size": "13px",
-  "--crm-ui-kit-text-size-ms-line-height": "15px",
-  "--crm-ui-kit-text-size-l-font-size": "15px",
-  "--crm-ui-kit-text-size-l-line-height": "20px",
-  "--crm-ui-kit-text-size-xl-font-size": "18px",
-  "--crm-ui-kit-text-size-xl-line-height": "24px"
-}, e = {
-  ...t,
-  "--crm-ui-kit-text-color": "var(--crm-ui-kit-palette-text-primary)",
-  "--crm-ui-kit-text-font": "PT Sans"
-}, i = {
-  ...t,
-  "--crm-ui-kit-text-color": "var(--crm-ui-kit-palette-text-secondary-light)",
-  "--crm-ui-kit-text-font": "PT Sans"
-}, r = {
-  ...t,
-  "--crm-ui-kit-text-color": "var(--crm-ui-kit-palette-text-secondary-dark)",
-  "--crm-ui-kit-text-font": "PT Sans"
-}, x = {
-  ...t,
-  "--crm-ui-kit-text-color": "var(--crm-ui-kit-color-error)",
-  "--crm-ui-kit-text-font": "PT Sans"
+export const TextBaseSizesTheme = {
+    '--crm-ui-kit-text-size-s-font-size': '11px',
+    '--crm-ui-kit-text-size-s-line-height': '15px',
+    '--crm-ui-kit-text-size-m-font-size': '13px',
+    '--crm-ui-kit-text-size-m-line-height': '20px',
+    '--crm-ui-kit-text-size-ms-font-size': '13px',
+    '--crm-ui-kit-text-size-ms-line-height': '15px',
+    '--crm-ui-kit-text-size-l-font-size': '15px',
+    '--crm-ui-kit-text-size-l-line-height': '20px',
+    '--crm-ui-kit-text-size-xl-font-size': '18px',
+    '--crm-ui-kit-text-size-xl-line-height': '24px',
 };
-export {
-  t as TextBaseSizesTheme,
-  x as TextErrorTheme,
-  e as TextPrimaryTheme,
-  r as TextSecondaryDarkTheme,
-  i as TextSecondaryLightTheme
+export const TextPrimaryTheme = {
+    ...TextBaseSizesTheme,
+    '--crm-ui-kit-text-color': 'var(--crm-ui-kit-palette-text-primary)',
+    '--crm-ui-kit-text-font': 'PT Sans',
+};
+export const TextSecondaryLightTheme = {
+    ...TextBaseSizesTheme,
+    '--crm-ui-kit-text-color': 'var(--crm-ui-kit-palette-text-secondary-light)',
+    '--crm-ui-kit-text-font': 'PT Sans',
+};
+export const TextSecondaryDarkTheme = {
+    ...TextBaseSizesTheme,
+    '--crm-ui-kit-text-color': 'var(--crm-ui-kit-palette-text-secondary-dark)',
+    '--crm-ui-kit-text-font': 'PT Sans',
+};
+export const TextErrorTheme = {
+    ...TextBaseSizesTheme,
+    '--crm-ui-kit-text-color': 'var(--crm-ui-kit-color-error)',
+    '--crm-ui-kit-text-font': 'PT Sans',
 };

package/dist/components/Text/index.js

@@ -1,9 +1,2 @@
-import { Text as T } from "./Text.js";
-import { TextErrorTheme as m, TextPrimaryTheme as o, TextSecondaryDarkTheme as x, TextSecondaryLightTheme as h } from "./Text.themes.js";
-export {
-  T as Text,
-  m as TextErrorTheme,
-  o as TextPrimaryTheme,
-  x as TextSecondaryDarkTheme,
-  h as TextSecondaryLightTheme
-};
+export { Text } from './Text';
+export { TextPrimaryTheme, TextSecondaryDarkTheme, TextSecondaryLightTheme, TextErrorTheme, } from './Text.themes';

package/dist/components/TextArea/TextArea.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
-import { TextAreaProps } from './TextArea.props';
+import React from 'react';
+import { type TextAreaProps } from './TextArea.props';
 export declare const TextArea: React.ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
 //# sourceMappingURL=TextArea.d.ts.map

package/dist/components/TextArea/TextArea.js

@@ -1,75 +1,28 @@
-import { jsxs as u, jsx as i } from "react/jsx-runtime";
-import { forwardRef as N } from "react";
-import { c as a } from "../../index-L8X2o7IH.mjs";
-import { useThemeClassName as q } from "../../hooks/useThemeClassName/useThemeClassName.js";
-import { noop as T } from "../../utils/noop/noop.js";
-import { mergeRefs as w } from "../../lib/utils.js";
-import { CustomScrollClassName as y } from "../../stylesheets/utils/BaseClasses/BaseClasses.js";
-import { Text as z } from "../Text/Text.js";
-import { TextPrimaryTheme as A } from "../Text/Text.themes.js";
-import { useAutosizeTextarea as C } from "./hooks/useResizeTextArea.js";
-import '../../assets/TextArea.css';const R = "_wrapper_1afq7_1", O = "_textarea_container_1afq7_7", g = "_textarea_1afq7_7", j = "_placeholder_visible_1afq7_46", D = "_disabled_1afq7_64", P = "_invalid_description_1afq7_69", B = "_invalid_1afq7_69", e = {
-  wrapper: R,
-  textarea_container: O,
-  textarea: g,
-  placeholder_visible: j,
-  disabled: D,
-  invalid_description: P,
-  invalid: B
-}, E = N((n, d) => {
-  const {
-    className: m = "",
-    isDisabled: r,
-    isReadOnly: c,
-    isInvalid: s = !1,
-    isAutosized: t = !1,
-    isPlaceholderVisibleOnFocus: _ = !1,
-    invalidDescription: o,
-    onAutosize: p = T,
-    maxHeight: f,
-    value: l,
-    theme: x,
-    ...v
-  } = n, h = q(x), b = C(p, t, [
-    l,
-    t
-  ]);
-  return /* @__PURE__ */ u("div", { className: a(e.wrapper, h, m), children: [
-    /* @__PURE__ */ i(
-      "div",
-      {
-        className: a(e.textarea_container, {
-          [e.invalid]: s,
-          [e.disabled]: r
-        }),
-        children: /* @__PURE__ */ i(
-          "textarea",
-          {
-            style: { maxHeight: f },
-            ref: w(b, d),
-            className: a(y, e.textarea, {
-              [e.placeholder_visible]: _
-            }),
-            disabled: r,
-            readOnly: c,
-            value: l,
-            ...v
-          }
-        )
-      }
-    ),
-    !!(s && o) && /* @__PURE__ */ i(
-      z,
-      {
-        className: a(e.invalid_description),
-        size: "m",
-        theme: A,
-        children: o
-      }
-    )
-  ] });
+import React, { forwardRef } from 'react';
+import cx from 'classnames';
+import { useThemeClassName } from 'src/hooks/useThemeClassName';
+import { noop } from 'src/utils';
+import { mergeRefs } from 'src/lib/utils';
+import { CustomScrollClassName } from 'src/stylesheets/utils/BaseClasses';
+import { Text } from '../Text/Text';
+import { TextPrimaryTheme } from '../Text/Text.themes';
+import { useAutosizeTextarea } from './hooks';
+import s from './TextArea.module.css';
+export const TextArea = forwardRef((props, ref) => {
+    const { className = '', isDisabled, isReadOnly, isInvalid = false, isAutosized = false, isPlaceholderVisibleOnFocus = false, invalidDescription, onAutosize = noop, maxHeight, value, theme, ...rest } = props;
+    const themeClassName = useThemeClassName(theme);
+    const resizeElementRef = useAutosizeTextarea(onAutosize, isAutosized, [
+        value,
+        isAutosized,
+    ]);
+    return (React.createElement("div", { className: cx(s.wrapper, themeClassName, className) },
+        React.createElement("div", { className: cx(s.textarea_container, {
+                [s.invalid]: isInvalid,
+                [s.disabled]: isDisabled,
+            }) },
+            React.createElement("textarea", { style: { maxHeight }, ref: mergeRefs(resizeElementRef, ref), className: cx(CustomScrollClassName, s.textarea, {
+                    [s.placeholder_visible]: isPlaceholderVisibleOnFocus,
+                }), disabled: isDisabled, readOnly: isReadOnly, value: value, ...rest })),
+        Boolean(isInvalid && invalidDescription) && (React.createElement(Text, { className: cx(s.invalid_description), size: "m", theme: TextPrimaryTheme }, invalidDescription))));
 });
-E.displayName = "TextArea";
-export {
-  E as TextArea
-};
+TextArea.displayName = 'TextArea';

package/dist/components/TextArea/TextArea.props.js

@@ -1 +1 @@
-
+export {};

package/dist/components/TextArea/TextArea.themes.js

@@ -1,36 +1,34 @@
-const r = {
-  "--crm-ui-kit-textarea-disabled-border-color": "var(--crm-ui-kit-palette-border-primary)",
-  "--crm-ui-kit-textarea-color": "var(--crm-ui-kit-palette-text-primary)",
-  "--crm-ui-kit-textarea-disabled-color": "var(--crm-ui-kit-palette-text-primary)",
-  "--crm-ui-kit-textarea-placeholder-color": "var(--crm-ui-kit-palette-placeholder-primary)",
-  "--crm-ui-kit-textarea-error-border-color": "var(--crm-ui-kit-palette-border-error)",
-  "--crm-ui-kit-textarea-error-color": "var(--crm-ui-kit-color-error)",
-  "--crm-ui-kit-textarea-error-placeholder-color": "var(--crm-ui-kit-palette-placeholder-primary)",
-  "--crm-ui-kit-textarea-background-color": "var(--crm-ui-kit-palette-background-primary)",
-  "--crm-ui-kit-textarea-disabled-background-color": "transparent",
-  "--crm-ui-kit-textarea-disabled-opacity": "0.6",
-  "--crm-ui-kit-textarea-font-weight": "400",
-  "--crm-ui-kit-textarea-font-size": "var(--crm-ui-kit-base-font-size)",
-  "--crm-ui-kit-textarea-line-height": "19px",
-  "--crm-ui-kit-textarea-padding-top": "8px",
-  "--crm-ui-kit-textarea-padding-horizontal": "9px",
-  "--crm-ui-kit-textarea-padding-bottom": "7px",
-  "--crm-ui-kit-textarea-border-radius": "3px",
-  "--crm-ui-kit-textarea-spacing": "4px",
-  "--crm-ui-kit-textarea-width": "100%",
-  "--crm-ui-kit-textarea-min-height": "56px",
-  "--crm-ui-kit-textarea-border-width": "1px",
-  "--crm-ui-kit-textarea-border-style": "solid",
-  "--crm-ui-kit-textarea-scrollbar-thumb-background": "var(--crm-ui-kit-palette-scrollbar-thumb-background)",
-  "--crm-ui-kit-textarea-scrollbar-offset": "4px"
-}, t = {
-  ...r,
-  "--crm-ui-kit-textarea-border-color": "var(--crm-ui-kit-palette-border-default)"
-}, e = {
-  ...r,
-  "--crm-ui-kit-textarea-border-color": "var(--crm-ui-kit-palette-border-primary)"
+const TextAreaBaseValues = {
+    '--crm-ui-kit-textarea-disabled-border-color': 'var(--crm-ui-kit-palette-border-primary)',
+    '--crm-ui-kit-textarea-color': 'var(--crm-ui-kit-palette-text-primary)',
+    '--crm-ui-kit-textarea-disabled-color': 'var(--crm-ui-kit-palette-text-primary)',
+    '--crm-ui-kit-textarea-placeholder-color': 'var(--crm-ui-kit-palette-placeholder-primary)',
+    '--crm-ui-kit-textarea-error-border-color': 'var(--crm-ui-kit-palette-border-error)',
+    '--crm-ui-kit-textarea-error-color': 'var(--crm-ui-kit-color-error)',
+    '--crm-ui-kit-textarea-error-placeholder-color': 'var(--crm-ui-kit-palette-placeholder-primary)',
+    '--crm-ui-kit-textarea-background-color': 'var(--crm-ui-kit-palette-background-primary)',
+    '--crm-ui-kit-textarea-disabled-background-color': 'transparent',
+    '--crm-ui-kit-textarea-disabled-opacity': '0.6',
+    '--crm-ui-kit-textarea-font-weight': '400',
+    '--crm-ui-kit-textarea-font-size': 'var(--crm-ui-kit-base-font-size)',
+    '--crm-ui-kit-textarea-line-height': '19px',
+    '--crm-ui-kit-textarea-padding-top': '8px',
+    '--crm-ui-kit-textarea-padding-horizontal': '9px',
+    '--crm-ui-kit-textarea-padding-bottom': '7px',
+    '--crm-ui-kit-textarea-border-radius': '3px',
+    '--crm-ui-kit-textarea-spacing': '4px',
+    '--crm-ui-kit-textarea-width': '100%',
+    '--crm-ui-kit-textarea-min-height': '56px',
+    '--crm-ui-kit-textarea-border-width': '1px',
+    '--crm-ui-kit-textarea-border-style': 'solid',
+    '--crm-ui-kit-textarea-scrollbar-thumb-background': 'var(--crm-ui-kit-palette-scrollbar-thumb-background)',
+    '--crm-ui-kit-textarea-scrollbar-offset': '4px',
 };
-export {
-  e as TextareaDarkTheme,
-  t as TextareaLightTheme
+export const TextareaLightTheme = {
+    ...TextAreaBaseValues,
+    '--crm-ui-kit-textarea-border-color': 'var(--crm-ui-kit-palette-border-default)',
+};
+export const TextareaDarkTheme = {
+    ...TextAreaBaseValues,
+    '--crm-ui-kit-textarea-border-color': 'var(--crm-ui-kit-palette-border-primary)',
 };

package/dist/components/TextArea/hooks/index.js

@@ -1,4 +1 @@
-import { useAutosizeTextarea as r } from "./useResizeTextArea.js";
-export {
-  r as useAutosizeTextarea
-};
+export { useAutosizeTextarea } from './useResizeTextArea';

package/dist/components/TextArea/hooks/useResizeTextArea.d.ts

@@ -1,3 +1,3 @@
-import { default as React } from 'react';
+import React from 'react';
 export declare const useAutosizeTextarea: (onAutosize: ((el: HTMLTextAreaElement) => void) | undefined, isAutosized: boolean, autosizeDependencies: React.DependencyList) => React.RefObject<HTMLTextAreaElement>;
 //# sourceMappingURL=useResizeTextArea.d.ts.map