@algorithm-shift/design-system 1.2.32 → 1.2.34

package/dist/index.js

@@ -691,7 +691,6 @@ function Textarea({ className, ...props }) {
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var Textarea2 = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
-  const isRequired = props.isRequired ?? false;
   const isEditable = props.isEditable ?? true;
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
@@ -720,8 +719,7 @@ var Textarea2 = ({ className, style, ...props }) => {
         placeholder,
         onChange: handleChange,
         disabled: isDisabled || !isEditable,
-        readOnly: isReadonly,
-        required: isRequired
+        readOnly: isReadonly
       }
     ),
     error && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "mt-1 text-xs text-red-500", children: error })
@@ -774,6 +772,9 @@ var UrlInput = ({ className, style, ...props }) => {
 };
 var UrlInput_default = UrlInput;
 
+// src/components/Inputs/Checkbox/Checkbox.tsx
+var import_react5 = require("react");
+
 // src/components/ui/checkbox.tsx
 var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"));
 var import_jsx_runtime17 = require("react/jsx-runtime");
@@ -825,14 +826,38 @@ function Label({
 // src/components/Inputs/Checkbox/Checkbox.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var CheckboxInput = ({ className, style, ...props }) => {
+  const isEditable = props.isEditable ?? true;
+  const isDisabled = props.isDisabled ?? false;
   const text = props.text ? props.text : "Subscribe";
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center space-x-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Checkbox, { id: "newsletter" }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Label, { htmlFor: "newsletter", children: text })
-  ] }) });
+  const [error, setError] = (0, import_react5.useState)(null);
+  (0, import_react5.useEffect)(() => {
+    if (!props.validateOnMount) return;
+    setError(props.errorMessage || null);
+  }, [props.errorMessage, props.validateOnMount]);
+  const handleChange = (value) => {
+    props.onChange?.(value);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center space-x-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        Checkbox,
+        {
+          id: props.name || "checkbox",
+          checked: !!props.value,
+          onCheckedChange: handleChange,
+          disabled: !isEditable || isDisabled
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Label, { htmlFor: props.name || "checkbox", children: text })
+    ] }) }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "mt-1 text-xs text-red-500", children: error })
+  ] });
 };
 var Checkbox_default = CheckboxInput;
 
+// src/components/Inputs/RadioInput/RadioInput.tsx
+var import_react6 = require("react");
+
 // src/components/ui/radio-group.tsx
 var RadioGroupPrimitive = __toESM(require("@radix-ui/react-radio-group"));
 var import_jsx_runtime20 = require("react/jsx-runtime");
@@ -876,39 +901,108 @@ function RadioGroupItem({
 
 // src/components/Inputs/RadioInput/RadioInput.tsx
 var import_jsx_runtime21 = require("react/jsx-runtime");
-var RadioInput = ({ className, style, ...props }) => {
-  const text = Array.isArray(props.text) ? props.text : [props.text ?? "Subscribe"];
-  const formatList = text.filter((i) => i.value && i.label).map((item) => ({
-    label: item.label,
-    value: item.value
+var RadioInput = ({
+  className,
+  style,
+  defaultValue,
+  onChange,
+  data = [],
+  dataKey,
+  dataLabel,
+  ...props
+}) => {
+  const [error, setError] = (0, import_react6.useState)(null);
+  (0, import_react6.useEffect)(() => {
+    if (!props.validateOnMount) return;
+    setError(props.errorMessage || null);
+  }, [props.errorMessage, props.validateOnMount]);
+  const options = (data || []).map((item) => ({
+    value: item[dataKey || "value"],
+    label: item[dataLabel || "label"]
   }));
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(RadioGroup, { defaultValue: "option-1", children: formatList?.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center space-x-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(RadioGroupItem, { value: item.value, id: `r${index}` }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Label, { htmlFor: `r${index}`, children: item.label })
-  ] }, index)) }) });
+  const handleChange = (value) => {
+    onChange?.(value);
+  };
+  const resolvedDefaultValue = (typeof defaultValue === "string" ? defaultValue : void 0) ?? options[0]?.value;
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+      RadioGroup,
+      {
+        defaultValue: resolvedDefaultValue,
+        onValueChange: handleChange,
+        children: [
+          options.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "text-sm text-gray-500", children: "No options available" }),
+          options.map((item) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center space-x-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(RadioGroupItem, { value: item.value, id: `radio-${item.value}` }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Label, { htmlFor: `radio-${item.value}`, children: item.label })
+          ] }, item.value))
+        ]
+      }
+    ) }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "mt-1 text-xs text-red-500", children: error })
+  ] });
 };
 var RadioInput_default = RadioInput;
 
 // src/components/Inputs/MultiCheckbox/MultiCheckbox.tsx
