@spark-ui/components 10.0.1 → 10.0.3

package/dist/select/index.js

@@ -27,521 +27,14 @@ __export(select_exports, {
 module.exports = __toCommonJS(select_exports);
 
 // src/select/SelectContext.tsx
+var import_form_field = require("@spark-ui/components/form-field");
 var import_use_combined_state = require("@spark-ui/use-combined-state");
-var import_react9 = require("react");
-
-// src/form-field/FormField.tsx
-var import_class_variance_authority = require("class-variance-authority");
-var import_react4 = require("react");
-
-// src/slot/Slot.tsx
-var import_radix_ui = require("radix-ui");
-var import_react = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
-var Slottable = import_radix_ui.Slot.Slottable;
-var Slot = ({ ref, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Slot.Root, { ref, ...props });
-};
-
-// src/form-field/FormFieldContext.tsx
 var import_react2 = require("react");
-var FormFieldContext = (0, import_react2.createContext)(null);
-var ID_PREFIX = ":form-field";
-var useFormField = () => {
-  const context = (0, import_react2.useContext)(FormFieldContext);
-  if (!context) {
-    throw Error("useFormField must be used within a FormField provider");
-  }
-  return context;
-};
-
-// src/form-field/FormFieldProvider.tsx
-var import_react3 = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var FormFieldProvider = ({
-  id,
-  name,
-  disabled = false,
-  readOnly = false,
-  state,
-  isRequired,
-  children
-}) => {
-  const labelId = `${ID_PREFIX}-label-${(0, import_react3.useId)()}`;
-  const [messageIds, setMessageIds] = (0, import_react3.useState)([]);
-  const description = messageIds.length > 0 ? messageIds.join(" ") : void 0;
-  const handleMessageIdAdd = (0, import_react3.useCallback)((msgId) => {
-    setMessageIds((ids) => [...ids, msgId]);
-  }, []);
-  const handleMessageIdRemove = (0, import_react3.useCallback)((msgId) => {
-    setMessageIds((ids) => ids.filter((current) => current !== msgId));
-  }, []);
-  const value = (0, import_react3.useMemo)(() => {
-    const isInvalid = state === "error";
-    return {
-      id,
-      labelId,
-      name,
-      disabled,
-      readOnly,
-      state,
-      isRequired,
-      isInvalid,
-      description,
-      onMessageIdAdd: handleMessageIdAdd,
-      onMessageIdRemove: handleMessageIdRemove
-    };
-  }, [
-    id,
-    labelId,
-    name,
-    disabled,
-    readOnly,
-    description,
-    state,
-    isRequired,
-    handleMessageIdAdd,
-    handleMessageIdRemove
-  ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FormFieldContext.Provider, { value, children });
-};
-FormFieldProvider.displayName = "FormFieldProvider";
-
-// src/form-field/FormField.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var FormField = ({
-  className,
-  disabled = false,
-  readOnly = false,
-  name,
-  state,
-  isRequired = false,
-  asChild = false,
-  ref,
-  ...others
-}) => {
-  const id = `${ID_PREFIX}-${(0, import_react4.useId)()}`;
-  const Component = asChild ? Slot : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    FormFieldProvider,
-    {
-      id,
-      name,
-      isRequired,
-      disabled,
-      readOnly,
-      state,
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        Component,
-        {
-          ref,
-          "data-spark-component": "form-field",
-          className: (0, import_class_variance_authority.cx)(className, "gap-sm flex flex-col"),
-          ...others
-        }
-      )
-    }
-  );
-};
-FormField.displayName = "FormField";
-
-// src/form-field/FormFieldStateMessage.tsx
-var import_AlertOutline = require("@spark-ui/icons/AlertOutline");
-var import_Check = require("@spark-ui/icons/Check");
-var import_WarningOutline = require("@spark-ui/icons/WarningOutline");
-var import_class_variance_authority4 = require("class-variance-authority");
-
-// src/icon/Icon.tsx
-var import_react5 = require("react");
-
-// src/visually-hidden/VisuallyHidden.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var VisuallyHidden = ({ asChild = false, ref, ...props }) => {
-  const Component = asChild ? Slot : "span";
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    Component,
-    {
-      ...props,
-      ref,
-      style: {
-        // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss
-        position: "absolute",
-        border: 0,
-        width: 1,
-        height: 1,
-        padding: 0,
-        margin: -1,
-        overflow: "hidden",
-        clip: "rect(0, 0, 0, 0)",
-        whiteSpace: "nowrap",
-        wordWrap: "normal",
-        ...props.style
-      }
-    }
-  );
-};
-VisuallyHidden.displayName = "VisuallyHidden";
-
-// src/icon/Icon.styles.tsx
-var import_internal_utils = require("@spark-ui/internal-utils");
-var import_class_variance_authority2 = require("class-variance-authority");
-var iconStyles = (0, import_class_variance_authority2.cva)(["fill-current shrink-0"], {
-  variants: {
-    /**
-     * Color scheme of the icon.
-     */
-    intent: (0, import_internal_utils.makeVariants)({
-      current: ["text-current"],
-      main: ["text-main"],
-      support: ["text-support"],
-      accent: ["text-accent"],
-      basic: ["text-basic"],
-      success: ["text-success"],
-      alert: ["text-alert"],
-      error: ["text-error"],
-      info: ["text-info"],
-      neutral: ["text-neutral"]
-    }),
-    /**
-     * Sets the size of the icon.
-     */
-    size: (0, import_internal_utils.makeVariants)({
-      current: ["u-current-font-size"],
-      sm: ["w-sz-16", "h-sz-16"],
-      md: ["w-sz-24", "h-sz-24"],
-      lg: ["w-sz-32", "h-sz-32"],
-      xl: ["w-sz-40", "h-sz-40"]
-    })
-  }
-});
-
-// src/icon/Icon.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var Icon = ({
-  label,
-  className,
-  size = "current",
-  intent = "current",
-  children,
-  ...others
-}) => {
-  const child = import_react5.Children.only(children);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-    (0, import_react5.cloneElement)(child, {
-      className: iconStyles({ className, size, intent }),
-      "data-spark-component": "icon",
-      "aria-hidden": "true",
-      focusable: "false",
-      ...others
-    }),
-    label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(VisuallyHidden, { children: label })
-  ] });
-};
-Icon.displayName = "Icon";
-
-// src/form-field/FormFieldMessage.tsx
-var import_class_variance_authority3 = require("class-variance-authority");
-var import_react6 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var FormFieldMessage = ({
-  id: idProp,
-  className,
-  ref,
-  ...others
-}) => {
-  const { onMessageIdAdd, onMessageIdRemove } = useFormField();
-  const currentId = `${ID_PREFIX}-message-${(0, import_react6.useId)()}`;
-  const id = idProp || currentId;
-  (0, import_react6.useEffect)(() => {
-    onMessageIdAdd(id);
-    return () => {
-      onMessageIdRemove(id);
-    };
-  }, [id, onMessageIdAdd, onMessageIdRemove]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    "span",
-    {
-      ref,
-      id,
-      "data-spark-component": "form-field-message",
-      className: (0, import_class_variance_authority3.cx)(className, "text-caption"),
-      ...others
-    }
-  );
-};
-FormFieldMessage.displayName = "FormField.Message";
-
-// src/form-field/FormFieldStateMessage.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var FormFieldStateMessage = ({
-  className,
-  state,
-  children,
-  ref,
-  ...others
-}) => {
-  const field = useFormField();
-  if (field.state !== state) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-    FormFieldMessage,
-    {
-      ref,
-      "data-spark-component": "form-field-state-message",
-      "aria-live": "polite",
-      className: (0, import_class_variance_authority4.cx)(
-        "gap-sm flex items-center",
-        state === "error" ? "text-error" : "text-on-surface/dim-1",
-        className
-      ),
-      ...others,
-      children: [
-        state === "alert" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_WarningOutline.WarningOutline, {}) }),
-        state === "error" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { size: "sm", intent: "error", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_AlertOutline.AlertOutline, {}) }),
-        state === "success" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_Check.Check, {}) }),
-        children
-      ]
-    }
-  );
-};
-FormFieldStateMessage.displayName = "FormField.StateMessage";
-
-// src/form-field/FormFieldAlertMessage.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var FormFieldAlertMessage = ({ ref, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    FormFieldStateMessage,
-    {
-      ref,
-      "data-spark-component": "form-field-alert-message",
-      state: "alert",
-      ...props
-    }
-  );
-};
-FormFieldAlertMessage.displayName = "FormField.AlertMessage";
-
-// src/form-field/FormFieldCharactersCount.tsx
-var import_class_variance_authority5 = require("class-variance-authority");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var FormFieldCharactersCount = ({
-  className,
-  value = "",
-  maxLength,
-  ref,
-  ...others
-}) => {
-  const displayValue = `${value.length}/${maxLength}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    "span",
-    {
-      ref,
-      "data-spark-component": "form-field-characters-count",
-      className: (0, import_class_variance_authority5.cx)(className, "text-caption", "text-neutral"),
-      ...others,
-      children: displayValue
-    }
-  );
-};
-FormFieldCharactersCount.displayName = "FormField.CharactersCount";
-
-// src/form-field/FormFieldControl.tsx
-var import_react7 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var useFormFieldControl = () => {
-  const { id, name, description, disabled, readOnly, state, labelId, isInvalid, isRequired } = (0, import_react7.useContext)(FormFieldContext) || {};
-  return {
-    id,
-    name,
-    description,
-    disabled,
-    readOnly,
-    state,
-    labelId,
-    isInvalid,
-    isRequired
-  };
-};
-var FormFieldControl = ({ children }) => {
-  const props = useFormFieldControl();
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: children(props) });
-};
-FormFieldControl.displayName = "FormField.Control";
-
-// src/form-field/FormFieldErrorMessage.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var FormFieldErrorMessage = ({ ref, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-    FormFieldStateMessage,
-    {
-      ref,
-      "data-spark-component": "form-field-error-message",
-      state: "error",
-      ...props
-    }
-  );
-};
-FormFieldErrorMessage.displayName = "FormField.ErrorMessage";
-
-// src/form-field/FormFieldHelperMessage.tsx
-var import_class_variance_authority6 = require("class-variance-authority");
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var FormFieldHelperMessage = ({
-  className,
-  ref,
-  ...others
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    FormFieldMessage,
-    {
-      ref,
-      "data-spark-component": "form-field-helper-message",
-      className: (0, import_class_variance_authority6.cx)("text-on-surface/dim-1", className),
-      ...others
-    }
-  );
-};
-FormFieldHelperMessage.displayName = "FormField.HelperMessage";
-
-// src/form-field/FormFieldLabel.tsx
-var import_class_variance_authority10 = require("class-variance-authority");
-
-// src/label/Label.tsx
-var import_class_variance_authority7 = require("class-variance-authority");
-var import_radix_ui2 = require("radix-ui");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var Label = ({ className, ref, ...others }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-    import_radix_ui2.Label.Label,
-    {
-      ref,
-      "data-spark-component": "label",
-      className: (0, import_class_variance_authority7.cx)("text-body-1", className),
-      ...others
-    }
-  );
-};
-Label.displayName = "Label";
-
-// src/label/LabelRequiredIndicator.tsx
-var import_class_variance_authority8 = require("class-variance-authority");
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var LabelRequiredIndicator = ({
-  className,
-  children = "*",
-  ref,
-  ...others
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-    "span",
-    {
-      ref,
-      "data-spark-component": "label-required-indicator",
-      role: "presentation",
-      "aria-hidden": "true",
-      className: (0, import_class_variance_authority8.cx)(className, "text-caption text-on-surface/dim-1"),
-      ...others,
-      children
-    }
-  );
-};
-LabelRequiredIndicator.displayName = "Label.RequiredIndicator";
-
-// src/label/index.ts
-var Label2 = Object.assign(Label, {
-  RequiredIndicator: LabelRequiredIndicator
-});
-Label2.displayName = "Label";
-LabelRequiredIndicator.displayName = "Label.RequiredIndicator";
-
-// src/form-field/FormFieldRequiredIndicator.tsx
-var import_class_variance_authority9 = require("class-variance-authority");
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var FormFieldRequiredIndicator = ({
-  className,
-  ref,
-  ...props
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Label2.RequiredIndicator, { ref, className: (0, import_class_variance_authority9.cx)("ml-sm", className), ...props });
-};
-FormFieldRequiredIndicator.displayName = "FormField.RequiredIndicator";
-
-// src/form-field/FormFieldLabel.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var FormFieldLabel = ({
-  htmlFor: htmlForProp,
-  className,
-  children,
-  requiredIndicator = /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(FormFieldRequiredIndicator, {}),
-  asChild,
-  ref,
-  ...others
-}) => {
-  const control = useFormField();
-  const { disabled, labelId, isRequired } = control;
-  const htmlFor = asChild ? void 0 : htmlForProp || control.id;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-    Label2,
-    {
-      ref,
-      id: labelId,
-      "data-spark-component": "form-field-label",
-      htmlFor,
-      className: (0, import_class_variance_authority10.cx)(className, disabled ? "text-on-surface/dim-3 pointer-events-none" : void 0),
-      asChild,
-      ...others,
-      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Slottable, { children }),
-        isRequired && requiredIndicator
-      ] })
-    }
-  );
-};
-FormFieldLabel.displayName = "FormField.Label";
-
-// src/form-field/FormFieldSuccessMessage.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var FormFieldSuccessMessage = ({ ref, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-    FormFieldStateMessage,
-    {
-      ref,
-      "data-spark-component": "form-field-success-message",
-      state: "success",
-      ...props
-    }
-  );
-};
-FormFieldSuccessMessage.displayName = "FormField.SuccessMessage";
-
-// src/form-field/index.ts
-var FormField2 = Object.assign(FormField, {
-  Label: FormFieldLabel,
-  Control: FormFieldControl,
-  StateMessage: FormFieldStateMessage,
-  SuccessMessage: FormFieldSuccessMessage,
-  AlertMessage: FormFieldAlertMessage,
-  ErrorMessage: FormFieldErrorMessage,
-  HelperMessage: FormFieldHelperMessage,
-  RequiredIndicator: FormFieldRequiredIndicator,
-  CharactersCount: FormFieldCharactersCount
-});
-FormField2.displayName = "FormField";
-FormFieldLabel.displayName = "FormField.Label";
-FormFieldControl.displayName = "FormField.Control";
-FormFieldStateMessage.displayName = "FormField.StateMessage";
-FormFieldSuccessMessage.displayName = "FormField.SuccessMessage";
-FormFieldAlertMessage.displayName = "FormField.AlertMessage";
-FormFieldErrorMessage.displayName = "FormField.ErrorMessage";
-FormFieldHelperMessage.displayName = "FormField.HelperMessage";
-FormFieldRequiredIndicator.displayName = "FormField.RequiredIndicator";
-FormFieldCharactersCount.displayName = "FormField.CharactersCount";
 
 // src/select/utils.ts
-var import_react8 = require("react");
+var import_react = require("react");
 var findElement = (children) => (name) => {
-  const validChildren = import_react8.Children.toArray(children).filter(import_react8.isValidElement);
+  const validChildren = import_react.Children.toArray(children).filter(import_react.isValidElement);
   return validChildren.find((child) => {
     return getElementDisplayName(child)?.includes(name);
   });
@@ -550,8 +43,8 @@ var getElementDisplayName = (element) => {
   return element ? element.type.displayName : "";
 };
 var getOrderedItems = (children, result = []) => {
-  import_react8.Children.forEach(children, (child) => {
-    if (!(0, import_react8.isValidElement)(child)) return;
+  import_react.Children.forEach(children, (child) => {
+    if (!(0, import_react.isValidElement)(child)) return;
     if (getElementDisplayName(child) === "Select.Item" || getElementDisplayName(child) === "Select.Placeholder") {
       const childProps = child.props;
       result.push({
@@ -575,9 +68,9 @@ var getItemsFromChildren = (children) => {
 };
 
 // src/select/SelectContext.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var SelectContext = (0, import_react9.createContext)(null);
-var ID_PREFIX2 = ":select";
+var import_jsx_runtime = require("react/jsx-runtime");
+var SelectContext = (0, import_react2.createContext)(null);
+var ID_PREFIX = ":select";
 var SelectProvider = ({
   children,
   defaultValue,
@@ -591,22 +84,22 @@ var SelectProvider = ({
   required: requiredProp
 }) => {
   const [value, setValue] = (0, import_use_combined_state.useCombinedState)(valueProp, defaultValue, onValueChange);
-  const [placeholder, setPlaceholder] = (0, import_react9.useState)(void 0);
-  const [itemsMap, setItemsMap] = (0, import_react9.useState)(getItemsFromChildren(itemsComponent));
-  const [ariaLabel, setAriaLabel] = (0, import_react9.useState)();
+  const [placeholder, setPlaceholder] = (0, import_react2.useState)(void 0);
+  const [itemsMap, setItemsMap] = (0, import_react2.useState)(getItemsFromChildren(itemsComponent));
+  const [ariaLabel, setAriaLabel] = (0, import_react2.useState)();
   const firstItem = itemsMap.entries().next().value[1];
   const selectedItem = typeof value === "string" ? itemsMap.get(value) : firstItem;
   const isControlled = valueProp != null;
-  const field = useFormFieldControl();
+  const field = (0, import_form_field.useFormFieldControl)();
   const state = field.state || stateProp;
-  const internalFieldID = `${ID_PREFIX2}-field-${(0, import_react9.useId)()}`;
+  const internalFieldID = `${ID_PREFIX}-field-${(0, import_react2.useId)()}`;
   const fieldId = field.id || internalFieldID;
   const fieldLabelId = field.labelId;
   const disabled = field.disabled ?? disabledProp;
   const readOnly = field.readOnly ?? readOnlyProp;
   const name = field.name ?? nameProp;
   const required = !!(field.isRequired ?? requiredProp);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     const newMap = getItemsFromChildren(itemsComponent);
     const previousItems = [...itemsMap.values()];
     const newItems = [...newMap.values()];
@@ -619,7 +112,7 @@ var SelectProvider = ({
       setItemsMap(newMap);
     }
   }, [children]);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     SelectContext.Provider,
     {
       value: {
@@ -646,7 +139,7 @@ var SelectProvider = ({
   );
 };
 var useSelectContext = () => {
-  const context = (0, import_react9.useContext)(SelectContext);
+  const context = (0, import_react2.useContext)(SelectContext);
   if (!context) {
     throw Error("useSelectContext must be used within a Select provider");
   }
@@ -654,28 +147,28 @@ var useSelectContext = () => {
 };
 
 // src/select/Select.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var Select = ({ children, ...props }) => {
   const finder = findElement(children);
   const trigger = finder("Trigger");
   const items = finder("Items");
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SelectProvider, { ...props, itemsComponent: items, children: trigger });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SelectProvider, { ...props, itemsComponent: items, children: trigger });
 };
 Select.displayName = "Select";
 
 // src/select/SelectGroup.tsx
-var import_class_variance_authority11 = require("class-variance-authority");
+var import_class_variance_authority = require("class-variance-authority");
 
 // src/select/SelectItemsGroupContext.tsx
-var import_react10 = require("react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var SelectGroupContext = (0, import_react10.createContext)(null);
+var import_react3 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var SelectGroupContext = (0, import_react3.createContext)(null);
 var SelectGroupProvider = ({ children }) => {
-  const [groupLabel, setGroupLabel] = (0, import_react10.useState)("");
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SelectGroupContext.Provider, { value: { groupLabel, setGroupLabel }, children });
+  const [groupLabel, setGroupLabel] = (0, import_react3.useState)("");
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SelectGroupContext.Provider, { value: { groupLabel, setGroupLabel }, children });
 };
 var useSelectGroupContext = () => {
-  const context = (0, import_react10.useContext)(SelectGroupContext);
+  const context = (0, import_react3.useContext)(SelectGroupContext);
   if (!context) {
     throw Error("useSelectGroupContext must be used within a SelectGroup provider");
   }
@@ -683,18 +176,18 @@ var useSelectGroupContext = () => {
 };
 
 // src/select/SelectGroup.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var Group = ({ children, ref: forwardedRef, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SelectGroupProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(GroupContent, { ref: forwardedRef, ...props, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SelectGroupProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(GroupContent, { ref: forwardedRef, ...props, children }) });
 };
 var GroupContent = ({ children, className, ref: forwardedRef }) => {
   const { groupLabel } = useSelectGroupContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "optgroup",
     {
       "data-spark-component": "select-group",
       ref: forwardedRef,
-      className: (0, import_class_variance_authority11.cx)(className),
+      className: (0, import_class_variance_authority.cx)(className),
       label: groupLabel,
       children
     }
@@ -703,9 +196,9 @@ var GroupContent = ({ children, className, ref: forwardedRef }) => {
 Group.displayName = "Select.Group";
 
 // src/select/SelectItem.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var Item = ({ disabled = false, value, children, ref: forwardedRef }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "option",
     {
       "data-spark-component": "select-item",
@@ -720,9 +213,9 @@ var Item = ({ disabled = false, value, children, ref: forwardedRef }) => {
 Item.displayName = "Select.Item";
 
 // src/select/SelectItems.tsx
-var import_class_variance_authority12 = require("class-variance-authority");
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var styles = (0, import_class_variance_authority12.cva)(
+var import_class_variance_authority2 = require("class-variance-authority");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var styles = (0, import_class_variance_authority2.cva)(
   [
     "absolute left-0 top-0 size-full rounded-lg opacity-0",
     "min-h-sz-44",
@@ -781,7 +274,7 @@ var Items = ({
       setValue(event.target.value);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "select",
     {
       "data-spark-component": "select-items",
@@ -803,36 +296,133 @@ var Items = ({
 Items.displayName = "Select.Items";
 
 // src/select/SelectLabel.tsx
-var import_react11 = require("react");
-var Label3 = ({ children }) => {
+var import_react4 = require("react");
+var Label = ({ children }) => {
   const { setGroupLabel } = useSelectGroupContext();
-  (0, import_react11.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     setGroupLabel(children);
   }, [children]);
   return null;
 };
-Label3.displayName = "Select.Label";
+Label.displayName = "Select.Label";
+
+// src/icon/Icon.tsx
+var import_react6 = require("react");
+
+// src/slot/Slot.tsx
+var import_radix_ui = require("radix-ui");
+var import_react5 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var Slottable = import_radix_ui.Slot.Slottable;
+var Slot = ({ ref, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_radix_ui.Slot.Root, { ref, ...props });
+};
+
+// src/visually-hidden/VisuallyHidden.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var VisuallyHidden = ({ asChild = false, ref, ...props }) => {
+  const Component = asChild ? Slot : "span";
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    Component,
+    {
+      ...props,
+      ref,
+      style: {
+        // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss
+        position: "absolute",
+        border: 0,
+        width: 1,
+        height: 1,
+        padding: 0,
+        margin: -1,
+        overflow: "hidden",
+        clip: "rect(0, 0, 0, 0)",
+        whiteSpace: "nowrap",
+        wordWrap: "normal",
+        ...props.style
+      }
+    }
+  );
+};
+VisuallyHidden.displayName = "VisuallyHidden";
+
+// src/icon/Icon.styles.tsx
+var import_internal_utils = require("@spark-ui/internal-utils");
+var import_class_variance_authority3 = require("class-variance-authority");
+var iconStyles = (0, import_class_variance_authority3.cva)(["fill-current shrink-0"], {
+  variants: {
+    /**
+     * Color scheme of the icon.
+     */
+    intent: (0, import_internal_utils.makeVariants)({
+      current: ["text-current"],
+      main: ["text-main"],
+      support: ["text-support"],
+      accent: ["text-accent"],
+      basic: ["text-basic"],
+      success: ["text-success"],
+      alert: ["text-alert"],
+      error: ["text-error"],
+      info: ["text-info"],
+      neutral: ["text-neutral"]
+    }),
+    /**
+     * Sets the size of the icon.
+     */
+    size: (0, import_internal_utils.makeVariants)({
+      current: ["u-current-font-size"],
+      sm: ["w-sz-16", "h-sz-16"],
+      md: ["w-sz-24", "h-sz-24"],
+      lg: ["w-sz-32", "h-sz-32"],
+      xl: ["w-sz-40", "h-sz-40"]
+    })
+  }
+});
+
+// src/icon/Icon.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Icon = ({
+  label,
+  className,
+  size = "current",
+  intent = "current",
+  children,
+  ...others
+}) => {
+  const child = import_react6.Children.only(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    (0, import_react6.cloneElement)(child, {
+      className: iconStyles({ className, size, intent }),
+      "data-spark-component": "icon",
+      "aria-hidden": "true",
+      focusable: "false",
+      ...others
+    }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(VisuallyHidden, { children: label })
+  ] });
+};
+Icon.displayName = "Icon";
 
 // src/select/SelectLeadingIcon.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var LeadingIcon = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { size: "sm", className: "shrink-0", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { size: "sm", className: "shrink-0", children });
 };
 LeadingIcon.displayName = "Select.LeadingIcon";
 
 // src/select/SelectPlaceholder.tsx
-var import_react12 = require("react");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_react7 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var Placeholder = ({
   disabled = false,
   children,
   ref: forwardedRef
 }) => {
   const { setPlaceholder } = useSelectContext();
-  (0, import_react12.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     setPlaceholder(children);
   }, [children]);
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     "option",
     {
       "data-spark-component": "select-placeholder",
@@ -848,11 +438,11 @@ Placeholder.displayName = "Select.Placeholder";
 
 // src/select/SelectTrigger.tsx
 var import_ArrowHorizontalDown = require("@spark-ui/icons/ArrowHorizontalDown");
-var import_react13 = require("react");
+var import_react8 = require("react");
 
 // src/select/SelectTrigger.styles.tsx
-var import_class_variance_authority13 = require("class-variance-authority");
-var styles2 = (0, import_class_variance_authority13.cva)(
+var import_class_variance_authority4 = require("class-variance-authority");
+var styles2 = (0, import_class_variance_authority4.cva)(
   [
     "relative flex w-full items-center justify-between",
     "min-h-sz-44 rounded-lg px-lg",
@@ -899,7 +489,7 @@ var styles2 = (0, import_class_variance_authority13.cva)(
 );
 
 // src/select/SelectTrigger.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var Trigger = ({
   "aria-label": ariaLabel,
   children,
@@ -907,20 +497,20 @@ var Trigger = ({
   ref: forwardedRef
 }) => {
   const { disabled, readOnly, state, setAriaLabel, itemsComponent } = useSelectContext();
-  (0, import_react13.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (ariaLabel) {
       setAriaLabel(ariaLabel);
     }
   }, [ariaLabel]);
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     "div",
     {
       "data-spark-component": "select-trigger",
       ref: forwardedRef,
       className: styles2({ className, state, disabled, readOnly }),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "gap-md flex items-center justify-start", children }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon, { className: "ml-md shrink-0", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_ArrowHorizontalDown.ArrowHorizontalDown, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "gap-md flex items-center justify-start", children }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { className: "ml-md shrink-0", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_ArrowHorizontalDown.ArrowHorizontalDown, {}) }),
         itemsComponent
       ]
     }
@@ -929,8 +519,8 @@ var Trigger = ({
 Trigger.displayName = "Select.Trigger";
 
 // src/select/SelectValue.tsx
-var import_class_variance_authority14 = require("class-variance-authority");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_class_variance_authority5 = require("class-variance-authority");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var Value = ({
   children,
   className,
@@ -940,17 +530,17 @@ var Value = ({
   const { selectedItem, placeholder, disabled } = useSelectContext();
   const isPlaceholderSelected = selectedItem?.value == null;
   const valuePlaceholder = customPlaceholder || placeholder;
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "span",
     {
       role: "presentation",
       "data-spark-component": "select-value",
       ref: forwardedRef,
-      className: (0, import_class_variance_authority14.cx)("flex shrink items-center text-left", className),
-      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      className: (0, import_class_variance_authority5.cx)("flex shrink items-center text-left", className),
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         "span",
         {
-          className: (0, import_class_variance_authority14.cx)(
+          className: (0, import_class_variance_authority5.cx)(
             "line-clamp-1 flex-1 overflow-hidden break-all text-ellipsis",
             isPlaceholderSelected && !disabled && "text-on-surface/dim-1"
           ),
@@ -968,7 +558,7 @@ var Select2 = Object.assign(Select, {
   Item,
   Items,
   Placeholder,
-  Label: Label3,
+  Label,
   Trigger,
   Value,
   LeadingIcon
@@ -978,7 +568,7 @@ Group.displayName = "Select.Group";
 Items.displayName = "Select.Items";
 Item.displayName = "Select.Item";
 Placeholder.displayName = "Select.Placeholder";
-Label3.displayName = "Select.Label";
+Label.displayName = "Select.Label";
 Trigger.displayName = "Select.Trigger";
 Value.displayName = "Select.Value";
 LeadingIcon.displayName = "Select.LeadingIcon";