From f248e579b4e711df3863a24a7736e17d709c22ba Mon Sep 17 00:00:00 2001
From: Mauro Reis Vieira <mauroreisvieira@gmail.com>
Date: Wed, 1 Oct 2025 16:59:44 +0100
Subject: [PATCH 1/4] feat(select): support for select group and loading status

---
 .../base/src/select/SelectGroup.tsx           | 46 +++++++++++
 packages/components/base/src/select/index.tsx | 77 +++++++++++++++----
 .../base/src/select/styles/index.module.scss  | 43 ++++++++---
 packages/components/base/src/select/types.ts  | 20 +++++
 packages/components/base/src/select/utils.ts  | 77 ++++++++++++-------
 5 files changed, 209 insertions(+), 54 deletions(-)
 create mode 100644 packages/components/base/src/select/SelectGroup.tsx

diff --git a/packages/components/base/src/select/SelectGroup.tsx b/packages/components/base/src/select/SelectGroup.tsx
new file mode 100644
index 00000000..42f86621
--- /dev/null
+++ b/packages/components/base/src/select/SelectGroup.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+import { DISPLAY_NAME_ATTRIBUTE } from "@react-ck/react-utils";
+import { type SelectGroupProps } from "./types";
+import { Text } from "../text";
+import styles from "./styles/index.module.scss";
+
+/**
+ * A group component for organizing Select options with a label.
+ * Provides visual separation and organization for related options.
+ *
+ * @example
+ * ```tsx
+ * <Select>
+ *   <Select.Group name="Fruits">
+ *     <Select.Option value="apple">Apple</Select.Option>
+ *     <Select.Option value="banana">Banana</Select.Option>
+ *   </Select.Group>
+ *   <Select.Group name="Vegetables">
+ *     <Select.Option value="carrot">Carrot</Select.Option>
+ *     <Select.Option value="broccoli">Broccoli</Select.Option>
+ *   </Select.Group>
+ * </Select>
+ * ```
+ *
+ * @param props - Component props {@link SelectGroupProps}
+ * @returns React element
+ */
+const SelectGroup = ({
+  name,
+  children,
+}: Readonly<Omit<SelectGroupProps, "disabled">>): React.ReactElement => {
+  return (
+    <div role="group" aria-labelledby={name} className={styles.group}>
+      <div id={name} className={styles.group_name}>
+        <Text margin="none" variation="small" skin={["bold", "soft"]}>
+          {name}
+        </Text>
+      </div>
+      {children}
+    </div>
+  );
+};
+
+SelectGroup[DISPLAY_NAME_ATTRIBUTE] = "SelectGroup";
+
+export { SelectGroup };
diff --git a/packages/components/base/src/select/index.tsx b/packages/components/base/src/select/index.tsx
index be8422b2..7e8d973e 100644
--- a/packages/components/base/src/select/index.tsx
+++ b/packages/components/base/src/select/index.tsx
@@ -1,6 +1,7 @@
 import styles from "./styles/index.module.scss";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { SelectOption } from "./SelectOption";
+import { SelectGroup } from "./SelectGroup";
 import { Menu } from "../menu";
 import { Dropdown } from "../dropdown";
 import { Input } from "../input";
@@ -11,6 +12,9 @@ import { getChildrenData, simplifyString, valueAsArray } from "./utils";
 import { type SelectProps, type ChangeHandler } from "./types";
 import { SelectContext, type SelectContextProps } from "./context";
 import { useFormFieldContext } from "../form-field";