+var import_react7 = require("react");
 var import_jsx_runtime22 = require("react/jsx-runtime");
-var MultiCheckbox = ({ className, style, ...props }) => {
-  const text = Array.isArray(props.text) ? props.text : [props.text ?? "Subscribe"];
-  const formatList = text.filter((i) => i.value && i.label).map((item) => ({
-    label: item.label,
-    value: item.value
+var MultiCheckbox = ({
+  className,
+  style,
+  data = [],
+  dataKey = "value",
+  dataLabel = "label",
+  value: propValue = {},
+  onChange,
+  isEditable = true,
+  isDisabled = false
+}) => {
+  const [value, setValue] = (0, import_react7.useState)(propValue);
+  const options = (data || []).map((item) => ({
+    value: item[dataKey || "value"],
+    label: item[dataLabel || "label"]
   }));
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex gap-3 flex-col", children: formatList?.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center space-x-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Checkbox, { id: `newsletter-${index}` }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Label, { htmlFor: `newsletter-${index}`, children: item.label })
-  ] }, index)) }) });
+  const handleChange = (0, import_react7.useCallback)(
+    (key, checked) => {
+      setValue((prev) => {
+        const newValue = { ...prev, [key]: checked };
+        onChange?.(newValue);
+        return newValue;
+      });
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+    "div",
+    {
+      className: cn("flex flex-col gap-3", className),
+      style,
+      children: [
+        options.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-sm text-gray-500", children: "No options available." }),
+        options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center space-x-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            Checkbox,
+            {
+              id: opt.value,
+              checked: !!value[opt.value],
+              onCheckedChange: (checked) => handleChange(opt.value, checked === true),
+              disabled: !isEditable || isDisabled
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Label, { htmlFor: opt.value, children: opt.label })
+        ] }, opt.value))
+      ]
+    }
+  );
 };
 var MultiCheckbox_default = MultiCheckbox;
 
 // src/components/Inputs/RichText/RichText.tsx
-var import_react6 = require("react");
+var import_react9 = require("react");
 
 // src/components/Global/TinyMceEditor.tsx
-var import_react5 = require("react");
+var import_react8 = require("react");
 var import_tinymce_react = require("@tinymce/tinymce-react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 function MyEditor({
@@ -916,7 +1010,7 @@ function MyEditor({
   onChange,
   isDefault
 }) {
-  const editorRef = (0, import_react5.useRef)(null);
+  const editorRef = (0, import_react8.useRef)(null);
   function stripOuterP(html) {
     const trimmedHtml = html.trim();
     if (!trimmedHtml) return "";
@@ -928,7 +1022,7 @@ function MyEditor({
     }
     return trimmedHtml;
   }
-  const isDefaultToolbar = (0, import_react5.useMemo)(() => {
+  const isDefaultToolbar = (0, import_react8.useMemo)(() => {
     let toolbar = "undo redo | formatselect | bold italic forecolor";
     if (isDefault) {
       toolbar = "undo redo | blocks | bold italic forecolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help";
@@ -981,8 +1075,8 @@ function MyEditor({
 // src/components/Inputs/RichText/RichText.tsx
 var import_jsx_runtime24 = require("react/jsx-runtime");
 function RichText({ className, style, ...props }) {
-  const [error, setError] = (0, import_react6.useState)(null);
-  (0, import_react6.useEffect)(() => {
+  const [error, setError] = (0, import_react9.useState)(null);
+  (0, import_react9.useEffect)(() => {
     if (!props.validateOnMount) return;
     setError(props.errorMessage || null);
   }, [props.errorMessage, props.validateOnMount]);
@@ -1147,10 +1241,10 @@ var Dropdown = ({ className, style, ...props }) => {
   const handleChange = (value) => {
     props.onChange?.(value);
   };
-  const dataKey = props.dataKey || "key";
+  const dataKey = props.dataKey || "value";
   const dataLabel = props.dataLabel || "label";
   const options = list.map((item) => ({
-    key: item[dataKey],
+    value: item[dataKey],
     label: item[dataLabel]
   }));
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
@@ -1168,13 +1262,16 @@ var Dropdown = ({ className, style, ...props }) => {
           children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SelectValue, { placeholder })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SelectContent, { children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SelectItem, { value: opt.key, children: opt.label }, opt.key)) })
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SelectContent, { children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SelectItem, { value: opt.value, children: opt.label }, opt.value)) })
     ] }),
     error && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "mt-1 text-xs text-red-500", children: error })
   ] });
 };
 var Dropdown_default = Dropdown;
 
