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

package/dist/components/Button/Button.themes.js

@@ -1,68 +1,66 @@
-const r = {
-  "--crm-ui-kit-button-z-index": "1",
-  "--crm-ui-kit-button-height": "36px",
-  "--crm-ui-kit-button-elements-spacing": "4px",
-  "--crm-ui-kit-button-font-size": "14px",
-  "--crm-ui-kit-button-line-height": "14px",
-  "--crm-ui-kit-button-font-weight": "bold",
-  "--crm-ui-kit-button-sibling-element-spacing": "7px",
-  "--crm-ui-kit-button-disabled-opacity": "var(--crm-ui-kit-disabled-opacity)",
-  "--crm-ui-kit-button-padding": "0px 10px",
-  "--crm-ui-kit-button-border-width": "1px",
-  "--crm-ui-kit-button-border-style": "solid",
-  "--crm-ui-kit-button-border-radius": "3px",
-  "--crm-ui-kit-button-hover-border-width": "1px",
-  "--crm-ui-kit-button-hover-border-style": "solid",
-  "--crm-ui-kit-button-hover-border-radius": "3px",
-  "--crm-ui-kit-button-success-color": "var(--crm-ui-kit-color-white)",
-  "--crm-ui-kit-button-success-background-color": "var(--crm-ui-ki-color-mustard-yellow)",
-  "--crm-ui-kit-button-success-hover-background-color": "var(--crm-ui-kit-color-amber)",
-  "--crm-ui-kit-button-success-border-color": "var(--crm-ui-kit-color-goldenrod)",
-  "--crm-ui-kit-button-spinner-border-color": "var(--crm-ui-kit-color-bright-blue)",
-  "--crm-ui-kit-button-spinner-disabled-border-color": "var(--crm-ui-kit-color-bright-blue)",
-  "--crm-ui-kit-button-spinner-border-width": "2px",
-  "--crm-ui-kit-button-spinner-circle-size": "16px",
-  "--crm-ui-kit-button-spinner-border-style": "solid"
-}, t = {
-  ...r,
-  "--crm-ui-kit-button-color": "var(--crm-ui-kit-palette-text-primary)",
-  "--crm-ui-kit-button-border-color": "var(--crm-ui-kit-palette-border-primary)",
-  "--crm-ui-kit-button-background-color": "var(--crm-ui-kit-palette-background-primary)",
-  "--crm-ui-kit-button-disabled-color": "var(--crm-ui-kit-palette-text-primary)",
-  "--crm-ui-kit-button-disabled-background-color": "var(--crm-ui-kit-palette-background-primary)",
-  "--crm-ui-kit-button-disabled-border-color": "var(--crm-ui-kit-palette-border-primary)",
-  "--crm-ui-kit-button-hover-color": "var(--crm-ui-kit-palette-text-primary)",
-  "--crm-ui-kit-button-hover-background-color": "var(--crm-ui-kit-palette-button-classic-hover-background)",
-  "--crm-ui-kit-button-hover-border-color": "var(--crm-ui-kit-palette-border-primary)"
-}, i = {
-  ...r,
-  "--crm-ui-kit-button-color": "var(--crm-ui-kit-color-white)",
-  "--crm-ui-kit-button-border-color": "var(--crm-ui-kit-color-cerulean-blue)",
-  "--crm-ui-kit-button-disabled-color": "var(--crm-ui-kit-palette-text-primary)",
-  "--crm-ui-kit-button-disabled-background-color": "var(--crm-ui-kit-palette-background-primary)",
-  "--crm-ui-kit-button-disabled-border-color": "var(--crm-ui-kit-palette-border-primary)",
-  "--crm-ui-kit-button-background-color": "var(--crm-ui-kit-palette-active-element-900)",
-  "--crm-ui-kit-button-hover-color": "var(--crm-ui-kit-color-white)",
-  "--crm-ui-kit-button-hover-background-color": "var(--crm-ui-kit-color-azure-blue)",
-  "--crm-ui-kit-button-hover-border-color": "var(--crm-ui-kit-color-cerulean-blue)",
-  "--crm-ui-kit-button-spinner-border-color": "var(--crm-ui-kit-color-white)",
-  "--crm-ui-kit-button-spinner-disabled-border-color": "var(--crm-ui-kit-color-bright-blue)"
-}, o = {
-  ...r,
-  "--crm-ui-kit-button-height": "30px",
-  "--crm-ui-kit-button-color": "var(--crm-ui-kit-palette-text-secondary-light)",
-  "--crm-ui-kit-button-padding": "0px 8px",
-  "--crm-ui-kit-button-border-color": "transparent",
-  "--crm-ui-kit-button-background-color": "inherit",
-  "--crm-ui-kit-button-disabled-color": "var(--crm-ui-kit-palette-text-secondary-light)",
-  "--crm-ui-kit-button-disabled-background-color": "inherit",
-  "--crm-ui-kit-button-disabled-border-color": "transparent",
-  "--crm-ui-kit-button-hover-background-color": "inherit",
-  "--crm-ui-kit-button-hover-border-color": "transparent",
-  "--crm-ui-kit-button-hover-color": "var(--crm-ui-kit-palette-text-secondary-light)"
+const ButtonBaseThemeValues = {
+    '--crm-ui-kit-button-z-index': '1',
+    '--crm-ui-kit-button-height': '36px',
+    '--crm-ui-kit-button-elements-spacing': '4px',
+    '--crm-ui-kit-button-font-size': '14px',
+    '--crm-ui-kit-button-line-height': '14px',
+    '--crm-ui-kit-button-font-weight': 'bold',
+    '--crm-ui-kit-button-sibling-element-spacing': '7px',
+    '--crm-ui-kit-button-disabled-opacity': 'var(--crm-ui-kit-disabled-opacity)',
+    '--crm-ui-kit-button-padding': '0px 10px',
+    '--crm-ui-kit-button-border-width': '1px',
+    '--crm-ui-kit-button-border-style': 'solid',
+    '--crm-ui-kit-button-border-radius': '3px',
+    '--crm-ui-kit-button-hover-border-width': '1px',
+    '--crm-ui-kit-button-hover-border-style': 'solid',
+    '--crm-ui-kit-button-hover-border-radius': '3px',
+    '--crm-ui-kit-button-success-color': 'var(--crm-ui-kit-color-white)',
+    '--crm-ui-kit-button-success-background-color': 'var(--crm-ui-ki-color-mustard-yellow)',
+    '--crm-ui-kit-button-success-hover-background-color': 'var(--crm-ui-kit-color-amber)',
+    '--crm-ui-kit-button-success-border-color': 'var(--crm-ui-kit-color-goldenrod)',
+    '--crm-ui-kit-button-spinner-border-color': 'var(--crm-ui-kit-color-bright-blue)',
+    '--crm-ui-kit-button-spinner-disabled-border-color': 'var(--crm-ui-kit-color-bright-blue)',
+    '--crm-ui-kit-button-spinner-border-width': '2px',
+    '--crm-ui-kit-button-spinner-circle-size': '16px',
+    '--crm-ui-kit-button-spinner-border-style': 'solid',
 };
-export {
-  t as ButtonNeutralTheme,
-  i as ButtonPrimaryTheme,
-  o as ButtonSecondaryTheme
+export const ButtonNeutralTheme = {
+    ...ButtonBaseThemeValues,
+    '--crm-ui-kit-button-color': 'var(--crm-ui-kit-palette-text-primary)',
+    '--crm-ui-kit-button-border-color': 'var(--crm-ui-kit-palette-border-primary)',
+    '--crm-ui-kit-button-background-color': 'var(--crm-ui-kit-palette-background-primary)',
+    '--crm-ui-kit-button-disabled-color': 'var(--crm-ui-kit-palette-text-primary)',
+    '--crm-ui-kit-button-disabled-background-color': 'var(--crm-ui-kit-palette-background-primary)',
+    '--crm-ui-kit-button-disabled-border-color': 'var(--crm-ui-kit-palette-border-primary)',
+    '--crm-ui-kit-button-hover-color': 'var(--crm-ui-kit-palette-text-primary)',
+    '--crm-ui-kit-button-hover-background-color': 'var(--crm-ui-kit-palette-button-classic-hover-background)',
+    '--crm-ui-kit-button-hover-border-color': 'var(--crm-ui-kit-palette-border-primary)',
+};
+export const ButtonPrimaryTheme = {
+    ...ButtonBaseThemeValues,
+    '--crm-ui-kit-button-color': 'var(--crm-ui-kit-color-white)',
+    '--crm-ui-kit-button-border-color': 'var(--crm-ui-kit-color-cerulean-blue)',
+    '--crm-ui-kit-button-disabled-color': 'var(--crm-ui-kit-palette-text-primary)',
+    '--crm-ui-kit-button-disabled-background-color': 'var(--crm-ui-kit-palette-background-primary)',
+    '--crm-ui-kit-button-disabled-border-color': 'var(--crm-ui-kit-palette-border-primary)',
+    '--crm-ui-kit-button-background-color': 'var(--crm-ui-kit-palette-active-element-900)',
+    '--crm-ui-kit-button-hover-color': 'var(--crm-ui-kit-color-white)',
+    '--crm-ui-kit-button-hover-background-color': 'var(--crm-ui-kit-color-azure-blue)',
+    '--crm-ui-kit-button-hover-border-color': 'var(--crm-ui-kit-color-cerulean-blue)',
+    '--crm-ui-kit-button-spinner-border-color': 'var(--crm-ui-kit-color-white)',
+    '--crm-ui-kit-button-spinner-disabled-border-color': 'var(--crm-ui-kit-color-bright-blue)',
+};
+export const ButtonSecondaryTheme = {
+    ...ButtonBaseThemeValues,
+    '--crm-ui-kit-button-height': '30px',
+    '--crm-ui-kit-button-color': 'var(--crm-ui-kit-palette-text-secondary-light)',
+    '--crm-ui-kit-button-padding': '0px 8px',
+    '--crm-ui-kit-button-border-color': 'transparent',
+    '--crm-ui-kit-button-background-color': 'inherit',
+    '--crm-ui-kit-button-disabled-color': 'var(--crm-ui-kit-palette-text-secondary-light)',
+    '--crm-ui-kit-button-disabled-background-color': 'inherit',
+    '--crm-ui-kit-button-disabled-border-color': 'transparent',
+    '--crm-ui-kit-button-hover-background-color': 'inherit',
+    '--crm-ui-kit-button-hover-border-color': 'transparent',
+    '--crm-ui-kit-button-hover-color': 'var(--crm-ui-kit-palette-text-secondary-light)',
 };

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

@@ -1,6 +1,2 @@
-import { useShowInvalidAnimation as t } from "./useShowInvalidAnimation/useShowInvalidAnimation.js";
-import { useShowSuccessfulState as s } from "./useShowSuccessfulState/useShowSuccessfulState.js";
-export {
-  t as useShowInvalidAnimation,
-  s as useShowSuccessfulState
-};
+export { useShowInvalidAnimation } from './useShowInvalidAnimation/useShowInvalidAnimation';
+export { useShowSuccessfulState } from './useShowSuccessfulState/useShowSuccessfulState';

package/dist/components/Button/hooks/useShowInvalidAnimation/useShowInvalidAnimation.js

@@ -1,16 +1,18 @@
-import { useState as r, useEffect as s } from "react";
-import { noop as u } from "../../../../utils/noop/noop.js";
-const l = (o) => {
-  const [e, t] = r(!1);
-  return s(() => {
-    const n = (i = u) => {
-      t(!0), setTimeout(() => {
-        t(!1), i();
-      }, 400);
-    };
-    o && (o.current = n);
-  }, [o]), e;
-};
-export {
-  l as useShowInvalidAnimation
+import { useEffect, useState } from 'react';
+import { noop } from 'src/utils';
+export const useShowInvalidAnimation = (showInvalidAnimationRef) => {
+    const [shouldShowInvalidAnimation, setShouldShowInvalidAnimation] = useState(false);
+    useEffect(() => {
+        const showInvalidAnimation = (onAnimationEnd = noop) => {
+            setShouldShowInvalidAnimation(true);
+            setTimeout(() => {
+                setShouldShowInvalidAnimation(false);
+                onAnimationEnd();
+            }, 400);
+        };
+        if (showInvalidAnimationRef) {
+            showInvalidAnimationRef.current = showInvalidAnimation;
+        }
+    }, [showInvalidAnimationRef]);
+    return shouldShowInvalidAnimation;
 };

package/dist/components/Button/hooks/useShowSuccessfulState/useShowSuccessfulState.js

@@ -1,16 +1,18 @@
-import { useState as r, useEffect as c } from "react";
-import { noop as S } from "../../../../utils/noop/noop.js";
-const n = (t) => {
-  const [o, e] = r(!1);
-  return c(() => {
-    const s = (u = S) => {
-      e(!0), setTimeout(() => {
-        e(!1), u();
-      }, 1500);
-    };
-    t && (t.current = s);
-  }, [t]), o;
-};
-export {
-  n as useShowSuccessfulState
+import { useEffect, useState } from 'react';
+import { noop } from 'src/utils';
+export const useShowSuccessfulState = (showSuccessfulStateRef) => {
+    const [shouldShowSuccessfulState, setShouldShowSuccessfulState] = useState(false);
+    useEffect(() => {
+        const showSuccessfulState = (onAnimationEnd = noop) => {
+            setShouldShowSuccessfulState(true);
+            setTimeout(() => {
+                setShouldShowSuccessfulState(false);
+                onAnimationEnd();
+            }, 1500);
+        };
+        if (showSuccessfulStateRef) {
+            showSuccessfulStateRef.current = showSuccessfulState;
+        }
+    }, [showSuccessfulStateRef]);
+    return shouldShowSuccessfulState;
 };

package/dist/components/Button/index.js

@@ -1,8 +1,2 @@
-import { Button as o } from "./Button.js";
-import { ButtonNeutralTheme as m, ButtonPrimaryTheme as n, ButtonSecondaryTheme as u } from "./Button.themes.js";
-export {
-  o as Button,
-  m as ButtonNeutralTheme,
-  n as ButtonPrimaryTheme,
-  u as ButtonSecondaryTheme
-};
+export { Button } from './Button';
+export { ButtonNeutralTheme, ButtonPrimaryTheme, ButtonSecondaryTheme, } from './Button.themes';

package/dist/components/Callout/Callout.d.ts

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

package/dist/components/Callout/Callout.js

@@ -1,33 +1,15 @@
-import { jsxs as f, jsx as h } from "react/jsx-runtime";
-import { forwardRef as u, useMemo as N } from "react";
-import { c as e } from "../../index-L8X2o7IH.mjs";
-import { useThemeClassName as _ } from "../../hooks/useThemeClassName/useThemeClassName.js";
-import { omit as d } from "../../utils/omit/omit.js";
-import '../../assets/Callout.css';const w = "_wrapper_9bqqz_1", q = "_icon_9bqqz_8", s = {
-  wrapper: w,
-  icon: q
-}, x = u((r, t) => {
-  const {
-    className: a = "",
-    isIconAvailable: c = !0,
-    theme: o,
-    children: m,
-    ...n
-  } = r, { Icon: i } = o, l = N(() => d(o, ["Icon"]), [o]), p = _(l);
-  return /* @__PURE__ */ f(
-    "div",
-    {
-      ref: t,
-      className: e(s.wrapper, p, a),
-      ...n,
-      children: [
-        c && /* @__PURE__ */ h(i, { className: e(s.icon) }),
-        m
-      ]
-    }
-  );
+import React, { forwardRef, useMemo } from 'react';
+import cx from 'classnames';
+import { useThemeClassName } from 'src/hooks/useThemeClassName';
+import { omit } from 'src/utils';
+import s from './Callout.module.css';
+export const Callout = forwardRef((props, ref) => {
+    const { className = '', isIconAvailable = true, theme, children, ...rest } = props;
+    const { Icon } = theme;
+    const themeStyles = useMemo(() => omit(theme, ['Icon']), [theme]);
+    const themeClassName = useThemeClassName(themeStyles);
+    return (React.createElement("div", { ref: ref, className: cx(s.wrapper, themeClassName, className), ...rest },
+        isIconAvailable && React.createElement(Icon, { className: cx(s.icon) }),
+        children));
 });
-x.displayName = "Callout";
-export {
-  x as Callout
-};
+Callout.displayName = 'Callout';

package/dist/components/Callout/Callout.props.js

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

package/dist/components/Callout/index.js

@@ -1,12 +1,5 @@
-import { Callout as r } from "./Callout.js";
-import { CalloutWarningTheme as t } from "./themes/CalloutWarning.theme.js";
-import { CalloutErrorTheme as a } from "./themes/CalloutError.theme.js";
-import { CalloutSuccessTheme as u } from "./themes/CalloutSuccess.theme.js";
-import { CalloutInfoTheme as x } from "./themes/CalloutInfo.theme.js";
-export {
-  r as Callout,
-  a as CalloutErrorTheme,
-  x as CalloutInfoTheme,
-  u as CalloutSuccessTheme,
-  t as CalloutWarningTheme
-};
+export { Callout } from './Callout';
+export { CalloutWarningTheme } from './themes/CalloutWarning.theme';
+export { CalloutErrorTheme } from './themes/CalloutError.theme';
+export { CalloutSuccessTheme } from './themes/CalloutSuccess.theme';
+export { CalloutInfoTheme } from './themes/CalloutInfo.theme';

package/dist/components/Callout/themes/CalloutBase.theme.js

@@ -1,8 +1,5 @@
-const i = {
-  "--crm-ui-kit-callout-padding": "12px",
-  "--crm-ui-kit-callout-border-radius": "var(--crm-ui-kit-palette-focus-visible-border-radius)",
-  "--crm-ui-kit-callout-icon-color": "var(--crm-ui-kit-palette-text-primary);"
-};
-export {
-  i as CalloutBaseValues
+export const CalloutBaseValues = {
+    '--crm-ui-kit-callout-padding': '12px',
+    '--crm-ui-kit-callout-border-radius': 'var(--crm-ui-kit-palette-focus-visible-border-radius)',
+    '--crm-ui-kit-callout-icon-color': 'var(--crm-ui-kit-palette-text-primary);',
 };

package/dist/components/Callout/themes/CalloutError.theme.js

@@ -1,10 +1,7 @@
-import * as e from "react";
-import { CalloutBaseValues as l } from "./CalloutBase.theme.js";
-const r = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 20, height: 20, fill: "currentColor", ...t }, /* @__PURE__ */ e.createElement("g", { clipPath: "url(#a)" }, /* @__PURE__ */ e.createElement("path", { d: "M8.96 4.75h2.077v4.859l-.403 2.407H9.362L8.96 9.609V4.75Zm-.218 9.363c0-.345.114-.615.341-.812.228-.207.528-.31.9-.31.393 0 .703.103.93.31.227.197.341.467.341.812 0 .344-.114.62-.34.827-.228.207-.538.31-.931.31-.372 0-.672-.103-.9-.31-.227-.207-.34-.483-.34-.827Z" }), /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", d: "M10 1.625a8.375 8.375 0 1 0 0 16.75 8.375 8.375 0 0 0 0-16.75ZM.375 10a9.625 9.625 0 1 1 19.25 0 9.625 9.625 0 0 1-19.25 0Z", clipRule: "evenodd" })), /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("clipPath", { id: "a" }, /* @__PURE__ */ e.createElement("path", { d: "M0 0h20v20H0z" })))), o = {
-  ...l,
-  Icon: r,
-  "--crm-ui-kit-callout-background-color": "var(--crm-ui-kit-palette-callout-error-background-color)"
-};
-export {
-  o as CalloutErrorTheme
+import ErrorIcon from 'src/icons/error.svg';
+import { CalloutBaseValues } from './CalloutBase.theme';
+export const CalloutErrorTheme = {
+    ...CalloutBaseValues,
+    'Icon': ErrorIcon,
+    '--crm-ui-kit-callout-background-color': 'var(--crm-ui-kit-palette-callout-error-background-color)',
 };

package/dist/components/Callout/themes/CalloutInfo.theme.js

@@ -1,10 +1,7 @@
-import * as e from "react";
-import { CalloutBaseValues as l } from "./CalloutBase.theme.js";
-const a = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 20, height: 20, fill: "currentColor", ...t }, /* @__PURE__ */ e.createElement("g", { clipPath: "url(#a)" }, /* @__PURE__ */ e.createElement("path", { d: "M10.972 15.195H9.023V8.7h1.949v6.494ZM10.687 6.475a.956.956 0 0 1-.695.278.927.927 0 0 1-.69-.284.956.956 0 0 1-.279-.695c0-.275.095-.505.285-.69a.956.956 0 0 1 .695-.279c.274 0 .505.095.69.284.186.19.279.422.279.696a.927.927 0 0 1-.285.69Z" }), /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", d: "M10 1.299A8.701 8.701 0 1 0 10 18.7 8.701 8.701 0 0 0 10 1.3ZM0 10C0 4.477 4.477 0 10 0s10 4.477 10 10-4.477 10-10 10S0 15.523 0 10Z", clipRule: "evenodd" })), /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("clipPath", { id: "a" }, /* @__PURE__ */ e.createElement("path", { d: "M0 0h20v20H0z" })))), c = {
-  ...l,
-  Icon: a,
-  "--crm-ui-kit-callout-background-color": "var(--crm-ui-kit-palette-callout-info-background-color)"
-};
-export {
-  c as CalloutInfoTheme
+import InfoIcon from 'src/icons/info.svg';
+import { CalloutBaseValues } from './CalloutBase.theme';
+export const CalloutInfoTheme = {
+    ...CalloutBaseValues,
+    'Icon': InfoIcon,
+    '--crm-ui-kit-callout-background-color': 'var(--crm-ui-kit-palette-callout-info-background-color)',
 };

package/dist/components/Callout/themes/CalloutSuccess.theme.js

@@ -1,10 +1,7 @@
-import * as e from "react";
-import { CalloutBaseValues as l } from "./CalloutBase.theme.js";
-const r = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 20, height: 20, fill: "none", ...t }, /* @__PURE__ */ e.createElement("g", { clipPath: "url(#a)" }, /* @__PURE__ */ e.createElement("path", { fill: "none", stroke: "currentColor", strokeWidth: 1.299, d: "M.65 10a9.35 9.35 0 1 1 18.7 0 9.35 9.35 0 0 1-18.7 0Z" }), /* @__PURE__ */ e.createElement("path", { fill: "none", stroke: "currentColor", strokeWidth: 1.299, d: "M.65 10a9.35 9.35 0 1 1 18.7 0 9.35 9.35 0 0 1-18.7 0Z" }), /* @__PURE__ */ e.createElement("path", { fill: "none", stroke: "currentColor", strokeWidth: 1.455, d: "m5.328 10 3.117 3.117 6.234-6.234" })), /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("clipPath", { id: "a" }, /* @__PURE__ */ e.createElement("path", { d: "M0 0h20v20H0z" })))), c = {
-  ...l,
-  Icon: r,
-  "--crm-ui-kit-callout-background-color": "var(--crm-ui-kit-palette-callout-success-background-color)"
-};
-export {
-  c as CalloutSuccessTheme
+import SuccessIcon from 'src/icons/success.svg';
+import { CalloutBaseValues } from './CalloutBase.theme';
+export const CalloutSuccessTheme = {
+    ...CalloutBaseValues,
+    'Icon': SuccessIcon,
+    '--crm-ui-kit-callout-background-color': 'var(--crm-ui-kit-palette-callout-success-background-color)',
 };

package/dist/components/Callout/themes/CalloutWarning.theme.js

@@ -1,10 +1,7 @@
-import * as e from "react";
-import { CalloutBaseValues as t } from "./CalloutBase.theme.js";
-const r = (l) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 20, height: 20, fill: "none", ...l }, /* @__PURE__ */ e.createElement("g", { clipPath: "url(#a)" }, /* @__PURE__ */ e.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M9 15.207c0-.312.097-.565.292-.76.195-.194.468-.272.799-.272.35 0 .623.097.818.272.195.195.292.448.292.76s-.097.565-.292.76c-.195.195-.467.292-.818.292-.331 0-.585-.097-.799-.292-.195-.195-.292-.448-.292-.76Zm.195-8.688h1.831v4.5l-.35 2.22h-1.13l-.351-2.22v-4.5Z", clipRule: "evenodd" }), /* @__PURE__ */ e.createElement("path", { fill: "none", stroke: "currentColor", strokeWidth: 1.3, d: "M8.666 2.47a1.542 1.542 0 0 1 2.671 0l7.804 13.518a1.542 1.542 0 0 1-1.335 2.313H2.197a1.542 1.542 0 0 1-1.335-2.313L8.666 2.47Z" })), /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("clipPath", { id: "a" }, /* @__PURE__ */ e.createElement("path", { fill: "currentColor", d: "M0 0h20v20H0z" })))), o = {
-  ...t,
-  Icon: r,
-  "--crm-ui-kit-callout-background-color": "var(--crm-ui-kit-palette-callout-warning-background-color)"
-};
-export {
-  o as CalloutWarningTheme
+import WarningIcon from 'src/icons/warning.svg';
+import { CalloutBaseValues } from './CalloutBase.theme';
+export const CalloutWarningTheme = {
+    ...CalloutBaseValues,
+    'Icon': WarningIcon,
+    '--crm-ui-kit-callout-background-color': 'var(--crm-ui-kit-palette-callout-warning-background-color)',
 };

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,3 +1,3 @@
-import { CheckboxType } from './Checkbox.props';
+import { type CheckboxType } from './Checkbox.props';
 export declare const Checkbox: CheckboxType;
 //# sourceMappingURL=Checkbox.d.ts.map

package/dist/components/Checkbox/Checkbox.js

@@ -1,56 +1,21 @@
-import { jsxs as u, jsx as s } from "react/jsx-runtime";
-import { forwardRef as _ } from "react";
-import { c as t } from "../../index-L8X2o7IH.mjs";
-import { useThemeClassName as d } from "../../hooks/useThemeClassName/useThemeClassName.js";
-import { VisuallyHiddenInput as h } from "../VisuallyHiddenInput/VisuallyHiddenInput.js";
-import { Label as b } from "../Label/Label.js";
-import { isTouchableDevice as v } from "../../lib/utils.js";
-import '../../assets/Checkbox.css';const x = "_wrapper_1u7sv_1", f = "_input_1u7sv_6", k = "_checkbox_1u7sv_7", N = "_indeterminate_1u7sv_7", w = "_invalid_1u7sv_50", y = "_touchable_1u7sv_54", e = {
-  wrapper: x,
-  input: f,
-  checkbox: k,
-  indeterminate: N,
-  invalid: w,
-  touchable: y
-}, a = _((i, o) => {
-  const {
-    className: c = "",
-    checkedStyle: n,
-    isInvalid: r,
-    theme: m,
-    ...p
-  } = i, l = d(m);
-  return /* @__PURE__ */ u(
-    "div",
-    {
-      className: t(e.wrapper, l, c, {
-        [e.touchable]: v()
-      }),
-      children: [
-        /* @__PURE__ */ s(
-          h,
-          {
-            className: t(e.input),
-            ref: o,
-            type: "checkbox",
-            ...p
-          }
-        ),
-        /* @__PURE__ */ s(
-          "span",
-          {
-            className: t(e.checkbox, {
-              [e.indeterminate]: n === "indeterminate",
-              [e.invalid]: r
-            })
-          }
-        )
-      ]
-    }
-  );
+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 { isTouchableDevice } from 'src/lib/utils';
+import s from './Checkbox.module.css';
+export const Checkbox = forwardRef((props, ref) => {
+    const { className = '', checkedStyle, isInvalid, theme, ...rest } = props;
+    const themeClassName = useThemeClassName(theme);
+    return (React.createElement("div", { className: cx(s.wrapper, themeClassName, className, {
+            [s.touchable]: isTouchableDevice(),
+        }) },
+        React.createElement(VisuallyHiddenInput, { className: cx(s.input), ref: ref, type: "checkbox", ...rest }),
+        React.createElement("span", { className: cx(s.checkbox, {
+                [s.indeterminate]: checkedStyle === 'indeterminate',
+                [s.invalid]: isInvalid,
+            }) })));
 });
-a.displayName = "Checkbox";
-a.Label = b;
-export {
-  a as Checkbox
-};
+Checkbox.displayName = 'Checkbox';
+Checkbox.Label = Label;

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

@@ -1,6 +1,6 @@
-import { VisuallyHiddenInputProps } from '../VisuallyHiddenInput/VisuallyHiddenInput.props';
-import { LabelProps } from '../Label';
-import { CheckboxThemeType } from './Checkbox.themes';
+import { type VisuallyHiddenInputProps } from 'src/components/VisuallyHiddenInput/VisuallyHiddenInput.props';
+import { type LabelProps } from 'src/components/Label';
+import { type CheckboxThemeType } from './Checkbox.themes';
 export type CheckedStyleType = 'mark' | 'indeterminate';
 export type BaseCheckboxProps = {
     /**

package/dist/components/Checkbox/Checkbox.props.js

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

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

@@ -1,4 +1,4 @@
-import { LabelThemeType } from '../Label';
+import { type LabelThemeType } from 'src/components/Label';
 type CheckboxThemeKey = '--crm-ui-kit-checkbox-size' | '--crm-ui-kit-checkbox-z-index' | '--crm-ui-kit-checkbox-background-color' | '--crm-ui-kit-checkbox-disabled-background-color' | '--crm-ui-kit-checkbox-border-width' | '--crm-ui-kit-checkbox-border-radius' | '--crm-ui-kit-checkbox-border-style' | '--crm-ui-kit-checkbox-border-color' | '--crm-ui-kit-checkbox-error-border-color' | '--crm-ui-kit-checkbox-checked-background' | '--crm-ui-kit-checkbox-indeterminate-background' | '--crm-ui-kit-checkbox-focus-visible-outline-color' | '--crm-ui-kit-checkbox-focus-visible-outline-width' | '--crm-ui-kit-checkbox-focus-visible-outline-style' | '--crm-ui-kit-checkbox-focus-visible-outline-offset' | '--crm-ui-kit-checkbox-focus-visible-border-radius';
 export type CheckboxThemeType = {
     [K in CheckboxThemeKey]: string;

package/dist/components/Checkbox/Checkbox.themes.js

@@ -1,46 +1,42 @@
-import "../Label/Label.js";
-import { LabelTheme as i } from "../Label/Label.theme.js";
-const c = {
-  "--crm-ui-kit-checkbox-z-index": "3",
-  "--crm-ui-kit-checkbox-border-width": "1px",
-  "--crm-ui-kit-checkbox-border-radius": "3px",
-  "--crm-ui-kit-checkbox-border-style": "solid",
-  "--crm-ui-kit-checkbox-background-color": "var(--crm-ui-kit-palette-background-primary)",
-  "--crm-ui-kit-checkbox-disabled-background-color": "var(--crm-ui-kit-palette-background-primary-disabled)",
-  "--crm-ui-kit-checkbox-error-border-color": "var(--crm-ui-kit-color-error)",
-  "--crm-ui-kit-checkbox-checked-background": "var(--crm-ui-kit-checkbox-background-color) var(--crm-ui-kit-icon-checked-mark) no-repeat center / 70%",
-  "--crm-ui-kit-checkbox-indeterminate-background": "var(--crm-ui-kit-checkbox-background-color) var(--crm-ui-kit-icon-minus) no-repeat center",
-  "--crm-ui-kit-checkbox-focus-visible-outline-color": "var(--crm-ui-kit-palette-focus-visible-color)",
-  "--crm-ui-kit-checkbox-focus-visible-outline-width": "var(--crm-ui-kit-palette-focus-visible-outline-width)",
-  "--crm-ui-kit-checkbox-focus-visible-outline-style": "var(--crm-ui-kit-palette-focus-visible-outline-style)",
-  "--crm-ui-kit-checkbox-focus-visible-outline-offset": "var(--crm-ui-kit-palette-focus-visible-outline-offset)",
-  "--crm-ui-kit-checkbox-focus-visible-border-radius": "var(--crm-ui-kit-palette-focus-visible-border-radius)"
-}, o = {
-  ...c,
-  "--crm-ui-kit-checkbox-size": "20px",
-  "--crm-ui-kit-checkbox-border-color": "var(--crm-ui-kit-palette-border-default)"
-}, t = {
-  ...c,
-  "--crm-ui-kit-checkbox-size": "16px",
-  "--crm-ui-kit-checkbox-border-color": "var(--crm-ui-kit-palette-border-default)"
-}, k = {
-  ...c,
-  "--crm-ui-kit-checkbox-size": "20px",
-  "--crm-ui-kit-checkbox-border-color": "var(--crm-ui-kit-palette-border-primary)"
-}, u = {
-  ...c,
-  "--crm-ui-kit-checkbox-size": "16px",
-  "--crm-ui-kit-checkbox-border-color": "var(--crm-ui-kit-palette-border-primary)"
-}, b = {
-  ...i,
-  "--crm-ui-kit-label-description-spacing": "8px",
-  "--crm-ui-kit-label-spacing": "8px"
+import { LabelTheme } from 'src/components/Label';
+export const CheckboxBaseValues = {
+    '--crm-ui-kit-checkbox-z-index': '3',
+    '--crm-ui-kit-checkbox-border-width': '1px',
+    '--crm-ui-kit-checkbox-border-radius': '3px',
+    '--crm-ui-kit-checkbox-border-style': 'solid',
+    '--crm-ui-kit-checkbox-background-color': 'var(--crm-ui-kit-palette-background-primary)',
+    '--crm-ui-kit-checkbox-disabled-background-color': 'var(--crm-ui-kit-palette-background-primary-disabled)',
+    '--crm-ui-kit-checkbox-error-border-color': 'var(--crm-ui-kit-color-error)',
+    '--crm-ui-kit-checkbox-checked-background': 'var(--crm-ui-kit-checkbox-background-color) var(--crm-ui-kit-icon-checked-mark) no-repeat center / 70%',
+    '--crm-ui-kit-checkbox-indeterminate-background': 'var(--crm-ui-kit-checkbox-background-color) var(--crm-ui-kit-icon-minus) no-repeat center',
+    '--crm-ui-kit-checkbox-focus-visible-outline-color': 'var(--crm-ui-kit-palette-focus-visible-color)',
+    '--crm-ui-kit-checkbox-focus-visible-outline-width': 'var(--crm-ui-kit-palette-focus-visible-outline-width)',
+    '--crm-ui-kit-checkbox-focus-visible-outline-style': 'var(--crm-ui-kit-palette-focus-visible-outline-style)',
+    '--crm-ui-kit-checkbox-focus-visible-outline-offset': 'var(--crm-ui-kit-palette-focus-visible-outline-offset)',
+    '--crm-ui-kit-checkbox-focus-visible-border-radius': 'var(--crm-ui-kit-palette-focus-visible-border-radius)',
 };
-export {
-  c as CheckboxBaseValues,
-  k as CheckboxDarkTheme,
-  b as CheckboxLabelTheme,
-  o as CheckboxLightTheme,
-  u as CheckboxSmallDarkTheme,
-  t as CheckboxSmallLightTheme
+export const CheckboxLightTheme = {
+    ...CheckboxBaseValues,
+    '--crm-ui-kit-checkbox-size': '20px',
+    '--crm-ui-kit-checkbox-border-color': 'var(--crm-ui-kit-palette-border-default)',
+};
+export const CheckboxSmallLightTheme = {
+    ...CheckboxBaseValues,
+    '--crm-ui-kit-checkbox-size': '16px',
+    '--crm-ui-kit-checkbox-border-color': 'var(--crm-ui-kit-palette-border-default)',
+};
+export const CheckboxDarkTheme = {
+    ...CheckboxBaseValues,
+    '--crm-ui-kit-checkbox-size': '20px',
+    '--crm-ui-kit-checkbox-border-color': 'var(--crm-ui-kit-palette-border-primary)',
+};
+export const CheckboxSmallDarkTheme = {
+    ...CheckboxBaseValues,
+    '--crm-ui-kit-checkbox-size': '16px',
+    '--crm-ui-kit-checkbox-border-color': 'var(--crm-ui-kit-palette-border-primary)',
+};
+export const CheckboxLabelTheme = {
+    ...LabelTheme,
+    '--crm-ui-kit-label-description-spacing': '8px',
+    '--crm-ui-kit-label-spacing': '8px',
 };

package/dist/components/Checkbox/index.js

@@ -1,10 +1,2 @@
-import { Checkbox as o } from "./Checkbox.js";
-import { CheckboxDarkTheme as k, CheckboxLabelTheme as x, CheckboxLightTheme as b, CheckboxSmallDarkTheme as c, CheckboxSmallLightTheme as r } from "./Checkbox.themes.js";
-export {
-  o as Checkbox,
-  k as CheckboxDarkTheme,
-  x as CheckboxLabelTheme,
-  b as CheckboxLightTheme,
-  c as CheckboxSmallDarkTheme,
-  r as CheckboxSmallLightTheme
-};
+export { Checkbox } from './Checkbox';
+export { CheckboxLightTheme, CheckboxDarkTheme, CheckboxSmallLightTheme, CheckboxSmallDarkTheme, CheckboxLabelTheme, } from './Checkbox.themes';