@geckoui/geckoui 1.3.3 → 1.5.0

package/dist/index.d.mts

@@ -344,7 +344,7 @@ interface CounterInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
  */
 declare const CounterInput: react.ForwardRefExoticComponent<CounterInputProps & react.RefAttributes<HTMLInputElement>>;
 
-type DateFormat$2 = "DD/MM/YYYY" | "MM/DD/YYYY" | "YYYY/MM/DD";
+type DateFormat$2 = "DD/MM/YYYY" | "MM/DD/YYYY" | "YYYY-MM-DD";
 interface BaseDateInputProps {
     value?: string | null;
     onChange?: (value: string | null) => void;
@@ -370,7 +370,7 @@ interface BaseDateInputProps {
     hasFocus?: boolean;
 }
 
-type DateFormat$1 = "DD/MM/YYYY" | "MM/DD/YYYY" | "YYYY/MM/DD";
+type DateFormat$1 = "DD/MM/YYYY" | "MM/DD/YYYY" | "YYYY-MM-DD";
 interface DateInputProps extends Omit<BaseDateInputProps, "hasFocus" | "renderCalendarIcon"> {
     /**
      * Whether to hide the calendar popup. When false (default), calendar will be shown.
@@ -400,7 +400,7 @@ interface DateInputProps extends Omit<BaseDateInputProps, "hasFocus" | "renderCa
 /**
  * DateInput is an accessible date picker component that provides an intuitive keyboard-driven
  * interface for date entry. It features intelligent auto-completion, cross-field validation,
- * and support for multiple date formats (DD/MM/YYYY, MM/DD/YYYY, YYYY/MM/DD).
+ * and support for multiple date formats (DD/MM/YYYY, MM/DD/YYYY, YYYY-MM-DD).
  *
  * The component emits ISO 8601 formatted dates (YYYY-MM-DD) while displaying dates in the
  * user's preferred format. It automatically handles leap years, month-specific day limits,
@@ -569,11 +569,6 @@ interface CalendarRangeModeProps extends BaseCalendarProps {
      * Callback function that is called when a date range is selected
      * */
     onSelectRange?: (range: DateRange | null) => void;
-    /**
-     * Number of months to display side by side
-     * @default 2
-     * */
-    numberOfMonths?: 1 | 2;
 }
 type CalendarProps = CalendarSingleModeProps | CalendarRangeModeProps;
 interface CalendarOverload {
@@ -598,7 +593,7 @@ declare enum CalendarType {
     Year = "year"
 }
 
-type DateFormat = "DD/MM/YYYY" | "MM/DD/YYYY" | "YYYY/MM/DD";
+type DateFormat = "DD/MM/YYYY" | "MM/DD/YYYY" | "YYYY-MM-DD";
 interface BaseDateRangeInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "onBlur" | "prefix" | "onSubmit"> {
     value?: DateRange;
     onChange?: (value: DateRange | null) => void;
@@ -636,7 +631,6 @@ interface DateRangeInputProps extends Omit<BaseDateRangeInputProps, "hasFocus" |
     calendarClassName?: string;
     calendarPlacement?: Placement;
     floatingStrategy?: Strategy;
-    numberOfMonths?: 1 | 2;
 }
 
 declare const DateRangeInput: FC<DateRangeInputProps>;
@@ -1092,7 +1086,7 @@ interface RHFCounterInputProps extends RHFBaseProps, Omit<CounterInputProps, "na
  */
 declare const RHFCounterInput: FC<RHFCounterInputProps>;
 
-interface InputTransformer {
+interface InputTransformer$1 {
     input?: (value: string) => string;
     output?: (value: string) => string;
 }
@@ -1104,7 +1098,7 @@ interface RHFInputProps extends RHFBaseProps, Omit<InputProps, "name" | "prefix"
      * This is the recommended way of transforming in React Hook Form.
      * See the documentation for more information: https://react-hook-form.com/advanced-usage#TransformandParse
      * */
-    transform?: InputTransformer;
+    transform?: InputTransformer$1;
     /**
      * Component to render before the input element.
      *
@@ -1144,7 +1138,7 @@ interface RHFInputProps extends RHFBaseProps, Omit<InputProps, "name" | "prefix"
      * Callback fired when the value changes
      * This is the actual value of the input not the event object
      * */
-    onChange?: (value: string | null) => void;
+    onChange?: (value: string) => void;
     /**
      * Callback fired when the input is blurred
      * */
@@ -1216,10 +1210,6 @@ interface RHFErrorProps extends RHFBaseProps {
      * ```
      * */
     render?: ReactNode | ((props: RHFErrorRenderProps) => JSX.Element);
-    /**
-     * @deprecated - Use `render` prop instead
-     * */
-    children?: ReactNode;
 }
 
 /**
@@ -1407,8 +1397,8 @@ interface RHFNumberInputProps extends RHFInputProps {
 declare const RHFNumberInput: FC<RHFNumberInputProps>;
 
 interface Currency {
-    symbol: string;
-    code: string;
+    symbol?: string;
+    code?: string;
 }
 interface RHFCurrencyInputProps extends Omit<RHFNumberInputProps, "strict"> {
     /**
@@ -1499,12 +1489,24 @@ interface TextareaProps extends TextareaAutosizeProps {
  */
 declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
 
+interface InputTransformer {
+    input?: (value: string) => string;
+    output?: (value: string) => string;
+}
 interface RHFTextareaProps extends RHFBaseProps, Omit<TextareaProps, "name" | "onChange" | "onBlur"> {
+    /**
+     * This transform object allows you to transform the input value before it is passed to the form.
+     * You can also transform the output value before it is passed to the input element.
+     *
+     * This is the recommended way of transforming in React Hook Form.
+     * See the documentation for more information: https://react-hook-form.com/advanced-usage#TransformandParse
+     * */
+    transform?: InputTransformer;
     /**
      * Callback fired when the value changes
      * This is the actual value of the textarea not the event object
      * */
-    onChange?: (value: string | null) => void;
+    onChange?: (value: string) => void;
     /**
      * Callback fired when the input is blurred
      * ```
@@ -1936,7 +1938,17 @@ interface OTPInputProps {
  */
 declare const OTPInput: react__default.ForwardRefExoticComponent<OTPInputProps & react__default.RefAttributes<HTMLInputElement>>;
 
-interface RHFOTPInputProps extends RHFBaseProps, Omit<OTPInputProps, "value" | "onChange"> {
+interface RHFOTPInputProps extends RHFBaseProps, Omit<OTPInputProps, "value" | "onChange" | "onBlur"> {
+    /**
+     * Callback fired when the value changes
+     * Called alongside React Hook Form's onChange with the new code
+     * */
+    onChange?: (value: string) => void;
+    /**
+     * Callback fired when the input is blurred
+     * Called alongside React Hook Form's onBlur
+     * */
+    onBlur?: () => void;
 }
 
 /**
@@ -2949,7 +2961,7 @@ interface TooltipProps extends PropsWithChildren {
     /**
      * The side of the tooltip to display
      * */
-    side?: Placement;
+    placement?: Placement;
     /**
      * The offset of the tooltip from the trigger
      * */

package/dist/index.d.ts

@@ -344,7 +344,7 @@ interface CounterInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
  */
 declare const CounterInput: react.ForwardRefExoticComponent<CounterInputProps & react.RefAttributes<HTMLInputElement>>;
 
-type DateFormat$2 = "DD/MM/YYYY" | "MM/DD/YYYY" | "YYYY/MM/DD";
+type DateFormat$2 = "DD/MM/YYYY" | "MM/DD/YYYY" | "YYYY-MM-DD";
 interface BaseDateInputProps {
     value?: string | null;
     onChange?: (value: string | null) => void;
@@ -370,7 +370,7 @@ interface BaseDateInputProps {
     hasFocus?: boolean;
 }
 
-type DateFormat$1 = "DD/MM/YYYY" | "MM/DD/YYYY" | "YYYY/MM/DD";
+type DateFormat$1 = "DD/MM/YYYY" | "MM/DD/YYYY" | "YYYY-MM-DD";
 interface DateInputProps extends Omit<BaseDateInputProps, "hasFocus" | "renderCalendarIcon"> {
     /**
      * Whether to hide the calendar popup. When false (default), calendar will be shown.
@@ -400,7 +400,7 @@ interface DateInputProps extends Omit<BaseDateInputProps, "hasFocus" | "renderCa
 /**
  * DateInput is an accessible date picker component that provides an intuitive keyboard-driven
  * interface for date entry. It features intelligent auto-completion, cross-field validation,
- * and support for multiple date formats (DD/MM/YYYY, MM/DD/YYYY, YYYY/MM/DD).
+ * and support for multiple date formats (DD/MM/YYYY, MM/DD/YYYY, YYYY-MM-DD).
  *
  * The component emits ISO 8601 formatted dates (YYYY-MM-DD) while displaying dates in the
  * user's preferred format. It automatically handles leap years, month-specific day limits,
@@ -569,11 +569,6 @@ interface CalendarRangeModeProps extends BaseCalendarProps {
      * Callback function that is called when a date range is selected
      * */
     onSelectRange?: (range: DateRange | null) => void;
-    /**
-     * Number of months to display side by side
-     * @default 2
-     * */
-    numberOfMonths?: 1 | 2;
 }
 type CalendarProps = CalendarSingleModeProps | CalendarRangeModeProps;
 interface CalendarOverload {
@@ -598,7 +593,7 @@ declare enum CalendarType {
     Year = "year"
 }
 
-type DateFormat = "DD/MM/YYYY" | "MM/DD/YYYY" | "YYYY/MM/DD";
+type DateFormat = "DD/MM/YYYY" | "MM/DD/YYYY" | "YYYY-MM-DD";
 interface BaseDateRangeInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "onBlur" | "prefix" | "onSubmit"> {
     value?: DateRange;
     onChange?: (value: DateRange | null) => void;
@@ -636,7 +631,6 @@ interface DateRangeInputProps extends Omit<BaseDateRangeInputProps, "hasFocus" |
     calendarClassName?: string;
     calendarPlacement?: Placement;
     floatingStrategy?: Strategy;
-    numberOfMonths?: 1 | 2;
 }
 
 declare const DateRangeInput: FC<DateRangeInputProps>;
@@ -1092,7 +1086,7 @@ interface RHFCounterInputProps extends RHFBaseProps, Omit<CounterInputProps, "na
  */
 declare const RHFCounterInput: FC<RHFCounterInputProps>;
 
-interface InputTransformer {
+interface InputTransformer$1 {
     input?: (value: string) => string;
     output?: (value: string) => string;
 }
@@ -1104,7 +1098,7 @@ interface RHFInputProps extends RHFBaseProps, Omit<InputProps, "name" | "prefix"
      * This is the recommended way of transforming in React Hook Form.
      * See the documentation for more information: https://react-hook-form.com/advanced-usage#TransformandParse
      * */
-    transform?: InputTransformer;
+    transform?: InputTransformer$1;
     /**
      * Component to render before the input element.
      *
@@ -1144,7 +1138,7 @@ interface RHFInputProps extends RHFBaseProps, Omit<InputProps, "name" | "prefix"
      * Callback fired when the value changes
      * This is the actual value of the input not the event object
      * */
-    onChange?: (value: string | null) => void;
+    onChange?: (value: string) => void;
     /**
      * Callback fired when the input is blurred
      * */
@@ -1216,10 +1210,6 @@ interface RHFErrorProps extends RHFBaseProps {
      * ```
      * */
     render?: ReactNode | ((props: RHFErrorRenderProps) => JSX.Element);
-    /**
-     * @deprecated - Use `render` prop instead
-     * */
-    children?: ReactNode;
 }
 
 /**
@@ -1407,8 +1397,8 @@ interface RHFNumberInputProps extends RHFInputProps {
 declare const RHFNumberInput: FC<RHFNumberInputProps>;
 
 interface Currency {
-    symbol: string;
-    code: string;
+    symbol?: string;
+    code?: string;
 }
 interface RHFCurrencyInputProps extends Omit<RHFNumberInputProps, "strict"> {
     /**
@@ -1499,12 +1489,24 @@ interface TextareaProps extends TextareaAutosizeProps {
  */
 declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
 
+interface InputTransformer {
+    input?: (value: string) => string;
+    output?: (value: string) => string;
+}
 interface RHFTextareaProps extends RHFBaseProps, Omit<TextareaProps, "name" | "onChange" | "onBlur"> {
+    /**
+     * This transform object allows you to transform the input value before it is passed to the form.
+     * You can also transform the output value before it is passed to the input element.
+     *
+     * This is the recommended way of transforming in React Hook Form.
+     * See the documentation for more information: https://react-hook-form.com/advanced-usage#TransformandParse
+     * */
+    transform?: InputTransformer;
     /**
      * Callback fired when the value changes
      * This is the actual value of the textarea not the event object
      * */
-    onChange?: (value: string | null) => void;
+    onChange?: (value: string) => void;
     /**
      * Callback fired when the input is blurred
      * ```
@@ -1936,7 +1938,17 @@ interface OTPInputProps {
  */
 declare const OTPInput: react__default.ForwardRefExoticComponent<OTPInputProps & react__default.RefAttributes<HTMLInputElement>>;
 
-interface RHFOTPInputProps extends RHFBaseProps, Omit<OTPInputProps, "value" | "onChange"> {
+interface RHFOTPInputProps extends RHFBaseProps, Omit<OTPInputProps, "value" | "onChange" | "onBlur"> {
+    /**
+     * Callback fired when the value changes
+     * Called alongside React Hook Form's onChange with the new code
+     * */
+    onChange?: (value: string) => void;
+    /**
+     * Callback fired when the input is blurred
+     * Called alongside React Hook Form's onBlur
+     * */
+    onBlur?: () => void;
 }
 
 /**
@@ -2949,7 +2961,7 @@ interface TooltipProps extends PropsWithChildren {
     /**
      * The side of the tooltip to display
      * */
-    side?: Placement;
+    placement?: Placement;
     /**
      * The offset of the tooltip from the trigger
      * */

package/dist/index.js

@@ -977,7 +977,7 @@ var getSegmentOrder = (format) => {
       return ["day", "month", "year"];
     case "MM/DD/YYYY":
       return ["month", "day", "year"];
-    case "YYYY/MM/DD":
+    case "YYYY-MM-DD":
       return ["year", "month", "day"];
     default:
       return ["day", "month", "year"];
@@ -1603,7 +1603,6 @@ var CalendarType = /* @__PURE__ */ ((CalendarType2) => {
 // src/components/Calendar/Calendar/Calendar.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var Calendar = (props) => {
-  var _a;
   const { className, style, calendarRef, disableDate, renderDayCell, mode = "single" } = props;
   const [view, setView] = (0, import_react10.useState)("day" /* Day */);
   const [rangeSelectionStart, setRangeSelectionStart] = (0, import_react10.useState)(null);
@@ -1612,7 +1611,6 @@ var Calendar = (props) => {
   const onSelectDate = mode === "single" ? props.onSelectDate : void 0;
   const selectedRange = mode === "range" ? props.selectedRange : void 0;
   const onSelectRange = mode === "range" ? props.onSelectRange : void 0;
-  const numberOfMonths = mode === "range" ? (_a = props.numberOfMonths) != null ? _a : 2 : 1;
   let initialDate;
   if (mode === "range") {
     initialDate = (selectedRange == null ? void 0 : selectedRange.from) || (selectedRange == null ? void 0 : selectedRange.to) || getTodayDate();
@@ -1718,44 +1716,23 @@ Provided value: ${selectedRange.to}`
     };
     if (view === "day" /* Day */) {
       if (mode === "range") {
-        const secondMonth = activeMonth === 11 ? 0 : activeMonth + 1;
-        const secondYear = activeMonth === 11 ? activeYear + 1 : activeYear;
-        return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "GeckoUICalendar__dual", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "GeckoUICalendar__dual__item", "data-position": "first", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-            CalendarDayPicker_default,
-            {
-              mode: "range",
-              disableDate,
-              renderDayCell,
-              activeMonth,
-              activeYear,
-              onClickHeader: () => setView("month" /* Month */),
-              onClickLeftArrow: decreaseMonth,
-              onClickRightArrow: increaseMonth,
-              selectedRange,
-              onSelectRange: handleRangeDateClick,
-              hoveredDate,
-              onHoverDate: handleHoverDate
-            }
-          ) }),
-          numberOfMonths === 2 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "GeckoUICalendar__dual__item", "data-position": "second", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-            CalendarDayPicker_default,
-            {
-              mode: "range",
-              disableDate,
-              renderDayCell,
-              activeMonth: secondMonth,
-              activeYear: secondYear,
-              onClickHeader: () => setView("month" /* Month */),
-              onClickLeftArrow: decreaseMonth,
-              onClickRightArrow: increaseMonth,
-              selectedRange,
-              onSelectRange: handleRangeDateClick,
-              hoveredDate,
-              onHoverDate: handleHoverDate
-            }
-          ) })
-        ] });
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          CalendarDayPicker_default,
+          {
+            mode: "range",
+            disableDate,
+            renderDayCell,
+            activeMonth,
+            activeYear,
+            onClickHeader: () => setView("month" /* Month */),
+            onClickLeftArrow: decreaseMonth,
+            onClickRightArrow: increaseMonth,
+            selectedRange,
+            onSelectRange: handleRangeDateClick,
+            hoveredDate,
+            onHoverDate: handleHoverDate
+          }
+        );
       }
       return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         CalendarDayPicker_default,
@@ -1794,7 +1771,6 @@ Provided value: ${selectedRange.to}`
       className: classNames(`GeckoUICalendar`, className),
       "data-mode": view,
       "data-selection": mode,
-      "data-calendars": mode === "range" && view === "day" /* Day */ && numberOfMonths || void 0,
       style,
       children: renderContent()
     }
@@ -2416,7 +2392,6 @@ var DateRangeInput = (_a) => {
     calendarPlacement = "bottom-start",
     floatingStrategy = "absolute",
     wrapperClassName,
-    numberOfMonths = 2,
     onStateUpdate,
     onSubmit
   } = _b, rest = __objRest(_b, [
@@ -2440,7 +2415,6 @@ var DateRangeInput = (_a) => {
     "calendarPlacement",
     "floatingStrategy",
     "wrapperClassName",
-    "numberOfMonths",
     "onStateUpdate",
     "onSubmit"
   ]);
@@ -2534,8 +2508,7 @@ var DateRangeInput = (_a) => {
             calendarRef,
             className: classNames("GeckoUIDateRangeInput__calendar", calendarClassName),
             onSelectRange: handleRangeSelect,
-            selectedRange: value,
-            numberOfMonths
+            selectedRange: value
           }
         ) })
       ]
@@ -2595,7 +2568,7 @@ var Tooltip = ({
   triggerAsChild = false,
   arrowClassName,
   backgroundColor,
-  side = "top",
+  placement = "top",
   sideOffset = 12
 }) => {
   const [isOpen, setIsOpen] = (0, import_react18.useState)(false);
@@ -2604,7 +2577,7 @@ var Tooltip = ({
   const { refs, floatingStyles, context } = (0, import_react17.useFloating)({
     open: isOpen,
     onOpenChange: setIsOpen,
-    placement: side,
+    placement,
     middleware: [(0, import_react17.offset)(sideOffset), (0, import_react17.flip)(), (0, import_react17.shift)({ padding: 5 }), (0, import_react17.arrow)({ element: arrowRef })]
   });
   const handleMouseEnter = () => {
@@ -2881,7 +2854,7 @@ var RHFCheckbox = (_a) => {
       render: (renderProps) => {
         const { field } = renderProps;
         const isChecked = () => {
-          if (value === void 0) return false;
+          if (value === void 0) return field.value === true;
           if (single) return isEqual_default(field.value, value);
           if (!Array.isArray(field.value)) return false;
           return field.value.map((e) => JSON.stringify(e)).includes(JSON.stringify(value));
@@ -2900,7 +2873,9 @@ var RHFCheckbox = (_a) => {
               onChange: () => {
                 var _a2;
                 let v;
-                if (single) {
+                if (value === void 0) {
+                  v = !field.value;
+                } else if (single) {
                   v = isEqual_default(field.value, value) ? uncheckedValue != null ? uncheckedValue : null : value;
                 } else {
                   v = (_a2 = field.value) != null ? _a2 : [];
@@ -3218,6 +3193,7 @@ var RHFTextarea = (_a) => {
     rules,
     disabled,
     className,
+    transform,
     onChange,
     onBlur
   } = _b, rest = __objRest(_b, [
@@ -3226,6 +3202,7 @@ var RHFTextarea = (_a) => {
     "rules",
     "disabled",
     "className",
+    "transform",
     "onChange",
     "onBlur"
   ]);
@@ -3237,6 +3214,7 @@ var RHFTextarea = (_a) => {
       rules,
       render: (renderProps) => {
         const { field, fieldState } = renderProps;
+        const value = (transform == null ? void 0 : transform.input) ? transform.input(field.value) : field.value;
         return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           Textarea_default,
           __spreadProps(__spreadValues(__spreadValues({
@@ -3249,9 +3227,11 @@ var RHFTextarea = (_a) => {
               onBlur == null ? void 0 : onBlur(e.target.value);
             },
             onChange: (e) => {
-              field.onChange(e.target.value);
-              onChange == null ? void 0 : onChange(e.target.value);
-            }
+              const outputValue = (transform == null ? void 0 : transform.output) ? transform.output(e.target.value) : e.target.value;
+              field.onChange(outputValue);
+              onChange == null ? void 0 : onChange(outputValue);
+            },
+            value: value != null ? value : ""
           })
         );
       }
@@ -3645,7 +3625,6 @@ var OTPInput = (0, import_react26.forwardRef)(
         className: classNames("GeckoUIOTPInput", className),
         "data-state": disabled ? "disabled" : "enabled",
         ref: divRef,
-        style: { gridTemplateColumns: `repeat(${length}, minmax(0, 1fr))` },
         children: Array.from({ length }).map((_, i) => i).map((key, index) => {
           const isLast = index === length - 1;
           return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
@@ -3653,6 +3632,8 @@ var OTPInput = (0, import_react26.forwardRef)(
             {
               style: {
                 position: "relative",
+                flex: 1,
+                maxWidth: 56,
                 aspectRatio: aspectRatio === void 0 ? 0.94 : aspectRatio
               },
               children: [
@@ -3724,13 +3705,17 @@ var RHFOTPInput = (_a) => {
     name,
     rules,
     disabled,
-    className
+    className,
+    onChange,
+    onBlur
   } = _b, rest = __objRest(_b, [
     "control",
     "name",
     "rules",
     "disabled",
-    "className"
+    "className",
+    "onChange",
+    "onBlur"
   ]);
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     RHFController_default,
@@ -3742,11 +3727,20 @@ var RHFOTPInput = (_a) => {
       render: ({ field, fieldState }) => {
         return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
           OTPInput_default,
-          __spreadValues(__spreadValues({
+          __spreadProps(__spreadValues(__spreadValues({
             className: classNames("GeckoUIRHFOTPInput", className),
             "data-error": !disabled && fieldState.error ? "" : void 0,
             disabled
-          }, rest), field)
+          }, rest), field), {
+            onBlur: () => {
+              field.onBlur();
+              onBlur == null ? void 0 : onBlur();
+            },
+            onChange: (value) => {
+              field.onChange(value);
+              onChange == null ? void 0 : onChange(value);
+            }
+          })
         );
       }
     }
@@ -4163,7 +4157,7 @@ function SelectButton({ prefix, suffix, className }) {
               className: classNames("GeckoUISelectButton__value", placeholderClassName),
               "data-placeholder": ""
             }, keyword && filterable && { "data-hidden": "" }), {
-              children: placeholder != null ? placeholder : "Select Item"
+              children: placeholder != null ? placeholder : "Select option"
             })
           ),
           /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(