+// src/components/Inputs/SwitchToggle/SwitchToggle.tsx
+var import_react10 = require("react");
+
 // src/components/ui/switch.tsx
 var SwitchPrimitive = __toESM(require("@radix-ui/react-switch"));
 var import_jsx_runtime27 = require("react/jsx-runtime");
@@ -1207,11 +1304,31 @@ function Switch({
 // src/components/Inputs/SwitchToggle/SwitchToggle.tsx
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var SwitchToggle = ({ className, style, ...props }) => {
-  const text = Array.isArray(props.text) ? props.text : [props.text ?? "Subscribe"];
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className, style, children: text?.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center space-x-2 mb-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Switch, { id: `switch-${index}` }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Label, { htmlFor: `switch-${index}`, children: item })
-  ] }, index)) });
+  const isEditable = props.isEditable ?? true;
+  const isDisabled = props.isDisabled ?? false;
+  const [error, setError] = (0, import_react10.useState)(null);
+  (0, import_react10.useEffect)(() => {
+    if (!props.validateOnMount) return;
+    setError(props.errorMessage || null);
+  }, [props.errorMessage, props.validateOnMount]);
+  const handleChange = (value) => {
+    props.onChange?.(value);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center space-x-2 mb-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        Switch,
+        {
+          id: props.name || "switch",
+          checked: !!props.value,
+          onCheckedChange: handleChange,
+          disabled: isDisabled || !isEditable
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Label, { htmlFor: props.name || "switch", children: props.text })
+    ] }) }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "mt-1 text-xs text-red-500", children: error })
+  ] });
 };
 var SwitchToggle_default = SwitchToggle;
 
