@rehagro/ui 1.0.11 → 1.0.13

package/dist/index.mjs

@@ -38,7 +38,9 @@ var TOKEN_MAP = {
   inputHeightLg: { var: "--rh-input-height-lg", isColor: false },
   inputPxSm: { var: "--rh-input-px-sm", isColor: false },
   inputPxMd: { var: "--rh-input-px-md", isColor: false },
-  inputPxLg: { var: "--rh-input-px-lg", isColor: false }
+  inputPxLg: { var: "--rh-input-px-lg", isColor: false },
+  fontFamilyBody: { var: "--rh-font-family", isColor: false },
+  fontFamilyDisplay: { var: "--rh-font-family-display", isColor: false }
 };
 var DeleteIcon = (props) => /* @__PURE__ */ jsxs(
   "svg",
@@ -345,27 +347,19 @@ var Toast = forwardRef(function Toast2({
       className: [
         "rh-flex rh-items-start rh-gap-3",
         "rh-w-80 rh-rounded-sm rh-border rh-p-4",
-        "rh-shadow-md rh-font-sans",
+        "rh-shadow-md rh-font-body",
         containerStyles[styleKey],
         className
       ].filter(Boolean).join(" "),
       ...rest,
       children: [
-        /* @__PURE__ */ jsx("span", { className: "rh-flex-shrink-0 rh-mt-0.5", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
-          Icon,
-          {
-            className: ["rh-w-5 rh-h-5", iconStyles[styleKey]].filter(Boolean).join(" ")
-          }
-        ) }),
+        /* @__PURE__ */ jsx("span", { className: "rh-flex-shrink-0 rh-mt-0.5", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, { className: ["rh-w-5 rh-h-5", iconStyles[styleKey]].filter(Boolean).join(" ") }) }),
         /* @__PURE__ */ jsxs("div", { className: "rh-flex-1 rh-min-w-0", children: [
           /* @__PURE__ */ jsx("p", { className: "rh-text-sm rh-font-semibold rh-leading-tight", children: title }),
           description && /* @__PURE__ */ jsx(
             "p",
             {
-              className: [
-                "rh-mt-1 rh-text-sm rh-leading-normal",
-                descriptionStyles[styleKey]
-              ].filter(Boolean).join(" "),
+              className: ["rh-mt-1 rh-text-sm rh-leading-normal", descriptionStyles[styleKey]].filter(Boolean).join(" "),
               children: description
             }
           ),
@@ -729,7 +723,7 @@ var Button = forwardRef(function Button2({
       style: computedStyle,
       className: [
         "rh-inline-flex rh-items-center rh-justify-center rh-gap-2",
-        "rh-border rh-font-sans rh-font-medium",
+        "rh-border rh-font-display rh-font-medium",
         "rh-transition-colors rh-duration-150",
         "focus-visible:rh-outline-none focus-visible:rh-ring-2 focus-visible:rh-ring-ring focus-visible:rh-ring-offset-2",
         preset && !hasCustomHover ? variantColorClasses[variant][color] : "",
@@ -862,7 +856,7 @@ var IconButton = forwardRef(function IconButton2({
       style: computedStyle,
       className: [
         "rh-inline-flex rh-items-center rh-justify-center",
-        "rh-border rh-font-sans",
+        "rh-border rh-font-display",
         "rh-transition-colors rh-duration-150",
         "focus-visible:rh-outline-none focus-visible:rh-ring-2 focus-visible:rh-ring-ring focus-visible:rh-ring-offset-2",
         preset ? variantColorClasses2[variant][color] : "hover:rh-brightness-90",
@@ -960,7 +954,7 @@ var TextInput = forwardRef(function TextInput2({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: ["rh-flex rh-flex-col rh-gap-[0.5rem] rh-font-sans", wrapperClassName].filter(Boolean).join(" "),
+      className: ["rh-flex rh-flex-col rh-gap-[0.5rem] rh-font-body", wrapperClassName].filter(Boolean).join(" "),
       children: [
         label && /* @__PURE__ */ jsxs("label", { htmlFor: inputId, className: "rh-flex rh-items-baseline rh-gap-1", children: [
           /* @__PURE__ */ jsx("span", { className: `rh-text-sm ${labelWeightClasses[labelWeight]} rh-text-text`, children: label }),
@@ -971,7 +965,7 @@ var TextInput = forwardRef(function TextInput2({
           {
             className: [
               "rh-flex rh-items-center rh-gap-2",
-              "rh-border rh-bg-surface rh-font-sans",
+              "rh-border rh-bg-surface rh-font-body",
               "rh-transition-colors rh-duration-150",
               statusClasses[status],
               radiusClasses3[radius],
@@ -1109,7 +1103,7 @@ var Checkbox = forwardRef(function Checkbox2({
     {
       htmlFor: inputId,
       className: [
-        "rh-inline-flex rh-items-center rh-gap-2 rh-font-sans rh-select-none",
+        "rh-inline-flex rh-items-center rh-gap-2 rh-font-body rh-select-none",
         disabled ? "rh-cursor-not-allowed rh-opacity-50" : "rh-cursor-pointer",
         className
       ].filter(Boolean).join(" "),
@@ -1228,319 +1222,307 @@ var CheckIcon2 = ({ className }) => /* @__PURE__ */ jsx(
     )
   }
 );
-var Select = forwardRef(
-  function Select2(props, ref) {
-    const {
-      options,
-      label,
-      subtitle,
-      placeholder = "Select",
-      status = "default",
-      size = "md",
-      radius = "xs",
-      helperText,
-      disabled = false,
-      className = "",
-      wrapperClassName = "",
-      multiple = false
-    } = props;
-    const triggerId = React8.useId();
-    const listboxId = React8.useId();
-    const helperId = React8.useId();
-    const [isOpen, setIsOpen] = React8.useState(false);
-    const [activeIndex, setActiveIndex] = React8.useState(-1);
-    const wrapperRef = React8.useRef(null);
-    const innerRef = React8.useRef(null);
-    const listboxRef = React8.useRef(null);
-    React8.useImperativeHandle(ref, () => innerRef.current);
-    const [internalValue, setInternalValue] = React8.useState(() => {
-      if (props.defaultValue !== void 0) {
-        return Array.isArray(props.defaultValue) ? props.defaultValue : [props.defaultValue];
+var Select = forwardRef(function Select2(props, ref) {
+  const {
+    options,
+    label,
+    subtitle,
+    placeholder = "Select",
+    status = "default",
+    size = "md",
+    radius = "xs",
+    helperText,
+    disabled = false,
+    className = "",
+    wrapperClassName = "",
+    multiple = false
+  } = props;
+  const triggerId = React8.useId();
+  const listboxId = React8.useId();
+  const helperId = React8.useId();
+  const [isOpen, setIsOpen] = React8.useState(false);
+  const [activeIndex, setActiveIndex] = React8.useState(-1);
+  const wrapperRef = React8.useRef(null);
+  const innerRef = React8.useRef(null);
+  const listboxRef = React8.useRef(null);
+  React8.useImperativeHandle(ref, () => innerRef.current);
+  const [internalValue, setInternalValue] = React8.useState(() => {
+    if (props.defaultValue !== void 0) {
+      return Array.isArray(props.defaultValue) ? props.defaultValue : [props.defaultValue];
+    }
+    return [];
+  });
+  const isControlled = props.value !== void 0;
+  const selectedValues = isControlled ? Array.isArray(props.value) ? props.value : props.value !== void 0 ? [props.value] : [] : internalValue;
+  const enabledOptions = options.filter((o) => !o.disabled);
+  const handleSelect = (optionValue) => {
+    if (multiple) {
+      const next = selectedValues.includes(optionValue) ? selectedValues.filter((v) => v !== optionValue) : [...selectedValues, optionValue];
+      if (!isControlled) setInternalValue(next);
+      props.onChange?.(next);
+    } else {
+      const next = [optionValue];
+      if (!isControlled) setInternalValue(next);
+      props.onChange?.(optionValue);
+      setIsOpen(false);
+      innerRef.current?.focus();
+    }
+  };
+  const displayText = React8.useMemo(() => {
+    if (selectedValues.length === 0) return null;
+    if (!multiple) {
+      return options.find((o) => o.value === selectedValues[0])?.label ?? null;
+    }
+    const selectedLabels = selectedValues.map((v) => options.find((o) => o.value === v)?.label).filter(Boolean);
+    if (selectedLabels.length === 0) return null;
+    if (selectedLabels.length === 1) return selectedLabels[0];
+    return `${selectedLabels.length} selected`;
+  }, [selectedValues, options, multiple]);
+  React8.useEffect(() => {
+    if (!isOpen) return;
+    const handleClickOutside = (e) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
+        setIsOpen(false);
       }
-      return [];
-    });
-    const isControlled = props.value !== void 0;
-    const selectedValues = isControlled ? Array.isArray(props.value) ? props.value : props.value !== void 0 ? [props.value] : [] : internalValue;
-    const enabledOptions = options.filter((o) => !o.disabled);
-    const handleSelect = (optionValue) => {
-      if (multiple) {
-        const next = selectedValues.includes(optionValue) ? selectedValues.filter((v) => v !== optionValue) : [...selectedValues, optionValue];
-        if (!isControlled) setInternalValue(next);
-        props.onChange?.(next);
-      } else {
-        const next = [optionValue];
-        if (!isControlled) setInternalValue(next);
-        props.onChange?.(optionValue);
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [isOpen]);
+  React8.useEffect(() => {
+    if (!isOpen) return;
+    const handleEscape = (e) => {
+      if (e.key === "Escape") {
         setIsOpen(false);
         innerRef.current?.focus();
       }
     };
-    const displayText = React8.useMemo(() => {
-      if (selectedValues.length === 0) return null;
-      if (!multiple) {
-        return options.find((o) => o.value === selectedValues[0])?.label ?? null;
-      }
-      const selectedLabels = selectedValues.map((v) => options.find((o) => o.value === v)?.label).filter(Boolean);
-      if (selectedLabels.length === 0) return null;
-      if (selectedLabels.length === 1) return selectedLabels[0];
-      return `${selectedLabels.length} selected`;
-    }, [selectedValues, options, multiple]);
-    React8.useEffect(() => {
-      if (!isOpen) return;
-      const handleClickOutside = (e) => {
-        if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
-          setIsOpen(false);
-        }
-      };
-      document.addEventListener("mousedown", handleClickOutside);
-      return () => document.removeEventListener("mousedown", handleClickOutside);
-    }, [isOpen]);
-    React8.useEffect(() => {
-      if (!isOpen) return;
-      const handleEscape = (e) => {
-        if (e.key === "Escape") {
-          setIsOpen(false);
-          innerRef.current?.focus();
-        }
-      };
-      document.addEventListener("keydown", handleEscape);
-      return () => document.removeEventListener("keydown", handleEscape);
-    }, [isOpen]);
-    React8.useEffect(() => {
-      if (!isOpen || activeIndex < 0) return;
-      const listbox = listboxRef.current;
-      if (!listbox) return;
-      const activeEl = listbox.children[activeIndex];
-      if (typeof activeEl?.scrollIntoView === "function") {
-        activeEl.scrollIntoView({ block: "nearest" });
-      }
-    }, [activeIndex, isOpen]);
-    React8.useEffect(() => {
-      if (isOpen) {
-        const firstSelectedIdx = options.findIndex(
-          (o) => !o.disabled && selectedValues.includes(o.value)
-        );
-        setActiveIndex(firstSelectedIdx >= 0 ? firstSelectedIdx : 0);
-      } else {
-        setActiveIndex(-1);
-      }
-    }, [isOpen]);
-    const handleKeyDown = (e) => {
-      if (disabled) return;
-      switch (e.key) {
-        case "ArrowDown":
-        case "Down": {
-          e.preventDefault();
-          if (!isOpen) {
-            setIsOpen(true);
-            return;
-          }
-          setActiveIndex((prev) => {
-            for (let i = prev + 1; i < options.length; i++) {
-              if (!options[i].disabled) return i;
-            }
-            return prev;
-          });
-          break;
-        }
-        case "ArrowUp":
-        case "Up": {
-          e.preventDefault();
-          if (!isOpen) {
-            setIsOpen(true);
-            return;
-          }
-          setActiveIndex((prev) => {
-            for (let i = prev - 1; i >= 0; i--) {
-              if (!options[i].disabled) return i;
-            }
-            return prev;
-          });
-          break;
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [isOpen]);
+  React8.useEffect(() => {
+    if (!isOpen || activeIndex < 0) return;
+    const listbox = listboxRef.current;
+    if (!listbox) return;
+    const activeEl = listbox.children[activeIndex];
+    if (typeof activeEl?.scrollIntoView === "function") {
+      activeEl.scrollIntoView({ block: "nearest" });
+    }
+  }, [activeIndex, isOpen]);
+  React8.useEffect(() => {
+    if (isOpen) {
+      const firstSelectedIdx = options.findIndex(
+        (o) => !o.disabled && selectedValues.includes(o.value)
+      );
+      setActiveIndex(firstSelectedIdx >= 0 ? firstSelectedIdx : 0);
+    } else {
+      setActiveIndex(-1);
+    }
+  }, [isOpen]);
+  const handleKeyDown = (e) => {
+    if (disabled) return;
+    switch (e.key) {
+      case "ArrowDown":
+      case "Down": {
+        e.preventDefault();
+        if (!isOpen) {
+          setIsOpen(true);
+          return;
         }
-        case "Enter":
-        case " ": {
-          e.preventDefault();
-          if (!isOpen) {
-            setIsOpen(true);
-          } else if (activeIndex >= 0 && !options[activeIndex].disabled) {
-            handleSelect(options[activeIndex].value);
+        setActiveIndex((prev) => {
+          for (let i = prev + 1; i < options.length; i++) {
+            if (!options[i].disabled) return i;
           }
-          break;
+          return prev;
+        });
+        break;
+      }
+      case "ArrowUp":
+      case "Up": {
+        e.preventDefault();
+        if (!isOpen) {
+          setIsOpen(true);
+          return;
         }
-        case "Home": {
-          e.preventDefault();
-          if (isOpen) {
-            const idx = enabledOptions.length > 0 ? options.indexOf(enabledOptions[0]) : 0;
-            setActiveIndex(idx);
+        setActiveIndex((prev) => {
+          for (let i = prev - 1; i >= 0; i--) {
+            if (!options[i].disabled) return i;
           }
-          break;
+          return prev;
+        });
+        break;
+      }
+      case "Enter":
+      case " ": {
+        e.preventDefault();
+        if (!isOpen) {
+          setIsOpen(true);
+        } else if (activeIndex >= 0 && !options[activeIndex].disabled) {
+          handleSelect(options[activeIndex].value);
         }
-        case "End": {
-          e.preventDefault();
-          if (isOpen) {
-            const idx = enabledOptions.length > 0 ? options.indexOf(enabledOptions[enabledOptions.length - 1]) : options.length - 1;
-            setActiveIndex(idx);
-          }
-          break;
+        break;
+      }
+      case "Home": {
+        e.preventDefault();
+        if (isOpen) {
+          const idx = enabledOptions.length > 0 ? options.indexOf(enabledOptions[0]) : 0;
+          setActiveIndex(idx);
         }
-        case "Tab": {
-          if (isOpen) setIsOpen(false);
-          break;
+        break;
+      }
+      case "End": {
+        e.preventDefault();
+        if (isOpen) {
+          const idx = enabledOptions.length > 0 ? options.indexOf(enabledOptions[enabledOptions.length - 1]) : options.length - 1;
+          setActiveIndex(idx);
         }
+        break;
       }
-    };
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref: wrapperRef,
-        className: [
-          "rh-relative rh-flex rh-flex-col rh-gap-1 rh-font-sans",
-          wrapperClassName
-        ].filter(Boolean).join(" "),
-        children: [
-          label && /* @__PURE__ */ jsxs(
-            "label",
-            {
-              id: `${triggerId}-label`,
-              className: "rh-flex rh-items-baseline rh-gap-1",
-              children: [
-                /* @__PURE__ */ jsx("span", { className: "rh-text-sm rh-font-medium rh-text-text", children: label }),
-                subtitle && /* @__PURE__ */ jsx("span", { className: "rh-text-sm rh-text-text-muted", children: subtitle })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              ref: innerRef,
-              id: triggerId,
-              type: "button",
-              role: "combobox",
-              "aria-expanded": isOpen,
-              "aria-haspopup": "listbox",
-              "aria-controls": listboxId,
-              "aria-labelledby": label ? `${triggerId}-label` : void 0,
-              "aria-describedby": helperText ? helperId : void 0,
-              "aria-invalid": status === "error" || void 0,
-              "aria-disabled": disabled || void 0,
-              disabled,
-              onClick: () => !disabled && setIsOpen((o) => !o),
-              onKeyDown: handleKeyDown,
-              className: [
-                "rh-flex rh-items-center rh-justify-between rh-gap-2",
-                "rh-border rh-bg-surface rh-font-sans",
-                "rh-transition-colors rh-duration-150",
-                "rh-text-left rh-w-full",
-                statusClasses2[status],
-                radiusClasses4[radius],
-                sizeClasses5[size],
-                disabled ? "rh-opacity-50 rh-cursor-not-allowed rh-bg-background" : "rh-cursor-pointer",
-                className
-              ].filter(Boolean).join(" "),
-              children: [
-                /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: [
-                      "rh-flex-1 rh-truncate",
-                      displayText ? "rh-text-text" : "rh-text-text-muted"
-                    ].join(" "),
-                    children: displayText ?? placeholder
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  ChevronIcon,
-                  {
-                    className: [
-                      "rh-w-5 rh-h-5 rh-shrink-0 rh-text-text-muted rh-transition-transform rh-duration-150",
-                      isOpen ? "rh-rotate-180" : ""
-                    ].filter(Boolean).join(" ")
-                  }
-                )
-              ]
-            }
-          ),
-          isOpen && /* @__PURE__ */ jsx(
-            "ul",
-            {
-              ref: listboxRef,
-              id: listboxId,
-              role: "listbox",
-              "aria-labelledby": label ? `${triggerId}-label` : triggerId,
-              "aria-multiselectable": multiple || void 0,
-              tabIndex: -1,
-              className: [
-                "rh-absolute rh-z-50 rh-w-full rh-mt-1",
-                "rh-border rh-border-border rh-bg-surface",
-                "rh-shadow-md rh-overflow-auto rh-max-h-60",
-                "rh-py-1",
-                dropdownRadiusClasses[radius]
-              ].filter(Boolean).join(" "),
-              style: { top: "100%" },
-              children: options.map((option, index) => {
-                const isSelected = selectedValues.includes(option.value);
-                const isActive = index === activeIndex;
-                const isDisabled = option.disabled;
-                return /* @__PURE__ */ jsxs(
-                  "li",
-                  {
-                    id: `${listboxId}-option-${index}`,
-                    role: "option",
-                    "aria-selected": isSelected,
-                    "aria-disabled": isDisabled || void 0,
-                    onClick: () => {
-                      if (!isDisabled) handleSelect(option.value);
-                    },
-                    onMouseEnter: () => {
-                      if (!isDisabled) setActiveIndex(index);
-                    },
-                    className: [
-                      "rh-flex rh-items-center rh-justify-between rh-gap-2",
-                      "rh-transition-colors rh-duration-150",
-                      optionSizeClasses[size],
-                      isDisabled ? "rh-opacity-50 rh-cursor-not-allowed" : "rh-cursor-pointer",
-                      isActive && !isDisabled ? "rh-bg-background" : "",
-                      isSelected && !isActive ? "rh-bg-primary/5" : ""
-                    ].filter(Boolean).join(" "),
-                    children: [
-                      /* @__PURE__ */ jsx("span", { className: "rh-flex-1 rh-truncate rh-text-text", children: option.label }),
-                      multiple ? /* @__PURE__ */ jsx(
-                        "span",
-                        {
-                          className: [
-                            "rh-inline-flex rh-items-center rh-justify-center",
-                            "rh-w-5 rh-h-5 rh-shrink-0",
-                            "rh-border rh-rounded-xxs rh-transition-colors rh-duration-150",
-                            isSelected ? "rh-bg-primary rh-border-primary rh-text-surface" : "rh-border-border rh-bg-surface"
-                          ].filter(Boolean).join(" "),
-                          "aria-hidden": "true",
-                          children: isSelected && /* @__PURE__ */ jsx(CheckIcon2, { className: "rh-w-3 rh-h-3" })
-                        }
-                      ) : isSelected && /* @__PURE__ */ jsx(CheckIcon2, { className: "rh-w-3.5 rh-h-3.5 rh-shrink-0 rh-text-primary" })
-                    ]
-                  },
-                  option.value
-                );
-              })
-            }
-          ),
-          helperText && /* @__PURE__ */ jsx(
-            "span",
-            {
-              id: helperId,
-              className: [
-                "rh-flex rh-items-center rh-gap-1 rh-text-xs",
-                helperStatusClasses2[status]
-              ].join(" "),
-              children: helperText
-            }
-          )
-        ]
+      case "Tab": {
+        if (isOpen) setIsOpen(false);
+        break;
       }
-    );
-  }
-);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: wrapperRef,
+      className: ["rh-relative rh-flex rh-flex-col rh-gap-1 rh-font-body", wrapperClassName].filter(Boolean).join(" "),
+      children: [
+        label && /* @__PURE__ */ jsxs("label", { id: `${triggerId}-label`, className: "rh-flex rh-items-baseline rh-gap-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "rh-text-sm rh-font-medium rh-text-text", children: label }),
+          subtitle && /* @__PURE__ */ jsx("span", { className: "rh-text-sm rh-text-text-muted", children: subtitle })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref: innerRef,
+            id: triggerId,
+            type: "button",
+            role: "combobox",
+            "aria-expanded": isOpen,
+            "aria-haspopup": "listbox",
+            "aria-controls": listboxId,
+            "aria-labelledby": label ? `${triggerId}-label` : void 0,
+            "aria-describedby": helperText ? helperId : void 0,
+            "aria-invalid": status === "error" || void 0,
+            "aria-disabled": disabled || void 0,
+            disabled,
+            onClick: () => !disabled && setIsOpen((o) => !o),
+            onKeyDown: handleKeyDown,
+            className: [
+              "rh-flex rh-items-center rh-justify-between rh-gap-2",
+              "rh-border rh-bg-surface rh-font-body",
+              "rh-transition-colors rh-duration-150",
+              "rh-text-left rh-w-full",
+              statusClasses2[status],
+              radiusClasses4[radius],
+              sizeClasses5[size],
+              disabled ? "rh-opacity-50 rh-cursor-not-allowed rh-bg-background" : "rh-cursor-pointer",
+              className
+            ].filter(Boolean).join(" "),
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: [
+                    "rh-flex-1 rh-truncate",
+                    displayText ? "rh-text-text" : "rh-text-text-muted"
+                  ].join(" "),
+                  children: displayText ?? placeholder
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                ChevronIcon,
+                {
+                  className: [
+                    "rh-w-5 rh-h-5 rh-shrink-0 rh-text-text-muted rh-transition-transform rh-duration-150",
+                    isOpen ? "rh-rotate-180" : ""
+                  ].filter(Boolean).join(" ")
+                }
+              )
+            ]
+          }
+        ),
+        isOpen && /* @__PURE__ */ jsx(
+          "ul",
+          {
+            ref: listboxRef,
+            id: listboxId,
+            role: "listbox",
+            "aria-labelledby": label ? `${triggerId}-label` : triggerId,
+            "aria-multiselectable": multiple || void 0,
+            tabIndex: -1,
+            className: [
+              "rh-absolute rh-z-50 rh-w-full rh-mt-1",
+              "rh-border rh-border-border rh-bg-surface",
+              "rh-shadow-md rh-overflow-auto rh-max-h-60",
+              "rh-py-1",
+              dropdownRadiusClasses[radius]
+            ].filter(Boolean).join(" "),
+            style: { top: "100%" },
+            children: options.map((option, index) => {
+              const isSelected = selectedValues.includes(option.value);
+              const isActive = index === activeIndex;
+              const isDisabled = option.disabled;
+              return /* @__PURE__ */ jsxs(
+                "li",
+                {
+                  id: `${listboxId}-option-${index}`,
+                  role: "option",
+                  "aria-selected": isSelected,
+                  "aria-disabled": isDisabled || void 0,
+                  onClick: () => {
+                    if (!isDisabled) handleSelect(option.value);
+                  },
+                  onMouseEnter: () => {
+                    if (!isDisabled) setActiveIndex(index);
+                  },
+                  className: [
+                    "rh-flex rh-items-center rh-justify-between rh-gap-2",
+                    "rh-transition-colors rh-duration-150",
+                    optionSizeClasses[size],
+                    isDisabled ? "rh-opacity-50 rh-cursor-not-allowed" : "rh-cursor-pointer",
+                    isActive && !isDisabled ? "rh-bg-background" : "",
+                    isSelected && !isActive ? "rh-bg-primary/5" : ""
+                  ].filter(Boolean).join(" "),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "rh-flex-1 rh-truncate rh-text-text", children: option.label }),
+                    multiple ? /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: [
+                          "rh-inline-flex rh-items-center rh-justify-center",
+                          "rh-w-5 rh-h-5 rh-shrink-0",
+                          "rh-border rh-rounded-xxs rh-transition-colors rh-duration-150",
+                          isSelected ? "rh-bg-primary rh-border-primary rh-text-surface" : "rh-border-border rh-bg-surface"
+                        ].filter(Boolean).join(" "),
+                        "aria-hidden": "true",
+                        children: isSelected && /* @__PURE__ */ jsx(CheckIcon2, { className: "rh-w-3 rh-h-3" })
+                      }
+                    ) : isSelected && /* @__PURE__ */ jsx(CheckIcon2, { className: "rh-w-3.5 rh-h-3.5 rh-shrink-0 rh-text-primary" })
+                  ]
+                },
+                option.value
+              );
+            })
+          }
+        ),
+        helperText && /* @__PURE__ */ jsx(
+          "span",
+          {
+            id: helperId,
+            className: [
+              "rh-flex rh-items-center rh-gap-1 rh-text-xs",
+              helperStatusClasses2[status]
+            ].join(" "),
+            children: helperText
+          }
+        )
+      ]
+    }
+  );
+});
 var variantClasses = {
   light: "rh-bg-surface rh-text-text rh-border rh-border-border rh-shadow-md",
   default: "rh-bg-primary/10 rh-text-text rh-border rh-border-primary/20 rh-shadow-md",
@@ -1817,7 +1799,7 @@ var Avatar = forwardRef(function Avatar2({ src, alt = "", initials, size = "md",
       className: [
         "rh-inline-flex rh-items-center rh-justify-center rh-shrink-0 rh-overflow-hidden",
         avatarColors ? "" : "rh-bg-primary rh-text-surface",
-        "rh-font-sans rh-font-medium rh-select-none",
+        "rh-font-display rh-font-medium rh-select-none",
         sizeClasses7[size],
         variantClasses2[variant],
         className
@@ -1922,7 +1904,7 @@ var Tag = forwardRef(function Tag2({
       "aria-pressed": clickable ? active : void 0,
       "aria-disabled": disabled || void 0,
       className: [
-        "rh-inline-flex rh-items-center rh-font-sans rh-font-medium rh-rounded-full",
+        "rh-inline-flex rh-items-center rh-font-display rh-font-medium rh-rounded-full",
         "rh-border rh-whitespace-nowrap rh-select-none",
         "rh-transition-colors rh-duration-150",
         "rh-cursor-pointer",
@@ -1982,228 +1964,121 @@ var addButtonSizeClasses = {
   md: "rh-w-5 rh-h-5",
   lg: "rh-w-5 rh-h-5"
 };
-var TagInput = forwardRef(
-  function TagInput2({
-    label,
-    subtitle,
-    options = [],
-    value = [],
-    onChange,
-    placeholder,
-    status = "default",
-    size = "md",
-    radius = "md",
-    helperText,
-    disabled,
-    className = "",
-    wrapperClassName = ""
-  }, ref) {
-    const inputId = React8.useId();
-    const [isOpen, setIsOpen] = useState(false);
-    const containerRef = useRef(null);
-    useEffect(() => {
-      const handleClickOutside = (event) => {
-        if (containerRef.current && !containerRef.current.contains(event.target)) {
-          setIsOpen(false);
-        }
-      };
-      document.addEventListener("mousedown", handleClickOutside);
-      return () => document.removeEventListener("mousedown", handleClickOutside);
-    }, []);
-    const handleRemoveTag = (tagValue) => {
-      if (disabled) return;
-      onChange(value.filter((tag) => tag.value !== tagValue));
-    };
-    const handleToggleOption = (option) => {
-      if (disabled) return;
-      const isSelected = value.some((v) => v.value === option.value);
-      if (isSelected) {
-        onChange(value.filter((v) => v.value !== option.value));
-      } else {
-        onChange([...value, option]);
+var TagInput = forwardRef(function TagInput2({
+  label,
+  subtitle,
+  options = [],
+  value = [],
+  onChange,
+  placeholder,
+  status = "default",
+  size = "md",
+  radius = "md",
+  helperText,
+  disabled,
+  className = "",
+  wrapperClassName = ""
+}, ref) {
+  const inputId = React8.useId();
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef(null);
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setIsOpen(false);
       }
     };
-    const handleAddClick = () => {
-      if (disabled) return;
-      setIsOpen(!isOpen);
-    };
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref: (node) => {
-          if (typeof ref === "function") ref(node);
-          else if (ref) ref.current = node;
-          containerRef.current = node;
-        },
-        className: [
-          "rh-flex rh-flex-col rh-gap-2 rh-font-sans rh-relative",
-          wrapperClassName
-        ].filter(Boolean).join(" "),
-        children: [
-          label && /* @__PURE__ */ jsxs(
-            "label",
-            {
-              htmlFor: inputId,
-              className: "rh-flex rh-items-baseline rh-gap-1",
-              children: [
-                /* @__PURE__ */ jsx("span", { className: "rh-text-sm rh-font-semibold rh-text-text", children: label }),
-                subtitle && /* @__PURE__ */ jsx("span", { className: "rh-text-sm rh-text-text-muted", children: subtitle })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              onClick: disabled ? void 0 : handleAddClick,
-              className: [
-                "rh-flex rh-flex-row rh-items-center rh-justify-between rh-gap-2",
-                "rh-border rh-bg-surface rh-font-sans",
-                "rh-transition-colors rh-duration-150",
-                statusClasses3[status],
-                radiusClasses5[radius],
-                sizeClasses9[size],
-                disabled ? "rh-opacity-50 rh-cursor-not-allowed rh-bg-background" : "rh-cursor-pointer",
-                className
-              ].filter(Boolean).join(" "),
-              children: [
-                /* @__PURE__ */ jsxs("div", { className: "rh-flex rh-flex-row rh-flex-wrap rh-items-center rh-gap-2 rh-flex-1", children: [
-                  value.length === 0 && placeholder && /* @__PURE__ */ jsx("span", { className: "rh-text-text-muted", children: placeholder }),
-                  value.map((tag) => /* @__PURE__ */ jsxs(
-                    "div",
-                    {
-                      className: [
-                        "rh-inline-flex rh-items-center rh-justify-center rh-gap-1",
-                        "rh-bg-gray-200 rh-border rh-border-gray-200 rh-rounded-[4px]",
-                        tagSizeClasses[size]
-                      ].join(" "),
-                      children: [
-                        /* @__PURE__ */ jsx("span", { className: "rh-font-semibold rh-text-gray-700", children: tag.label }),
-                        /* @__PURE__ */ jsx(
-                          "button",
-                          {
-                            type: "button",
-                            onClick: (e) => {
-                              e.stopPropagation();
-                              handleRemoveTag(tag.value);
-                            },
-                            disabled,
-                            className: [
-                              "rh-flex rh-items-center rh-justify-center",
-                              "rh-bg-white rh-rounded-full",
-                              "rh-cursor-pointer hover:rh-bg-gray-100",
-                              "disabled:rh-cursor-not-allowed disabled:rh-opacity-50",
-                              deleteButtonSizeClasses[size]
-                            ].join(" "),
-                            "aria-label": `Remover ${tag.label}`,
-                            children: /* @__PURE__ */ jsx(
-                              "svg",
-                              {
-                                viewBox: "0 0 8 8",
-                                fill: "none",
-                                xmlns: "http://www.w3.org/2000/svg",
-                                className: "rh-w-[8px] rh-h-[8px]",
-                                children: /* @__PURE__ */ jsx(
-                                  "path",
-                                  {
-                                    d: "M6 2L2 6M2 2L6 6",
-                                    stroke: "#374151",
-                                    strokeWidth: "1.5",
-                                    strokeLinecap: "round",
-                                    strokeLinejoin: "round"
-                                  }
-                                )
-                              }
-                            )
-                          }
-                        )
-                      ]
-                    },
-                    tag.value
-                  ))
-                ] }),
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: handleAddClick,
-                    disabled,
-                    className: [
-                      "rh-flex rh-items-center rh-justify-center rh-shrink-0",
-                      "rh-text-text-muted hover:rh-text-text",
-                      "rh-cursor-pointer",
-                      "disabled:rh-cursor-not-allowed disabled:rh-opacity-50",
-                      addButtonSizeClasses[size]
-                    ].join(" "),
-                    "aria-label": "Adicionar",
-                    "aria-expanded": isOpen,
-                    children: /* @__PURE__ */ jsx(
-                      "svg",
-                      {
-                        viewBox: "0 0 20 20",
-                        fill: "none",
-                        xmlns: "http://www.w3.org/2000/svg",
-                        className: "rh-w-full rh-h-full",
-                        children: /* @__PURE__ */ jsx(
-                          "path",
-                          {
-                            d: "M10 4V16M4 10H16",
-                            stroke: "currentColor",
-                            strokeWidth: "2",
-                            strokeLinecap: "round",
-                            strokeLinejoin: "round"
-                          }
-                        )
-                      }
-                    )
-                  }
-                )
-              ]
-            }
-          ),
-          isOpen && options.length > 0 && /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: [
-                "rh-absolute rh-top-full rh-left-0 rh-right-0 rh-z-50",
-                "rh-mt-1 rh-bg-surface rh-border rh-border-border",
-                "rh-rounded-[8px] rh-shadow-lg rh-overflow-hidden"
-              ].join(" "),
-              children: /* @__PURE__ */ jsx("ul", { className: "rh-max-h-[200px] rh-overflow-y-auto", children: options.map((option) => {
-                const isSelected = value.some((v) => v.value === option.value);
-                return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
-                  "button",
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const handleRemoveTag = (tagValue) => {
+    if (disabled) return;
+    onChange(value.filter((tag) => tag.value !== tagValue));
+  };
+  const handleToggleOption = (option) => {
+    if (disabled) return;
+    const isSelected = value.some((v) => v.value === option.value);
+    if (isSelected) {
+      onChange(value.filter((v) => v.value !== option.value));
+    } else {
+      onChange([...value, option]);
+    }
+  };
+  const handleAddClick = () => {
+    if (disabled) return;
+    setIsOpen(!isOpen);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: (node) => {
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+        containerRef.current = node;
+      },
+      className: ["rh-flex rh-flex-col rh-gap-2 rh-font-body rh-relative", wrapperClassName].filter(Boolean).join(" "),
+      children: [
+        label && /* @__PURE__ */ jsxs("label", { htmlFor: inputId, className: "rh-flex rh-items-baseline rh-gap-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "rh-text-sm rh-font-semibold rh-text-text", children: label }),
+          subtitle && /* @__PURE__ */ jsx("span", { className: "rh-text-sm rh-text-text-muted", children: subtitle })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            onClick: disabled ? void 0 : handleAddClick,
+            className: [
+              "rh-flex rh-flex-row rh-items-center rh-justify-between rh-gap-2",
+              "rh-border rh-bg-surface rh-font-body",
+              "rh-transition-colors rh-duration-150",
+              statusClasses3[status],
+              radiusClasses5[radius],
+              sizeClasses9[size],
+              disabled ? "rh-opacity-50 rh-cursor-not-allowed rh-bg-background" : "rh-cursor-pointer",
+              className
+            ].filter(Boolean).join(" "),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "rh-flex rh-flex-row rh-flex-wrap rh-items-center rh-gap-2 rh-flex-1", children: [
+                value.length === 0 && placeholder && /* @__PURE__ */ jsx("span", { className: "rh-text-text-muted", children: placeholder }),
+                value.map((tag) => /* @__PURE__ */ jsxs(
+                  "div",
                   {
-                    type: "button",
-                    onClick: () => handleToggleOption(option),
                     className: [
-                      "rh-w-full rh-flex rh-items-center rh-justify-between",
-                      "rh-px-3 rh-py-3 rh-text-left",
-                      "rh-border-b rh-border-border/50 last:rh-border-b-0",
-                      "hover:rh-bg-gray-50 rh-transition-colors",
-                      isSelected ? "rh-text-text" : "rh-text-text-muted"
+                      "rh-inline-flex rh-items-center rh-justify-center rh-gap-1",
+                      "rh-bg-gray-200 rh-border rh-border-gray-200 rh-rounded-[4px]",
+                      tagSizeClasses[size]
                     ].join(" "),
                     children: [
-                      /* @__PURE__ */ jsx("span", { className: "rh-text-sm rh-font-normal", children: option.label }),
+                      /* @__PURE__ */ jsx("span", { className: "rh-font-semibold rh-text-gray-700", children: tag.label }),
                       /* @__PURE__ */ jsx(
-                        "span",
+                        "button",
                         {
+                          type: "button",
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            handleRemoveTag(tag.value);
+                          },
+                          disabled,
                           className: [
-                            "rh-w-5 rh-h-5 rh-rounded rh-border-2 rh-flex rh-items-center rh-justify-center",
-                            isSelected ? "rh-bg-primary rh-border-primary" : "rh-bg-white rh-border-gray-300"
+                            "rh-flex rh-items-center rh-justify-center",
+                            "rh-bg-white rh-rounded-full",
+                            "rh-cursor-pointer hover:rh-bg-gray-100",
+                            "disabled:rh-cursor-not-allowed disabled:rh-opacity-50",
+                            deleteButtonSizeClasses[size]
                           ].join(" "),
-                          children: isSelected && /* @__PURE__ */ jsx(
+                          "aria-label": `Remover ${tag.label}`,
+                          children: /* @__PURE__ */ jsx(
                             "svg",
                             {
-                              viewBox: "0 0 12 12",
+                              viewBox: "0 0 8 8",
                               fill: "none",
                               xmlns: "http://www.w3.org/2000/svg",
-                              className: "rh-w-3 rh-h-3",
+                              className: "rh-w-[8px] rh-h-[8px]",
                               children: /* @__PURE__ */ jsx(
                                 "path",
                                 {
-                                  d: "M2 6L5 9L10 3",
-                                  stroke: "white",
-                                  strokeWidth: "2",
+                                  d: "M6 2L2 6M2 2L6 6",
+                                  stroke: "#374151",
+                                  strokeWidth: "1.5",
                                   strokeLinecap: "round",
                                   strokeLinejoin: "round"
                                 }
@@ -2213,101 +2088,142 @@ var TagInput = forwardRef(
                         }
                       )
                     ]
-                  }
-                ) }, option.value);
-              }) })
-            }
-          ),
-          helperText && /* @__PURE__ */ jsx(
-            "span",
-            {
-              id: `${inputId}-helper`,
-              className: [
-                "rh-flex rh-items-center rh-gap-1 rh-text-xs",
-                helperStatusClasses3[status]
-              ].join(" "),
-              children: helperText
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-var ProgressBar = forwardRef(
-  function ProgressBar2({
-    value,
-    label,
-    size = "sm",
-    showPercentage = true,
-    barColor,
-    bgColor,
-    className = ""
-  }, ref) {
-    const clampedValue = Math.min(100, Math.max(0, value));
-    if (size === "lg") {
-      return /* @__PURE__ */ jsxs(
-        "div",
-        {
-          ref,
-          className: [
-            "rh-flex rh-flex-col rh-items-start rh-gap-2 rh-font-sans",
-            className
-          ].filter(Boolean).join(" "),
-          children: [
-            /* @__PURE__ */ jsxs("div", { className: "rh-flex rh-flex-row rh-justify-between rh-items-start rh-w-full", children: [
-              label && /* @__PURE__ */ jsx(
-                "span",
+                  },
+                  tag.value
+                ))
+              ] }),
+              /* @__PURE__ */ jsx(
+                "button",
                 {
-                  className: "rh-font-sora rh-font-bold rh-text-base rh-leading-6 rh-text-[#374151] rh-flex-1",
-                  children: label
+                  type: "button",
+                  onClick: handleAddClick,
+                  disabled,
+                  className: [
+                    "rh-flex rh-items-center rh-justify-center rh-shrink-0",
+                    "rh-text-text-muted hover:rh-text-text",
+                    "rh-cursor-pointer",
+                    "disabled:rh-cursor-not-allowed disabled:rh-opacity-50",
+                    addButtonSizeClasses[size]
+                  ].join(" "),
+                  "aria-label": "Adicionar",
+                  "aria-expanded": isOpen,
+                  children: /* @__PURE__ */ jsx(
+                    "svg",
+                    {
+                      viewBox: "0 0 20 20",
+                      fill: "none",
+                      xmlns: "http://www.w3.org/2000/svg",
+                      className: "rh-w-full rh-h-full",
+                      children: /* @__PURE__ */ jsx(
+                        "path",
+                        {
+                          d: "M10 4V16M4 10H16",
+                          stroke: "currentColor",
+                          strokeWidth: "2",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round"
+                        }
+                      )
+                    }
+                  )
                 }
-              ),
-              showPercentage && /* @__PURE__ */ jsxs(
-                "span",
+              )
+            ]
+          }
+        ),
+        isOpen && options.length > 0 && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: [
+              "rh-absolute rh-top-full rh-left-0 rh-right-0 rh-z-50",
+              "rh-mt-1 rh-bg-surface rh-border rh-border-border",
+              "rh-rounded-[8px] rh-shadow-lg rh-overflow-hidden"
+            ].join(" "),
+            children: /* @__PURE__ */ jsx("ul", { className: "rh-max-h-[200px] rh-overflow-y-auto", children: options.map((option) => {
+              const isSelected = value.some((v) => v.value === option.value);
+              return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+                "button",
                 {
-                  className: "rh-font-inter rh-font-normal rh-text-sm rh-leading-5 rh-text-[#9CA3AF] rh-tracking-[0.025em] rh-text-right",
+                  type: "button",
+                  onClick: () => handleToggleOption(option),
+                  className: [
+                    "rh-w-full rh-flex rh-items-center rh-justify-between",
+                    "rh-px-3 rh-py-3 rh-text-left",
+                    "rh-border-b rh-border-border/50 last:rh-border-b-0",
+                    "hover:rh-bg-gray-50 rh-transition-colors",
+                    isSelected ? "rh-text-text" : "rh-text-text-muted"
+                  ].join(" "),
                   children: [
-                    clampedValue,
-                    "%"
+                    /* @__PURE__ */ jsx("span", { className: "rh-text-sm rh-font-normal", children: option.label }),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: [
+                          "rh-w-5 rh-h-5 rh-rounded rh-border-2 rh-flex rh-items-center rh-justify-center",
+                          isSelected ? "rh-bg-primary rh-border-primary" : "rh-bg-white rh-border-gray-300"
+                        ].join(" "),
+                        children: isSelected && /* @__PURE__ */ jsx(
+                          "svg",
+                          {
+                            viewBox: "0 0 12 12",
+                            fill: "none",
+                            xmlns: "http://www.w3.org/2000/svg",
+                            className: "rh-w-3 rh-h-3",
+                            children: /* @__PURE__ */ jsx(
+                              "path",
+                              {
+                                d: "M2 6L5 9L10 3",
+                                stroke: "white",
+                                strokeWidth: "2",
+                                strokeLinecap: "round",
+                                strokeLinejoin: "round"
+                              }
+                            )
+                          }
+                        )
+                      }
+                    )
                   ]
                 }
-              )
-            ] }),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: "rh-w-full rh-h-1 rh-rounded-[40px] rh-overflow-hidden",
-                style: { backgroundColor: bgColor || "#E5E7EB" },
-                children: /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "rh-h-full rh-rounded-[40px] rh-transition-all rh-duration-300",
-                    style: {
-                      width: `${clampedValue}%`,
-                      backgroundColor: barColor || "#538CC6"
-                    }
-                  }
-                )
-              }
-            )
-          ]
-        }
-      );
+              ) }, option.value);
+            }) })
+          }
+        ),
+        helperText && /* @__PURE__ */ jsx(
+          "span",
+          {
+            id: `${inputId}-helper`,
+            className: [
+              "rh-flex rh-items-center rh-gap-1 rh-text-xs",
+              helperStatusClasses3[status]
+            ].join(" "),
+            children: helperText
+          }
+        )
+      ]
     }
+  );
+});
+var ProgressBar = forwardRef(function ProgressBar2({ value, label, size = "sm", showPercentage = true, barColor, bgColor, className = "" }, ref) {
+  const clampedValue = Math.min(100, Math.max(0, value));
+  if (size === "lg") {
     return /* @__PURE__ */ jsxs(
       "div",
       {
         ref,
-        className: [
-          "rh-flex rh-flex-row rh-items-center rh-gap-2 rh-font-sans",
-          className
-        ].filter(Boolean).join(" "),
+        className: ["rh-flex rh-flex-col rh-items-start rh-gap-2 rh-font-body", className].filter(Boolean).join(" "),
         children: [
+          /* @__PURE__ */ jsxs("div", { className: "rh-flex rh-flex-row rh-justify-between rh-items-start rh-w-full", children: [
+            label && /* @__PURE__ */ jsx("span", { className: "rh-font-sora rh-font-bold rh-text-base rh-leading-6 rh-text-[#374151] rh-flex-1", children: label }),
+            showPercentage && /* @__PURE__ */ jsxs("span", { className: "rh-font-inter rh-font-normal rh-text-sm rh-leading-5 rh-text-[#9CA3AF] rh-tracking-[0.025em] rh-text-right", children: [
+              clampedValue,
+              "%"
+            ] })
+          ] }),
           /* @__PURE__ */ jsx(
             "div",
             {
-              className: "rh-flex-1 rh-h-1 rh-rounded-[40px] rh-overflow-hidden",
+              className: "rh-w-full rh-h-1 rh-rounded-[40px] rh-overflow-hidden",
               style: { backgroundColor: bgColor || "#E5E7EB" },
               children: /* @__PURE__ */ jsx(
                 "div",
@@ -2320,22 +2236,42 @@ var ProgressBar = forwardRef(
                 }
               )
             }
-          ),
-          showPercentage && /* @__PURE__ */ jsxs(
-            "span",
-            {
-              className: "rh-font-inter rh-font-normal rh-text-sm rh-leading-5 rh-text-[#9CA3AF] rh-tracking-[0.025em] rh-text-right rh-min-w-[40px]",
-              children: [
-                clampedValue,
-                "%"
-              ]
-            }
           )
         ]
       }
     );
   }
-);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: ["rh-flex rh-flex-row rh-items-center rh-gap-2 rh-font-body", className].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "rh-flex-1 rh-h-1 rh-rounded-[40px] rh-overflow-hidden",
+            style: { backgroundColor: bgColor || "#E5E7EB" },
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "rh-h-full rh-rounded-[40px] rh-transition-all rh-duration-300",
+                style: {
+                  width: `${clampedValue}%`,
+                  backgroundColor: barColor || "#538CC6"
+                }
+              }
+            )
+          }
+        ),
+        showPercentage && /* @__PURE__ */ jsxs("span", { className: "rh-font-inter rh-font-normal rh-text-sm rh-leading-5 rh-text-[#9CA3AF] rh-tracking-[0.025em] rh-text-right rh-min-w-[40px]", children: [
+          clampedValue,
+          "%"
+        ] })
+      ]
+    }
+  );
+});
 var PRESET_COLORS4 = /* @__PURE__ */ new Set([
   "primary",
   "secondary",
@@ -2403,7 +2339,7 @@ function ToggleGroupInner({
             onClick: () => !isDisabled && onChange(option.value),
             className: [
               "rh-flex rh-items-center rh-justify-center rh-h-full",
-              "rh-border-0 rh-font-sans rh-font-medium",
+              "rh-border-0 rh-font-display rh-font-medium",
               "rh-transition-all rh-duration-150",
               "focus-visible:rh-outline-none focus-visible:rh-ring-2 focus-visible:rh-ring-ring",
               radiusClasses6[radius],
@@ -2463,7 +2399,7 @@ var Card = forwardRef(function Card2({
       tabIndex: isInteractive ? 0 : void 0,
       "aria-disabled": disabled || void 0,
       className: [
-        "rh-font-sans rh-transition-all rh-duration-150",
+        "rh-font-body rh-transition-all rh-duration-150",
         variantClasses3[variant],
         radiusClasses7[radius],
         paddingClasses[padding],
@@ -2652,10 +2588,7 @@ function TableInner({
     "table",
     {
       ref,
-      className: [
-        "rh-w-full rh-border-collapse rh-font-sans",
-        className
-      ].filter(Boolean).join(" "),
+      className: ["rh-w-full rh-border-collapse rh-font-body", className].filter(Boolean).join(" "),
       ...rest,
       children: [
         /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: "rh-border-b rh-border-border", style: headerStyle, children: columns.map((column) => /* @__PURE__ */ jsx(