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

package/dist/components/Accordion/Accordion.context.d.ts

@@ -1,5 +1,5 @@
 import { AccordionContextProps } from './Accordion.props';
 declare const DISPLAY_NAME = "Accordion";
-declare const AccordionProvider: import('../../lib/react/createComponentContext').ContextProps<AccordionContextProps>, useAccordionContext: (consumerName: string) => NonNullable<AccordionContextProps>;
+declare const AccordionProvider: import("../../lib/react/createComponentContext").ContextProps<AccordionContextProps>, useAccordionContext: (consumerName: string) => NonNullable<AccordionContextProps>;
 export { AccordionProvider, useAccordionContext, DISPLAY_NAME };
 //# sourceMappingURL=Accordion.context.d.ts.map

package/dist/components/Accordion/Accordion.context.js

@@ -1,7 +1,4 @@
-import { createComponentContext as o } from "../../lib/react/createComponentContext/createComponentContext.js";
-const t = "Accordion", [n, r] = o(t);
-export {
-  n as AccordionProvider,
-  t as DISPLAY_NAME,
-  r as useAccordionContext
-};
+import { createComponentContext } from 'src/lib/react';
+const DISPLAY_NAME = 'Accordion';
+const [AccordionProvider, useAccordionContext] = createComponentContext(DISPLAY_NAME);
+export { AccordionProvider, useAccordionContext, DISPLAY_NAME };

package/dist/components/Accordion/Accordion.js

