@algorithm-shift/design-system 1.2.60 → 1.2.61

package/dist/index.d.mts

@@ -120,6 +120,8 @@ interface StagesProps extends ElementProps {
 
 type ButtonProps = ElementProps & React.ComponentProps<"button"> & {
   textContent?: string;
+  loading?: boolean;
+  loadingText?: string;
   type?: 'button' | 'submit' | 'reset';
 }
 
@@ -223,7 +225,7 @@ declare function TabList({ children, style, className, activeTab, tabId }: TabLi
 
 declare function TabGroupComponent({ children, style, className, list, activeTab, onTabChange, }: TabGroupProps): react_jsx_runtime.JSX.Element;
 
-declare const ButtonWrapper: ({ className, style, textContent, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
+declare const ButtonWrapper: ({ className, style, textContent, loadingText, loading, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
 
 declare const ImageControl: ({ className, style, imageUrl, imageUrlExternal, altText, }: ImageProps) => react_jsx_runtime.JSX.Element;
 

package/dist/index.d.ts

@@ -120,6 +120,8 @@ interface StagesProps extends ElementProps {
 
 type ButtonProps = ElementProps & React.ComponentProps<"button"> & {
   textContent?: string;
+  loading?: boolean;
+  loadingText?: string;
   type?: 'button' | 'submit' | 'reset';
 }
 
@@ -223,7 +225,7 @@ declare function TabList({ children, style, className, activeTab, tabId }: TabLi
 
 declare function TabGroupComponent({ children, style, className, list, activeTab, onTabChange, }: TabGroupProps): react_jsx_runtime.JSX.Element;
 
-declare const ButtonWrapper: ({ className, style, textContent, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
+declare const ButtonWrapper: ({ className, style, textContent, loadingText, loading, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
 
 declare const ImageControl: ({ className, style, imageUrl, imageUrlExternal, altText, }: ImageProps) => react_jsx_runtime.JSX.Element;
 

package/dist/index.js

@@ -333,6 +333,8 @@ var ButtonWrapper = ({
   className,
   style,
   textContent = "Button",
+  loadingText = "Loading...",
+  loading = false,
   ...props
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
@@ -341,7 +343,8 @@ var ButtonWrapper = ({
       ...props,
       className,
       style,
-      children: textContent
+      disabled: props.disabled || loading,
+      children: loading ? loadingText : textContent
     }
   );
 };
@@ -26910,6 +26913,9 @@ var Icon2 = ({ iconType = "fontawesome", name = "Envelope", className, fontSize
 };
 var Icon_default = Icon2;
 
+// src/components/Inputs/TextInput/TextInput.tsx
+var import_react7 = require("react");
+
 // src/components/ui/input.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
 function Input({ className, type, ...props }) {
@@ -26937,6 +26943,12 @@ var TextInput = ({ className, style, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
+  (0, import_react7.useEffect)(() => {
+    if (props.value !== void 0) {
+      const e = { target: { value: props.value } };
+      handleChange?.(e);
+    }
+  }, []);
   const handleChange = (e) => {
     props.onChange?.(e);
   };
@@ -26965,6 +26977,7 @@ var TextInput = ({ className, style, ...props }) => {
 var TextInput_default = TextInput;
 
 // src/components/Inputs/NumberInput/NumberInput.tsx
+var import_react8 = require("react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var NumberInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -26972,6 +26985,12 @@ var NumberInput = ({ className, style, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
+  (0, import_react8.useEffect)(() => {
+    if (props.value !== void 0) {
+      const e = { target: { value: props.value } };
+      handleChange?.(e);
+    }
+  }, []);
   const handleChange = (e) => {
     props.onChange?.(e);
   };
@@ -27004,6 +27023,7 @@ var NumberInput = ({ className, style, ...props }) => {
 var NumberInput_default = NumberInput;
 
 // src/components/Inputs/EmailInput/EmailInput.tsx
+var import_react9 = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var EmailInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -27011,6 +27031,12 @@ var EmailInput = ({ className, style, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
+  (0, import_react9.useEffect)(() => {
+    if (props.value !== void 0) {
+      const e = { target: { value: props.value } };
+      handleChange?.(e);
+    }
+  }, []);
   const handleChange = (e) => {
     props.onChange?.(e);
   };
@@ -27042,6 +27068,7 @@ var EmailInput = ({ className, style, ...props }) => {
 var EmailInput_default = EmailInput;
 
 // src/components/Inputs/PasswordInput/PasswordInput.tsx
+var import_react10 = require("react");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 var PasswordInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -27049,6 +27076,12 @@ var PasswordInput = ({ className, style, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
+  (0, import_react10.useEffect)(() => {
+    if (props.value !== void 0) {
+      const e = { target: { value: props.value } };
+      handleChange?.(e);
+    }
+  }, []);
   const handleChange = (e) => {
     props.onChange?.(e);
   };
@@ -27080,6 +27113,9 @@ var PasswordInput = ({ className, style, ...props }) => {
 };
 var PasswordInput_default = PasswordInput;
 
+// src/components/Inputs/Textarea/Textarea.tsx
+var import_react11 = require("react");
+
 // src/components/ui/textarea.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
 function Textarea({ className, ...props }) {
@@ -27104,6 +27140,12 @@ var Textarea2 = ({ className, style, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
+  (0, import_react11.useEffect)(() => {
+    if (props.value !== void 0) {
+      const e = { target: { value: props.value } };
+      handleChange?.(e);
+    }
+  }, []);
   const handleChange = (e) => {
     props.onChange?.(e);
   };
@@ -27132,6 +27174,7 @@ var Textarea2 = ({ className, style, ...props }) => {
 var Textarea_default = Textarea2;
 
 // src/components/Inputs/UrlInput/UrlInput.tsx
+var import_react12 = require("react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
 var UrlInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -27139,6 +27182,12 @@ var UrlInput = ({ className, style, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
+  (0, import_react12.useEffect)(() => {
+    if (props.value !== void 0) {
+      const e = { target: { value: props.value } };
+      handleChange?.(e);
+    }
+  }, []);
   const handleChange = (e) => {
     props.onChange?.(e);
   };
@@ -27170,6 +27219,9 @@ var UrlInput = ({ className, style, ...props }) => {
 };
 var UrlInput_default = UrlInput;
 
+// src/components/Inputs/Checkbox/Checkbox.tsx
+var import_react13 = require("react");
+
 // src/components/ui/checkbox.tsx
 var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"));
 var import_jsx_runtime26 = require("react/jsx-runtime");
@@ -27224,6 +27276,11 @@ var CheckboxInput = ({ className, style, ...props }) => {
   const isEditable = props.isEditable ?? true;
   const isDisabled = props.isDisabled ?? false;
   const text = props.text ? props.text : "Subscribe";
+  (0, import_react13.useEffect)(() => {
+    if (props.value) {
+      handleChange(props.value);
+    }
+  }, []);
   const handleChange = (value) => {
     props.onChange?.(value);
   };
@@ -27245,6 +27302,9 @@ var CheckboxInput = ({ className, style, ...props }) => {
 };
 var Checkbox_default = CheckboxInput;
 
+// src/components/Inputs/RadioInput/RadioInput.tsx
+var import_react14 = require("react");
+
 // src/components/ui/radio-group.tsx
 var RadioGroupPrimitive = __toESM(require("@radix-ui/react-radio-group"));
 var import_jsx_runtime29 = require("react/jsx-runtime");
@@ -27303,6 +27363,11 @@ var RadioInput = ({
     value: item[dataKey || "value"],
     label: item[dataLabel || "label"]
   }));
+  (0, import_react14.useEffect)(() => {
+    if (props.value !== void 0) {
+      handleChange?.(props.value);
+    }
+  }, []);
   const handleChange = (value) => {
     onChange?.(value);
   };
@@ -27328,7 +27393,7 @@ var RadioInput = ({
 var RadioInput_default = RadioInput;
 
 // src/components/Inputs/MultiCheckbox/MultiCheckbox.tsx
-var import_react7 = require("react");
+var import_react15 = require("react");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var MultiCheckbox = ({
   className,
@@ -27342,12 +27407,17 @@ var MultiCheckbox = ({
   isDisabled = false
 }) => {
   const list = Array.isArray(data) ? data : [];
-  const [value, setValue] = (0, import_react7.useState)(propValue);
+  const [value, setValue] = (0, import_react15.useState)(propValue);
   const options = (list || []).map((item) => ({
     value: item[dataKey || "value"],
     label: item[dataLabel || "label"]
   }));
-  const handleChange = (0, import_react7.useCallback)(
+  (0, import_react15.useEffect)(() => {
+    if (propValue !== void 0) {
+      onChange?.(propValue);
+    }
+  }, []);
+  const handleChange = (0, import_react15.useCallback)(
     (key, checked) => {
       setValue((prev) => {
         const newValue = { ...prev, [key]: checked };
@@ -27382,8 +27452,11 @@ var MultiCheckbox = ({
 };
 var MultiCheckbox_default = MultiCheckbox;
 
+// src/components/Inputs/RichText/RichText.tsx
+var import_react17 = require("react");
+
 // src/components/Global/TinyMceEditor.tsx
-var import_react8 = require("react");
+var import_react16 = require("react");
 var import_tinymce_react = require("@tinymce/tinymce-react");
 var import_jsx_runtime32 = require("react/jsx-runtime");
 function MyEditor({
@@ -27391,7 +27464,7 @@ function MyEditor({
   onChange,
   isDefault
 }) {
-  const editorRef = (0, import_react8.useRef)(null);
+  const editorRef = (0, import_react16.useRef)(null);
   function stripOuterP(html) {
     const trimmedHtml = html.trim();
     if (!trimmedHtml) return "";
@@ -27403,7 +27476,7 @@ function MyEditor({
     }
     return trimmedHtml;
   }
-  const isDefaultToolbar = (0, import_react8.useMemo)(() => {
+  const isDefaultToolbar = (0, import_react16.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";
@@ -27456,6 +27529,14 @@ function MyEditor({
 // src/components/Inputs/RichText/RichText.tsx
 var import_jsx_runtime33 = require("react/jsx-runtime");
 function RichText({ className, style, ...props }) {
+  (0, import_react17.useEffect)(() => {
+    if (props.value !== void 0) {
+      handleChange?.(props.value);
+    }
+  }, []);
+  const handleChange = (content) => {
+    props.onChange?.(content);
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
     "div",
     {
@@ -27465,13 +27546,16 @@ function RichText({ className, style, ...props }) {
         borderColor: props.errorMessage ? "#f87171" : style?.borderColor
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MyEditor, { onChange: (content) => props.onChange?.(content), value: props.value || "", isDefault: true }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MyEditor, { onChange: handleChange, value: props.value || "", isDefault: true }),
         props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
       ]
     }
   );
 }
 
+// src/components/Inputs/Dropdown/Dropdown.tsx
+var import_react18 = require("react");
+
 // src/components/ui/select.tsx
 var SelectPrimitive = __toESM(require("@radix-ui/react-select"));
 var import_jsx_runtime34 = require("react/jsx-runtime");
@@ -27606,6 +27690,11 @@ var Dropdown = ({ className, style, ...props }) => {
   const isEditable = props.isEditable ?? true;
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
+  (0, import_react18.useEffect)(() => {
+    if (props.value !== void 0) {
+      handleChange(props.value);
+    }
+  }, []);
   const handleChange = (value) => {
     props.onChange?.(value);
   };
@@ -27641,6 +27730,9 @@ var Dropdown = ({ className, style, ...props }) => {
 };
 var Dropdown_default = Dropdown;
 
+// src/components/Inputs/SwitchToggle/SwitchToggle.tsx
+var import_react19 = require("react");
+
 // src/components/ui/switch.tsx
 var SwitchPrimitive = __toESM(require("@radix-ui/react-switch"));
 var import_jsx_runtime36 = require("react/jsx-runtime");
@@ -27675,6 +27767,11 @@ var import_jsx_runtime37 = require("react/jsx-runtime");
 var SwitchToggle = ({ className, style, ...props }) => {
   const isEditable = props.isEditable ?? true;
   const isDisabled = props.isDisabled ?? false;
+  (0, import_react19.useEffect)(() => {
+    if (props.value !== void 0) {
+      handleChange?.(props.value);
+    }
+  }, []);
   const handleChange = (value) => {
     props.onChange?.(value);
   };
@@ -27697,6 +27794,7 @@ var SwitchToggle = ({ className, style, ...props }) => {
 var SwitchToggle_default = SwitchToggle;
 
 // src/components/Inputs/PhoneInput/PhoneInput.tsx
+var import_react20 = require("react");
 var import_react_international_phone = require("react-international-phone");
 var import_style = require("react-international-phone/style.css");
 var import_jsx_runtime38 = require("react/jsx-runtime");
@@ -27704,6 +27802,11 @@ var PhoneInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Enter phone number";
   const isEditable = props.isEditable ?? true;
   const isDisabled = props.isDisabled ?? false;
+  (0, import_react20.useEffect)(() => {
+    if (props.value !== void 0) {
+      handleChange?.(props.value);
+    }
+  }, []);
   const handleChange = (val) => {
     props.onChange?.(val);
   };
@@ -27738,6 +27841,7 @@ var PhoneInput = ({ className, style, ...props }) => {
 var PhoneInput_default = PhoneInput;
 
 // src/components/Inputs/SearchInput/SearchInput.tsx
+var import_react21 = require("react");
 var import_jsx_runtime39 = require("react/jsx-runtime");
 var SearchInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -27745,6 +27849,12 @@ var SearchInput = ({ className, style, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
+  (0, import_react21.useEffect)(() => {
+    if (props.value !== void 0) {
+      const e = { target: { value: props.value } };
+      handleChange?.(e);
+    }
+  }, []);
   const handleChange = (e) => {
     props.onChange?.(e);
   };
@@ -27777,9 +27887,19 @@ var SearchInput = ({ className, style, ...props }) => {
 var SearchInput_default = SearchInput;
 
 // src/components/Inputs/FileInput/FileInput.tsx
+var import_react22 = require("react");
 var import_jsx_runtime40 = require("react/jsx-runtime");
 var FileInput2 = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
+  (0, import_react22.useEffect)(() => {
+    if (props.value !== void 0) {
+      const e = { target: { value: props.value } };
+      handleChange?.(e);
+    }
+  }, []);
+  const handleChange = (e) => {
+    props.onChange?.(e);
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "d-flex items-center relative align-middle", children: [
     /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       Input,
@@ -27795,9 +27915,7 @@ var FileInput2 = ({ className, style, ...props }) => {
         },
         autoComplete: "off",
         placeholder,
-        onChange: (e) => {
-          props.onChange?.(e);
-        }
+        onChange: handleChange
       }
     ),
     props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
@@ -27806,6 +27924,7 @@ var FileInput2 = ({ className, style, ...props }) => {
 var FileInput_default = FileInput2;
 
 // src/components/Inputs/DatePicker/DatePicker.tsx
+var import_react23 = require("react");
 var import_jsx_runtime41 = require("react/jsx-runtime");
 function DatePicker({ className, style, ...props }) {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -27831,6 +27950,11 @@ function DatePicker({ className, style, ...props }) {
   };
   const minDate = resolveDate(minimumDate, customMinimumDate);
   const maxDate = resolveDate(maximumDate, customMaximumDate);
+  (0, import_react23.useEffect)(() => {
+    if (props.value !== void 0) {
+      handleChange(props.value);
+    }
+  }, []);
   const handleChange = (e) => {
     props.onChange?.(e);
   };
@@ -27868,11 +27992,11 @@ function DatePicker({ className, style, ...props }) {
 }
 
 // src/components/Inputs/DateRange/DateRange.tsx
-var React4 = __toESM(require("react"));
+var import_react24 = __toESM(require("react"));
 var import_date_fns = require("date-fns");
 
 // src/components/ui/calendar.tsx
-var React3 = __toESM(require("react"));
+var React4 = __toESM(require("react"));
 var import_react_day_picker = require("react-day-picker");
 var import_jsx_runtime42 = require("react/jsx-runtime");
 function Calendar2({
@@ -28027,8 +28151,8 @@ function CalendarDayButton({
   ...props
 }) {
   const defaultClassNames = (0, import_react_day_picker.getDefaultClassNames)();
-  const ref = React3.useRef(null);
-  React3.useEffect(() => {
+  const ref = React4.useRef(null);
+  React4.useEffect(() => {
     if (modifiers.focused) ref.current?.focus();
   }, [modifiers.focused]);
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
@@ -28090,12 +28214,17 @@ function PopoverContent({
 var import_jsx_runtime44 = require("react/jsx-runtime");
 var DateRange = ({ className, style, ...props }) => {
   const isDateRange = (val) => !!val && val.from instanceof Date;
-  const [date, setDate] = React4.useState(
+  const [date, setDate] = import_react24.default.useState(
     isDateRange(props.value) ? props.value : {
       from: /* @__PURE__ */ new Date(),
       to: (0, import_date_fns.addDays)(/* @__PURE__ */ new Date(), 7)
     }
   );
+  (0, import_react24.useEffect)(() => {
+    if (props.value && isDateRange(props.value)) {
+      handleChange?.(props.value);
+    }
+  }, []);
   const handleChange = (value) => {
     setDate(value);
     if (value) {
@@ -28138,6 +28267,7 @@ var DateRange = ({ className, style, ...props }) => {
 var DateRange_default = DateRange;
 
 // src/components/Inputs/TextInputGroup/TextInputGroup.tsx
+var import_react25 = require("react");
 var import_jsx_runtime45 = require("react/jsx-runtime");
 var TextInputGroup = ({ className, style, prepend, append, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -28145,6 +28275,12 @@ var TextInputGroup = ({ className, style, prepend, append, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
+  (0, import_react25.useEffect)(() => {
+    if (props.value !== void 0) {
+      const e = { target: { value: props.value } };
+      handleChange?.(e);
+    }
+  }, []);
   const handleChange = (e) => {
     props.onChange?.(e);
   };
@@ -28192,7 +28328,7 @@ var TextInputGroup = ({ className, style, prepend, append, ...props }) => {
 var TextInputGroup_default = TextInputGroup;
 
 // src/components/DataDisplay/Table/Table.tsx
-var import_react9 = require("react");
+var import_react26 = require("react");
 
 // src/components/ui/data-table.tsx
 var import_react_table = require("@tanstack/react-table");
@@ -28575,9 +28711,9 @@ var Table4 = ({
   const rawData = Array.isArray(data) ? data : [];
   const rawRowActions = Array.isArray(rowActions) ? rowActions : [];
   const isControlled = typeof page === "number";
-  const [internalPage, setInternalPage] = (0, import_react9.useState)(1);
+  const [internalPage, setInternalPage] = (0, import_react26.useState)(1);
   const currentPage = isControlled ? page : internalPage;
-  (0, import_react9.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (isControlled) return;
     if (currentPage > 1 && !pagination) setInternalPage(1);
   }, [pagination, isControlled]);
@@ -28718,12 +28854,12 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode }) => {
 var Tabs_default = Tabs;
 
 // src/components/Navigation/Stages/Stages.tsx
-var import_react10 = __toESM(require("react"));
+var import_react27 = __toESM(require("react"));
 var import_jsx_runtime52 = require("react/jsx-runtime");
 var StagesComponent = ({ stages, isShowBtn, buttonText, className, style }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex items-center justify-between bg-red p-2 rounded-lg border border-gray-200 w-full", children: [
     /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("button", { className: "p-2 hover:bg-gray-100 rounded", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("svg", { className: "w-4 h-4 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "flex items-center flex-1 px-2 flex-wrap gap-2", children: stages?.length > 0 && stages?.map((stage, index) => /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_react10.default.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "flex items-center flex-1 px-2 flex-wrap gap-2", children: stages?.length > 0 && stages?.map((stage, index) => /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_react27.default.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
         "button",
         {
@@ -28755,10 +28891,10 @@ var import_jsx_runtime55 = require("react/jsx-runtime");
 var import_jsx_runtime56 = require("react/jsx-runtime");
 
 // src/components/ui/avatar.tsx
-var React6 = __toESM(require("react"));
+var React7 = __toESM(require("react"));
 var AvatarPrimitive = __toESM(require("@radix-ui/react-avatar"));
 var import_jsx_runtime57 = require("react/jsx-runtime");
-var Avatar = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+var Avatar = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
   AvatarPrimitive.Root,
   {
     ref,
@@ -28770,7 +28906,7 @@ var Avatar = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 Avatar.displayName = AvatarPrimitive.Root.displayName;
-var AvatarImage = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+var AvatarImage = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
   AvatarPrimitive.Image,
   {
     ref,
@@ -28779,7 +28915,7 @@ var AvatarImage = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-var AvatarFallback = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+var AvatarFallback = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
   AvatarPrimitive.Fallback,
   {
     ref,