@candidhealth/react-vitals 1.0.0-alpha.2 → 1.0.0-alpha.4

package/dist/index.mjs

@@ -1,9 +1,75 @@
+// src/core/avatar/Avatar.tsx
+import { forwardRef } from "react";
+import { twJoin as twJoin2 } from "tailwind-merge";
+
+// src/core/text/Text.tsx
+import { twJoin } from "tailwind-merge";
+import { jsx } from "react/jsx-runtime";
+var VARIANT_STYLES = {
+  "marketing-headline": "text-marketing-headline",
+  "headline-1": "text-headline-1",
+  "headline-2": "text-headline-2",
+  "headline-3": "text-headline-3",
+  "headline-4": "text-headline-4",
+  "title-1": "text-title-1",
+  "title-2": "text-title-2",
+  "title-3": "text-title-3",
+  "body-1": "text-body-1",
+  "body-2": "text-body-2",
+  label: "text-label",
+  footnote: "text-footnote",
+  smallcaps: "text-smallcaps uppercase"
+};
+var Text = ({ as, variant = "body-1", children, className, ...props }) => {
+  const Tag2 = as ?? "p";
+  return /* @__PURE__ */ jsx(Tag2, { ...props, className: twJoin(VARIANT_STYLES[variant], className), children });
+};
+
+// src/core/avatar/Avatar.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var getInitials = (name) => {
+  const trimmed = name.trim();
+  if (trimmed.includes(" ")) {
+    const parts = trimmed.split(" ");
+    return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+  }
+  return trimmed.slice(0, 2).toUpperCase();
+};
+var Avatar = forwardRef(
+  ({ name, variant = "active", size = "md", className, ...props }, ref) => {
+    const initials = getInitials(name);
+    const isActive = variant === "active";
+    return /* @__PURE__ */ jsx2(
+      "div",
+      {
+        ref,
+        className: twJoin2(
+          "flex items-center justify-center rounded-full border border-indigo-200",
+          isActive ? "bg-indigo-100" : "bg-indigo-50",
+          size == "md" && "size-8.5",
+          size == "sm" && "size-7",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsx2(Text, { className: twJoin2("font-semibold text-muted", !isActive && "opacity-50"), children: initials })
+      }
+    );
+  }
+);
+
+// src/core/avatar/AvatarGroup.tsx
+import { twJoin as twJoin4 } from "tailwind-merge";
+
+// src/core/popover/Popover.tsx
+import * as RadixPopover from "@radix-ui/react-popover";
+import { twMerge as twMerge2 } from "tailwind-merge";
+
 // src/core/button/Button.tsx
 import * as React from "react";
 import { twMerge } from "tailwind-merge";
 
 // src/core/button/buttonStyles.ts
-import { twJoin } from "tailwind-merge";
+import { twJoin as twJoin3 } from "tailwind-merge";
 var linkStyles = "text-indigo-600 hover:underline active:text-indigo-400 focus:outline-indigo-400 focus:outline-offset-2";
 var roundedMdStyles = {
   none: "",
@@ -45,21 +111,21 @@ var sizeStyles = {
 };
 var colorStyles = {
   default: {
-    primary: "bg-indigo-600 hover:bg-indigo-700 data-[state='open']:bg-indigo-700 border border-indigo-700 text-white",
-    default: "bg-white hover:bg-gray-100 data-[state='open']:bg-gray-100 border border-gray-200 text-gray-700",
-    danger: "bg-red-600 hover:bg-red-700 data-[state='open']:bg-red-700 border border-red-700 text-white",
+    primary: "bg-button-primary hover:bg-button-primary-hover data-[state='open']:bg-button-primary-hover border border-button-primary hover:border-button-primary-hover text-white",
+    default: "bg-button-white hover:bg-button-white-hover data-[state='open']:bg-button-white-hover border border-button-white text-neutral",
+    danger: "bg-button-danger hover:bg-button-danger-hover data-[state='open']:bg-button-danger-hover border border-button-danger text-white",
     error: "bg-white hover:bg-red-50 data-[state='open']:bg-red-50 text-red-500 border border-red-300"
   },
   transparent: {
     primary: "bg-indigo-900/0 hover:bg-indigo-900/10 data-[state='open']:bg-indigo-900/10 text-indigo-700",
-    default: "bg-gray-900/0 hover:bg-gray-900/10 data-[state='open']:bg-gray-900/10 text-gray-700",
+    default: "bg-gray-900/0 hover:bg-gray-900/10 data-[state='open']:bg-gray-900/10 text-neutral",
     danger: "bg-red-900/0 hover:bg-red-900/10 data-[state='open']:bg-red-900/10 text-red-700",
     error: "bg-red-900/0 hover:bg-red-900/10 data-[state='open']:bg-red-900/10 text-red-500"
   },
   dark: {
-    primary: "bg-indigo-600 hover:bg-indigo-700 data-[state='open']:bg-indigo-700 border border-indigo-700 text-white",
+    primary: "bg-indigo-600 hover:bg-indigo-700 data-[state='open']:bg-indigo-700 border border-button-primary text-white",
     default: "bg-gray-900 hover:bg-gray-600 data-[state='open']:bg-gray-600 text-white",
-    danger: "bg-red-600 hover:bg-red-700 data-[state='open']:bg-red-700 text-white",
+    danger: "bg-button-danger hover:bg-button-danger-hover data-[state='open']:bg-button-danger-hover text-white",
     error: "bg-white hover:bg-red-50 data-[state='open']:bg-red-50 text-red-500"
   }
 };
@@ -72,10 +138,7 @@ var buttonStyles = ({
   loading,
   roundedness = "default"
 }) => {
-  if (variant === "link") {
-    return twJoin(fullWidth && "w-full", loading && "animate-loading-pulse", linkStyles);
-  }
-  return twJoin(
+  return twJoin3(
     "flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus-visible:ring-indigo-400 focus-visible:ring-inset disabled:pointer-events-none disabled:opacity-50",
     fullWidth && "w-full",
     borderRadiusStyles[roundedness][size][soften],
@@ -86,7 +149,7 @@ var buttonStyles = ({
 };
 
 // src/core/button/Button.tsx
-import { jsx } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var ButtonImpl = ({
   fullWidth,
   size,
@@ -100,7 +163,7 @@ var ButtonImpl = ({
   children,
   ...rest
 }, ref) => {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx3(
     "button",
     {
       type: "button",
@@ -115,13 +178,13 @@ var ButtonImpl = ({
 var Button = React.forwardRef(ButtonImpl);
 
 // src/core/button/ButtonGroup.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var ButtonGroup = ({
   size,
   value,
   onChange,
   buttons
-}) => /* @__PURE__ */ jsx2("div", { className: "flex", children: buttons.map((button, i) => /* @__PURE__ */ jsx2(
+}) => /* @__PURE__ */ jsx4("div", { className: "flex", children: buttons.map((button, i) => /* @__PURE__ */ jsx4(
   Button,
   {
     size,
@@ -133,38 +196,212 @@ var ButtonGroup = ({
   button.value
 )) });
 
+// src/core/popover/Popover.tsx
+import { jsx as jsx5, jsxs } from "react/jsx-runtime";
+var Popover = ({
+  open,
+  trigger,
+  triggerClassName,
+  children,
+  arrowClassName,
+  contentClassName,
+  disabled,
+  onOpenChange,
+  alignContent,
+  container,
+  ...props
+}) => /* @__PURE__ */ jsxs(RadixPopover.Root, { open, onOpenChange, children: [
+  /* @__PURE__ */ jsx5(RadixPopover.Trigger, { asChild: true, disabled, className: triggerClassName, children: trigger }),
+  /* @__PURE__ */ jsx5(
+    PopoverBody,
+    {
+      align: alignContent,
+      ...props,
+      contentClassName,
+      arrowClassName,
+      container,
+      children
+    }
+  )
+] });
+var PopoverBody = ({ children, arrowClassName, contentClassName, container, ...props }) => {
+  return /* @__PURE__ */ jsx5(RadixPopover.Portal, { container, children: /* @__PURE__ */ jsxs(
+    RadixPopover.Content,
+    {
+      ...props,
+      className: twMerge2("isolate z-50 rounded-lg bg-white shadow-lg focus:outline-hidden", contentClassName),
+      children: [
+        children,
+        /* @__PURE__ */ jsx5(RadixPopover.Arrow, { className: twMerge2("fill-white", arrowClassName), offset: 8 })
+      ]
+    }
+  ) });
+};
+Popover.Root = (props) => /* @__PURE__ */ jsx5(RadixPopover.Root, { ...props });
+Popover.Trigger = (props) => /* @__PURE__ */ jsx5(RadixPopover.Trigger, { asChild: true, children: /* @__PURE__ */ jsx5(Button, { ...props }) });
+Popover.Body = PopoverBody;
+Popover.Close = (props) => /* @__PURE__ */ jsx5(RadixPopover.Close, { asChild: true, ...props });
+
+// src/core/tooltip/Tooltip.tsx
+import * as RadixTooltip from "@radix-ui/react-tooltip";
+
+// src/core/utils/useOverflowObserver.tsx
+import * as React2 from "react";
+var useOverflowObserver = () => {
+  const [hasOverflow, setHasOverflow] = React2.useState(false);
+  const elementRef = React2.useRef(null);
+  React2.useEffect(() => {
+    if (elementRef.current == null) return;
+    const resizeObserver = new ResizeObserver(([entry]) => {
+      window.requestAnimationFrame(() => {
+        const element = entry?.target;
+        const hasOverflowWidth = element.offsetWidth < element.scrollWidth;
+        const hasOverflowHeight = element.offsetHeight < element.scrollHeight;
+        const calcHasOverflow = hasOverflowWidth || hasOverflowHeight;
+        if (calcHasOverflow !== hasOverflow) {
+          setHasOverflow(calcHasOverflow);
+        }
+      });
+    });
+    resizeObserver.observe(elementRef.current);
+    return () => resizeObserver.disconnect();
+  }, [hasOverflow]);
+  return { elementRef, hasOverflow };
+};
+
+// src/core/tooltip/Tooltip.tsx
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+var TooltipContent = ({ children, variant = "dark", ...rest }) => {
+  return /* @__PURE__ */ jsx6(RadixTooltip.Portal, { children: /* @__PURE__ */ jsxs2(
+    RadixTooltip.Content,
+    {
+      ...rest,
+      hideWhenDetached: true,
+      sideOffset: 6,
+      className: `z-9000000000 max-w-prose rounded-lg px-5 py-3 text-sm break-words shadow-lg ${variant === "dark" ? "bg-gray-900 text-white" : "bg-white text-gray-600"}`,
+      children: [
+        children,
+        /* @__PURE__ */ jsx6(RadixTooltip.Arrow, { className: variant === "dark" ? "fill-gray-900" : "fill-white", offset: 8 })
+      ]
+    }
+  ) });
+};
+TooltipContent.displayName = RadixTooltip.Content.displayName;
+var OverflowTrigger = ({
+  element,
+  ...rest
+}) => {
+  const { elementRef, hasOverflow } = useOverflowObserver();
+  if (!hasOverflow) {
+    return element(elementRef);
+  }
+  return /* @__PURE__ */ jsx6(RadixTooltip.Trigger, { asChild: true, ...rest, children: element(elementRef) });
+};
+var TooltipTrigger = (props) => /* @__PURE__ */ jsx6(RadixTooltip.Trigger, { asChild: true, ...props });
+var TooltipProvider = (props) => /* @__PURE__ */ jsx6(RadixTooltip.Provider, { disableHoverableContent: true, delayDuration: 0, ...props });
+var TooltipRoot = (props) => /* @__PURE__ */ jsx6(RadixTooltip.Root, { ...props });
+var Tooltip = ({ trigger, content, variant, side, ...rest }) => {
+  return /* @__PURE__ */ jsxs2(Tooltip.Root, { ...rest, children: [
+    /* @__PURE__ */ jsx6(Tooltip.Trigger, { children: trigger }),
+    content && /* @__PURE__ */ jsx6(Tooltip.Content, { side, variant, children: content })
+  ] });
+};
+Tooltip.Provider = TooltipProvider;
+Tooltip.Root = TooltipRoot;
+Tooltip.Trigger = TooltipTrigger;
+Tooltip.OverflowTrigger = OverflowTrigger;
+Tooltip.Content = TooltipContent;
+
+// src/core/avatar/AvatarWithName.tsx
+import { twMerge as twMerge3 } from "tailwind-merge";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+var AvatarWithName = ({ name, variant, className }) => /* @__PURE__ */ jsxs3("div", { className: twMerge3("flex items-center gap-2", className), children: [
+  /* @__PURE__ */ jsx7(Avatar, { name, variant }),
+  /* @__PURE__ */ jsx7(Text, { children: name })
+] });
+
+// src/core/avatar/AvatarGroup.tsx
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+var AvatarGroup = ({ items, maxVisible = 3, overflowTitle, size = "md" }) => {
+  const visibleItems = items.slice(0, maxVisible);
+  const overflowItems = items.slice(maxVisible);
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: twJoin4("flex", size === "md" && "-space-x-2", size === "sm" && "-space-x-1.5"),
+      "fs-id": "FSRecentViewers",
+      children: [
+        visibleItems.map((item, i) => /* @__PURE__ */ jsx8(
+          Tooltip,
+          {
+            trigger: /* @__PURE__ */ jsx8("span", { className: "relative", style: { zIndex: visibleItems.length - i }, children: /* @__PURE__ */ jsx8(Avatar, { name: item.name, variant: item.variant, size }) }),
+            content: item.tooltipContent
+          },
+          `${item.name}-${i}`
+        )),
+        overflowItems.length > 0 && /* @__PURE__ */ jsxs4(
+          Popover,
+          {
+            trigger: /* @__PURE__ */ jsx8(
+              "button",
+              {
+                type: "button",
+                className: twJoin4(
+                  "relative flex items-center justify-center rounded-full border border-surface-neutral bg-surface-neutral",
+                  size === "md" && "size-8.5",
+                  size === "sm" && "size-7"
+                ),
+                "fs-id": "FSRecentViewersOverflowTrigger",
+                children: /* @__PURE__ */ jsxs4(Text, { className: "font-semibold text-muted", children: [
+                  "+",
+                  overflowItems.length
+                ] })
+              }
+            ),
+            contentClassName: twJoin4(size === "md" && "p-3", size === "sm" && "p-2"),
+            children: [
+              overflowTitle && /* @__PURE__ */ jsx8(Text, { className: "mb-2 font-semibold text-muted", children: overflowTitle }),
+              /* @__PURE__ */ jsx8("div", { className: "flex flex-col gap-2", children: overflowItems.map((item, i) => /* @__PURE__ */ jsx8(AvatarWithName, { name: item.name, variant: item.variant }, `${item.name}-${i}`)) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
 // src/core/callout/Callout.tsx
-import { faCircle, faCircleInfo, faDiamond, faTriangleExclamation } from "@fortawesome/free-solid-svg-icons";
-import { twJoin as twJoin2 } from "tailwind-merge";
+import { faCircle, faDiamond, faExclamationTriangle, faInfoCircle } from "@fortawesome/sharp-solid-svg-icons";
+import { twJoin as twJoin5 } from "tailwind-merge";
 
 // src/core/icon/Icon.tsx
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var Icon = ({ icon }) => /* @__PURE__ */ jsx3(FontAwesomeIcon, { icon });
+import { jsx as jsx9 } from "react/jsx-runtime";
+var Icon = ({ icon }) => /* @__PURE__ */ jsx9(FontAwesomeIcon, { icon });
 
 // src/core/callout/Callout.tsx
-import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
 var calloutBackgroundStyles = {
-  default: "bg-gray-100",
+  default: "bg-surface-neutral",
   warning: "bg-yellow-50",
-  primary: "bg-indigo-50",
+  primary: "bg-surface-primary",
   danger: "bg-red-50"
 };
 var calloutIconStyles = {
-  default: "text-gray-500",
-  warning: "text-yellow-700",
+  default: "text-muted",
+  warning: "text-warning",
   primary: "text-indigo-500",
   danger: "text-red-800"
 };
 var calloutBorderStyles = {
-  default: "border-[1px] border-gray-200",
-  primary: "border-[1px] border-indigo-100",
-  warning: "border-[1px] border-yellow-200",
+  default: "border-[1px] border-surface-neutral",
+  primary: "border-[1px] border-surface-primary",
+  warning: "border-[1px] border-surface-warning",
   danger: "border-[1px] border-red-100"
 };
 var calloutIcons = {
-  default: faCircleInfo,
-  warning: faTriangleExclamation,
+  default: faInfoCircle,
+  warning: faExclamationTriangle,
   primary: faDiamond,
   danger: faCircle
 };
@@ -176,10 +413,10 @@ var Callout = ({
   customIcon,
   isAttachedAtBottom,
   isCentered
-}) => /* @__PURE__ */ jsxs(
+}) => /* @__PURE__ */ jsxs5(
   "div",
   {
-    className: twJoin2(
+    className: twJoin5(
       "flex w-full justify-between rounded-lg p-2.5",
       calloutBackgroundStyles[intent],
       calloutBorderStyles[intent],
@@ -187,11 +424,11 @@ var Callout = ({
       isCentered ? "items-center" : "items-start"
     ),
     children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsx4("div", { className: twJoin2("text-sm", title ? "leading-6.5" : "leading-5", calloutIconStyles[intent]), children: /* @__PURE__ */ jsx4(Icon, { icon: customIcon ?? calloutIcons[intent] }) }),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-1", children: [
-          title && /* @__PURE__ */ jsx4("div", { className: "leading-6.5 font-medium whitespace-pre-line text-gray-700", children: title }),
-          children && /* @__PURE__ */ jsx4("div", { className: "text-sm leading-5 text-gray-500", children })
+      /* @__PURE__ */ jsxs5("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx10("div", { className: twJoin5("text-sm", title ? "leading-6.5" : "leading-5", calloutIconStyles[intent]), children: /* @__PURE__ */ jsx10(Icon, { icon: customIcon ?? calloutIcons[intent] }) }),
+        /* @__PURE__ */ jsxs5("div", { className: "flex flex-1 flex-col gap-1", children: [
+          title && /* @__PURE__ */ jsx10("div", { className: "leading-6.5 font-medium whitespace-pre-line text-neutral", children: title }),
+          children && /* @__PURE__ */ jsx10("div", { className: "text-sm leading-5 text-muted", children })
         ] })
       ] }),
       rightSlot
@@ -199,18 +436,36 @@ var Callout = ({
   }
 );
 
+// src/core/card/Card.tsx
+import React3 from "react";
+import { twMerge as twMerge4 } from "tailwind-merge";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var Card = React3.forwardRef(({ className, children, onClick }, ref) => /* @__PURE__ */ jsx11(
+  "div",
+  {
+    ref,
+    className: twMerge4(
+      "mb-4 rounded-lg border-solid border-surface-neutral bg-white shadow",
+      onClick != null && "cursor-pointer transition-shadow duration-150 hover:shadow-md",
+      className
+    ),
+    onClick,
+    children
+  }
+));
+
 // src/core/checkbox/Checkbox.tsx
-import { forwardRef as forwardRef2, useEffect, useRef } from "react";
-import { twJoin as twJoin3 } from "tailwind-merge";
-import { jsx as jsx5 } from "react/jsx-runtime";
-var Checkbox = forwardRef2(({ className, hasError, ...rest }, ref) => /* @__PURE__ */ jsx5(
+import { forwardRef as forwardRef3, useEffect as useEffect2, useRef as useRef2 } from "react";
+import { twJoin as twJoin6 } from "tailwind-merge";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var Checkbox = forwardRef3(({ className, hasError, ...rest }, ref) => /* @__PURE__ */ jsx12(
   "input",
   {
     type: "checkbox",
-    className: twJoin3(
+    className: twJoin6(
       className,
-      "block rounded-sm text-indigo-600 checked:bg-indigo-600 indeterminate:bg-indigo-600 focus:ring-0 focus:ring-offset-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:hover:bg-gray-200",
-      hasError ? "border-red-300 text-red-900 placeholder-red-300" : "border-gray-200 disabled:border-gray-200"
+      "block rounded-sm text-indigo-600 checked:bg-indigo-600 indeterminate:bg-indigo-600 focus:ring-0 focus:ring-offset-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400 disabled:cursor-not-allowed disabled:bg-surface-dark disabled:hover:bg-surface-dark",
+      hasError ? "border-red-300 text-red-900 placeholder-red-300" : "border-surface-neutral disabled:border-surface-neutral"
     ),
     ...rest,
     ref
@@ -220,21 +475,21 @@ var IndeterminateCheckbox = ({
   indeterminate = false,
   ...rest
 }) => {
-  const ref = useRef(null);
-  useEffect(() => {
+  const ref = useRef2(null);
+  useEffect2(() => {
     if (ref.current) {
       ref.current.indeterminate = indeterminate;
     }
   }, [indeterminate]);
-  return /* @__PURE__ */ jsx5(Checkbox, { ref, ...rest });
+  return /* @__PURE__ */ jsx12(Checkbox, { ref, ...rest });
 };
 
 // src/core/collapsible/Collapsible.tsx
-import { faChevronDown, faChevronRight } from "@fortawesome/free-solid-svg-icons";
-import { Content, Root, Trigger } from "@radix-ui/react-collapsible";
-import { useState } from "react";
-import { twMerge as twMerge2 } from "tailwind-merge";
-import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+import { faChevronDown, faChevronRight } from "@fortawesome/sharp-solid-svg-icons";
+import { Content as Content3, Root as Root3, Trigger as Trigger3 } from "@radix-ui/react-collapsible";
+import { useState as useState2 } from "react";
+import { twMerge as twMerge5 } from "tailwind-merge";
+import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
 var Collapsible = ({
   title,
   children,
@@ -246,55 +501,45 @@ var Collapsible = ({
   triggerClassName
 }) => {
   const isControlled = controlledOpen !== void 0 && controlledSetOpen !== void 0;
-  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const [uncontrolledOpen, setUncontrolledOpen] = useState2(defaultOpen);
   const isOpen = isControlled ? controlledOpen : uncontrolledOpen;
   const setIsOpen = isControlled ? controlledSetOpen : setUncontrolledOpen;
-  return /* @__PURE__ */ jsxs2(Root, { className: "flex flex-col gap-2", open: isOpen, onOpenChange: setIsOpen, children: [
-    /* @__PURE__ */ jsx6(
-      Trigger,
+  return /* @__PURE__ */ jsxs6(Root3, { className: "flex flex-col gap-2", open: isOpen, onOpenChange: setIsOpen, children: [
+    /* @__PURE__ */ jsx13(
+      Trigger3,
       {
         asChild: true,
-        className: twMerge2("flex cursor-pointer items-center gap-2 font-medium text-gray-500", triggerClassName),
-        children: /* @__PURE__ */ jsxs2("div", { children: [
-          !hideIcon && iconPosition === "left" && /* @__PURE__ */ jsx6("div", { className: "min-w-3.5", children: /* @__PURE__ */ jsx6(
-            Icon,
-            {
-              icon: isOpen ? faChevronDown : faChevronRight
-            }
-          ) }),
+        className: twMerge5("flex cursor-pointer items-center gap-2 font-medium text-muted", triggerClassName),
+        children: /* @__PURE__ */ jsxs6("div", { children: [
+          !hideIcon && iconPosition === "left" && /* @__PURE__ */ jsx13("div", { className: "min-w-3.5", children: /* @__PURE__ */ jsx13(Icon, { icon: isOpen ? faChevronDown : faChevronRight }) }),
           title,
-          !hideIcon && iconPosition === "right" && /* @__PURE__ */ jsx6("div", { className: "min-w-3.5", children: /* @__PURE__ */ jsx6(
-            Icon,
-            {
-              icon: isOpen ? faChevronDown : faChevronRight
-            }
-          ) })
+          !hideIcon && iconPosition === "right" && /* @__PURE__ */ jsx13("div", { className: "min-w-3.5", children: /* @__PURE__ */ jsx13(Icon, { icon: isOpen ? faChevronDown : faChevronRight }) })
         ] })
       }
     ),
-    /* @__PURE__ */ jsx6(Content, { className: "overflow-y-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down", children: /* @__PURE__ */ jsx6("div", { className: "flex flex-col gap-2", children }) })
+    /* @__PURE__ */ jsx13(Content3, { className: "overflow-y-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down", children: /* @__PURE__ */ jsx13("div", { className: "flex flex-col gap-2", children }) })
   ] });
 };
 
 // src/core/collapsible-section/CollapsibleSection.tsx
-import { faChevronDown as faChevronDown2 } from "@fortawesome/free-solid-svg-icons";
+import { faChevronDown as faChevronDown2 } from "@fortawesome/sharp-solid-svg-icons";
 import { Slot } from "@radix-ui/react-slot";
-import { twJoin as twJoin4 } from "tailwind-merge";
+import { twJoin as twJoin7 } from "tailwind-merge";
 
 // src/core/utils/useToggle.tsx
-import * as React3 from "react";
+import * as React5 from "react";
 
 // src/core/utils/create-context-helper.tsx
-import * as React2 from "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import * as React4 from "react";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var createContextHelper = (defaultContext) => {
-  const Context = React2.createContext(defaultContext);
+  const Context = React4.createContext(defaultContext);
   const Provider3 = ({ children, ...rest }) => {
-    const value = React2.useMemo(() => rest, Object.values(rest));
-    return /* @__PURE__ */ jsx7(Context.Provider, { value, children });
+    const value = React4.useMemo(() => rest, Object.values(rest));
+    return /* @__PURE__ */ jsx14(Context.Provider, { value, children });
   };
   const useContext7 = () => {
-    const context = React2.useContext(Context);
+    const context = React4.useContext(Context);
     if (context) {
       return context;
     }
@@ -307,7 +552,7 @@ var createContextHelper = (defaultContext) => {
 };
 
 // src/core/utils/useToggle.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var [ToggleProvider, useToggleHook] = createContextHelper({
   state: false,
   // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -320,7 +565,7 @@ var [ToggleProvider, useToggleHook] = createContextHelper({
 var createToggleContextHelper = (defaultState = false) => {
   const Provider3 = ({ children, state: initState }) => {
     const hook = useToggle(initState ?? defaultState);
-    return /* @__PURE__ */ jsx8(ToggleProvider, { ...hook, children });
+    return /* @__PURE__ */ jsx15(ToggleProvider, { ...hook, children });
   };
   Provider3.displayName = "ToggleProvider";
   return [Provider3, useToggleHook];
@@ -328,108 +573,38 @@ var createToggleContextHelper = (defaultState = false) => {
 var [IsVisibleProvider, useIsVisible] = createToggleContextHelper(true);
 var [IsEditingProvider, useIsEditing] = createToggleContextHelper(false);
 var useToggle = (initState) => {
-  const [state, update] = React3.useState(initState ?? false);
-  const toggle = React3.useCallback(() => update((state2) => !state2), []);
+  const [state, update] = React5.useState(initState ?? false);
+  const toggle = React5.useCallback(() => update((state2) => !state2), []);
   return { state, update, toggle };
 };
 
 // src/core/collapsible-section/CollapsibleSection.tsx
-import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
 var ToggleButton = ({ children, ...rest }) => {
   const { state: isVisible, toggle } = useIsVisible();
-  return /* @__PURE__ */ jsx9(Slot, { onClick: toggle, children: /* @__PURE__ */ jsxs3(Button, { variant: "transparent", size: "xs", ...rest, children: [
-    /* @__PURE__ */ jsx9("span", { className: twJoin4("transition-transform", !isVisible && "-rotate-90"), children: /* @__PURE__ */ jsx9(Icon, { icon: faChevronDown2 }) }),
+  return /* @__PURE__ */ jsx16(Slot, { onClick: toggle, children: /* @__PURE__ */ jsxs7(Button, { variant: "transparent", size: "xs", ...rest, children: [
+    /* @__PURE__ */ jsx16("span", { className: twJoin7("transition-transform", !isVisible && "-rotate-90"), children: /* @__PURE__ */ jsx16(Icon, { icon: faChevronDown2 }) }),
     children
   ] }) });
 };
-var Content2 = ({ children }) => {
+var Content4 = ({ children }) => {
   const { state: isVisible } = useIsVisible();
   if (isVisible) return children;
   return null;
 };
 var CollapsibleSection = ({ children, defaultOpen }) => {
-  return /* @__PURE__ */ jsx9(IsVisibleProvider, { state: defaultOpen, children });
+  return /* @__PURE__ */ jsx16(IsVisibleProvider, { state: defaultOpen, children });
 };
 CollapsibleSection.ToggleButton = ToggleButton;
-CollapsibleSection.Content = Content2;
+CollapsibleSection.Content = Content4;
 
 // src/core/copyable/Copyable.tsx
-import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
+import { faCheck, faCopy } from "@fortawesome/sharp-solid-svg-icons";
 import * as RadixTooltip2 from "@radix-ui/react-tooltip";
-import { twJoin as twJoin5 } from "tailwind-merge";
-
-// src/core/tooltip/Tooltip.tsx
-import * as RadixTooltip from "@radix-ui/react-tooltip";
-
-// src/core/utils/useOverflowObserver.tsx
-import * as React4 from "react";
-var useOverflowObserver = () => {
-  const [hasOverflow, setHasOverflow] = React4.useState(false);
-  const elementRef = React4.useRef(null);
-  React4.useEffect(() => {
-    if (elementRef.current == null) return;
-    const resizeObserver = new ResizeObserver(([entry]) => {
-      window.requestAnimationFrame(() => {
-        const element = entry?.target;
-        const hasOverflowWidth = element.offsetWidth < element.scrollWidth;
-        const hasOverflowHeight = element.offsetHeight < element.scrollHeight;
-        const calcHasOverflow = hasOverflowWidth || hasOverflowHeight;
-        if (calcHasOverflow !== hasOverflow) {
-          setHasOverflow(calcHasOverflow);
-        }
-      });
-    });
-    resizeObserver.observe(elementRef.current);
-    return () => resizeObserver.disconnect();
-  }, [hasOverflow]);
-  return { elementRef, hasOverflow };
-};
-
-// src/core/tooltip/Tooltip.tsx
-import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
-var TooltipContent = ({ children, variant = "dark", ...rest }) => {
-  return /* @__PURE__ */ jsx10(RadixTooltip.Portal, { children: /* @__PURE__ */ jsxs4(
-    RadixTooltip.Content,
-    {
-      ...rest,
-      hideWhenDetached: true,
-      sideOffset: 6,
-      className: `z-9000000000 max-w-prose rounded-lg px-5 py-3 text-sm break-words shadow-lg ${variant === "dark" ? "bg-gray-900 text-white" : "bg-white text-gray-600"}`,
-      children: [
-        children,
-        /* @__PURE__ */ jsx10(RadixTooltip.Arrow, { className: variant === "dark" ? "fill-gray-900" : "fill-white", offset: 8 })
-      ]
-    }
-  ) });
-};
-TooltipContent.displayName = RadixTooltip.Content.displayName;
-var OverflowTrigger = ({
-  element,
-  ...rest
-}) => {
-  const { elementRef, hasOverflow } = useOverflowObserver();
-  if (!hasOverflow) {
-    return element(elementRef);
-  }
-  return /* @__PURE__ */ jsx10(RadixTooltip.Trigger, { asChild: true, ...rest, children: element(elementRef) });
-};
-var TooltipTrigger = (props) => /* @__PURE__ */ jsx10(RadixTooltip.Trigger, { asChild: true, ...props });
-var TooltipProvider = (props) => /* @__PURE__ */ jsx10(RadixTooltip.Provider, { disableHoverableContent: true, delayDuration: 0, ...props });
-var TooltipRoot = (props) => /* @__PURE__ */ jsx10(RadixTooltip.Root, { ...props });
-var Tooltip = ({ trigger, content, variant, side, ...rest }) => {
-  return /* @__PURE__ */ jsxs4(Tooltip.Root, { ...rest, children: [
-    /* @__PURE__ */ jsx10(Tooltip.Trigger, { children: trigger }),
-    content && /* @__PURE__ */ jsx10(Tooltip.Content, { side, variant, children: content })
-  ] });
-};
-Tooltip.Provider = TooltipProvider;
-Tooltip.Root = TooltipRoot;
-Tooltip.Trigger = TooltipTrigger;
-Tooltip.OverflowTrigger = OverflowTrigger;
-Tooltip.Content = TooltipContent;
+import { twJoin as twJoin8 } from "tailwind-merge";
 
 // src/core/copyable/use-copyable.ts
-import * as React5 from "react";
+import * as React6 from "react";
 var waitMs = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 var oldSchoolCopy = (text) => {
   const tempTextArea = document.createElement("textarea");
@@ -451,8 +626,8 @@ var copyToClipboard = async (value) => {
   }
 };
 var useCopyable = () => {
-  const [state, setState] = React5.useState("idle");
-  const copy = React5.useCallback(async (value, onClick) => {
+  const [state, setState] = React6.useState("idle");
+  const copy = React6.useCallback(async (value, onClick) => {
     if (!value) {
       return;
     }
@@ -467,49 +642,45 @@ var useCopyable = () => {
 };
 
 // src/core/copyable/Copyable.tsx
-import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
-var Copyable = ({ children, value, tooltip, onClick, asChild }) => {
+import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
+var Copyable = ({ children, value, tooltip, onClick, asChild, className }) => {
   const { state, copy } = useCopyable();
   const handleCopy = async (e) => {
     e.stopPropagation();
     await copy(value, onClick);
   };
   if (!value && tooltip) {
-    return /* @__PURE__ */ jsx11(Tooltip, { trigger: children, content: tooltip });
+    return /* @__PURE__ */ jsx17(Tooltip, { trigger: children, content: tooltip });
   }
   if (!value) {
     return children;
   }
-  return /* @__PURE__ */ jsxs5(RadixTooltip2.Root, { open: state === "copied" ? true : void 0, delayDuration: 150, children: [
-    /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsxs8(RadixTooltip2.Root, { open: state === "copied" ? true : void 0, delayDuration: 150, children: [
+    /* @__PURE__ */ jsx17(
       RadixTooltip2.Trigger,
       {
         asChild: true,
         onClick: handleCopy,
-        className: twJoin5(
+        className: twJoin8(
           "w-fit cursor-pointer rounded-xs",
           state !== "copied" && "hover:bg-[#E8E8EB] hover:shadow-[0_0_0_2px_#E8E8EB] active:opacity-60",
-          state === "copying" && "opacity-60"
+          state === "copying" && "opacity-60",
+          className
         ),
-        children: asChild ? children : /* @__PURE__ */ jsx11("span", { children })
+        children: asChild ? children : /* @__PURE__ */ jsx17("span", { children })
       }
     ),
-    tooltip && state === "idle" && /* @__PURE__ */ jsx11(TooltipContent, { side: "bottom", children: tooltip }),
-    /* @__PURE__ */ jsx11(RadixTooltip2.Portal, { children: /* @__PURE__ */ jsx11(
+    tooltip && state === "idle" && /* @__PURE__ */ jsx17(TooltipContent, { side: "bottom", children: tooltip }),
+    /* @__PURE__ */ jsx17(RadixTooltip2.Portal, { children: /* @__PURE__ */ jsx17(
       RadixTooltip2.Content,
       {
         sideOffset: 6,
         side: "right",
-        className: twJoin5(
+        className: twJoin8(
           "z-101 grid h-6 w-6 place-items-center rounded-sm bg-white shadow-lg",
           state !== "copying" && "animate-fade-in"
         ),
-        children: /* @__PURE__ */ jsx11("div", { className: state === "copied" ? "text-green-500" : "text-gray-500", children: /* @__PURE__ */ jsx11(
-          Icon,
-          {
-            icon: state === "copied" ? faCheck : faCopy
-          }
-        ) })
+        children: /* @__PURE__ */ jsx17("div", { className: state === "copied" ? "text-green-500" : "text-muted", children: /* @__PURE__ */ jsx17(Icon, { icon: state === "copied" ? faCheck : faCopy }) })
       }
     ) })
   ] });
@@ -520,11 +691,11 @@ import { useCallback as useCallback4 } from "react";
 import DatePickerLib from "react-datepicker";
 
 // src/core/date-picker/DatePickerHeader.tsx
-import { faChevronLeft, faChevronRight as faChevronRight2 } from "@fortawesome/free-solid-svg-icons";
+import { faChevronLeft, faChevronRight as faChevronRight2 } from "@fortawesome/sharp-solid-svg-icons";
 import { getMonth, getYear } from "date-fns";
 import { range } from "lodash-es";
-import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
-var years = range(1920, getYear(/* @__PURE__ */ new Date()) + 1, 1).sort((a, b) => b - a);
+import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
+var years = range(1920, getYear(/* @__PURE__ */ new Date()) + 6, 1).sort((a, b) => b - a);
 var months = [
   "January",
   "February",
@@ -549,9 +720,9 @@ var DatePickerHeader = ({
   nextMonthButtonDisabled
 }) => {
   const datePickerContainer = document.querySelector(".react-datepicker") ?? void 0;
-  return /* @__PURE__ */ jsx12("div", { className: "space-y-2 p-2", children: /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
-    /* @__PURE__ */ jsx12(Button, { onClick: decreaseMonth, disabled: prevMonthButtonDisabled, variant: "transparent", size: "sm", children: /* @__PURE__ */ jsx12(Icon, { icon: faChevronLeft }) }),
-    /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx18("div", { className: "space-y-2 p-2", children: /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx18(Button, { onClick: decreaseMonth, disabled: prevMonthButtonDisabled, variant: "transparent", size: "sm", children: /* @__PURE__ */ jsx18(Icon, { icon: faChevronLeft }) }),
+    /* @__PURE__ */ jsx18(
       Select,
       {
         size: "sm",
@@ -563,7 +734,7 @@ var DatePickerHeader = ({
         items: months.map((month) => ({ label: month, value: month }))
       }
     ),
-    /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx18(
       Select,
       {
         size: "sm",
@@ -575,35 +746,31 @@ var DatePickerHeader = ({
         items: years.map((year) => ({ label: year.toString(), value: year.toString() }))
       }
     ),
-    /* @__PURE__ */ jsx12(Button, { onClick: increaseMonth, disabled: nextMonthButtonDisabled, variant: "transparent", size: "sm", children: /* @__PURE__ */ jsx12(Icon, { icon: faChevronRight2 }) })
+    /* @__PURE__ */ jsx18(Button, { onClick: increaseMonth, disabled: nextMonthButtonDisabled, variant: "transparent", size: "sm", children: /* @__PURE__ */ jsx18(Icon, { icon: faChevronRight2 }) })
   ] }) });
 };
 
 // src/core/date-picker/shared.tsx
-import { faCalendar, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { faCalendar, faXmark } from "@fortawesome/sharp-solid-svg-icons";
 
 // src/core/date-picker/DatePickerInput.tsx
-import { forwardRef as forwardRef3 } from "react";
-import { twJoin as twJoin6, twMerge as twMerge3 } from "tailwind-merge";
-
-// src/core/types.ts
-var RING_COLOR_CLASSNAME = "focus:ring-2 focus:ring-indigo-200";
-
-// src/core/date-picker/DatePickerInput.tsx
-import { Fragment, jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
-var DatePickerInput = forwardRef3(
+import { forwardRef as forwardRef4 } from "react";
+import { twJoin as twJoin9, twMerge as twMerge6 } from "tailwind-merge";
+import { Fragment, jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
+var DatePickerInput = forwardRef4(
   ({ inputProps, errorNode, hasError, rightAction, disabled, className, ...rest }, ref) => {
-    const ringClassName = disabled ? "focus:outline-hidden focus:ring-0" : hasError ? "focus:outline-hidden focus:ring-red-500 focus:border-red-500" : RING_COLOR_CLASSNAME;
-    return /* @__PURE__ */ jsxs7(Fragment, { children: [
-      /* @__PURE__ */ jsxs7("div", { className: "relative block w-full rounded-md shadow-sm", children: [
-        /* @__PURE__ */ jsx13(
+    const ringClassName = disabled ? "focus:outline-hidden focus:ring-0" : hasError ? "focus:outline-hidden focus:ring-red-500 focus:border-red-500" : "focus:ring-2 focus:ring-indigo-200";
+    return /* @__PURE__ */ jsxs10(Fragment, { children: [
+      /* @__PURE__ */ jsxs10("div", { className: "relative block w-full rounded-md shadow-sm", children: [
+        /* @__PURE__ */ jsx19(
           "input",
           {
             type: "text",
-            className: twMerge3(
-              "block w-full rounded-md disabled:bg-gray-100",
+            ...inputProps,
+            className: twMerge6(
+              "block w-full rounded-md disabled:bg-surface-neutral",
               rightAction && "pr-8",
-              hasError ? "border-red-300 text-red-900 placeholder-red-300" : "border-gray-200",
+              hasError ? "border-red-300 text-red-900 placeholder-red-300" : "border-surface-neutral",
               ringClassName,
               className,
               inputProps?.className
@@ -611,19 +778,18 @@ var DatePickerInput = forwardRef3(
             ref,
             disabled,
             autoComplete: "off",
-            ...rest,
-            ...inputProps
+            ...rest
           }
         ),
-        rightAction && /* @__PURE__ */ jsx13("div", { className: twJoin6("absolute inset-y-0 right-0 flex items-center pr-3", disabled && "cursor-auto"), children: rightAction })
+        rightAction && /* @__PURE__ */ jsx19("div", { className: twJoin9("absolute inset-y-0 right-0 flex items-center pr-3", disabled && "cursor-auto"), children: rightAction })
       ] }),
-      hasError != null && errorNode != null && /* @__PURE__ */ jsx13("p", { className: "mt-2 max-h-[100px] overflow-auto text-sm text-red-600", children: errorNode })
+      hasError != null && errorNode != null && /* @__PURE__ */ jsx19("p", { className: "mt-2 max-h-[100px] overflow-auto text-sm text-danger", children: errorNode })
     ] });
   }
 );
 
 // src/core/date-picker/shared.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var customInputFieldFactory = ({
   inputProps,
   errorNode,
@@ -631,13 +797,13 @@ var customInputFieldFactory = ({
   isEmpty,
   disabled,
   onClearInput
-}) => /* @__PURE__ */ jsx14(
+}) => /* @__PURE__ */ jsx20(
   DatePickerInput,
   {
     inputProps,
     errorNode,
     hasError,
-    rightAction: isEmpty ? /* @__PURE__ */ jsx14("span", { className: "text-gray-300", children: /* @__PURE__ */ jsx14(Icon, { icon: faCalendar }) }) : !disabled ? /* @__PURE__ */ jsx14(Button, { size: "xs", onClick: onClearInput, variant: "transparent", children: /* @__PURE__ */ jsx14("span", { className: "text-gray-500", children: /* @__PURE__ */ jsx14(Icon, { icon: faXmark }) }) }) : null
+    rightAction: isEmpty ? /* @__PURE__ */ jsx20("span", { className: "text-disabled", children: /* @__PURE__ */ jsx20(Icon, { icon: faCalendar }) }) : !disabled ? /* @__PURE__ */ jsx20(Button, { size: "xs", onClick: onClearInput, variant: "transparent", children: /* @__PURE__ */ jsx20("span", { className: "text-muted", children: /* @__PURE__ */ jsx20(Icon, { icon: faXmark }) }) }) : null
   }
 );
 
@@ -645,11 +811,11 @@ var customInputFieldFactory = ({
 import { useCallback as useCallback3, useState as useState5 } from "react";
 
 // src/core/input/InputBox.tsx
-import * as React6 from "react";
-import { forwardRef as forwardRef5 } from "react";
+import * as React7 from "react";
+import { forwardRef as forwardRef6 } from "react";
 
 // src/core/input/inputBoxStyles.ts
-import { twJoin as twJoin7 } from "tailwind-merge";
+import { twJoin as twJoin10 } from "tailwind-merge";
 var sizeStyles2 = {
   sm: "h-sm gap-1 px-2 text-sm [&>input]:text-sm",
   md: "h-md gap-2 px-2.5 text-base [&>input]:text-base",
@@ -659,27 +825,35 @@ var defaultVariantStyles = "rounded-md border bg-white focus-within:outline focu
 var transparentVariantStyles = "border-none bg-transparent focus-within:outline-hidden focus:outline-hidden";
 var variantStyles = {
   default: {
-    default: `${defaultVariantStyles} disabled:bg-gray-100 disabled:text-gray-400 border-gray-200 focus-within:border-indigo-400 focus-within:outline-indigo-200 focus:border-indigo-400 focus:outline-indigo-200`,
+    default: `${defaultVariantStyles} disabled:bg-surface-neutral disabled:text-placeholder border-surface-neutral focus-within:border-indigo-400 focus-within:outline-indigo-200 focus:border-indigo-400 focus:outline-indigo-200`,
     error: `${defaultVariantStyles} border-red-300 focus-within:border-red-300 focus-within:outline-red-200 focus:border-red-300 focus:outline-red-200`,
-    warning: `${defaultVariantStyles} border-yellow-300 focus-within:border-yellow-300 focus-within:outline-yellow-200 focus:border-yellow-300 focus:outline-yellow-200`
+    warning: `${defaultVariantStyles} border-yellow-300 focus-within:border-yellow-300 focus-within:outline-yellow-200 focus:border-yellow-300 focus:outline-yellow-200`,
+    success: `${defaultVariantStyles} border-green-300 focus-within:border-green-300 focus-within:outline-green-200 focus:border-green-300 focus:outline-green-200`
   },
   transparent: {
-    default: `${transparentVariantStyles} disabled:bg-gray-100 disabled:text-gray-400`,
+    default: `${transparentVariantStyles} disabled:bg-surface-neutral disabled:text-placeholder`,
     error: transparentVariantStyles,
-    warning: transparentVariantStyles
+    warning: transparentVariantStyles,
+    success: transparentVariantStyles
   }
 };
-var inputBoxStyles = ({ size = "md", variant = "default", hasError, hasWarning }) => twJoin7(
-  "flex w-full items-center focus-within:ring-0 focus:ring-0 has-disabled:bg-gray-100 has-disabled:text-gray-400",
+var inputBoxStyles = ({
+  size = "md",
+  variant = "default",
+  hasError,
+  hasWarning,
+  hasSuccess
+}) => twJoin10(
+  "flex w-full items-center focus-within:ring-0 focus:ring-0 has-disabled:bg-surface-neutral has-disabled:text-placeholder",
   sizeStyles2[size],
-  variantStyles[variant][hasError ? "error" : hasWarning ? "warning" : "default"]
+  variantStyles[variant][hasError ? "error" : hasWarning ? "warning" : hasSuccess ? "success" : "default"]
 );
-var inputStyles = "w-full text-gray-800 placeholder:text-gray-400 disabled:text-gray-400";
+var inputStyles = "w-full text-gray-800 placeholder:text-placeholder disabled:text-placeholder";
 
 // src/core/input/InputBox.tsx
-import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
 var NestedInputImpl = (props, ref) => {
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx21(
     "input",
     {
       type: "text",
@@ -690,42 +864,49 @@ var NestedInputImpl = (props, ref) => {
     }
   );
 };
-var NestedInput = forwardRef5(NestedInputImpl);
+var NestedInput = forwardRef6(NestedInputImpl);
 var InputBoxImpl = ({ children, ...style }, ref) => (
   // Styling text to propagate stateful text color inheritance for the children of InputBox
   // (think Icons, other non-input elements). Avoids style collisions when Input is used solo.
-  /* @__PURE__ */ jsx15("label", { ref, className: `${style.hasError ? "text-red-300" : "text-gray-400"} ${inputBoxStyles(style)}`, children })
+  /* @__PURE__ */ jsx21(
+    "label",
+    {
+      ref,
+      className: `${style.hasError ? "text-red-300" : style.hasSuccess ? "text-green-300" : "text-placeholder"} ${inputBoxStyles(style)}`,
+      children
+    }
+  )
 );
-var InputBox = React6.forwardRef(InputBoxImpl);
+var InputBox = React7.forwardRef(InputBoxImpl);
 InputBox.Input = NestedInput;
-var InputImpl = ({ size, variant, hasError, hasWarning, prefix, ...rest }, ref) => {
-  return prefix ? /* @__PURE__ */ jsxs8("div", { className: "flex flex-row items-center", children: [
-    /* @__PURE__ */ jsx15("label", { className: "p-1 text-gray-500", children: prefix }),
-    /* @__PURE__ */ jsx15(
+var InputImpl = ({ size, variant, hasError, hasWarning, hasSuccess, prefix, ...rest }, ref) => {
+  return prefix ? /* @__PURE__ */ jsxs11("div", { className: "flex flex-row items-center", children: [
+    /* @__PURE__ */ jsx21("label", { className: "p-1 text-muted", children: prefix }),
+    /* @__PURE__ */ jsx21(
       "input",
       {
         type: "text",
-        className: `${inputStyles} ${inputBoxStyles({ size, variant, hasError, hasWarning })}`,
+        className: `${inputStyles} ${inputBoxStyles({ size, variant, hasError, hasWarning, hasSuccess })}`,
         autoComplete: "off",
         ...rest,
         ref
       }
     )
-  ] }) : /* @__PURE__ */ jsx15(
+  ] }) : /* @__PURE__ */ jsx21(
     "input",
     {
       type: "text",
-      className: `${inputStyles} ${inputBoxStyles({ size, variant, hasError, hasWarning })}`,
+      className: `${inputStyles} ${inputBoxStyles({ size, variant, hasError, hasWarning, hasSuccess })}`,
       autoComplete: "off",
       ...rest,
       ref
     }
   );
 };
-var Input = forwardRef5(InputImpl);
+var Input = forwardRef6(InputImpl);
 
 // src/core/date-picker/TimeInput.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var TimeInput = ({
   value: inputValue,
   onChange
@@ -739,7 +920,7 @@ var TimeInput = ({
       handleUpdateTime();
     }
   };
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx22(
     Input,
     {
       value,
@@ -753,7 +934,7 @@ var TimeInput = ({
 };
 
 // src/core/date-picker/DatePickerRange.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var DatePickerRange = ({
   value = [void 0, void 0],
   errorNode,
@@ -775,11 +956,11 @@ var DatePickerRange = ({
     },
     [onChange]
   );
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx23(
     DatePickerLib,
     {
       ...props,
-      className: "placeholder:text-gray-400",
+      className: "placeholder:text-placeholder",
       selected: value[0],
       onChange: handleChange,
       startDate: value[0],
@@ -796,7 +977,7 @@ var DatePickerRange = ({
         hasError,
         onClearInput: clearDatePicker
       }) : void 0,
-      customTimeInput: /* @__PURE__ */ jsx17(TimeInput, {}),
+      customTimeInput: /* @__PURE__ */ jsx23(TimeInput, {}),
       renderCustomHeader: DatePickerHeader
     }
   );
@@ -805,7 +986,7 @@ var DatePickerRange = ({
 // src/core/date-picker/DatePickerSingle.tsx
 import { useCallback as useCallback5 } from "react";
 import DatePickerLib2 from "react-datepicker";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var DatePickerSingle = ({
   value,
   errorNode,
@@ -825,11 +1006,11 @@ var DatePickerSingle = ({
     },
     [onChange]
   );
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx24(
     DatePickerLib2,
     {
       ...props,
-      className: "placeholder:text-gray-400",
+      className: "placeholder:text-placeholder",
       preventOpenOnFocus,
       selected: value,
       onChange: handleChange,
@@ -844,7 +1025,7 @@ var DatePickerSingle = ({
         hasError,
         onClearInput: clearDatePicker
       }) : void 0,
-      customTimeInput: /* @__PURE__ */ jsx18(TimeInput, {}),
+      customTimeInput: /* @__PURE__ */ jsx24(TimeInput, {}),
       renderCustomHeader: DatePickerHeader,
       popperPlacement: position
     }
@@ -852,62 +1033,44 @@ var DatePickerSingle = ({
 };
 
 // src/core/date-picker/DatePicker.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
-var DatePicker = (props) => props.range ? /* @__PURE__ */ jsx19(DatePickerRange, { ...props }) : /* @__PURE__ */ jsx19(DatePickerSingle, { ...props });
+import { jsx as jsx25 } from "react/jsx-runtime";
+var DatePicker = (props) => props.range ? /* @__PURE__ */ jsx25(DatePickerRange, { ...props }) : /* @__PURE__ */ jsx25(DatePickerSingle, { ...props });
 
 // src/core/divider/Divider.tsx
-import { twMerge as twMerge4 } from "tailwind-merge";
-import { jsx as jsx20 } from "react/jsx-runtime";
-var Divider = ({ className }) => /* @__PURE__ */ jsx20("div", { className: twMerge4("h-[1px] w-full border-b border-gray-200", className) });
+import { twMerge as twMerge7 } from "tailwind-merge";
+import { jsx as jsx26 } from "react/jsx-runtime";
+var Divider = ({ className }) => /* @__PURE__ */ jsx26("div", { className: twMerge7("h-[1px] w-full border-b border-surface-neutral", className) });
 
 // src/core/error-text/ErrorText.tsx
-import { forwardRef as forwardRef6 } from "react";
-import { twJoin as twJoin8 } from "tailwind-merge";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { forwardRef as forwardRef7 } from "react";
+import { twJoin as twJoin11 } from "tailwind-merge";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var ErrorTextImpl = ({ className, ...props }, ref) => {
   if (!props.children) {
     return null;
   }
-  return /* @__PURE__ */ jsx21("p", { ...props, ref, className: twJoin8("text-red-600", className) });
+  return /* @__PURE__ */ jsx27("p", { ...props, ref, className: twJoin11("text-danger", className) });
 };
-var ErrorText = forwardRef6(ErrorTextImpl);
+var ErrorText = forwardRef7(ErrorTextImpl);
 
 // src/core/form/index.ts
-import { FormProvider, useFieldArray, useFormState as useFormState2, useWatch, useController as useController2 } from "react-hook-form";
+import { FormProvider, useFieldArray, useFormContext as useFormContext2, useFormState as useFormState2, useWatch, useController as useController2 } from "react-hook-form";
 
 // src/core/form/components/ControlledField.tsx
 import { createContext as createContext2, useContext as useContext2, useMemo as useMemo2 } from "react";
 
 // src/core/form/hooks.ts
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as React8 from "react";
-import { useController, useForm as _useForm, useFormContext as _useFormContext, useFormState } from "react-hook-form";
+import * as React9 from "react";
+import { useController, useForm as _useForm, useFormContext, useFormState } from "react-hook-form";
 var useForm = (schema, options) => {
-  const methods = _useForm(
-    options != null ? { resolver: zodResolver(schema), ...options } : { resolver: zodResolver(schema) }
-  );
-  const { setError } = methods;
-  const setRootError = React8.useCallback(
-    (message) => {
-      setError("root", { type: "root", message });
-    },
-    [setError]
-  );
-  return { ...methods, setRootError };
+  return _useForm({
+    ...options,
+    // Type assertion needed here for RHF internals
+    resolver: zodResolver(schema)
+  });
 };
 useForm.displayName = "useForm";
-var useFormContext = () => {
-  const methods = _useFormContext();
-  const { setError } = methods;
-  const setRootError = React8.useCallback(
-    (message) => {
-      setError("root", { type: "root", message });
-    },
-    [setError]
-  );
-  return { ...methods, setRootError };
-};
-useFormContext.displayName = "useFormContext";
 var useControlledFormField = ({ name: fieldName }) => {
   const { field, fieldState } = useController({ name: fieldName });
   const { error } = fieldState;
@@ -917,7 +1080,7 @@ useControlledFormField.displayName = "useControlledFormField";
 var useUncontrolledFormField = ({ name: fieldName, ...changeHandlers }) => {
   const { register, getFieldState } = useFormContext();
   const formState = useFormState();
-  const memoizedRegister = React8.useCallback(() => {
+  const memoizedRegister = React9.useCallback(() => {
     if (!changeHandlers) {
       return register(fieldName);
     }
@@ -944,12 +1107,12 @@ var useUncontrolledFormField = ({ name: fieldName, ...changeHandlers }) => {
 useUncontrolledFormField.displayName = "useUncontrolledFormField";
 
 // src/core/form/components/ControlledField.tsx
-import { Fragment as Fragment2, jsx as jsx22 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx28 } from "react/jsx-runtime";
 var ControlledFieldContext = createContext2(void 0);
 var ControlledFieldProvider = ({ children, ...restField }) => {
   const field = useControlledFormField(restField);
   const value = useMemo2(() => field, [field]);
-  return /* @__PURE__ */ jsx22(ControlledFieldContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx28(ControlledFieldContext.Provider, { value, children });
 };
 ControlledFieldProvider.displayName = "ControlledFieldProvider";
 var useControlledField = () => {
@@ -961,13 +1124,13 @@ var useControlledField = () => {
 };
 useControlledField.displayName = "useControlledField";
 var ControlledField = ({ render, ...restField }) => {
-  return /* @__PURE__ */ jsx22(Fragment2, { children: render(useControlledFormField(restField)) });
+  return /* @__PURE__ */ jsx28(Fragment2, { children: render(useControlledFormField(restField)) });
 };
 ControlledField.displayName = "ControlledField";
 
 // src/core/form/components/UncontrolledField.tsx
 import { createContext as createContext3, useContext as useContext3, useMemo as useMemo3 } from "react";
-import { Fragment as Fragment3, jsx as jsx23 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx29 } from "react/jsx-runtime";
 var UncontrolledFieldContext = createContext3(void 0);
 var UncontrolledFieldProvider = ({
   children,
@@ -975,7 +1138,7 @@ var UncontrolledFieldProvider = ({
 }) => {
   const field = useUncontrolledFormField(restField);
   const value = useMemo3(() => field, [field]);
-  return /* @__PURE__ */ jsx23(UncontrolledFieldContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx29(UncontrolledFieldContext.Provider, { value, children });
 };
 UncontrolledFieldProvider.displayName = "UncontrolledFieldProvider";
 var useUncontrolledField = () => {
@@ -987,7 +1150,7 @@ var useUncontrolledField = () => {
 };
 useUncontrolledField.displayName = "useUncontrolledField";
 var UncontrolledField = ({ render, ...restField }) => {
-  return /* @__PURE__ */ jsx23(Fragment3, { children: render(useUncontrolledFormField(restField)) });
+  return /* @__PURE__ */ jsx29(Fragment3, { children: render(useUncontrolledFormField(restField)) });
 };
 UncontrolledField.displayName = "UncontrolledField";
 
@@ -1001,58 +1164,58 @@ var getFieldError = (errors, name) => {
 };
 
 // src/core/form/components/form-item/index.tsx
-import { forwardRef as forwardRef11 } from "react";
+import { forwardRef as forwardRef12 } from "react";
 
 // src/core/form/components/form-item/InlineFormItem.tsx
-import { forwardRef as forwardRef7 } from "react";
+import { forwardRef as forwardRef8 } from "react";
 
 // src/core/form/components/form-item/FieldErrorTooltip.tsx
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var FieldErrorTooltip = ({ error, children }) => {
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx30(
     Tooltip,
     {
       variant: "light",
       open: error?.message ? void 0 : false,
       trigger: children,
-      content: /* @__PURE__ */ jsx24(ErrorText, { children: error?.message })
+      content: /* @__PURE__ */ jsx30(ErrorText, { children: error?.message })
     }
   );
 };
 
 // src/core/form/components/form-item/InlineFormItem.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
-var InlineFormItem = forwardRef7(({ error, render }, ref) => {
-  return /* @__PURE__ */ jsx25(FieldErrorTooltip, { error, children: /* @__PURE__ */ jsx25("span", { ref, children: render }) });
+import { jsx as jsx31 } from "react/jsx-runtime";
+var InlineFormItem = forwardRef8(({ error, render }, ref) => {
+  return /* @__PURE__ */ jsx31(FieldErrorTooltip, { error, children: /* @__PURE__ */ jsx31("span", { ref, children: render }) });
 });
 
 // src/core/form/components/form-item/NoneFormItem.tsx
-import { forwardRef as forwardRef8 } from "react";
+import { forwardRef as forwardRef9 } from "react";
 
 // src/core/form/components/form-item/FieldDescription.tsx
-import { twJoin as twJoin9 } from "tailwind-merge";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { twJoin as twJoin12 } from "tailwind-merge";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var FieldDescription = ({ styles, children }) => {
   if (children == null) {
     return null;
   }
-  return /* @__PURE__ */ jsx26("p", { className: twJoin9("text-sm text-gray-500", styles), children });
+  return /* @__PURE__ */ jsx32("p", { className: twJoin12("text-sm text-muted", styles), children });
 };
 
 // src/core/form/components/form-item/FieldErrorMessage.tsx
-import { faCircleExclamation } from "@fortawesome/free-solid-svg-icons";
+import { faExclamationCircle } from "@fortawesome/sharp-solid-svg-icons";
 
 // src/core/overflow-tooltip/OverflowTooltip.tsx
-import { jsx as jsx27, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs12 } from "react/jsx-runtime";
 var OverflowTooltip = ({ element, tooltip, side, variant, ...props }) => {
-  return /* @__PURE__ */ jsxs9(Tooltip.Root, { ...props, children: [
-    /* @__PURE__ */ jsx27(Tooltip.OverflowTrigger, { element }),
-    /* @__PURE__ */ jsx27(Tooltip.Content, { side, variant, children: tooltip })
+  return /* @__PURE__ */ jsxs12(Tooltip.Root, { ...props, children: [
+    /* @__PURE__ */ jsx33(Tooltip.OverflowTrigger, { element }),
+    /* @__PURE__ */ jsx33(Tooltip.Content, { side, variant, children: tooltip })
   ] });
 };
 
 // src/core/form/components/form-item/FieldErrorMessage.tsx
-import { jsx as jsx28, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs13 } from "react/jsx-runtime";
 function handleErrorOrErrorArrayMessage(error) {
   if (!Array.isArray(error)) {
     return error.message;
@@ -1067,48 +1230,48 @@ var FieldErrorMessage = ({ error }) => {
     return null;
   }
   const message = handleErrorOrErrorArrayMessage(error);
-  return /* @__PURE__ */ jsxs10("div", { className: "flex h-4.5 items-center gap-x-1 pt-0.5 text-sm", children: [
-    /* @__PURE__ */ jsx28("span", { className: "text-red-400", children: /* @__PURE__ */ jsx28(Icon, { icon: faCircleExclamation }) }),
-    /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsxs13("div", { className: "flex h-4.5 items-center gap-x-1 pt-0.5 text-sm", children: [
+    /* @__PURE__ */ jsx34("span", { className: "text-red-400", children: /* @__PURE__ */ jsx34(Icon, { icon: faExclamationCircle }) }),
+    /* @__PURE__ */ jsx34(
       OverflowTooltip,
       {
         tooltip: message,
-        element: (ref) => /* @__PURE__ */ jsx28(ErrorText, { ref, className: "line-clamp-1 cursor-default break-all", children: message })
+        element: (ref) => /* @__PURE__ */ jsx34(ErrorText, { ref, className: "line-clamp-1 cursor-default break-all", children: message })
       }
     )
   ] });
 };
 
 // src/core/form/components/form-item/FieldLabelWithTooltip.tsx
-import { faCircleQuestion } from "@fortawesome/free-solid-svg-icons";
-import { twJoin as twJoin11 } from "tailwind-merge";
+import { faQuestionCircle } from "@fortawesome/sharp-solid-svg-icons";
+import { twJoin as twJoin14 } from "tailwind-merge";
 
 // src/core/form/components/form-item/FieldLabel.tsx
-import { twJoin as twJoin10 } from "tailwind-merge";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { twJoin as twJoin13 } from "tailwind-merge";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var FieldLabel = ({ styles, htmlFor, children }) => {
   if (children == null) {
     return null;
   }
-  return /* @__PURE__ */ jsx29("label", { htmlFor, className: twJoin10("block text-sm font-normal text-gray-500", styles), children });
+  return /* @__PURE__ */ jsx35(Text, { as: "label", htmlFor, variant: "body-2", className: twJoin13("block text-muted", styles), children });
 };
 
 // src/core/form/components/form-item/FieldLabelWithTooltip.tsx
-import { jsx as jsx30, jsxs as jsxs11 } from "react/jsx-runtime";
-var FieldLabelWithTooltip = ({ styles, label, options }) => {
+import { jsx as jsx36, jsxs as jsxs14 } from "react/jsx-runtime";
+var FieldLabelWithTooltip = ({ styles, htmlFor, label, options }) => {
   if (label == null) {
     return null;
   }
-  return /* @__PURE__ */ jsxs11(FieldLabel, { styles: twJoin11("space-x-1", styles), children: [
-    /* @__PURE__ */ jsx30("span", { children: label }),
-    options?.optionalLabel && /* @__PURE__ */ jsx30("span", { className: "text-gray-400", children: "(Optional)" }),
-    options?.tooltip && /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsxs14(FieldLabel, { htmlFor, styles: twJoin14("space-x-1", styles), children: [
+    /* @__PURE__ */ jsx36("span", { children: label }),
+    options?.optionalLabel && /* @__PURE__ */ jsx36("span", { className: "text-placeholder", children: "(Optional)" }),
+    options?.tooltip && /* @__PURE__ */ jsx36(
       Tooltip,
       {
         content: options?.tooltip,
-        trigger: /* @__PURE__ */ jsxs11("span", { className: "inline-flex items-baseline space-x-1", children: [
-          /* @__PURE__ */ jsx30("span", { className: "leading-none", children: options.tooltipIcon ? options.tooltipIcon : /* @__PURE__ */ jsx30("span", { className: "text-gray-500", children: /* @__PURE__ */ jsx30(Icon, { icon: faCircleQuestion }) }) }),
-          options?.tooltipLabel && /* @__PURE__ */ jsx30("span", { className: "font-normal text-gray-500", children: options?.tooltipLabel })
+        trigger: /* @__PURE__ */ jsxs14("span", { className: "inline-flex items-baseline space-x-1", children: [
+          /* @__PURE__ */ jsx36("span", { className: "leading-none", children: options.tooltipIcon ? options.tooltipIcon : /* @__PURE__ */ jsx36("span", { className: "text-muted", children: /* @__PURE__ */ jsx36(Icon, { icon: faQuestionCircle }) }) }),
+          options?.tooltipLabel && /* @__PURE__ */ jsx36("span", { className: "font-normal text-muted", children: options?.tooltipLabel })
         ] })
       }
     ),
@@ -1117,78 +1280,79 @@ var FieldLabelWithTooltip = ({ styles, label, options }) => {
 };
 
 // src/core/form/components/form-item/NoneFormItem.tsx
-import { Fragment as Fragment4, jsx as jsx31, jsxs as jsxs12 } from "react/jsx-runtime";
-var NoneFormItemImpl = ({ label, options, render, error }, ref) => /* @__PURE__ */ jsxs12(Fragment4, { children: [
-  /* @__PURE__ */ jsxs12("div", { children: [
-    /* @__PURE__ */ jsx31(FieldLabelWithTooltip, { label, options }),
-    /* @__PURE__ */ jsx31(FieldDescription, { styles: "pt-0.5", children: options?.description })
+import { Fragment as Fragment4, jsx as jsx37, jsxs as jsxs15 } from "react/jsx-runtime";
+var NoneFormItemImpl = ({ htmlFor, label, options, render, error }, ref) => /* @__PURE__ */ jsxs15(Fragment4, { children: [
+  /* @__PURE__ */ jsxs15("div", { children: [
+    /* @__PURE__ */ jsx37(FieldLabelWithTooltip, { htmlFor, label, options }),
+    /* @__PURE__ */ jsx37(FieldDescription, { styles: "pt-0.5", children: options?.description })
   ] }),
-  /* @__PURE__ */ jsxs12("div", { ref, children: [
+  /* @__PURE__ */ jsxs15("div", { ref, children: [
     render,
-    /* @__PURE__ */ jsx31(FieldErrorMessage, { error }),
+    /* @__PURE__ */ jsx37(FieldErrorMessage, { error }),
     options?.bottomSlot
   ] })
 ] });
-var NoneFormItem = forwardRef8(NoneFormItemImpl);
+var NoneFormItem = forwardRef9(NoneFormItemImpl);
 
 // src/core/form/components/form-item/SideBySideFormItem.tsx
-import { forwardRef as forwardRef9 } from "react";
-import { twJoin as twJoin12 } from "tailwind-merge";
-import { jsx as jsx32, jsxs as jsxs13 } from "react/jsx-runtime";
-var SideBySideFormItem = forwardRef9(
-  ({ styles, label, options, render, error }, ref) => /* @__PURE__ */ jsxs13("div", { className: twJoin12("grid grid-cols-[minmax(0,2fr)_minmax(0,3fr)] gap-x-1", styles), ref, children: [
-    /* @__PURE__ */ jsxs13("div", { className: "pt-2.5", children: [
-      /* @__PURE__ */ jsx32(FieldLabelWithTooltip, { label, options }),
-      /* @__PURE__ */ jsx32(FieldDescription, { styles: "pt-0.5", children: options?.description })
+import { forwardRef as forwardRef10 } from "react";
+import { twJoin as twJoin15 } from "tailwind-merge";
+import { jsx as jsx38, jsxs as jsxs16 } from "react/jsx-runtime";
+var SideBySideFormItem = forwardRef10(
+  ({ styles, htmlFor, label, options, render, error }, ref) => /* @__PURE__ */ jsxs16("div", { className: twJoin15("grid grid-cols-[minmax(0,2fr)_minmax(0,3fr)] gap-x-1", styles), ref, children: [
+    /* @__PURE__ */ jsxs16("div", { className: "pt-2.5", children: [
+      /* @__PURE__ */ jsx38(FieldLabelWithTooltip, { htmlFor, label, options }),
+      /* @__PURE__ */ jsx38(FieldDescription, { styles: "pt-0.5", children: options?.description })
     ] }),
-    /* @__PURE__ */ jsxs13("div", { children: [
+    /* @__PURE__ */ jsxs16("div", { children: [
       render,
-      /* @__PURE__ */ jsx32(FieldErrorMessage, { error }),
+      /* @__PURE__ */ jsx38(FieldErrorMessage, { error }),
       options?.bottomSlot
     ] })
   ] })
 );
 
 // src/core/form/components/form-item/StackedFormItem.tsx
-import { forwardRef as forwardRef10 } from "react";
-import { twJoin as twJoin13 } from "tailwind-merge";
-import { jsx as jsx33, jsxs as jsxs14 } from "react/jsx-runtime";
-var StackedFormItem = forwardRef10(
-  ({ styles, label, options, render, error }, ref) => /* @__PURE__ */ jsxs14("div", { className: styles || void 0, ref, children: [
-    /* @__PURE__ */ jsx33(
+import { forwardRef as forwardRef11 } from "react";
+import { twJoin as twJoin16 } from "tailwind-merge";
+import { jsx as jsx39, jsxs as jsxs17 } from "react/jsx-runtime";
+var StackedFormItem = forwardRef11(
+  ({ styles, htmlFor, label, options, render, error }, ref) => /* @__PURE__ */ jsxs17("div", { className: styles || void 0, ref, children: [
+    /* @__PURE__ */ jsx39(
       FieldLabelWithTooltip,
       {
-        styles: twJoin13("flex items-baseline", options?.description == null && "pb-1"),
+        styles: twJoin16("flex items-baseline", options?.description == null && "pb-1"),
+        htmlFor,
         label,
         options
       }
     ),
-    /* @__PURE__ */ jsx33(FieldDescription, { styles: "pb-1", children: options?.description }),
+    /* @__PURE__ */ jsx39(FieldDescription, { styles: "pb-1", children: options?.description }),
     render,
-    /* @__PURE__ */ jsx33(FieldErrorMessage, { error }),
+    /* @__PURE__ */ jsx39(FieldErrorMessage, { error }),
     options?.bottomSlot
   ] })
 );
 
 // src/core/form/components/form-item/index.tsx
-import { jsx as jsx34 } from "react/jsx-runtime";
-var FormItem = forwardRef11(({ layout = "stacked", ...rest }, ref) => {
+import { jsx as jsx40 } from "react/jsx-runtime";
+var FormItem = forwardRef12(({ layout = "stacked", ...rest }, ref) => {
   switch (layout) {
     case "inline":
-      return /* @__PURE__ */ jsx34(InlineFormItem, { ...rest, ref });
+      return /* @__PURE__ */ jsx40(InlineFormItem, { ...rest, ref });
     case "side-by-side":
-      return /* @__PURE__ */ jsx34(SideBySideFormItem, { ...rest, ref });
+      return /* @__PURE__ */ jsx40(SideBySideFormItem, { ...rest, ref });
     case "stacked":
-      return /* @__PURE__ */ jsx34(StackedFormItem, { ...rest, ref });
+      return /* @__PURE__ */ jsx40(StackedFormItem, { ...rest, ref });
     case "none":
-      return /* @__PURE__ */ jsx34(NoneFormItem, { ...rest, ref });
+      return /* @__PURE__ */ jsx40(NoneFormItem, { ...rest, ref });
     default:
       throw new Error(`Unknown form item layout: ${layout}`);
   }
 });
 
 // src/core/form/components/FormInput.tsx
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var FormInput = ({
   name,
   styles,
@@ -1199,20 +1363,30 @@ var FormInput = ({
   onBlur,
   disabled,
   ...rest
-}) => /* @__PURE__ */ jsx35(
+}) => /* @__PURE__ */ jsx41(
   UncontrolledField,
   {
     name,
     onChange,
     onBlur,
-    render: ({ error, register }) => /* @__PURE__ */ jsx35(
+    render: ({ error, register }) => /* @__PURE__ */ jsx41(
       FormItem,
       {
         layout,
         styles,
+        htmlFor: name,
         label,
         options,
-        render: /* @__PURE__ */ jsx35(Input, { ...register(), ...rest, disabled, hasError: !disabled && (!!error || void 0) }),
+        render: /* @__PURE__ */ jsx41(
+          Input,
+          {
+            id: name,
+            ...register(),
+            ...rest,
+            disabled,
+            hasError: !disabled && (!!error || void 0)
+          }
+        ),
         error
       }
     )
@@ -1220,9 +1394,14 @@ var FormInput = ({
 );
 
 // src/core/form/components/FormDollarInput.tsx
-import { faCircleExclamation as faCircleExclamation2, faDollarSign, faTriangleExclamation as faTriangleExclamation2 } from "@fortawesome/free-solid-svg-icons";
-import { forwardRef as forwardRef12 } from "react";
-import { twJoin as twJoin14 } from "tailwind-merge";
+import {
+  faCheckCircle,
+  faDollarSign,
+  faExclamationCircle as faExclamationCircle2,
+  faExclamationTriangle as faExclamationTriangle2
+} from "@fortawesome/sharp-solid-svg-icons";
+import { forwardRef as forwardRef13 } from "react";
+import { twJoin as twJoin17 } from "tailwind-merge";
 
 // src/core/utils/useSyncState.ts
 import { useState as useState6 } from "react";
@@ -1237,7 +1416,7 @@ var useSyncState = (upstream) => {
 };
 
 // src/core/form/components/FormDollarInput.tsx
-import { jsx as jsx36, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs18 } from "react/jsx-runtime";
 var twoDecimalFormatter = Intl.NumberFormat("en-US", {
   minimumFractionDigits: 2,
   maximumFractionDigits: 2
@@ -1248,8 +1427,17 @@ var formatInput = (value) => {
 var roundToTwoDecimalPlaces = (value) => {
   return Math.round((value + Number.EPSILON) * 100) / 100;
 };
-var DollarInput = forwardRef12(
-  ({ value, onChange, disabled = false, hasError = false, hasWarning = false, message }, ref) => {
+var DollarInput = forwardRef13(
+  ({
+    value,
+    onChange,
+    disabled = false,
+    autoFocus = false,
+    hasError = false,
+    hasWarning = false,
+    hasSuccess = false,
+    message
+  }, ref) => {
     const [strValue, setStrValue] = useSyncState(value == null ? "" : twoDecimalFormatter.format(value / 100));
     const handleChange = (event) => {
       const inputValue = formatInput(event.target.value);
@@ -1284,34 +1472,36 @@ var DollarInput = forwardRef12(
         onChange?.(roundToTwoDecimalPlaces(parsedValue * 100));
       }
     };
-    return /* @__PURE__ */ jsxs15("div", { className: "flex flex-col gap-0.5", children: [
-      /* @__PURE__ */ jsxs15(
+    return /* @__PURE__ */ jsxs18("div", { className: "flex flex-col gap-0.5", children: [
+      /* @__PURE__ */ jsxs18(
         "div",
         {
-          className: twJoin14(
-            "flex h-md w-full items-center rounded-sm py-2.5 text-base [&>input]:rounded-l-none! [&>input]:rounded-r-md!",
-            disabled && "cursor-not-allowed [&>input]:cursor-not-allowed [&>input]:bg-gray-50! [&>input]:text-gray-500!"
+          className: twJoin17(
+            "flex h-md w-full items-center rounded-sm py-2.5 text-base [&>input]:rounded-l-none! [&>input]:rounded-r-md! [&>input]:border-l-0!",
+            disabled && "cursor-not-allowed [&>input]:cursor-not-allowed [&>input]:bg-surface-light! [&>input]:text-muted!"
           ),
           children: [
-            /* @__PURE__ */ jsx36(
+            /* @__PURE__ */ jsx42(
               "div",
               {
-                className: twJoin14(
-                  "flex h-md w-9.5 items-center justify-center rounded-l-md border-y border-l px-2.5 text-sm text-gray-500",
-                  hasError ? "border-red-300 bg-red-200 text-red-700" : hasWarning ? "border-yellow-300 bg-yellow-100 text-yellow-700" : "border-gray-200 bg-gray-100"
+                className: twJoin17(
+                  "flex h-md w-9.5 items-center justify-center rounded-l-md border-y border-l px-2.5 text-sm text-muted",
+                  hasError ? "border-red-300 bg-red-200 text-red-700" : hasWarning ? "border-yellow-300 bg-surface-warning text-warning" : hasSuccess ? "border-green-300 bg-surface-success text-success" : "border-surface-neutral bg-surface-neutral"
                 ),
-                children: /* @__PURE__ */ jsx36(Icon, { icon: faDollarSign })
+                children: /* @__PURE__ */ jsx42(Icon, { icon: faDollarSign })
               }
             ),
-            /* @__PURE__ */ jsx36(
+            /* @__PURE__ */ jsx42(
               Input,
               {
                 ref,
                 variant: "default",
                 disabled,
+                autoFocus,
                 value: strValue,
                 hasError,
                 hasWarning,
+                hasSuccess,
                 onChange: handleChange,
                 onBlur: handleBlur,
                 onPaste: handlePaste,
@@ -1321,30 +1511,34 @@ var DollarInput = forwardRef12(
           ]
         }
       ),
-      hasWarning && message && /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-1 text-sm font-normal text-yellow-700", children: [
-        /* @__PURE__ */ jsx36(Icon, { icon: faTriangleExclamation2 }),
+      hasWarning && message && /* @__PURE__ */ jsxs18(Text, { as: "span", variant: "body-2", className: "flex items-center gap-1 text-warning", children: [
+        /* @__PURE__ */ jsx42(Icon, { icon: faExclamationTriangle2 }),
+        message
+      ] }),
+      hasError && message && /* @__PURE__ */ jsxs18(Text, { as: "span", variant: "body-2", className: "flex items-center gap-1 text-red-700", children: [
+        /* @__PURE__ */ jsx42(Icon, { icon: faExclamationCircle2 }),
         message
       ] }),
-      hasError && message && /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-1 text-sm font-normal text-red-700", children: [
-        /* @__PURE__ */ jsx36(Icon, { icon: faCircleExclamation2 }),
+      hasSuccess && message && /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-1 text-sm font-normal text-success", children: [
+        /* @__PURE__ */ jsx42(Icon, { icon: faCheckCircle }),
         message
       ] })
     ] });
   }
 );
-var FormDollarInput = forwardRef12(
-  ({ name, layout, label, onChange, disabled, hasWarning = false, message, options }, ref) => /* @__PURE__ */ jsx36(
+var FormDollarInput = forwardRef13(
+  ({ name, layout, label, onChange, disabled, autoFocus, hasWarning = false, hasSuccess = false, message, options }, ref) => /* @__PURE__ */ jsx42(
     ControlledField,
     {
       name,
-      render: (field) => /* @__PURE__ */ jsx36(
+      render: (field) => /* @__PURE__ */ jsx42(
         FormItem,
         {
           label,
           layout,
           options,
           error: field.error,
-          render: /* @__PURE__ */ jsx36(
+          render: /* @__PURE__ */ jsx42(
             DollarInput,
             {
               onChange: (cents) => {
@@ -1353,8 +1547,10 @@ var FormDollarInput = forwardRef12(
               },
               value: field.value,
               disabled,
+              autoFocus,
               hasError: !disabled && (!!field.error || void 0),
               hasWarning: !disabled && hasWarning,
+              hasSuccess: !disabled && hasSuccess,
               message,
               ref
             }
@@ -1366,10 +1562,15 @@ var FormDollarInput = forwardRef12(
 );
 
 // src/core/form/components/FormPercentInput.tsx
-import { faCircleExclamation as faCircleExclamation3, faPercent, faTriangleExclamation as faTriangleExclamation3 } from "@fortawesome/free-solid-svg-icons";
-import { forwardRef as forwardRef13 } from "react";
-import { twJoin as twJoin15 } from "tailwind-merge";
-import { jsx as jsx37, jsxs as jsxs16 } from "react/jsx-runtime";
+import {
+  faCheckCircle as faCheckCircle2,
+  faExclamationCircle as faExclamationCircle3,
+  faExclamationTriangle as faExclamationTriangle3,
+  faPercent
+} from "@fortawesome/sharp-solid-svg-icons";
+import { forwardRef as forwardRef14 } from "react";
+import { twJoin as twJoin18 } from "tailwind-merge";
+import { jsx as jsx43, jsxs as jsxs19 } from "react/jsx-runtime";
 var twoDecimalFormatter2 = Intl.NumberFormat("en-US", {
   minimumFractionDigits: 0,
   maximumFractionDigits: 2
@@ -1380,8 +1581,8 @@ var formatInput2 = (value) => {
 var roundToTwoDecimalPlaces2 = (value) => {
   return Math.round((value + Number.EPSILON) * 100) / 100;
 };
-var PercentInput = forwardRef13(
-  ({ value, onChange, disabled = false, hasError = false, hasWarning = false, message }, ref) => {
+var PercentInput = forwardRef14(
+  ({ value, onChange, disabled = false, hasError = false, hasWarning = false, hasSuccess = false, message }, ref) => {
     const [strValue, setStrValue] = useSyncState(value == null ? "" : twoDecimalFormatter2.format(value));
     const handleChange = (event) => {
       const inputValue = formatInput2(event.target.value);
@@ -1416,26 +1617,26 @@ var PercentInput = forwardRef13(
         onChange?.(roundToTwoDecimalPlaces2(parsedValue));
       }
     };
-    return /* @__PURE__ */ jsxs16("div", { className: "flex flex-col gap-0.5", children: [
-      /* @__PURE__ */ jsxs16(
+    return /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-0.5", children: [
+      /* @__PURE__ */ jsxs19(
         "div",
         {
-          className: twJoin15(
-            "flex h-md w-full items-center rounded-sm py-2.5 text-base [&>input]:rounded-l-none! [&>input]:rounded-r-md!",
-            disabled && "cursor-not-allowed [&>input]:cursor-not-allowed [&>input]:bg-gray-50! [&>input]:text-gray-500!"
+          className: twJoin18(
+            "flex h-md w-full items-center rounded-sm py-2.5 text-base [&>input]:rounded-l-none! [&>input]:rounded-r-md! [&>input]:border-l-0!",
+            disabled && "cursor-not-allowed [&>input]:cursor-not-allowed [&>input]:bg-surface-light! [&>input]:text-muted!"
           ),
           children: [
-            /* @__PURE__ */ jsx37(
+            /* @__PURE__ */ jsx43(
               "div",
               {
-                className: twJoin15(
-                  "flex h-md w-9.5 items-center justify-center rounded-l-md border-y border-l px-2.5 text-sm text-gray-500",
-                  hasError ? "border-red-300 bg-red-200 text-red-700" : hasWarning ? "border-yellow-300 bg-yellow-100 text-yellow-700" : "border-gray-200 bg-gray-100"
+                className: twJoin18(
+                  "flex h-md w-9.5 items-center justify-center rounded-l-md border-y border-l px-2.5 text-sm text-muted",
+                  hasError ? "border-red-300 bg-red-200 text-red-700" : hasWarning ? "border-yellow-300 bg-surface-warning text-warning" : hasSuccess ? "border-green-300 bg-surface-success text-success" : "border-surface-neutral bg-surface-neutral"
                 ),
-                children: /* @__PURE__ */ jsx37(Icon, { icon: faPercent })
+                children: /* @__PURE__ */ jsx43(Icon, { icon: faPercent })
               }
             ),
-            /* @__PURE__ */ jsx37(
+            /* @__PURE__ */ jsx43(
               Input,
               {
                 ref,
@@ -1444,6 +1645,7 @@ var PercentInput = forwardRef13(
                 value: strValue,
                 hasError,
                 hasWarning,
+                hasSuccess,
                 onChange: handleChange,
                 onBlur: handleBlur,
                 onPaste: handlePaste,
@@ -1453,30 +1655,34 @@ var PercentInput = forwardRef13(
           ]
         }
       ),
-      hasWarning && message && /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-1 text-sm font-normal text-yellow-700", children: [
-        /* @__PURE__ */ jsx37(Icon, { icon: faTriangleExclamation3 }),
+      hasWarning && message && /* @__PURE__ */ jsxs19(Text, { as: "span", variant: "body-2", className: "flex items-center gap-1 text-warning", children: [
+        /* @__PURE__ */ jsx43(Icon, { icon: faExclamationTriangle3 }),
         message
       ] }),
-      hasError && message && /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-1 text-sm font-normal text-red-700", children: [
-        /* @__PURE__ */ jsx37(Icon, { icon: faCircleExclamation3 }),
+      hasError && message && /* @__PURE__ */ jsxs19(Text, { as: "span", variant: "body-2", className: "flex items-center gap-1 text-red-700", children: [
+        /* @__PURE__ */ jsx43(Icon, { icon: faExclamationCircle3 }),
+        message
+      ] }),
+      hasSuccess && message && /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-1 text-sm font-normal text-success", children: [
+        /* @__PURE__ */ jsx43(Icon, { icon: faCheckCircle2 }),
         message
       ] })
     ] });
   }
 );
-var FormPercentInput = forwardRef13(
-  ({ name, layout, label, onChange, disabled, hasWarning = false, message, options }, ref) => /* @__PURE__ */ jsx37(
+var FormPercentInput = forwardRef14(
+  ({ name, layout, label, onChange, disabled, hasWarning = false, hasSuccess = false, message, options }, ref) => /* @__PURE__ */ jsx43(
     ControlledField,
     {
       name,
-      render: (field) => /* @__PURE__ */ jsx37(
+      render: (field) => /* @__PURE__ */ jsx43(
         FormItem,
         {
           label,
           layout,
           options,
           error: field.error,
-          render: /* @__PURE__ */ jsx37(
+          render: /* @__PURE__ */ jsx43(
             PercentInput,
             {
               onChange: (percent) => {
@@ -1487,6 +1693,7 @@ var FormPercentInput = forwardRef13(
               disabled,
               hasError: !disabled && (!!field.error || void 0),
               hasWarning: !disabled && hasWarning,
+              hasSuccess: !disabled && hasSuccess,
               message,
               ref
             }
@@ -1498,7 +1705,7 @@ var FormPercentInput = forwardRef13(
 );
 
 // src/core/form/components/FormCheckbox.tsx
-import { Fragment as Fragment5, jsx as jsx38, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx44, jsxs as jsxs20 } from "react/jsx-runtime";
 var FormCheckbox = ({ name, disabled, onChange: propsOnChange, children }) => {
   const {
     onChange,
@@ -1513,8 +1720,8 @@ var FormCheckbox = ({ name, disabled, onChange: propsOnChange, children }) => {
     propsOnChange?.(checked);
   };
   if (children == null) {
-    return /* @__PURE__ */ jsxs17(Fragment5, { children: [
-      /* @__PURE__ */ jsx38(
+    return /* @__PURE__ */ jsxs20(Fragment5, { children: [
+      /* @__PURE__ */ jsx44(
         Checkbox,
         {
           ...field,
@@ -1525,12 +1732,12 @@ var FormCheckbox = ({ name, disabled, onChange: propsOnChange, children }) => {
           hasError: !!error
         }
       ),
-      /* @__PURE__ */ jsx38(FieldErrorMessage, { error })
+      /* @__PURE__ */ jsx44(FieldErrorMessage, { error })
     ] });
   }
-  return /* @__PURE__ */ jsxs17(ControlledFieldProvider, { name, children: [
+  return /* @__PURE__ */ jsxs20(ControlledFieldProvider, { name, children: [
     children,
-    /* @__PURE__ */ jsx38(FieldErrorMessage, { error })
+    /* @__PURE__ */ jsx44(FieldErrorMessage, { error })
   ] });
 };
 function CheckboxImpl({ onChange: propsOnChange }) {
@@ -1547,17 +1754,17 @@ function CheckboxImpl({ onChange: propsOnChange }) {
     onChange(checked);
     propsOnChange?.(checked);
   };
-  return /* @__PURE__ */ jsx38(Checkbox, { ...field, id: name, checked: !!value, onChange: handleChange, hasError: !!error });
+  return /* @__PURE__ */ jsx44(Checkbox, { ...field, id: name, checked: !!value, onChange: handleChange, hasError: !!error });
 }
 function LabelImpl({ children, className }) {
   const { name } = useControlledField();
-  return /* @__PURE__ */ jsx38(FieldLabel, { htmlFor: name, styles: className, children });
+  return /* @__PURE__ */ jsx44(FieldLabel, { htmlFor: name, styles: className, children });
 }
 FormCheckbox.Label = LabelImpl;
 FormCheckbox.Checkbox = CheckboxImpl;
 
 // src/core/form/components/ControlledFormItem.tsx
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx45 } from "react/jsx-runtime";
 var ControlledFormItem = ({
   name,
   styles,
@@ -1567,7 +1774,7 @@ var ControlledFormItem = ({
   render
 }) => {
   const field = useControlledFormField({ name });
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx45(
     FormItem,
     {
       layout,
@@ -1651,6 +1858,7 @@ function useAsyncMultiSelect({
     }
   };
   return {
+    query,
     setQuery,
     selectItems,
     loadProps,
@@ -1686,73 +1894,25 @@ var useAsyncSelect = ({
 // src/core/select/AsyncMultiSelect.tsx
 import { DndContext, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
 import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
-import { faArrowTurnDown, faCheck as faCheck2, faMagnifyingGlass, faXmark as faXmark2 } from "@fortawesome/free-solid-svg-icons";
+import { faArrowTurnDownLeft, faCheck as faCheck2, faSearch, faTimes } from "@fortawesome/sharp-solid-svg-icons";
 import { useMemo as useMemo5, useRef as useRef4, useState as useState8 } from "react";
-import { twJoin as twJoin18 } from "tailwind-merge";
+import { twJoin as twJoin21 } from "tailwind-merge";
 
 // src/core/dropdown-chevron/DropdownChevron.tsx
-import { faChevronDown as faChevronDown3 } from "@fortawesome/free-solid-svg-icons";
-import { twJoin as twJoin16 } from "tailwind-merge";
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { faChevronDown as faChevronDown3 } from "@fortawesome/sharp-solid-svg-icons";
+import { twJoin as twJoin19 } from "tailwind-merge";
+import { jsx as jsx46 } from "react/jsx-runtime";
 var DropdownChevron = () => {
-  return /* @__PURE__ */ jsx40("div", { className: twJoin16("w-3 text-sm text-gray-500"), children: /* @__PURE__ */ jsx40(Icon, { icon: faChevronDown3 }) });
-};
-
-// src/core/popover/Popover.tsx
-import * as RadixPopover from "@radix-ui/react-popover";
-import { twMerge as twMerge5 } from "tailwind-merge";
-import { jsx as jsx41, jsxs as jsxs18 } from "react/jsx-runtime";
-var Popover = ({
-  open,
-  trigger,
-  triggerClassName,
-  children,
-  arrowClassName,
-  contentClassName,
-  disabled,
-  onOpenChange,
-  alignContent,
-  container,
-  ...props
-}) => /* @__PURE__ */ jsxs18(RadixPopover.Root, { open, onOpenChange, children: [
-  /* @__PURE__ */ jsx41(RadixPopover.Trigger, { asChild: true, disabled, className: triggerClassName, children: trigger }),
-  /* @__PURE__ */ jsx41(
-    PopoverBody,
-    {
-      align: alignContent,
-      ...props,
-      contentClassName,
-      arrowClassName,
-      container,
-      children
-    }
-  )
-] });
-var PopoverBody = ({ children, arrowClassName, contentClassName, container, ...props }) => {
-  return /* @__PURE__ */ jsx41(RadixPopover.Portal, { container, children: /* @__PURE__ */ jsxs18(
-    RadixPopover.Content,
-    {
-      ...props,
-      className: twMerge5("isolate z-50 rounded-lg bg-white shadow-lg focus:outline-hidden", contentClassName),
-      children: [
-        children,
-        /* @__PURE__ */ jsx41(RadixPopover.Arrow, { className: twMerge5("fill-white", arrowClassName), offset: 8 })
-      ]
-    }
-  ) });
+  return /* @__PURE__ */ jsx46("div", { className: twJoin19("w-3 text-sm text-muted"), children: /* @__PURE__ */ jsx46(Icon, { icon: faChevronDown3 }) });
 };
-Popover.Root = (props) => /* @__PURE__ */ jsx41(RadixPopover.Root, { ...props });
-Popover.Trigger = (props) => /* @__PURE__ */ jsx41(RadixPopover.Trigger, { asChild: true, children: /* @__PURE__ */ jsx41(Button, { ...props }) });
-Popover.Body = PopoverBody;
-Popover.Close = (props) => /* @__PURE__ */ jsx41(RadixPopover.Close, { asChild: true, ...props });
 
 // src/core/select/SelectListItem.tsx
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import { faGripVertical } from "@fortawesome/free-solid-svg-icons";
+import { faGripDotsVertical } from "@fortawesome/sharp-solid-svg-icons";
 import { useEffect as useEffect4, useRef as useRef3 } from "react";
-import { twJoin as twJoin17 } from "tailwind-merge";
-import { jsx as jsx42, jsxs as jsxs19 } from "react/jsx-runtime";
+import { twJoin as twJoin20 } from "tailwind-merge";
+import { jsx as jsx47, jsxs as jsxs21 } from "react/jsx-runtime";
 var SelectListItem = ({
   sortableId,
   children,
@@ -1767,7 +1927,7 @@ var SelectListItem = ({
       containerRef.current.scrollIntoView({ block: "nearest", inline: "nearest", behavior: "smooth" });
     }
   }, [focused]);
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs21(
     "li",
     {
       ref: (ref) => {
@@ -1775,10 +1935,10 @@ var SelectListItem = ({
         containerRef.current = ref;
       },
       onClick: disabled ? void 0 : onClick,
-      className: twJoin17(
+      className: twJoin20(
         "flex w-full items-center gap-2 rounded-lg px-2 py-1.5",
-        disabled ? "cursor-not-allowed text-gray-400" : "cursor-pointer transition-colors duration-150 hover:bg-gray-100",
-        focused && "bg-gray-100"
+        disabled ? "cursor-not-allowed text-placeholder" : "cursor-pointer transition-colors duration-150 hover:bg-surface-neutral",
+        focused && "bg-surface-neutral"
       ),
       style: {
         transform: CSS.Transform.toString(transform),
@@ -1786,7 +1946,7 @@ var SelectListItem = ({
       },
       ...attributes,
       children: [
-        sortableId && /* @__PURE__ */ jsx42(
+        sortableId && /* @__PURE__ */ jsx47(
           "div",
           {
             className: "cursor-grab font-medium active:cursor-grabbing",
@@ -1795,17 +1955,17 @@ var SelectListItem = ({
               e.stopPropagation();
               listeners?.onClick(e);
             },
-            children: /* @__PURE__ */ jsx42(Icon, { icon: faGripVertical })
+            children: /* @__PURE__ */ jsx47(Icon, { icon: faGripDotsVertical })
           }
         ),
-        /* @__PURE__ */ jsx42("div", { className: "flex w-full flex-1 items-center justify-between", children })
+        /* @__PURE__ */ jsx47("div", { className: "flex w-full flex-1 items-center justify-between", children })
       ]
     }
   );
 };
 
 // src/core/select/AsyncMultiSelect.tsx
-import { Fragment as Fragment6, jsx as jsx43, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx48, jsxs as jsxs22 } from "react/jsx-runtime";
 var AsyncMultiSelect = ({
   value = [],
   onChange,
@@ -1827,9 +1987,7 @@ var AsyncMultiSelect = ({
   onSelectAll,
   numValuesToShow,
   emptyState,
-  size,
-  onOpen,
-  onClose
+  size
 }) => {
   const [open, setOpen] = useState8(false);
   const [search, setSearch] = useState8("");
@@ -1844,7 +2002,6 @@ var AsyncMultiSelect = ({
     setOpen(false);
     resetSearch();
     setFocusIndex(0);
-    onClose?.();
   };
   const searchMatchesExistingOption = value.some((v) => v.toString().toLowerCase() === search.toLowerCase()) || unselectedOptions.find((opt) => opt.value?.toString().toLowerCase() === search.toLowerCase());
   const showCustomItem = allowCustomValues && !!search && !loadProps?.isLoading && !searchMatchesExistingOption && isValidCustomValue(search);
@@ -1906,9 +2063,8 @@ var AsyncMultiSelect = ({
     onSearchChange?.(val);
   };
   const handleTriggerKeyDown = (e) => {
-    if (!hideSearch && !e.ctrlKey && !e.metaKey && !e.altKey) {
+    if (!hideSearch && e.key.length === 1) {
       setOpen(true);
-      onOpen?.();
       handleSearchTermChange(e.key);
     }
   };
@@ -1923,10 +2079,10 @@ var AsyncMultiSelect = ({
   );
   const triggerText = useMemo5(() => {
     if (value.length === 0) {
-      return /* @__PURE__ */ jsx43("span", { className: "truncate", children: triggerPlaceholder ?? `Select ${maxSelection === 1 ? "an item..." : "items..."}` });
+      return /* @__PURE__ */ jsx48("span", { className: "truncate", children: triggerPlaceholder ?? `Select ${maxSelection === 1 ? "an item..." : "items..."}` });
     }
     if (!allValuesHaveOptions) {
-      return /* @__PURE__ */ jsx43("span", { className: "line-clamp-1", children: "Loading..." });
+      return /* @__PURE__ */ jsx48("span", { className: "line-clamp-1", children: "Loading..." });
     }
     const optionMatchingFirstVal = valueToOptionMap.get(value[0]) || {
       label: value[0],
@@ -1934,20 +2090,19 @@ var AsyncMultiSelect = ({
     };
     const firstValText = optionMatchingFirstVal ? optionMatchingFirstVal.label : value[0];
     const icon = value.length === 1 ? optionMatchingFirstVal?.icon : void 0;
-    return /* @__PURE__ */ jsxs20(Fragment6, { children: [
-      icon && /* @__PURE__ */ jsx43("span", { className: "mr-1 inline-flex items-center", children: icon }),
-      /* @__PURE__ */ jsx43("span", { className: "line-clamp-1 text-left", children: `${firstValText}${value.length > 1 ? "," : ""}` }),
-      value.length > 1 && /* @__PURE__ */ jsx43("span", { className: "whitespace-nowrap", children: `+${value.length - 1} more` })
+    return /* @__PURE__ */ jsxs22(Fragment6, { children: [
+      icon && /* @__PURE__ */ jsx48("span", { className: "mr-1 inline-flex items-center", children: icon }),
+      /* @__PURE__ */ jsx48("span", { className: "line-clamp-1 text-left", children: `${firstValText}${value.length > 1 ? "," : ""}` }),
+      value.length > 1 && /* @__PURE__ */ jsx48("span", { className: "whitespace-nowrap", children: `+${value.length - 1} more` })
     ] });
   }, [maxSelection, valueToOptionMap, triggerPlaceholder, value, allValuesHaveOptions]);
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx48(
     Popover,
     {
       open: open && !disabled,
       onOpenChange: (val) => {
         if (val) {
           setOpen(true);
-          onOpen?.();
         } else {
           handleClose();
         }
@@ -1957,42 +2112,42 @@ var AsyncMultiSelect = ({
       triggerClassName: popover?.triggerClassName,
       contentClassName: popover?.contentClassName,
       container: popover?.container,
-      trigger: popover?.customTrigger ?? (variant === "simple" ? /* @__PURE__ */ jsxs20(
+      trigger: popover?.customTrigger ?? (variant === "simple" ? /* @__PURE__ */ jsxs22(
         "div",
         {
           onKeyDown: handleTriggerKeyDown,
-          className: twJoin18(
+          className: twJoin21(
             "-mx-2 -my-1.5 flex cursor-pointer items-center justify-between gap-1.5 rounded-md px-2 py-1.5 transition-all duration-150",
-            !disabled && "cursor-pointer hover:bg-gray-100"
+            !disabled && "cursor-pointer hover:bg-surface-neutral"
           ),
           children: [
-            /* @__PURE__ */ jsx43(
+            /* @__PURE__ */ jsx48(
               "div",
               {
-                className: twJoin18(
+                className: twJoin21(
                   "line-clamp-1 flex flex-1 items-center",
-                  value.length !== 0 ? "text-inherit" : "text-gray-500"
+                  value.length !== 0 ? "text-inherit" : "text-muted"
                 ),
                 children: triggerText
               }
             ),
-            !disabled && /* @__PURE__ */ jsx43(DropdownChevron, {})
+            !disabled && /* @__PURE__ */ jsx48(DropdownChevron, {})
           ]
         }
-      ) : /* @__PURE__ */ jsxs20("button", { onKeyDown: handleTriggerKeyDown, className: twJoin18("w-full", inputBoxStyles({ hasError, size })), children: [
-        /* @__PURE__ */ jsx43(
+      ) : /* @__PURE__ */ jsxs22("button", { onKeyDown: handleTriggerKeyDown, className: twJoin21("w-full", inputBoxStyles({ hasError, size })), children: [
+        /* @__PURE__ */ jsx48(
           "span",
           {
-            className: `mr-auto line-clamp-1 flex items-center space-x-1 text-left text-base ${value.length === 0 ? "text-gray-400" : "text-gray-800"}`,
+            className: `mr-auto line-clamp-1 flex items-center space-x-1 text-left text-base ${value.length === 0 ? "text-placeholder" : "text-gray-800"}`,
             children: triggerText
           }
         ),
-        /* @__PURE__ */ jsx43(DropdownChevron, {})
+        /* @__PURE__ */ jsx48(DropdownChevron, {})
       ] })),
-      children: /* @__PURE__ */ jsxs20("div", { className: "w-72", children: [
-        (!hideSearch || allowCustomValues) && /* @__PURE__ */ jsx43("div", { children: /* @__PURE__ */ jsxs20(InputBox, { variant: "transparent", children: [
-          /* @__PURE__ */ jsx43("div", { className: "w-3 text-sm text-gray-400", children: /* @__PURE__ */ jsx43(Icon, { icon: faMagnifyingGlass }) }),
-          /* @__PURE__ */ jsx43(
+      children: /* @__PURE__ */ jsxs22("div", { className: "w-72", children: [
+        (!hideSearch || allowCustomValues) && /* @__PURE__ */ jsx48("div", { children: /* @__PURE__ */ jsxs22(InputBox, { variant: "transparent", children: [
+          /* @__PURE__ */ jsx48("div", { className: "w-3 text-sm text-placeholder", children: /* @__PURE__ */ jsx48(Icon, { icon: faSearch }) }),
+          /* @__PURE__ */ jsx48(
             InputBox.Input,
             {
               ref: inputRef,
@@ -2004,8 +2159,8 @@ var AsyncMultiSelect = ({
             }
           )
         ] }) }),
-        /* @__PURE__ */ jsxs20("ul", { className: "max-h-72 space-y-1 overflow-y-auto p-1", children: [
-          !allValuesHaveOptions ? /* @__PURE__ */ jsx43(SelectListItem, { disabled: true, children: "Loading..." }) : /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsxs22("ul", { className: "max-h-72 space-y-1 overflow-y-auto p-1", children: [
+          !allValuesHaveOptions ? /* @__PURE__ */ jsx48(SelectListItem, { disabled: true, children: "Loading..." }) : /* @__PURE__ */ jsx48(
             SelectedItems,
             {
               value,
@@ -2018,8 +2173,8 @@ var AsyncMultiSelect = ({
               numValuesToShow
             }
           ),
-          showCustomItem && /* @__PURE__ */ jsx43(SelectOption, { onClick: handleAddCustomItem, focused: showCustomItem && focusIndex === 0, children: /* @__PURE__ */ jsx43("span", { children: `"${search}"` }) }),
-          unselectedOptions.map((item, i) => /* @__PURE__ */ jsx43(
+          showCustomItem && /* @__PURE__ */ jsx48(SelectOption, { onClick: handleAddCustomItem, focused: showCustomItem && focusIndex === 0, children: /* @__PURE__ */ jsx48("span", { children: `"${search}"` }) }),
+          unselectedOptions.map((item, i) => /* @__PURE__ */ jsx48(
             SelectOption,
             {
               onClick: () => handleOptionSelected(item.value),
@@ -2031,12 +2186,14 @@ var AsyncMultiSelect = ({
           )),
           !loadProps ? (
             // no asynchronous loading
-            unselectedOptions.length === 0 && (emptyState || /* @__PURE__ */ jsx43(SelectListItem, { disabled: true, children: "No results" }))
-          ) : loadProps.isLoading ? /* @__PURE__ */ jsx43(SelectListItem, { disabled: true, children: "Loading..." }) : loadProps.isError ? /* @__PURE__ */ jsx43(SelectListItem, { disabled: true, children: "An error occurred" }) : unselectedOptions.length === 0 ? emptyState || /* @__PURE__ */ jsx43(SelectListItem, { disabled: true, children: "No results" }) : loadProps.canLoadMore ? /* @__PURE__ */ jsx43(
-            "div",
+            unselectedOptions.length === 0 && (emptyState || /* @__PURE__ */ jsx48(SelectListItem, { disabled: true, children: "No results" }))
+          ) : loadProps.isLoading ? /* @__PURE__ */ jsx48(SelectListItem, { disabled: true, children: "Loading..." }) : loadProps.isError ? /* @__PURE__ */ jsx48(SelectListItem, { disabled: true, children: "An error occurred" }) : unselectedOptions.length === 0 ? emptyState || /* @__PURE__ */ jsx48(SelectListItem, { disabled: true, children: "No results" }) : loadProps.canLoadMore ? /* @__PURE__ */ jsx48(
+            Text,
             {
-              className: "cursor-pointer px-2 py-1 text-sm font-medium text-indigo-600",
+              as: "span",
+              variant: "label",
               onClick: loadProps.onLoadMore,
+              className: "cursor-pointer px-2 py-1 text-indigo-600",
               children: "Load more..."
             }
           ) : null
@@ -2045,9 +2202,9 @@ var AsyncMultiSelect = ({
     }
   );
 };
-var SelectOption = ({ children, focused, ...rest }) => /* @__PURE__ */ jsxs20(SelectListItem, { focused, ...rest, children: [
+var SelectOption = ({ children, focused, ...rest }) => /* @__PURE__ */ jsxs22(SelectListItem, { focused, ...rest, children: [
   children,
-  focused && !rest.disabled && /* @__PURE__ */ jsx43("span", { className: "w-3 text-sm text-gray-500", children: /* @__PURE__ */ jsx43(Icon, { icon: faArrowTurnDown }) })
+  focused && !rest.disabled && /* @__PURE__ */ jsx48("span", { className: "w-3 text-sm text-muted", children: /* @__PURE__ */ jsx48(Icon, { icon: faArrowTurnDownLeft }) })
 ] });
 var SelectedItems = ({
   value = [],
@@ -2090,25 +2247,25 @@ var SelectedItems = ({
       onChange?.(newOrder);
     }
   };
-  return /* @__PURE__ */ jsx43(DndContext, { sensors, onDragEnd, children: /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsx48(DndContext, { sensors, onDragEnd, children: /* @__PURE__ */ jsxs22(
     SortableContext,
     {
       disabled: !ordered,
       items: filteredSelectedValues.map((v) => ({ id: v, value: v })),
       strategy: verticalListSortingStrategy,
       children: [
-        (filteredSelectedValues.length > numValuesToShow || onSelectAll) && /* @__PURE__ */ jsxs20("div", { className: "flex justify-between px-2 pt-1.5 pb-px text-sm", children: [
-          /* @__PURE__ */ jsxs20("span", { className: "font-medium text-gray-500", children: [
+        (filteredSelectedValues.length > numValuesToShow || onSelectAll) && /* @__PURE__ */ jsxs22("div", { className: "flex justify-between px-2 pt-1.5 pb-px text-sm", children: [
+          /* @__PURE__ */ jsxs22("span", { className: "font-medium text-muted", children: [
             value.length,
             " selected",
             filteredSelectedValues.length < value.length ? ` (showing ${filteredSelectedValues.length})` : ""
           ] }),
-          value.length > 0 ? /* @__PURE__ */ jsx43("span", { className: "cursor-pointer text-red-600 hover:underline", onClick: () => onChange?.([]), children: "Clear" }) : onSelectAll ? /* @__PURE__ */ jsx43("span", { className: "cursor-pointer text-indigo-700 hover:underline", onClick: onSelectAll, children: "Select all" }) : null
+          value.length > 0 ? /* @__PURE__ */ jsx48("span", { className: "cursor-pointer text-danger hover:underline", onClick: () => onChange?.([]), children: "Clear" }) : onSelectAll ? /* @__PURE__ */ jsx48("span", { className: "cursor-pointer text-indigo-700 hover:underline", onClick: onSelectAll, children: "Select all" }) : null
         ] }),
-        filteredSelectedValues.length > 0 && /* @__PURE__ */ jsxs20(Fragment6, { children: [
+        filteredSelectedValues.length > 0 && /* @__PURE__ */ jsxs22(Fragment6, { children: [
           filteredSelectedValues.slice(0, showAllValues ? value.length : numValuesToShow).map((val) => {
             const item = valueToOptionMap.get(val);
-            return /* @__PURE__ */ jsxs20(
+            return /* @__PURE__ */ jsxs22(
               SelectListItem,
               {
                 sortableId: ordered ? val : void 0,
@@ -2119,38 +2276,35 @@ var SelectedItems = ({
                   }
                 },
                 children: [
-                  !item ? val : item.display ?? /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2", children: [
+                  !item ? val : item.display ?? /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2", children: [
                     item.icon,
-                    /* @__PURE__ */ jsx43("span", { children: item.label })
+                    /* @__PURE__ */ jsx48("span", { children: item.label })
                   ] }),
-                  /* @__PURE__ */ jsx43("div", { className: "flex w-3 justify-center text-sm text-gray-500", children: /* @__PURE__ */ jsx43(
-                    Icon,
-                    {
-                      icon: minSelection === 1 ? faCheck2 : faXmark2
-                    }
-                  ) })
+                  /* @__PURE__ */ jsx48("div", { className: "flex w-3 justify-center text-sm text-muted", children: /* @__PURE__ */ jsx48(Icon, { icon: minSelection === 1 ? faCheck2 : faTimes }) })
                 ]
               },
               val
             );
           }),
-          filteredSelectedValues.length > numValuesToShow && /* @__PURE__ */ jsx43(
-            "div",
+          filteredSelectedValues.length > numValuesToShow && /* @__PURE__ */ jsx48(
+            Text,
             {
-              className: "cursor-pointer px-2 py-1 text-sm font-medium text-indigo-600",
+              as: "span",
+              variant: "label",
               onClick: () => setShowAllValues((prev) => !prev),
+              className: "cursor-pointer px-2 py-1 text-indigo-600",
               children: showAllValues ? "Show less" : `Show ${filteredSelectedValues.length - numValuesToShow} more selected`
             }
           )
         ] }),
-        (filteredSelectedValues.length > 0 || onSelectAll) && /* @__PURE__ */ jsx43("li", { className: "py-0.5", children: /* @__PURE__ */ jsx43("hr", { className: "h-px bg-gray-200" }) })
+        (filteredSelectedValues.length > 0 || onSelectAll) && /* @__PURE__ */ jsx48("li", { className: "py-0.5", children: /* @__PURE__ */ jsx48("hr", { className: "h-px bg-surface-dark" }) })
       ]
     }
   ) });
 };
 
 // src/core/select/AsyncSelect.tsx
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { jsx as jsx49 } from "react/jsx-runtime";
 var AsyncSelect = ({
   value,
   onChange,
@@ -2158,7 +2312,7 @@ var AsyncSelect = ({
   ...rest
 }) => {
   const multiValue = value ? [value] : [];
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx49(
     AsyncMultiSelect,
     {
       minSelection: allowUnselect ? 0 : 1,
@@ -2172,7 +2326,7 @@ var AsyncSelect = ({
 
 // src/core/select/MultiSelect.tsx
 import { useMemo as useMemo6, useState as useState9 } from "react";
-import { jsx as jsx45 } from "react/jsx-runtime";
+import { jsx as jsx50 } from "react/jsx-runtime";
 var MultiSelect = ({
   value,
   items: options,
@@ -2199,7 +2353,7 @@ var MultiSelect = ({
     () => options.filter((option) => doesSelectItemMatch(option, query)),
     [query, options]
   );
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx50(
     AsyncMultiSelect,
     {
       value,
@@ -2214,10 +2368,10 @@ var MultiSelect = ({
 };
 
 // src/core/select/Select.tsx
-import { jsx as jsx46 } from "react/jsx-runtime";
+import { jsx as jsx51 } from "react/jsx-runtime";
 function Select({ value, onChange, allowUnselect, ...rest }) {
   const multivalue = value || value === 0 ? [value] : [];
-  return /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx51(
     MultiSelect,
     {
       value: multivalue,
@@ -2230,14 +2384,14 @@ function Select({ value, onChange, allowUnselect, ...rest }) {
 }
 
 // src/core/select/SelectWtihUnselect.tsx
-import { jsx as jsx47 } from "react/jsx-runtime";
+import { jsx as jsx52 } from "react/jsx-runtime";
 function SelectWithUnselect({
   value,
   onChange,
   ...rest
 }) {
   const multivalue = value || value === 0 ? [value] : [];
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx52(
     MultiSelect,
     {
       value: multivalue,
@@ -2250,7 +2404,7 @@ function SelectWithUnselect({
 }
 
 // src/core/form/components/FormSelect.tsx
-import { jsx as jsx48 } from "react/jsx-runtime";
+import { jsx as jsx53 } from "react/jsx-runtime";
 var FormSelect = ({
   name,
   styles,
@@ -2260,7 +2414,7 @@ var FormSelect = ({
   onChange,
   ...rest
 }) => {
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx53(
     ControlledFormItem,
     {
       name,
@@ -2268,7 +2422,7 @@ var FormSelect = ({
       styles,
       label,
       options,
-      render: (field) => /* @__PURE__ */ jsx48(
+      render: (field) => /* @__PURE__ */ jsx53(
         Select,
         {
           ...rest,
@@ -2285,7 +2439,7 @@ var FormSelect = ({
 };
 
 // src/core/form/components/FormMultiSelect.tsx
-import { jsx as jsx49 } from "react/jsx-runtime";
+import { jsx as jsx54 } from "react/jsx-runtime";
 var FormMultiSelect = ({
   name,
   styles,
@@ -2295,7 +2449,7 @@ var FormMultiSelect = ({
   onChange,
   ...rest
 }) => {
-  return /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx54(
     ControlledFormItem,
     {
       name,
@@ -2303,7 +2457,7 @@ var FormMultiSelect = ({
       styles,
       label,
       options,
-      render: (field) => /* @__PURE__ */ jsx49(
+      render: (field) => /* @__PURE__ */ jsx54(
         MultiSelect,
         {
           ...rest,
@@ -2323,18 +2477,18 @@ var FormMultiSelect = ({
 import { debounce } from "lodash-es";
 
 // src/core/textarea/TextArea.tsx
-import { forwardRef as forwardRef14 } from "react";
-import { twMerge as twMerge6 } from "tailwind-merge";
-import { Fragment as Fragment7, jsx as jsx50, jsxs as jsxs21 } from "react/jsx-runtime";
-var TextAreaComp = forwardRef14(({ className, hasError, ...rest }, ref) => {
-  const ringClassName = rest.disabled ? "focus:outline-hidden focus:ring-0" : hasError ? "focus:outline-hidden focus:ring-red-500 focus:border-red-500" : RING_COLOR_CLASSNAME;
-  return /* @__PURE__ */ jsx50(
+import { forwardRef as forwardRef15 } from "react";
+import { twMerge as twMerge8 } from "tailwind-merge";
+import { Fragment as Fragment7, jsx as jsx55, jsxs as jsxs23 } from "react/jsx-runtime";
+var TextAreaComp = forwardRef15(({ className, hasError, ...rest }, ref) => {
+  const ringClassName = rest.disabled ? "focus:outline-hidden focus:ring-0" : hasError ? "focus:outline-hidden focus:ring-red-500 focus:border-red-500" : "focus:ring-2 focus:ring-indigo-200";
+  return /* @__PURE__ */ jsx55(
     "textarea",
     {
       ...rest,
-      className: twMerge6(
-        "block w-full resize-none rounded-md shadow-sm disabled:bg-gray-100",
-        hasError ? "border-red-300 text-red-900 placeholder-red-300" : "border-gray-200 placeholder-gray-400 focus:border-indigo-400",
+      className: twMerge8(
+        "block w-full resize-none rounded-md shadow-sm disabled:bg-surface-neutral",
+        hasError ? "border-red-300 text-red-900 placeholder-red-300" : "border-surface-neutral placeholder-gray-400 focus:border-indigo-400",
         ringClassName,
         className
       ),
@@ -2342,13 +2496,13 @@ var TextAreaComp = forwardRef14(({ className, hasError, ...rest }, ref) => {
     }
   );
 });
-var TextArea = forwardRef14(({ hasError, errorNode, ...rest }, ref) => /* @__PURE__ */ jsxs21(Fragment7, { children: [
-  /* @__PURE__ */ jsx50(TextAreaComp, { ...rest, hasError, ref }),
-  hasError && /* @__PURE__ */ jsx50(ErrorText, { className: "mt-2 text-sm", children: errorNode })
+var TextArea = forwardRef15(({ hasError, errorNode, ...rest }, ref) => /* @__PURE__ */ jsxs23(Fragment7, { children: [
+  /* @__PURE__ */ jsx55(TextAreaComp, { ...rest, hasError, ref }),
+  hasError && /* @__PURE__ */ jsx55(ErrorText, { className: "mt-2 text-sm", children: errorNode })
 ] }));
 
 // src/core/form/components/FormTextArea.tsx
-import { jsx as jsx51 } from "react/jsx-runtime";
+import { jsx as jsx56 } from "react/jsx-runtime";
 var FormTextArea = ({
   name,
   styles,
@@ -2357,20 +2511,20 @@ var FormTextArea = ({
   options,
   debounce: debounceInterval,
   ...rest
-}) => /* @__PURE__ */ jsx51(
+}) => /* @__PURE__ */ jsx56(
   UncontrolledField,
   {
     name,
     render: ({ error, register }) => {
       const controlFields = register();
-      return /* @__PURE__ */ jsx51(
+      return /* @__PURE__ */ jsx56(
         FormItem,
         {
           layout,
           styles,
           label,
           options,
-          render: /* @__PURE__ */ jsx51(
+          render: /* @__PURE__ */ jsx56(
             TextArea,
             {
               ...controlFields,
@@ -2387,74 +2541,71 @@ var FormTextArea = ({
 );
 
 // src/core/form/components/FormSwitch.tsx
-import { twJoin as twJoin19 } from "tailwind-merge";
+import { twJoin as twJoin22 } from "tailwind-merge";
 
 // src/core/switch/Switch.tsx
 import * as RadixSwitch from "@radix-ui/react-switch";
-import * as React10 from "react";
-import { jsx as jsx52 } from "react/jsx-runtime";
-var SwitchIdContext = React10.createContext(void 0);
-var useSwitchId = () => React10.useContext(SwitchIdContext);
+import * as React11 from "react";
+import { jsx as jsx57 } from "react/jsx-runtime";
+var SwitchIdContext = React11.createContext(void 0);
+var useSwitchId = () => React11.useContext(SwitchIdContext);
 var SwitchControl = (props) => {
   const id = useSwitchId();
-  return /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx57(
     RadixSwitch.Root,
     {
       ...props,
       id,
-      className: "flex h-5 w-9 shrink-0 items-center rounded-full bg-gray-200 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-indigo-400 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:bg-gray-100 data-[state=checked]:bg-indigo-700",
-      children: /* @__PURE__ */ jsx52(RadixSwitch.SwitchThumb, { className: "block h-4 w-4 translate-x-0.5 rounded-full bg-white duration-100 data-disabled:shadow-none data-[state=checked]:translate-x-[18px]" })
+      className: "flex h-5 w-9 shrink-0 items-center rounded-full bg-surface-dark focus:outline-hidden focus-visible:ring-2 focus-visible:ring-indigo-400 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:bg-surface-neutral data-[state=checked]:bg-indigo-700",
+      children: /* @__PURE__ */ jsx57(RadixSwitch.Thumb, { className: "block h-4 w-4 translate-x-0.5 rounded-full bg-white duration-100 data-disabled:shadow-none data-[state=checked]:translate-x-[18px]" })
     }
   );
 };
 var SwitchLabel = (props) => {
   const id = useSwitchId();
-  return /* @__PURE__ */ jsx52("label", { ...props, htmlFor: id });
+  return /* @__PURE__ */ jsx57("label", { ...props, htmlFor: id });
 };
 var Switch = ({ children, className, ...rest }) => {
-  const autoId = React10.useId();
+  const autoId = React11.useId();
   if (children == null) {
-    return /* @__PURE__ */ jsx52(SwitchControl, { ...rest });
+    return /* @__PURE__ */ jsx57(SwitchControl, { ...rest });
   }
-  return /* @__PURE__ */ jsx52(SwitchIdContext.Provider, { value: autoId, children: /* @__PURE__ */ jsx52("span", { className, children }) });
+  return /* @__PURE__ */ jsx57(SwitchIdContext.Provider, { value: autoId, children: /* @__PURE__ */ jsx57("span", { className, children }) });
 };
 Switch.Control = SwitchControl;
 Switch.Label = SwitchLabel;
 
 // src/core/form/components/FormSwitch.tsx
-import { jsx as jsx53, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs24 } from "react/jsx-runtime";
 var FormSwitch = ({ name, styles, layout, label, options, onChange, ...props }) => {
   if (layout === "side-by-side") {
-    return /* @__PURE__ */ jsx53(
+    return /* @__PURE__ */ jsx58(
       ControlledField,
       {
         name,
-        render: (field) => /* @__PURE__ */ jsxs22("div", { className: twJoin19("flex items-start gap-x-2", styles), children: [
-          /* @__PURE__ */ jsx53("div", { children: /* @__PURE__ */ jsx53(
+        render: (field) => /* @__PURE__ */ jsxs24("div", { className: twJoin22("flex items-start gap-x-2", styles), children: [
+          /* @__PURE__ */ jsx58("div", { children: /* @__PURE__ */ jsx58(
             Switch,
             {
               ...props,
-              checked: (
-                // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-                field.value
-              ),
+              checked: !!field.value,
               onCheckedChange: (value) => {
                 field.onChange(value);
                 onChange?.(value);
               }
             }
           ) }),
-          /* @__PURE__ */ jsxs22("div", { className: "pt-1", children: [
-            /* @__PURE__ */ jsx53(FieldLabelWithTooltip, { label, options }),
-            /* @__PURE__ */ jsx53(FieldDescription, { styles: "pt-0.5", children: options?.description }),
-            /* @__PURE__ */ jsx53(FieldErrorMessage, { error: field.error }),
+          /* @__PURE__ */ jsxs24("div", { className: "pt-1", children: [
+            /* @__PURE__ */ jsx58(FieldLabelWithTooltip, { label, options }),
+            /* @__PURE__ */ jsx58(FieldDescription, { styles: "pt-0.5", children: options?.description }),
+            /* @__PURE__ */ jsx58(FieldErrorMessage, { error: field.error }),
             options?.bottomSlot
           ] })
         ] })
       }
     );
   }
-  return /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx58(
     ControlledFormItem,
     {
       name,
@@ -2462,14 +2613,17 @@ var FormSwitch = ({ name, styles, layout, label, options, onChange, ...props })
       styles,
       label,
       options,
-      render: (field) => /* @__PURE__ */ jsx53(Switch, { ...props, checked: field.value, onCheckedChange: field.onChange })
+      render: (field) => /* @__PURE__ */ jsx58(Switch, { ...props, checked: !!field.value, onCheckedChange: field.onChange })
     }
   );
 };
 
+// src/core/radio-button-group/RadioButtonGroup.tsx
+import { forwardRef as forwardRef16 } from "react";
+
 // src/core/radio-button-group/RadioButtonItem.tsx
-import { twJoin as twJoin20 } from "tailwind-merge";
-import { Fragment as Fragment8, jsx as jsx54, jsxs as jsxs23 } from "react/jsx-runtime";
+import { twJoin as twJoin23 } from "tailwind-merge";
+import { Fragment as Fragment8, jsx as jsx59, jsxs as jsxs25 } from "react/jsx-runtime";
 var RadioButtonItem = ({
   value,
   displayValue,
@@ -2480,26 +2634,26 @@ var RadioButtonItem = ({
   isChecked,
   onSelect,
   asCard = false
-}) => /* @__PURE__ */ jsxs23(
+}) => /* @__PURE__ */ jsxs25(
   "div",
   {
-    className: twJoin20(
+    className: twJoin23(
       "flex flex-col gap-2",
       asCard && "rounded-md border px-3 py-2",
-      asCard && !isChecked && "border-gray-200",
+      asCard && !isChecked && "border-surface-neutral",
       asCard && isChecked && "border-indigo-500"
     ),
     children: [
-      /* @__PURE__ */ jsxs23(
+      /* @__PURE__ */ jsxs25(
         "div",
         {
-          className: twJoin20(
+          className: twJoin23(
             "relative flex gap-2",
             disabled && "cursor-not-allowed opacity-30 *:cursor-not-allowed",
             expandedContentsStyle === "inline" ? "items-center" : "items-start"
           ),
           children: [
-            /* @__PURE__ */ jsx54(
+            /* @__PURE__ */ jsx59(
               "input",
               {
                 onChange: (evt) => onSelect?.(evt.target.value),
@@ -2508,21 +2662,21 @@ var RadioButtonItem = ({
                 checked: isChecked,
                 disabled,
                 type: "radio",
-                className: "mt-px border-gray-200 p-2 text-indigo-700 ring-0 ring-indigo-700"
+                className: "mt-px border-surface-neutral p-2 text-indigo-700 ring-0 ring-indigo-700"
               }
             ),
-            expandedContentsStyle === "inline" ? /* @__PURE__ */ jsxs23("label", { htmlFor: value, className: "flex w-full flex-row gap-2.5", children: [
-              /* @__PURE__ */ jsxs23("div", { className: "flex w-9/12 items-center gap-2", children: [
-                /* @__PURE__ */ jsx54("div", { className: "font-medium", children: displayValue }),
-                description && /* @__PURE__ */ jsx54("div", { id: `${value}-description`, className: "text-gray-500", children: description })
+            expandedContentsStyle === "inline" ? /* @__PURE__ */ jsxs25("label", { htmlFor: value, className: "flex w-full flex-row gap-2.5", children: [
+              /* @__PURE__ */ jsxs25("div", { className: "flex w-9/12 items-center gap-2", children: [
+                /* @__PURE__ */ jsx59("div", { className: "font-medium", children: displayValue }),
+                description && /* @__PURE__ */ jsx59("div", { id: `${value}-description`, className: "text-muted", children: description })
               ] }),
-              /* @__PURE__ */ jsx54("div", { className: "flex w-3/12 items-center", children: expandedContents?.(!isChecked || !!disabled) })
-            ] }) : /* @__PURE__ */ jsx54("label", { htmlFor: value, className: "flex flex-col gap-2", children: /* @__PURE__ */ jsx54("div", { className: "font-medium", children: displayValue }) })
+              /* @__PURE__ */ jsx59("div", { className: "flex w-3/12 items-center", children: expandedContents?.(!isChecked || !!disabled) })
+            ] }) : /* @__PURE__ */ jsx59("label", { htmlFor: value, className: "flex flex-col gap-2", children: /* @__PURE__ */ jsx59("div", { className: "font-medium", children: displayValue }) })
           ]
         }
       ),
-      expandedContentsStyle !== "inline" && /* @__PURE__ */ jsxs23(Fragment8, { children: [
-        description && /* @__PURE__ */ jsx54("div", { id: `${value}-description`, className: "text-gray-500", children: description }),
+      expandedContentsStyle !== "inline" && /* @__PURE__ */ jsxs25(Fragment8, { children: [
+        description && /* @__PURE__ */ jsx59("div", { id: `${value}-description`, className: "text-muted", children: description }),
         expandedContents?.(!isChecked || !!disabled)
       ] })
     ]
@@ -2530,39 +2684,41 @@ var RadioButtonItem = ({
 );
 
 // src/core/radio-button-group/RadioButtonGroup.tsx
-import { jsx as jsx55 } from "react/jsx-runtime";
-var RadioButtonGroup = ({ className, items, onChange, value, asCards = false }) => /* @__PURE__ */ jsx55("fieldset", { className, children: /* @__PURE__ */ jsx55("div", { className: "space-y-3", children: items.map(
-  ({ value: itemValue, displayValue, description, expandedContents, expandedContentsStyle, disabled }, index) => /* @__PURE__ */ jsx55(
-    RadioButtonItem,
-    {
-      disabled,
-      onSelect: onChange,
-      isChecked: value === itemValue,
-      value: itemValue,
-      displayValue,
-      description,
-      expandedContents,
-      expandedContentsStyle,
-      asCard: asCards
-    },
-    index
-  )
-) }) });
+import { jsx as jsx60 } from "react/jsx-runtime";
+var RadioButtonGroup = forwardRef16(
+  ({ className, items, onChange, value, asCards = false }, ref) => /* @__PURE__ */ jsx60("fieldset", { ref, className, children: /* @__PURE__ */ jsx60("div", { className: "space-y-3", children: items.map(
+    ({ value: itemValue, displayValue, description, expandedContents, expandedContentsStyle, disabled }, index) => /* @__PURE__ */ jsx60(
+      RadioButtonItem,
+      {
+        disabled,
+        onSelect: onChange,
+        isChecked: value === itemValue,
+        value: itemValue,
+        displayValue,
+        description,
+        expandedContents,
+        expandedContentsStyle,
+        asCard: asCards
+      },
+      index
+    )
+  ) }) })
+);
 
 // src/core/form/components/FormRadioButtonGroup.tsx
-import { Fragment as Fragment9, jsx as jsx56, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx61, jsxs as jsxs26 } from "react/jsx-runtime";
 var FormRadioButtonGroup = ({
   name,
   items,
   onChange,
   asCards = false,
   className
-}) => /* @__PURE__ */ jsx56(
+}) => /* @__PURE__ */ jsx61(
   ControlledField,
   {
     name,
-    render: (field) => /* @__PURE__ */ jsxs24(Fragment9, { children: [
-      /* @__PURE__ */ jsx56(
+    render: (field) => /* @__PURE__ */ jsxs26(Fragment9, { children: [
+      /* @__PURE__ */ jsx61(
         RadioButtonGroup,
         {
           ...field,
@@ -2575,15 +2731,15 @@ var FormRadioButtonGroup = ({
           asCards
         }
       ),
-      /* @__PURE__ */ jsx56(FieldErrorMessage, { error: field.error })
+      /* @__PURE__ */ jsx61(FieldErrorMessage, { error: field.error })
     ] })
   }
 );
 
 // src/core/form/components/FormDatePicker.tsx
 import { useCallback as useCallback7 } from "react";
-import { twJoin as twJoin21 } from "tailwind-merge";
-import { jsx as jsx57 } from "react/jsx-runtime";
+import { twJoin as twJoin24 } from "tailwind-merge";
+import { jsx as jsx62 } from "react/jsx-runtime";
 var FormDatePicker = ({
   name,
   styles,
@@ -2608,7 +2764,7 @@ var FormDatePicker = ({
     },
     [onChangeInternal, onChange]
   );
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx62(
     FormItem,
     {
       layout,
@@ -2616,7 +2772,7 @@ var FormDatePicker = ({
       label,
       options,
       ref: containerRef,
-      render: /* @__PURE__ */ jsx57("div", { className: twJoin21(disabled && "text-gray-500"), children: /* @__PURE__ */ jsx57(
+      render: /* @__PURE__ */ jsx62("div", { className: twJoin24(disabled && "text-muted"), children: /* @__PURE__ */ jsx62(
         DatePicker,
         {
           ...rest,
@@ -2634,114 +2790,81 @@ var FormDatePicker = ({
   );
 };
 
-// src/core/form/components/schemas/currency-schemas.ts
-import { z } from "zod";
-var CURRENCY_REGEX = /^-?(?:\d{1,3}(?:,\d{3})*|\d+|\.\d{1,2})(?:\.\d{1,2})?$/;
-var DOLLARS_STR_ERROR_MESSAGE = "Must use dollars and cents or whole numbers.";
-var dollarsStrSchema = z.string().regex(CURRENCY_REGEX, DOLLARS_STR_ERROR_MESSAGE);
-var requiredDollarsStrSchema = z.string().trim().nonempty("Required").regex(CURRENCY_REGEX, DOLLARS_STR_ERROR_MESSAGE);
-var requiredDollarsStrSchemaWithCustomMessage = (requiredError, invalidTypeError) => z.string().trim().nonempty(requiredError).regex(CURRENCY_REGEX, invalidTypeError);
-var requiredNonZeroDollarsStrSchema = requiredDollarsStrSchema.refine(
-  (value) => parseFloat(value) !== 0,
-  "Amount cannot be $0.00"
-);
-var requiredPositiveDollarsStrSchema = requiredDollarsStrSchema.refine(
-  (value) => parseFloat(value) > 0,
-  "Amount must be greater than $0.00"
-);
-var requiredPositiveOrZeroDollarsStrSchema = requiredDollarsStrSchema.refine(
-  (value) => parseFloat(value) >= 0,
-  "Amount must be greater than or equal to $0.00"
-);
-
-// src/core/form/components/schemas/form-schemas.ts
-import { z as z3 } from "zod";
-
-// src/core/form/components/schemas/helper-schemas.ts
-import { z as z2 } from "zod";
-var asOptional = (schema) => z2.union([
-  // order is important: the empty-like literals must precede actual schema
-  z2.literal(null).transform(() => void 0),
-  z2.literal("").transform(() => void 0),
-  z2.string().trim().transform((val) => val === "" ? void 0 : val).pipe(z2.undefined()),
-  schema.optional()
-]);
-var asNullish = (schema) => z2.union([
-  // order is important: the empty-like literals must precede actual schema
-  z2.literal(null).transform(() => void 0),
-  z2.literal("").transform(() => void 0),
-  z2.string().trim().transform((val) => val === "" ? void 0 : val).pipe(z2.undefined()),
-  schema.nullish()
-]);
-var asNumericStr = (schema, message = "Only numbers allowed") => schema.regex(/^\d+$/i, message);
-var asRequiredCustom = (message = "Required") => {
-  return z2.custom((value) => {
-    if (value == null || typeof value !== "object") {
-      return !!value;
-    }
-    if (Array.isArray(value)) {
-      return value.length > 0;
-    }
-    return Object.keys(value).length > 0;
-  }, message);
-};
-
-// src/core/form/components/schemas/form-schemas.ts
-var npiSchema = asNumericStr(z3.string().trim().nonempty("Required").length(10, "Must have 10 numbers"));
-var npiSchemaOptional = asOptional(asNumericStr(z3.string().trim()).length(10, "Must have 10 numbers"));
-var taxonomyCodeSchema = z3.string().trim().nonempty("Must contain characters, not just whitespace").length(10, "Must have 10 characters");
-var TAX_ID_REGEX = /^(([0-9]{9})|([0-9]{3}-[0-9]{2}-[0-9]{4})|([0-9]{2}-[0-9]{7}))$/i;
-var taxIdSchema = z3.string().trim().nonempty("Required").regex(TAX_ID_REGEX, "Must have 9 numbers formatted: XXXXXXXXX or XXX-XX-XXXX or XX-XXXXXXX");
-
-// src/core/form/components/schemas/selected-amount-schema.ts
-import { z as z4 } from "zod";
-var selectedAmountSchema = z4.object({
-  selected: asOptional(z4.boolean()),
-  amountStr: asOptional(dollarsStrSchema)
-});
-
-// src/core/form/components/schemas/utils.ts
-import { z as z5 } from "zod";
-var buildZodIssue = (path, message) => ({
-  path: Array.isArray(path) ? path : [path],
-  message,
-  code: z5.ZodIssueCode.custom
-});
-
 // src/core/drawer/Drawer.tsx
-import { forwardRef as forwardRef15, Suspense, useEffect as useEffect6, useRef as useRef6 } from "react";
-import { twJoin as twJoin23 } from "tailwind-merge";
+import { forwardRef as forwardRef17, Suspense, useEffect as useEffect6, useRef as useRef6 } from "react";
+import { twJoin as twJoin26 } from "tailwind-merge";
 
 // src/core/loaders/Spinner.tsx
-import { faSpinner } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon as FontAwesomeIcon2 } from "@fortawesome/react-fontawesome";
-import { twJoin as twJoin22 } from "tailwind-merge";
-import { jsx as jsx58 } from "react/jsx-runtime";
-var Spinner = ({ className, ...props }) => /* @__PURE__ */ jsx58(
-  FontAwesomeIcon2,
-  {
-    ...props,
-    className: twJoin22("animate-spin text-gray-400", className),
-    icon: faSpinner
-  }
-);
+import { faSpinnerThird } from "@fortawesome/sharp-solid-svg-icons";
+import { twJoin as twJoin25 } from "tailwind-merge";
+import { jsx as jsx63 } from "react/jsx-runtime";
+var Spinner = ({ className, ...props }) => /* @__PURE__ */ jsx63(FontAwesomeIcon2, { ...props, className: twJoin25("animate-spin text-muted", className), icon: faSpinnerThird });
 
 // src/core/loaders/LoadingState.tsx
-import { jsx as jsx59 } from "react/jsx-runtime";
-var LoadingStateTemplate = ({ children }) => /* @__PURE__ */ jsx59("div", { className: "inset-0 z-10 flex h-full items-center justify-center", children });
-var LoadingState = ({ size = "2x" }) => /* @__PURE__ */ jsx59(LoadingStateTemplate, { children: /* @__PURE__ */ jsx59(Spinner, { size }) });
+import { jsx as jsx64, jsxs as jsxs27 } from "react/jsx-runtime";
+var LoadingStateTemplate = ({ children }) => /* @__PURE__ */ jsx64("div", { className: "inset-0 z-10 flex h-full items-center justify-center", children });
+var LoadingState = ({ size = "2x", title, description }) => /* @__PURE__ */ jsx64(LoadingStateTemplate, { children: /* @__PURE__ */ jsxs27("div", { className: "flex flex-col items-center justify-center gap-3", children: [
+  /* @__PURE__ */ jsx64(Spinner, { size }),
+  (title || description) && /* @__PURE__ */ jsxs27("div", { className: "flex max-w-prose flex-col text-center", children: [
+    title && /* @__PURE__ */ jsx64(Text, { variant: "title-3", className: "text-muted", children: title }),
+    description && /* @__PURE__ */ jsx64(Text, { variant: "footnote", className: "leading-5 text-muted", children: description })
+  ] })
+] }) });
 
 // src/core/loaders/LoadingBar.tsx
-import { twMerge as twMerge7 } from "tailwind-merge";
-import { jsx as jsx60 } from "react/jsx-runtime";
-var LoadingBar = ({ className }) => /* @__PURE__ */ jsx60("div", { className: twMerge7("relative h-3 w-full overflow-hidden rounded-full bg-gray-100", className), children: /* @__PURE__ */ jsx60(
+import { twMerge as twMerge9 } from "tailwind-merge";
+import { jsx as jsx65 } from "react/jsx-runtime";
+var LoadingBar = ({ className }) => /* @__PURE__ */ jsx65("div", { className: twMerge9("relative h-3 w-full overflow-hidden rounded-full bg-surface-neutral", className), children: /* @__PURE__ */ jsx65(
   "div",
   {
-    className: "absolute inset-0 w-full animate-loading-slide bg-gradient-to-r from-transparent via-indigo-400/60 to-transparent",
+    className: "absolute inset-0 w-full animate-loading-slide bg-linear-to-r from-transparent via-indigo-400/60 to-transparent",
     style: { width: "50%" }
   }
 ) });
 
+// src/core/loaders/TwoCirclesSpinner.tsx
+import { twMerge as twMerge10 } from "tailwind-merge";
+import { jsx as jsx66, jsxs as jsxs28 } from "react/jsx-runtime";
+var sizeConfig = {
+  sm: { className: "w-[30px] h-[30px]", strokeWidth: 8 },
+  md: { className: "w-[50px] h-[50px]", strokeWidth: 5 },
+  lg: { className: "w-[100px] h-[100px]", strokeWidth: 3 },
+  xl: { className: "w-[200px] h-[200px]", strokeWidth: 2 }
+};
+var SpinnerSvg = ({ size = "md" }) => {
+  const { className: sizeClass, strokeWidth } = sizeConfig[size];
+  return /* @__PURE__ */ jsxs28("div", { className: twMerge10("relative", sizeClass), children: [
+    /* @__PURE__ */ jsx66("svg", { className: "absolute inset-0 animate-orbit-large", viewBox: "0 0 100 100", fill: "none", children: /* @__PURE__ */ jsx66(
+      "path",
+      {
+        d: "M 95 50 A 45 45 0 0 1 5 50",
+        stroke: "currentColor",
+        strokeWidth,
+        strokeLinecap: "round",
+        className: "text-indigo-600"
+      }
+    ) }),
+    /* @__PURE__ */ jsx66("svg", { className: "absolute inset-0 animate-orbit-small", viewBox: "0 0 100 100", fill: "none", children: /* @__PURE__ */ jsx66(
+      "path",
+      {
+        d: "M 75 50 A 25 25 0 0 1 25 50",
+        stroke: "currentColor",
+        strokeWidth,
+        strokeLinecap: "round",
+        className: "text-gray-200"
+      }
+    ) })
+  ] });
+};
+var TwoCirclesSpinner = ({ className, size = "md", title, description }) => /* @__PURE__ */ jsxs28("div", { className: twMerge10("flex flex-col items-center justify-center gap-3", className), children: [
+  /* @__PURE__ */ jsx66(SpinnerSvg, { size }),
+  (title || description) && /* @__PURE__ */ jsxs28("div", { className: "flex max-w-prose flex-col text-center", children: [
+    title && /* @__PURE__ */ jsx66(Text, { variant: "title-3", className: "text-muted", children: title }),
+    description && /* @__PURE__ */ jsx66(Text, { variant: "footnote", className: "leading-5 text-muted", children: description })
+  ] })
+] });
+
 // src/core/drawer/drawerState.ts
 import { createContext as createContext5, useContext as useContext5 } from "react";
 var DrawerStateContext = createContext5({
@@ -2865,7 +2988,7 @@ var useDrawerResize = ({ slider, drawer, isOpen, defaultSizePct, persistWidth })
 };
 
 // src/core/drawer/Drawer.tsx
-import { jsx as jsx61, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs29 } from "react/jsx-runtime";
 var useKeypress = (key, action) => {
   useEffect6(() => {
     const onKeyup = (e) => {
@@ -2880,7 +3003,7 @@ var drawerSizes = {
   md: 3 / 4,
   lg: 5 / 6
 };
-var Drawer = forwardRef15(
+var Drawer = forwardRef17(
   ({ isOpen, onClose, onClickOutside, blurredOverlay, children, width = "md", persistWidth }, ref) => {
     const slider = useRef6(null);
     const drawer = useRef6(null);
@@ -2894,7 +3017,7 @@ var Drawer = forwardRef15(
     useKeypress("Escape", () => {
       onClose?.();
     });
-    return /* @__PURE__ */ jsxs25(
+    return /* @__PURE__ */ jsxs29(
       DrawerStateContext.Provider,
       {
         value: {
@@ -2902,43 +3025,43 @@ var Drawer = forwardRef15(
           onClose: () => onClose?.()
         },
         children: [
-          /* @__PURE__ */ jsx61(
+          /* @__PURE__ */ jsx67(
             "div",
             {
-              className: twJoin23(
+              className: twJoin26(
                 "absolute inset-0 z-30 transition-all",
-                isOpen && blurredOverlay && "bg-gray-500/10 backdrop-blur-sm",
+                isOpen && blurredOverlay && "bg-surface-light0/10 backdrop-blur-sm",
                 // If the drawer is open, and the blurredOverlay prop is given, stop the user from clicking through the overlay
                 isOpen && blurredOverlay ? "pointer-events-auto" : "pointer-events-none"
               ),
               onClick: onClickOutside
             }
           ),
-          /* @__PURE__ */ jsx61(
+          /* @__PURE__ */ jsx67(
             "div",
             {
               ref: slider,
-              className: twJoin23(
+              className: twJoin26(
                 "group absolute top-0 bottom-0 z-50 h-screen w-4 translate-x-1/2 cursor-col-resize",
                 isOpen ? "block" : "hidden"
               ),
-              children: /* @__PURE__ */ jsx61("div", { className: "absolute top-0 right-1.5 bottom-0 left-1.5 bg-indigo-700 opacity-0 transition-opacity group-hover:opacity-100" })
+              children: /* @__PURE__ */ jsx67("div", { className: "absolute top-0 right-1.5 bottom-0 left-1.5 bg-indigo-700 opacity-0 transition-opacity group-hover:opacity-100" })
             }
           ),
-          /* @__PURE__ */ jsx61(
+          /* @__PURE__ */ jsx67(
             "div",
             {
-              className: "absolute top-0 right-0 bottom-0 z-drawer flex flex-col overflow-y-hidden bg-gray-50 shadow",
+              className: "absolute top-0 right-0 bottom-0 z-drawer flex flex-col overflow-y-hidden bg-surface-light shadow",
               ref: drawer,
-              children: /* @__PURE__ */ jsx61(
+              children: /* @__PURE__ */ jsx67(
                 "div",
                 {
                   ref,
-                  className: twJoin23(
+                  className: twJoin26(
                     "relative flex w-full flex-1 flex-col overflow-hidden bg-white transition-all delay-100 duration-100 ease-in-out",
                     isOpen ? "opacity-100" : "opacity-0"
                   ),
-                  children: isOpen ? /* @__PURE__ */ jsx61(Suspense, { fallback: /* @__PURE__ */ jsx61(LoadingState, {}), children }) : void 0
+                  children: isOpen ? /* @__PURE__ */ jsx67(Suspense, { fallback: /* @__PURE__ */ jsx67(LoadingState, {}), children }) : void 0
                 }
               )
             }
@@ -2950,47 +3073,24 @@ var Drawer = forwardRef15(
 );
 
 // src/core/drawer/DrawerHeader.tsx
-import { faBookmark, faChevronDown as faChevronDown4, faChevronUp, faXmark as faXmark3 } from "@fortawesome/free-solid-svg-icons";
-import { twJoin as twJoin27 } from "tailwind-merge";
-
-// src/core/text/Text.tsx
-import { twJoin as twJoin24 } from "tailwind-merge";
-import { jsx as jsx62 } from "react/jsx-runtime";
-var VARIANT_STYLES = {
-  "marketing-headline": "text-marketing-headline",
-  "headline-1": "text-headline-1",
-  "headline-2": "text-headline-2",
-  "headline-3": "text-headline-3",
-  "headline-4": "text-headline-4",
-  "title-1": "text-title-1",
-  "title-2": "text-title-2",
-  "title-3": "text-title-3",
-  "body-1": "text-body-1",
-  "body-2": "text-body-2",
-  label: "text-label",
-  footnote: "text-footnote",
-  smallcaps: "text-smallcaps"
-};
-var Text = ({ as, variant = "body-1", children, className, ...props }) => {
-  const Tag2 = as ?? "p";
-  return /* @__PURE__ */ jsx62(Tag2, { ...props, className: twJoin24(VARIANT_STYLES[variant], className), children });
-};
+import { faBookmark, faChevronDown as faChevronDown4, faChevronUp, faClose } from "@fortawesome/sharp-solid-svg-icons";
+import { twJoin as twJoin29 } from "tailwind-merge";
 
 // src/core/skeleton/Skeleton.tsx
-import { twMerge as twMerge8 } from "tailwind-merge";
-import { jsx as jsx63 } from "react/jsx-runtime";
-var Skeleton = ({ className }) => /* @__PURE__ */ jsx63("div", { className: twMerge8("animate-skeleton-pulse rounded-lg bg-gray-200", className) });
+import { twMerge as twMerge11 } from "tailwind-merge";
+import { jsx as jsx68 } from "react/jsx-runtime";
+var Skeleton = ({ className }) => /* @__PURE__ */ jsx68("div", { className: twMerge11("animate-skeleton-pulse rounded-lg bg-surface-dark", className) });
 
 // src/core/skeleton/TabsSkeleton/TabsSkeleton.tsx
-import { twMerge as twMerge9 } from "tailwind-merge";
-import { jsx as jsx64 } from "react/jsx-runtime";
+import { twMerge as twMerge12 } from "tailwind-merge";
+import { jsx as jsx69 } from "react/jsx-runtime";
 var TabsSkeleton = ({ numTabs = 3, className, tabClassName = "h-8 w-32" }) => {
-  return /* @__PURE__ */ jsx64("div", { className: twMerge9("flex gap-4", className), children: Array.from({ length: numTabs }).map((_, index) => /* @__PURE__ */ jsx64(Skeleton, { className: tabClassName }, index)) });
+  return /* @__PURE__ */ jsx69("div", { className: twMerge12("flex gap-4", className), children: Array.from({ length: numTabs }).map((_, index) => /* @__PURE__ */ jsx69(Skeleton, { className: tabClassName }, index)) });
 };
 
 // src/core/skeleton/TableSkeleton/TableSkeleton.tsx
-import { twJoin as twJoin25 } from "tailwind-merge";
-import { jsx as jsx65 } from "react/jsx-runtime";
+import { twJoin as twJoin27 } from "tailwind-merge";
+import { jsx as jsx70 } from "react/jsx-runtime";
 var TableSkeleton = ({
   numTableCols = 4,
   numTableRows = 3,
@@ -2998,13 +3098,13 @@ var TableSkeleton = ({
   rowHeight,
   hasBorder = false
 }) => {
-  return /* @__PURE__ */ jsx65("table", { className: twJoin25("flex w-full flex-col gap-4", className), children: /* @__PURE__ */ jsx65("tbody", { className: twJoin25("flex flex-col", rowHeight === void 0 && "gap-4"), children: Array.from({ length: numTableRows }).map((_, index) => /* @__PURE__ */ jsx65(
+  return /* @__PURE__ */ jsx70("table", { className: twJoin27("flex w-full flex-col gap-4", className), children: /* @__PURE__ */ jsx70("tbody", { className: twJoin27("flex flex-col", rowHeight === void 0 && "gap-4"), children: Array.from({ length: numTableRows }).map((_, index) => /* @__PURE__ */ jsx70(
     "tr",
     {
-      className: twJoin25("flex gap-4", hasBorder && "px-2 not-last:border-b"),
+      className: twJoin27("flex gap-4", hasBorder && "px-2 not-last:border-b"),
       style: rowHeight ? { height: rowHeight } : void 0,
       children: Array.from({ length: numTableCols }).map((_2, index2) => {
-        return /* @__PURE__ */ jsx65("td", { className: "flex grow items-center px-1", children: /* @__PURE__ */ jsx65(Skeleton, { className: twJoin25("w-full", rowHeight ? "h-3" : "h-6") }, index2) }, index2);
+        return /* @__PURE__ */ jsx70("td", { className: "flex grow items-center px-1", children: /* @__PURE__ */ jsx70(Skeleton, { className: twJoin27("w-full", rowHeight ? "h-3" : "h-6") }, index2) }, index2);
       })
     },
     index
@@ -3012,27 +3112,27 @@ var TableSkeleton = ({
 };
 
 // src/core/skeleton/TableSkeleton/TableCheckboxSkeleton.tsx
-import { twJoin as twJoin26 } from "tailwind-merge";
-import { jsx as jsx66 } from "react/jsx-runtime";
+import { twJoin as twJoin28 } from "tailwind-merge";
+import { jsx as jsx71 } from "react/jsx-runtime";
 var TableCheckboxSkeleton = ({
   numTableRows = 3,
   className,
   rowHeight,
   hasBorder = false
 }) => {
-  return /* @__PURE__ */ jsx66("table", { className: twJoin26("flex w-full flex-col gap-4", className), children: /* @__PURE__ */ jsx66("tbody", { className: twJoin26("flex flex-col", rowHeight === void 0 && "gap-4"), children: Array.from({ length: numTableRows }).map((_, index) => /* @__PURE__ */ jsx66(
+  return /* @__PURE__ */ jsx71("table", { className: twJoin28("flex w-full flex-col gap-4", className), children: /* @__PURE__ */ jsx71("tbody", { className: twJoin28("flex flex-col", rowHeight === void 0 && "gap-4"), children: Array.from({ length: numTableRows }).map((_, index) => /* @__PURE__ */ jsx71(
     "tr",
     {
-      className: twJoin26("flex gap-4", hasBorder && "px-2 not-last:border-b"),
+      className: twJoin28("flex gap-4", hasBorder && "px-2 not-last:border-b"),
       style: rowHeight ? { height: rowHeight } : void 0,
-      children: /* @__PURE__ */ jsx66("td", { className: "flex grow items-center px-1", children: /* @__PURE__ */ jsx66(Skeleton, { className: twJoin26("w-full, rounded-none", rowHeight ? "h-3" : "h-6") }, index) }, index)
+      children: /* @__PURE__ */ jsx71("td", { className: "flex grow items-center px-1", children: /* @__PURE__ */ jsx71(Skeleton, { className: twJoin28("w-full, rounded-none", rowHeight ? "h-3" : "h-6") }, index) }, index)
     },
     index
   )) }) });
 };
 
 // src/core/drawer/DrawerHeader.tsx
-import { Fragment as Fragment10, jsx as jsx67, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx72, jsxs as jsxs30 } from "react/jsx-runtime";
 var DrawerHeader = ({
   resource,
   pagination,
@@ -3043,67 +3143,67 @@ var DrawerHeader = ({
   label
 }) => {
   const { onClose } = useDrawer();
-  return /* @__PURE__ */ jsxs26("div", { className: "z-1 flex w-full flex-col items-stretch shadow", children: [
-    /* @__PURE__ */ jsxs26("div", { className: "flex justify-between px-8 py-1 shadow-sm", children: [
-      /* @__PURE__ */ jsx67("div", { className: "flex items-center gap-1.5 text-base text-gray-500", children: resource && /* @__PURE__ */ jsxs26(Fragment10, { children: [
-        /* @__PURE__ */ jsx67(Icon, { icon: resource.icon || faBookmark }),
-        /* @__PURE__ */ jsx67("div", { children: resource.name })
+  return /* @__PURE__ */ jsxs30("div", { className: "z-1 flex w-full flex-col items-stretch shadow", children: [
+    /* @__PURE__ */ jsxs30("div", { className: "flex justify-between px-8 py-1 shadow-sm", children: [
+      /* @__PURE__ */ jsx72("div", { className: "flex items-center gap-1.5 text-base text-muted", children: resource && /* @__PURE__ */ jsxs30(Fragment10, { children: [
+        /* @__PURE__ */ jsx72(Icon, { icon: resource.icon || faBookmark }),
+        /* @__PURE__ */ jsx72("div", { children: resource.name })
       ] }) }),
-      /* @__PURE__ */ jsxs26("div", { className: "flex items-center gap-2", children: [
-        pagination && /* @__PURE__ */ jsxs26("div", { className: "flex gap-1", children: [
+      /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-2", children: [
+        pagination && /* @__PURE__ */ jsxs30("div", { className: "flex gap-1", children: [
           pagination.extra,
-          /* @__PURE__ */ jsx67(Button, { size: "sm", onClick: pagination.onPrevious, disabled: !pagination.hasPrevious, children: /* @__PURE__ */ jsx67(Icon, { icon: faChevronUp }) }),
-          /* @__PURE__ */ jsx67(Button, { size: "sm", onClick: pagination.onNext, disabled: !pagination.hasNext, children: /* @__PURE__ */ jsx67(Icon, { icon: faChevronDown4 }) })
+          /* @__PURE__ */ jsx72(Button, { size: "sm", onClick: pagination.onPrevious, disabled: !pagination.hasPrevious, children: /* @__PURE__ */ jsx72(Icon, { icon: faChevronUp }) }),
+          /* @__PURE__ */ jsx72(Button, { size: "sm", onClick: pagination.onNext, disabled: !pagination.hasNext, children: /* @__PURE__ */ jsx72(Icon, { icon: faChevronDown4 }) })
         ] }),
-        /* @__PURE__ */ jsx67("div", { "data-testid": "drawer-close", children: closeAction ? closeAction : /* @__PURE__ */ jsx67(Button, { size: "xs", variant: "transparent", onClick: onClose, children: /* @__PURE__ */ jsx67("span", { className: "text-xl text-gray-500", children: /* @__PURE__ */ jsx67(Icon, { icon: faXmark3 }) }) }) })
+        closeAction ?? /* @__PURE__ */ jsx72(Button, { size: "xs", variant: "transparent", onClick: onClose, children: /* @__PURE__ */ jsx72("span", { className: "text-xl text-muted", children: /* @__PURE__ */ jsx72(Icon, { icon: faClose }) }) })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs26("div", { className: "flex items-center gap-2 px-8 py-2", children: [
-      /* @__PURE__ */ jsxs26("div", { className: "flex min-w-0 shrink grow flex-col", children: [
-        /* @__PURE__ */ jsx67(Text, { variant: "title-1", className: twJoin27(typeof title === "string" && "truncate"), children: title }),
-        subtitle && /* @__PURE__ */ jsx67("div", { className: "text-base font-light", children: subtitle })
+    /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-2 px-8 py-2", children: [
+      /* @__PURE__ */ jsxs30("div", { className: "flex min-w-0 shrink grow flex-col", children: [
+        /* @__PURE__ */ jsx72(Text, { variant: "title-1", className: twJoin29(typeof title === "string" && "truncate"), children: title }),
+        subtitle && /* @__PURE__ */ jsx72("div", { className: "text-base font-light", children: subtitle })
       ] }),
-      label && /* @__PURE__ */ jsx67("div", { className: "flex items-center gap-2", children: label }),
-      /* @__PURE__ */ jsx67("div", { className: "flex shrink-0 items-center gap-2", children: actions })
+      label && /* @__PURE__ */ jsx72("div", { className: "flex items-center gap-2", children: label }),
+      /* @__PURE__ */ jsx72("div", { className: "flex shrink-0 items-center gap-2", children: actions })
     ] })
   ] });
 };
-var DrawerHeaderSkeleton = () => /* @__PURE__ */ jsxs26("div", { className: "space-y-2 px-8 py-2", children: [
-  /* @__PURE__ */ jsxs26("div", { className: "flex justify-between", children: [
-    /* @__PURE__ */ jsx67(Skeleton, { className: "h-6 w-36" }),
-    /* @__PURE__ */ jsx67(Skeleton, { className: "h-6 w-16" })
+var DrawerHeaderSkeleton = () => /* @__PURE__ */ jsxs30("div", { className: "space-y-2 px-8 py-2", children: [
+  /* @__PURE__ */ jsxs30("div", { className: "flex justify-between", children: [
+    /* @__PURE__ */ jsx72(Skeleton, { className: "h-6 w-36" }),
+    /* @__PURE__ */ jsx72(Skeleton, { className: "h-6 w-16" })
   ] }),
-  /* @__PURE__ */ jsx67(Skeleton, { className: "h-8 w-28" })
+  /* @__PURE__ */ jsx72(Skeleton, { className: "h-8 w-28" })
 ] });
 
 // src/core/empty-state/EmptyState.tsx
-import { faCircle as faCircle2 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon as FontAwesomeIcon3 } from "@fortawesome/react-fontawesome";
-import { forwardRef as forwardRef16 } from "react";
-import { jsx as jsx68, jsxs as jsxs27 } from "react/jsx-runtime";
-var EmptyState = forwardRef16(
-  ({ icon = faCircle2, title, description }, ref) => /* @__PURE__ */ jsxs27("div", { className: "flex flex-col items-center justify-center gap-3 p-4", ref, children: [
-    /* @__PURE__ */ jsx68(FontAwesomeIcon3, { className: "text-gray-500 ring-transparent", icon, size: "2x" }),
-    /* @__PURE__ */ jsxs27("div", { className: "flex max-w-prose flex-col text-center", children: [
-      title && /* @__PURE__ */ jsx68("h2", { className: "text-sm leading-6 font-medium text-gray-500", children: title }),
-      description && /* @__PURE__ */ jsx68("p", { className: "text-xs leading-5 font-normal text-gray-500", children: description })
+import { faCircleDashed } from "@fortawesome/sharp-solid-svg-icons";
+import { forwardRef as forwardRef18 } from "react";
+import { jsx as jsx73, jsxs as jsxs31 } from "react/jsx-runtime";
+var EmptyState = forwardRef18(
+  ({ icon = faCircleDashed, title, description }, ref) => /* @__PURE__ */ jsxs31("div", { className: "flex flex-col items-center justify-center gap-3 p-4", ref, children: [
+    /* @__PURE__ */ jsx73(FontAwesomeIcon3, { className: "text-muted ring-transparent", icon, size: "2x" }),
+    /* @__PURE__ */ jsxs31("div", { className: "flex max-w-prose flex-col text-center", children: [
+      title && /* @__PURE__ */ jsx73(Text, { variant: "title-3", className: "text-muted", children: title }),
+      description && /* @__PURE__ */ jsx73(Text, { variant: "footnote", className: "leading-5 text-muted", children: description })
     ] })
   ] })
 );
 
 // src/core/header-tile/HeaderTile.tsx
-import { twJoin as twJoin28 } from "tailwind-merge";
-import { jsx as jsx69, jsxs as jsxs28 } from "react/jsx-runtime";
-var HeaderTileSimple = ({ title, content, className }) => /* @__PURE__ */ jsxs28(
+import { twJoin as twJoin30 } from "tailwind-merge";
+import { jsx as jsx74, jsxs as jsxs32 } from "react/jsx-runtime";
+var HeaderTileSimple = ({ title, content, className }) => /* @__PURE__ */ jsxs32(
   "div",
   {
-    className: twJoin28(
-      "flex min-h-18.5 flex-col items-start justify-between gap-2 rounded-md border border-gray-200 px-3 py-1.5",
+    className: twJoin30(
+      "flex min-h-18.5 flex-col items-start justify-between gap-2 rounded-md border border-surface-neutral px-3 py-1.5",
       className
     ),
     children: [
-      /* @__PURE__ */ jsx69("p", { className: "max-w-35 text-base text-gray-900", children: title }),
-      /* @__PURE__ */ jsx69(Text, { children: content })
+      /* @__PURE__ */ jsx74("p", { className: "max-w-35 text-base text-dark", children: title }),
+      /* @__PURE__ */ jsx74(Text, { children: content })
     ]
   }
 );
@@ -3112,25 +3212,25 @@ var HeaderTileWithPopover = ({
   content,
   popover,
   className
-}) => /* @__PURE__ */ jsxs28(Popover.Root, { children: [
-  /* @__PURE__ */ jsx69(Popover.Trigger, { className: twJoin28("flex h-auto! min-h-18.5 justify-start py-1.5", className), children: /* @__PURE__ */ jsxs28("span", { className: "flex flex-col items-start justify-between gap-2", children: [
-    /* @__PURE__ */ jsx69("span", { className: "text-base text-gray-900", children: title }),
-    /* @__PURE__ */ jsx69("span", { children: content })
+}) => /* @__PURE__ */ jsxs32(Popover.Root, { children: [
+  /* @__PURE__ */ jsx74(Popover.Trigger, { className: twJoin30("flex h-auto! min-h-18.5 justify-start py-1.5", className), children: /* @__PURE__ */ jsxs32("span", { className: "flex flex-col items-start justify-between gap-2", children: [
+    /* @__PURE__ */ jsx74("span", { className: "text-base text-dark", children: title }),
+    /* @__PURE__ */ jsx74("span", { children: content })
   ] }) }),
-  popover && /* @__PURE__ */ jsx69(Popover.Body, { contentClassName: "max-w-150 min-w-60 p-3", children: popover })
+  popover && /* @__PURE__ */ jsx74(Popover.Body, { contentClassName: "max-w-150 min-w-60 p-3", children: popover })
 ] });
 var HeaderTile = (props) => {
   if (props.popover) {
-    return /* @__PURE__ */ jsx69(HeaderTileWithPopover, { ...props });
+    return /* @__PURE__ */ jsx74(HeaderTileWithPopover, { ...props });
   }
-  return /* @__PURE__ */ jsx69(HeaderTileSimple, { ...props });
+  return /* @__PURE__ */ jsx74(HeaderTileSimple, { ...props });
 };
 
 // src/core/label/Label.tsx
-import * as React11 from "react";
+import * as React12 from "react";
 
 // src/core/label/labelStyles.ts
-import { twJoin as twJoin29 } from "tailwind-merge";
+import { twJoin as twJoin31 } from "tailwind-merge";
 var sizeStyles3 = {
   xs: "px-1 text-xs gap-0.5 h-4 rounded-md",
   sm: "h-5 gap-0.5 px-1 text-sm rounded-md",
@@ -3139,12 +3239,12 @@ var sizeStyles3 = {
 };
 var colorStyles2 = {
   default: {
-    default: "bg-gray-100 text-gray-700 border border-gray-200",
+    default: "bg-surface-neutral text-neutral border border-surface-neutral",
     primary: "bg-indigo-100 text-indigo-700 border border-indigo-200",
-    success: "bg-green-100 text-green-700 border border-green-200",
-    warning: "bg-yellow-100 text-yellow-700 border border-yellow-200",
-    danger: "bg-red-100 text-red-700 border border-red-200",
-    disabled: "bg-gray-100 text-gray-400 border border-gray-200"
+    success: "bg-surface-success text-success border border-surface-success",
+    warning: "bg-surface-warning text-warning border border-surface-warning",
+    danger: "bg-surface-danger text-red-700 border border-surface-danger",
+    disabled: "bg-surface-neutral text-placeholder border border-surface-neutral"
   },
   dark: {
     default: "bg-gray-700 text-gray-50 border border-gray-600",
@@ -3159,21 +3259,21 @@ var colorStyles2 = {
     disabled: "bg-gray-700 text-gray-50 border border-gray-600"
   }
 };
-var labelStyles = ({ intent = "default", size = "sm", variant = "default" }) => twJoin29(
+var labelStyles = ({ intent = "default", size = "sm", variant = "default" }) => twJoin31(
   "inline-flex w-fit shrink-0 items-center justify-center truncate font-normal break-all",
   sizeStyles3[size],
   colorStyles2[variant][intent]
 );
 
 // src/core/label/Label.tsx
-import { jsx as jsx70 } from "react/jsx-runtime";
+import { jsx as jsx75 } from "react/jsx-runtime";
 var LabelImpl2 = ({ children, intent, size, variant, ...rest }, ref) => {
-  return /* @__PURE__ */ jsx70("span", { ref, className: labelStyles({ intent, size, variant }), ...rest, children });
+  return /* @__PURE__ */ jsx75("span", { ref, className: labelStyles({ intent, size, variant }), ...rest, children });
 };
-var Label = React11.forwardRef(LabelImpl2);
+var Label = React12.forwardRef(LabelImpl2);
 
 // src/core/menu/Menu.tsx
-import { faEllipsis } from "@fortawesome/free-solid-svg-icons";
+import { faEllipsis } from "@fortawesome/sharp-solid-svg-icons";
 import {
   Content as Content6,
   Item,
@@ -3182,21 +3282,21 @@ import {
   Separator,
   Trigger as Trigger5
 } from "@radix-ui/react-dropdown-menu";
-import { twJoin as twJoin30 } from "tailwind-merge";
-import { jsx as jsx71, jsxs as jsxs29 } from "react/jsx-runtime";
+import { twJoin as twJoin32 } from "tailwind-merge";
+import { jsx as jsx76, jsxs as jsxs33 } from "react/jsx-runtime";
 var MenuTrigger = ({ children, ...rest }) => {
   if (children == null) {
-    return /* @__PURE__ */ jsx71(Trigger5, { asChild: true, children: /* @__PURE__ */ jsx71(Button, { ...rest, children: /* @__PURE__ */ jsx71(Icon, { icon: faEllipsis }) }) });
+    return /* @__PURE__ */ jsx76(Trigger5, { asChild: true, children: /* @__PURE__ */ jsx76(Button, { ...rest, children: /* @__PURE__ */ jsx76(Icon, { icon: faEllipsis }) }) });
   }
   if (typeof children === "string") {
-    return /* @__PURE__ */ jsx71(Trigger5, { asChild: true, children: /* @__PURE__ */ jsxs29(Button, { ...rest, children: [
-      /* @__PURE__ */ jsx71("span", { children }),
-      /* @__PURE__ */ jsx71(DropdownChevron, {})
+    return /* @__PURE__ */ jsx76(Trigger5, { asChild: true, children: /* @__PURE__ */ jsxs33(Button, { ...rest, children: [
+      /* @__PURE__ */ jsx76("span", { children }),
+      /* @__PURE__ */ jsx76(DropdownChevron, {})
     ] }) });
   }
-  return /* @__PURE__ */ jsx71(Trigger5, { asChild: true, children: /* @__PURE__ */ jsx71(Button, { ...rest, children }) });
+  return /* @__PURE__ */ jsx76(Trigger5, { asChild: true, children: /* @__PURE__ */ jsx76(Button, { ...rest, children }) });
 };
-var MenuContent = ({ children, unrestrictedHeight = false, ...props }) => /* @__PURE__ */ jsx71(Portal4, { children: /* @__PURE__ */ jsx71(
+var MenuContent = ({ children, unrestrictedHeight = false, ...props }) => /* @__PURE__ */ jsx76(Portal4, { children: /* @__PURE__ */ jsx76(
   Content6,
   {
     collisionPadding: 8,
@@ -3204,16 +3304,16 @@ var MenuContent = ({ children, unrestrictedHeight = false, ...props }) => /* @__
     align: "end",
     className: "z-100 min-w-48 rounded-lg bg-white p-1.5 shadow-lg",
     ...props,
-    children: /* @__PURE__ */ jsx71("div", { className: twJoin30("overflow-y-auto", !unrestrictedHeight && "max-h-[252px]"), children })
+    children: /* @__PURE__ */ jsx76("div", { className: twJoin32("overflow-y-auto", !unrestrictedHeight && "max-h-[252px]"), children })
   }
 ) });
-var MenuItem = ({ loading, disabled, size = "default", ...rest }) => /* @__PURE__ */ jsx71(
+var MenuItem = ({ loading, disabled, size = "default", ...rest }) => /* @__PURE__ */ jsx76(
   Item,
   {
     "data-loading": loading || void 0,
     disabled: loading || disabled,
-    className: twJoin30(
-      "on-menu-item-active group flex w-full cursor-pointer items-center rounded-md p-2 text-gray-700 outline-hidden select-none data-disabled:cursor-not-allowed data-disabled:text-gray-400 data-highlighted:bg-gray-100 data-loading:bg-transparent data-loading:text-gray-400",
+    className: twJoin32(
+      "on-menu-item-active group flex w-full cursor-pointer items-center rounded-md p-2 text-neutral outline-hidden select-none data-disabled:cursor-not-allowed data-disabled:text-placeholder data-highlighted:bg-surface-neutral data-loading:bg-transparent data-loading:text-placeholder",
       size === "default" ? "gap-1.5 text-sm" : "gap-2 text-base"
     ),
     ...rest
@@ -3221,31 +3321,31 @@ var MenuItem = ({ loading, disabled, size = "default", ...rest }) => /* @__PURE_
 );
 var MenuItemWithDisabledTooltip = ({ tooltip, onSelect, ...props }) => {
   if (!props.disabled || !tooltip) {
-    return /* @__PURE__ */ jsx71(MenuItem, { ...props, onSelect });
+    return /* @__PURE__ */ jsx76(MenuItem, { ...props, onSelect });
   }
-  return /* @__PURE__ */ jsx71(
+  return /* @__PURE__ */ jsx76(
     Tooltip,
     {
-      trigger: /* @__PURE__ */ jsx71("span", { children: /* @__PURE__ */ jsx71(MenuItem, { ...props }) }),
+      trigger: /* @__PURE__ */ jsx76("span", { children: /* @__PURE__ */ jsx76(MenuItem, { ...props }) }),
       content: tooltip,
       side: "left"
     }
   );
 };
-var MenuRoot = (props) => /* @__PURE__ */ jsx71(Root6, { modal: false, ...props });
-var MenuSeparator = () => /* @__PURE__ */ jsx71(Separator, { className: "my-[5px] h-px bg-gray-200" });
+var MenuRoot = (props) => /* @__PURE__ */ jsx76(Root6, { modal: false, ...props });
+var MenuSeparator = () => /* @__PURE__ */ jsx76(Separator, { className: "my-[5px] h-px bg-surface-dark" });
 var Menu = ({ children, trigger, align, variant = "default", triggerSize, ...rest }) => {
   switch (variant) {
     case "minimal":
-      return /* @__PURE__ */ jsxs29(MenuRoot, { ...rest, children: [
-        /* @__PURE__ */ jsx71(MenuTrigger, { ...rest, size: triggerSize || "xs", variant: "transparent", children: trigger }),
-        /* @__PURE__ */ jsx71(MenuContent, { align, children })
+      return /* @__PURE__ */ jsxs33(MenuRoot, { ...rest, children: [
+        /* @__PURE__ */ jsx76(MenuTrigger, { ...rest, size: triggerSize || "xs", variant: "transparent", children: trigger }),
+        /* @__PURE__ */ jsx76(MenuContent, { align, children })
       ] });
     case "default":
     default:
-      return /* @__PURE__ */ jsxs29(MenuRoot, { ...rest, children: [
-        /* @__PURE__ */ jsx71(MenuTrigger, { size: triggerSize, ...rest, children: trigger }),
-        /* @__PURE__ */ jsx71(MenuContent, { align, children })
+      return /* @__PURE__ */ jsxs33(MenuRoot, { ...rest, children: [
+        /* @__PURE__ */ jsx76(MenuTrigger, { size: triggerSize, ...rest, children: trigger }),
+        /* @__PURE__ */ jsx76(MenuContent, { align, children })
       ] });
   }
 };
@@ -3258,32 +3358,33 @@ Menu.ItemWithDisabledToolTip = MenuItemWithDisabledTooltip;
 Menu.Separator = MenuSeparator;
 
 // src/core/modal/components/ModalActions.tsx
-import { jsx as jsx72 } from "react/jsx-runtime";
+import { jsx as jsx77 } from "react/jsx-runtime";
 var ModalActions = ({ children }) => {
   if (children == null) {
     return null;
   }
-  return /* @__PURE__ */ jsx72("div", { className: "sticky bottom-0 z-2 flex items-center justify-end gap-x-2 overflow-clip rounded-b-xl bg-white/80 px-8 pt-2 pb-6 backdrop-blur-sm", children });
+  return /* @__PURE__ */ jsx77("div", { className: "sticky bottom-0 z-2 flex items-center justify-end gap-x-2 overflow-clip rounded-b-xl bg-white/80 px-8 pt-2 pb-6 backdrop-blur-sm", children });
 };
 
 // src/core/modal/components/ModalBody.tsx
-import { jsx as jsx73 } from "react/jsx-runtime";
+import { jsx as jsx78 } from "react/jsx-runtime";
 var ModalBody = ({ children }) => {
   if (children == null) {
     return null;
   }
-  return /* @__PURE__ */ jsx73("div", { className: "px-8 py-1.5", children });
+  return /* @__PURE__ */ jsx78("div", { className: "px-8 py-1.5", children });
 };
 
 // src/core/modal/components/ModalCloseButton.tsx
 import { Close as Close2 } from "@radix-ui/react-dialog";
-import { jsx as jsx74 } from "react/jsx-runtime";
-var ModalCloseButton = (props) => /* @__PURE__ */ jsx74(Close2, { asChild: true, children: /* @__PURE__ */ jsx74(Button, { ...props }) });
+import { jsx as jsx79 } from "react/jsx-runtime";
+var ModalCloseButton = (props) => /* @__PURE__ */ jsx79(Close2, { asChild: true, children: /* @__PURE__ */ jsx79(Button, { ...props }) });
 
 // src/core/modal/components/ModalContent.tsx
 import { Content as Content7, Overlay, Portal as Portal5 } from "@radix-ui/react-dialog";
-import { twJoin as twJoin31 } from "tailwind-merge";
-import { jsx as jsx75 } from "react/jsx-runtime";
+import { forwardRef as forwardRef20 } from "react";
+import { twJoin as twJoin33 } from "tailwind-merge";
+import { jsx as jsx80 } from "react/jsx-runtime";
 var preventDismiss = (e) => e.preventDefault();
 var handleDismiss = (dismissible) => {
   if (dismissible) {
@@ -3291,88 +3392,91 @@ var handleDismiss = (dismissible) => {
   }
   return preventDismiss;
 };
-var ModalContent = ({
-  children,
-  maxWidthClassName = "max-w-prose",
-  overflowYClassName = "overflow-y-auto",
-  onDismiss,
-  dismissible = true,
-  fullscreen,
-  ...rest
-}) => /* @__PURE__ */ jsx75(Portal5, { children: /* @__PURE__ */ jsx75(
-  Overlay,
-  {
-    className: "fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-fade-in-custom-easing",
-    children: /* @__PURE__ */ jsx75(
-      Content7,
-      {
-        ...rest,
-        className: twJoin31(
-          fullscreen ? "h-[calc(100vh-1rem)] w-[calc(100vw-1rem)]" : `max-h-[calc(100vh-2rem)] w-[clamp(100vw-2rem,100%,100vw-2rem)] ${maxWidthClassName}`,
-          `fixed top-1/2 left-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col rounded-xl bg-white shadow-lg focus:outline-hidden data-[state=open]:animate-fade-in-subtle-movement ${overflowYClassName}`
-        ),
-        onPointerDownOutside: fullscreen ? handleDismiss() : onDismiss ?? handleDismiss(dismissible),
-        onEscapeKeyDown: fullscreen ? handleDismiss() : onDismiss ?? handleDismiss(dismissible),
-        children: /* @__PURE__ */ jsx75("div", { className: "relative flex h-full min-w-0 flex-1 flex-col", children })
-      }
-    )
-  }
-) });
+var ModalContent = forwardRef20(
+  ({
+    children,
+    maxWidthClassName = "max-w-prose",
+    overflowYClassName = "overflow-y-auto",
+    onDismiss,
+    dismissible = true,
+    fullscreen,
+    ...rest
+  }, ref) => /* @__PURE__ */ jsx80(Portal5, { children: /* @__PURE__ */ jsx80(
+    Overlay,
+    {
+      className: "fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-fade-in-custom-easing",
+      children: /* @__PURE__ */ jsx80(
+        Content7,
+        {
+          ...rest,
+          ref,
+          className: twJoin33(
+            fullscreen ? "h-[calc(100vh-1rem)] w-[calc(100vw-1rem)]" : `max-h-[calc(100vh-2rem)] w-[clamp(100vw-2rem,100%,100vw-2rem)] ${maxWidthClassName}`,
+            `fixed top-1/2 left-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col rounded-xl bg-white shadow-lg focus:outline-hidden data-[state=open]:animate-fade-in-subtle-movement ${overflowYClassName}`
+          ),
+          onPointerDownOutside: fullscreen ? handleDismiss() : onDismiss ?? handleDismiss(dismissible),
+          onEscapeKeyDown: fullscreen ? handleDismiss() : onDismiss ?? handleDismiss(dismissible),
+          children: /* @__PURE__ */ jsx80("div", { className: "relative flex h-full min-w-0 flex-1 flex-col", children })
+        }
+      )
+    }
+  ) })
+);
 
 // src/core/modal/components/ModalDescription.tsx
 import { Description } from "@radix-ui/react-dialog";
-import { jsx as jsx76 } from "react/jsx-runtime";
+import { jsx as jsx81 } from "react/jsx-runtime";
 var ModalDescription = ({ children }) => {
   if (children == null) {
     return null;
   }
-  return /* @__PURE__ */ jsx76(Description, { className: "pb-3 text-base/6 font-normal text-gray-700", children });
+  return /* @__PURE__ */ jsx81(Description, { className: "pb-3 text-base/6 font-normal text-neutral", children });
 };
 
 // src/core/modal/components/ModalErrorCallout.tsx
-import { jsx as jsx77 } from "react/jsx-runtime";
+import { jsx as jsx82 } from "react/jsx-runtime";
 var ModalErrorCallout = ({ children }) => {
   if (!children) {
     return null;
   }
-  return /* @__PURE__ */ jsx77("div", { className: "sticky top-14 z-10 px-5", children: /* @__PURE__ */ jsx77(Callout, { intent: "danger", children }) });
+  return /* @__PURE__ */ jsx82("div", { className: "sticky top-14 z-10 px-5", children: /* @__PURE__ */ jsx82(Callout, { intent: "danger", children }) });
 };
 
 // src/core/modal/components/ModalRoot.tsx
 import { Root as Root7 } from "@radix-ui/react-dialog";
-import { jsx as jsx78 } from "react/jsx-runtime";
+import { jsx as jsx83 } from "react/jsx-runtime";
 var ModalRoot = (props) => {
-  return /* @__PURE__ */ jsx78(Root7, { ...props });
+  return /* @__PURE__ */ jsx83(Root7, { ...props });
 };
 
 // src/core/modal/components/ModalTitle.tsx
 import { Title } from "@radix-ui/react-dialog";
 
 // src/core/modal/components/ModalCloseX.tsx
-import { faXmark as faXmark4 } from "@fortawesome/free-solid-svg-icons";
+import { faClose as faClose2 } from "@fortawesome/sharp-solid-svg-icons";
 import { Close as Close3 } from "@radix-ui/react-dialog";
-import { jsx as jsx79 } from "react/jsx-runtime";
-var ModalCloseX = () => /* @__PURE__ */ jsx79("span", { className: "absolute top-2.5 right-2.5", children: /* @__PURE__ */ jsx79(Close3, { asChild: true, "aria-label": "Close", children: /* @__PURE__ */ jsx79(Button, { variant: "transparent", children: /* @__PURE__ */ jsx79("span", { className: "px-0.5 text-xl text-gray-500", children: /* @__PURE__ */ jsx79(Icon, { icon: faXmark4 }) }) }) }) });
+import { jsx as jsx84 } from "react/jsx-runtime";
+var ModalCloseX = () => /* @__PURE__ */ jsx84("span", { className: "absolute top-2.5 right-2.5", children: /* @__PURE__ */ jsx84(Close3, { asChild: true, "aria-label": "Close", children: /* @__PURE__ */ jsx84(Button, { variant: "transparent", children: /* @__PURE__ */ jsx84("span", { className: "px-0.5 text-xl text-muted", children: /* @__PURE__ */ jsx84(Icon, { icon: faClose2 }) }) }) }) });
 
 // src/core/modal/components/ModalTitle.tsx
-import { jsx as jsx80, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx85, jsxs as jsxs34 } from "react/jsx-runtime";
 var ModalTitle = ({ children, showX = true }) => {
   if (children == null) {
     return null;
   }
-  return /* @__PURE__ */ jsxs30("div", { className: "sticky top-0 z-2 overflow-clip rounded-t-xl bg-white/80 px-8 pt-8 pb-1.5 backdrop-blur-sm", children: [
-    /* @__PURE__ */ jsx80(Title, { className: "text-xl font-semibold text-gray-900", children }),
-    showX && /* @__PURE__ */ jsx80(ModalCloseX, {})
+  return /* @__PURE__ */ jsxs34("div", { className: "sticky top-0 z-2 overflow-clip rounded-t-xl bg-white/80 px-8 pt-8 pb-1.5 backdrop-blur-sm", children: [
+    /* @__PURE__ */ jsx85(Title, { className: "text-xl font-semibold text-dark", children }),
+    showX && /* @__PURE__ */ jsx85(ModalCloseX, {})
   ] });
 };
 
 // src/core/modal/components/ModalTriggerButton.tsx
 import { Trigger as Trigger6 } from "@radix-ui/react-dialog";
-import { jsx as jsx81 } from "react/jsx-runtime";
-var ModalTriggerButton = (props) => /* @__PURE__ */ jsx81(Trigger6, { asChild: true, children: /* @__PURE__ */ jsx81(Button, { ...props }) });
+import { jsx as jsx86 } from "react/jsx-runtime";
+var ModalTriggerButton = (props) => /* @__PURE__ */ jsx86(Trigger6, { asChild: true, children: /* @__PURE__ */ jsx86(Button, { ...props }) });
 
 // src/core/modal/Modal.tsx
-import { Fragment as Fragment11, jsx as jsx82, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx87, jsxs as jsxs35 } from "react/jsx-runtime";
 var ModalBodyImpl = ({
   children,
   title,
@@ -3380,14 +3484,14 @@ var ModalBodyImpl = ({
   description,
   actions,
   showX = true
-}) => /* @__PURE__ */ jsxs31(Fragment11, { children: [
-  /* @__PURE__ */ jsx82(ModalTitle, { showX, children: title }),
-  /* @__PURE__ */ jsx82(ModalErrorCallout, { children: error }),
-  (description || children) && /* @__PURE__ */ jsxs31(ModalBody, { children: [
-    /* @__PURE__ */ jsx82(ModalDescription, { children: description }),
+}) => /* @__PURE__ */ jsxs35(Fragment11, { children: [
+  /* @__PURE__ */ jsx87(ModalTitle, { showX, children: title }),
+  /* @__PURE__ */ jsx87(ModalErrorCallout, { children: error }),
+  (description || children) && /* @__PURE__ */ jsxs35(ModalBody, { children: [
+    /* @__PURE__ */ jsx87(ModalDescription, { children: description }),
     children
   ] }),
-  /* @__PURE__ */ jsx82(ModalActions, { children: actions })
+  /* @__PURE__ */ jsx87(ModalActions, { children: actions })
 ] });
 var Modal = ({
   children,
@@ -3401,7 +3505,7 @@ var Modal = ({
   description,
   actions,
   ...rest
-}) => /* @__PURE__ */ jsxs31(
+}) => /* @__PURE__ */ jsxs35(
   ModalRoot,
   {
     open: isOpen,
@@ -3414,7 +3518,7 @@ var Modal = ({
     },
     children: [
       trigger,
-      /* @__PURE__ */ jsx82(ModalContent, { "aria-describedby": description || void 0, ...rest, children: children !== void 0 ? children : /* @__PURE__ */ jsx82(ModalBodyImpl, { title, error, description, actions, children: content }) })
+      /* @__PURE__ */ jsx87(ModalContent, { "aria-describedby": description || void 0, ...rest, children: children !== void 0 ? children : /* @__PURE__ */ jsx87(ModalBodyImpl, { title, error, description, actions, children: content }) })
     ]
   }
 );
@@ -3422,10 +3526,13 @@ Modal.Body = ModalBodyImpl;
 Modal.TriggerButton = ModalTriggerButton;
 Modal.CloseButton = ModalCloseButton;
 
+// src/core/modal/FullscreenModal.tsx
+import * as React13 from "react";
+
 // src/core/modal/FullscreenModalHeader.tsx
 import { Title as Title2 } from "@radix-ui/react-dialog";
-import { twJoin as twJoin32 } from "tailwind-merge";
-import { jsx as jsx83, jsxs as jsxs32 } from "react/jsx-runtime";
+import { twJoin as twJoin34 } from "tailwind-merge";
+import { jsx as jsx88, jsxs as jsxs36 } from "react/jsx-runtime";
 var FullscreenModalHeader = ({
   className,
   title,
@@ -3433,61 +3540,55 @@ var FullscreenModalHeader = ({
   leftSlot,
   rightSlot
 }) => {
-  return /* @__PURE__ */ jsxs32("div", { className: twJoin32("flex items-center justify-between gap-4", className), children: [
-    /* @__PURE__ */ jsxs32("div", { className: "flex flex-1 items-center gap-4", children: [
+  return /* @__PURE__ */ jsxs36("div", { className: twJoin34("flex items-center justify-between gap-4", className), children: [
+    /* @__PURE__ */ jsxs36("div", { className: "flex flex-1 items-center gap-4", children: [
       leftSlot,
-      /* @__PURE__ */ jsxs32("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsx83(Title2, { className: "text-2xl font-medium text-gray-700", children: title }),
-        description && /* @__PURE__ */ jsx83("div", { className: "text-base/6 text-gray-500", children: description })
+      /* @__PURE__ */ jsxs36("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx88(Title2, { className: "text-2xl font-medium text-neutral", children: title }),
+        description && /* @__PURE__ */ jsx88("div", { className: "text-base/6 text-muted", children: description })
       ] })
     ] }),
-    /* @__PURE__ */ jsx83("div", { className: "flex gap-2", children: rightSlot })
+    /* @__PURE__ */ jsx88("div", { className: "flex gap-2", children: rightSlot })
   ] });
 };
 
 // src/core/modal/FullscreenModal.tsx
-import { jsx as jsx84, jsxs as jsxs33 } from "react/jsx-runtime";
-var FullscreenModal = ({
-  children,
-  trigger,
-  isOpen,
-  onClose,
-  onOpenChange,
-  fullscreen = true,
-  showX = false,
-  title,
-  ...rest
-}) => /* @__PURE__ */ jsxs33(
-  ModalRoot,
-  {
-    open: isOpen,
-    onOpenChange: (open) => {
-      if (trigger) {
-        onOpenChange?.(open);
-      } else if (open === false) {
-        onClose?.();
-      }
-    },
-    children: [
-      trigger,
-      /* @__PURE__ */ jsx84(ModalContent, { fullscreen, ...rest, children: title ? /* @__PURE__ */ jsx84(Modal.Body, { title, showX, children }) : children })
-    ]
-  }
+import { jsx as jsx89, jsxs as jsxs37 } from "react/jsx-runtime";
+var FullscreenModal = React13.forwardRef(
+  ({ children, trigger, isOpen, onClose, onOpenChange, fullscreen = true, showX = false, title, ...rest }, ref) => /* @__PURE__ */ jsxs37(
+    ModalRoot,
+    {
+      open: isOpen,
+      onOpenChange: (open) => {
+        if (trigger) {
+          onOpenChange?.(open);
+        } else if (open === false) {
+          onClose?.();
+        }
+      },
+      children: [
+        trigger,
+        /* @__PURE__ */ jsx89(ModalContent, { fullscreen, ...rest, ref, children: title ? /* @__PURE__ */ jsx89(Modal.Body, { title, showX, children }) : children })
+      ]
+    }
+  )
 );
-FullscreenModal.TriggerButton = ModalTriggerButton;
-FullscreenModal.CloseButton = ModalCloseButton;
-FullscreenModal.Header = FullscreenModalHeader;
+var FullscreenModalNamespace = Object.assign(FullscreenModal, {
+  TriggerButton: ModalTriggerButton,
+  CloseButton: ModalCloseButton,
+  Header: FullscreenModalHeader
+});
 
 // src/core/modal/AlertModal.tsx
-import { Fragment as Fragment12, jsx as jsx85, jsxs as jsxs34 } from "react/jsx-runtime";
-var ModalBodyImpl2 = ({ children, title, error, description, actions }) => /* @__PURE__ */ jsxs34(Fragment12, { children: [
-  /* @__PURE__ */ jsx85(ModalTitle, { showX: false, children: title }),
-  /* @__PURE__ */ jsx85(ModalErrorCallout, { children: error }),
-  (description || children) && /* @__PURE__ */ jsxs34(ModalBody, { children: [
-    /* @__PURE__ */ jsx85(ModalDescription, { children: description }),
+import { Fragment as Fragment12, jsx as jsx90, jsxs as jsxs38 } from "react/jsx-runtime";
+var ModalBodyImpl2 = ({ children, title, error, description, actions }) => /* @__PURE__ */ jsxs38(Fragment12, { children: [
+  /* @__PURE__ */ jsx90(ModalTitle, { showX: false, children: title }),
+  /* @__PURE__ */ jsx90(ModalErrorCallout, { children: error }),
+  (description || children) && /* @__PURE__ */ jsxs38(ModalBody, { children: [
+    /* @__PURE__ */ jsx90(ModalDescription, { children: description }),
     children
   ] }),
-  /* @__PURE__ */ jsx85(ModalActions, { children: actions })
+  /* @__PURE__ */ jsx90(ModalActions, { children: actions })
 ] });
 var AlertModal = ({
   children,
@@ -3501,7 +3602,7 @@ var AlertModal = ({
   description,
   actions,
   ...rest
-}) => /* @__PURE__ */ jsxs34(
+}) => /* @__PURE__ */ jsxs38(
   ModalRoot,
   {
     open: isOpen,
@@ -3514,7 +3615,7 @@ var AlertModal = ({
     },
     children: [
       trigger,
-      /* @__PURE__ */ jsx85(ModalContent, { ...rest, dismissible: false, children: children !== void 0 ? children : /* @__PURE__ */ jsx85(ModalBodyImpl2, { title, error, description, actions, children: content }) })
+      /* @__PURE__ */ jsx90(ModalContent, { ...rest, dismissible: false, children: children !== void 0 ? children : /* @__PURE__ */ jsx90(ModalBodyImpl2, { title, error, description, actions, children: content }) })
     ]
   }
 );
@@ -3525,21 +3626,24 @@ AlertModal.CloseButton = ModalCloseButton;
 // src/core/phone-number/PhoneNumber.tsx
 import "react-international-phone/style.css";
 import { getCountry, PhoneInput } from "react-international-phone";
-import { twJoin as twJoin33 } from "tailwind-merge";
-import { jsx as jsx86 } from "react/jsx-runtime";
+import { twJoin as twJoin35 } from "tailwind-merge";
+import { jsx as jsx91 } from "react/jsx-runtime";
 var PhoneNumber = ({
   hasError,
   onChange,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx86(
+  return /* @__PURE__ */ jsx91(
     PhoneInput,
     {
       defaultCountry: props.defaultCountry ?? "us",
       disableDialCodeAndPrefix: true,
       showDisabledDialCodeAndPrefix: true,
-      inputClassName: twJoin33("flex-1 placeholder:text-gray-400", hasError ? "border-red-300!" : "border-gray-200!"),
-      countrySelectorStyleProps: { className: "border-gray-200!" },
+      inputClassName: twJoin35(
+        "flex-1 placeholder:text-placeholder",
+        hasError ? "border-red-300!" : "border-surface-neutral!"
+      ),
+      countrySelectorStyleProps: { className: "border-surface-neutral!" },
       onChange: (value, meta) => onChange(meta.inputValue ? value : void 0),
       ...props
     }
@@ -3585,13 +3689,42 @@ var isValidPhoneNumber = (input) => {
 };
 
 // src/core/table/Table.tsx
-import { twJoin as twJoin35 } from "tailwind-merge";
+import { useEffect as useEffect7 } from "react";
+import { twJoin as twJoin38 } from "tailwind-merge";
+
+// src/core/utils/useIntersectionObserver.ts
+import { useCallback as useCallback9, useRef as useRef7, useState as useState10 } from "react";
+var useIntersectionObserver = (options = {}) => {
+  const { threshold = 1, root = null, rootMargin = "0px" } = options;
+  const [entry, setEntry] = useState10(null);
+  const previousObserver = useRef7(null);
+  const customRef = useCallback9(
+    (node) => {
+      if (previousObserver.current) {
+        previousObserver.current.disconnect();
+        previousObserver.current = null;
+      }
+      if (node?.nodeType === Node.ELEMENT_NODE) {
+        const observer = new IntersectionObserver(
+          ([entry2]) => {
+            setEntry(entry2);
+          },
+          { threshold, root, rootMargin }
+        );
+        observer.observe(node);
+        previousObserver.current = observer;
+      }
+    },
+    [threshold, root, rootMargin]
+  );
+  return [customRef, entry];
+};
 
 // src/core/table/TableBody.tsx
-import { faTable } from "@fortawesome/free-solid-svg-icons";
+import { faTable } from "@fortawesome/sharp-solid-svg-icons";
 
 // src/core/table/TableRow.tsx
-import { twJoin as twJoin34 } from "tailwind-merge";
+import { twJoin as twJoin36 } from "tailwind-merge";
 
 // src/core/table/utils.ts
 import { flexRender } from "@tanstack/react-table";
@@ -3646,8 +3779,17 @@ var handleStyle = (item, _style) => {
   if (!size) {
     return style;
   }
-  style.width = size;
+  const table = item.getContext().table;
+  const isResizable = table.options.enableColumnResizing;
+  const isLastVisible = isResizable && table.getVisibleLeafColumns().at(-1)?.id === item.column.id;
   style.minWidth = size;
+  if (!isLastVisible) {
+    style.width = size;
+  }
+  if (isResizable) {
+    style.overflow = "hidden";
+    style.textOverflow = "ellipsis";
+  }
   if (item.column.columnDef.meta?.sticky === "left") {
     style.position = "sticky";
     style.left = getLeftStickyOffset(item);
@@ -3662,28 +3804,28 @@ var handleHeaderStyle = handleStyle;
 var handleCellStyle = handleStyle;
 
 // src/core/table/TableRow.tsx
-import { jsx as jsx87 } from "react/jsx-runtime";
+import { jsx as jsx92 } from "react/jsx-runtime";
 var TableRow = ({ table, rowClassName, cellClassName, row }) => {
   const hasRowClick = !!table.options.meta?.onRowClick;
   const isStaticSubRow = !!table.options.meta?.staticSubRows;
   const onRowClick = (ev, row2) => {
     if (ev.target === ev.currentTarget) {
-      table.options.meta?.onRowClick?.(row2);
+      table.options.meta?.onRowClick?.(row2, ev);
     }
   };
   const cells = row.getVisibleCells();
-  return /* @__PURE__ */ jsx87(
+  return /* @__PURE__ */ jsx92(
     "tr",
     {
       "data-active": table.options.meta?.activeRowId === row.id ? "" : void 0,
       "data-clickable": !isStaticSubRow && (hasRowClick || row.getCanExpand()) ? "" : void 0,
       "data-depth": isStaticSubRow ? row.depth : void 0,
       onClick: !isStaticSubRow && row.getCanExpand() ? row.getToggleExpandedHandler() : void 0,
-      className: twJoin34(
-        "data-[active]:bg-indigo-100 data-[clickable]:hover:cursor-pointer data-[clickable]:hover:bg-indigo-50 data-[active]:data-[clickable]:hover:bg-indigo-200",
+      className: twJoin36(
+        "data-[active]:bg-indigo-100 data-[clickable]:hover:cursor-pointer data-[clickable]:hover:bg-surface-primary data-[active]:data-[clickable]:hover:bg-indigo-200",
         rowClassName
       ),
-      children: cells.map((cell) => /* @__PURE__ */ jsx87(
+      children: cells.map((cell) => /* @__PURE__ */ jsx92(
         "td",
         {
           onClickCapture: hasRowClick ? (ev) => onRowClick(ev, row) : void 0,
@@ -3698,27 +3840,48 @@ var TableRow = ({ table, rowClassName, cellClassName, row }) => {
 };
 
 // src/core/table/TableBody.tsx
-import { jsx as jsx88, jsxs as jsxs35 } from "react/jsx-runtime";
-var TableBody = ({ table, loading, rootClassName, ...props }) => {
+import { jsx as jsx93, jsxs as jsxs39 } from "react/jsx-runtime";
+var TableBody = ({ table, loading, rootClassName, afterRows, ...props }) => {
   const { rows } = table.getRowModel();
-  if (loading && rows.length === 0) {
-    return /* @__PURE__ */ jsx88("tbody", { className: rootClassName, children: /* @__PURE__ */ jsx88("tr", { children: /* @__PURE__ */ jsx88("td", { colSpan: table.getAllLeafColumns().length, className: "h-12 text-center align-middle text-gray-400", children: /* @__PURE__ */ jsx88(Spinner, {}) }) }) });
-  }
   if (rows.length === 0) {
-    return /* @__PURE__ */ jsx88("tbody", { className: rootClassName, children: /* @__PURE__ */ jsx88("tr", { children: /* @__PURE__ */ jsx88(EmptyRowsTd, { colSpan: table.getAllLeafColumns().length, emptyText: table.options.meta?.emptyText }) }) });
+    if (loading) {
+      const colCount = table.getAllLeafColumns().length;
+      return /* @__PURE__ */ jsx93("tbody", { className: rootClassName, children: Array.from({ length: 20 }).map((_, i) => /* @__PURE__ */ jsx93(
+        "tr",
+        {
+          className: "[&:not(:last-child)>td]:border-b [&:not(:last-child)>td]:border-gray-200",
+          children: Array.from({ length: colCount }).map((_2, j) => /* @__PURE__ */ jsx93("td", { className: "p-2", children: /* @__PURE__ */ jsx93(Skeleton, { className: "h-3 w-full" }) }, j))
+        },
+        `skeleton-${i}`
+      )) });
+    }
+    return /* @__PURE__ */ jsxs39("tbody", { className: rootClassName, children: [
+      /* @__PURE__ */ jsx93("tr", { children: /* @__PURE__ */ jsx93(EmptyRowsTd, { colSpan: table.getAllLeafColumns().length, emptyText: table.options.meta?.emptyText }) }),
+      afterRows
+    ] });
   }
-  return /* @__PURE__ */ jsx88("tbody", { className: rootClassName, children: rows.map((row) => /* @__PURE__ */ jsx88(TableRow, { ...props, table, row }, row.id)) });
+  return /* @__PURE__ */ jsxs39("tbody", { className: rootClassName, children: [
+    rows.map((row) => /* @__PURE__ */ jsx93(TableRow, { ...props, table, row }, row.id)),
+    afterRows
+  ] });
 };
-var EmptyRowsTd = ({ emptyText = "No rows found", ...props }) => /* @__PURE__ */ jsx88("td", { ...props, className: "h-12 text-center align-middle text-gray-400", children: /* @__PURE__ */ jsxs35("p", { className: "inline-flex items-center gap-2 text-2xl/none", children: [
-  /* @__PURE__ */ jsx88("span", { children: /* @__PURE__ */ jsx88(Icon, { icon: faTable }) }),
-  /* @__PURE__ */ jsx88("span", { className: "text-base/none font-medium", children: emptyText })
+var EmptyRowsTd = ({ emptyText = "No rows found", ...props }) => /* @__PURE__ */ jsx93("td", { ...props, className: "h-full", children: /* @__PURE__ */ jsxs39("p", { className: "flex h-full min-h-12 w-full items-center justify-center gap-2 text-2xl/none text-placeholder", children: [
+  /* @__PURE__ */ jsx93("span", { children: /* @__PURE__ */ jsx93(Icon, { icon: faTable }) }),
+  /* @__PURE__ */ jsx93("span", { className: "text-base/none font-medium", children: emptyText })
 ] }) });
 
 // src/core/table/TableHeader.tsx
-import { faArrowDownWideShort, faArrowUpWideShort } from "@fortawesome/free-solid-svg-icons";
-import { jsx as jsx89, jsxs as jsxs36 } from "react/jsx-runtime";
-var TableHeader = ({ table, rootClassName, rowClassName, cellClassName }) => {
-  return /* @__PURE__ */ jsx89("thead", { className: rootClassName, children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx89("tr", { className: rowClassName, children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx89(
+import { faArrowDownWideShort, faArrowUpWideShort } from "@fortawesome/sharp-solid-svg-icons";
+import { twJoin as twJoin37 } from "tailwind-merge";
+import { jsx as jsx94, jsxs as jsxs40 } from "react/jsx-runtime";
+var TableHeader = ({
+  table,
+  variant,
+  rootClassName,
+  rowClassName,
+  cellClassName
+}) => {
+  return /* @__PURE__ */ jsx94("thead", { className: rootClassName, children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx94("tr", { className: rowClassName, children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx94(
     Th,
     {
       scope: "col",
@@ -3726,6 +3889,7 @@ var TableHeader = ({ table, rootClassName, rowClassName, cellClassName }) => {
       className: cellClassName,
       style: handleHeaderStyle(header),
       header,
+      variant,
       children: renderHeader(header)
     },
     header.id
@@ -3733,36 +3897,77 @@ var TableHeader = ({ table, rootClassName, rowClassName, cellClassName }) => {
 };
 var Th = ({
   header,
+  variant,
   children,
   ...props
 }) => {
+  const isLastInRow = header.index === header.headerGroup.headers.length - 1;
+  const canResize = !isLastInRow && !!header.getContext().table.options.columnResizeMode && header.column.getCanResize();
+  const isSubtable = variant === "subtable";
+  const resizeHandle = canResize && /* @__PURE__ */ jsx94(
+    "div",
+    {
+      onMouseDown: header.getResizeHandler(),
+      onTouchStart: header.getResizeHandler(),
+      onClick: (e) => e.stopPropagation(),
+      "data-resizing": header.column.getIsResizing() ? "" : void 0,
+      className: twJoin37(
+        "absolute top-0 right-0 bottom-0 z-10 w-1 cursor-col-resize touch-none select-none",
+        "after:pointer-events-none after:absolute after:top-0 after:right-0 after:h-screen after:w-0.5 after:transition-colors after:duration-150 after:content-['']",
+        isSubtable ? "hover:after:bg-indigo-600 data-resizing:after:bg-indigo-600" : "group-hover:after:bg-gray-200 hover:after:bg-indigo-600 data-resizing:after:bg-indigo-600"
+      )
+    }
+  );
   if (header.column.getIsSorted()) {
-    return /* @__PURE__ */ jsxs36("th", { ...props, "data-clickable": "ok", onClick: header.column.getToggleSortingHandler(), children: [
-      children,
-      /* @__PURE__ */ jsx89("span", { className: "ml-1.5", children: /* @__PURE__ */ jsx89(SortIcon, { dir: header.column.getIsSorted() }) })
-    ] });
+    return /* @__PURE__ */ jsxs40(
+      "th",
+      {
+        ...props,
+        "data-clickable": "ok",
+        onClick: header.column.getToggleSortingHandler(),
+        className: twJoin37(props.className, canResize && "group relative"),
+        children: [
+          children,
+          /* @__PURE__ */ jsx94("span", { className: "ml-1.5", children: /* @__PURE__ */ jsx94(SortIcon, { dir: header.column.getIsSorted() }) }),
+          resizeHandle
+        ]
+      }
+    );
   }
   if (header.column.getCanSort()) {
-    return /* @__PURE__ */ jsxs36("th", { ...props, "data-clickable": "ok", onClick: header.column.getToggleSortingHandler(), children: [
-      children,
-      /* @__PURE__ */ jsx89("span", { className: "invisible ml-1.5 group-hover:visible", children: /* @__PURE__ */ jsx89(SortIcon, { dir: header.column.getNextSortingOrder() }) })
-    ] });
+    return /* @__PURE__ */ jsxs40(
+      "th",
+      {
+        ...props,
+        "data-clickable": "ok",
+        onClick: header.column.getToggleSortingHandler(),
+        className: twJoin37(props.className, canResize && "group relative"),
+        children: [
+          children,
+          /* @__PURE__ */ jsx94("span", { className: "invisible ml-1.5 group-hover:visible", children: /* @__PURE__ */ jsx94(SortIcon, { dir: header.column.getNextSortingOrder() }) }),
+          resizeHandle
+        ]
+      }
+    );
   }
-  return /* @__PURE__ */ jsx89("th", { ...props, children });
+  return /* @__PURE__ */ jsxs40("th", { ...props, className: twJoin37(props.className, canResize && "group relative"), children: [
+    children,
+    resizeHandle
+  ] });
 };
 var SortIcon = ({ dir }) => {
   if (dir === "asc") {
-    return /* @__PURE__ */ jsx89(Icon, { icon: faArrowUpWideShort });
+    return /* @__PURE__ */ jsx94(Icon, { icon: faArrowUpWideShort });
   }
   if (dir === "desc") {
-    return /* @__PURE__ */ jsx89(Icon, { icon: faArrowDownWideShort });
+    return /* @__PURE__ */ jsx94(Icon, { icon: faArrowDownWideShort });
   }
   return null;
 };
 
 // src/core/table/Table.tsx
-import { jsx as jsx90, jsxs as jsxs37 } from "react/jsx-runtime";
-var variants = {
+import { Fragment as Fragment13, jsx as jsx95, jsxs as jsxs41 } from "react/jsx-runtime";
+var tableVariants = {
   default: "default",
   seamless: "seamless",
   transparent: "transparent",
@@ -3770,204 +3975,423 @@ var variants = {
 };
 var headerClassNames = (variant) => {
   switch (variant) {
-    case variants.transparent:
+    case tableVariants.transparent:
       return {
-        cellClassName: "text-left text-sm font-medium text-gray-500 whitespace-nowrap px-2.5 py-3"
+        cellClassName: "text-left text-sm font-medium text-muted whitespace-nowrap px-2.5 py-3"
       };
-    case variants.subtable:
+    case tableVariants.subtable:
       return {
         rowClassName: "divide-x divide-gray-200",
-        cellClassName: "text-left text-sm font-medium text-gray-500 whitespace-nowrap border-b bg-gray-100 px-2 py-1.5"
+        cellClassName: "text-left text-sm font-medium text-muted whitespace-nowrap sticky top-0 z-1 border-b bg-surface-neutral px-2 py-1.5"
       };
-    case variants.seamless:
+    case tableVariants.seamless:
       return {
-        cellClassName: "text-left text-sm font-medium text-gray-500 whitespace-nowrap sticky top-0 z-1 border-b bg-gray-50 px-2 py-1.5 group data-[clickable]:cursor-pointer data-[clickable]:select-none data-[clickable]:hover:text-gray-800"
+        cellClassName: "text-left text-sm font-medium text-muted whitespace-nowrap sticky top-0 z-1 border-b bg-surface-light px-2 py-1.5 group data-[clickable]:cursor-pointer data-[clickable]:select-none data-[clickable]:hover:text-gray-800"
       };
-    case variants.default:
+    case tableVariants.default:
     default:
       return {
-        cellClassName: "text-left text-sm font-medium text-gray-500 whitespace-nowrap sticky top-0 z-1 border-b bg-gray-100 px-2 py-1.5 group data-[clickable]:cursor-pointer data-[clickable]:select-none data-[clickable]:hover:text-gray-800"
+        cellClassName: "text-left text-sm font-medium text-muted whitespace-nowrap sticky top-0 z-1 border-b bg-surface-neutral px-2 py-1.5 group data-[clickable]:cursor-pointer data-[clickable]:select-none data-[clickable]:hover:text-gray-800"
       };
   }
 };
 var bodyClassNames = (variant) => {
   switch (variant) {
-    case variants.seamless:
+    case tableVariants.seamless:
       return {
-        rowClassName: "[&:not(:last-child)_td]:border-gray-200",
-        cellClassName: "text-sm text-gray-700 whitespace-nowrap h-fit"
+        rowClassName: "[&:not(:last-child)_td]:border-surface-neutral",
+        cellClassName: "text-sm text-neutral whitespace-nowrap h-fit"
       };
-    case variants.transparent:
+    case tableVariants.transparent:
       return {
         rootClassName: "rounded-lg bg-white outline outline-1 outline-gray-200",
-        rowClassName: "[&:not(:last-child)_td]:border-b [&:not(:last-child)_td]:border-gray-200 [&:first-child_td:first-child]:rounded-tl-lg [&:first-child_td:last-child]:rounded-tr-lg [&:last-child_td:first-child]:rounded-bl-lg [&:last-child_td:last-child]:rounded-br-lg",
-        cellClassName: "text-sm text-gray-700 whitespace-nowrap p-2.5 py-1.5"
+        rowClassName: "[&:not(:last-child)_td]:border-b [&:not(:last-child)_td]:border-surface-neutral [&:first-child_td:first-child]:rounded-tl-lg [&:first-child_td:last-child]:rounded-tr-lg [&:last-child_td:first-child]:rounded-bl-lg [&:last-child_td:last-child]:rounded-br-lg",
+        cellClassName: "text-sm text-neutral whitespace-nowrap p-2.5 py-1.5"
       };
-    case variants.subtable:
+    case tableVariants.subtable:
       return {
-        rowClassName: "[&:not(:last-child)_td]:border-b [&:not(:last-child)_td]:border-gray-200 divide-x divide-gray-200",
-        cellClassName: "text-sm text-gray-700 whitespace-nowrap p-2"
+        rowClassName: "[&:not(:last-child)_td]:border-b [&:not(:last-child)_td]:border-surface-neutral divide-x divide-gray-200",
+        cellClassName: "text-sm text-neutral whitespace-nowrap p-2"
       };
-    case variants.default:
+    case tableVariants.default:
     default:
       return {
-        rowClassName: "[&:not(:last-child)_td]:border-b [&:not(:last-child)_td]:border-gray-200 data-[depth='0']:bg-gray-50",
-        cellClassName: "text-sm text-gray-700 whitespace-nowrap p-2"
+        rowClassName: "[&:not(:last-child)_td]:border-b [&:not(:last-child)_td]:border-surface-neutral data-[depth='0']:bg-surface-light",
+        cellClassName: "text-sm text-neutral whitespace-nowrap p-2"
       };
   }
 };
-var Table = ({ variant = "default", loading, fillHeight, ...props }) => {
+var Table = ({ variant = "default", loading: loadingProp, ...props }) => {
+  const loading = loadingProp ?? props.table.options.meta?.isLoading;
+  const fetching = loadingProp ?? props.table.options.meta?.isFetching;
   const uiLoading = loading ? "loading" : void 0;
+  const coreRows = props.table.getCoreRowModel().rows;
+  const showLoadingBar = fetching && coreRows.length > 0;
+  const resizeStyle = props.table.options.enableColumnResizing ? { width: props.table.getCenterTotalSize(), tableLayout: "fixed" } : void 0;
+  const tableElementRef = props.table.options.meta?.tableElementRef ?? null;
   switch (variant) {
-    case variants.transparent:
-      return /* @__PURE__ */ jsxs37(
-        "table",
-        {
-          "data-ui": uiLoading,
-          className: "mb-auto min-w-full border-separate border-spacing-0 data-[ui=loading]:pointer-events-none data-[ui=loading]:opacity-60 data-[ui=loading]:select-none",
-          children: [
-            /* @__PURE__ */ jsx90(TableHeader, { ...props, ...headerClassNames(variant) }),
-            /* @__PURE__ */ jsx90(TableBody, { ...props, ...bodyClassNames(variant), loading })
-          ]
-        }
-      );
-    case variants.subtable:
-      return /* @__PURE__ */ jsx90("div", { className: "mb-auto min-w-full", children: /* @__PURE__ */ jsxs37(
+    case tableVariants.transparent:
+      return /* @__PURE__ */ jsx95("div", { className: "relative mb-auto min-w-full", children: /* @__PURE__ */ jsxs41(
         "table",
         {
+          ref: tableElementRef,
           "data-ui": uiLoading,
-          className: "min-w-full border-separate border-spacing-0 data-[ui=loading]:pointer-events-none data-[ui=loading]:opacity-60 data-[ui=loading]:select-none",
+          style: resizeStyle,
+          className: twJoin38(
+            "min-w-full border-separate border-spacing-0 data-[ui=loading]:pointer-events-none",
+            resizeStyle && "overflow-clip"
+          ),
           children: [
-            /* @__PURE__ */ jsx90(TableHeader, { ...props, ...headerClassNames(variant) }),
-            /* @__PURE__ */ jsx90(TableBody, { ...props, ...bodyClassNames(variant), loading })
+            /* @__PURE__ */ jsx95(TableHeader, { ...props, variant, ...headerClassNames(variant) }),
+            /* @__PURE__ */ jsx95(TableBody, { ...props, ...bodyClassNames(variant), loading })
           ]
         }
       ) });
-    case variants.seamless:
-    case variants.default:
-    default:
-      return /* @__PURE__ */ jsx90("div", { className: twJoin35("mb-auto overflow-auto rounded-md border border-gray-200 bg-white", fillHeight && "h-full min-h-0"), children: /* @__PURE__ */ jsx90("div", { className: "min-w-full", children: /* @__PURE__ */ jsxs37(
-        "table",
+    case tableVariants.subtable:
+      return /* @__PURE__ */ jsxs41("div", { className: "relative mb-auto min-w-full", children: [
+        showLoadingBar && /* @__PURE__ */ jsx95(LoadingBar, { className: "absolute top-0 right-0 left-0 z-10 h-1 rounded-none" }),
+        /* @__PURE__ */ jsxs41(
+          "table",
+          {
+            ref: tableElementRef,
+            "data-ui": uiLoading,
+            style: resizeStyle,
+            className: twJoin38(
+              "min-w-full border-separate border-spacing-0 data-[ui=loading]:pointer-events-none",
+              resizeStyle && "overflow-clip"
+            ),
+            children: [
+              /* @__PURE__ */ jsx95(TableHeader, { ...props, variant, ...headerClassNames(variant) }),
+              /* @__PURE__ */ jsx95(TableBody, { ...props, ...bodyClassNames(variant), loading })
+            ]
+          }
+        )
+      ] });
+    case tableVariants.seamless:
+      return /* @__PURE__ */ jsx95(
+        "div",
         {
-          "data-ui": uiLoading,
-          className: "relative min-w-full border-separate border-spacing-0 data-[ui=loading]:pointer-events-none data-[ui=loading]:opacity-60 data-[ui=loading]:select-none",
-          children: [
-            /* @__PURE__ */ jsx90(TableHeader, { ...props, ...headerClassNames(variant) }),
-            /* @__PURE__ */ jsx90(TableBody, { ...props, ...bodyClassNames(variant), loading })
-          ]
+          className: twJoin38(
+            "relative mb-auto rounded-md border bg-white",
+            loading && coreRows.length === 0 ? "overflow-hidden" : "overflow-auto"
+          ),
+          children: /* @__PURE__ */ jsxs41(
+            "table",
+            {
+              ref: tableElementRef,
+              "data-ui": uiLoading,
+              style: resizeStyle,
+              className: twJoin38(
+                "relative min-w-full border-separate border-spacing-0 data-[ui=loading]:pointer-events-none",
+                resizeStyle && "overflow-clip"
+              ),
+              children: [
+                /* @__PURE__ */ jsx95(TableHeader, { ...props, variant, ...headerClassNames(variant) }),
+                /* @__PURE__ */ jsx95(TableBody, { ...props, ...bodyClassNames(variant), loading })
+              ]
+            }
+          )
         }
-      ) }) });
+      );
+    case tableVariants.default:
+    default:
+      return /* @__PURE__ */ jsx95(DefaultTable, { ...props, loading, fetching });
   }
 };
+var DefaultTable = ({ table, loading, fetching }) => {
+  const [sentinelRef, entry] = useIntersectionObserver();
+  const infiniteScroll = table.options.meta?.infiniteScroll;
+  const coreRows = table.getCoreRowModel().rows;
+  const colCount = table.getAllLeafColumns().length;
+  const uiLoading = loading ? "loading" : void 0;
+  const showLoadingBar = fetching && coreRows.length > 0;
+  const resizeStyle = table.options.enableColumnResizing ? { width: table.getCenterTotalSize(), tableLayout: "fixed" } : void 0;
+  const tableElementRef = table.options.meta?.tableElementRef ?? null;
+  useEffect7(() => {
+    if (entry?.isIntersecting && infiniteScroll?.hasNextPage && !infiniteScroll.isFetchingNextPage) {
+      infiniteScroll.fetchNextPage();
+    }
+  }, [entry?.isIntersecting, infiniteScroll]);
+  const skeletonRows = infiniteScroll?.hasNextPage ? Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsx95("tr", { className: "[&:not(:last-child)>td]:border-b [&:not(:last-child)>td]:border-gray-200", children: Array.from({ length: colCount }).map((_2, j) => /* @__PURE__ */ jsx95("td", { className: "p-2", children: /* @__PURE__ */ jsx95(Skeleton, { className: "h-3 w-full" }) }, j)) }, `skeleton-${i}`)) : null;
+  return /* @__PURE__ */ jsxs41(
+    "div",
+    {
+      className: twJoin38(
+        "relative mb-auto rounded-md border bg-white",
+        coreRows.length === 0 ? twJoin38("h-full min-h-0", loading ? "overflow-hidden" : "overflow-auto") : "max-h-full min-h-0 overflow-auto"
+      ),
+      children: [
+        showLoadingBar && /* @__PURE__ */ jsx95(LoadingBar, { className: "sticky top-0 right-0 left-0 z-10 -mb-1 h-1 rounded-none" }),
+        /* @__PURE__ */ jsxs41(
+          "table",
+          {
+            ref: tableElementRef,
+            "data-ui": uiLoading,
+            style: resizeStyle,
+            className: twJoin38(
+              "relative min-w-full border-separate border-spacing-0 data-[ui=loading]:pointer-events-none",
+              coreRows.length === 0 && !loading && "h-full",
+              resizeStyle && "overflow-clip"
+            ),
+            children: [
+              /* @__PURE__ */ jsx95(TableHeader, { table, variant: "default", ...headerClassNames("default") }),
+              /* @__PURE__ */ jsx95(
+                TableBody,
+                {
+                  table,
+                  ...bodyClassNames("default"),
+                  loading,
+                  afterRows: /* @__PURE__ */ jsxs41(Fragment13, { children: [
+                    infiniteScroll?.hasNextPage && /* @__PURE__ */ jsx95("tr", { ref: sentinelRef, "aria-hidden": "true", style: { height: 0, border: "none", padding: 0 }, children: /* @__PURE__ */ jsx95("td", { colSpan: colCount, style: { height: 0, border: "none", padding: 0 } }) }),
+                    skeletonRows
+                  ] })
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/core/table/VirtualizedTable.tsx
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { useEffect as useEffect8, useRef as useRef8 } from "react";
+import { twJoin as twJoin39 } from "tailwind-merge";
+import { jsx as jsx96, jsxs as jsxs42 } from "react/jsx-runtime";
+var DEFAULT_ROW_HEIGHT = 37;
+var DEFAULT_OVERSCAN = 5;
+var VirtualizedTable = ({
+  table,
+  variant = "default",
+  loading: loadingProp,
+  rowHeight = DEFAULT_ROW_HEIGHT,
+  overscan = DEFAULT_OVERSCAN
+}) => {
+  const loading = loadingProp ?? table.options.meta?.isLoading;
+  const fetching = loadingProp ?? table.options.meta?.isFetching;
+  const scrollRef = useRef8(null);
+  const isSubtable = variant === "subtable";
+  const infiniteScroll = table.options.meta?.infiniteScroll;
+  const colCount = table.getVisibleLeafColumns().length;
+  const coreRows = table.getCoreRowModel().rows;
+  const rows = table.getRowModel().rows;
+  const uiLoading = loading ? "loading" : void 0;
+  const showLoadingBar = fetching && coreRows.length > 0;
+  const resizeStyle = table.options.enableColumnResizing ? { width: table.getCenterTotalSize(), tableLayout: "fixed" } : void 0;
+  const tableElementRef = table.options.meta?.tableElementRef ?? null;
+  const rowVirtualizer = useVirtualizer({
+    count: rows.length,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => rowHeight,
+    overscan
+  });
+  const virtualRows = rowVirtualizer.getVirtualItems();
+  useEffect8(() => {
+    const lastItem = virtualRows.at(-1);
+    if (!lastItem) return;
+    if (lastItem.index >= rows.length - 1 && infiniteScroll?.hasNextPage && !infiniteScroll.isFetchingNextPage) {
+      infiniteScroll.fetchNextPage();
+    }
+  }, [virtualRows, rows.length, infiniteScroll]);
+  const skeletonRows = infiniteScroll?.hasNextPage ? Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsx96("tr", { className: "[&:not(:last-child)>td]:border-b [&:not(:last-child)>td]:border-gray-200", children: Array.from({ length: colCount }).map((_2, j) => /* @__PURE__ */ jsx96("td", { className: "p-2", children: /* @__PURE__ */ jsx96(Skeleton, { className: "h-3 w-full" }) }, j)) }, `skeleton-${i}`)) : null;
+  const paddingTop = virtualRows.length > 0 ? virtualRows[0]?.start ?? 0 : 0;
+  const paddingBottom = virtualRows.length > 0 ? rowVirtualizer.getTotalSize() - (virtualRows.at(-1)?.end ?? 0) : 0;
+  const { rootClassName: bodyRootClassName, ...bodyRowCellClassNames } = bodyClassNames(variant);
+  return /* @__PURE__ */ jsxs42(
+    "div",
+    {
+      ref: scrollRef,
+      className: twJoin39(
+        "relative mb-auto",
+        isSubtable ? "min-w-full" : twJoin39(
+          "rounded-md border bg-white",
+          coreRows.length === 0 ? twJoin39("h-full", loading ? "overflow-hidden" : "overflow-auto overscroll-none") : "max-h-full min-h-0 overflow-auto overscroll-none"
+        )
+      ),
+      children: [
+        showLoadingBar && /* @__PURE__ */ jsx96(
+          LoadingBar,
+          {
+            className: twJoin39("top-0 right-0 left-0 z-10 h-1 rounded-none", isSubtable ? "absolute" : "sticky -mb-1")
+          }
+        ),
+        /* @__PURE__ */ jsxs42(
+          "table",
+          {
+            ref: tableElementRef,
+            "data-ui": uiLoading,
+            style: resizeStyle,
+            className: twJoin39(
+              "relative min-w-full border-separate border-spacing-0 data-[ui=loading]:pointer-events-none",
+              !isSubtable && coreRows.length === 0 && !loading && "h-full",
+              resizeStyle && "overflow-clip"
+            ),
+            children: [
+              /* @__PURE__ */ jsx96(TableHeader, { table, variant, ...headerClassNames(variant) }),
+              rows.length === 0 ? /* @__PURE__ */ jsx96(TableBody, { table, ...bodyClassNames(variant), loading }) : /* @__PURE__ */ jsxs42("tbody", { className: bodyRootClassName, children: [
+                paddingTop > 0 && /* @__PURE__ */ jsx96("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx96("td", { colSpan: colCount, style: { height: paddingTop, padding: 0, border: "none" } }) }),
+                virtualRows.map((virtualRow) => {
+                  const row = rows[virtualRow.index];
+                  return /* @__PURE__ */ jsx96(TableRow, { table, row, ...bodyRowCellClassNames }, row.id);
+                }),
+                paddingBottom > 0 && /* @__PURE__ */ jsx96("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx96("td", { colSpan: colCount, style: { height: paddingBottom, padding: 0, border: "none" } }) }),
+                skeletonRows
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
 
 // src/core/table/useTable.ts
 import { getCoreRowModel, useReactTable } from "@tanstack/react-table";
-var useTable = (options) => {
+import { useLayoutEffect } from "react";
+import { useEffectEvent } from "use-effect-event";
+var useTable = ({ tableRef, ...options }) => {
   const enableSorting = !!options.state?.sorting && !!options.onSortingChange;
-  return useReactTable({
+  const table = useReactTable({
     ...options,
     getCoreRowModel: getCoreRowModel(),
     // This is a hack to allow the columns to flex by default,
     // and, then when size is overridden, they become fixed
     defaultColumn: {
       ...options.defaultColumn,
-      minSize: 0,
-      size: 0
+      minSize: options.columnResizeMode ? options.defaultColumn?.minSize ?? 50 : 0,
+      size: options.defaultColumn?.size ?? 0
     },
-    /* eslint-disable @typescript-eslint/no-unsafe-assignment */
     meta: {
+      isLoading: options.isLoading,
+      isFetching: options.isFetching,
       emptyText: options.emptyText,
       activeRowId: options.activeRowId,
       onRowClick: options.onRowClick,
-      staticSubRows: options.staticSubRows
+      staticSubRows: options.staticSubRows,
+      tableElementRef: options.tableElementRef,
+      infiniteScroll: options.infiniteScroll
     },
-    /* eslint-enable @typescript-eslint/no-unsafe-assignment */
     manualSorting: true,
     enableMultiSort: false,
-    enableSorting
+    enableSorting,
+    enableColumnResizing: !!options.columnResizeMode
   });
+  const syncTableRef = useEffectEvent(() => {
+    tableRef?.(table);
+  });
+  useLayoutEffect(() => {
+    syncTableRef();
+  }, [table]);
+  return table;
 };
 
 // src/core/tab-group/TabGroup.tsx
 import { ToggleGroup, ToggleGroupItem } from "@radix-ui/react-toggle-group";
-import { Fragment as Fragment13 } from "react";
-import { twJoin as twJoin36 } from "tailwind-merge";
-import { jsx as jsx91, jsxs as jsxs38 } from "react/jsx-runtime";
-var TabGroup = ({ tabs, currentTab, setCurrentTab }) => {
-  return /* @__PURE__ */ jsx91(
+import { motion } from "motion/react";
+import { Fragment as Fragment14, useId as useId2 } from "react";
+import { twJoin as twJoin40 } from "tailwind-merge";
+import { jsx as jsx97, jsxs as jsxs43 } from "react/jsx-runtime";
+var TabGroup = ({
+  tabs,
+  currentTab,
+  setCurrentTab,
+  size = "md"
+}) => {
+  const layoutId = useId2();
+  return /* @__PURE__ */ jsx97(
     ToggleGroup,
     {
       type: "single",
       value: currentTab,
       onValueChange: (value) => {
-        if (value) {
-          setCurrentTab(value);
-        }
+        setCurrentTab(value);
       },
-      className: "flex w-full justify-between gap-1 rounded-lg border border-gray-200 p-1",
-      children: tabs.map(({ id, label, disabled }, index) => /* @__PURE__ */ jsxs38(Fragment13, { children: [
-        /* @__PURE__ */ jsx91(
+      className: twJoin40(
+        "flex w-full justify-between gap-1 rounded-lg border border-surface-neutral bg-surface-light",
+        size === "sm" ? "p-1" : "p-0.5"
+      ),
+      children: tabs.map(({ id, label, disabled }, index) => /* @__PURE__ */ jsxs43(Fragment14, { children: [
+        /* @__PURE__ */ jsxs43(
           ToggleGroupItem,
           {
             value: id,
             disabled,
-            className: twJoin36(
-              "flex w-full items-center justify-center rounded-md border px-2 py-2 transition",
+            className: twJoin40(
+              "relative flex w-full items-center justify-center rounded-md border transition-colors",
               disabled && "cursor-not-allowed opacity-50",
-              !disabled && "hover:bg-indigo-50 focus-visible:border-indigo-700 focus-visible:outline-none",
+              !disabled && "focus-visible:border-indigo-700 focus-visible:outline-none",
               id !== currentTab && "border-transparent",
               id !== currentTab && !disabled && "hover:border-indigo-200",
-              id === currentTab && !disabled && "border border-indigo-400 bg-white ring-2 ring-indigo-100"
+              id === currentTab && !disabled && "border-indigo-400 bg-surface-neutral",
+              size === "sm" ? "px-1.5 py-1" : "px-2 py-1"
             ),
-            children: label
+            children: [
+              id === currentTab && !disabled && /* @__PURE__ */ jsx97(
+                motion.span,
+                {
+                  layoutId,
+                  className: "absolute inset-0 rounded-md bg-button-white ring-2 ring-indigo-100",
+                  transition: { type: "spring", stiffness: 500, damping: 40 }
+                }
+              ),
+              /* @__PURE__ */ jsx97("span", { className: "relative z-1", children: label })
+            ]
           }
         ),
-        index !== tabs.length - 1 && /* @__PURE__ */ jsx91("div", { className: "my-1 flex w-[1px] bg-gray-300" })
+        index !== tabs.length - 1 && /* @__PURE__ */ jsx97("div", { className: "z-2 my-1 flex w-px bg-gray-300" })
       ] }, id))
     }
   );
 };
 
 // src/core/tabs/Tabs.tsx
-import {
-  Content as Content8,
-  List,
-  Root as Root8
-} from "@radix-ui/react-tabs";
-import { twJoin as twJoin37 } from "tailwind-merge";
+import { Content as Content8, List, Root as Root8 } from "@radix-ui/react-tabs";
+import { useId as useId3 } from "react";
+import { twJoin as twJoin41 } from "tailwind-merge";
 
 // src/core/tabs/Trigger.tsx
 import { Trigger as Trigger7 } from "@radix-ui/react-tabs";
-import { twMerge as twMerge10 } from "tailwind-merge";
-import { jsx as jsx92, jsxs as jsxs39 } from "react/jsx-runtime";
+import { motion as motion2 } from "motion/react";
+import { twMerge as twMerge13 } from "tailwind-merge";
+import { jsx as jsx98, jsxs as jsxs44 } from "react/jsx-runtime";
 var TabsTrigger = ({
   id,
   label,
   disabled,
-  dataTestId,
   fsId,
   extra,
-  className
-}) => /* @__PURE__ */ jsxs39(
+  className,
+  isActive,
+  layoutId
+}) => /* @__PURE__ */ jsxs44(
   Trigger7,
   {
-    className: twMerge10(
-      "h-full space-x-1 border-b-2 px-1 py-1 font-medium whitespace-nowrap transition-colors duration-150 data-[state='active']:border-indigo-500 data-[state='active']:text-indigo-700 data-[state='inactive']:border-transparent data-[state='inactive']:text-gray-500 data-[state='inactive']:hover:border-gray-200 data-[state='inactive']:hover:text-gray-700",
+    className: twMerge13(
+      "relative h-full border-b-2 border-transparent px-1 py-1 font-medium whitespace-nowrap transition-colors duration-150 data-[state='active']:text-indigo-700 data-[state='inactive']:text-muted data-[state='inactive']:hover:border-surface-neutral data-[state='inactive']:hover:text-neutral",
       className
     ),
     value: id,
     disabled,
-    "data-testid": dataTestId,
     "fs-id": fsId,
     children: [
       label,
-      extra && /* @__PURE__ */ jsx92("span", { children: extra })
+      extra && /* @__PURE__ */ jsx98("span", { children: extra }),
+      isActive && /* @__PURE__ */ jsx98(
+        motion2.span,
+        {
+          layoutId,
+          className: "absolute right-0 -bottom-0.5 left-0 h-0.5 bg-current",
+          transition: { type: "spring", stiffness: 500, damping: 40 }
+        }
+      )
     ]
   }
 );
 
 // src/core/tabs/Tabs.tsx
-import { jsx as jsx93, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx99, jsxs as jsxs45 } from "react/jsx-runtime";
 var [Provider2, useContext6] = createContextHelper();
 var Tabs = ({
   tabs,
@@ -3980,16 +4404,19 @@ var Tabs = ({
   children,
   extraNode
 }) => {
-  return /* @__PURE__ */ jsx93(Provider2, { currentTab, children: /* @__PURE__ */ jsxs40(Root8, { className, value: currentTab, onValueChange: (id) => setCurrentTab(id), children: [
-    /* @__PURE__ */ jsxs40("div", { className: twJoin37("flex gap-4", tabsListContainerClassName), children: [
-      /* @__PURE__ */ jsx93(List, { className: twJoin37("flex space-x-4 overflow-x-auto", tabsListClassName), children: tabs.map(({ id, label, disabled, fsId }) => /* @__PURE__ */ jsx93(
+  const layoutId = useId3();
+  return /* @__PURE__ */ jsx99(Provider2, { currentTab, children: /* @__PURE__ */ jsxs45(Root8, { className, value: currentTab, onValueChange: (id) => setCurrentTab(id), children: [
+    /* @__PURE__ */ jsxs45("div", { className: twJoin41("flex gap-4", tabsListContainerClassName), children: [
+      /* @__PURE__ */ jsx99(List, { className: twJoin41("flex space-x-4 overflow-x-auto", tabsListClassName), children: tabs.map(({ id, label, disabled, fsId }) => /* @__PURE__ */ jsx99(
         TabsTrigger,
         {
           id,
           label,
           disabled,
           className: tabsListTriggerClassName,
-          fsId
+          fsId,
+          isActive: currentTab === id,
+          layoutId
         },
         id
       )) }),
@@ -3999,7 +4426,7 @@ var Tabs = ({
   ] }) });
 };
 var TabContent = ({ id, ...rest }) => {
-  return /* @__PURE__ */ jsx93(Content8, { value: id, ...rest });
+  return /* @__PURE__ */ jsx99(Content8, { value: id, ...rest });
 };
 var AlwaysMountedTabContent = ({
   id,
@@ -4009,29 +4436,20 @@ var AlwaysMountedTabContent = ({
 }) => {
   const { currentTab } = useContext6();
   const visible = id === currentTab;
-  return /* @__PURE__ */ jsx93("div", { className: twJoin37(visible ? visibleClassName : "hidden", className), children });
+  return /* @__PURE__ */ jsx99("div", { className: twJoin41(visible ? visibleClassName : "hidden", className), children });
 };
 Tabs.TabContent = TabContent;
 Tabs.AlwaysMountedTabContent = AlwaysMountedTabContent;
-var createTypedTabs = () => ({
-  Root: ({ currentTab, setCurrentTab, ...props }) => {
-    const handleValueChange = setCurrentTab ? (value) => setCurrentTab(value) : void 0;
-    return /* @__PURE__ */ jsx93(Root8, { ...props, value: currentTab, onValueChange: handleValueChange });
-  },
-  List: ({ className, ...props }) => /* @__PURE__ */ jsx93(List, { ...props, className: twJoin37("flex space-x-4 overflow-x-auto", className) }),
-  Trigger: TabsTrigger,
-  Content: TabContent
-});
 
 // src/core/tabs/ScrollTabsLayout.tsx
-import { useCallback as useCallback9, useEffect as useEffect7, useRef as useRef7, useState as useState10 } from "react";
-import { twJoin as twJoin38 } from "tailwind-merge";
-import { Fragment as Fragment14, jsx as jsx94, jsxs as jsxs41 } from "react/jsx-runtime";
+import { useCallback as useCallback10, useEffect as useEffect9, useRef as useRef9, useState as useState11 } from "react";
+import { twJoin as twJoin42 } from "tailwind-merge";
+import { Fragment as Fragment15, jsx as jsx100, jsxs as jsxs46 } from "react/jsx-runtime";
 var ScrollTabsLayout = ({ tabs, onSelectTab, sectionClassName }) => {
-  const [selectedTabName, setSelectedTabName] = useState10(tabs[0].tabName);
-  const scrollContainerRef = useRef7(null);
-  const tabRefs = useRef7({});
-  const handleSelectTab = useCallback9(
+  const [selectedTabName, setSelectedTabName] = useState11(tabs[0].tabName);
+  const scrollContainerRef = useRef9(null);
+  const tabRefs = useRef9({});
+  const handleSelectTab = useCallback10(
     (tabId) => {
       scrollContainerRef.current?.scrollTo({
         top: tabRefs.current[tabId].offsetTop,
@@ -4042,7 +4460,7 @@ var ScrollTabsLayout = ({ tabs, onSelectTab, sectionClassName }) => {
     },
     [onSelectTab]
   );
-  useEffect7(() => {
+  useEffect9(() => {
     const scrollContainer = scrollContainerRef.current;
     const handleScroll = (e) => {
       Object.entries(tabRefs.current).forEach(([tabName, tabRef]) => {
@@ -4057,8 +4475,8 @@ var ScrollTabsLayout = ({ tabs, onSelectTab, sectionClassName }) => {
       scrollContainer?.removeEventListener("scroll", handleScroll);
     };
   });
-  return /* @__PURE__ */ jsxs41(Fragment14, { children: [
-    /* @__PURE__ */ jsx94(
+  return /* @__PURE__ */ jsxs46(Fragment15, { children: [
+    /* @__PURE__ */ jsx100(
       Tabs,
       {
         currentTab: selectedTabName,
@@ -4066,36 +4484,47 @@ var ScrollTabsLayout = ({ tabs, onSelectTab, sectionClassName }) => {
         tabs: tabs.map((tab) => ({ id: tab.tabName, label: tab.tabName }))
       }
     ),
-    /* @__PURE__ */ jsx94("hr", {}),
-    /* @__PURE__ */ jsxs41("div", { ref: scrollContainerRef, className: "relative h-screen overflow-y-auto", children: [
-      tabs.map((tab) => /* @__PURE__ */ jsx94(
+    /* @__PURE__ */ jsx100("hr", {}),
+    /* @__PURE__ */ jsxs46("div", { ref: scrollContainerRef, className: "relative h-screen overflow-y-auto", children: [
+      tabs.map((tab) => /* @__PURE__ */ jsx100(
         "div",
         {
           ref: (el) => el ? tabRefs.current[tab.tabName] = el : void 0,
-          className: twJoin38("first:pt-4", sectionClassName),
+          className: twJoin42("first:pt-4", sectionClassName),
           children: tab.content
         },
         tab.tabName
       )),
-      /* @__PURE__ */ jsx94("div", { className: "h-screen" })
+      /* @__PURE__ */ jsx100("div", { className: "h-screen" })
     ] })
   ] });
 };
 
 // src/core/tabs/ComposableTabs.tsx
 import { Content as Content9, List as List2, Root as Root9 } from "@radix-ui/react-tabs";
-import { twJoin as twJoin39 } from "tailwind-merge";
-import { jsx as jsx95, jsxs as jsxs42 } from "react/jsx-runtime";
+import { useId as useId4 } from "react";
+import { twJoin as twJoin43 } from "tailwind-merge";
+import { jsx as jsx101, jsxs as jsxs47 } from "react/jsx-runtime";
 var [TabsProvider, useTabsContext] = createContextHelper();
 var ComposableTabsList = ({ className, containerClassName, extraNode }) => {
-  const { tabs } = useTabsContext();
-  return /* @__PURE__ */ jsxs42("div", { className: twJoin39("flex gap-4", containerClassName), children: [
-    /* @__PURE__ */ jsx95(List2, { className: twJoin39("flex space-x-4 overflow-x-auto", className), children: tabs.map(({ id, label, disabled }) => /* @__PURE__ */ jsx95(TabsTrigger, { id, label, disabled }, id)) }),
+  const { tabs, currentTab, layoutId } = useTabsContext();
+  return /* @__PURE__ */ jsxs47("div", { className: twJoin43("flex gap-4", containerClassName), children: [
+    /* @__PURE__ */ jsx101(List2, { className: twJoin43("flex space-x-4 overflow-x-auto", className), children: tabs.map(({ id, label, disabled }) => /* @__PURE__ */ jsx101(
+      TabsTrigger,
+      {
+        id,
+        label,
+        disabled,
+        isActive: currentTab === id,
+        layoutId
+      },
+      id
+    )) }),
     extraNode
   ] });
 };
 var ComposableTabContent = ({ id, ...rest }) => {
-  return /* @__PURE__ */ jsx95(Content9, { value: id, ...rest });
+  return /* @__PURE__ */ jsx101(Content9, { value: id, ...rest });
 };
 var ComposableAlwaysMountedTabContent = ({
   id,
@@ -4105,7 +4534,7 @@ var ComposableAlwaysMountedTabContent = ({
 }) => {
   const { currentTab } = useTabsContext();
   const visible = id === currentTab;
-  return /* @__PURE__ */ jsx95("div", { className: twJoin39(visible ? visibleClassName : "hidden", className), children });
+  return /* @__PURE__ */ jsx101("div", { className: twJoin43(visible ? visibleClassName : "hidden", className), children });
 };
 var ComposableTabsRoot = ({
   tabs,
@@ -4114,7 +4543,8 @@ var ComposableTabsRoot = ({
   className,
   children
 }) => {
-  return /* @__PURE__ */ jsx95(TabsProvider, { tabs, currentTab, children: /* @__PURE__ */ jsx95(Root9, { className, value: currentTab, onValueChange: (id) => setCurrentTab(id), children }) });
+  const layoutId = useId4();
+  return /* @__PURE__ */ jsx101(TabsProvider, { tabs, currentTab, layoutId, children: /* @__PURE__ */ jsx101(Root9, { className, value: currentTab, onValueChange: (id) => setCurrentTab(id), children }) });
 };
 var ComposableTabs = {
   Root: ComposableTabsRoot,
@@ -4124,33 +4554,33 @@ var ComposableTabs = {
 };
 
 // src/core/tag/Tag.tsx
-import { faXmark as faXmark5 } from "@fortawesome/free-solid-svg-icons";
-import * as React12 from "react";
-import { jsx as jsx96, jsxs as jsxs43 } from "react/jsx-runtime";
-var TagLabel = ({ children, removable, onRemove, intent = "default", ...rest }, ref) => /* @__PURE__ */ jsxs43(Label, { ...rest, ref, intent, children: [
+import { faClose as faClose3 } from "@fortawesome/sharp-solid-svg-icons";
+import * as React14 from "react";
+import { jsx as jsx102, jsxs as jsxs48 } from "react/jsx-runtime";
+var TagLabel = ({ children, removable, onRemove, intent = "default", ...rest }, ref) => /* @__PURE__ */ jsxs48(Label, { ...rest, ref, intent, children: [
   children,
-  removable && /* @__PURE__ */ jsx96(
+  removable && /* @__PURE__ */ jsx102(
     "button",
     {
-      className: "ml-1 inline-flex h-xs items-center px-1 text-gray-500 hover:text-gray-700 focus:outline-hidden",
+      className: "ml-1 inline-flex h-xs items-center px-1 text-muted hover:text-neutral focus:outline-hidden",
       onClick: onRemove,
-      children: /* @__PURE__ */ jsx96(Icon, { icon: faXmark5 })
+      children: /* @__PURE__ */ jsx102(Icon, { icon: faClose3 })
     }
   )
 ] });
-var TagImpl = React12.forwardRef(TagLabel);
+var TagImpl = React14.forwardRef(TagLabel);
 var Tag = ({ tooltip, ...rest }) => {
   if (!tooltip) {
-    return /* @__PURE__ */ jsx96(TagImpl, { ...rest });
+    return /* @__PURE__ */ jsx102(TagImpl, { ...rest });
   }
-  return /* @__PURE__ */ jsx96(Tooltip, { trigger: /* @__PURE__ */ jsx96(TagImpl, { ...rest }), content: /* @__PURE__ */ jsx96("p", { className: "text-sm", children: tooltip }) });
+  return /* @__PURE__ */ jsx102(Tooltip, { trigger: /* @__PURE__ */ jsx102(TagImpl, { ...rest }), content: /* @__PURE__ */ jsx102("p", { className: "text-sm", children: tooltip }) });
 };
 
 // src/core/utils/useIsHovered.ts
-import { useEffect as useEffect8, useState as useState11 } from "react";
+import { useEffect as useEffect10, useState as useState12 } from "react";
 var useIsHovered = (ref) => {
-  const [isHovered, setIsHovered] = useState11(false);
-  useEffect8(() => {
+  const [isHovered, setIsHovered] = useState12(false);
+  useEffect10(() => {
     const handleMouseMove = () => {
       if (ref.current?.matches(":hover")) {
         setIsHovered(true);
@@ -4178,10 +4608,13 @@ export {
   AlertModal,
   AsyncMultiSelect,
   AsyncSelect,
+  Avatar,
+  AvatarGroup,
+  AvatarWithName,
   Button,
   ButtonGroup,
-  CURRENCY_REGEX,
   Callout,
+  Card,
   Checkbox,
   Collapsible,
   CollapsibleSection,
@@ -4211,7 +4644,7 @@ export {
   FormSelect,
   FormSwitch,
   FormTextArea,
-  FullscreenModal,
+  FullscreenModalNamespace as FullscreenModal,
   HeaderTile,
   Icon,
   IndeterminateCheckbox,
@@ -4231,7 +4664,6 @@ export {
   PercentInput,
   PhoneNumber,
   Popover,
-  RING_COLOR_CLASSNAME,
   RadioButtonGroup,
   RadioButtonItem,
   ScrollTabsLayout,
@@ -4254,39 +4686,28 @@ export {
   TextAreaComp,
   Tooltip,
   TooltipContent,
+  TwoCirclesSpinner,
   UncontrolledField,
   UncontrolledFieldProvider,
-  asNullish,
-  asNumericStr,
-  asOptional,
-  asRequiredCustom,
-  buildZodIssue,
+  VirtualizedTable,
+  bodyClassNames,
   buttonStyles,
   copyToClipboard,
   createContextHelper,
   createToggleContextHelper,
-  createTypedTabs,
   doesSelectItemMatch,
-  dollarsStrSchema,
   formatPhoneNumber,
   formatPhoneNumberForDisplay,
   getCountry,
   getFieldError,
+  getInitials,
+  headerClassNames,
   inputBoxStyles,
   inputStyles,
   isValidPhoneNumber,
   linkStyles,
   localStoragePersist,
-  npiSchema,
-  npiSchemaOptional,
-  requiredDollarsStrSchema,
-  requiredDollarsStrSchemaWithCustomMessage,
-  requiredNonZeroDollarsStrSchema,
-  requiredPositiveDollarsStrSchema,
-  requiredPositiveOrZeroDollarsStrSchema,
-  selectedAmountSchema,
-  taxIdSchema,
-  taxonomyCodeSchema,
+  tableVariants,
   useAsyncMultiSelect,
   useAsyncSelect,
   useControlledField,
@@ -4298,8 +4719,9 @@ export {
   useDrawerResize,
   useFieldArray,
   useForm,
-  useFormContext,
+  useFormContext2 as useFormContext,
   useFormState2 as useFormState,
+  useIntersectionObserver,
   useIsEditing,
   useIsHovered,
   useIsVisible,