@embeddable.com/remarkable-ui 2.0.30 → 2.0.32

package/dist/index.js

@@ -2163,11 +2163,29 @@ var Dropdown = ({
 };
 
 // src/components/editors/selects/shared/SelectFieldTrigger/SelectFieldTrigger.tsx
-import styles14 from "./SelectFieldTrigger.module-M6BRE7IY.module.css";
+import styles15 from "./SelectFieldTrigger.module-M6BRE7IY.module.css";
 import { IconCaretDownFilled as IconCaretDownFilled3, IconLoader2, IconX } from "@tabler/icons-react";
-import clsx11 from "clsx";
+import clsx12 from "clsx";
 import { forwardRef as forwardRef3 } from "react";
+
+// src/components/shared/GhostButton/GhostButton.tsx
+import React3 from "react";
+import clsx11 from "clsx";
+import styles14 from "./GhostButton.module-43KOFC6W.module.css";
 import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
+var GhostButton = React3.forwardRef(
+  ({ startIcon: StartIcon, endIcon: EndIcon, children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs12("button", { ref, className: clsx11(styles14.ghostButton, className), ...props, children: [
+      StartIcon && /* @__PURE__ */ jsx20(StartIcon, {}),
+      /* @__PURE__ */ jsx20("span", { children }),
+      EndIcon && /* @__PURE__ */ jsx20(EndIcon, {})
+    ] });
+  }
+);
+GhostButton.displayName = "GhostButton";
+
+// src/components/editors/selects/shared/SelectFieldTrigger/SelectFieldTrigger.tsx
+import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
 var SelectFieldTrigger = forwardRef3(
   ({
     startIcon: StartIcon,
@@ -2177,6 +2195,7 @@ var SelectFieldTrigger = forwardRef3(
     isLoading,
     onClear,
     error = false,
+    variant = "default",
     ...props
   }, ref) => {
     const displayValue = valueLabel || placeholder;
@@ -2186,21 +2205,27 @@ var SelectFieldTrigger = forwardRef3(
       e.preventDefault();
       onClear?.();
     };
-    return /* @__PURE__ */ jsxs12(
+    if (variant === "ghost") {
+      return /* @__PURE__ */ jsxs13(GhostButton, { ref, endIcon: isLoading ? IconLoader2 : IconCaretDownFilled3, ...props, children: [
+        displayValue,
+        showClearButton && /* @__PURE__ */ jsx21(IconX, { onPointerDown: handleClear })
+      ] });
+    }
+    return /* @__PURE__ */ jsxs13(
       "button",
       {
         ref,
-        className: clsx11(
-          styles14.selectFieldTrigger,
-          valueLabel && styles14.filled,
-          error && styles14.error
+        className: clsx12(
+          styles15.selectFieldTrigger,
+          valueLabel && styles15.filled,
+          error && styles15.error
         ),
         ...props,
         children: [
-          StartIcon && /* @__PURE__ */ jsx20(StartIcon, {}),
-          /* @__PURE__ */ jsx20("span", { children: displayValue }),
-          showClearButton && /* @__PURE__ */ jsx20(IconX, { onPointerDown: handleClear }),
-          isLoading ? /* @__PURE__ */ jsx20(IconLoader2, { className: styles14.loading }) : /* @__PURE__ */ jsx20(IconCaretDownFilled3, {})
+          StartIcon && /* @__PURE__ */ jsx21(StartIcon, {}),
+          /* @__PURE__ */ jsx21("span", { children: displayValue }),
+          showClearButton && /* @__PURE__ */ jsx21(IconX, { onPointerDown: handleClear }),
+          isLoading ? /* @__PURE__ */ jsx21(IconLoader2, { className: styles15.loading }) : /* @__PURE__ */ jsx21(IconCaretDownFilled3, {})
         ]
       }
     );
@@ -2210,9 +2235,9 @@ SelectFieldTrigger.displayName = "SelectFieldTrigger";
 
 // src/components/editors/selects/shared/SelectFieldContent/SelectFieldContent.tsx
 import { useEffect as useEffect6, useRef as useRef9 } from "react";
-import styles15 from "./SelectFieldContent.module-GZYJOPUB.module.css";
-import clsx12 from "clsx";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import styles16 from "./SelectFieldContent.module-GZYJOPUB.module.css";
+import clsx13 from "clsx";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var SelectFieldContent = ({
   children,
   autoFocus,
@@ -2266,33 +2291,33 @@ var SelectFieldContent = ({
       container.removeEventListener("keydown", onKeyDown);
     };
   }, [autoFocus, children]);
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     "div",
     {
       ref: containerRef,
       tabIndex: -1,
-      className: clsx12(styles15.selectFieldContent, fitContent && styles15.fitContent, className),
+      className: clsx13(styles16.selectFieldContent, fitContent && styles16.fitContent, className),
       ...props,
       children
     }
   );
 };
 var SelectFieldContentList = ({ children, disabled }) => {
-  return /* @__PURE__ */ jsx21("div", { className: clsx12(styles15.selectFieldContentList, disabled && styles15.disabled), children });
+  return /* @__PURE__ */ jsx22("div", { className: clsx13(styles16.selectFieldContentList, disabled && styles16.disabled), children });
 };
 
 // src/components/shared/Field/FieldFeedback.tsx
-import clsx13 from "clsx";
-import styles16 from "./FieldFeedback.module-F7Z33KCS.module.css";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import clsx14 from "clsx";
+import styles17 from "./FieldFeedback.module-F7Z33KCS.module.css";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var FieldFeedback = ({ message, variant, className }) => {
-  return /* @__PURE__ */ jsx22("p", { className: clsx13(styles16.fieldFeedback, variant && styles16[variant], className), children: message });
+  return /* @__PURE__ */ jsx23("p", { className: clsx14(styles17.fieldFeedback, variant && styles17[variant], className), children: message });
 };
 
 // src/components/shared/Button/Button.tsx
-import styles17 from "./Button.module-GOXSST7L.module.css";
-import clsx14 from "clsx";
-import { jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
+import styles18 from "./Button.module-GOXSST7L.module.css";
+import clsx15 from "clsx";
+import { jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
 var Button = ({
   children,
   variant = "primary",
@@ -2302,16 +2327,16 @@ var Button = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs13("button", { className: clsx14(styles17.button, styles17[variant], styles17[size], className), ...props, children: [
-    StartIcon && /* @__PURE__ */ jsx23(StartIcon, {}),
-    /* @__PURE__ */ jsx23("span", { children }),
-    EndIcon && /* @__PURE__ */ jsx23(EndIcon, {})
+  return /* @__PURE__ */ jsxs14("button", { className: clsx15(styles18.button, styles18[variant], styles18[size], className), ...props, children: [
+    StartIcon && /* @__PURE__ */ jsx24(StartIcon, {}),
+    /* @__PURE__ */ jsx24("span", { children }),
+    EndIcon && /* @__PURE__ */ jsx24(EndIcon, {})
   ] });
 };
 
 // src/components/editors/dates/DateRangePickerField/DateRangePickerField.tsx
-import styles18 from "./DateRangePickerField.module-CURG3KIS.module.css";
-import { jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
+import styles19 from "./DateRangePickerField.module-CURG3KIS.module.css";
+import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
 var getDateRangePickerLabel = (dateRange, displayValue) => {
   if (!dateRange) return void 0;
   if (displayValue || displayValue === "") return displayValue;
@@ -2357,16 +2382,16 @@ var DateRangePickerField = ({
     setIsOpen(false);
   };
   const isSubmitDisabled = isSameDateRange(currentDateRange, value);
-  return /* @__PURE__ */ jsxs14("div", { children: [
-    /* @__PURE__ */ jsx24(FieldHeader, { label, required }),
-    /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsxs15("div", { children: [
+    /* @__PURE__ */ jsx25(FieldHeader, { label, required }),
+    /* @__PURE__ */ jsx25(
       Dropdown,
       {
         open: isOpen,
         onOpenChange: handleOpenChange,
         disabled,
         avoidCollisions,
-        triggerComponent: /* @__PURE__ */ jsx24(
+        triggerComponent: /* @__PURE__ */ jsx25(
           SelectFieldTrigger,
           {
             startIcon,
@@ -2379,8 +2404,8 @@ var DateRangePickerField = ({
             error: hasError
           }
         ),
-        children: /* @__PURE__ */ jsxs14(SelectFieldContent, { fitContent: true, children: [
-          /* @__PURE__ */ jsx24(
+        children: /* @__PURE__ */ jsxs15(SelectFieldContent, { fitContent: true, children: [
+          /* @__PURE__ */ jsx25(
             DateRangePicker,
             {
               locale,
@@ -2389,11 +2414,11 @@ var DateRangePickerField = ({
               onChange: setCurrentDateRange
             }
           ),
-          /* @__PURE__ */ jsx24(
+          /* @__PURE__ */ jsx25(
             Button,
             {
               size: "small",
-              className: styles18.submitButton,
+              className: styles19.submitButton,
               onClick: handleChange,
               disabled: isSubmitDisabled,
               children: submitLabel
@@ -2402,7 +2427,7 @@ var DateRangePickerField = ({
         ] })
       }
     ),
-    errorMessage && /* @__PURE__ */ jsx24(FieldFeedback, { message: errorMessage, variant: "error" })
+    errorMessage && /* @__PURE__ */ jsx25(FieldFeedback, { message: errorMessage, variant: "error" })
   ] });
 };
 
@@ -2411,10 +2436,10 @@ import { forwardRef as forwardRef5 } from "react";
 
 // src/components/editors/inputs/shared/InputField/InputField.tsx
 import { IconX as IconX2 } from "@tabler/icons-react";
-import styles19 from "./InputField.module-LDLOMDBK.module.css";
-import clsx15 from "clsx";
+import styles20 from "./InputField.module-LDLOMDBK.module.css";
+import clsx16 from "clsx";
 import { forwardRef as forwardRef4 } from "react";
-import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
 var InputField = forwardRef4(
   ({
     label,
@@ -2436,11 +2461,11 @@ var InputField = forwardRef4(
   }, ref) => {
     const showClearButton = value && clearable;
     const hasError = error || errorMessage;
-    return /* @__PURE__ */ jsxs15("div", { className, children: [
-      /* @__PURE__ */ jsx25(FieldHeader, { label, required, requiredLabel }),
-      /* @__PURE__ */ jsxs15("div", { className: clsx15(styles19.input, hasError && styles19.error), children: [
-        StartIcon && /* @__PURE__ */ jsx25(StartIcon, {}),
-        /* @__PURE__ */ jsx25(
+    return /* @__PURE__ */ jsxs16("div", { className, children: [
+      /* @__PURE__ */ jsx26(FieldHeader, { label, required, requiredLabel }),
+      /* @__PURE__ */ jsxs16("div", { className: clsx16(styles20.input, hasError && styles20.error), children: [
+        StartIcon && /* @__PURE__ */ jsx26(StartIcon, {}),
+        /* @__PURE__ */ jsx26(
           "input",
           {
             ref,
@@ -2454,23 +2479,23 @@ var InputField = forwardRef4(
             ...props
           }
         ),
-        /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx26(
           IconX2,
           {
-            className: clsx15(styles19.clearIcon, showClearButton && styles19.clearIconVisible),
+            className: clsx16(styles20.clearIcon, showClearButton && styles20.clearIconVisible),
             onClick: () => onChange("")
           }
         ),
-        EndIcon && /* @__PURE__ */ jsx25(EndIcon, {})
+        EndIcon && /* @__PURE__ */ jsx26(EndIcon, {})
       ] }),
-      errorMessage && /* @__PURE__ */ jsx25(FieldFeedback, { variant: "error", message: errorMessage })
+      errorMessage && /* @__PURE__ */ jsx26(FieldFeedback, { variant: "error", message: errorMessage })
     ] });
   }
 );
 InputField.displayName = "InputField";
 
 // src/components/editors/inputs/NumberField/NumberField.tsx
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var NumberField = forwardRef5(
   ({
     value = null,
@@ -2491,7 +2516,7 @@ var NumberField = forwardRef5(
         onChange?.(numericValue);
       }
     };
-    return /* @__PURE__ */ jsx26(
+    return /* @__PURE__ */ jsx27(
       InputField,
       {
         ...props,
@@ -2511,11 +2536,11 @@ NumberField.displayName = "NumberField";
 
 // src/components/editors/inputs/TextField/TextField.tsx
 import { forwardRef as forwardRef6 } from "react";
-import { Fragment as Fragment3, jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx28, jsxs as jsxs17 } from "react/jsx-runtime";
 var TextField = forwardRef6(
   ({ value = "", placeholder = "Enter text", maxLength, error, errorMessage, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs16(Fragment3, { children: [
-      /* @__PURE__ */ jsx27(
+    return /* @__PURE__ */ jsxs17(Fragment3, { children: [
+      /* @__PURE__ */ jsx28(
         InputField,
         {
           value,
@@ -2528,7 +2553,7 @@ var TextField = forwardRef6(
           ...props
         }
       ),
-      maxLength && /* @__PURE__ */ jsx27(FieldFeedback, { message: `${value?.length}/${maxLength} Characters` })
+      maxLength && /* @__PURE__ */ jsx28(FieldFeedback, { message: `${value?.length}/${maxLength} Characters` })
     ] });
   }
 );
@@ -2539,9 +2564,9 @@ import { Fragment as Fragment4, useEffect as useEffect8, useMemo as useMemo4, us
 
 // src/components/editors/selects/shared/SelectFieldContent/SelectFieldOptions/SelectFieldOption/SelectFieldOption.tsx
 import * as DropdownMenu2 from "@radix-ui/react-dropdown-menu";
-import styles20 from "./SelectFieldOption.module-SH3TOVNB.module.css";
-import clsx16 from "clsx";
-import { jsx as jsx28, jsxs as jsxs17 } from "react/jsx-runtime";
+import styles21 from "./SelectFieldOption.module-SH3TOVNB.module.css";
+import clsx17 from "clsx";
+import { jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
 var SelectListOption = ({
   value,
   isSelected,
@@ -2552,23 +2577,23 @@ var SelectListOption = ({
   disabled,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs18(
     DropdownMenu2.Item,
     {
-      className: clsx16(
-        styles20.selectFieldOption,
-        disabled && styles20.disabled,
-        isSelected && styles20.selected
+      className: clsx17(
+        styles21.selectFieldOption,
+        disabled && styles21.disabled,
+        isSelected && styles21.selected
       ),
       "data-value": value,
       ...props,
       children: [
-        /* @__PURE__ */ jsxs17("span", { className: styles20.leftContent, children: [
+        /* @__PURE__ */ jsxs18("span", { className: styles21.leftContent, children: [
           startIcon,
-          /* @__PURE__ */ jsx28("span", { title: label, children: label })
+          /* @__PURE__ */ jsx29("span", { title: label, children: label })
         ] }),
-        /* @__PURE__ */ jsxs17("span", { className: styles20.rightContent, children: [
-          /* @__PURE__ */ jsx28("span", { title: rightLabel, children: rightLabel }),
+        /* @__PURE__ */ jsxs18("span", { className: styles21.rightContent, children: [
+          /* @__PURE__ */ jsx29("span", { title: rightLabel, children: rightLabel }),
           endIcon
         ] })
       ]
@@ -2593,7 +2618,7 @@ var groupOptionsByCategory = (options) => {
 
 // src/components/editors/selects/MultiSelectField/MultiSelectField.tsx
 import { IconSearch, IconSquare, IconSquareCheckFilled } from "@tabler/icons-react";
-import styles22 from "./selects.module-MRJADSDF.module.css";
+import styles23 from "./selects.module-MRJADSDF.module.css";
 
 // src/components/editors/selects/shared/useSelectSearchFocus.hook.ts
 import { useEffect as useEffect7 } from "react";
@@ -2608,10 +2633,10 @@ var useSelectSearchFocus = (isOpen, searchFieldRef) => {
 };
 
 // src/components/editors/selects/shared/SelectFieldContent/SelectFieldOptions/SelectFieldCategory/SelectFieldCategory.tsx
-import styles21 from "./SelectFieldCategory.module-FMZMX5V2.module.css";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import styles22 from "./SelectFieldCategory.module-FMZMX5V2.module.css";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var SelectFieldCategory = ({ label }) => {
-  return /* @__PURE__ */ jsx29("span", { className: styles21.selectFieldCategory, children: label });
+  return /* @__PURE__ */ jsx30("span", { className: styles22.selectFieldCategory, children: label });
 };
 
 // src/utils/debounce.utils.ts
@@ -2626,7 +2651,7 @@ function debounce(fn, delay = 300) {
 }
 
 // src/components/editors/selects/MultiSelectField/MultiSelectField.tsx
-import { jsx as jsx30, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs19 } from "react/jsx-runtime";
 var MultiSelectField = ({
   startIcon,
   label,
@@ -2677,7 +2702,7 @@ var MultiSelectField = ({
   const isSubmitDisabled = preValues.every((preValue) => values.includes(preValue)) && values.every((value) => preValues.includes(value));
   const handleSelectOption = (e, newValue) => {
     e.preventDefault();
-    if (newValue == null) return;
+    if (!newValue) return;
     if (preValues.includes(newValue)) {
       setPreValues(preValues.filter((v) => v !== newValue));
     } else {
@@ -2700,16 +2725,16 @@ var MultiSelectField = ({
     onChange([]);
   };
   const hasError = error || !!errorMessage;
-  return /* @__PURE__ */ jsxs18("div", { children: [
-    /* @__PURE__ */ jsx30(FieldHeader, { label, required }),
-    /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsxs19("div", { children: [
+    /* @__PURE__ */ jsx31(FieldHeader, { label, required }),
+    /* @__PURE__ */ jsx31(
       Dropdown,
       {
         open: isOpen,
         onOpenChange: setIsOpen,
         disabled,
         avoidCollisions,
-        triggerComponent: /* @__PURE__ */ jsx30(
+        triggerComponent: /* @__PURE__ */ jsx31(
           SelectFieldTrigger,
           {
             startIcon,
@@ -2723,8 +2748,8 @@ var MultiSelectField = ({
             error: hasError
           }
         ),
-        children: /* @__PURE__ */ jsxs18(SelectFieldContent, { children: [
-          isSearchable && /* @__PURE__ */ jsx30(
+        children: /* @__PURE__ */ jsxs19(SelectFieldContent, { children: [
+          isSearchable && /* @__PURE__ */ jsx31(
             TextField,
             {
               ref: searchFieldRef,
@@ -2735,36 +2760,36 @@ var MultiSelectField = ({
               value: searchValue,
               onKeyDown: (e) => e.stopPropagation(),
               onChange: handleSearch,
-              className: styles22.searchField
+              className: styles23.searchField
             }
           ),
-          /* @__PURE__ */ jsxs18(SelectFieldContentList, { disabled: isLoading, children: [
-            groupedOptions ? Object.entries(groupedOptions).map(([category, categoryOptions]) => /* @__PURE__ */ jsxs18(Fragment4, { children: [
-              /* @__PURE__ */ jsx30(SelectFieldCategory, { label: category }),
-              categoryOptions.map((option) => /* @__PURE__ */ jsx30(
+          /* @__PURE__ */ jsxs19(SelectFieldContentList, { disabled: isLoading, children: [
+            groupedOptions ? Object.entries(groupedOptions).map(([category, categoryOptions]) => /* @__PURE__ */ jsxs19(Fragment4, { children: [
+              /* @__PURE__ */ jsx31(SelectFieldCategory, { label: category }),
+              categoryOptions.map((option) => /* @__PURE__ */ jsx31(
                 SelectListOption,
                 {
                   onClick: (e) => handleSelectOption(e, option.value),
-                  startIcon: preValues.includes(option.value) ? /* @__PURE__ */ jsx30(IconSquareCheckFilled, {}) : /* @__PURE__ */ jsx30(IconSquare, {}),
+                  startIcon: preValues.includes(option.value) ? /* @__PURE__ */ jsx31(IconSquareCheckFilled, {}) : /* @__PURE__ */ jsx31(IconSquare, {}),
                   ...option
                 },
-                option?.value ? option.value.toString() : option.label
+                option?.value ?? option.label
               ))
-            ] }, category)) : displayOptions.map((option) => /* @__PURE__ */ jsx30(
+            ] }, category)) : displayOptions.map((option) => /* @__PURE__ */ jsx31(
               SelectListOption,
               {
                 onClick: (e) => handleSelectOption(e, option.value),
-                startIcon: preValues.includes(option.value) ? /* @__PURE__ */ jsx30(IconSquareCheckFilled, {}) : /* @__PURE__ */ jsx30(IconSquare, {}),
+                startIcon: preValues.includes(option.value) ? /* @__PURE__ */ jsx31(IconSquareCheckFilled, {}) : /* @__PURE__ */ jsx31(IconSquare, {}),
                 ...option
               },
-              option?.value ? option.value.toString() : option.label
+              option?.value ?? option.label
             )),
-            noOptionsMessage && displayOptions.length === 0 && /* @__PURE__ */ jsx30(SelectListOption, { disabled: true, value: "empty", label: noOptionsMessage })
+            noOptionsMessage && displayOptions.length === 0 && /* @__PURE__ */ jsx31(SelectListOption, { disabled: true, value: "empty", label: noOptionsMessage })
           ] }),
-          /* @__PURE__ */ jsx30(
+          /* @__PURE__ */ jsx31(
             Button,
             {
-              className: styles22.submitButton,
+              className: styles23.submitButton,
               disabled: isSubmitDisabled || isLoading,
               variant: "primary",
               size: "medium",
@@ -2776,19 +2801,19 @@ var MultiSelectField = ({
         ] })
       }
     ),
-    errorMessage && /* @__PURE__ */ jsx30(FieldFeedback, { message: errorMessage, variant: "error" })
+    errorMessage && /* @__PURE__ */ jsx31(FieldFeedback, { message: errorMessage, variant: "error" })
   ] });
 };
 
 // src/components/editors/selects/SingleSelectField/SingleSelectField.tsx
 import { Fragment as Fragment5, useEffect as useEffect9, useMemo as useMemo5, useRef as useRef11, useState as useState8 } from "react";
 import { IconSearch as IconSearch2 } from "@tabler/icons-react";
-import styles23 from "./selects.module-MRJADSDF.module.css";
-import { jsx as jsx31, jsxs as jsxs19 } from "react/jsx-runtime";
+import styles24 from "./selects.module-MRJADSDF.module.css";
+import { jsx as jsx32, jsxs as jsxs20 } from "react/jsx-runtime";
 var SingleSelectField = ({
   label,
   required,
-  value,
+  value = "",
   startIcon,
   options,
   disabled,
@@ -2801,23 +2826,24 @@ var SingleSelectField = ({
   onChange,
   onSearch,
   error = false,
-  errorMessage
+  errorMessage,
+  side,
+  align,
+  variant
 }) => {
   const [isOpen, setIsOpen] = useState8(false);
   const [searchValue, setSearchValue] = useState8("");
-  const [selectedLabel, setSelectedLabel] = useState8(value?.toString() ?? "");
+  const [selectedLabel, setSelectedLabel] = useState8(value);
   const searchFieldRef = useRef11(null);
   useSelectSearchFocus(isOpen, searchFieldRef);
   useEffect9(() => {
-    if (value == null) {
+    if (!value) {
       setSelectedLabel("");
       return;
     }
-    const selectedOption = options.find((opt) => opt.value === value);
-    if (selectedOption) {
-      setSelectedLabel(selectedOption.label);
-    } else {
-      setSelectedLabel("");
+    const option = options.find((opt) => opt.value === value);
+    if (option) {
+      setSelectedLabel(option.label);
     }
   }, [value, options]);
   const debouncedSearch = useMemo5(() => onSearch ? debounce(onSearch) : void 0, [onSearch]);
@@ -2825,13 +2851,13 @@ var SingleSelectField = ({
   const groupedOptions = useMemo5(() => groupOptionsByCategory(displayOptions), [displayOptions]);
   const handleChange = (newValue) => {
     setSearchValue("");
-    onChange(newValue);
+    onChange(newValue ?? "");
     onSearch?.("");
-    const selectedOption = options.find((opt) => opt.value === newValue);
-    if (selectedOption) {
-      setSelectedLabel(selectedOption.label);
-    } else {
+    if (newValue === "") {
       setSelectedLabel("");
+    } else {
+      const option = options.find((opt) => opt.value === newValue);
+      if (option) setSelectedLabel(option.label);
     }
   };
   const handleSearch = (newSearch) => {
@@ -2839,16 +2865,18 @@ var SingleSelectField = ({
     debouncedSearch?.(newSearch);
   };
   const hasError = error || !!errorMessage;
-  return /* @__PURE__ */ jsxs19("div", { children: [
-    /* @__PURE__ */ jsx31(FieldHeader, { label, required }),
-    /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsxs20("div", { children: [
+    /* @__PURE__ */ jsx32(FieldHeader, { label, required }),
+    /* @__PURE__ */ jsx32(
       Dropdown,
       {
         open: isOpen,
         onOpenChange: setIsOpen,
         disabled,
         avoidCollisions,
-        triggerComponent: /* @__PURE__ */ jsx31(
+        side,
+        align,
+        triggerComponent: /* @__PURE__ */ jsx32(
           SelectFieldTrigger,
           {
             startIcon,
@@ -2856,14 +2884,15 @@ var SingleSelectField = ({
             placeholder,
             disabled,
             valueLabel: selectedLabel,
-            onClear: () => handleChange(void 0),
+            onClear: () => handleChange(""),
             isClearable: clearable,
             isLoading,
-            error: hasError
+            error: hasError,
+            variant
           }
         ),
-        children: /* @__PURE__ */ jsxs19(SelectFieldContent, { children: [
-          searchable && /* @__PURE__ */ jsx31(
+        children: /* @__PURE__ */ jsxs20(SelectFieldContent, { children: [
+          searchable && /* @__PURE__ */ jsx32(
             TextField,
             {
               ref: searchFieldRef,
@@ -2874,43 +2903,43 @@ var SingleSelectField = ({
               value: searchValue,
               onKeyDown: (e) => e.stopPropagation(),
               onChange: handleSearch,
-              className: styles23.searchField
+              className: styles24.searchField
             }
           ),
-          /* @__PURE__ */ jsxs19(SelectFieldContentList, { disabled: isLoading, children: [
-            groupedOptions ? Object.entries(groupedOptions).map(([category, categoryOptions]) => /* @__PURE__ */ jsxs19(Fragment5, { children: [
-              /* @__PURE__ */ jsx31(SelectFieldCategory, { label: category }),
-              categoryOptions.map((option) => /* @__PURE__ */ jsx31(
+          /* @__PURE__ */ jsxs20(SelectFieldContentList, { disabled: isLoading, children: [
+            groupedOptions ? Object.entries(groupedOptions).map(([category, categoryOptions]) => /* @__PURE__ */ jsxs20(Fragment5, { children: [
+              /* @__PURE__ */ jsx32(SelectFieldCategory, { label: category }),
+              categoryOptions.map((option) => /* @__PURE__ */ jsx32(
                 SelectListOption,
                 {
                   onClick: () => handleChange(option?.value),
                   isSelected: option.value === value,
                   ...option
                 },
-                option?.value ? option.value.toString() : option.label
+                option?.value ?? option.label
               ))
-            ] }, category)) : displayOptions.map((option) => /* @__PURE__ */ jsx31(
+            ] }, category)) : displayOptions.map((option) => /* @__PURE__ */ jsx32(
               SelectListOption,
               {
                 onClick: () => handleChange(option?.value),
                 isSelected: option.value === value,
                 ...option
               },
-              option?.value ? option.value.toString() : option.label
+              option?.value ?? option.label
             )),
-            options.length === 0 && /* @__PURE__ */ jsx31(SelectListOption, { disabled: true, value: "empty", label: noOptionsMessage })
+            options.length === 0 && /* @__PURE__ */ jsx32(SelectListOption, { disabled: true, value: "empty", label: noOptionsMessage })
           ] })
         ] })
       }
     ),
-    errorMessage && /* @__PURE__ */ jsx31(FieldFeedback, { message: errorMessage, variant: "error" })
+    errorMessage && /* @__PURE__ */ jsx32(FieldFeedback, { message: errorMessage, variant: "error" })
   ] });
 };
 
 // src/components/editors/Switch/Switch.tsx
-import clsx17 from "clsx";
-import styles24 from "./Switch.module-MXKS66UI.module.css";
-import { jsx as jsx32, jsxs as jsxs20 } from "react/jsx-runtime";
+import clsx18 from "clsx";
+import styles25 from "./Switch.module-MXKS66UI.module.css";
+import { jsx as jsx33, jsxs as jsxs21 } from "react/jsx-runtime";
 var Switch = ({
   checked,
   onChange,
@@ -2929,17 +2958,17 @@ var Switch = ({
       "Switch component requires either a label prop or aria-label prop for accessibility"
     );
   }
-  return /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs21(
     "label",
     {
-      className: clsx17(
+      className: clsx18(
         className,
-        styles24.switch,
-        checked && styles24.checked,
-        disabled && styles24.disabled
+        styles25.switch,
+        checked && styles25.checked,
+        disabled && styles25.disabled
       ),
       children: [
-        /* @__PURE__ */ jsx32(
+        /* @__PURE__ */ jsx33(
           "input",
           {
             type: "checkbox",
@@ -2952,17 +2981,17 @@ var Switch = ({
             ...props
           }
         ),
-        /* @__PURE__ */ jsx32("span", { className: styles24.switchTrack, "aria-hidden": "true", children: /* @__PURE__ */ jsx32("span", { className: styles24.switchThumb, "aria-hidden": "true" }) }),
-        label && /* @__PURE__ */ jsx32("span", { className: clsx17(styles24.switchLabel), children: label })
+        /* @__PURE__ */ jsx33("span", { className: styles25.switchTrack, "aria-hidden": "true", children: /* @__PURE__ */ jsx33("span", { className: styles25.switchThumb, "aria-hidden": "true" }) }),
+        label && /* @__PURE__ */ jsx33("span", { className: clsx18(styles25.switchLabel), children: label })
       ]
     }
   );
 };
 
 // src/components/shared/ButtonIcon/ButtonIcon.tsx
-import clsx18 from "clsx";
-import styles25 from "./ButtonIcon.module-JHFZQSMJ.module.css";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import clsx19 from "clsx";
+import styles26 from "./ButtonIcon.module-JHFZQSMJ.module.css";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var ButtonIcon = ({
   icon: Icon,
   size = "medium",
@@ -2970,24 +2999,24 @@ var ButtonIcon = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(
     "button",
     {
-      className: clsx18(styles25.buttonIcon, styles25[variant], styles25[size], className),
+      className: clsx19(styles26.buttonIcon, styles26[variant], styles26[size], className),
       ...props,
-      children: /* @__PURE__ */ jsx33(Icon, {})
+      children: /* @__PURE__ */ jsx34(Icon, {})
     }
   );
 };
 
 // src/components/shared/Card/Card.tsx
-import React3 from "react";
-import styles26 from "./Card.module-YJV4R6DV.module.css";
-import clsx19 from "clsx";
-import { jsx as jsx34, jsxs as jsxs21 } from "react/jsx-runtime";
-var Card = React3.forwardRef(
+import React4 from "react";
+import styles27 from "./Card.module-YJV4R6DV.module.css";
+import clsx20 from "clsx";
+import { jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
+var Card = React4.forwardRef(
   ({ children, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx34("div", { className: clsx19(styles26.card, className), ref, ...props, children });
+    return /* @__PURE__ */ jsx35("div", { className: clsx20(styles27.card, className), ref, ...props, children });
   }
 );
 Card.displayName = "Card";
@@ -2995,22 +3024,22 @@ var CardHeader = ({ title, subtitle }) => {
   if (!title && !subtitle) {
     return null;
   }
-  return /* @__PURE__ */ jsxs21("div", { className: styles26.cardHeader, children: [
-    title && /* @__PURE__ */ jsx34("h1", { children: title }),
-    subtitle && /* @__PURE__ */ jsx34("p", { children: subtitle })
+  return /* @__PURE__ */ jsxs22("div", { className: styles27.cardHeader, children: [
+    title && /* @__PURE__ */ jsx35("h1", { children: title }),
+    subtitle && /* @__PURE__ */ jsx35("p", { children: subtitle })
   ] });
 };
-var CardContent = React3.forwardRef(
+var CardContent = React4.forwardRef(
   ({ children }, ref) => {
-    return /* @__PURE__ */ jsx34("div", { className: styles26.cardContent, ref, children });
+    return /* @__PURE__ */ jsx35("div", { className: styles27.cardContent, ref, children });
   }
 );
 CardContent.displayName = "CardContent";
 
 // src/components/shared/Card/CardFeedback/CardFeedback.tsx
-import clsx20 from "clsx";
-import styles27 from "./CardFeedback.module-WCSHLBSM.module.css";
-import { jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
+import clsx21 from "clsx";
+import styles28 from "./CardFeedback.module-WCSHLBSM.module.css";
+import { jsx as jsx36, jsxs as jsxs23 } from "react/jsx-runtime";
 var CardFeedback = ({
   icon: Icon,
   title,
@@ -3018,28 +3047,10 @@ var CardFeedback = ({
   className,
   variant = "info"
 }) => {
-  return /* @__PURE__ */ jsxs22("div", { className: clsx20(styles27.feedback, styles27[variant], className), children: [
-    Icon && /* @__PURE__ */ jsx35(Icon, {}),
-    /* @__PURE__ */ jsx35("h2", { children: title }),
-    /* @__PURE__ */ jsx35("p", { children: message })
-  ] });
-};
-
-// src/components/shared/GhostButton/GhostButton.tsx
-import clsx21 from "clsx";
-import styles28 from "./GhostButton.module-43KOFC6W.module.css";
-import { jsx as jsx36, jsxs as jsxs23 } from "react/jsx-runtime";
-var GhostButton = ({
-  startIcon: StartIcon,
-  endIcon: EndIcon,
-  children,
-  className,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsxs23("button", { className: clsx21(styles28.ghostButton, className), ...props, children: [
-    StartIcon && /* @__PURE__ */ jsx36(StartIcon, {}),
-    /* @__PURE__ */ jsx36("span", { children }),
-    EndIcon && /* @__PURE__ */ jsx36(EndIcon, {})
+  return /* @__PURE__ */ jsxs23("div", { className: clsx21(styles28.feedback, styles28[variant], className), children: [
+    Icon && /* @__PURE__ */ jsx36(Icon, {}),
+    /* @__PURE__ */ jsx36("h2", { children: title }),
+    /* @__PURE__ */ jsx36("p", { children: message })
   ] });
 };