@sikka/hawa 0.35.6-next → 0.36.0-next

package/dist/elements/index.js

@@ -1023,7 +1023,8 @@ var Chip = import_react5.default.forwardRef(
     icon,
     color,
     radius = "inherit",
-    dotType,
+    dot,
+    dotStatus = "none",
     ...rest
   }, ref) => {
     let defaultStyles = "hawa-flex hawa-flex-row hawa-w-fit hawa-gap-1 hawa-items-center  hawa-px-2.5 hawa-py-1  hawa-font-bold ";
@@ -1042,7 +1043,8 @@ var Chip = import_react5.default.forwardRef(
       normal: "hawa-flex hawa-h-2 hawa-w-2 hawa-rounded-full",
       large: "hawa-flex hawa-h-3 hawa-w-3 hawa-rounded-full"
     };
-    let dotTypeStyles = {
+    let dotStatusStyles = {
+      none: "hawa-bg-gray-500 dark:hawa-bg-gray-800",
       available: "hawa-bg-green-500",
       unavailable: "hawa-bg-red-500"
     };
@@ -1070,10 +1072,10 @@ var Chip = import_react5.default.forwardRef(
             color ? colorStyles[color] : "hawa-border hawa-bg-none"
           )
         },
-        dotType && /* @__PURE__ */ import_react5.default.createElement(
+        dot && /* @__PURE__ */ import_react5.default.createElement(
           "span",
           {
-            className: cn(dotStyles[size], dotTypeStyles[dotType])
+            className: cn(dotStyles[size], dotStatusStyles[dotStatus])
           }
         ),
         icon && icon,
@@ -2590,7 +2592,7 @@ var Input = (0, import_react11.forwardRef)(
       auto: ""
     };
     let defaultStyle = "hawa-flex hawa-max-h-fit hawa-h-fit hawa-relative hawa-flex-col hawa-justify-center hawa-gap-0";
-    let defaultInputStyle = "hawa-block hawa-w-full hawa-rounded hawa-border hawa-transition-all hawa-bg-background hawa-p-3 hawa-text-sm ";
+    let defaultInputStyle = "hawa-block hawa-w-full hawa-rounded hawa-border hawa-transition-all hawa-bg-background hawa-p-3 hawa-text-sm placeholder:hawa-text-muted-foreground";
     const handleChange = (e) => {
       let newValue = e.target.value;
       if (props.prefixText) {
@@ -2629,7 +2631,31 @@ var Input = (0, import_react11.forwardRef)(
           )
         },
         props.outsidePrefix
-      ), props.isLoading ? /* @__PURE__ */ import_react11.default.createElement("div", { className: "hawa-pb-2 hawa-w-full" }, /* @__PURE__ */ import_react11.default.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" })) : /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, !props.hideSeparator && /* @__PURE__ */ import_react11.default.createElement(
+      ), props.isLoading ? /* @__PURE__ */ import_react11.default.createElement("div", { className: "hawa-pb-2 hawa-w-full" }, /* @__PURE__ */ import_react11.default.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" })) : props.isLoadingError ? /* @__PURE__ */ import_react11.default.createElement("div", { className: "hawa-pb-2 hawa-w-full" }, /* @__PURE__ */ import_react11.default.createElement(
+        Skeleton,
+        {
+          animation: "none",
+          className: "hawa-h-[40px] hawa-w-full !hawa-bg-destructive/[0.3]",
+          content: /* @__PURE__ */ import_react11.default.createElement("div", { className: "hawa-flex hawa-flex-row hawa-gap-2" }, /* @__PURE__ */ import_react11.default.createElement(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              width: "20",
+              height: "20",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              className: "hawa-text-destructive"
+            },
+            /* @__PURE__ */ import_react11.default.createElement("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }),
+            /* @__PURE__ */ import_react11.default.createElement("path", { d: "M12 9v4" }),
+            /* @__PURE__ */ import_react11.default.createElement("path", { d: "M12 17h.01" })
+          ), /* @__PURE__ */ import_react11.default.createElement("span", null, /* @__PURE__ */ import_react11.default.createElement("span", { className: "hawa-text-destructive" }, props.loadingErrorMesssage || "Error loading data")))
+        }
+      )) : /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, !props.hideSeparator && /* @__PURE__ */ import_react11.default.createElement(
         "div",
         {
           className: cn(
@@ -2821,6 +2847,7 @@ TableHeader.displayName = "TableHeader";
 TableCaption.displayName = "TableCaption";
 
 // elements/dataTable/DataTable.tsx
+var LOCAL_STORAGE_KEY = "datatable-column-visibility";
 var DataTable = ({
   columns,
   data,
@@ -2840,7 +2867,10 @@ var DataTable = ({
   );
   const [globalFilter, setGlobalFilter] = React23.useState("");
   const [expanded, setExpanded] = React23.useState({});
-  const [columnVisibility, setColumnVisibility] = React23.useState({});
+  const [columnVisibility, setColumnVisibility] = React23.useState(() => {
+    const savedVisibility = localStorage.getItem(LOCAL_STORAGE_KEY);
+    return savedVisibility ? JSON.parse(savedVisibility) : {};
+  });
   const [rowSelection, setRowSelection] = React23.useState({});
   const table = (0, import_react_table.useReactTable)({
     data,
@@ -2870,12 +2900,20 @@ var DataTable = ({
     label: `${item} / ${pageText}`,
     value: item
   }));
+  React23.useEffect(() => {
+    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(columnVisibility));
+  }, [columnVisibility]);
   React23.useEffect(() => {
     setColumnVisibility((prev) => {
       let newColumnVisibility = {};
       columns.forEach((column) => {
         var _a2;
-        newColumnVisibility[column.accessorKey] = !((_a2 = column.meta) == null ? void 0 : _a2.hidden);
+        const savedVisibility = prev[column.accessorKey];
+        if (savedVisibility !== void 0) {
+          newColumnVisibility[column.accessorKey] = savedVisibility;
+        } else {
+          newColumnVisibility[column.accessorKey] = !((_a2 = column.meta) == null ? void 0 : _a2.hidden);
+        }
       });
       return newColumnVisibility;
     });
@@ -3044,7 +3082,7 @@ var DataTable = ({
           }
           table.setPageIndex(page);
         },
-        className: "hawa-w-16 hawa-rounded hawa-border hawa-p-1 hawa-px-2 hawa-text-sm"
+        className: "hawa-w-16 hawa-rounded hawa-border hawa-p-1 hawa-px-2 hawa-text-sm placeholder:hawa-text-muted-foreground"
       }
     )), /* @__PURE__ */ React23.createElement(
       DropdownMenu,
@@ -4610,7 +4648,6 @@ var Select = ({
             )
           },
           unstyled: true,
-          autoFocus: true,
           components: props.hideIndicator ? {
             Option,
             Menu,
@@ -6832,7 +6869,7 @@ var PhoneInput = ({
       onChange: handleInputChange,
       placeholder: props.placeholder,
       className: cn(
-        "hawa-block hawa-h-[40px] hawa-w-full hawa-rounded hawa-rounded-l-none hawa-border hawa-border-l-0 hawa-border-l-transparent  hawa-bg-background hawa-p-2 hawa-text-sm hawa-transition-all"
+        "placeholder:hawa-text-muted-foreground hawa-block hawa-h-[40px] hawa-w-full hawa-rounded hawa-rounded-l-none hawa-border hawa-border-l-0 hawa-border-l-transparent  hawa-bg-background hawa-p-2 hawa-text-sm hawa-transition-all"
       ),
       ...inputProps
     }
@@ -6910,7 +6947,7 @@ var PinInput = ({
         id: `input-${index}`,
         pattern: "[0-9]*",
         className: cn(
-          "hawa-h-10 hawa-rounded hawa-border hawa-bg-background hawa-text-center",
+          "hawa-h-10 hawa-rounded hawa-border hawa-bg-background hawa-text-center placeholder:hawa-text-muted-foreground",
           width === "full" ? "hawa-w-full" : "hawa-w-10"
         ),
         onChange: (e) => handleChange(e, index),
@@ -7045,7 +7082,7 @@ var ColorPicker = ({
       value: selectedColor,
       className: cn(
         "hawa-block hawa-h-[40px] hawa-w-24 hawa-rounded hawa-rounded-l-none hawa-bg-background hawa-p-2 hawa-text-sm hawa-transition-all",
-        "hawa-border hawa-border-l-0 hawa-border-l-transparent"
+        "hawa-border hawa-border-l-0 hawa-border-l-transparent placeholder:hawa-text-muted-foreground"
         // "hawa-border hawa-border-x-0 hawa-border-x-transparent hawa-border-b-0 hawa-rounded-tr-none"
       ),
       style: {

package/dist/elements/index.mjs

@@ -22,7 +22,7 @@ import {
   TabsList,
   TabsTrigger,
   Textarea
-} from "../chunk-57EAKTAP.mjs";
+} from "../chunk-T33FXOHA.mjs";
 import {
   useClipboard
 } from "../chunk-OPYDG34F.mjs";
@@ -37,7 +37,7 @@ import {
   SheetPortal,
   SheetTitle,
   SheetTrigger
-} from "../chunk-MZRUEJED.mjs";
+} from "../chunk-6QIOEUE2.mjs";
 import {
   Button,
   Card,
@@ -76,7 +76,7 @@ import {
   buttonVariants,
   calculateLuminance,
   cn
-} from "../chunk-ANXGMZXS.mjs";
+} from "../chunk-NNPNQK6F.mjs";
 import {
   __require
 } from "../chunk-SYGWSBJL.mjs";
@@ -906,6 +906,7 @@ TableHeader.displayName = "TableHeader";
 TableCaption.displayName = "TableCaption";
 
 // elements/dataTable/DataTable.tsx
+var LOCAL_STORAGE_KEY = "datatable-column-visibility";
 var DataTable = ({
   columns,
   data,
@@ -925,7 +926,10 @@ var DataTable = ({
   );
   const [globalFilter, setGlobalFilter] = React10.useState("");
   const [expanded, setExpanded] = React10.useState({});
-  const [columnVisibility, setColumnVisibility] = React10.useState({});
+  const [columnVisibility, setColumnVisibility] = React10.useState(() => {
+    const savedVisibility = localStorage.getItem(LOCAL_STORAGE_KEY);
+    return savedVisibility ? JSON.parse(savedVisibility) : {};
+  });
   const [rowSelection, setRowSelection] = React10.useState({});
   const table = useReactTable({
     data,
@@ -955,12 +959,20 @@ var DataTable = ({
     label: `${item} / ${pageText}`,
     value: item
   }));
+  React10.useEffect(() => {
+    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(columnVisibility));
+  }, [columnVisibility]);
   React10.useEffect(() => {
     setColumnVisibility((prev) => {
       let newColumnVisibility = {};
       columns.forEach((column) => {
         var _a2;
-        newColumnVisibility[column.accessorKey] = !((_a2 = column.meta) == null ? void 0 : _a2.hidden);
+        const savedVisibility = prev[column.accessorKey];
+        if (savedVisibility !== void 0) {
+          newColumnVisibility[column.accessorKey] = savedVisibility;
+        } else {
+          newColumnVisibility[column.accessorKey] = !((_a2 = column.meta) == null ? void 0 : _a2.hidden);
+        }
       });
       return newColumnVisibility;
     });
@@ -1129,7 +1141,7 @@ var DataTable = ({
           }
           table.setPageIndex(page);
         },
-        className: "hawa-w-16 hawa-rounded hawa-border hawa-p-1 hawa-px-2 hawa-text-sm"
+        className: "hawa-w-16 hawa-rounded hawa-border hawa-p-1 hawa-px-2 hawa-text-sm placeholder:hawa-text-muted-foreground"
       }
     )), /* @__PURE__ */ React10.createElement(
       DropdownMenu,
@@ -2219,7 +2231,7 @@ var ColorPicker = ({
       value: selectedColor,
       className: cn(
         "hawa-block hawa-h-[40px] hawa-w-24 hawa-rounded hawa-rounded-l-none hawa-bg-background hawa-p-2 hawa-text-sm hawa-transition-all",
-        "hawa-border hawa-border-l-0 hawa-border-l-transparent"
+        "hawa-border hawa-border-l-0 hawa-border-l-transparent placeholder:hawa-text-muted-foreground"
         // "hawa-border hawa-border-x-0 hawa-border-x-transparent hawa-border-b-0 hawa-rounded-tr-none"
       ),
       style: {

package/dist/index.css

@@ -1296,6 +1296,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-ms-2 {
   margin-inline-start: 0.5rem;
 }
+.hawa-ms-auto {
+  margin-inline-start: auto;
+}
 .hawa-mt-0 {
   margin-top: 0px;
 }
@@ -2275,6 +2278,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-border-t-transparent {
   border-top-color: transparent;
 }
+.\!hawa-bg-destructive\/\[0\.3\] {
+  background-color: hsl(var(--destructive) / 0.3) !important;
+}
 .\!hawa-bg-transparent {
   background-color: transparent !important;
 }
@@ -2896,6 +2902,10 @@ input[type="number"]::-webkit-inner-spin-button,
   --tw-text-opacity: 1;
   color: rgb(14 116 144 / var(--tw-text-opacity));
 }
+.hawa-text-destructive {
+  --tw-text-opacity: 1;
+  color: hsl(var(--destructive) / var(--tw-text-opacity));
+}
 .hawa-text-destructive-foreground {
   --tw-text-opacity: 1;
   color: hsl(var(--destructive-foreground) / var(--tw-text-opacity));

package/dist/index.d.mts

@@ -206,7 +206,7 @@ type ChipTypes = React__default.HTMLAttributes<HTMLSpanElement> & {
     /** Enable/Disable the dot before the label of the chip */
     dot?: boolean;
     /** Red/Green dot next to the label of the chip indicating online/offline or available/unavailable */
-    dotType?: "available" | "unavailable";
+    dotStatus?: "available" | "unavailable" | "none";
     radius?: RadiusType;
 };
 declare const Chip: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLSpanElement> & {
@@ -221,7 +221,7 @@ declare const Chip: React__default.ForwardRefExoticComponent<React__default.HTML
     /** Enable/Disable the dot before the label of the chip */
     dot?: boolean | undefined;
     /** Red/Green dot next to the label of the chip indicating online/offline or available/unavailable */
-    dotType?: "available" | "unavailable" | undefined;
+    dotStatus?: "none" | "available" | "unavailable" | undefined;
     radius?: RadiusType | undefined;
 } & React__default.RefAttributes<HTMLSpanElement>>;
 
@@ -683,6 +683,7 @@ declare const TabsContent: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.
 
 type TextFieldTypes = React__default.InputHTMLAttributes<HTMLInputElement> & {
     isLoading?: boolean;
+    isLoadingError?: boolean;
     containerClassName?: string;
     margin?: "none" | "normal" | "large";
     width?: "small" | "normal" | "full" | "auto";
@@ -692,6 +693,7 @@ type TextFieldTypes = React__default.InputHTMLAttributes<HTMLInputElement> & {
     hideSeparator?: boolean;
     /** The small red text under the input field to show validation.   */
     helperText?: any;
+    prefixText?: any;
     forceHideHelperText?: boolean;
     inputProps?: React__default.InputHTMLAttributes<HTMLInputElement>;
     /** The icon inside the input field */
@@ -711,10 +713,11 @@ type TextFieldTypes = React__default.InputHTMLAttributes<HTMLInputElement> & {
     popup?: boolean;
     popupContent?: React__default.ReactNode;
     outsidePrefix?: any;
-    prefixText?: any;
+    loadingErrorMesssage?: string;
 };
 declare const Input: React__default.ForwardRefExoticComponent<React__default.InputHTMLAttributes<HTMLInputElement> & {
     isLoading?: boolean | undefined;
+    isLoadingError?: boolean | undefined;
     containerClassName?: string | undefined;
     margin?: "none" | "normal" | "large" | undefined;
     width?: "small" | "normal" | "full" | "auto" | undefined;
@@ -724,6 +727,7 @@ declare const Input: React__default.ForwardRefExoticComponent<React__default.Inp
     hideSeparator?: boolean | undefined;
     /** The small red text under the input field to show validation.   */
     helperText?: any;
+    prefixText?: any;
     forceHideHelperText?: boolean | undefined;
     inputProps?: React__default.InputHTMLAttributes<HTMLInputElement> | undefined;
     /** The icon inside the input field */
@@ -743,7 +747,7 @@ declare const Input: React__default.ForwardRefExoticComponent<React__default.Inp
     popup?: boolean | undefined;
     popupContent?: React__default.ReactNode;
     outsidePrefix?: any;
-    prefixText?: any;
+    loadingErrorMesssage?: string | undefined;
 } & React__default.RefAttributes<HTMLInputElement>>;
 
 declare const PopoverContent: React$1.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {

package/dist/index.d.ts

@@ -206,7 +206,7 @@ type ChipTypes = React__default.HTMLAttributes<HTMLSpanElement> & {
     /** Enable/Disable the dot before the label of the chip */
     dot?: boolean;
     /** Red/Green dot next to the label of the chip indicating online/offline or available/unavailable */
-    dotType?: "available" | "unavailable";
+    dotStatus?: "available" | "unavailable" | "none";
     radius?: RadiusType;
 };
 declare const Chip: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLSpanElement> & {
@@ -221,7 +221,7 @@ declare const Chip: React__default.ForwardRefExoticComponent<React__default.HTML
     /** Enable/Disable the dot before the label of the chip */
     dot?: boolean | undefined;
     /** Red/Green dot next to the label of the chip indicating online/offline or available/unavailable */
-    dotType?: "available" | "unavailable" | undefined;
+    dotStatus?: "none" | "available" | "unavailable" | undefined;
     radius?: RadiusType | undefined;
 } & React__default.RefAttributes<HTMLSpanElement>>;
 
@@ -683,6 +683,7 @@ declare const TabsContent: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.
 
 type TextFieldTypes = React__default.InputHTMLAttributes<HTMLInputElement> & {
     isLoading?: boolean;
+    isLoadingError?: boolean;
     containerClassName?: string;
     margin?: "none" | "normal" | "large";
     width?: "small" | "normal" | "full" | "auto";
@@ -692,6 +693,7 @@ type TextFieldTypes = React__default.InputHTMLAttributes<HTMLInputElement> & {
     hideSeparator?: boolean;
     /** The small red text under the input field to show validation.   */
     helperText?: any;
+    prefixText?: any;
     forceHideHelperText?: boolean;
     inputProps?: React__default.InputHTMLAttributes<HTMLInputElement>;
     /** The icon inside the input field */
@@ -711,10 +713,11 @@ type TextFieldTypes = React__default.InputHTMLAttributes<HTMLInputElement> & {
     popup?: boolean;
     popupContent?: React__default.ReactNode;
     outsidePrefix?: any;
-    prefixText?: any;
+    loadingErrorMesssage?: string;
 };
 declare const Input: React__default.ForwardRefExoticComponent<React__default.InputHTMLAttributes<HTMLInputElement> & {
     isLoading?: boolean | undefined;
+    isLoadingError?: boolean | undefined;
     containerClassName?: string | undefined;
     margin?: "none" | "normal" | "large" | undefined;
     width?: "small" | "normal" | "full" | "auto" | undefined;
@@ -724,6 +727,7 @@ declare const Input: React__default.ForwardRefExoticComponent<React__default.Inp
     hideSeparator?: boolean | undefined;
     /** The small red text under the input field to show validation.   */
     helperText?: any;
+    prefixText?: any;
     forceHideHelperText?: boolean | undefined;
     inputProps?: React__default.InputHTMLAttributes<HTMLInputElement> | undefined;
     /** The icon inside the input field */
@@ -743,7 +747,7 @@ declare const Input: React__default.ForwardRefExoticComponent<React__default.Inp
     popup?: boolean | undefined;
     popupContent?: React__default.ReactNode;
     outsidePrefix?: any;
-    prefixText?: any;
+    loadingErrorMesssage?: string | undefined;
 } & React__default.RefAttributes<HTMLInputElement>>;
 
 declare const PopoverContent: React$1.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {

package/dist/index.js

@@ -1092,7 +1092,8 @@ var Chip = import_react5.default.forwardRef(
     icon,
     color,
     radius = "inherit",
-    dotType,
+    dot,
+    dotStatus = "none",
     ...rest
   }, ref) => {
     let defaultStyles = "hawa-flex hawa-flex-row hawa-w-fit hawa-gap-1 hawa-items-center  hawa-px-2.5 hawa-py-1  hawa-font-bold ";
@@ -1111,7 +1112,8 @@ var Chip = import_react5.default.forwardRef(
       normal: "hawa-flex hawa-h-2 hawa-w-2 hawa-rounded-full",
       large: "hawa-flex hawa-h-3 hawa-w-3 hawa-rounded-full"
     };
-    let dotTypeStyles = {
+    let dotStatusStyles = {
+      none: "hawa-bg-gray-500 dark:hawa-bg-gray-800",
       available: "hawa-bg-green-500",
       unavailable: "hawa-bg-red-500"
     };
@@ -1139,10 +1141,10 @@ var Chip = import_react5.default.forwardRef(
             color ? colorStyles[color] : "hawa-border hawa-bg-none"
           )
         },
-        dotType && /* @__PURE__ */ import_react5.default.createElement(
+        dot && /* @__PURE__ */ import_react5.default.createElement(
           "span",
           {
-            className: cn(dotStyles[size], dotTypeStyles[dotType])
+            className: cn(dotStyles[size], dotStatusStyles[dotStatus])
           }
         ),
         icon && icon,
@@ -2659,7 +2661,7 @@ var Input = (0, import_react11.forwardRef)(
       auto: ""
     };
     let defaultStyle = "hawa-flex hawa-max-h-fit hawa-h-fit hawa-relative hawa-flex-col hawa-justify-center hawa-gap-0";
-    let defaultInputStyle = "hawa-block hawa-w-full hawa-rounded hawa-border hawa-transition-all hawa-bg-background hawa-p-3 hawa-text-sm ";
+    let defaultInputStyle = "hawa-block hawa-w-full hawa-rounded hawa-border hawa-transition-all hawa-bg-background hawa-p-3 hawa-text-sm placeholder:hawa-text-muted-foreground";
     const handleChange = (e) => {
       let newValue = e.target.value;
       if (props.prefixText) {
@@ -2698,7 +2700,31 @@ var Input = (0, import_react11.forwardRef)(
           )
         },
         props.outsidePrefix
-      ), props.isLoading ? /* @__PURE__ */ import_react11.default.createElement("div", { className: "hawa-pb-2 hawa-w-full" }, /* @__PURE__ */ import_react11.default.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" })) : /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, !props.hideSeparator && /* @__PURE__ */ import_react11.default.createElement(
+      ), props.isLoading ? /* @__PURE__ */ import_react11.default.createElement("div", { className: "hawa-pb-2 hawa-w-full" }, /* @__PURE__ */ import_react11.default.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" })) : props.isLoadingError ? /* @__PURE__ */ import_react11.default.createElement("div", { className: "hawa-pb-2 hawa-w-full" }, /* @__PURE__ */ import_react11.default.createElement(
+        Skeleton,
+        {
+          animation: "none",
+          className: "hawa-h-[40px] hawa-w-full !hawa-bg-destructive/[0.3]",
+          content: /* @__PURE__ */ import_react11.default.createElement("div", { className: "hawa-flex hawa-flex-row hawa-gap-2" }, /* @__PURE__ */ import_react11.default.createElement(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              width: "20",
+              height: "20",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              className: "hawa-text-destructive"
+            },
+            /* @__PURE__ */ import_react11.default.createElement("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }),
+            /* @__PURE__ */ import_react11.default.createElement("path", { d: "M12 9v4" }),
+            /* @__PURE__ */ import_react11.default.createElement("path", { d: "M12 17h.01" })
+          ), /* @__PURE__ */ import_react11.default.createElement("span", null, /* @__PURE__ */ import_react11.default.createElement("span", { className: "hawa-text-destructive" }, props.loadingErrorMesssage || "Error loading data")))
+        }
+      )) : /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, !props.hideSeparator && /* @__PURE__ */ import_react11.default.createElement(
         "div",
         {
           className: cn(
@@ -2890,6 +2916,7 @@ TableHeader.displayName = "TableHeader";
 TableCaption.displayName = "TableCaption";
 
 // elements/dataTable/DataTable.tsx
+var LOCAL_STORAGE_KEY = "datatable-column-visibility";
 var DataTable = ({
   columns,
   data,
@@ -2909,7 +2936,10 @@ var DataTable = ({
   );
   const [globalFilter, setGlobalFilter] = React23.useState("");
   const [expanded, setExpanded] = React23.useState({});
-  const [columnVisibility, setColumnVisibility] = React23.useState({});
+  const [columnVisibility, setColumnVisibility] = React23.useState(() => {
+    const savedVisibility = localStorage.getItem(LOCAL_STORAGE_KEY);
+    return savedVisibility ? JSON.parse(savedVisibility) : {};
+  });
   const [rowSelection, setRowSelection] = React23.useState({});
   const table = (0, import_react_table.useReactTable)({
     data,
@@ -2939,12 +2969,20 @@ var DataTable = ({
     label: `${item} / ${pageText}`,
     value: item
   }));
+  React23.useEffect(() => {
+    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(columnVisibility));
+  }, [columnVisibility]);
   React23.useEffect(() => {
     setColumnVisibility((prev) => {
       let newColumnVisibility = {};
       columns.forEach((column) => {
         var _a2;
-        newColumnVisibility[column.accessorKey] = !((_a2 = column.meta) == null ? void 0 : _a2.hidden);
+        const savedVisibility = prev[column.accessorKey];
+        if (savedVisibility !== void 0) {
+          newColumnVisibility[column.accessorKey] = savedVisibility;
+        } else {
+          newColumnVisibility[column.accessorKey] = !((_a2 = column.meta) == null ? void 0 : _a2.hidden);
+        }
       });
       return newColumnVisibility;
     });
@@ -3113,7 +3151,7 @@ var DataTable = ({
           }
           table.setPageIndex(page);
         },
-        className: "hawa-w-16 hawa-rounded hawa-border hawa-p-1 hawa-px-2 hawa-text-sm"
+        className: "hawa-w-16 hawa-rounded hawa-border hawa-p-1 hawa-px-2 hawa-text-sm placeholder:hawa-text-muted-foreground"
       }
     )), /* @__PURE__ */ React23.createElement(
       DropdownMenu,
@@ -5016,7 +5054,6 @@ var Select = ({
             )
           },
           unstyled: true,
-          autoFocus: true,
           components: props.hideIndicator ? {
             Option,
             Menu: Menu2,
@@ -7238,7 +7275,7 @@ var PhoneInput = ({
       onChange: handleInputChange,
       placeholder: props.placeholder,
       className: cn(
-        "hawa-block hawa-h-[40px] hawa-w-full hawa-rounded hawa-rounded-l-none hawa-border hawa-border-l-0 hawa-border-l-transparent  hawa-bg-background hawa-p-2 hawa-text-sm hawa-transition-all"
+        "placeholder:hawa-text-muted-foreground hawa-block hawa-h-[40px] hawa-w-full hawa-rounded hawa-rounded-l-none hawa-border hawa-border-l-0 hawa-border-l-transparent  hawa-bg-background hawa-p-2 hawa-text-sm hawa-transition-all"
       ),
       ...inputProps
     }
@@ -7316,7 +7353,7 @@ var PinInput = ({
         id: `input-${index}`,
         pattern: "[0-9]*",
         className: cn(
-          "hawa-h-10 hawa-rounded hawa-border hawa-bg-background hawa-text-center",
+          "hawa-h-10 hawa-rounded hawa-border hawa-bg-background hawa-text-center placeholder:hawa-text-muted-foreground",
           width === "full" ? "hawa-w-full" : "hawa-w-10"
         ),
         onChange: (e) => handleChange(e, index),
@@ -7451,7 +7488,7 @@ var ColorPicker = ({
       value: selectedColor,
       className: cn(
         "hawa-block hawa-h-[40px] hawa-w-24 hawa-rounded hawa-rounded-l-none hawa-bg-background hawa-p-2 hawa-text-sm hawa-transition-all",
-        "hawa-border hawa-border-l-0 hawa-border-l-transparent"
+        "hawa-border hawa-border-l-0 hawa-border-l-transparent placeholder:hawa-text-muted-foreground"
         // "hawa-border hawa-border-x-0 hawa-border-x-transparent hawa-border-b-0 hawa-rounded-tr-none"
       ),
       style: {
@@ -9353,8 +9390,7 @@ var AppLayout = ({
     "div",
     {
       className: cn(
-        "hawa-fixed hawa-z-0 hawa-flex hawa-flex-col hawa-justify-between hawa-overflow-x-clip hawa-transition-all hawa-top-0 hawa-h-[calc(100dvh)] hawa-bg-red-500",
-        // 'hawa-bg-primary-foreground',
+        "hawa-fixed hawa-z-0 hawa-flex hawa-flex-col hawa-justify-between hawa-overflow-x-clip hawa-transition-all hawa-top-0 hawa-h-[calc(100dvh)] hawa-bg-primary-foreground",
         isRTL ? "hawa-right-0" : "hawa-left-0",
         bordered ? direction === "rtl" ? "hawa-border-s-[1px]" : "hawa-border-e-[1px]" : ""
       ),