@max-ts/components 0.2.1 → 0.2.3

package/lib/components/Autocomplete/Autocomplete.mjs

@@ -1,92 +1,92 @@
 import { j as r } from "../../_virtual/jsx-runtime.mjs";
 import { useCallback as n, createElement as y } from "react";
-import { ListItemIcon as F, Popper as M, Autocomplete as H } from "@mui/material";
+import { ListItemIcon as F, Popper as M, Autocomplete as z, SvgIcon as H } from "@mui/material";
 import { Checkbox as N } from "../Checkbox/Checkbox.mjs";
 import { CircularProgress as V } from "../CircularProgress/CircularProgress.mjs";
 import { OverflowTypography as q } from "../OverflowTypography/OverflowTypography.mjs";
-import { Tag as z } from "../Tag/Tag.mjs";
-import { TextField as B } from "../TextField/TextField.mjs";
-import { X as C, ChevronDown as W } from "lucide-react";
-import { DEFAULT_PLACEHOLDER as X, DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT as $ } from "./constants.mjs";
-import { StyledMenuItem as G } from "./styles.mjs";
-import { useLogic as J } from "./useLogic/useLogic.mjs";
-const ue = (d) => {
-  const { isValueEmpty: x, isPopperVisible: f, autocompleteProps: R } = J(d), {
+import { Tag as B } from "../Tag/Tag.mjs";
+import { TextField as W } from "../TextField/TextField.mjs";
+import { X as C, ChevronDown as X } from "lucide-react";
+import { DEFAULT_PLACEHOLDER as $, DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT as G } from "./constants.mjs";
+import { StyledMenuItem as J } from "./styles.mjs";
+import { useLogic as K } from "./useLogic/useLogic.mjs";
+const de = (d) => {
+  const { isValueEmpty: x, isPopperVisible: f, autocompleteProps: R } = K(d), {
     required: T,
     success: E,
-    error: O,
-    label: h,
+    error: h,
+    label: j,
     getOptionLabel: l,
-    helperText: j,
-    inputRef: I,
+    helperText: I,
+    inputRef: O,
     multiple: t,
     size: i = "medium",
-    placeholder: g = X,
+    placeholder: g = $,
     overflowOption: L,
     closeText: k = "Закрыть",
     openText: A = "Открыть",
     clearText: D = "Очистить",
     loadingText: P = /* @__PURE__ */ r.jsx(V, { color: "primary" }),
-    isLoadedDataError: K,
-    loadedDataError: Q,
-    noOptionsText: Y,
-    autoHighlight: Z,
-    renderInput: p,
-    renderTags: s,
-    renderOption: c,
-    ..._
-  } = d, w = n(
+    isLoadedDataError: Q,
+    loadedDataError: Y,
+    noOptionsText: Z,
+    autoHighlight: ee,
+    renderInput: s,
+    renderTags: c,
+    renderOption: p,
+    ...S
+  } = d, _ = n(
     (e) => {
       const o = {
         ...e,
-        inputRef: I,
+        inputRef: O,
         required: T,
         placeholder: x ? g : "",
-        label: h,
+        label: j,
         success: E,
-        error: O,
-        helperText: j,
+        error: h,
+        helperText: I,
         size: i
       };
-      return p ? p(o) : /* @__PURE__ */ r.jsx(B, { ...o });
+      return s ? s(o) : /* @__PURE__ */ r.jsx(W, { ...o });
     },
     [
       x,
-      p,
-      I,
+      s,
+      O,
       T,
       g,
-      h,
-      E,
-      O,
       j,
+      E,
+      h,
+      I,
       i
     ]
-  ), S = n(
+  ), v = n(
     (e, o, m, a) => {
-      if (c)
-        return c(
+      if (p)
+        return p(
           e,
           o,
           m,
           a
         );
       const u = !!e["aria-selected"];
-      return /* @__PURE__ */ y(G, { ...e, key: e.id }, t && /* @__PURE__ */ r.jsx(F, { children: /* @__PURE__ */ r.jsx(N, { role: "menuitemcheckbox", checked: u }) }), /* @__PURE__ */ r.jsx(
+      return /* @__PURE__ */ y(J, { ...e, key: e.id }, t && /* @__PURE__ */ r.jsx(F, { children: /* @__PURE__ */ r.jsx(N, { role: "menuitemcheckbox", checked: u }) }), /* @__PURE__ */ r.jsx(
         q,
         {
-          rowsCount: $,
+          rowsCount: G,
           ...L,
           children: e.key
         }
       ));
     },
-    [t, L, c]
-  ), U = n(
-    (e, o, m) => s ? s(e, o, m) : e.map((a, u) => {
+    [t, L, p]
+  ), w = n(
+    (e, o, m) => c ? c(e, o, m) : e.map((a, u) => {
       const b = l?.(a) || "";
       return /* @__PURE__ */ y(
-        z,
+        B,
         {
           deleteIcon: /* @__PURE__ */ r.jsx(C, {}),
           color: "grey",
@@ -96,15 +96,15 @@ const ue = (d) => {
         }
       );
     }),
-    [l, s]
-  ), v = n(
+    [l, c]
+  ), U = n(
     (e) => f ? /* @__PURE__ */ r.jsx(M, { ...e }) : null,
     [f]
   );
   return /* @__PURE__ */ r.jsx(
-    H,
+    z,
     {
-      ..._,
+      ...S,
       size: i,
       clearText: D,
       closeText: k,
@@ -112,23 +112,23 @@ const ue = (d) => {
       loadingText: P,
       multiple: t,
       disableCloseOnSelect: t,
-      clearIcon: /* @__PURE__ */ r.jsx(C, {}),
-      popupIcon: /* @__PURE__ */ r.jsx(W, {}),
+      clearIcon: /* @__PURE__ */ r.jsx(H, { children: /* @__PURE__ */ r.jsx(C, {}) }),
+      popupIcon: /* @__PURE__ */ r.jsx(X, { size: 16 }),
       forcePopupIcon: !0,
       slotProps: {
         clearIndicator: { disableRipple: !0 },
         popper: {
-          component: v
+          component: U
         }
       },
       getOptionLabel: l,
-      renderInput: w,
-      renderTags: U,
-      renderOption: S,
+      renderInput: _,
+      renderTags: w,
+      renderOption: v,
       ...R
     }
   );
 };
 export {
-  ue as Autocomplete
+  de as Autocomplete
 };

package/lib/components/DataGrid/useLogic/utils/getGridTemplateColumns/getGridTemplateColumns.mjs

@@ -1,4 +1,4 @@
-const e = (t) => t.map(({ width: n }) => n || "1fr").join(" ");
+const t = (r) => r.map(({ width: n }) => typeof n == "number" ? `${n}px` : n || "1fr").join(" ");
 export {
-  e as getGridTemplateColumns
+  t as getGridTemplateColumns
 };

package/lib/components/SearchField/SearchField.d.ts

@@ -1,3 +1,5 @@
 import { TextFieldProps } from '../TextField';
-export type SearchFieldProps = Omit<TextFieldProps, 'startAdornment' | 'endAdornment'>;
+export type SearchFieldProps = Omit<TextFieldProps, 'startAdornment' | 'endAdornment'> & {
+    delay?: number;
+};
 export declare const SearchField: import('react').ForwardRefExoticComponent<Omit<SearchFieldProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

package/lib/components/SearchField/SearchField.mjs

@@ -1,57 +1,60 @@
-import { j as n } from "../../_virtual/jsx-runtime.mjs";
-import { forwardRef as S, useState as h, useRef as C } from "react";
-import { StyledTextField as j, StyledIconButton as b, StyledCloseFillSm as y, StyledSearchIcon as A } from "./styles.mjs";
-const w = S(
+import { j as r } from "../../_virtual/jsx-runtime.mjs";
+import { forwardRef as j, useState as b, useRef as i } from "react";
+import { StyledTextField as y, StyledIconButton as A, StyledCloseFillSm as R, StyledSearchIcon as g } from "./styles.mjs";
+const B = j(
   ({
-    margin: c = "none",
-    placeholder: s = "Поиск",
-    onChange: r,
-    disabled: l,
-    value: i,
-    defaultValue: d,
-    ...f
-  }, m) => {
-    const [o, u] = h(`${d || i || ""}`), e = C(null), p = (t) => {
-      u(t.target.value), r?.(t);
-    }, v = () => {
-      u(""), e.current && (e.current.value = "");
-      const t = new InputEvent("input", {
+    margin: s = "none",
+    placeholder: d = "Поиск",
+    onChange: l,
+    disabled: u,
+    value: m,
+    defaultValue: f,
+    delay: p = 600,
+    ...v
+  }, x) => {
+    const [c, o] = b(`${f || m || ""}`), t = i(null), e = i(null), S = (n) => {
+      o(n.target.value), t.current && clearTimeout(t.current), t.current = setTimeout(() => {
+        l?.(n);
+      }, p);
+    }, h = () => {
+      o(""), e.current && (e.current.value = ""), t.current && clearTimeout(t.current);
+      const n = new InputEvent("input", {
         bubbles: !0,
         cancelable: !0
       });
-      Object.defineProperty(t, "target", {
+      Object.defineProperty(n, "target", {
         writable: !0,
         value: e.current
-      }), r?.(t), e.current?.focus();
-    }, x = () => {
+      }), l?.(n), e.current?.focus();
+    }, C = () => {
       e.current?.focus();
-    }, a = !!o.length;
-    return /* @__PURE__ */ n.jsx(
-      j,
+    }, a = !!c.length;
+    return /* @__PURE__ */ r.jsx(
+      y,
       {
-        margin: c,
-        placeholder: s,
-        startAdornment: /* @__PURE__ */ n.jsx(A, { onClick: x }),
-        disabled: l,
-        endAdornment: /* @__PURE__ */ n.jsx(
-          b,
+        margin: s,
+        placeholder: d,
+        startAdornment: /* @__PURE__ */ r.jsx(g, { onClick: C }),
+        disabled: u,
+        endAdornment: /* @__PURE__ */ r.jsx(
+          A,
           {
             variant: "text",
-            onClick: v,
-            disabled: l || !a,
+            onClick: h,
+            disabled: u || !a,
             $isActive: a,
-            children: /* @__PURE__ */ n.jsx(y, {})
+            children: /* @__PURE__ */ r.jsx(R, {})
           }
         ),
-        onChange: p,
-        value: o,
-        ref: m,
+        onChange: S,
+        value: c,
+        ref: x,
         inputRef: e,
-        ...f
+        ...v
       }
     );
   }
 );
 export {
-  w as SearchField
+  B as SearchField
 };

package/lib/components/SearchField/styles.mjs

@@ -1,10 +1,10 @@
 import { styled as o } from "@mui/material";
-import { Search as e, CircleX as r } from "lucide-react";
+import { Search as e, X as r } from "lucide-react";
 import { IconButton as l } from "../IconButton/IconButton.mjs";
 import { TextField as i } from "../TextField/TextField.mjs";
-const a = o(e)`
+const d = o(e)`
   color: ${({ theme: t }) => t.palette.grey[600]};
-`, d = o(l, {
+`, a = o(l, {
   shouldForwardProp: (t) => !["$isActive"].includes(t.toString())
 })`
   opacity: ${({ $isActive: t }) => t ? 1 : 0};
@@ -13,23 +13,21 @@ const a = o(e)`
     background-color: transparent;
 
     svg {
-      fill: ${({ theme: t }) => t.palette.grey[700]};
+      stroke: ${({ theme: t }) => t.palette.grey[700]};
     }
   }
 `, m = o(i)`
   & .MuiFormHelperText-root {
-    /* TODO Убрать после реализации https://track.astral.ru/soft/browse/UIKIT-1333 */
     display: none;
   }
 `, y = o(r)`
   width: 16px;
   height: 16px;
-
-  fill: ${({ theme: t }) => t.palette.grey[500]};
+  stroke: ${({ theme: t }) => t.palette.grey[500]};
 `;
 export {
   y as StyledCloseFillSm,
-  d as StyledIconButton,
-  a as StyledSearchIcon,
+  a as StyledIconButton,
+  d as StyledSearchIcon,
   m as StyledTextField
 };

package/lib/components/Select/Select.d.ts

@@ -4,7 +4,7 @@ import { WithoutEmotionSpecific } from '../types';
 export type SelectProps<Value> = WithoutEmotionSpecific<Omit<MuiSelectProps<Value>, 'variant'>> & {
     loading?: boolean;
     placeholder?: string;
-    getOptionLabel?: (value: string | number) => string | number;
+    getOptionLabel?: (value: Value) => string | number;
     /**
      * Добавляет вспомогательный текст под селектом
      */
@@ -22,4 +22,4 @@ export type SelectProps<Value> = WithoutEmotionSpecific<Omit<MuiSelectProps<Valu
     error?: boolean;
     label?: string;
 };
-export declare const Select: <Value>({ required, getOptionLabel, placeholder, helperText, hideHelperText, loading, success, children, disabled, error, label, fullWidth, onChange: externalOnChange, isShowClearButton, ...props }: SelectProps<Value>) => import("react/jsx-runtime").JSX.Element;
+export declare function Select<Value>({ required, getOptionLabel, placeholder, helperText, hideHelperText, loading, success, children, disabled, error, label, fullWidth, onChange: externalOnChange, isShowClearButton, ...props }: SelectProps<Value>): import("react/jsx-runtime").JSX.Element;

package/lib/components/Select/Select.mjs

@@ -5,25 +5,26 @@ import { FormHelperText as R } from "../FormHelperText/FormHelperText.mjs";
 import "react";
 import "../FormHelperText/FormHelperTextContent/styles.mjs";
 import { MenuItem as w } from "../MenuItem/MenuItem.mjs";
-import { TagsList as D } from "../TagsList/TagsList.mjs";
-import { ChevronDown as H, ChevronUp as M } from "lucide-react";
-import { CLEAR_TEXT as f } from "./constants.mjs";
-import { StyledSelect as N, Placeholder as U, ProgressWrapper as V, EndAdornmentWrapper as W, StyledIconButton as C, StyledCloseFillSm as X } from "./styles.mjs";
-import { useLogic as _ } from "./useLogic/useLogic.mjs";
-const q = ({ onClick: s, disabled: e, ref: t }) => /* @__PURE__ */ r.jsx(
+import { TagsList as z } from "../TagsList/TagsList.mjs";
+import { ChevronDown as D, ChevronUp as H } from "lucide-react";
+import { CLEAR_TEXT as h } from "./constants.mjs";
+import { StyledSelect as M, Placeholder as N, ProgressWrapper as U, EndAdornmentWrapper as V, StyledIconButton as C, StyledCloseFillSm as W } from "./styles.mjs";
+import { useLogic as X } from "./useLogic/useLogic.mjs";
+const _ = ({ onClick: s, disabled: o, ref: t }) => /* @__PURE__ */ r.jsx(
   C,
   {
-    disabled: e,
+    disabled: o,
     ref: t,
     onClick: s,
     variant: "text",
-    title: f,
-    "aria-label": f,
-    children: /* @__PURE__ */ r.jsx(X, {})
+    title: h,
+    "aria-label": h,
+    children: /* @__PURE__ */ r.jsx(W, {})
   }
-), nr = ({
+);
+function nr({
   required: s,
-  getOptionLabel: e = (i) => i,
+  getOptionLabel: o = (i) => String(i),
   placeholder: t,
   helperText: d,
   hideHelperText: v = !1,
@@ -31,13 +32,13 @@ const q = ({ onClick: s, disabled: e, ref: t }) => /* @__PURE__ */ r.jsx(
   success: y,
   children: c,
   disabled: l,
-  error: p,
-  label: u,
+  error: u,
+  label: p,
   fullWidth: x,
   onChange: n,
   isShowClearButton: g,
   ...j
-}) => {
+}) {
   const {
     isOpened: i,
     isShowingClearButton: S,
@@ -46,16 +47,16 @@ const q = ({ onClick: s, disabled: e, ref: t }) => /* @__PURE__ */ r.jsx(
     openSelect: a,
     closeSelect: I,
     resetButtonRef: k
-  } = _({
+  } = X({
     ...j,
     children: c,
     onChange: n,
     isShowClearButton: g
-  }), B = (o) => {
-    if (Array.isArray(o) && o.length) {
-      const F = (h) => n?.(h ? {
+  }), B = (e) => {
+    if (Array.isArray(e) && e.length) {
+      const F = (f) => n?.(f ? {
         target: {
-          value: h
+          value: f
         }
       } : {
         target: {
@@ -63,22 +64,22 @@ const q = ({ onClick: s, disabled: e, ref: t }) => /* @__PURE__ */ r.jsx(
         }
       }, void 0);
       return /* @__PURE__ */ r.jsx(
-        D,
+        z,
         {
-          data: o,
+          data: e,
           keyId: "value",
-          getOptionLabel: e,
+          getOptionLabel: o,
           onChange: F,
           onClick: a
         }
       );
     }
-    return (Array.isArray(o) || typeof o == "string") && !o.length ? t : e(o);
+    return (Array.isArray(e) || typeof e == "string") && !e.length ? t : o(e);
   };
-  return /* @__PURE__ */ r.jsxs(T, { error: p, fullWidth: x, children: [
-    u && /* @__PURE__ */ r.jsx(L, { htmlFor: "grouped-select", required: s, children: u }),
+  return /* @__PURE__ */ r.jsxs(T, { error: u, fullWidth: x, children: [
+    p && /* @__PURE__ */ r.jsx(L, { htmlFor: "grouped-select", required: s, children: p }),
     /* @__PURE__ */ r.jsxs(
-      N,
+      M,
       {
         ...j,
         open: i,
@@ -90,9 +91,9 @@ const q = ({ onClick: s, disabled: e, ref: t }) => /* @__PURE__ */ r.jsx(
         displayEmpty: !0,
         fullWidth: x,
         onChange: n,
-        endAdornment: /* @__PURE__ */ r.jsxs(W, { children: [
+        endAdornment: /* @__PURE__ */ r.jsxs(V, { children: [
           S && /* @__PURE__ */ r.jsx(
-            q,
+            _,
             {
               disabled: l,
               ref: k,
@@ -105,21 +106,21 @@ const q = ({ onClick: s, disabled: e, ref: t }) => /* @__PURE__ */ r.jsx(
               variant: "text",
               disabled: l,
               onClick: a,
-              children: i ? /* @__PURE__ */ r.jsx(M, {}) : /* @__PURE__ */ r.jsx(H, {})
+              children: i ? /* @__PURE__ */ r.jsx(H, { size: 16 }) : /* @__PURE__ */ r.jsx(D, { size: 16 })
             }
           )
         ] }),
         children: [
-          /* @__PURE__ */ r.jsx(U, { value: "", children: t }),
-          m && /* @__PURE__ */ r.jsx(V, { children: /* @__PURE__ */ r.jsx(P, { color: "primary" }) }),
+          /* @__PURE__ */ r.jsx(N, { value: "", children: t }),
+          m && /* @__PURE__ */ r.jsx(U, { children: /* @__PURE__ */ r.jsx(P, { color: "primary" }) }),
           !m && c,
           !m && A && /* @__PURE__ */ r.jsx(w, { disabled: !0, children: "Нет данных" })
         ]
       }
     ),
-    !v && /* @__PURE__ */ r.jsx(R, { error: p, success: y, children: d })
+    !v && /* @__PURE__ */ r.jsx(R, { error: u, success: y, children: d })
   ] });
-};
+}
 export {
   nr as Select
 };

package/lib/components/Select/styles.d.ts

@@ -19,5 +19,5 @@ export declare const StyledIconButton: import('@emotion/styled').StyledComponent
     loading?: boolean;
 } & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
 export declare const StyledCloseFillSm: import('@emotion/styled').StyledComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
-export declare const EndAdornmentWrapper: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const EndAdornmentWrapper: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
 export declare const StyledSelect: typeof Select;

package/lib/components/Select/styles.mjs

@@ -1,8 +1,8 @@
 import { styled as t, selectClasses as r, Select as o } from "@mui/material";
 import { CircleX as n } from "lucide-react";
-import { IconButton as l } from "../IconButton/IconButton.mjs";
-import { MenuItem as i } from "../MenuItem/MenuItem.mjs";
-const d = t("div")`
+import { IconButton as i } from "../IconButton/IconButton.mjs";
+import { MenuItem as l } from "../MenuItem/MenuItem.mjs";
+const c = t("div")`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -14,16 +14,17 @@ const d = t("div")`
 
     color: ${({ theme: e }) => e.palette.grey[900]};
   }
-`, g = t(i)`
+`, g = t(l)`
   display: none;
-`, m = t(l)`
-  background-color: transparent;
-
+`, m = t(i)`
+  padding: 0;
+  svg {
+    stroke: ${({ theme: e }) => e.palette.grey[600]};
+  }
   &:hover {
     background-color: transparent;
-
     svg {
-      fill: ${({ theme: e }) => e.palette.grey[700]};
+      stroke: ${({ theme: e }) => e.palette.grey[700]};
     }
   }
 
@@ -34,23 +35,24 @@ const d = t("div")`
 `, h = t(n)`
   width: 16px;
   height: 16px;
-
-  fill: ${({ theme: e }) => e.palette.grey[500]};
-`, f = t("div")`
+  padding: 0;
+`, y = t("div", {
+  label: "EndAdornmentWrapper"
+})`
   display: flex;
   align-items: center;
 
   margin-left: auto;
-`, y = t(o)`
+`, x = t(o)`
   .${r.select} {
     padding-right: ${({ theme: e }) => e.spacing(2)} !important;
   }
 `;
 export {
-  f as EndAdornmentWrapper,
+  y as EndAdornmentWrapper,
   g as Placeholder,
-  d as ProgressWrapper,
+  c as ProgressWrapper,
   h as StyledCloseFillSm,
   m as StyledIconButton,
-  y as StyledSelect
+  x as StyledSelect
 };

package/lib/components/Tag/styles.mjs

@@ -164,8 +164,8 @@ const f = {
   }
 
   .MuiChip-deleteIcon {
-    width: 20px;
-    height: 20px;
+    width: 16px;
+    height: 16px;
     margin: 0;
 
     color: ${c};

package/lib/components/TextField/TextField.d.ts

@@ -1,5 +1,5 @@
-import { TextFieldProps as MuiTextFieldProps } from '@mui/material';
 import { ReactNode } from 'react';
+import { TextFieldProps as MuiTextFieldProps } from '@mui/material';
 import { WithoutEmotionSpecific } from '../types';
 export type TextFieldProps = Omit<WithoutEmotionSpecific<MuiTextFieldProps>, 'variant' | 'color'> & {
     /**
@@ -25,4 +25,4 @@ export type TextFieldProps = Omit<WithoutEmotionSpecific<MuiTextFieldProps>, 'va
      */
     trimmed?: boolean;
 };
-export declare const TextField: ({ success, error, helperText: helperTextProp, fullWidth, startAdornment, endAdornment, slotProps, maxLength, trimmed, onBlur, ...props }: TextFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TextField: ({ success, error, helperText: helperTextProp, fullWidth, startAdornment, endAdornment, inputProps, InputProps, maxLength, trimmed, onBlur, ...props }: TextFieldProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/TextField/TextField.mjs

@@ -1,56 +1,56 @@
 import { j as r } from "../../_virtual/jsx-runtime.mjs";
-import { TextField as p } from "@mui/material";
 import { useMemo as u } from "react";
-import { FormHelperTextContent as l } from "../FormHelperText/FormHelperTextContent/FormHelperTextContent.mjs";
-const w = ({
+import { TextField as B } from "@mui/material";
+import { FormHelperTextContent as a } from "../FormHelperText/FormHelperTextContent/FormHelperTextContent.mjs";
+const E = ({
   success: e,
   error: i,
   helperText: t,
-  fullWidth: a = !1,
+  fullWidth: l = !1,
   startAdornment: m,
   endAdornment: s,
-  slotProps: f,
-  maxLength: x,
-  trimmed: d = !0,
-  onBlur: c,
+  inputProps: f,
+  InputProps: x,
+  maxLength: d,
+  trimmed: c = !0,
+  onBlur: j,
   ...o
 }) => {
-  const j = u(() => {
+  const g = u(() => {
     if (e)
       return "success";
-  }, [e]), g = u(() => e ? /* @__PURE__ */ r.jsx(l, { success: !0, children: t }) : i ? /* @__PURE__ */ r.jsx(l, { error: !0, children: t }) : t || /* @__PURE__ */ r.jsx(r.Fragment, {}), [t, e, i]), F = (n) => {
-    if (d) {
+  }, [e]), F = u(() => e ? /* @__PURE__ */ r.jsx(a, { success: !0, children: t }) : i ? /* @__PURE__ */ r.jsx(a, { error: !0, children: t }) : t || /* @__PURE__ */ r.jsx(r.Fragment, {}), [t, e, i]), p = (n) => {
+    if (c) {
       const h = n.target.value?.trim();
       o.onChange?.({
         ...n,
         target: { ...n.target, value: h }
       });
     }
-    c?.(n);
+    j?.(n);
   };
   return /* @__PURE__ */ r.jsx(
-    p,
+    B,
     {
       variant: "outlined",
-      fullWidth: a,
+      fullWidth: l,
       error: i,
-      color: j,
-      helperText: g,
-      slotProps: {
-        htmlInput: {
-          maxLength: x
-        },
-        input: {
-          startAdornment: m,
-          endAdornment: s
-        },
+      color: g,
+      helperText: F,
+      InputProps: {
+        startAdornment: m,
+        endAdornment: s,
+        ...x
+      },
+      inputProps: {
+        maxLength: d,
         ...f
       },
-      onBlur: F,
+      onBlur: p,
       ...o
     }
   );
 };
 export {
-  w as TextField
+  E as TextField
 };

package/lib/theme/components/MuiAutocomplete.mjs

@@ -28,8 +28,7 @@ const i = {
       return {
         display: "flex",
         alignItems: "center",
-        justifyContent: "flex-end",
-        top: "calc(50% - 16px)"
+        justifyContent: "flex-end"
       };
     },
     paper({ theme: t }) {

package/lib/theme/palette/palette.mjs

@@ -1,16 +1,16 @@
-import { componentsColors as F } from "./componentsColors/componentsColors.mjs";
+import { componentsColors as r } from "./componentsColors/componentsColors.mjs";
 const t = () => {
-  const r = {
+  const F = {
     primary: {
-      900: "#0F52B8",
-      800: "#2165CC",
-      700: "#1874FF",
-      600: "#2684FF",
-      500: "#4C9AFF",
-      400: "#70AEFF",
-      300: "#94C2FF",
-      200: "#C5DCFF",
-      100: "#E1EDFF"
+      900: "#213555",
+      800: "#2B3E6F",
+      700: "#3F51B5",
+      600: "#4C6FFF",
+      500: "#5F7DFF",
+      400: "#7C98FF",
+      300: "#99B2FF",
+      200: "#B7CCFF",
+      100: "#D0E1FF"
     },
     secondary: {
       800: "#55B8F0"
@@ -62,16 +62,16 @@ const t = () => {
       100: "#F0F4F7"
     },
     primary: {
-      main: r.primary[800],
-      dark: r.primary[900],
+      main: F.primary[800],
+      dark: F.primary[900],
       contrastText: "#FFF",
-      ...r.primary
+      ...F.primary
     },
     secondary: {
-      main: r.secondary[800],
-      dark: r.primary[900],
+      main: F.secondary[800],
+      dark: F.primary[900],
       contrastText: "#FFF",
-      ...r.secondary
+      ...F.secondary
     },
     background: {
       default: "#FFF",
@@ -117,7 +117,7 @@ const t = () => {
         contrastText: "#FFF"
       };
     },
-    components: F
+    components: r
   };
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@max-ts/components",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "browser": "./src/index.ts",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -20,29 +20,29 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@mui/material": "^6.4.4",
+    "@mui/material": "^6.4.5",
     "@mui/system": "^6.4.3",
     "clsx": "^2.1.1",
     "lucide-react": "^0.475.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-use": "^17.6.0",
-    "remeda": "^2.20.1"
+    "remeda": "^2.20.2"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.4",
     "@faker-js/faker": "^9.5.0",
-    "@storybook/addon-essentials": "^8.5.6",
-    "@storybook/addon-interactions": "^8.5.6",
-    "@storybook/addon-onboarding": "^8.5.6",
-    "@storybook/blocks": "^8.5.6",
-    "@storybook/builder-vite": "^8.5.6",
-    "@storybook/react": "^8.5.6",
-    "@storybook/react-vite": "^8.5.6",
-    "@storybook/test": "^8.5.6",
-    "@types/react": "^19.0.8",
+    "@storybook/addon-essentials": "^8.5.8",
+    "@storybook/addon-interactions": "^8.5.8",
+    "@storybook/addon-onboarding": "^8.5.8",
+    "@storybook/blocks": "^8.5.8",
+    "@storybook/builder-vite": "^8.5.8",
+    "@storybook/react": "^8.5.8",
+    "@storybook/react-vite": "^8.5.8",
+    "@storybook/test": "^8.5.8",
+    "@types/react": "^19.0.10",
     "prop-types": "^15.8.1",
-    "storybook": "^8.5.6"
+    "storybook": "^8.5.8"
   },
   "scripts": {
     "build": "vite build",