@@ -1303,12 +1420,12 @@ var SearchInput = ({ className, style, ...props }) => {
 var SearchInput_default = SearchInput;
 
 // src/components/Inputs/FileInput/FileInput.tsx
-var import_react7 = require("react");
+var import_react11 = require("react");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var FileInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
-  const [error, setError] = (0, import_react7.useState)(null);
-  (0, import_react7.useEffect)(() => {
+  const [error, setError] = (0, import_react11.useState)(null);
+  (0, import_react11.useEffect)(() => {
     if (!props.validateOnMount) return;
     setError(props.errorMessage || null);
   }, [props.errorMessage, props.validateOnMount]);
@@ -1338,7 +1455,7 @@ var FileInput = ({ className, style, ...props }) => {
 var FileInput_default = FileInput;
 
 // src/components/Inputs/DatePicker/DatePicker.tsx
-var import_react8 = __toESM(require("react"));
+var import_react12 = __toESM(require("react"));
 var import_jsx_runtime32 = require("react/jsx-runtime");
 function DatePicker({ className, style, ...props }) {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -1350,7 +1467,7 @@ function DatePicker({ className, style, ...props }) {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  const [error, setError] = import_react8.default.useState(null);
+  const [error, setError] = import_react12.default.useState(null);
   const resolveDate = (option, customOption) => {
     if (!option) return void 0;
     switch (option) {
@@ -1365,7 +1482,7 @@ function DatePicker({ className, style, ...props }) {
   };
   const minDate = resolveDate(minimumDate, customMinimumDate);
   const maxDate = resolveDate(maximumDate, customMaximumDate);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (!props.validateOnMount) return;
     setError(props.errorMessage || null);
   }, [props.errorMessage, props.validateOnMount]);
@@ -1385,7 +1502,11 @@ function DatePicker({ className, style, ...props }) {
           disabled: isDisabled || !isEditable,
           name: props.name,
           value: props.value,
-          className: cn(className, error ? "border-red-500" : ""),
+          className: cn(
+            className,
+            error ? "border-red-500" : "",
+            "appearance-auto"
+          ),
           style: {
             ...style,
             borderColor: error ? "#f87171" : style?.borderColor
@@ -1622,40 +1743,57 @@ function PopoverContent({
 
 // src/components/Inputs/DateRange/DateRange.tsx
 var import_jsx_runtime35 = require("react/jsx-runtime");
-var DateRange = ({ className, style }) => {
-  const [date, setDate] = React13.useState({
-    from: /* @__PURE__ */ new Date(),
-    to: (0, import_date_fns.addDays)(/* @__PURE__ */ new Date(), 7)
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Popover, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-      Button,
-      {
-        id: "date",
-        variant: "outline",
-        className: cn(
-          "w-[300px] justify-start text-left font-normal text-[11px]",
-          !date && "text-muted-foreground"
-        ),
-        children: date?.from ? date.to ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-          (0, import_date_fns.format)(date.from, "LLL dd, y"),
-          " -",
-          " ",
-          (0, import_date_fns.format)(date.to, "LLL dd, y")
-        ] }) : (0, import_date_fns.format)(date.from, "LLL dd, y") : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { children: "Pick a date range" })
-      }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-      Calendar2,
-      {
-        mode: "range",
-        defaultMonth: date?.from,
-        selected: date,
-        onSelect: setDate,
-        numberOfMonths: 2
-      }
-    ) })
-  ] }) });
+var DateRange = ({ className, style, ...props }) => {
+  const [error, setError] = React13.useState(null);
+  const isDateRange = (val) => !!val && val.from instanceof Date;
+  const [date, setDate] = React13.useState(
+    isDateRange(props.value) ? props.value : {
+      from: /* @__PURE__ */ new Date(),
+      to: (0, import_date_fns.addDays)(/* @__PURE__ */ new Date(), 7)
+    }
+  );
+  React13.useEffect(() => {
+    if (!props.validateOnMount) return;
+    setError(props.errorMessage || null);
+  }, [props.errorMessage, props.validateOnMount]);
+  const handleChange = (value) => {
+    setDate(value);
+    if (value) {
+      props.onChange?.(value);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Popover, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        Button,
+        {
+          id: "date",
+          variant: "outline",
+          className: cn(
+            "w-[300px] justify-start text-left font-normal text-[11px]",
+            !date && "text-muted-foreground"
+          ),
+          children: date?.from ? date.to ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+            (0, import_date_fns.format)(date.from, "LLL dd, y"),
+            " -",
+            " ",
+            (0, import_date_fns.format)(date.to, "LLL dd, y")
+          ] }) : (0, import_date_fns.format)(date.from, "LLL dd, y") : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { children: "Pick a date range" })
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        Calendar2,
+        {
+          mode: "range",
+          defaultMonth: date?.from,
+          selected: date,
+          onSelect: handleChange,
+          numberOfMonths: 2
+        }
+      ) })
+    ] }) }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "mt-1 text-xs text-red-500", children: error })
+  ] });
 };
 var DateRange_default = DateRange;
 
@@ -1993,13 +2131,13 @@ var CustomPagination = ({
 var Pagination_default = CustomPagination;
 
 // src/components/DataDisplay/Table/Table.tsx
-var import_react9 = require("react");
+var import_react13 = require("react");
 var import_jsx_runtime40 = require("react/jsx-runtime");
 var Table2 = ({ columns, data, rowActions, className, style, pagination = false, itemsPerPage = 10, onPageChange, loading = false }) => {
   const rawColumns = Array.isArray(columns) ? columns : [];
   const rawData = Array.isArray(data) ? data : [];
   const rawRowActions = Array.isArray(rowActions) ? rowActions : [];
-  const [currentPage, setCurrentPage] = (0, import_react9.useState)(1);
+  const [currentPage, setCurrentPage] = (0, import_react13.useState)(1);
   const enablePagination = pagination && rawData.length > itemsPerPage;
   const handlePageChange = (page) => {
     setCurrentPage(page);
@@ -2164,12 +2302,12 @@ var Tabs = ({ tabs, className, style, pathname, LinkComponent }) => {
 var Tabs_default = Tabs;
 
 // src/components/Navigation/Stages/Stages.tsx
-var import_react10 = __toESM(require("react"));
+var import_react14 = __toESM(require("react"));
 var import_jsx_runtime43 = require("react/jsx-runtime");
 var StagesComponent = ({ stages, isShowBtn, buttonText, className, style }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex items-center justify-between bg-gray-50 p-2 rounded-lg border border-gray-200 w-full", children: [
     /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("button", { className: "p-2 hover:bg-gray-100 rounded", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("svg", { className: "w-4 h-4 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "flex items-center flex-1 px-2", children: stages?.length > 0 && stages?.map((stage, index) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_react10.default.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "flex items-center flex-1 px-2", children: stages?.length > 0 && stages?.map((stage, index) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_react14.default.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
         "button",
         {