@gnwebsoft/ui 2.18.30 → 2.18.31

package/dist/{chunk-VNMKBB4P.mjs → chunk-M42TPRCN.mjs}

@@ -1,8 +1,17 @@
 // src/components/ClearButton/ClearButton.tsx
 import { Button } from "@mui/material";
 import { jsx } from "react/jsx-runtime";
-var ClearButton = ({ isSubmitting, handleClear }) => {
-  return /* @__PURE__ */ jsx(Button, { variant: "outlined", onClick: handleClear, disabled: isSubmitting, children: "Clear" });
+var ClearButton = ({ isSubmitting, handleClear, sx }) => {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "outlined",
+      onClick: handleClear,
+      disabled: isSubmitting,
+      sx,
+      children: "Clear"
+    }
+  );
 };
 var ClearButton_default = ClearButton;
 
@@ -15,7 +24,8 @@ var FilterButton = ({
   isSubmitting,
   show,
   title,
-  icon
+  icon,
+  sx
 }) => {
   return /* @__PURE__ */ jsx2(
     LoadingButton,
@@ -26,7 +36,8 @@ var FilterButton = ({
       disabled: !show,
       disableRipple: true,
       sx: {
-        bgcolor: "#3caed7 !important",
+        ...sx,
+        bgcolor: "primary",
         display: "flex",
         alignItems: "center"
       },
@@ -49,11 +60,18 @@ import {
 } from "@mui/material";
 import ManageSearchIcon from "@mui/icons-material/ManageSearch";
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
-var FilterWrapper = ({ children, title }) => {
+var FilterWrapper = ({
+  children,
+  title,
+  cardSx,
+  textSx,
+  icon
+}) => {
   return /* @__PURE__ */ jsxs(
     Card,
     {
       sx: {
+        ...cardSx,
         position: "relative",
         borderRadius: "0px",
         mb: 2
@@ -73,12 +91,12 @@ var FilterWrapper = ({ children, title }) => {
               alignItems: "center"
             },
             title: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
-              /* @__PURE__ */ jsx3(ManageSearchIcon, { sx: { color: "#4db3a2", height: "2.5rem" } }),
+              icon ? icon : /* @__PURE__ */ jsx3(ManageSearchIcon, { sx: { color: "primary", height: "2.5rem" } }),
               /* @__PURE__ */ jsx3(
                 Typography,
                 {
                   variant: "h5",
-                  sx: { color: "#4db3a2", fontWeight: "bold" },
+                  sx: { ...textSx, color: "primary", fontWeight: "bold" },
                   children: title
                 }
               )
@@ -95,6 +113,7 @@ var FilterWrapper_default = FilterWrapper;
 
 // src/components/FormWrapper/FormWrapper.tsx
 import {
+  Box as Box2,
   Card as Card2,
   CardContent as CardContent2,
   CardHeader as CardHeader2,
@@ -108,7 +127,9 @@ var FormWrapper = ({
   title,
   editMode,
   cardSx,
-  textSx
+  textSx,
+  icon,
+  actionButton
 }) => {
   return /* @__PURE__ */ jsxs2(
     Card2,
@@ -131,7 +152,23 @@ var FormWrapper = ({
                 alignSelf: "center"
               }
             },
-            title: title ?? /* @__PURE__ */ jsx4(Typography2, { color: "primary", sx: textSx, children: editMode ? `Edit ${title}` : `Create ${title}` })
+            title: /* @__PURE__ */ jsxs2(
+              Box2,
+              {
+                sx: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between"
+                },
+                children: [
+                  /* @__PURE__ */ jsxs2(Box2, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
+                    icon ?? icon,
+                    /* @__PURE__ */ jsx4(Typography2, { color: "primary", sx: textSx, children: editMode ? `Edit ${title}` : `Create ${title}` })
+                  ] }),
+                  actionButton
+                ]
+              }
+            )
           }
         ),
         /* @__PURE__ */ jsx4(Divider2, { sx: { mt: 0 } }),
@@ -149,7 +186,9 @@ var LabelText = ({
   label,
   value,
   gridSize,
-  containerSize
+  containerSize,
+  labelSx,
+  valueSx
 }) => {
   const defaultGridSize = {
     labelSize: { xs: 6, sm: 6, md: 6 },
@@ -173,6 +212,7 @@ var LabelText = ({
           {
             size: size.labelSize,
             sx: {
+              ...labelSx,
               padding: "5px",
               fontSize: "14px",
               textAlign: { xs: "left", sm: "right", md: "right" }
@@ -191,9 +231,9 @@ var LabelText = ({
             children: /* @__PURE__ */ jsx5(Tooltip, { title: value, arrow: true, children: /* @__PURE__ */ jsx5(
               Typography3,
               {
-                color: "#3598dc",
-                fontSize: "14px",
                 sx: {
+                  ...valueSx,
+                  fontSize: "14px",
                   wordBreak: "break-word",
                   overflow: "hidden",
                   display: "-webkit-box",
@@ -214,7 +254,7 @@ var LabelText_default = LabelText;
 
 // src/components/ListWrapper/ListWrapper.tsx
 import {
-  Box as Box2,
+  Box as Box3,
   Card as Card3,
   CardContent as CardContent3,
   CardHeader as CardHeader3,
@@ -229,13 +269,18 @@ var ListWrapper = ({
   title,
   count,
   show = true,
-  actionButton
+  actionButton,
+  cardSx,
+  textSx,
+  icon,
+  showCount = true
 }) => {
   if (!show) return /* @__PURE__ */ jsx6(Fragment, {});
   return /* @__PURE__ */ jsxs4(
     Card3,
     {
       sx: {
+        ...cardSx,
         position: "relative",
         borderRadius: "0px"
       },
@@ -254,7 +299,7 @@ var ListWrapper = ({
               alignItems: "center"
             },
             title: /* @__PURE__ */ jsxs4(
-              Box2,
+              Box3,
               {
                 sx: {
                   display: "flex",
@@ -262,14 +307,18 @@ var ListWrapper = ({
                   justifyContent: "space-between"
                 },
                 children: [
-                  /* @__PURE__ */ jsxs4(Box2, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
-                    /* @__PURE__ */ jsx6(ManageSearchIcon2, { sx: { color: "#4db3a2", height: "2.5rem" } }),
-                    /* @__PURE__ */ jsx6(
+                  /* @__PURE__ */ jsxs4(Box3, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
+                    icon ? icon : /* @__PURE__ */ jsx6(ManageSearchIcon2, { sx: { color: "primary", height: "2.5rem" } }),
+                    /* @__PURE__ */ jsxs4(
                       Typography4,
                       {
                         variant: "h5",
-                        sx: { color: "#4db3a2", fontWeight: "bold" },
-                        children: `${title} (${count ? count : 0})`
+                        sx: { ...textSx, color: "primary", fontWeight: "bold" },
+                        children: [
+                          title,
+                          " ",
+                          showCount ? `$(${count ? count : 0})` : /* @__PURE__ */ jsx6(Fragment, {})
+                        ]
                       }
                     )
                   ] }),
@@ -295,7 +344,7 @@ import {
   GridToolbarFilterButton,
   GridToolbarQuickFilter
 } from "@mui/x-data-grid";
-import { Box as Box3 } from "@mui/material";
+import { Box as Box4 } from "@mui/material";
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var SimpleToolbar = () => /* @__PURE__ */ jsxs5(GridToolbarContainer, { children: [
   /* @__PURE__ */ jsx7(
@@ -304,22 +353,17 @@ var SimpleToolbar = () => /* @__PURE__ */ jsxs5(GridToolbarContainer, { children
       sx: {
         "& .MuiInputBase-root": {
           borderRadius: "8px",
-          padding: "6px 10px",
-          backgroundColor: "#f6f7f8"
+          padding: "6px 10px"
         },
         "& input": {
           fontSize: "14px",
           color: "#333"
         },
-        borderRadius: "8px",
-        ".css-hzgntl-MuiOutlinedInput-notchedOutline": {
-          borderRadius: "8px",
-          border: "1px solid #efefef !important"
-        }
+        borderRadius: "8px"
       }
     }
   ),
-  /* @__PURE__ */ jsx7(Box3, { sx: { flexGrow: 1 } }),
+  /* @__PURE__ */ jsx7(Box4, { sx: { flexGrow: 1 } }),
   /* @__PURE__ */ jsx7(GridToolbarColumnsButton, {}),
   /* @__PURE__ */ jsx7(GridToolbarFilterButton, {}),
   /* @__PURE__ */ jsx7(GridToolbarExport, {})

package/dist/{chunk-TXO5AC4B.mjs → chunk-MRZZQRKX.mjs}

@@ -45,7 +45,6 @@ var Component = function DatePickerElement(props) {
   } = useController({
     name,
     control,
-    disabled,
     defaultValue: null
   });
   const { value, onChange } = useTransform({
@@ -65,6 +64,7 @@ var Component = function DatePickerElement(props) {
       ...field,
       value,
       label,
+      disabled,
       ...datePickerProps,
       inputRef: handleInputRef,
       onClose: (...args) => {
@@ -361,7 +361,8 @@ var RadioButtonGroup_default = RadioButtonGroup2;
 import {
   Grid2 as Grid24,
   TextField as TextField2,
-  useForkRef as useForkRef3
+  useForkRef as useForkRef3,
+  useTheme as useTheme2
 } from "@mui/material";
 import {
   useController as useController4
@@ -397,9 +398,9 @@ var Component4 = function TextFieldElement(props) {
     fieldState: { error }
   } = useController4({
     name,
-    control,
-    disabled
+    control
   });
+  const theme = useTheme2();
   const { value, onChange } = useTransform({
     value: field.value,
     onChange: field.onChange,
@@ -458,7 +459,8 @@ var Component4 = function TextFieldElement(props) {
         "& .MuiInputLabel-asterisk": { color: "red" },
         "& .MuiInputBase-input": {
           cursor: disabled ? "not-allowed" : "default"
-        }
+        },
+        bgcolor: disabled ? theme.palette.action.disabledBackground : "transparent"
       }
     }
   );
@@ -602,8 +604,7 @@ var Component6 = function AsyncSelectElement(props) {
     fieldState: { error }
   } = useController6({
     name,
-    control,
-    disabled
+    control
   });
   const [loading, setLoading] = useState2(false);
   const [selectedOption, setSelectedOption] = useState2(null);
@@ -819,8 +820,7 @@ var Component7 = function AsyncSelectMultiElement(props) {
     fieldState: { error }
   } = useController7({
     name,
-    control,
-    disabled
+    control
   });
   const multiSelectRef = useRef2(null);
   const [selectedOptions, setSelectedOptions] = useState3([]);
@@ -921,6 +921,7 @@ var Component7 = function AsyncSelectMultiElement(props) {
       isOptionEqualToValue: (option, val) => option.Value === val.Value,
       options,
       value: selectedOptions,
+      disabled,
       filterSelectedOptions: true,
       onChange: handleChange,
       onInputChange: (_2, newInputValue) => {
@@ -987,11 +988,13 @@ var AsyncMultiSelect_default = AsyncSelectMultiElement2;
 import {
   Autocomplete as Autocomplete3,
   Grid2 as Grid28,
-  TextField as TextField5
+  TextField as TextField5,
+  useTheme as useTheme3
 } from "@mui/material";
 import {
   useController as useController8
 } from "react-hook-form";
+import { useEffect as useEffect4, useState as useState4 } from "react";
 import { jsx as jsx8 } from "react/jsx-runtime";
 var Component8 = function SelectElement(props) {
   const {
@@ -1016,16 +1019,21 @@ var Component8 = function SelectElement(props) {
     name,
     control
   });
-  if (options.length === 1 && !field.value) {
-    field.onChange(options[0].Value);
-  }
+  const theme = useTheme3();
+  const [hasAutoSelected, setHasAutoSelected] = useState4(false);
+  useEffect4(() => {
+    if (options.length === 1 && field.value == null && !hasAutoSelected) {
+      field.onChange(options[0].Value);
+      setHasAutoSelected(true);
+    }
+  }, [options, field.value, field.onChange, hasAutoSelected]);
   return /* @__PURE__ */ jsx8(
     Autocomplete3,
     {
       ...rest,
       value: field.value !== null ? options.find((option) => {
         return field.value === option.Value;
-      }) ?? null : options.length === 1 ? options[0] : null,
+      }) ?? null : null,
       loading,
       options,
       getOptionLabel: (c) => c.Label,
@@ -1033,10 +1041,14 @@ var Component8 = function SelectElement(props) {
       ref: field.ref,
       disabled,
       onChange: (event, newValue, reason) => {
-        field.onChange(newValue ? newValue.Value : null);
-        if (onChange && typeof onChange === "function") {
-          onChange(event, newValue, reason);
+        if (reason === "clear") {
+          field.onChange(null);
+          setHasAutoSelected(true);
+        } else {
+          field.onChange(newValue?.Value ?? null);
+          setHasAutoSelected(true);
         }
+        onChange?.(event, newValue, reason);
       },
       onBlur: (event) => {
         field.onBlur();
@@ -1059,7 +1071,8 @@ var Component8 = function SelectElement(props) {
             ...sx,
             "& .MuiInputBase-input": {
               cursor: disabled ? "not-allowed" : "default"
-            }
+            },
+            bgcolor: disabled ? theme.palette.action.disabledBackground : "transparent"
           }
         }
       )
@@ -1088,7 +1101,7 @@ import {
 import {
   useController as useController9
 } from "react-hook-form";
-import { Fragment as Fragment3, useState as useState4 } from "react";
+import { Fragment as Fragment3, useState as useState5 } from "react";
 import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
 var Component9 = function SelectMultiElement(props) {
   const {
@@ -1109,10 +1122,9 @@ var Component9 = function SelectMultiElement(props) {
     fieldState: { error }
   } = useController9({
     name,
-    control,
-    disabled
+    control
   });
-  const [selectedOptions, setSelectedOptions] = useState4([]);
+  const [selectedOptions, setSelectedOptions] = useState5([]);
   const handleChange = (_2, selectedOptions2, reason) => {
     if (reason === "clear") {
       setSelectedOptions([]);
@@ -1186,7 +1198,7 @@ import {
   Grid2 as Grid210,
   TextField as TextField7
 } from "@mui/material";
-import { useEffect as useEffect4, useRef as useRef3 } from "react";
+import { useEffect as useEffect5, useRef as useRef3 } from "react";
 import {
   useController as useController10
 } from "react-hook-form";
@@ -1221,12 +1233,12 @@ var Component10 = function SelectCascadeElement(props) {
     control
   });
   const parentValueRef = useRef3(dependentField.value ?? null);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!!dependentField.value && parentValueRef?.current?.Value !== dependentField.value || dependentField.value === null) {
       field.onChange(null);
     }
   }, [dependentField.value]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (initialValue) {
       field.onChange(initialValue);
     }
@@ -1367,7 +1379,7 @@ import {
   FormHelperText as FormHelperText3,
   Grid2 as Grid212
 } from "@mui/material";
-import { useEffect as useEffect5, useState as useState5 } from "react";
+import { useEffect as useEffect6, useState as useState6 } from "react";
 import {
   useController as useController12
 } from "react-hook-form";
@@ -1382,10 +1394,10 @@ var Component12 = function CheckboxGroup(props) {
     control,
     disabled: rest.disabled
   });
-  const [selectedValues, setSelectedValues] = useState5(
+  const [selectedValues, setSelectedValues] = useState6(
     options.filter((c) => field.value?.includes(c.Value)).map((c) => c.Value) || []
   );
-  useEffect5(() => {
+  useEffect6(() => {
     field.onChange(selectedValues ? [...selectedValues] : []);
   }, [selectedValues]);
   const handleChange = (event) => {

package/dist/{chunk-CKJEER4L.js → chunk-STC2BZ2L.js}

@@ -40,7 +40,6 @@ var Component = function DatePickerElement(props) {
   } = _reacthookform.useController.call(void 0, {
     name,
     control,
-    disabled,
     defaultValue: null
   });
   const { value, onChange } = _chunk6JZ35VQJjs.useTransform.call(void 0, {
@@ -60,6 +59,7 @@ var Component = function DatePickerElement(props) {
       ...field,
       value,
       label,
+      disabled,
       ...datePickerProps,
       inputRef: handleInputRef,
       onClose: (...args) => {
@@ -394,8 +394,7 @@ var Component4 = function TextFieldElement(props) {
     fieldState: { error }
   } = _reacthookform.useController.call(void 0, {
     name,
-    control,
-    disabled
+    control
   });
   const { value, onChange } = _chunk6JZ35VQJjs.useTransform.call(void 0, {
     value: field.value,
@@ -594,8 +593,7 @@ var Component6 = function AsyncSelectElement(props) {
     fieldState: { error }
   } = _reacthookform.useController.call(void 0, {
     name,
-    control,
-    disabled
+    control
   });
   const [loading, setLoading] = _react.useState.call(void 0, false);
   const [selectedOption, setSelectedOption] = _react.useState.call(void 0, null);
@@ -795,8 +793,7 @@ var Component7 = function AsyncSelectMultiElement(props) {
     fieldState: { error }
   } = _reacthookform.useController.call(void 0, {
     name,
-    control,
-    disabled
+    control
   });
   const multiSelectRef = _react.useRef.call(void 0, null);
   const [selectedOptions, setSelectedOptions] = _react.useState.call(void 0, []);
@@ -968,6 +965,7 @@ var AsyncMultiSelect_default = AsyncSelectMultiElement2;
 
 
 
+
 var Component8 = function SelectElement(props) {
   const {
     name,
@@ -987,19 +985,22 @@ var Component8 = function SelectElement(props) {
     fieldState: { error }
   } = _reacthookform.useController.call(void 0, {
     name,
-    control,
-    disabled
+    control
   });
-  if (options.length === 1 && field.value == null) {
-    field.onChange(options[0].value);
-  }
+  const [hasAutoSelected, setHasAutoSelected] = _react.useState.call(void 0, false);
+  _react.useEffect.call(void 0, () => {
+    if (options.length === 1 && field.value == null && !hasAutoSelected) {
+      field.onChange(options[0].value);
+      setHasAutoSelected(true);
+    }
+  }, [options, field.value, field.onChange, hasAutoSelected]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     _material.Autocomplete,
     {
       ...rest,
       value: field.value !== null ? _nullishCoalesce(options.find((option) => {
         return field.value === option.value;
-      }), () => ( null)) : options.length === 1 ? options[0] : null,
+      }), () => ( null)) : null,
       size: "small",
       loading,
       options,
@@ -1008,10 +1009,14 @@ var Component8 = function SelectElement(props) {
       ref: field.ref,
       disabled: field.disabled,
       onChange: (event, newValue, reason) => {
-        field.onChange(newValue ? newValue.value : null);
-        if (onChange && typeof onChange === "function") {
-          onChange(event, newValue, reason);
+        if (reason === "clear") {
+          field.onChange(null);
+          setHasAutoSelected(true);
+        } else {
+          field.onChange(_nullishCoalesce(_optionalChain([newValue, 'optionalAccess', _21 => _21.value]), () => ( null)));
+          setHasAutoSelected(true);
         }
+        _optionalChain([onChange, 'optionalCall', _22 => _22(event, newValue, reason)]);
       },
       onBlur: (event) => {
         field.onBlur();
@@ -1081,8 +1086,7 @@ var Component9 = function SelectMultiElement(props) {
     fieldState: { error }
   } = _reacthookform.useController.call(void 0, {
     name,
-    control,
-    disabled
+    control
   });
   const [selectedOptions, setSelectedOptions] = _react.useState.call(void 0, []);
   const handleChange = (_2, selectedOptions2, reason) => {
@@ -1104,7 +1108,7 @@ var Component9 = function SelectMultiElement(props) {
       getOptionLabel: (c) => c.Label,
       filterSelectedOptions: true,
       ref: field.ref,
-      disabled: field.disabled,
+      disabled,
       onChange: handleChange,
       onBlur: (event) => {
         field.onBlur();
@@ -1180,17 +1184,15 @@ var Component10 = function SelectCascadeElement(props) {
     fieldState: { error }
   } = _reacthookform.useController.call(void 0, {
     name,
-    control,
-    disabled
+    control
   });
   const { field: dependentField } = _reacthookform.useController.call(void 0, {
     name: dependsOn,
-    control,
-    disabled
+    control
   });
   const parentValueRef = _react.useRef.call(void 0, _nullishCoalesce(dependentField.value, () => ( null)));
   _react.useEffect.call(void 0, () => {
-    if (!!dependentField.value && _optionalChain([parentValueRef, 'optionalAccess', _21 => _21.current, 'optionalAccess', _22 => _22.value]) !== dependentField.value || dependentField.value === null) {
+    if (!!dependentField.value && _optionalChain([parentValueRef, 'optionalAccess', _23 => _23.current, 'optionalAccess', _24 => _24.value]) !== dependentField.value || dependentField.value === null) {
       field.onChange(null);
     }
   }, [dependentField.value]);
@@ -1212,7 +1214,7 @@ var Component10 = function SelectCascadeElement(props) {
       getOptionLabel: (c) => c.label,
       isOptionEqualToValue: (option, value) => option.value === value.value,
       ref: field.ref,
-      disabled: field.disabled,
+      disabled,
       onChange: (event, newValue, reason) => {
         field.onChange(newValue ? newValue.value : null);
         if (onChange && typeof onChange === "function") {
@@ -1350,7 +1352,7 @@ var Component12 = function CheckboxGroup(props) {
     disabled: rest.disabled
   });
   const [selectedValues, setSelectedValues] = _react.useState.call(void 0, 
-    options.filter((c) => _optionalChain([field, 'access', _23 => _23.value, 'optionalAccess', _24 => _24.includes, 'call', _25 => _25(c.value)])).map((c) => c.value) || []
+    options.filter((c) => _optionalChain([field, 'access', _25 => _25.value, 'optionalAccess', _26 => _26.includes, 'call', _27 => _27(c.value)])).map((c) => c.value) || []
   );
   _react.useEffect.call(void 0, () => {
     field.onChange(selectedValues ? [...selectedValues] : []);

package/dist/components/index.d.mts

@@ -6,22 +6,26 @@ import { OverrideProps } from '@mui/material/OverridableComponent';
 type ClearButtonProps = {
     isSubmitting: boolean;
     handleClear: () => void;
+    sx?: SxProps;
 };
-declare const ClearButton: ({ isSubmitting, handleClear }: ClearButtonProps) => react_jsx_runtime.JSX.Element;
+declare const ClearButton: ({ isSubmitting, handleClear, sx }: ClearButtonProps) => react_jsx_runtime.JSX.Element;
 
 type FilterButtonProps = {
     isSubmitting: boolean;
     show?: boolean;
     title?: string;
     icon?: React.ReactNode;
+    sx?: SxProps;
 };
-declare const FilterButton: ({ isSubmitting, show, title, icon, }: FilterButtonProps) => react_jsx_runtime.JSX.Element;
+declare const FilterButton: ({ isSubmitting, show, title, icon, sx, }: FilterButtonProps) => react_jsx_runtime.JSX.Element;
 
 type FilterWrapperProps = PropsWithChildren<{
     title: string;
     cardSx?: SxProps;
+    textSx?: SxProps;
+    icon?: ReactNode;
 }>;
-declare const FilterWrapper: ({ children, title }: FilterWrapperProps) => react_jsx_runtime.JSX.Element;
+declare const FilterWrapper: ({ children, title, cardSx, textSx, icon, }: FilterWrapperProps) => react_jsx_runtime.JSX.Element;
 
 type FormWrapper = PropsWithChildren<{
     title: string;
@@ -29,8 +33,9 @@ type FormWrapper = PropsWithChildren<{
     icon?: ReactNode;
     cardSx?: SxProps;
     textSx?: SxProps;
+    actionButton?: ReactNode;
 }>;
-declare const FormWrapper: ({ children, title, editMode, cardSx, textSx, }: FormWrapper) => react_jsx_runtime.JSX.Element;
+declare const FormWrapper: ({ children, title, editMode, cardSx, textSx, icon, actionButton, }: FormWrapper) => react_jsx_runtime.JSX.Element;
 
 type LabelTextProps = {
     label: string;
@@ -52,16 +57,22 @@ type LabelTextProps = {
         sm: number;
         md: number;
     };
+    labelSx?: SxProps;
+    valueSx?: SxProps;
 };
-declare const LabelText: ({ label, value, gridSize, containerSize, }: LabelTextProps) => react_jsx_runtime.JSX.Element;
+declare const LabelText: ({ label, value, gridSize, containerSize, labelSx, valueSx, }: LabelTextProps) => react_jsx_runtime.JSX.Element;
 
 type ListWrapperProps = PropsWithChildren<{
     title: string;
     count: number;
     show?: boolean;
-    actionButton?: React.ReactNode;
+    actionButton?: ReactNode;
+    cardSx?: SxProps;
+    textSx?: SxProps;
+    icon?: ReactNode;
+    showCount?: boolean;
 }>;
-declare const ListWrapper: ({ children, title, count, show, actionButton, }: ListWrapperProps) => react_jsx_runtime.JSX.Element;
+declare const ListWrapper: ({ children, title, count, show, actionButton, cardSx, textSx, icon, showCount, }: ListWrapperProps) => react_jsx_runtime.JSX.Element;
 
 declare const SimpleToolbar: () => react_jsx_runtime.JSX.Element;