@@ -1,15 +1,13 @@
-import { jsx as i } from "react/jsx-runtime";
-import { forwardRef as m } from "react";
-import { AccordionMultiple as n } from "./components/AccordionMultiple/AccordionMultiple.js";
-import { AccordionSingle as e } from "./components/AccordionSingle/AccordionSingle.js";
-import { Item as l } from "./components/Item/Item.js";
-import { DISPLAY_NAME as s } from "./Accordion.context.js";
-const c = m((t, o) => {
-  const { type: p, ...r } = t;
-  return p === "multiple" ? /* @__PURE__ */ i(n, { ...r, ref: o }) : /* @__PURE__ */ i(e, { ...r, ref: o });
+import React, { forwardRef } from 'react';
+import { AccordionMultiple } from './components/AccordionMultiple/AccordionMultiple';
+import { AccordionSingle } from './components/AccordionSingle/AccordionSingle';
+import { Item } from './components/Item/Item';
+import { DISPLAY_NAME } from './Accordion.context';
+export const Accordion = forwardRef((props, ref) => {
+    const { type, ...restAccordionProps } = props;
+    const accordionSingleProps = restAccordionProps;
+    const accordionMultipleProps = restAccordionProps;
+    return type === 'multiple' ? (React.createElement(AccordionMultiple, { ...accordionMultipleProps, ref: ref })) : (React.createElement(AccordionSingle, { ...accordionSingleProps, ref: ref }));
 });
-c.displayName = s;
-c.Item = l;
-export {
-  c as Accordion
-};
+Accordion.displayName = DISPLAY_NAME;
+Accordion.Item = Item;

package/dist/components/Accordion/Accordion.props.js

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

package/dist/components/Accordion/Accordion.themes.js

@@ -1,6 +1,3 @@
-const c = {
-  "--crm-ui-kit-accordion-width": "100%"
-};
-export {
-  c as AccordionTheme
+export const AccordionTheme = {
+    '--crm-ui-kit-accordion-width': '100%',
 };

package/dist/components/Accordion/components/AccordionMultiple/AccordionMultiple.d.ts

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

package/dist/components/Accordion/components/AccordionMultiple/AccordionMultiple.js

@@ -1,44 +1,30 @@
-import { jsx as n } from "react/jsx-runtime";
-import { forwardRef as N, useState as g } from "react";
-import { c as A } from "../../../../index-L8X2o7IH.mjs";
-import { useThemeClassName as P } from "../../../../hooks/useThemeClassName/useThemeClassName.js";
-import { noop as V } from "../../../../utils/noop/noop.js";
-import { AccordionProvider as x } from "../../Accordion.context.js";
-import { s as M } from "../../../../Accordion.module-0NEfElzm.mjs";
-const D = "AccordionMultiple", S = N(
-  (t, s) => {
-    const {
-      className: c = "",
-      theme: i,
-      children: m,
-      value: u = [],
-      defaultValue: d = [],
-      onChange: f = V,
-      ...p
-    } = t, h = P(i), [a, C] = g(d), l = "value" in t, o = l ? u : a, v = (e) => o.includes(e) ? o.filter((r) => r !== e) : [...o, e];
-    return /* @__PURE__ */ n(
-      x,
-      {
-        value: o,
-        defaultValue: a,
-        onChange: (e) => {
-          const r = v(e);
-          l || C(r), f(r);
-        },
-        children: /* @__PURE__ */ n(
-          "div",
-          {
-            ref: s,
-            className: A(M.wrapper, h, c),
-            ...p,
-            children: m
-          }
-        )
-      }
-    );
-  }
-);
-S.displayName = D;
-export {
-  S as AccordionMultiple
-};
+import React, { forwardRef, useState } from 'react';
+import cx from 'classnames';
+import { useThemeClassName } from 'src/hooks/useThemeClassName';
+import { noop } from 'src/utils';
+import { AccordionProvider } from '../../Accordion.context';
+import s from '../../Accordion.module.css';
+const DISPLAY_NAME = 'AccordionMultiple';
+export const AccordionMultiple = forwardRef((props, ref) => {
+    const { className = '', theme, children, value: valueProp = [], defaultValue: defaultValueProp = [], onChange = noop, ...rest } = props;
+    const themeClassName = useThemeClassName(theme);
+    const [defaultValue, setDefaultValue] = useState(defaultValueProp);
+    const isControlled = 'value' in props;
+    const value = isControlled ? valueProp : defaultValue;
+    const getCorrectValue = (newValue) => {
+        if (value.includes(newValue)) {
+            return value.filter((val) => val !== newValue);
+        }
+        return [...value, newValue];
+    };
+    const handleChange = (newValue) => {
+        const correctValue = getCorrectValue(newValue);
+        if (!isControlled) {
+            setDefaultValue(correctValue);
+        }
+        onChange(correctValue);
+    };
+    return (React.createElement(AccordionProvider, { value: value, defaultValue: defaultValue, onChange: handleChange },
+        React.createElement("div", { ref: ref, className: cx(s.wrapper, themeClassName, className), ...rest }, children)));
+});
+AccordionMultiple.displayName = DISPLAY_NAME;

package/dist/components/Accordion/components/AccordionMultiple/AccordionMultiple.props.js

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

package/dist/components/Accordion/components/AccordionSingle/AccordionSingle.d.ts

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

package/dist/components/Accordion/components/AccordionSingle/AccordionSingle.js

@@ -1,45 +1,30 @@
-import { jsx as n } from "react/jsx-runtime";
-import { forwardRef as N, useState as A } from "react";
-import { c as P } from "../../../../index-L8X2o7IH.mjs";
-import { useThemeClassName as S } from "../../../../hooks/useThemeClassName/useThemeClassName.js";
-import { noop as V } from "../../../../utils/noop/noop.js";
-import { AccordionProvider as x } from "../../Accordion.context.js";
-import { s as D } from "../../../../Accordion.module-0NEfElzm.mjs";
-const b = "AccordionSingle", j = N(
-  (o, s) => {
-    const {
-      className: c = "",
-      theme: i,
-      children: m,
-      value: u,
-      defaultValue: d,
-      onChange: f = V,
-      isCollapsible: p = !1,
-      ...h
-    } = o, C = S(i), [r, g] = A(d), t = "value" in o, a = t ? u : r, v = (e) => p && e === a ? void 0 : e;
-    return /* @__PURE__ */ n(
-      x,
-      {
-        value: a,
-        defaultValue: r,
-        onChange: (e) => {
-          const l = v(e);
-          t || g(l), f(l);
-        },
-        children: /* @__PURE__ */ n(
-          "div",
-          {
-            ref: s,
-            className: P(D.wrapper, C, c),
-            ...h,
-            children: m
-          }
-        )
-      }
-    );
-  }
-);
-j.displayName = b;
-export {
-  j as AccordionSingle
-};
+import React, { forwardRef, useState } from 'react';
+import cx from 'classnames';
+import { useThemeClassName } from 'src/hooks/useThemeClassName';
+import { noop } from 'src/utils';
+import { AccordionProvider } from '../../Accordion.context';
+import s from '../../Accordion.module.css';
+const DISPLAY_NAME = 'AccordionSingle';
+export const AccordionSingle = forwardRef((props, ref) => {
+    const { className = '', theme, children, value: valueProp, defaultValue: defaultValueProp, onChange = noop, isCollapsible = false, ...rest } = props;
+    const themeClassName = useThemeClassName(theme);
+    const [defaultValue, setDefaultValue] = useState(defaultValueProp);
+    const isControlled = 'value' in props;
+    const value = isControlled ? valueProp : defaultValue;
+    const getCorrectValue = (newValue) => {
+        if (isCollapsible) {
+            return newValue === value ? undefined : newValue;
+        }
+        return newValue;
+    };
+    const handleChange = (newValue) => {
+        const correctValue = getCorrectValue(newValue);
+        if (!isControlled) {
+            setDefaultValue(correctValue);
+        }
+        onChange(correctValue);
+    };
+    return (React.createElement(AccordionProvider, { value: value, defaultValue: defaultValue, onChange: handleChange },
+        React.createElement("div", { ref: ref, className: cx(s.wrapper, themeClassName, className), ...rest }, children)));
+});
+AccordionSingle.displayName = DISPLAY_NAME;

package/dist/components/Accordion/components/AccordionSingle/AccordionSingle.props.js

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

package/dist/components/Accordion/components/Item/Item.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
-import { ItemProps } from './Item.props';
+import React from 'react';
+import { type ItemProps } from './Item.props';
 export declare const Item: React.ForwardRefExoticComponent<ItemProps & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=Item.d.ts.map

package/dist/components/Accordion/components/Item/Item.js

@@ -1,59 +1,31 @@
-import { jsxs as a, jsx as t } from "react/jsx-runtime";
-import * as s from "react";
-import { forwardRef as x } from "react";
-import { c as n } from "../../../../index-L8X2o7IH.mjs";
-import { useThemeClassName as C } from "../../../../hooks/useThemeClassName/useThemeClassName.js";
-import { Text as A } from "../../../Text/Text.js";
-import { TextPrimaryTheme as g } from "../../../Text/Text.themes.js";
-import { useAccordionContext as b } from "../../Accordion.context.js";
-import '../../../../assets/Item3.css';const y = (r) => /* @__PURE__ */ s.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 10, height: 7, fill: "none", ...r }, /* @__PURE__ */ s.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M.176.78a.574.574 0 0 1 .857 0L4.96 5.058 8.967.692a.573.573 0 0 1 .857 0 .705.705 0 0 1 0 .933L5.485 6.351a.603.603 0 0 1-.14.114.573.573 0 0 1-.83-.026L.175 1.713a.706.706 0 0 1 0-.933Z", clipRule: "evenodd" })), E = "_wrapper_1l5nn_1", L = "_header_1l5nn_13", R = "_header_left_1l5nn_20", T = "_before_title_1l5nn_27", I = "_chevron_container_1l5nn_34", j = "_chevron_icon_1l5nn_44", k = "_content_1l5nn_48", D = "_active_1l5nn_54", e = {
-  wrapper: E,
-  header: L,
-  header_left: R,
-  before_title: T,
-  chevron_container: I,
-  chevron_icon: j,
-  content: k,
-  active: D
-}, i = "Accordion.Item", M = x((r, _) => {
-  const {
-    theme: m,
-    children: h,
-    value: o,
-    title: d,
-    before: l = null,
-    className: v = "",
-    ...p
-  } = r, f = C(m), { onChange: u, value: c } = b(i), N = () => {
-    u(o);
-  }, w = Array.isArray(c) ? c.includes(o) : c === o;
-  return /* @__PURE__ */ a(
-    "div",
-    {
-      ref: _,
-      className: n(
-        e.wrapper,
-        {
-          [e.active]: w
-        },
-        f,
-        v
-      ),
-      ...p,
-      children: [
-        /* @__PURE__ */ a("div", { className: n(e.header), onClick: N, children: [
-          /* @__PURE__ */ a("div", { className: n(e.header_left), children: [
-            l && /* @__PURE__ */ t("div", { className: n(e.before_title), children: l }),
-            /* @__PURE__ */ t(A, { theme: g, size: "xl", isEllipsis: !0, children: d })
-          ] }),
-          /* @__PURE__ */ t("span", { className: n(e.chevron_container), children: /* @__PURE__ */ t(y, { className: n(e.chevron_icon) }) })
-        ] }),
-        /* @__PURE__ */ t("div", { className: n(e.content), children: h })
-      ]
-    }
-  );
+import React, { forwardRef } from 'react';
+import cx from 'classnames';
+import ChevronDownIcon from 'src/icons/chevronDown.svg';
+import { useThemeClassName } from 'src/hooks/useThemeClassName';
+import { Text } from '../../../Text/Text';
+import { TextPrimaryTheme } from '../../../Text/Text.themes';
+import { useAccordionContext } from '../../Accordion.context';
+import s from './Item.module.css';
+const DISPLAY_NAME = 'Accordion.Item';
+export const Item = forwardRef((props, ref) => {
+    const { theme, children, value, title, before = null, className = '', ...rest } = props;
+    const themeClassName = useThemeClassName(theme);
+    const { onChange, value: currentValue } = useAccordionContext(DISPLAY_NAME);
+    const handleClick = () => {
+        onChange(value);
+    };
+    const isActive = Array.isArray(currentValue)
+        ? currentValue.includes(value)
+        : currentValue === value;
+    return (React.createElement("div", { ref: ref, className: cx(s.wrapper, {
+            [s.active]: isActive,
+        }, themeClassName, className), ...rest },
+        React.createElement("div", { className: cx(s.header), onClick: handleClick },
+            React.createElement("div", { className: cx(s.header_left) },
+                before && React.createElement("div", { className: cx(s.before_title) }, before),
+                React.createElement(Text, { theme: TextPrimaryTheme, size: "xl", isEllipsis: true }, title)),
+            React.createElement("span", { className: cx(s.chevron_container) },
+                React.createElement(ChevronDownIcon, { className: cx(s.chevron_icon) }))),
+        React.createElement("div", { className: cx(s.content) }, children)));
 });
-M.displayName = i;
-export {
-  M as Item
-};
+Item.displayName = DISPLAY_NAME;

package/dist/components/Accordion/components/Item/Item.props.js

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

package/dist/components/Accordion/components/Item/Item.themes.js

@@ -1,12 +1,9 @@
-const i = {
-  "--crm-ui-kit-accordion-item-border-radius": "var(--crm-ui-kit-palette-focus-visible-border-radius)",
-  "--crm-ui-kit-accordion-item-box-shadow": "var(--crm-ui-kit-palette-accordion-item-box-shadow)",
-  "--crm-ui-kit-accordion-item-background-color": "var(--crm-ui-kit-palette-background-primary)",
-  "--crm-ui-kit-accordion-item-padding": "12px 12px 12px 22px",
-  "--crm-ui-kit-accordion-item-margin-bottom": "16px",
-  "--crm-ui-kit-accordion-item-chevron-icon-color": "var(--crm-ui-kit-palette-text-primary)",
-  "--crm-ui-kit-accordion-item-border-color": "var(--crm-ui-kit-palette-border-primary)"
-};
-export {
-  i as AccordionItemTheme
+export const AccordionItemTheme = {
+    '--crm-ui-kit-accordion-item-border-radius': 'var(--crm-ui-kit-palette-focus-visible-border-radius)',
+    '--crm-ui-kit-accordion-item-box-shadow': 'var(--crm-ui-kit-palette-accordion-item-box-shadow)',
+    '--crm-ui-kit-accordion-item-background-color': 'var(--crm-ui-kit-palette-background-primary)',
+    '--crm-ui-kit-accordion-item-padding': '12px 12px 12px 22px',
+    '--crm-ui-kit-accordion-item-margin-bottom': '16px',
+    '--crm-ui-kit-accordion-item-chevron-icon-color': 'var(--crm-ui-kit-palette-text-primary)',
+    '--crm-ui-kit-accordion-item-border-color': 'var(--crm-ui-kit-palette-border-primary)',
 };

package/dist/components/Accordion/index.js

@@ -1,8 +1,3 @@
-import { Accordion as e } from "./Accordion.js";
-import { AccordionTheme as m } from "./Accordion.themes.js";
-import { AccordionItemTheme as d } from "./components/Item/Item.themes.js";
-export {
-  e as Accordion,
-  d as AccordionItemTheme,
-  m as AccordionTheme
-};
+export { Accordion } from './Accordion';
+export { AccordionTheme } from './Accordion.themes';
+export { AccordionItemTheme, } from './components/Item/Item.themes';

package/dist/components/BaseInput/BaseInput.d.ts

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

package/dist/components/BaseInput/BaseInput.js

@@ -1,35 +1,10 @@
-import { jsx as n } from "react/jsx-runtime";
-import { forwardRef as p } from "react";
-import { c } from "../../index-L8X2o7IH.mjs";
-import '../../assets/BaseInput.css';const d = "_input_x5289_1", _ = "_placeholder_visible_x5289_23", e = {
-  input: d,
-  placeholder_visible: _
-}, m = p((s, i) => {
-  const {
-    className: l = "",
-    isDisabled: a,
-    isReadonly: o,
-    isPlaceholderVisibleOnFocus: r = !1,
-    ...t
-  } = s;
-  return /* @__PURE__ */ n(
-    "input",
-    {
-      ref: i,
-      className: c(
-        e.input,
-        {
-          [e.placeholder_visible]: r
-        },
-        l
-      ),
-      disabled: a,
-      readOnly: o,
-      ...t
-    }
-  );
+import React, { forwardRef } from 'react';
+import cx from 'classnames';
+import s from './BaseInput.module.css';
+export const BaseInput = forwardRef((props, ref) => {
+    const { className = '', isDisabled, isReadonly, isPlaceholderVisibleOnFocus = false, ...rest } = props;
+    return (React.createElement("input", { ref: ref, className: cx(s.input, {
+            [s.placeholder_visible]: isPlaceholderVisibleOnFocus,
+        }, className), disabled: isDisabled, readOnly: isReadonly, ...rest }));
 });
-m.displayName = "BaseInput";
-export {
-  m as BaseInput
-};
+BaseInput.displayName = 'BaseInput';

package/dist/components/BaseInput/BaseInput.props.js

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

package/dist/components/BaseInput/index.js

@@ -1,4 +1 @@
-import { BaseInput as p } from "./BaseInput.js";
-export {
-  p as BaseInput
-};
+export { BaseInput } from './BaseInput';

package/dist/components/Button/Button.d.ts

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

package/dist/components/Button/Button.js

@@ -1,94 +1,58 @@
-import { jsxs as R, jsx as e } from "react/jsx-runtime";
-import T, { forwardRef as A, useMemo as I } from "react";
-import { c as i } from "../../index-L8X2o7IH.mjs";
-import { useThemeClassName as g } from "../../hooks/useThemeClassName/useThemeClassName.js";
-import { noop as j } from "../../utils/noop/noop.js";
-import { Spinner as z } from "../Spinner/Spinner.js";
-import { useShowInvalidAnimation as B } from "./hooks/useShowInvalidAnimation/useShowInvalidAnimation.js";
-import { useShowSuccessfulState as D } from "./hooks/useShowSuccessfulState/useShowSuccessfulState.js";
-import '../../assets/Button.css';const M = "_button_5it8y_17", F = "_disabled_5it8y_43", L = "_content_5it8y_65", W = "_before_5it8y_73", q = "_after_5it8y_78", E = "_spinner_container_5it8y_83", G = "_invalid_5it8y_90", H = "_success_5it8y_95", n = {
-  button: M,
-  disabled: F,
-  content: L,
-  before: W,
-  after: q,
-  spinner_container: E,
-  invalid: G,
-  success: H
-}, J = (t) => {
-  const r = {
-    "--crm-ui-kit-spinner-border-color": t["--crm-ui-kit-button-spinner-border-color"],
-    "--crm-ui-kit-spinner-border-width": t["--crm-ui-kit-button-spinner-border-width"],
-    "--crm-ui-kit-spinner-circle-size": t["--crm-ui-kit-button-spinner-circle-size"],
-    "--crm-ui-kit-spinner-border-style": t["--crm-ui-kit-button-spinner-border-style"]
-  }, o = {
-    ...r,
-    "--crm-ui-kit-spinner-border-color": t["--crm-ui-kit-button-spinner-disabled-border-color"]
-  };
-  return { defaultTheme: r, disabledTheme: o };
-}, K = A((t, r) => {
-  const {
-    className: o = "",
-    type: b = "button",
-    onClick: f = j,
-    theme: c,
-    isLoading: l,
-    isDisabled: a,
-    before: d,
-    after: u,
-    children: _,
-    showInvalidAnimationRef: h,
-    showSuccessfulStateRef: k,
-    successfulStateText: y,
-    isClickableWhileDisabled: S = !1,
-    ...w
-  } = t, N = g(c), m = I(() => J(c), [c]), v = B(
-    h
-  ), p = D(
-    k
-  ), C = (x) => {
-    l || f(x);
-  };
-  let s = null;
-  switch (!0) {
-    case p:
-      s = /* @__PURE__ */ e("span", { children: y || s });
-      break;
-    case l:
-      s = /* @__PURE__ */ e("span", { className: i(n.spinner_container), children: /* @__PURE__ */ e(
-        z,
-        {
-          theme: a ? m.disabledTheme : m.defaultTheme,
-          isCentered: !0
+import React, { forwardRef, useMemo } from 'react';
+import cx from 'classnames';
+import { useThemeClassName } from 'src/hooks/useThemeClassName';
+import { noop } from 'src/utils';
+import { Spinner } from 'src/components/Spinner';
+import { useShowInvalidAnimation, useShowSuccessfulState } from './hooks';
+import s from './Button.module.css';
+const spinnerThemesMapper = (buttonTheme) => {
+    const defaultTheme = {
+        '--crm-ui-kit-spinner-border-color': buttonTheme['--crm-ui-kit-button-spinner-border-color'],
+        '--crm-ui-kit-spinner-border-width': buttonTheme['--crm-ui-kit-button-spinner-border-width'],
+        '--crm-ui-kit-spinner-circle-size': buttonTheme['--crm-ui-kit-button-spinner-circle-size'],
+        '--crm-ui-kit-spinner-border-style': buttonTheme['--crm-ui-kit-button-spinner-border-style'],
+    };
+    const disabledTheme = {
+        ...defaultTheme,
+        '--crm-ui-kit-spinner-border-color': buttonTheme['--crm-ui-kit-button-spinner-disabled-border-color'],
+    };
+    return { defaultTheme, disabledTheme };
+};
+export const Button = forwardRef((props, ref) => {
+    const { className = '', type = 'button', onClick = noop, theme, isLoading, isDisabled, before, after, children, showInvalidAnimationRef, showSuccessfulStateRef, successfulStateText, isClickableWhileDisabled = false, ...rest } = props;
+    const themeClassName = useThemeClassName(theme);
+    const spinnerThemes = useMemo(() => spinnerThemesMapper(theme), [theme]);
+    const shouldShowInvalidAnimation = useShowInvalidAnimation(showInvalidAnimationRef);
+    const shouldShowSuccessfulState = useShowSuccessfulState(showSuccessfulStateRef);
+    const handleClick = (e) => {
+        if (isLoading) {
+            return;
         }
-      ) });
-      break;
-    default:
-      s = /* @__PURE__ */ R(T.Fragment, { children: [
-        d && /* @__PURE__ */ e("span", { className: i(n.before), children: d }),
-        /* @__PURE__ */ e("span", { children: _ }),
-        u && /* @__PURE__ */ e("span", { className: i(n.after), children: u })
-      ] });
-      break;
-  }
-  return /* @__PURE__ */ e(
-    "button",
-    {
-      ...w,
-      ref: r,
-      type: b,
-      onClick: C,
-      className: i(n.button, N, o, {
-        [n.invalid]: v,
-        [n.success]: p,
-        [n.disabled]: a
-      }),
-      disabled: a && !S,
-      children: /* @__PURE__ */ e("span", { className: i(n.content), children: s })
+        onClick(e);
+    };
+    let content = null;
+    switch (true) {
+        case shouldShowSuccessfulState:
+            content = React.createElement("span", null, successfulStateText || content);
+            break;
+        case isLoading:
+            content = (React.createElement("span", { className: cx(s.spinner_container) },
+                React.createElement(Spinner, { theme: isDisabled
+                        ? spinnerThemes.disabledTheme
+                        : spinnerThemes.defaultTheme, isCentered: true })));
+            break;
+        default:
+            content = (React.createElement(React.Fragment, null,
+                before && React.createElement("span", { className: cx(s.before) }, before),
+                React.createElement("span", null, children),
+                after && React.createElement("span", { className: cx(s.after) }, after)));
+            break;
     }
-  );
+    return (React.createElement("button", { ...rest, ref: ref, type: type, onClick: handleClick, className: cx(s.button, themeClassName, className, {
+            [s.invalid]: shouldShowInvalidAnimation,
+            [s.success]: shouldShowSuccessfulState,
+            [s.disabled]: isDisabled,
+        }), disabled: isDisabled && !isClickableWhileDisabled },
+        React.createElement("span", { className: cx(s.content) }, content)));
 });
-K.displayName = "Button";
-export {
-  K as Button
-};
+Button.displayName = 'Button';

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

@@ -1,5 +1,5 @@
-import { default as React } from 'react';
-import { ButtonThemeType } from './Button.themes';
+import React from 'react';
+import { type ButtonThemeType } from './Button.themes';
 type Button = Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, 'disabled'>;
 export interface ButtonProps extends Button {
     /**

package/dist/components/Button/Button.props.js

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