+import { Spinner } from "../spinner";
+import { Icon } from "@react-ck/icon";
+import { IconChevronDown } from "@react-ck/icon/icons/IconChevronDown";
 
 /** Default positions to exclude from auto-positioning */
 const defaultExclude: SelectProps["excludeAutoPosition"] = [
@@ -75,6 +79,7 @@ const Select = ({
   allowDeselect = true,
   required,
   disabled,
+  loading,
   displayValueDivider = ",",
   fullWidth,
   position,
@@ -105,17 +110,47 @@ const Select = ({
   const childrenData = useMemo(() => getChildrenData(children), [children]);
 
   /** Options list children filtered by user search  */
-  const filteredOptions = useMemo(
-    () =>
-      childrenData
-        .filter(
-          (i) =>
-            !search.length ||
-            (i.textContent && simplifyString(i.textContent).includes(simplifyString(search))),
-        )
-        .map((i) => i.element),
-    [childrenData, search],
-  );
+  const filteredOptions = useMemo(() => {
+    const filtered = childrenData.filter(
+      (i) =>
+        !search.length ||
+        (i.textContent && simplifyString(i.textContent).includes(simplifyString(search))),
+    );
+
+    // Group options by groupName
+    const groupedOptions: { [key: string]: React.ReactNode[] } = {};
+    const ungroupedOptions: React.ReactNode[] = [];
+
+    filtered.forEach((item) => {
+      if (item.isSelectOption) {
+        if (item.groupName) {
+          if (!(item.groupName in groupedOptions)) {
+            groupedOptions[item.groupName] = [];
+          }
+          groupedOptions[item.groupName]?.push(item.element);
+        } else {
+          ungroupedOptions.push(item.element);
+        }
+      }
+    });
+
+    // Render grouped options
+    const result: React.ReactNode[] = [];
+
+    // Add ungrouped options first
+    ungroupedOptions.forEach((option) => result.push(option));
+
+    // Add grouped options using SelectGroup component
+    Object.entries(groupedOptions).forEach(([groupName, options]) => {
+      result.push(
+        <SelectGroup key={groupName} name={groupName}>
+          {options}
+        </SelectGroup>,
+      );
+    });
+
+    return result;
+  }, [childrenData, search]);
 
   /** Returns the internal value always as an array to facilitate operations  */
   const selectedValuesList = useMemo(
@@ -256,7 +291,9 @@ const Select = ({
     const resizeObserver = new ResizeObserver(() => {
       if (!valueSlotRefCurrent || !sizeSetterRef.current) return;
 
-      valueSlotRefCurrent.style.width = `${sizeSetterRef.current.clientWidth + 10}px`;
+      if (valueSlotRefCurrent.clientWidth < sizeSetterRef.current.clientWidth) {
+        valueSlotRefCurrent.style.width = `${sizeSetterRef.current.clientWidth + 10}px`;
+      }
     });
     resizeObserver.observe(sizeSetterRef.current);
 
@@ -278,7 +315,7 @@ const Select = ({
           styles[`skin_${computedSkin}`],
           formFieldContext === undefined && styles.standalone,
           (disabled || formFieldContext?.disabled) && styles.disabled,
-
+          loading && styles.loading,
           (fullWidth ?? formFieldContext?.fullWidth) && styles.full_width,
           className,
         )}
@@ -291,7 +328,13 @@ const Select = ({
           onBlur?.(e);
         }}>
         <div ref={valueSlotRef} className={styles.value_slot}>
-          {displayValue || <span className={styles.placeholder}>{placeholder}</span>}
+          <div className={styles.value_content}>
+            {displayValue || <span className={styles.placeholder}>{placeholder}</span>}
+          </div>
+          {loading && <Spinner size="l" />}
+          <Icon size="l">
+            <IconChevronDown />
+          </Icon>
         </div>
 
         <select
@@ -372,15 +415,17 @@ const Select = ({
 
 type SelectWithOption = typeof Select & {
   Option: typeof SelectOption;
+  Group: typeof SelectGroup;
 };
 
-// Add the Option property
+// Add the Option and Group properties
 
 // eslint-disable-next-line @typescript-eslint/consistent-type-assertions -- needed for compound component definition with forward ref
 const CompoundSelect: SelectWithOption = Select as SelectWithOption;
 
 CompoundSelect.Option = SelectOption;
+CompoundSelect.Group = SelectGroup;
 
 export { CompoundSelect as Select };
 
-export { type SelectOptionProps, type SelectProps } from "./types";
+export { type SelectOptionProps, type SelectProps, type SelectGroupProps } from "./types";
diff --git a/packages/components/base/src/select/styles/index.module.scss b/packages/components/base/src/select/styles/index.module.scss
index 3ae915fd..bfefd4b0 100644
--- a/packages/components/base/src/select/styles/index.module.scss
+++ b/packages/components/base/src/select/styles/index.module.scss
@@ -4,11 +4,11 @@
 .root {
   @include form-field.form-field-input;
 
-  position: relative;
   display: inline-block;
   vertical-align: middle;
-  cursor: pointer;
+  position: relative;
   min-width: theme.get-spacing(10);
+  cursor: pointer;
 
   &.full_width {
     @include form-field.form-field-input-full-width;
@@ -18,21 +18,28 @@
 }
 
 .value_slot {
+  display: flex;
+  max-width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  gap: theme.get-spacing(1);
+}
+
+.value_content {
   display: flex;
   align-items: flex-start;
   justify-self: unset;
   flex-wrap: wrap;
   gap: theme.get-spacing(0.5);
-  max-width: 100%;
 }
 
 .display_value_item {
+  display: inline-block;
+  vertical-align: middle;
+  max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  display: inline-block;
-  max-width: 100%;
-  vertical-align: middle;
 }
 
 // When not inside form field, has own border, etc
@@ -64,12 +71,16 @@
 
 .native_element {
   position: absolute;
-  z-index: 1;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   opacity: 0;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.loading {
   pointer-events: none;
 }
 
@@ -82,9 +93,23 @@
   It is used to ensure that the value slot is the same width as the native select element.
 */
 .size_setter {
-  position: absolute;
   display: block;
   flex-direction: column;
-  pointer-events: none;
+  position: absolute;
   opacity: 0;
+  pointer-events: none;
+}
+
+.group {
+  padding-top: theme.get-spacing(1);
+
+  &:not(:first-of-type) {
+    border-top: 1px solid theme.get-color(neutral-light-300);
+    margin-top: theme.get-spacing(1);
+  }
+}
+
+.group_name {
+  margin-inline: theme.get-spacing(1);
+  margin-bottom: theme.get-spacing(0.5);
 }
diff --git a/packages/components/base/src/select/types.ts b/packages/components/base/src/select/types.ts
index 4a0303e7..b78037a3 100644
--- a/packages/components/base/src/select/types.ts
+++ b/packages/components/base/src/select/types.ts
@@ -1,3 +1,4 @@
+import React from "react";
 import { type DropdownProps } from "../dropdown";
 import { type InputProps } from "../input";
 import { type MenuItemProps } from "../menu";
@@ -69,6 +70,10 @@ export interface SelectProps
    * @default false
    */
   disabled?: boolean;
+  /** Select is loading
+   * @default false
+   */
+  loading?: boolean;
   /** Display value divider */
   displayValueDivider?: React.ReactNode;
   /** Whether the select should take the full width of the parent container */
@@ -100,6 +105,17 @@ export interface SelectOptionProps extends Omit<MenuItemProps, "skin"> {
   onDeselected?: (value: string) => void;
 }
 
+/**
+ * Props interface for Select group components.
+ * Used to group related options together with a label.
+ */
+export interface SelectGroupProps {
+  /** Name/label for the group */
+  name: string;
+  /** Wrapper for select options */
+  children?: React.ReactNode;
+}
+
 /**
  * Internal type for processing select children data.
  * Used to normalize and handle different types of child elements.
@@ -109,6 +125,8 @@ export type SelectChildrenData = {
   isSelectOption: boolean;
   /** Props passed to the SelectOption if applicable */
   selectOptionProps: SelectOptionProps | undefined;
+  /** Props passed to the SelectGroup if applicable */
+  selectGroupProps: SelectGroupProps | undefined;
   /** Processed value for the option */
   computedValue: string | undefined;
   /** Text content of the option */
@@ -117,4 +135,6 @@ export type SelectChildrenData = {
   element: React.ReactNode;
   /** Custom display value for selected state */
   displayValue: SelectOptionProps["displayValue"];
+  /** Group name if this is part of a group */
+  groupName?: string;
 };
diff --git a/packages/components/base/src/select/utils.ts b/packages/components/base/src/select/utils.ts
index 1df74c25..2efc1691 100644
--- a/packages/components/base/src/select/utils.ts
+++ b/packages/components/base/src/select/utils.ts
@@ -7,6 +7,7 @@ import {
 import {
   type SelectChildrenData,
   type SelectOptionProps,
+  type SelectGroupProps,
   type SelectedValues,
   type UserValue,
 } from "./types";
@@ -14,35 +15,53 @@ import {
 export const valueAsArray = (value: UserValue): SelectedValues =>
   value ? (Array.isArray(value) ? value : [value]) : [];
 
-export const getChildrenData = (children: React.ReactNode): SelectChildrenData[] =>
-  getChildrenListWithoutFragments(children).map<SelectChildrenData>((i) => {
-    if (getDisplayName(i) === "SelectOption" && React.isValidElement<SelectOptionProps>(i)) {
-      if (!("children" in i.props || "value" in i.props))
-        throw new Error("SelectOption has no computable value");
-
-      const { value, displayValue } = i.props;
-      const textContent = componentToText(i);
-      const computedValue = value ?? textContent;
-
-      return {
-        isSelectOption: true,
-        element: i,
-        selectOptionProps: i.props,
-        textContent: textContent ?? value,
-        computedValue,
-        displayValue,
-      };
-    }
-
-    return {
-      isSelectOption: false,
-      element: i,
-      textContent: undefined,
-      computedValue: undefined,
-      selectOptionProps: undefined,
-      displayValue: undefined,
-    };
-  });
+export const getChildrenData = (children: React.ReactNode): SelectChildrenData[] => {
+  const result: SelectChildrenData[] = [];
+
+  const processChildren = (children: React.ReactNode, groupName?: string) => {
+    getChildrenListWithoutFragments(children).forEach((i) => {
+      if (getDisplayName(i) === "SelectOption" && React.isValidElement<SelectOptionProps>(i)) {
+        if (!("children" in i.props || "value" in i.props))
+          throw new Error("SelectOption has no computable value");
+
+        const { value, displayValue, disabled } = i.props;
+        const textContent = componentToText(i);
+        const computedValue = value ?? textContent;
+
+        result.push({
+          isSelectOption: true,
+          element: i,
+          selectOptionProps: {
+            ...i.props,
+            disabled,
+          },
+          selectGroupProps: undefined,
+          textContent: textContent ?? value,
+          computedValue,
+          displayValue,
+          groupName,
+        });
+      } else if (getDisplayName(i) === "SelectGroup" && React.isValidElement<SelectGroupProps>(i)) {
+        const { name, children: groupChildren } = i.props;
+        processChildren(groupChildren, name);
+      } else {
+        result.push({
+          isSelectOption: false,
+          element: i,
+          textContent: undefined,
+          computedValue: undefined,
+          selectOptionProps: undefined,
+          selectGroupProps: undefined,
+          displayValue: undefined,
+          groupName,
+        });
+      }
+    });
+  };
+
+  processChildren(children);
+  return result;
+};
 
 export const simplifyString = (s: string): string => {
   let r = s.toLowerCase().trim();

From 3bb267562c891d3ca7a94d77d19039da9ee14399 Mon Sep 17 00:00:00 2001
From: Mauro Reis Vieira <mauroreisvieira@gmail.com>
Date: Wed, 1 Oct 2025 16:59:54 +0100
Subject: [PATCH 2/4] docs: update storybook examples

---
 package-lock.json                             |  4 +-
 .../docs/stories/src/form-select.stories.tsx  | 57 +++++++++++++++++++
 2 files changed, 59 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 62d9b904..00317149 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@abelflopes/react-ck",
-  "version": "4.19.0",
+  "version": "4.20.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@abelflopes/react-ck",
-      "version": "4.19.0",
+      "version": "4.20.0",
       "workspaces": [
         "packages/*/*"
       ],
diff --git a/packages/docs/stories/src/form-select.stories.tsx b/packages/docs/stories/src/form-select.stories.tsx
index e542265a..d20e0768 100644
--- a/packages/docs/stories/src/form-select.stories.tsx
+++ b/packages/docs/stories/src/form-select.stories.tsx
@@ -103,3 +103,60 @@ export const FullWidth: Story = {
     fullWidth: true,
   },
 };
+
+export const Loading: Story = {
+  args: {
+    ...args,
+    loading: true,
+    fullWidth: true,
+  },
+};
+
+export const WithGroups: Story = {
+  args: {
+    placeholder: "Select a food item",
+    children: (
+      <>
+        <Select.Group name="Fruits">
+          <Select.Option value="apple">Apple</Select.Option>
+          <Select.Option value="banana">Banana</Select.Option>
+          <Select.Option value="orange">Orange</Select.Option>
+          <Select.Option value="grape">Grape</Select.Option>
+        </Select.Group>
+        <Select.Group name="Vegetables">
+          <Select.Option value="carrot">Carrot</Select.Option>
+          <Select.Option value="broccoli">Broccoli</Select.Option>
+          <Select.Option value="spinach">Spinach</Select.Option>
+          <Select.Option value="tomato">Tomato</Select.Option>
+        </Select.Group>
+        <Select.Group name="Dairy">
+          <Select.Option value="milk">Milk</Select.Option>
+          <Select.Option value="cheese">Cheese</Select.Option>
+          <Select.Option value="yogurt">Yogurt</Select.Option>
+        </Select.Group>
+      </>
+    ),
+  },
+};
+
+export const WithGroupsAndSearch: Story = {
+  args: {
+    ...WithGroups.args,
+    search: {
+      placeholder: "Search food items",
+      emptyStateMessage: (value) => (
+        <>
+          No food items found for <b>&quot;{value}&quot;</b>
+        </>
+      ),
+    },
+  },
+};
+
+export const WithGroupsMultiple: Story = {
+  args: {
+    ...WithGroupsAndSearch.args,
+    multiple: true,
+    placeholder: "Select multiple food items",
+  },
+};

From 8884273f8a64139b41de24c425fd27e053ab7546 Mon Sep 17 00:00:00 2001
From: Mauro Reis Vieira <mauroreisvieira@gmail.com>
Date: Wed, 1 Oct 2025 18:51:11 +0100
Subject: [PATCH 3/4] fix: unique id

---
 packages/components/base/src/select/SelectGroup.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/components/base/src/select/SelectGroup.tsx b/packages/components/base/src/select/SelectGroup.tsx
index 42f86621..463044ea 100644
--- a/packages/components/base/src/select/SelectGroup.tsx
+++ b/packages/components/base/src/select/SelectGroup.tsx
@@ -3,6 +3,7 @@ import { DISPLAY_NAME_ATTRIBUTE } from "@react-ck/react-utils";
 import { type SelectGroupProps } from "./types";
 import { Text } from "../text";
 import styles from "./styles/index.module.scss";
+import { useManagerContext } from "@react-ck/manager";
 
 /**
  * A group component for organizing Select options with a label.
@@ -29,9 +30,13 @@ const SelectGroup = ({
   name,
   children,
 }: Readonly<Omit<SelectGroupProps, "disabled">>): React.ReactElement => {
+  const { generateUniqueId } = useManagerContext();
+
+  const uniqueId = generateUniqueId();
+
   return (
-    <div role="group" aria-labelledby={name} className={styles.group}>
-      <div id={name} className={styles.group_name}>
+    <div role="group" aria-labelledby={uniqueId} className={styles.group}>
+      <div id={uniqueId} className={styles.group_name}>
         <Text margin="none" variation="small" skin={["bold", "soft"]}>
           {name}
         </Text>

From f025365611d778e7663a70375bec2b27a6acac8e Mon Sep 17 00:00:00 2001
From: Abel <abelflopes@gmail.com>
Date: Thu, 2 Oct 2025 14:15:46 +0100
Subject: [PATCH 4/4] fix: export namings

---
 .../base/src/boolean-input/BooleaInput.tsx    |  4 +--
 .../components/base/src/dropdown/Dropdown.tsx |  4 +--
 .../base/src/file-uploader/FileUploader.tsx   |  4 +--
 packages/components/base/src/select/index.tsx |  4 +--
 .../index.snapshot.test.tsx.snap              | 26 +++++++++++++++++--
 packages/utils/react/src/index.ts             |  2 +-
 6 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/packages/components/base/src/boolean-input/BooleaInput.tsx b/packages/components/base/src/boolean-input/BooleaInput.tsx
index 6f537efa..df1228cd 100644
--- a/packages/components/base/src/boolean-input/BooleaInput.tsx
+++ b/packages/components/base/src/boolean-input/BooleaInput.tsx
@@ -3,7 +3,7 @@ import React, { useEffect, useMemo, useRef } from "react";
 import classNames from "classnames";
 import { type FormFieldContextProps, useFormFieldContext } from "../form-field";
 import { type BooleanInputIconComponent } from "./types";
-import { megeRefs } from "@react-ck/react-utils";
+import { mergeRefs } from "@react-ck/react-utils";
 
 /**
  * Props interface for the BooleanInput component.
@@ -58,7 +58,7 @@ export const BooleaInput = ({
         (disabled || formFieldContext?.disabled) && styles.disabled,
       )}>
       <input
-        ref={megeRefs(ref, inputRef)}
+        ref={mergeRefs(ref, inputRef)}
         id={computedId}
         className={styles.input}
         disabled={disabled}
diff --git a/packages/components/base/src/dropdown/Dropdown.tsx b/packages/components/base/src/dropdown/Dropdown.tsx
index 3ab06b3f..d7a9309e 100644
--- a/packages/components/base/src/dropdown/Dropdown.tsx
+++ b/packages/components/base/src/dropdown/Dropdown.tsx
@@ -5,7 +5,7 @@ import { ScrollableContainer } from "../scrollable-container";
 import { Card } from "../card";
 import styles from "./index.module.scss";
 import classNames from "classnames";
-import { megeRefs, useOnClickOutside } from "@react-ck/react-utils";
+import { mergeRefs, useOnClickOutside } from "@react-ck/react-utils";
 import { FocusTrap } from "@react-ck/focus-trap";
 import { KeyboardControls } from "@react-ck/keyboard-controls";
 
@@ -141,7 +141,7 @@ export const Dropdown = ({
           <Layer elevation="overlay" group="dropdown">
             <div
               ref={(el) => {
-                megeRefs(ref, containerRef)(el);
+                mergeRefs(ref, containerRef)(el);
                 setFocusWrapperElement(el || undefined);
               }}
               tabIndex={0}
diff --git a/packages/components/base/src/file-uploader/FileUploader.tsx b/packages/components/base/src/file-uploader/FileUploader.tsx
index 40715c71..83e5cbce 100644
--- a/packages/components/base/src/file-uploader/FileUploader.tsx
+++ b/packages/components/base/src/file-uploader/FileUploader.tsx
@@ -4,7 +4,7 @@ import classNames from "classnames";
 import { Text } from "../text";
 import { Button, type ButtonProps } from "../button";
 import { readFileList } from "./utils/read-file";
-import { megeRefs } from "@react-ck/react-utils";
+import { mergeRefs } from "@react-ck/react-utils";
 
 // TODO: check https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
 // TODO: add size limitation: https://stackoverflow.com/questions/5697605/limit-the-size-of-a-file-upload-html-input-element
@@ -106,7 +106,7 @@ export const FileUploader = ({
       )}>
       <input
         {...inputProps}
-        ref={megeRefs(inputRef, inputProps?.ref)}
+        ref={mergeRefs(inputRef, inputProps?.ref)}
         type="file"
         className={classNames(styles.file, inputProps?.className)}
         onChange={handleChange}
diff --git a/packages/components/base/src/select/index.tsx b/packages/components/base/src/select/index.tsx
index 7e8d973e..a14b2d5f 100644
--- a/packages/components/base/src/select/index.tsx
+++ b/packages/components/base/src/select/index.tsx
@@ -6,7 +6,7 @@ import { Menu } from "../menu";
 import { Dropdown } from "../dropdown";
 import { Input } from "../input";
 import classNames from "classnames";
-import { megeRefs, raf } from "@react-ck/react-utils";
+import { mergeRefs, raf } from "@react-ck/react-utils";
 import { EmptyState } from "../empty-state";
 import { getChildrenData, simplifyString, valueAsArray } from "./utils";
 import { type SelectProps, type ChangeHandler } from "./types";
@@ -338,7 +338,7 @@ const Select = ({
         </div>
 
         <select
-          ref={megeRefs(ref, selectRef)}
+          ref={mergeRefs(ref, selectRef)}
           id={computedId}
           name={selectName}
           multiple={selectMultiple}
diff --git a/packages/components/base/src/select/specs/__snapshots__/index.snapshot.test.tsx.snap b/packages/components/base/src/select/specs/__snapshots__/index.snapshot.test.tsx.snap
index 1785609c..c2d68e2b 100644
--- a/packages/components/base/src/select/specs/__snapshots__/index.snapshot.test.tsx.snap
+++ b/packages/components/base/src/select/specs/__snapshots__/index.snapshot.test.tsx.snap
@@ -10,9 +10,31 @@ exports[`snapshot Select renders correctly 1`] = `
     <div
       class="value_slot"
     >
+      <div
+        class="value_content"
+      >
+        <span
+          class="placeholder"
+        />
+      </div>
       <span
-        class="placeholder"
-      />
+        class="root size_l skin_default"
+      >
+        <svg
+          fill="none"
+          height="1em"
+          stroke="currentColor"
+          stroke-width="0"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M6.34317 7.75732L4.92896 9.17154L12 16.2426L19.0711 9.17157L17.6569 7.75735L12 13.4142L6.34317 7.75732Z"
+            fill="currentColor"
+          />
+        </svg>
+      </span>
     </div>
     <select
       class="native_element"
diff --git a/packages/utils/react/src/index.ts b/packages/utils/react/src/index.ts
index 25ba9f79..55296be7 100644
--- a/packages/utils/react/src/index.ts
+++ b/packages/utils/react/src/index.ts
@@ -8,7 +8,7 @@ export * from "./click-outside";
 
 export * from "./children-without-fragments";
 
-export { mergeRefs, mergeRefs as megeRefs } from "./merge-refs";
+export * from "./merge-refs";
 
 export * from "./raf";