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

package/dist/components/FilterTabs/components/ItemRootReset/TabReset.js

@@ -1,28 +1,18 @@
-import { jsx as u } from "react/jsx-runtime";
-import { forwardRef as h } from "react";
-import { c as C } from "../../../../index-L8X2o7IH.mjs";
-import { useThemeClassName as N } from "../../../../hooks/useThemeClassName/useThemeClassName.js";
-import { useFilterTabsContext as R } from "../../FilterTabs.context.js";
-import { useTabItemRootResetContext as T } from "./ItemRootReset.context.js";
-import { s } from "../../../../Tab.module-Bh4dewE1.mjs";
-const e = "FilterTabs.TabReset", x = h((t, o) => {
-  const { theme: r, className: m, children: a, ...i } = t, l = N(r), { values: n, isDisabled: c, onChange: b } = R(e), { isDisabled: d, ...p } = T(e), f = !n.length;
-  return /* @__PURE__ */ u(
-    "button",
-    {
-      ref: o,
-      className: C(s.button, l, m, {
-        [s.selected]: f
-      }),
-      onClick: () => b(),
-      disabled: c || d,
-      ...p,
-      ...i,
-      children: a
-    }
-  );
+import React, { forwardRef } from 'react';
+import cx from 'classnames';
+import { useThemeClassName } from 'src/hooks/useThemeClassName';
+import { useFilterTabsContext } from '../../FilterTabs.context';
+import { useTabItemRootResetContext } from '../ItemRootReset/ItemRootReset.context';
+import s from '../Tab/Tab.module.css';
+const DISPLAY_NAME = 'FilterTabs.TabReset';
+export const TabReset = forwardRef((props, ref) => {
+    const { theme, className, children, ...restProps } = props;
+    const themeClassName = useThemeClassName(theme);
+    const { values, isDisabled, onChange } = useFilterTabsContext(DISPLAY_NAME);
+    const { isDisabled: isItemRootDisabled, ...rest } = useTabItemRootResetContext(DISPLAY_NAME);
+    const isSelected = !values.length;
+    return (React.createElement("button", { ref: ref, className: cx(s.button, themeClassName, className, {
+            [s.selected]: isSelected,
+        }), onClick: () => onChange(), disabled: isDisabled || isItemRootDisabled, ...rest, ...restProps }, children));
 });
-x.displayName = e;
-export {
-  x as TabReset
-};
+TabReset.displayName = DISPLAY_NAME;

package/dist/components/FilterTabs/components/ItemRootReset/index.js

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

package/dist/components/FilterTabs/components/Tab/Tab.d.ts

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

package/dist/components/FilterTabs/components/Tab/Tab.js

@@ -1,35 +1,21 @@
-import { jsx as C } from "react/jsx-runtime";
-import { forwardRef as N } from "react";
-import { c as T } from "../../../../index-L8X2o7IH.mjs";
-import { useThemeClassName as x } from "../../../../hooks/useThemeClassName/useThemeClassName.js";
-import { useFilterTabsContext as D } from "../../FilterTabs.context.js";
-import { useTabItemRootContext as I } from "../ItemRoot/ItemRoot.context.js";
-import { s as t } from "../../../../Tab.module-Bh4dewE1.mjs";
-const s = "FilterTabs.Tab", R = N((o, a) => {
-  const { theme: m, className: r, children: i, ...n } = o, l = x(m), { values: c, isDisabled: d, onChange: b } = D(s), {
-    name: e,
-    isDisabled: p,
-    ...f
-  } = I(s), u = c.includes(e), h = () => {
-    b(e);
-  };
-  return /* @__PURE__ */ C(
-    "button",
-    {
-      ref: a,
-      className: T(t.button, l, r, {
-        [t.selected]: u
-      }),
-      onClick: h,
-      name: e,
-      disabled: d || p,
-      ...f,
-      ...n,
-      children: i
-    }
-  );
+import React, { forwardRef } from 'react';
+import cx from 'classnames';
+import { useThemeClassName } from 'src/hooks/useThemeClassName';
+import { useFilterTabsContext } from '../../FilterTabs.context';
+import { useTabItemRootContext } from '../ItemRoot/ItemRoot.context';
+import s from './Tab.module.css';
+const DISPLAY_NAME = 'FilterTabs.Tab';
+export const Tab = forwardRef((props, ref) => {
+    const { theme, className, children, ...restProps } = props;
+    const themeClassName = useThemeClassName(theme);
+    const { values, isDisabled, onChange } = useFilterTabsContext(DISPLAY_NAME);
+    const { name, isDisabled: isItemRootDisabled, ...rest } = useTabItemRootContext(DISPLAY_NAME);
+    const isSelected = values.includes(name);
+    const handleChange = () => {
+        onChange(name);
+    };
+    return (React.createElement("button", { ref: ref, className: cx(s.button, themeClassName, className, {
+            [s.selected]: isSelected,
+        }), onClick: handleChange, name: name, disabled: isDisabled || isItemRootDisabled, ...rest, ...restProps }, children));
 });
-R.displayName = s;
-export {
-  R as Tab
-};
+Tab.displayName = DISPLAY_NAME;

package/dist/components/FilterTabs/components/Tab/Tab.props.d.ts

@@ -1,4 +1,4 @@
-import { TabThemeType } from './Tab.themes';
+import { type TabThemeType } from './Tab.themes';
 export type Button = Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, 'disabled' | 'readonly'>;
 export interface TabProps extends Button {
     /**

package/dist/components/FilterTabs/components/Tab/Tab.props.js

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

package/dist/components/FilterTabs/components/Tab/Tab.themes.js

@@ -1,17 +1,14 @@
-const t = {
-  "--crm-ui-kit-filter-tabs-tab-z-index": "3",
-  "--crm-ui-kit-filter-tabs-tab-action-color": "var(--crm-ui-kit-color-blueberry)",
-  "--crm-ui-kit-filter-tabs-tab-border-width": "1px",
-  "--crm-ui-kit-filter-tabs-tab-border-radius": "3px",
-  "--crm-ui-kit-filter-tabs-tab-border-style": "solid",
-  "--crm-ui-kit-filter-tabs-tab-focus-visible-outline-color": "var(--crm-ui-kit-color-cobalt-blue)",
-  "--crm-ui-kit-filter-tabs-tab-focus-visible-outline-width": "var(--crm-ui-kit-palette-focus-visible-outline-width)",
-  "--crm-ui-kit-filter-tabs-tab-focus-visible-outline-style": "var(--crm-ui-kit-palette-focus-visible-outline-style)",
-  "--crm-ui-kit-filter-tabs-tab-focus-visible-outline-offset": "var(--crm-ui-kit-palette-focus-visible-outline-offset)",
-  "--crm-ui-kit-filter-tabs-tab-background-color": "var(--crm-ui-kit-palette-surface-background-color)",
-  "--crm-ui-kit-filter-tabs-tab-text-color": "var(--crm-ui-kit-palette-surface-text-color)",
-  "--crm-ui-kit-filter-tabs-tab-hover-background-color": "var(--crm-ui-kit-palette-surface-hover-background-color)"
-};
-export {
-  t as TabPrimaryTheme
+export const TabPrimaryTheme = {
+    '--crm-ui-kit-filter-tabs-tab-z-index': '3',
+    '--crm-ui-kit-filter-tabs-tab-action-color': 'var(--crm-ui-kit-color-blueberry)',
+    '--crm-ui-kit-filter-tabs-tab-border-width': '1px',
+    '--crm-ui-kit-filter-tabs-tab-border-radius': '3px',
+    '--crm-ui-kit-filter-tabs-tab-border-style': 'solid',
+    '--crm-ui-kit-filter-tabs-tab-focus-visible-outline-color': 'var(--crm-ui-kit-color-cobalt-blue)',
+    '--crm-ui-kit-filter-tabs-tab-focus-visible-outline-width': 'var(--crm-ui-kit-palette-focus-visible-outline-width)',
+    '--crm-ui-kit-filter-tabs-tab-focus-visible-outline-style': 'var(--crm-ui-kit-palette-focus-visible-outline-style)',
+    '--crm-ui-kit-filter-tabs-tab-focus-visible-outline-offset': 'var(--crm-ui-kit-palette-focus-visible-outline-offset)',
+    '--crm-ui-kit-filter-tabs-tab-background-color': 'var(--crm-ui-kit-palette-surface-background-color)',
+    '--crm-ui-kit-filter-tabs-tab-text-color': 'var(--crm-ui-kit-palette-surface-text-color)',
+    '--crm-ui-kit-filter-tabs-tab-hover-background-color': 'var(--crm-ui-kit-palette-surface-hover-background-color)',
 };

package/dist/components/FilterTabs/components/Tab/index.js

@@ -1,6 +1,2 @@
-import { Tab as m } from "./Tab.js";
-import { TabPrimaryTheme as a } from "./Tab.themes.js";
-export {
-  m as Tab,
-  a as TabPrimaryTheme
-};
+export { Tab } from './Tab';
+export { TabPrimaryTheme } from './Tab.themes';

package/dist/components/FilterTabs/index.js

@@ -1,14 +1,4 @@
-import { FilterTabs as o } from "./FilterTabs.js";
-import { FilterTabsTheme as m } from "./FilterTabs.themes.js";
-import { ItemRoot as a } from "./components/ItemRoot/ItemRoot.js";
-import { FilterTabsItemRootTheme as p } from "./components/ItemRoot/ItemRoot.themes.js";
-import { Tab as b } from "./components/Tab/Tab.js";
-import { TabPrimaryTheme as h } from "./components/Tab/Tab.themes.js";
-export {
-  o as FilterTabs,
-  p as FilterTabsItemRootTheme,
-  m as FilterTabsTheme,
-  a as ItemRoot,
-  b as Tab,
-  h as TabPrimaryTheme
-};
+export { FilterTabs } from './FilterTabs';
+export { FilterTabsTheme } from './FilterTabs.themes';
+export { ItemRoot, FilterTabsItemRootTheme, } from './components/ItemRoot';
+export { Tab, TabPrimaryTheme, } from './components/Tab';

package/dist/components/InlineInput/InlineInput.d.ts

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

package/dist/components/InlineInput/InlineInput.js

@@ -1,64 +1,24 @@
-import { jsxs as m, jsx as a } from "react/jsx-runtime";
-import { forwardRef as f } from "react";
-import { c as e } from "../../index-L8X2o7IH.mjs";
-import { useThemeClassName as v } from "../../hooks/useThemeClassName/useThemeClassName.js";
-import { Text as h } from "../Text/Text.js";
-import "../Text/Text.themes.js";
-import { BaseInput as u } from "../BaseInput/BaseInput.js";
-import { isValidRenderValue as N } from "../../lib/utils.js";
-import { InputInvalidTextTheme as y } from "./InlineInput.themes.js";
-import '../../assets/InlineInput.css';const z = "_wrapper_vhy8z_1", I = "_input_container_vhy8z_25", x = "_after_container_vhy8z_42", b = "_after_vhy8z_42", w = "_has_after_vhy8z_54", T = "_invalid_description_container_vhy8z_58", j = "_invalid_description_vhy8z_58", B = "_disabled_vhy8z_98", i = {
-  wrapper: z,
-  input_container: I,
-  after_container: x,
-  after: b,
-  has_after: w,
-  invalid_description_container: T,
-  invalid_description: j,
-  disabled: B
-}, C = f((t, s) => {
-  const {
-    className: o = "",
-    isInvalid: c = !1,
-    invalidDescription: _,
-    isDisabled: r,
-    after: n,
-    theme: d,
-    ...l
-  } = t, p = v(d);
-  return /* @__PURE__ */ m("div", { className: e(i.wrapper, p, o), children: [
-    /* @__PURE__ */ a(
-      "div",
-      {
-        className: e(i.input_container, {
-          [i.disabled]: r
-        }),
-        children: /* @__PURE__ */ a(
-          u,
-          {
-            className: e({
-              [i.has_after]: !!n
-            }),
-            isDisabled: r,
-            ref: s,
-            ...l
-          }
-        )
-      }
-    ),
-    N(n) && /* @__PURE__ */ a("div", { className: e(i.after_container), children: /* @__PURE__ */ a("div", { className: e(i.after), children: n }) }),
-    c && /* @__PURE__ */ a("div", { className: e(i.invalid_description_container), children: /* @__PURE__ */ a(
-      h,
-      {
-        size: "m",
-        theme: y,
-        className: e(i.invalid_description),
-        children: _
-      }
-    ) })
-  ] });
+import React, { forwardRef } from 'react';
+import cx from 'classnames';
+import { useThemeClassName } from 'src/hooks/useThemeClassName';
+import { Text } from 'src/components/Text';
+import { BaseInput } from 'src/components/BaseInput/BaseInput';
+import { isValidRenderValue } from 'src/lib/utils';
+import { InputInvalidTextTheme, } from './InlineInput.themes';
+import s from './InlineInput.module.css';
+export const InlineInput = forwardRef((props, ref) => {
+    const { className = '', isInvalid = false, invalidDescription, isDisabled, after, theme, ...rest } = props;
+    const themeClassName = useThemeClassName(theme);
+    return (React.createElement("div", { className: cx(s.wrapper, themeClassName, className) },
+        React.createElement("div", { className: cx(s.input_container, {
+                [s.disabled]: isDisabled,
+            }) },
+            React.createElement(BaseInput, { className: cx({
+                    [s.has_after]: Boolean(after),
+                }), isDisabled: isDisabled, ref: ref, ...rest })),
+        isValidRenderValue(after) && (React.createElement("div", { className: cx(s.after_container) },
+            React.createElement("div", { className: cx(s.after) }, after))),
+        isInvalid && (React.createElement("div", { className: cx(s.invalid_description_container) },
+            React.createElement(Text, { size: "m", theme: InputInvalidTextTheme, className: cx(s.invalid_description) }, invalidDescription)))));
 });
-C.displayName = "InlineInput";
-export {
-  C as InlineInput
-};
+InlineInput.displayName = 'InlineInput';

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

@@ -1,5 +1,5 @@
-import { BaseInputProps } from '../BaseInput/BaseInput.props';
-import { InlineInputTheme } from './InlineInput.themes';
+import { type BaseInputProps } from '../BaseInput/BaseInput.props';
+import { type InlineInputTheme } from './InlineInput.themes';
 export interface InlineInputProps extends BaseInputProps {
     /**
      * Valid value is entered or not.

package/dist/components/InlineInput/InlineInput.props.js

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

package/dist/components/InlineInput/InlineInput.themes.d.ts

@@ -1,4 +1,4 @@
-import { TextTheme } from '../Text';
+import { type TextTheme } from 'src/components/Text';
 type InlineInputThemeKey = '--crm-ui-kit-inline-input-font-size' | '--crm-ui-kit-inline-input-line-height' | '--crm-ui-kit-inline-input-color' | '--crm-ui-kit-inline-input-placeholder-color' | '--crm-ui-kit-inline-input-disabled-color' | '--crm-ui-kit-inline-input-width' | '--crm-ui-kit-inline-input-height' | '--crm-ui-kit-inline-input-padding-left' | '--crm-ui-kit-inline-input-padding-right' | '--crm-ui-kit-input-after-min-width' | '--crm-ui-kit-inline-input-border-color' | '--crm-ui-kit-inline-input-border-style' | '--crm-ui-kit-inline-input-border-width' | '--crm-ui-kit-inline-input-focus-border-color' | '--crm-ui-kit-inline-input-disabled-opacity' | '--crm-ui-kit-inline-input-invalid-description-offset' | '--crm-ui-kit-inline-input-invalid-description-padding-x' | '--crm-ui-kit-inline-input-invalid-description-padding-y' | '--crm-ui-kit-inline-input-invalid-description-width' | '--crm-ui-kit-inline-input-invalid-description-background-color' | '--crm-ui-kit-inline-input-invalid-description-border-radius' | '--crm-ui-kit-inline-input-invalid-description-arrow-width' | '--crm-ui-kit-inline-input-invalid-description-color' | '--crm-ui-kit-inline-input-invalid-description-arrow-top' | '--crm-ui-kit-inline-input-invalid-description-arrow-left';
 export type InlineInputTheme = {
     [K in InlineInputThemeKey]: string;

package/dist/components/InlineInput/InlineInput.themes.js

@@ -1,44 +1,41 @@
-import "../Text/Text.js";
-import { TextPrimaryTheme as n } from "../Text/Text.themes.js";
-const i = {
-  "--crm-ui-kit-inline-input-color": "var(--crm-ui-kit-palette-text-primary)",
-  "--crm-ui-kit-inline-input-placeholder-color": "var(--crm-ui-kit-palette-placeholder-primary)",
-  "--crm-ui-kit-inline-input-disabled-color": "var(--crm-ui-kit-palette-text-primary)",
-  "--crm-ui-kit-inline-input-invalid-description-color": "var(--crm-ui-kit-color-white)",
-  "--crm-ui-kit-inline-input-invalid-description-background-color": "var(--crm-ui-kit-color-error)",
-  "--crm-ui-kit-inline-input-font-size": "var(--crm-ui-kit-base-font-size)",
-  "--crm-ui-kit-input-after-min-width": "36px",
-  "--crm-ui-kit-inline-input-line-height": "20px",
-  "--crm-ui-kit-inline-input-width": "100%",
-  "--crm-ui-kit-inline-input-height": "19px",
-  "--crm-ui-kit-inline-input-invalid-description-width": "auto",
-  "--crm-ui-kit-inline-input-disabled-opacity": "0.6",
-  "--crm-ui-kit-inline-input-padding-left": "1px",
-  "--crm-ui-kit-inline-input-padding-right": "1px",
-  "--crm-ui-kit-inline-input-border-style": "solid",
-  "--crm-ui-kit-inline-input-border-width": "1px",
-  "--crm-ui-kit-inline-input-invalid-description-offset": "5px",
-  "--crm-ui-kit-inline-input-invalid-description-padding-x": "5px",
-  "--crm-ui-kit-inline-input-invalid-description-padding-y": "9px",
-  "--crm-ui-kit-inline-input-invalid-description-border-radius": "3px",
-  "--crm-ui-kit-inline-input-invalid-description-arrow-width": "4px",
-  "--crm-ui-kit-inline-input-invalid-description-arrow-top": "13px",
-  "--crm-ui-kit-inline-input-invalid-description-arrow-left": "-5px"
-}, e = {
-  ...i,
-  "--crm-ui-kit-inline-input-border-color": "transparent",
-  "--crm-ui-kit-inline-input-focus-border-color": "var(--crm-ui-kit-color-blueberry)"
-}, u = {
-  ...i,
-  "--crm-ui-kit-inline-input-border-color": "var(--crm-ui-kit-color-blueberry)",
-  "--crm-ui-kit-inline-input-focus-border-color": "var(--crm-ui-kit-color-blueberry)"
-}, c = {
-  ...n,
-  "--crm-ui-kit-text-color": "var(--crm-ui-kit-inline-input-invalid-description-color)",
-  "--crm-ui-kit-text-size-m-line-height": "15px"
+import { TextPrimaryTheme } from 'src/components/Text';
+const InlineInputBaseValues = {
+    '--crm-ui-kit-inline-input-color': 'var(--crm-ui-kit-palette-text-primary)',
+    '--crm-ui-kit-inline-input-placeholder-color': 'var(--crm-ui-kit-palette-placeholder-primary)',
+    '--crm-ui-kit-inline-input-disabled-color': 'var(--crm-ui-kit-palette-text-primary)',
+    '--crm-ui-kit-inline-input-invalid-description-color': 'var(--crm-ui-kit-color-white)',
+    '--crm-ui-kit-inline-input-invalid-description-background-color': 'var(--crm-ui-kit-color-error)',
+    '--crm-ui-kit-inline-input-font-size': 'var(--crm-ui-kit-base-font-size)',
+    '--crm-ui-kit-input-after-min-width': '36px',
+    '--crm-ui-kit-inline-input-line-height': '20px',
+    '--crm-ui-kit-inline-input-width': '100%',
+    '--crm-ui-kit-inline-input-height': '19px',
+    '--crm-ui-kit-inline-input-invalid-description-width': 'auto',
+    '--crm-ui-kit-inline-input-disabled-opacity': '0.6',
+    '--crm-ui-kit-inline-input-padding-left': '1px',
+    '--crm-ui-kit-inline-input-padding-right': '1px',
+    '--crm-ui-kit-inline-input-border-style': 'solid',
+    '--crm-ui-kit-inline-input-border-width': '1px',
+    '--crm-ui-kit-inline-input-invalid-description-offset': '5px',
+    '--crm-ui-kit-inline-input-invalid-description-padding-x': '5px',
+    '--crm-ui-kit-inline-input-invalid-description-padding-y': '9px',
+    '--crm-ui-kit-inline-input-invalid-description-border-radius': '3px',
+    '--crm-ui-kit-inline-input-invalid-description-arrow-width': '4px',
+    '--crm-ui-kit-inline-input-invalid-description-arrow-top': '13px',
+    '--crm-ui-kit-inline-input-invalid-description-arrow-left': '-5px',
 };
-export {
-  u as InlineInputPrimaryFocusedTheme,
-  e as InlineInputPrimaryTheme,
-  c as InputInvalidTextTheme
+export const InlineInputPrimaryTheme = {
+    ...InlineInputBaseValues,
+    '--crm-ui-kit-inline-input-border-color': 'transparent',
+    '--crm-ui-kit-inline-input-focus-border-color': 'var(--crm-ui-kit-color-blueberry)',
+};
+export const InlineInputPrimaryFocusedTheme = {
+    ...InlineInputBaseValues,
+    '--crm-ui-kit-inline-input-border-color': 'var(--crm-ui-kit-color-blueberry)',
+    '--crm-ui-kit-inline-input-focus-border-color': 'var(--crm-ui-kit-color-blueberry)',
+};
+export const InputInvalidTextTheme = {
+    ...TextPrimaryTheme,
+    '--crm-ui-kit-text-color': 'var(--crm-ui-kit-inline-input-invalid-description-color)',
+    '--crm-ui-kit-text-size-m-line-height': '15px',
 };

package/dist/components/InlineInput/index.js

@@ -1,7 +1,2 @@
-import { InlineInput as r } from "./InlineInput.js";
-import { InlineInputPrimaryFocusedTheme as I, InlineInputPrimaryTheme as i } from "./InlineInput.themes.js";
-export {
-  r as InlineInput,
-  I as InlineInputPrimaryFocusedTheme,
-  i as InlineInputPrimaryTheme
-};
+export { InlineInput } from './InlineInput';
+export { InlineInputPrimaryTheme, InlineInputPrimaryFocusedTheme, } from './InlineInput.themes';

package/dist/components/Input/Input.d.ts

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

package/dist/components/Input/Input.js

@@ -1,77 +1,26 @@
-import { jsx as a, jsxs as p } from "react/jsx-runtime";
-import { forwardRef as j } from "react";
-import { c as e } from "../../index-L8X2o7IH.mjs";
-import { useThemeClassName as v } from "../../hooks/useThemeClassName/useThemeClassName.js";
-import { isValidRenderValue as h } from "../../lib/utils.js";
-import { Text as u } from "../Text/Text.js";
-import "../Text/Text.themes.js";
-import { BaseInput as N } from "../BaseInput/BaseInput.js";
-import { InputInvalidTextTheme as w } from "./Input.themes.js";
-import '../../assets/Input.css';const b = "_wrapper_1jjpd_1", x = "_input_wrapper_1jjpd_23", I = "_input_container_1jjpd_28", g = "_after_1jjpd_44", T = "_has_after_1jjpd_51", B = "_invalid_1jjpd_55", D = "_disabled_1jjpd_72", C = "_invalid_description_1jjpd_81", R = "_invalid_description_right_1jjpd_85", i = {
-  wrapper: b,
-  input_wrapper: x,
-  input_container: I,
-  after: g,
-  has_after: T,
-  invalid: B,
-  disabled: D,
-  invalid_description: C,
-  invalid_description_right: R
-}, V = j((d, o) => {
-  const {
-    className: _ = "",
-    isInvalid: t = !1,
-    isDisabled: n,
-    invalidDescription: s,
-    invalidDescriptionPlacement: c = "bottom",
-    after: r,
-    theme: l,
-    ...m
-  } = d, f = v(l);
-  return /* @__PURE__ */ a("div", { className: e(i.wrapper, f, _), children: /* @__PURE__ */ p(
-    "div",
-    {
-      className: e(i.input_wrapper, {
-        [i.invalid_description_right]: c === "right"
-      }),
-      children: [
-        /* @__PURE__ */ p(
-          "div",
-          {
-            className: e(i.input_container, {
-              [i.invalid]: t,
-              [i.disabled]: n
-            }),
-            children: [
-              /* @__PURE__ */ a(
-                N,
-                {
-                  className: e({
-                    [i.has_after]: !!r
-                  }),
-                  isDisabled: n,
-                  ref: o,
-                  ...m
-                }
-              ),
-              h(r) && /* @__PURE__ */ a("div", { className: e(i.after), children: r })
-            ]
-          }
-        ),
-        t && !!s && /* @__PURE__ */ a(
-          u,
-          {
-            size: "m",
-            theme: w,
-            className: e(i.invalid_description),
-            children: s
-          }
-        )
-      ]
-    }
-  ) });
+import React, { forwardRef } from 'react';
+import cx from 'classnames';
+import { useThemeClassName } from 'src/hooks/useThemeClassName';
+import { isValidRenderValue } from 'src/lib/utils';
+import { Text } from 'src/components/Text';
+import { BaseInput } from 'src/components/BaseInput/BaseInput';
+import { InputInvalidTextTheme } from './Input.themes';
+import s from './Input.module.css';
+export const Input = forwardRef((props, ref) => {
+    const { className = '', isInvalid = false, isDisabled, invalidDescription, invalidDescriptionPlacement = 'bottom', after, theme, ...rest } = props;
+    const themeClassName = useThemeClassName(theme);
+    return (React.createElement("div", { className: cx(s.wrapper, themeClassName, className) },
+        React.createElement("div", { className: cx(s.input_wrapper, {
+                [s.invalid_description_right]: invalidDescriptionPlacement === 'right',
+            }) },
+            React.createElement("div", { className: cx(s.input_container, {
+                    [s.invalid]: isInvalid,
+                    [s.disabled]: isDisabled,
+                }) },
+                React.createElement(BaseInput, { className: cx({
+                        [s.has_after]: Boolean(after),
+                    }), isDisabled: isDisabled, ref: ref, ...rest }),
+                isValidRenderValue(after) && (React.createElement("div", { className: cx(s.after) }, after))),
+            isInvalid && Boolean(invalidDescription) && (React.createElement(Text, { size: "m", theme: InputInvalidTextTheme, className: cx(s.invalid_description) }, invalidDescription)))));
 });
-V.displayName = "Input";
-export {
-  V as Input
-};
+Input.displayName = 'Input';

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

@@ -1,5 +1,5 @@
-import { BaseInputProps } from '../BaseInput/BaseInput.props';
-import { InputTheme } from './Input.themes';
+import { type BaseInputProps } from '../BaseInput/BaseInput.props';
+import { type InputTheme } from './Input.themes';
 export type InputInvalidDescriptionPlacement = 'bottom' | 'right';
 export interface InputProps extends BaseInputProps {
     /**

package/dist/components/Input/Input.props.js

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

package/dist/components/Input/Input.themes.d.ts

@@ -1,4 +1,4 @@
-import { TextTheme } from '../Text';
+import { type TextTheme } from 'src/components/Text';
 type InputThemeKey = '--crm-ui-kit-input-font-size' | '--crm-ui-kit-input-line-height' | '--crm-ui-kit-input-border-top' | '--crm-ui-kit-input-border-bottom' | '--crm-ui-kit-input-border-left' | '--crm-ui-kit-input-error-border-top' | '--crm-ui-kit-input-error-border-bottom' | '--crm-ui-kit-input-error-border-left' | '--crm-ui-kit-input-error-border-right' | '--crm-ui-kit-input-border-width' | '--crm-ui-kit-input-border-right' | '--crm-ui-kit-input-border-radius' | '--crm-ui-kit-input-color' | '--crm-ui-kit-input-padding-right' | '--crm-ui-kit-input-padding-left' | '--crm-ui-kit-input-height' | '--crm-ui-kit-input-width' | '--crm-ui-kit-input-after-min-width' | '--crm-ui-kit-input-error-color' | '--crm-ui-kit-input-error-description-color' | '--crm-ui-kit-input-error-description-offset-placement-right' | '--crm-ui-kit-input-error-description-offset-placement-bottom' | '--crm-ui-kit-input-error-placement-right-width' | '--crm-ui-kit-input-error-placeholder-color' | '--crm-ui-kit-input-disabled-opacity' | '--crm-ui-kit-input-disabled-background-color' | '--crm-ui-kit-input-disabled-border-top' | '--crm-ui-kit-input-disabled-border-bottom' | '--crm-ui-kit-input-disabled-border-left' | '--crm-ui-kit-input-disabled-border-right' | '--crm-ui-kit-input-disabled-color' | '--crm-ui-kit-input-placeholder-color' | '--crm-ui-kit-input-background-color';
 export type InputTheme = {
     [K in InputThemeKey]: string;