dash-ui-kit 1.0.5 → 1.0.8

package/dist/react/index.esm.js

@@ -149,7 +149,7 @@ function createSlotClone(ownerName) {
   const SlotClone = React.forwardRef((props, forwardedRef) => {
     const { children, ...slotProps } = props;
     if (React.isValidElement(children)) {
-      const childrenRef = getElementRef$2(children);
+      const childrenRef = getElementRef$3(children);
       const props2 = mergeProps(slotProps, children.props);
       if (children.type !== React.Fragment) {
         props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
@@ -189,7 +189,7 @@ function mergeProps(slotProps, childProps) {
   }
   return { ...slotProps, ...overrideProps };
 }
-function getElementRef$2(element) {
+function getElementRef$3(element) {
   let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
   let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
   if (mayWarn) {
@@ -267,7 +267,7 @@ function createCollection(name) {
 }
 
 // src/primitive.tsx
-function composeEventHandlers$1(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
+function composeEventHandlers$2(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
   return function handleEvent(event) {
     originalEventHandler?.(event);
     if (checkForDefaultPrevented === false || !event.defaultPrevented) {
@@ -383,7 +383,7 @@ function dispatchDiscreteCustomEvent(target, event) {
   if (target) ReactDOM.flushSync(() => target.dispatchEvent(event));
 }
 
-function useStateMachine$1(initialState, machine) {
+function useStateMachine$2(initialState, machine) {
   return React.useReducer((state, event) => {
     const nextState = machine[state][event];
     return nextState ?? state;
@@ -391,22 +391,22 @@ function useStateMachine$1(initialState, machine) {
 }
 
 // src/presence.tsx
-var Presence$1 = (props) => {
+var Presence$2 = (props) => {
   const { present, children } = props;
-  const presence = usePresence$1(present);
+  const presence = usePresence$2(present);
   const child = typeof children === "function" ? children({ present: presence.isPresent }) : React.Children.only(children);
-  const ref = useComposedRefs(presence.ref, getElementRef$1(child));
+  const ref = useComposedRefs(presence.ref, getElementRef$2(child));
   const forceMount = typeof children === "function";
   return forceMount || presence.isPresent ? React.cloneElement(child, { ref }) : null;
 };
-Presence$1.displayName = "Presence";
-function usePresence$1(present) {
+Presence$2.displayName = "Presence";
+function usePresence$2(present) {
   const [node, setNode] = React.useState();
   const stylesRef = React.useRef(null);
   const prevPresentRef = React.useRef(present);
   const prevAnimationNameRef = React.useRef("none");
   const initialState = present ? "mounted" : "unmounted";
-  const [state, send] = useStateMachine$1(initialState, {
+  const [state, send] = useStateMachine$2(initialState, {
     mounted: {
       UNMOUNT: "unmounted",
       ANIMATION_OUT: "unmountSuspended"
@@ -420,7 +420,7 @@ function usePresence$1(present) {
     }
   });
   React.useEffect(() => {
-    const currentAnimationName = getAnimationName$1(stylesRef.current);
+    const currentAnimationName = getAnimationName$2(stylesRef.current);
     prevAnimationNameRef.current = state === "mounted" ? currentAnimationName : "none";
   }, [state]);
   useLayoutEffect2(() => {
@@ -429,7 +429,7 @@ function usePresence$1(present) {
     const hasPresentChanged = wasPresent !== present;
     if (hasPresentChanged) {
       const prevAnimationName = prevAnimationNameRef.current;
-      const currentAnimationName = getAnimationName$1(styles);
+      const currentAnimationName = getAnimationName$2(styles);
       if (present) {
         send("MOUNT");
       } else if (currentAnimationName === "none" || styles?.display === "none") {
@@ -450,7 +450,7 @@ function usePresence$1(present) {
       let timeoutId;
       const ownerWindow = node.ownerDocument.defaultView ?? window;
       const handleAnimationEnd = (event) => {
-        const currentAnimationName = getAnimationName$1(stylesRef.current);
+        const currentAnimationName = getAnimationName$2(stylesRef.current);
         const isCurrentAnimation = currentAnimationName.includes(CSS.escape(event.animationName));
         if (event.target === node && isCurrentAnimation) {
           send("ANIMATION_END");
@@ -467,7 +467,7 @@ function usePresence$1(present) {
       };
       const handleAnimationStart = (event) => {
         if (event.target === node) {
-          prevAnimationNameRef.current = getAnimationName$1(stylesRef.current);
+          prevAnimationNameRef.current = getAnimationName$2(stylesRef.current);
         }
       };
       node.addEventListener("animationstart", handleAnimationStart);
@@ -491,10 +491,10 @@ function usePresence$1(present) {
     }, [])
   };
 }
-function getAnimationName$1(styles) {
+function getAnimationName$2(styles) {
   return styles?.animationName || "none";
 }
-function getElementRef$1(element) {
+function getElementRef$2(element) {
   let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
   let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
   if (mayWarn) {
@@ -510,11 +510,11 @@ function getElementRef$1(element) {
 
 // packages/react/id/src/id.tsx
 var useReactId = React[" useId ".trim().toString()] || (() => void 0);
-var count$1 = 0;
+var count$2 = 0;
 function useId(deterministicId) {
   const [id, setId] = React.useState(useReactId());
   useLayoutEffect2(() => {
-    setId((reactId) => reactId ?? String(count$1++));
+    setId((reactId) => reactId ?? String(count$2++));
   }, [deterministicId]);
   return (id ? `radix-${id}` : "");
 }
@@ -549,7 +549,7 @@ var Collapsible = React.forwardRef(
         children: /* @__PURE__ */ jsx(
           Primitive.div,
           {
-            "data-state": getState$2(open),
+            "data-state": getState$3(open),
             "data-disabled": disabled ? "" : void 0,
             ...collapsibleProps,
             ref: forwardedRef
@@ -560,40 +560,40 @@ var Collapsible = React.forwardRef(
   }
 );
 Collapsible.displayName = COLLAPSIBLE_NAME;
-var TRIGGER_NAME$4 = "CollapsibleTrigger";
+var TRIGGER_NAME$5 = "CollapsibleTrigger";
 var CollapsibleTrigger = React.forwardRef(
   (props, forwardedRef) => {
     const { __scopeCollapsible, ...triggerProps } = props;
-    const context = useCollapsibleContext(TRIGGER_NAME$4, __scopeCollapsible);
+    const context = useCollapsibleContext(TRIGGER_NAME$5, __scopeCollapsible);
     return /* @__PURE__ */ jsx(
       Primitive.button,
       {
         type: "button",
         "aria-controls": context.contentId,
         "aria-expanded": context.open || false,
-        "data-state": getState$2(context.open),
+        "data-state": getState$3(context.open),
         "data-disabled": context.disabled ? "" : void 0,
         disabled: context.disabled,
         ...triggerProps,
         ref: forwardedRef,
-        onClick: composeEventHandlers$1(props.onClick, context.onOpenToggle)
+        onClick: composeEventHandlers$2(props.onClick, context.onOpenToggle)
       }
     );
   }
 );
-CollapsibleTrigger.displayName = TRIGGER_NAME$4;
-var CONTENT_NAME$5 = "CollapsibleContent";
+CollapsibleTrigger.displayName = TRIGGER_NAME$5;
+var CONTENT_NAME$7 = "CollapsibleContent";
 var CollapsibleContent = React.forwardRef(
   (props, forwardedRef) => {
     const { forceMount, ...contentProps } = props;
-    const context = useCollapsibleContext(CONTENT_NAME$5, props.__scopeCollapsible);
-    return /* @__PURE__ */ jsx(Presence$1, { present: forceMount || context.open, children: ({ present }) => /* @__PURE__ */ jsx(CollapsibleContentImpl, { ...contentProps, ref: forwardedRef, present }) });
+    const context = useCollapsibleContext(CONTENT_NAME$7, props.__scopeCollapsible);
+    return /* @__PURE__ */ jsx(Presence$2, { present: forceMount || context.open, children: ({ present }) => /* @__PURE__ */ jsx(CollapsibleContentImpl, { ...contentProps, ref: forwardedRef, present }) });
   }
 );
-CollapsibleContent.displayName = CONTENT_NAME$5;
+CollapsibleContent.displayName = CONTENT_NAME$7;
 var CollapsibleContentImpl = React.forwardRef((props, forwardedRef) => {
   const { __scopeCollapsible, present, children, ...contentProps } = props;
-  const context = useCollapsibleContext(CONTENT_NAME$5, __scopeCollapsible);
+  const context = useCollapsibleContext(CONTENT_NAME$7, __scopeCollapsible);
   const [isPresent, setIsPresent] = React.useState(present);
   const ref = React.useRef(null);
   const composedRefs = useComposedRefs(forwardedRef, ref);
@@ -630,7 +630,7 @@ var CollapsibleContentImpl = React.forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx(
     Primitive.div,
     {
-      "data-state": getState$2(context.open),
+      "data-state": getState$3(context.open),
       "data-disabled": context.disabled ? "" : void 0,
       id: context.contentId,
       hidden: !isOpen,
@@ -645,12 +645,12 @@ var CollapsibleContentImpl = React.forwardRef((props, forwardedRef) => {
     }
   );
 });
-function getState$2(open) {
+function getState$3(open) {
   return open ? "open" : "closed";
 }
 var Root$3 = Collapsible;
-var Trigger$3 = CollapsibleTrigger;
-var Content$3 = CollapsibleContent;
+var Trigger$4 = CollapsibleTrigger;
+var Content$4 = CollapsibleContent;
 
 // packages/react/direction/src/direction.tsx
 var DirectionContext = React.createContext(void 0);
@@ -751,7 +751,7 @@ var AccordionImpl = React__default.forwardRef(
     const getItems = useCollection$2(__scopeAccordion);
     const direction = useDirection(dir);
     const isDirectionLTR = direction === "ltr";
-    const handleKeyDown = composeEventHandlers$1(props.onKeyDown, (event) => {
+    const handleKeyDown = composeEventHandlers$2(props.onKeyDown, (event) => {
       if (!ACCORDION_KEYS.includes(event.key)) return;
       const target = event.target;
       const triggerCollection = getItems().filter((item) => !item.ref.current?.disabled);
@@ -855,7 +855,7 @@ var AccordionItem = React__default.forwardRef(
           Root$3,
           {
             "data-orientation": accordionContext.orientation,
-            "data-state": getState$1(open),
+            "data-state": getState$2(open),
             ...collapsibleScope,
             ...accordionItemProps,
             ref: forwardedRef,
@@ -885,7 +885,7 @@ var AccordionHeader = React__default.forwardRef(
       Primitive.h3,
       {
         "data-orientation": accordionContext.orientation,
-        "data-state": getState$1(itemContext.open),
+        "data-state": getState$2(itemContext.open),
         "data-disabled": itemContext.disabled ? "" : void 0,
         ...headerProps,
         ref: forwardedRef
@@ -894,16 +894,16 @@ var AccordionHeader = React__default.forwardRef(
   }
 );
 AccordionHeader.displayName = HEADER_NAME;
-var TRIGGER_NAME$3 = "AccordionTrigger";
+var TRIGGER_NAME$4 = "AccordionTrigger";
 var AccordionTrigger = React__default.forwardRef(
   (props, forwardedRef) => {
     const { __scopeAccordion, ...triggerProps } = props;
     const accordionContext = useAccordionContext(ACCORDION_NAME, __scopeAccordion);
-    const itemContext = useAccordionItemContext(TRIGGER_NAME$3, __scopeAccordion);
-    const collapsibleContext = useAccordionCollapsibleContext(TRIGGER_NAME$3, __scopeAccordion);
+    const itemContext = useAccordionItemContext(TRIGGER_NAME$4, __scopeAccordion);
+    const collapsibleContext = useAccordionCollapsibleContext(TRIGGER_NAME$4, __scopeAccordion);
     const collapsibleScope = useCollapsibleScope(__scopeAccordion);
     return /* @__PURE__ */ jsx(Collection$2.ItemSlot, { scope: __scopeAccordion, children: /* @__PURE__ */ jsx(
-      Trigger$3,
+      Trigger$4,
       {
         "aria-disabled": itemContext.open && !collapsibleContext.collapsible || void 0,
         "data-orientation": accordionContext.orientation,
@@ -915,16 +915,16 @@ var AccordionTrigger = React__default.forwardRef(
     ) });
   }
 );
-AccordionTrigger.displayName = TRIGGER_NAME$3;
-var CONTENT_NAME$4 = "AccordionContent";
+AccordionTrigger.displayName = TRIGGER_NAME$4;
+var CONTENT_NAME$6 = "AccordionContent";
 var AccordionContent = React__default.forwardRef(
   (props, forwardedRef) => {
     const { __scopeAccordion, ...contentProps } = props;
     const accordionContext = useAccordionContext(ACCORDION_NAME, __scopeAccordion);
-    const itemContext = useAccordionItemContext(CONTENT_NAME$4, __scopeAccordion);
+    const itemContext = useAccordionItemContext(CONTENT_NAME$6, __scopeAccordion);
     const collapsibleScope = useCollapsibleScope(__scopeAccordion);
     return /* @__PURE__ */ jsx(
-      Content$3,
+      Content$4,
       {
         role: "region",
         "aria-labelledby": itemContext.triggerId,
@@ -941,14 +941,14 @@ var AccordionContent = React__default.forwardRef(
     );
   }
 );
-AccordionContent.displayName = CONTENT_NAME$4;
-function getState$1(open) {
+AccordionContent.displayName = CONTENT_NAME$6;
+function getState$2(open) {
   return open ? "open" : "closed";
 }
-var Root2$3 = Accordion$1;
+var Root2$5 = Accordion$1;
 var Item$2 = AccordionItem;
 var Trigger2 = AccordionTrigger;
-var Content2$1 = AccordionContent;
+var Content2$2 = AccordionContent;
 
 const ThemeContext = /*#__PURE__*/createContext(undefined);
 /**
@@ -1780,6 +1780,217 @@ const CheckmarkIcon = ({
     fill: 'currentColor'
   })
 });
+const FingerprintIcon = ({
+  color = '#4C7EFF',
+  size = 16,
+  className = '',
+  onClick
+}) => jsxs("svg", {
+  width: size,
+  height: size * 18 / 16,
+  viewBox: '0 0 16 18',
+  fill: 'none',
+  xmlns: 'http://www.w3.org/2000/svg',
+  className: className,
+  onClick: onClick,
+  color: color,
+  children: [jsx("g", {
+    clipPath: 'url(#clip0_344_10)',
+    children: jsx("path", {
+      d: 'M7.49902 10.7754C7.49902 10.4994 7.72307 10.2756 7.99902 10.2754C8.27517 10.2754 8.49902 10.4992 8.49902 10.7754C8.49919 13.2206 10.3867 15.1621 12.666 15.1621C12.7316 15.1621 12.7771 15.1568 12.8877 15.1504C13.1632 15.1344 13.3998 15.3446 13.416 15.6201C13.432 15.8957 13.2219 16.1323 12.9463 16.1484C12.8892 16.1518 12.7698 16.1621 12.666 16.1621C9.7913 16.1621 7.49919 13.7288 7.49902 10.7754ZM9.83301 10.7754C9.83301 9.67981 8.99005 8.83105 7.99902 8.83105C7.00815 8.83115 6.16602 9.67988 6.16602 10.7754C6.16615 13.2329 7.40072 15.3789 9.24219 16.5811C9.47341 16.732 9.53863 17.0422 9.3877 17.2734C9.23675 17.5047 8.92654 17.5699 8.69531 17.4189C6.57168 16.0326 5.16615 13.5716 5.16602 10.7754C5.16602 9.17145 6.41301 7.83115 7.99902 7.83105C9.58521 7.83105 10.833 9.1714 10.833 10.7754C10.8332 11.8706 11.6753 12.7185 12.666 12.7188C13.6569 12.7188 14.4998 11.8708 14.5 10.7754C14.5 6.98027 11.5681 3.94339 8 3.94336C4.43197 3.94336 1.5 6.98025 1.5 10.7754C1.50003 11.642 1.59311 12.4863 1.76367 13.3008C1.82027 13.5711 1.64626 13.836 1.37598 13.8926C1.1058 13.949 0.840761 13.776 0.78418 13.5059C0.60006 12.6266 0.500029 11.7135 0.5 10.7754C0.5 6.47198 3.83668 2.94336 8 2.94336C12.1634 2.94339 15.5 6.47199 15.5 10.7754C15.4998 12.3792 14.252 13.7188 12.666 13.7188C11.0801 13.7185 9.83322 12.3791 9.83301 10.7754ZM12.1641 10.7754C12.1641 8.33008 10.2774 6.38782 7.99805 6.3877C5.71856 6.3877 3.83105 8.33001 3.83105 10.7754C3.83114 12.7587 4.42559 14.5927 5.43359 16.0986C5.5871 16.328 5.52599 16.6383 5.29688 16.792C5.06741 16.9456 4.75615 16.8847 4.60254 16.6553C3.48649 14.988 2.83114 12.9608 2.83105 10.7754C2.83105 7.82181 5.1232 5.3877 7.99805 5.3877C10.8728 5.38782 13.1641 7.82189 13.1641 10.7754C13.1638 11.0513 12.9401 11.2754 12.6641 11.2754C12.3881 11.2753 12.1643 11.0513 12.1641 10.7754ZM7.99902 0.5C10.7552 0.500054 13.2178 1.77254 14.8965 3.76855C15.0742 3.9799 15.0473 4.2959 14.8359 4.47363C14.6246 4.65118 14.3095 4.62331 14.1318 4.41211C12.6279 2.62378 10.4372 1.50005 7.99902 1.5C5.5607 1.5 3.37008 2.62381 1.86621 4.41211C1.6886 4.62332 1.37345 4.65099 1.16211 4.47363C0.950784 4.29592 0.922919 3.9799 1.10059 3.76855C2.77924 1.77236 5.24256 0.5 7.99902 0.5Z',
+      fill: 'currentColor'
+    })
+  }), jsx("defs", {
+    children: jsx("clipPath", {
+      id: 'clip0_344_10',
+      children: jsx("rect", {
+        width: '15',
+        height: '17.0003',
+        fill: 'white',
+        transform: 'translate(0.5 0.5)'
+      })
+    })
+  })]
+});
+const FaceIcon = ({
+  color = '#4C7EFF',
+  size = 16,
+  className = '',
+  onClick
+}) => jsxs("svg", {
+  width: size,
+  height: size,
+  viewBox: '0 0 16 16',
+  fill: 'none',
+  xmlns: 'http://www.w3.org/2000/svg',
+  className: className,
+  onClick: onClick,
+  color: color,
+  children: [jsx("g", {
+    clipPath: 'url(#clip0_344_11)',
+    children: jsx("path", {
+      d: 'M0.5 13.4443V11.8887C0.500117 11.6126 0.72393 11.3887 1 11.3887C1.27607 11.3887 1.49988 11.6126 1.5 11.8887V13.4443C1.5 14.0273 1.97269 14.5 2.55566 14.5H4.11133C4.38737 14.5001 4.61133 14.7239 4.61133 15C4.61133 15.2761 4.38737 15.4999 4.11133 15.5H2.55566C1.42042 15.5 0.5 14.5796 0.5 13.4443ZM14.5 13.4443V11.8887C14.5001 11.6126 14.7239 11.3887 15 11.3887C15.2761 11.3887 15.4999 11.6126 15.5 11.8887V13.4443C15.5 14.5796 14.5796 15.5 13.4443 15.5H11.8887C11.6126 15.4999 11.3887 15.2761 11.3887 15C11.3887 14.7239 11.6126 14.5001 11.8887 14.5H13.4443C14.0273 14.5 14.5 14.0273 14.5 13.4443ZM12.167 8C12.167 5.69881 10.3012 3.83301 8 3.83301C5.69881 3.83301 3.83301 5.69881 3.83301 8C3.83301 10.3012 5.69881 12.167 8 12.167C10.3012 12.167 12.167 10.3012 12.167 8ZM9.53516 8.55859C9.70911 8.40443 9.97277 8.3884 10.166 8.5332C10.3869 8.69889 10.4323 9.01248 10.2666 9.2334L9.86621 8.93262C10.2294 9.205 10.2636 9.23094 10.2666 9.2334L10.2637 9.23633C10.2627 9.23759 10.262 9.23953 10.2607 9.24121C10.2581 9.24469 10.2541 9.24874 10.25 9.25391C10.2418 9.2643 10.2307 9.2784 10.2168 9.29492C10.189 9.32801 10.1497 9.37253 10.0996 9.4248C9.99965 9.52911 9.85378 9.66639 9.66504 9.80371C9.28904 10.0772 8.72095 10.3661 8 10.3662C7.2789 10.3662 6.71101 10.0772 6.33496 9.80371C6.14601 9.66628 5.99945 9.52919 5.89941 9.4248C5.8493 9.3725 5.80999 9.328 5.78223 9.29492C5.76831 9.27835 5.75726 9.26431 5.74902 9.25391C5.74508 9.24892 5.74189 9.24462 5.73926 9.24121C5.73791 9.23947 5.73634 9.23762 5.73535 9.23633L5.73438 9.23438L5.7334 9.2334C5.56773 9.01251 5.61215 8.6989 5.83301 8.5332C6.05389 8.36754 6.3675 8.41199 6.5332 8.63281C6.53579 8.63608 6.54133 8.64243 6.54883 8.65137C6.56387 8.66929 6.58845 8.69831 6.62207 8.7334C6.6897 8.80392 6.79138 8.89948 6.92285 8.99512C7.18846 9.18829 7.55443 9.36621 8 9.36621C8.44541 9.36613 8.81062 9.18823 9.07617 8.99512C9.20793 8.89929 9.31027 8.80399 9.37793 8.7334C9.41155 8.69831 9.43613 8.66929 9.45117 8.65137C9.45853 8.64259 9.46326 8.63604 9.46582 8.63281L9.4668 8.63184L9.53516 8.55859ZM6.6748 5.87012C7.04474 5.90742 7.33383 6.21987 7.33398 6.59961C7.33398 7.00454 7.00548 7.33286 6.60059 7.33301C6.22088 7.33301 5.90862 7.04465 5.87109 6.6748L5.86719 6.59961L5.87109 6.52539C5.90846 6.15538 6.22076 5.86621 6.60059 5.86621L6.6748 5.87012ZM9.47461 5.87012C9.84447 5.90747 10.1336 6.21994 10.1338 6.59961C10.1338 7.0045 9.80523 7.3328 9.40039 7.33301C9.02064 7.33301 8.70839 7.04466 8.6709 6.6748L8.66699 6.59961L8.6709 6.52539C8.7083 6.15544 9.02057 5.86621 9.40039 5.86621L9.47461 5.87012ZM0.5 4.11133V2.55566C0.5 1.42041 1.42041 0.5 2.55566 0.5H4.11133C4.38737 0.500117 4.61133 0.72393 4.61133 1C4.61133 1.27607 4.38737 1.49988 4.11133 1.5H2.55566C1.9727 1.5 1.5 1.9727 1.5 2.55566V4.11133C1.49988 4.38737 1.27607 4.61133 1 4.61133C0.72393 4.61133 0.500117 4.38737 0.5 4.11133ZM14.5 4.11133V2.55566C14.5 1.97269 14.0273 1.5 13.4443 1.5H11.8887C11.6126 1.49988 11.3887 1.27607 11.3887 1C11.3887 0.72393 11.6126 0.500117 11.8887 0.5H13.4443C14.5796 0.5 15.5 1.42042 15.5 2.55566V4.11133C15.4999 4.38737 15.2761 4.61133 15 4.61133C14.7239 4.61133 14.5001 4.38737 14.5 4.11133ZM13.167 8C13.167 10.8535 10.8535 13.167 8 13.167C5.14653 13.167 2.83301 10.8535 2.83301 8C2.83301 5.14653 5.14653 2.83301 8 2.83301C10.8535 2.83301 13.167 5.14653 13.167 8Z',
+      fill: 'currentColor'
+    })
+  }), jsx("defs", {
+    children: jsx("clipPath", {
+      id: 'clip0_344_11',
+      children: jsx("rect", {
+        width: '15',
+        height: '15',
+        fill: 'white',
+        transform: 'translate(0.5 0.5)'
+      })
+    })
+  })]
+});
+const SignIcon = ({
+  color = '#4C7EFF',
+  size = 18,
+  className = '',
+  onClick
+}) => jsxs("svg", {
+  width: size,
+  height: size * 13 / 18,
+  viewBox: '0 0 18 13',
+  fill: 'none',
+  xmlns: 'http://www.w3.org/2000/svg',
+  className: className,
+  onClick: onClick,
+  color: color,
+  children: [jsx("g", {
+    clipPath: 'url(#clip0_404_64)',
+    children: jsx("path", {
+      d: 'M6.53027 0.0273435C7.08771 -0.064076 7.65575 0.0700326 8.16992 0.458984C8.67255 0.839261 9.10671 1.44872 9.46094 2.28906C9.70475 2.86745 9.86928 3.44788 9.96484 4.02344L12.3721 3.07227C12.5375 3.00706 12.7255 3.03455 12.8652 3.14453C13.005 3.25462 13.0755 3.43124 13.0508 3.60742L12.6865 6.20117H14.333C14.6092 6.20117 14.833 6.42503 14.833 6.70117C14.8328 6.97717 14.609 7.20117 14.333 7.20117H12.1113C11.9666 7.20117 11.8284 7.13851 11.7334 7.0293C11.6384 6.92006 11.5961 6.7742 11.6162 6.63086L11.9404 4.31836L10.0635 5.06055C10.1447 8.55694 7.72656 11.6369 4.75879 12.957C4.60413 13.0258 4.42514 13.0112 4.2832 12.9189C4.14133 12.8267 4.05566 12.6692 4.05566 12.5V8.7373C4.05566 8.04264 4.04844 7.56746 4.20117 7.14844C4.32988 6.79566 4.53978 6.47777 4.81445 6.22461C5.14264 5.92224 5.58129 5.75801 6.2041 5.51172L9.00977 4.40137C8.93516 3.83402 8.78323 3.25698 8.53906 2.67773C8.22671 1.93672 7.88311 1.49648 7.56641 1.25684C7.26128 1.02602 6.96815 0.96947 6.69238 1.01465C6.09985 1.11187 5.42697 1.72075 5.01465 2.68066C4.9056 2.93422 4.61204 3.05129 4.3584 2.94238C4.1048 2.83345 3.98699 2.53977 4.0957 2.28613C4.57227 1.17664 5.45614 0.203579 6.53027 0.0273435ZM1.88867 9.69238C2.16481 9.69238 2.38867 9.91624 2.38867 10.1924C2.38863 10.4685 2.16479 10.6924 1.88867 10.6924H1C0.723883 10.6924 0.500041 10.4685 0.5 10.1924C0.5 9.91624 0.723858 9.69238 1 9.69238H1.88867ZM17 9.69238C17.2761 9.69238 17.5 9.91624 17.5 10.1924C17.5 10.4685 17.2761 10.6924 17 10.6924H11.667C11.3909 10.6924 11.167 10.4685 11.167 10.1924C11.167 9.91624 11.3908 9.69238 11.667 9.69238H17ZM5.05566 11.6855C7.28061 10.4175 8.96508 8.05948 9.05957 5.45703L6.57129 6.44141C5.8732 6.71747 5.65071 6.81396 5.49219 6.95996C5.33693 7.10307 5.21561 7.28491 5.14062 7.49023C5.06293 7.70324 5.05566 7.96355 5.05566 8.7373V11.6855Z',
+      fill: 'currentColor'
+    })
+  }), jsx("defs", {
+    children: jsx("clipPath", {
+      id: 'clip0_404_64',
+      children: jsx("rect", {
+        width: '17',
+        height: '13.0002',
+        fill: 'white',
+        transform: 'translate(0.5 -0.000210285)'
+      })
+    })
+  })]
+});
+const SignLockIcon = ({
+  color = '#E93636',
+  size = 18,
+  className = '',
+  onClick
+}) => jsxs("svg", {
+  width: size,
+  height: size * 14 / 18,
+  viewBox: '0 0 18 14',
+  fill: 'none',
+  xmlns: 'http://www.w3.org/2000/svg',
+  className: className,
+  onClick: onClick,
+  color: color,
+  children: [jsx("g", {
+    clipPath: 'url(#clip0_404_76)',
+    children: jsx("path", {
+      d: 'M16.4932 11.5049C16.4897 11.4621 16.4855 11.4414 16.4834 11.4336C16.4586 11.3831 16.3971 11.3181 16.2861 11.2793C16.2232 11.2574 16.1232 11.25 15.667 11.25H13C12.5431 11.25 12.4428 11.2573 12.3799 11.2793C12.2693 11.3181 12.2084 11.3832 12.1836 11.4336C12.1815 11.4413 12.1773 11.462 12.1738 11.5049C12.1674 11.5847 12.167 11.6922 12.167 11.875C12.167 12.0578 12.1674 12.1653 12.1738 12.2451C12.1773 12.288 12.1815 12.3087 12.1836 12.3164C12.2084 12.3668 12.2693 12.4319 12.3799 12.4707C12.4428 12.4927 12.5431 12.5 13 12.5H15.667C16.1232 12.5 16.2232 12.4926 16.2861 12.4707C16.3971 12.4319 16.4586 12.3669 16.4834 12.3164C16.4855 12.3086 16.4897 12.2879 16.4932 12.2451C16.4996 12.1653 16.5 12.0578 16.5 11.875C16.5 11.6922 16.4996 11.5847 16.4932 11.5049ZM2.98437 0.523437C4.10616 0.362393 5.1695 1.01348 5.89453 2.51855C6.1364 3.02066 6.30201 3.52585 6.40039 4.02832L8.83691 3.18555C9.00301 3.1282 9.18671 3.16239 9.32129 3.27539C9.45592 3.38847 9.52202 3.56371 9.49414 3.7373L9.1416 5.92578H10.7773C11.0535 5.92578 11.2773 6.14964 11.2773 6.42578C11.2773 6.7019 11.0535 6.92578 10.7773 6.92578H8.55566C8.40921 6.92578 8.2698 6.86147 8.1748 6.75C8.07994 6.63862 8.03841 6.49114 8.06152 6.34668L8.37305 4.40332L6.50781 5.04883C6.55819 8.15173 4.10509 10.8278 1.18164 11.9658C1.02786 12.0257 0.854016 12.0062 0.717773 11.9131C0.581503 11.8199 0.5 11.6651 0.5 11.5V8.03516C0.499995 7.49897 0.489733 7.08066 0.652343 6.70996C0.786092 6.40516 0.999951 6.1403 1.26758 5.93262C1.58317 5.68773 2.00072 5.55065 2.60156 5.34277L5.44434 4.3584C5.36773 3.89678 5.22244 3.42607 4.99414 2.95215C4.38598 1.68972 3.6718 1.43557 3.12695 1.51367C2.50982 1.60227 1.84792 2.14387 1.44922 2.95605C1.32748 3.20381 1.02712 3.30623 0.779297 3.18457C0.531506 3.06284 0.429116 2.76249 0.550781 2.51465C1.04096 1.51619 1.93493 0.67416 2.98437 0.523437ZM9.44434 8.75C9.72048 8.75 9.94434 8.97386 9.94434 9.25C9.94434 9.52614 9.72048 9.75 9.44434 9.75H7.66699C7.39085 9.75 7.16699 9.52614 7.16699 9.25C7.16699 8.97386 7.39085 8.75 7.66699 8.75H9.44434ZM15.6113 10C15.6113 9.52394 15.1217 9 14.333 9C13.5445 9.00014 13.0557 9.524 13.0557 10V10.25H15.6113V10ZM16.6113 10.333C16.613 10.3336 16.6146 10.3344 16.6162 10.335L16.7363 10.3828C17.0101 10.5066 17.2447 10.7151 17.3809 10.9922C17.4533 11.14 17.4793 11.289 17.4902 11.4248C17.5007 11.5541 17.5 11.7086 17.5 11.875C17.5 12.0414 17.5007 12.1959 17.4902 12.3252C17.4793 12.461 17.4533 12.609 17.3809 12.7568C17.2447 13.0339 17.0101 13.2434 16.7363 13.3672L16.6162 13.415C16.4183 13.4842 16.192 13.4977 15.9346 13.5H12.7324C12.475 13.4977 12.2487 13.4841 12.0508 13.415C11.7262 13.3016 11.4408 13.0747 11.2852 12.7578C11.2128 12.6101 11.1877 12.461 11.1768 12.3252C11.1663 12.1959 11.167 12.0414 11.167 11.875C11.167 11.7086 11.1663 11.5541 11.1768 11.4248C11.1877 11.289 11.2128 11.1409 11.2852 10.9932C11.4408 10.6763 11.7262 10.4484 12.0508 10.335C12.0524 10.3344 12.054 10.3336 12.0557 10.333V10C12.0557 8.81927 13.1581 8.00015 14.333 8C15.508 8 16.6113 8.81916 16.6113 10V10.333ZM1.5 10.7324C3.72796 9.63149 5.37826 7.6016 5.50098 5.39648L2.92871 6.28711C2.25442 6.5204 2.03397 6.60389 1.88086 6.72266C1.73431 6.83638 1.62998 6.97184 1.56836 7.1123C1.51002 7.24545 1.5 7.40909 1.5 8.03516V10.7324Z',
+      fill: 'currentColor'
+    })
+  }), jsx("defs", {
+    children: jsx("clipPath", {
+      id: 'clip0_404_76',
+      children: jsx("rect", {
+        width: '17.0005',
+        height: '13.0005',
+        fill: 'white',
+        transform: 'translate(0.499533 0.499527)'
+      })
+    })
+  })]
+});
+const LockIcon = ({
+  color = '#E93636',
+  size = 8,
+  className = '',
+  onClick
+}) => jsxs("svg", {
+  width: size,
+  height: size * 10 / 8,
+  viewBox: '0 0 8 10',
+  fill: 'none',
+  xmlns: 'http://www.w3.org/2000/svg',
+  className: className,
+  onClick: onClick,
+  color: color,
+  children: [jsx("g", {
+    clipPath: 'url(#clip0_404_71)',
+    children: jsx("path", {
+      d: 'M6.5 6.24414C6.5 5.86411 6.50017 5.60437 6.48633 5.40332C6.47272 5.20598 6.44735 5.10448 6.41797 5.03613C6.34685 4.8709 6.23984 4.75273 6.12695 4.68457C6.09177 4.66338 6.02689 4.63665 5.83887 4.62305C5.68428 4.61185 5.48725 4.61133 5.2002 4.61133H2.7998C2.51275 4.61133 2.31573 4.61185 2.16113 4.62305C1.97305 4.63665 1.9082 4.66339 1.87305 4.68457C1.76015 4.75274 1.65315 4.87091 1.58203 5.03613C1.55265 5.10448 1.52728 5.20597 1.51367 5.40332C1.49983 5.60437 1.5 5.86412 1.5 6.24414V6.86621C1.5 7.24654 1.49981 7.50688 1.51367 7.70801C1.52726 7.90512 1.5527 8.00587 1.58203 8.07422C1.65315 8.23965 1.76006 8.35853 1.87305 8.42676C1.90443 8.44566 1.96075 8.46998 2.10938 8.48438C2.26726 8.49966 2.4752 8.5 2.7998 8.5H5.2002C5.52481 8.5 5.73274 8.49966 5.89062 8.48438C6.03919 8.46999 6.09553 8.44567 6.12695 8.42676C6.23993 8.35854 6.34685 8.23966 6.41797 8.07422C6.44731 8.00587 6.47274 7.90512 6.48633 7.70801C6.50019 7.50688 6.5 7.24654 6.5 6.86621V6.24414ZM3.5 7V6.11133C3.5 5.83519 3.72386 5.61133 4 5.61133C4.27614 5.61133 4.5 5.83519 4.5 6.11133V7C4.5 7.27614 4.27614 7.5 4 7.5C3.72386 7.5 3.5 7.27614 3.5 7ZM5.375 3.22266C5.375 2.18852 4.68314 1.5 4 1.5C3.31686 1.5 2.625 2.18852 2.625 3.22266V3.61133H5.375V3.22266ZM6.375 3.70996C6.46629 3.73936 6.5572 3.7754 6.64453 3.82812C6.95488 4.01555 7.19235 4.3053 7.33691 4.6416C7.4301 4.85839 7.46634 5.08681 7.4834 5.33398C7.50018 5.57745 7.5 5.87787 7.5 6.24414V6.86621C7.5 7.23241 7.50016 7.53291 7.4834 7.77637C7.46635 8.02369 7.43016 8.25283 7.33691 8.46973C7.19239 8.80584 6.95466 9.09482 6.64453 9.28223C6.43528 9.40858 6.21339 9.45758 5.9873 9.47949C5.77009 9.50053 5.50539 9.5 5.2002 9.5H2.7998C2.49462 9.5 2.22991 9.50053 2.0127 9.47949C1.78662 9.45758 1.56472 9.4086 1.35547 9.28223C1.04535 9.09483 0.807617 8.80585 0.663086 8.46973C0.569851 8.25283 0.533651 8.02369 0.516602 7.77637C0.499842 7.53291 0.5 7.23241 0.5 6.86621V6.24414C0.5 5.87787 0.499818 5.57745 0.516602 5.33398C0.533661 5.08681 0.569902 4.85839 0.663086 4.6416C0.807663 4.3053 1.04514 4.01555 1.35547 3.82812C1.4428 3.77539 1.53371 3.73936 1.625 3.70996V3.22266C1.625 1.8022 2.61208 0.5 4 0.5C5.38791 0.5 6.375 1.8022 6.375 3.22266V3.70996Z',
+      fill: 'currentColor'
+    })
+  }), jsx("defs", {
+    children: jsx("clipPath", {
+      id: 'clip0_404_71',
+      children: jsx("rect", {
+        width: '7',
+        height: '9',
+        fill: 'white',
+        transform: 'translate(0.5 0.5)'
+      })
+    })
+  })]
+});
+const PendingIcon = ({
+  color = '#F49A58',
+  size = 11,
+  className = '',
+  onClick
+}) => jsxs("svg", {
+  width: size,
+  height: size,
+  viewBox: '0 0 11 11',
+  fill: 'none',
+  xmlns: 'http://www.w3.org/2000/svg',
+  className: className,
+  onClick: onClick,
+  color: color,
+  children: [jsx("g", {
+    clipPath: 'url(#clip0_405_81)',
+    children: jsx("path", {
+      d: 'M7.74672 8.71921C7.90214 8.93112 8.20171 8.97852 8.3979 8.80367C9.20215 8.08688 9.7568 7.12601 9.97194 6.06176C10.2186 4.84138 10.0011 3.57287 9.362 2.50438C8.72286 1.43588 7.70807 0.644286 6.51614 0.284445C5.32422 -0.0753959 4.04092 0.0224086 2.91729 0.558725C1.79366 1.09504 0.910553 2.03128 0.440724 3.18429C-0.0291052 4.33731 -0.051851 5.62413 0.376936 6.79302C0.805723 7.96192 1.65519 8.92878 2.75916 9.50447C3.72191 10.0065 4.81779 10.1796 5.88088 10.0051C6.1402 9.96249 6.29175 9.69977 6.22474 9.44566C6.15772 9.19155 5.89743 9.04286 5.63721 9.07962C4.80466 9.19721 3.9517 9.05305 3.1992 8.66064C2.30536 8.19452 1.61757 7.41168 1.2704 6.46527C0.923226 5.51886 0.941642 4.47697 1.32205 3.54342C1.70245 2.60986 2.41747 1.85182 3.32723 1.41759C4.23699 0.983351 5.27603 0.904162 6.24109 1.19551C7.20615 1.48686 8.02779 2.12779 8.54528 2.99291C9.06277 3.85803 9.23887 4.8851 9.03913 5.87319C8.87097 6.70504 8.44663 7.45887 7.83162 8.03221C7.63939 8.21141 7.59129 8.50729 7.74672 8.71921Z',
+      fill: 'currentColor'
+    })
+  }), jsx("defs", {
+    children: jsx("clipPath", {
+      id: 'clip0_405_81',
+      children: jsx("rect", {
+        width: '10',
+        height: '10',
+        fill: 'white',
+        transform: 'translate(0.0710678 0.071064)'
+      })
+    })
+  })]
+});
+const SearchIcon = ({
+  color = '#0C1C33',
+  size = 16,
+  className = '',
+  onClick
+}) => jsx("svg", {
+  width: size,
+  height: size,
+  viewBox: '0 0 16 16',
+  fill: 'none',
+  xmlns: 'http://www.w3.org/2000/svg',
+  className: className,
+  onClick: onClick,
+  color: color,
+  children: jsx("path", {
+    d: 'M14.569 14.0977L10.6623 10.191C11.5815 9.14938 12.0591 7.79092 11.9941 6.40327C11.9292 5.01564 11.3267 3.70776 10.3143 2.75659C9.30178 1.80542 7.95892 1.28563 6.56994 1.30729C5.18095 1.32895 3.85492 1.89036 2.87264 2.87264C1.89036 3.85492 1.32895 5.18095 1.30729 6.56994C1.28563 7.95892 1.80542 9.30178 2.75659 10.3143C3.70776 11.3267 5.01564 11.9292 6.40327 11.9941C7.79092 12.0591 9.14938 11.5815 10.191 10.6623L14.0977 14.569L14.569 14.0977ZM6.66665 11.3333C5.74364 11.3333 4.84138 11.0596 4.07396 10.5468C3.30653 10.0341 2.70839 9.30518 2.35518 8.45245C2.00197 7.59978 1.90956 6.66145 2.08962 5.7562C2.26968 4.85095 2.71414 4.01943 3.36678 3.36678C4.01943 2.71414 4.85095 2.26968 5.7562 2.08962C6.66145 1.90956 7.59978 2.00197 8.45245 2.35518C9.30518 2.70839 10.0341 3.30653 10.5468 4.07396C11.0596 4.84138 11.3333 5.74364 11.3333 6.66665C11.3319 7.90385 10.8398 9.09005 9.96492 9.96492C9.09005 10.8398 7.90385 11.3319 6.66665 11.3333Z',
+    fill: 'currentColor'
+  })
+});
 
 const accordionRootStyles = cva(`
     w-full
@@ -1895,7 +2106,7 @@ const Accordion = ({
     theme,
     border
   }) + (className ? ` ${className}` : '');
-  return jsx(Root2$3, {
+  return jsx(Root2$5, {
     type: 'single',
     collapsible: true,
     className: rootClasses,
@@ -1928,7 +2139,7 @@ const Accordion = ({
         className: `${separatorStyles({
           theme
         })} group-data-[state=closed]:opacity-0 group-data-[state=open]:opacity-100`
-      }), jsx(Content2$1, {
+      }), jsx(Content2$2, {
         forceMount: true,
         className: accordionContentStyles(),
         children: jsx("div", {
@@ -1940,6 +2151,86 @@ const Accordion = ({
   });
 };
 
+const Badge = _a => {
+  var {
+      children,
+      variant = 'default',
+      color = 'blue',
+      size = 'sm',
+      borderRadius,
+      className = '',
+      onClick
+    } = _a,
+    props = __rest(_a, ["children", "variant", "color", "size", "borderRadius", "className", "onClick"]);
+  const baseClasses = 'inline-flex items-center justify-center font-medium transition-colors';
+  // Size classes with default border radius
+  const sizeClasses = {
+    xxs: 'px-1 py-1 text-xs gap-2 rounded-full',
+    xs: 'px-[0.5rem] py-[0.25rem] text-xs rounded-full',
+    sm: 'px-[2.125rem] py-[0.625rem] text-xs rounded-full',
+    xl: 'px-[2.25rem] py-4 text-lg rounded-full'
+  };
+  // Border radius classes (overrides size border radius)
+  const borderRadiusClasses = {
+    xs: 'rounded-[0.25rem]'
+  };
+  // Color and variant combination classes
+  const getVariantClasses = () => {
+    const colorMap = {
+      blue: {
+        default: 'text-[#4C7EFF]',
+        flat: 'bg-[rgba(76,126,255,0.15)] text-[#4C7EFF]',
+        solid: 'bg-[#4C7EFF] text-white',
+        bordered: 'outline outline-1 outline-[#4C7EFF] text-[#4C7EFF]'
+      },
+      white: {
+        default: 'text-white',
+        flat: 'bg-[rgba(255,255,255,0.15)] text-white',
+        solid: 'bg-white text-[#0C1C33]',
+        bordered: 'outline outline-1 outline-white text-white'
+      },
+      gray: {
+        default: 'text-[#0C1C33]',
+        flat: 'bg-[rgba(12,28,51,0.15)] text-[#0C1C33]',
+        solid: 'bg-[#0C1C33] text-white',
+        bordered: 'outline outline-1 outline-[#0C1C33] text-[#0C1C33]'
+      },
+      'light-gray': {
+        default: 'text-[#6B7280]',
+        flat: 'bg-[#0C1C33]/5 text-[#0C1C33]',
+        solid: 'bg-[#0C1C33]/15 text-[#0C1C33]',
+        bordered: 'outline outline-1 outline-[#6B7280] text-[#6B7280]'
+      },
+      turquoise: {
+        default: 'text-[#60F6D2]',
+        flat: 'bg-[rgba(96,246,210,0.15)] text-[#60F6D2]',
+        solid: 'bg-[#60F6D2] text-[#0C1C33]',
+        bordered: 'outline outline-1 outline-[#60F6D2] text-[#60F6D2]'
+      },
+      red: {
+        default: 'text-[#CD2E00]',
+        flat: 'bg-[rgba(205,46,0,0.15)] text-[#CD2E00]',
+        solid: 'bg-[#CD2E00] text-white',
+        bordered: 'outline outline-1 outline-[#CD2E00] text-[#CD2E00]'
+      },
+      orange: {
+        default: 'text-[#F98F12]',
+        flat: 'bg-[rgba(249,143,18,0.15)] text-[#F98F12]',
+        solid: 'bg-[#F98F12] text-white',
+        bordered: 'outline outline-1 outline-[#F98F12] text-[#F98F12]'
+      }
+    };
+    return colorMap[color][variant];
+  };
+  const classes = [baseClasses, sizeClasses[size], getVariantClasses(), borderRadius && borderRadiusClasses[borderRadius], className].filter(Boolean).join(' ');
+  return jsx("span", Object.assign({
+    className: classes,
+    onClick: onClick
+  }, props, {
+    children: children
+  }));
+};
+
 const styles = cva(`
     dash-btn-base
     select-none
@@ -2222,14 +2513,15 @@ const Button = _a => {
 const input = cva('w-full transition-all font-inter placeholder:text-opacity-60 text-[0.875rem] leading-[1.0625rem]', {
   variants: {
     theme: {
-      light: 'text-[#111111] placeholder:text-[rgba(17,17,17,0.6)] bg-white',
-      dark: 'text-white placeholder:text-gray-400 bg-gray-800'
+      light: 'text-[#111111] placeholder:text-[rgba(17,17,17,0.6)]',
+      dark: 'text-white placeholder:text-gray-400'
     },
     colorScheme: {
       default: 'focus:ring-blue-500/20',
       brand: 'focus:ring-dash-brand/20',
       error: 'focus:ring-red-500/20',
-      success: 'focus:ring-green-500/20'
+      success: 'focus:ring-green-500/20',
+      'light-gray': 'focus:ring-[#6B7280]/20'
     },
     size: {
       sm: 'dash-block-sm font-light',
@@ -2237,7 +2529,8 @@ const input = cva('w-full transition-all font-inter placeholder:text-opacity-60
       xl: 'dash-block-xl font-light'
     },
     variant: {
-      outlined: 'outline outline-1 outline-offset-[-1px]'
+      outlined: 'outline outline-1 outline-offset-[-1px]',
+      filled: 'border-none'
     },
     disabled: {
       false: '',
@@ -2262,11 +2555,52 @@ const input = cva('w-full transition-all font-inter placeholder:text-opacity-60
     variant: 'outlined',
     colorScheme: 'success',
     class: 'outline-green-500 focus:outline-green-500'
+  }, {
+    variant: 'outlined',
+    colorScheme: 'light-gray',
+    class: 'outline-[#6B7280]/50 focus:outline-[#6B7280]'
   },
   // Outlined variant with focus ring
   {
     variant: 'outlined',
     class: 'focus:ring-2'
+  },
+  // Outlined variant background
+  {
+    variant: 'outlined',
+    theme: 'light',
+    class: 'bg-white'
+  }, {
+    variant: 'outlined',
+    theme: 'dark',
+    class: 'bg-gray-800'
+  },
+  // Filled variant colors
+  {
+    variant: 'filled',
+    colorScheme: 'default',
+    class: 'bg-[rgba(76,126,255,0.15)] focus:bg-[rgba(76,126,255,0.2)]'
+  }, {
+    variant: 'filled',
+    colorScheme: 'brand',
+    class: 'bg-dash-brand/15 focus:bg-dash-brand/20'
+  }, {
+    variant: 'filled',
+    colorScheme: 'error',
+    class: 'bg-red-500/15 focus:bg-red-500/20'
+  }, {
+    variant: 'filled',
+    colorScheme: 'success',
+    class: 'bg-green-500/15 focus:bg-green-500/20'
+  }, {
+    variant: 'filled',
+    colorScheme: 'light-gray',
+    class: 'bg-[#0C1C33]/5 focus:bg-[#0C1C33]/10'
+  },
+  // Filled variant with focus ring
+  {
+    variant: 'filled',
+    class: 'focus:ring-2'
   }],
   defaultVariants: {
     theme: 'light',
@@ -2302,13 +2636,16 @@ const Input = _a => {
       disabled = false,
       type,
       prefix,
+      prefixClassName = '',
       showPasswordToggle = true
     } = _a,
-    props = __rest(_a, ["className", "colorScheme", "size", "variant", "error", "success", "disabled", "type", "prefix", "showPasswordToggle"]);
+    props = __rest(_a, ["className", "colorScheme", "size", "variant", "error", "success", "disabled", "type", "prefix", "prefixClassName", "showPasswordToggle"]);
   const {
     theme
   } = useTheme();
   const [showPassword, setShowPassword] = useState(false);
+  const [prefixWidth, setPrefixWidth] = useState(0);
+  const prefixRef = useRef(null);
   // Determine color scheme based on state
   let finalColorScheme = colorScheme;
   if (error) finalColorScheme = 'error';else if (success) finalColorScheme = 'success';
@@ -2325,25 +2662,26 @@ const Input = _a => {
   const togglePasswordVisibility = () => {
     setShowPassword(!showPassword);
   };
-  // Calculate padding based on prefix length
-  const getPrefixPadding = () => {
-    if (!prefix) return 0;
-    const prefixLength = typeof prefix === 'string' ? prefix.length : 4; // default for React nodes
-    // Base padding (1rem) + prefix width estimation (0.6rem per character) + extra space (0.5rem)
-    return prefixLength * 0.6 + 1.5;
-  };
+  // Measure actual prefix width
+  useEffect(() => {
+    if (prefixRef.current) {
+      const width = prefixRef.current.offsetWidth;
+      // Convert px to rem (assuming 16px base) and add base padding (1rem) + extra space (0.5rem)
+      setPrefixWidth(width / 16 + 1.5);
+    }
+  }, [prefix]);
   // Render with prefix
   if (hasPrefix) {
-    const leftPadding = getPrefixPadding();
     return jsxs("div", {
       className: 'relative',
       children: [jsx("div", {
-        className: 'absolute left-4 top-1/2 -translate-y-1/2 z-10 text-[0.875rem] opacity-60 pointer-events-none select-none',
+        ref: prefixRef,
+        className: `absolute left-4 top-1/2 -translate-y-1/2 z-10 text-[0.875rem] opacity-60 pointer-events-none select-none ${prefixClassName}`,
         children: prefix
       }), jsx("input", Object.assign({
         className: `${classes}${isPassword && showPasswordToggle ? ' pr-12' : ''}`,
         style: {
-          paddingLeft: `${leftPadding}rem`
+          paddingLeft: prefixWidth ? `${prefixWidth}rem` : '1rem'
         },
         disabled: disabled,
         type: inputType
@@ -2755,6 +3093,7 @@ const valueCard = cva('flex items-center transition-all outline outline-1 outlin
       yellow: 'bg-dash-yellow-light !outline-dash-yellow'
     },
     size: {
+      xs: 'px-[0.5rem] py-[0.25rem] rounded-[0.25rem]',
       sm: 'dash-block-sm',
       md: 'dash-block-md',
       xl: 'dash-block-xl'
@@ -2906,7 +3245,7 @@ function clamp$1(value, [min, max]) {
 }
 
 // packages/core/primitive/src/primitive.tsx
-function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
+function composeEventHandlers$1(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
   return function handleEvent(event) {
     originalEventHandler?.(event);
     if (checkForDefaultPrevented === false || !event.defaultPrevented) {
@@ -2938,17 +3277,17 @@ function useEscapeKeydown(onEscapeKeyDownProp, ownerDocument = globalThis?.docum
   }, [onEscapeKeyDown, ownerDocument]);
 }
 
-var DISMISSABLE_LAYER_NAME = "DismissableLayer";
-var CONTEXT_UPDATE = "dismissableLayer.update";
-var POINTER_DOWN_OUTSIDE = "dismissableLayer.pointerDownOutside";
-var FOCUS_OUTSIDE = "dismissableLayer.focusOutside";
-var originalBodyPointerEvents;
-var DismissableLayerContext = React.createContext({
+var DISMISSABLE_LAYER_NAME$1 = "DismissableLayer";
+var CONTEXT_UPDATE$1 = "dismissableLayer.update";
+var POINTER_DOWN_OUTSIDE$1 = "dismissableLayer.pointerDownOutside";
+var FOCUS_OUTSIDE$1 = "dismissableLayer.focusOutside";
+var originalBodyPointerEvents$1;
+var DismissableLayerContext$1 = React.createContext({
   layers: /* @__PURE__ */ new Set(),
   layersWithOutsidePointerEventsDisabled: /* @__PURE__ */ new Set(),
   branches: /* @__PURE__ */ new Set()
 });
-var DismissableLayer = React.forwardRef(
+var DismissableLayer$1 = React.forwardRef(
   (props, forwardedRef) => {
     const {
       disableOutsidePointerEvents = false,
@@ -2959,7 +3298,7 @@ var DismissableLayer = React.forwardRef(
       onDismiss,
       ...layerProps
     } = props;
-    const context = React.useContext(DismissableLayerContext);
+    const context = React.useContext(DismissableLayerContext$1);
     const [node, setNode] = React.useState(null);
     const ownerDocument = node?.ownerDocument ?? globalThis?.document;
     const [, force] = React.useState({});
@@ -2970,7 +3309,7 @@ var DismissableLayer = React.forwardRef(
     const index = node ? layers.indexOf(node) : -1;
     const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0;
     const isPointerEventsEnabled = index >= highestLayerWithOutsidePointerEventsDisabledIndex;
-    const pointerDownOutside = usePointerDownOutside((event) => {
+    const pointerDownOutside = usePointerDownOutside$1((event) => {
       const target = event.target;
       const isPointerDownOnBranch = [...context.branches].some((branch) => branch.contains(target));
       if (!isPointerEventsEnabled || isPointerDownOnBranch) return;
@@ -2978,7 +3317,7 @@ var DismissableLayer = React.forwardRef(
       onInteractOutside?.(event);
       if (!event.defaultPrevented) onDismiss?.();
     }, ownerDocument);
-    const focusOutside = useFocusOutside((event) => {
+    const focusOutside = useFocusOutside$1((event) => {
       const target = event.target;
       const isFocusInBranch = [...context.branches].some((branch) => branch.contains(target));
       if (isFocusInBranch) return;
@@ -2999,16 +3338,16 @@ var DismissableLayer = React.forwardRef(
       if (!node) return;
       if (disableOutsidePointerEvents) {
         if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
-          originalBodyPointerEvents = ownerDocument.body.style.pointerEvents;
+          originalBodyPointerEvents$1 = ownerDocument.body.style.pointerEvents;
           ownerDocument.body.style.pointerEvents = "none";
         }
         context.layersWithOutsidePointerEventsDisabled.add(node);
       }
       context.layers.add(node);
-      dispatchUpdate();
+      dispatchUpdate$1();
       return () => {
         if (disableOutsidePointerEvents && context.layersWithOutsidePointerEventsDisabled.size === 1) {
-          ownerDocument.body.style.pointerEvents = originalBodyPointerEvents;
+          ownerDocument.body.style.pointerEvents = originalBodyPointerEvents$1;
         }
       };
     }, [node, ownerDocument, disableOutsidePointerEvents, context]);
@@ -3017,13 +3356,13 @@ var DismissableLayer = React.forwardRef(
         if (!node) return;
         context.layers.delete(node);
         context.layersWithOutsidePointerEventsDisabled.delete(node);
-        dispatchUpdate();
+        dispatchUpdate$1();
       };
     }, [node, context]);
     React.useEffect(() => {
       const handleUpdate = () => force({});
-      document.addEventListener(CONTEXT_UPDATE, handleUpdate);
-      return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);
+      document.addEventListener(CONTEXT_UPDATE$1, handleUpdate);
+      return () => document.removeEventListener(CONTEXT_UPDATE$1, handleUpdate);
     }, []);
     return /* @__PURE__ */ jsx(
       Primitive.div,
@@ -3034,9 +3373,9 @@ var DismissableLayer = React.forwardRef(
           pointerEvents: isBodyPointerEventsDisabled ? isPointerEventsEnabled ? "auto" : "none" : void 0,
           ...props.style
         },
-        onFocusCapture: composeEventHandlers(props.onFocusCapture, focusOutside.onFocusCapture),
-        onBlurCapture: composeEventHandlers(props.onBlurCapture, focusOutside.onBlurCapture),
-        onPointerDownCapture: composeEventHandlers(
+        onFocusCapture: composeEventHandlers$1(props.onFocusCapture, focusOutside.onFocusCapture),
+        onBlurCapture: composeEventHandlers$1(props.onBlurCapture, focusOutside.onBlurCapture),
+        onPointerDownCapture: composeEventHandlers$1(
           props.onPointerDownCapture,
           pointerDownOutside.onPointerDownCapture
         )
@@ -3044,10 +3383,10 @@ var DismissableLayer = React.forwardRef(
     );
   }
 );
-DismissableLayer.displayName = DISMISSABLE_LAYER_NAME;
-var BRANCH_NAME = "DismissableLayerBranch";
-var DismissableLayerBranch = React.forwardRef((props, forwardedRef) => {
-  const context = React.useContext(DismissableLayerContext);
+DismissableLayer$1.displayName = DISMISSABLE_LAYER_NAME$1;
+var BRANCH_NAME$1 = "DismissableLayerBranch";
+var DismissableLayerBranch$1 = React.forwardRef((props, forwardedRef) => {
+  const context = React.useContext(DismissableLayerContext$1);
   const ref = React.useRef(null);
   const composedRefs = useComposedRefs(forwardedRef, ref);
   React.useEffect(() => {
@@ -3061,8 +3400,8 @@ var DismissableLayerBranch = React.forwardRef((props, forwardedRef) => {
   }, [context.branches]);
   return /* @__PURE__ */ jsx(Primitive.div, { ...props, ref: composedRefs });
 });
-DismissableLayerBranch.displayName = BRANCH_NAME;
-function usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis?.document) {
+DismissableLayerBranch$1.displayName = BRANCH_NAME$1;
+function usePointerDownOutside$1(onPointerDownOutside, ownerDocument = globalThis?.document) {
   const handlePointerDownOutside = useCallbackRef$1(onPointerDownOutside);
   const isPointerInsideReactTreeRef = React.useRef(false);
   const handleClickRef = React.useRef(() => {
@@ -3071,8 +3410,8 @@ function usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis?
     const handlePointerDown = (event) => {
       if (event.target && !isPointerInsideReactTreeRef.current) {
         let handleAndDispatchPointerDownOutsideEvent2 = function() {
-          handleAndDispatchCustomEvent(
-            POINTER_DOWN_OUTSIDE,
+          handleAndDispatchCustomEvent$1(
+            POINTER_DOWN_OUTSIDE$1,
             handlePointerDownOutside,
             eventDetail,
             { discrete: true }
@@ -3105,14 +3444,14 @@ function usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis?
     onPointerDownCapture: () => isPointerInsideReactTreeRef.current = true
   };
 }
-function useFocusOutside(onFocusOutside, ownerDocument = globalThis?.document) {
+function useFocusOutside$1(onFocusOutside, ownerDocument = globalThis?.document) {
   const handleFocusOutside = useCallbackRef$1(onFocusOutside);
   const isFocusInsideReactTreeRef = React.useRef(false);
   React.useEffect(() => {
     const handleFocus = (event) => {
       if (event.target && !isFocusInsideReactTreeRef.current) {
         const eventDetail = { originalEvent: event };
-        handleAndDispatchCustomEvent(FOCUS_OUTSIDE, handleFocusOutside, eventDetail, {
+        handleAndDispatchCustomEvent$1(FOCUS_OUTSIDE$1, handleFocusOutside, eventDetail, {
           discrete: false
         });
       }
@@ -3125,11 +3464,11 @@ function useFocusOutside(onFocusOutside, ownerDocument = globalThis?.document) {
     onBlurCapture: () => isFocusInsideReactTreeRef.current = false
   };
 }
-function dispatchUpdate() {
-  const event = new CustomEvent(CONTEXT_UPDATE);
+function dispatchUpdate$1() {
+  const event = new CustomEvent(CONTEXT_UPDATE$1);
   document.dispatchEvent(event);
 }
-function handleAndDispatchCustomEvent(name, handler, detail, { discrete }) {
+function handleAndDispatchCustomEvent$1(name, handler, detail, { discrete }) {
   const target = detail.originalEvent.target;
   const event = new CustomEvent(name, { bubbles: false, cancelable: true, detail });
   if (handler) target.addEventListener(name, handler, { once: true });
@@ -3140,22 +3479,22 @@ function handleAndDispatchCustomEvent(name, handler, detail, { discrete }) {
   }
 }
 
-var count = 0;
-function useFocusGuards() {
+var count$1 = 0;
+function useFocusGuards$1() {
   React.useEffect(() => {
     const edgeGuards = document.querySelectorAll("[data-radix-focus-guard]");
-    document.body.insertAdjacentElement("afterbegin", edgeGuards[0] ?? createFocusGuard());
-    document.body.insertAdjacentElement("beforeend", edgeGuards[1] ?? createFocusGuard());
-    count++;
+    document.body.insertAdjacentElement("afterbegin", edgeGuards[0] ?? createFocusGuard$1());
+    document.body.insertAdjacentElement("beforeend", edgeGuards[1] ?? createFocusGuard$1());
+    count$1++;
     return () => {
-      if (count === 1) {
+      if (count$1 === 1) {
         document.querySelectorAll("[data-radix-focus-guard]").forEach((node) => node.remove());
       }
-      count--;
+      count$1--;
     };
   }, []);
 }
-function createFocusGuard() {
+function createFocusGuard$1() {
   const element = document.createElement("span");
   element.setAttribute("data-radix-focus-guard", "");
   element.tabIndex = 0;
@@ -5547,7 +5886,7 @@ const arrow = (options, deps) => ({
 
 // src/arrow.tsx
 var NAME$1 = "Arrow";
-var Arrow$1 = React.forwardRef((props, forwardedRef) => {
+var Arrow$2 = React.forwardRef((props, forwardedRef) => {
   const { children, width = 10, height = 5, ...arrowProps } = props;
   return /* @__PURE__ */ jsx(
     Primitive.svg,
@@ -5562,8 +5901,8 @@ var Arrow$1 = React.forwardRef((props, forwardedRef) => {
     }
   );
 });
-Arrow$1.displayName = NAME$1;
-var Root$2 = Arrow$1;
+Arrow$2.displayName = NAME$1;
+var Root$2 = Arrow$2;
 
 // packages/react/use-size/src/use-size.tsx
 function useSize(element) {
@@ -5601,20 +5940,20 @@ function useSize(element) {
   return size;
 }
 
-var POPPER_NAME = "Popper";
-var [createPopperContext, createPopperScope] = createContextScope(POPPER_NAME);
-var [PopperProvider, usePopperContext] = createPopperContext(POPPER_NAME);
-var Popper = (props) => {
+var POPPER_NAME$1 = "Popper";
+var [createPopperContext$1, createPopperScope$1] = createContextScope(POPPER_NAME$1);
+var [PopperProvider$1, usePopperContext$1] = createPopperContext$1(POPPER_NAME$1);
+var Popper$1 = (props) => {
   const { __scopePopper, children } = props;
   const [anchor, setAnchor] = React.useState(null);
-  return /* @__PURE__ */ jsx(PopperProvider, { scope: __scopePopper, anchor, onAnchorChange: setAnchor, children });
+  return /* @__PURE__ */ jsx(PopperProvider$1, { scope: __scopePopper, anchor, onAnchorChange: setAnchor, children });
 };
-Popper.displayName = POPPER_NAME;
-var ANCHOR_NAME = "PopperAnchor";
-var PopperAnchor = React.forwardRef(
+Popper$1.displayName = POPPER_NAME$1;
+var ANCHOR_NAME$2 = "PopperAnchor";
+var PopperAnchor$1 = React.forwardRef(
   (props, forwardedRef) => {
     const { __scopePopper, virtualRef, ...anchorProps } = props;
-    const context = usePopperContext(ANCHOR_NAME, __scopePopper);
+    const context = usePopperContext$1(ANCHOR_NAME$2, __scopePopper);
     const ref = React.useRef(null);
     const composedRefs = useComposedRefs(forwardedRef, ref);
     React.useEffect(() => {
@@ -5623,10 +5962,10 @@ var PopperAnchor = React.forwardRef(
     return virtualRef ? null : /* @__PURE__ */ jsx(Primitive.div, { ...anchorProps, ref: composedRefs });
   }
 );
-PopperAnchor.displayName = ANCHOR_NAME;
-var CONTENT_NAME$3 = "PopperContent";
-var [PopperContentProvider, useContentContext] = createPopperContext(CONTENT_NAME$3);
-var PopperContent = React.forwardRef(
+PopperAnchor$1.displayName = ANCHOR_NAME$2;
+var CONTENT_NAME$5 = "PopperContent";
+var [PopperContentProvider$1, useContentContext$1] = createPopperContext$1(CONTENT_NAME$5);
+var PopperContent$1 = React.forwardRef(
   (props, forwardedRef) => {
     const {
       __scopePopper,
@@ -5644,7 +5983,7 @@ var PopperContent = React.forwardRef(
       onPlaced,
       ...contentProps
     } = props;
-    const context = usePopperContext(CONTENT_NAME$3, __scopePopper);
+    const context = usePopperContext$1(CONTENT_NAME$5, __scopePopper);
     const [content, setContent] = React.useState(null);
     const composedRefs = useComposedRefs(forwardedRef, (node) => setContent(node));
     const [arrow$1, setArrow] = React.useState(null);
@@ -5657,7 +5996,7 @@ var PopperContent = React.forwardRef(
     const hasExplicitBoundaries = boundary.length > 0;
     const detectOverflowOptions = {
       padding: collisionPadding,
-      boundary: boundary.filter(isNotNull),
+      boundary: boundary.filter(isNotNull$1),
       // with `strategy: 'fixed'`, this is the only way to get it to respect boundaries
       altBoundary: hasExplicitBoundaries
     };
@@ -5695,11 +6034,11 @@ var PopperContent = React.forwardRef(
           }
         }),
         arrow$1 && arrow({ element: arrow$1, padding: arrowPadding }),
-        transformOrigin({ arrowWidth, arrowHeight }),
+        transformOrigin$1({ arrowWidth, arrowHeight }),
         hideWhenDetached && hide({ strategy: "referenceHidden", ...detectOverflowOptions })
       ]
     });
-    const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);
+    const [placedSide, placedAlign] = getSideAndAlignFromPlacement$1(placement);
     const handlePlaced = useCallbackRef$1(onPlaced);
     useLayoutEffect2(() => {
       if (isPositioned) {
@@ -5738,7 +6077,7 @@ var PopperContent = React.forwardRef(
         },
         dir: props.dir,
         children: /* @__PURE__ */ jsx(
-          PopperContentProvider,
+          PopperContentProvider$1,
           {
             scope: __scopePopper,
             placedSide,
@@ -5767,18 +6106,18 @@ var PopperContent = React.forwardRef(
     );
   }
 );
-PopperContent.displayName = CONTENT_NAME$3;
-var ARROW_NAME$1 = "PopperArrow";
-var OPPOSITE_SIDE = {
+PopperContent$1.displayName = CONTENT_NAME$5;
+var ARROW_NAME$3 = "PopperArrow";
+var OPPOSITE_SIDE$1 = {
   top: "bottom",
   right: "left",
   bottom: "top",
   left: "right"
 };
-var PopperArrow = React.forwardRef(function PopperArrow2(props, forwardedRef) {
+var PopperArrow$1 = React.forwardRef(function PopperArrow2(props, forwardedRef) {
   const { __scopePopper, ...arrowProps } = props;
-  const contentContext = useContentContext(ARROW_NAME$1, __scopePopper);
-  const baseSide = OPPOSITE_SIDE[contentContext.placedSide];
+  const contentContext = useContentContext$1(ARROW_NAME$3, __scopePopper);
+  const baseSide = OPPOSITE_SIDE$1[contentContext.placedSide];
   return (
     // we have to use an extra wrapper because `ResizeObserver` (used by `useSize`)
     // doesn't report size as we'd expect on SVG elements.
@@ -5822,11 +6161,11 @@ var PopperArrow = React.forwardRef(function PopperArrow2(props, forwardedRef) {
     )
   );
 });
-PopperArrow.displayName = ARROW_NAME$1;
-function isNotNull(value) {
+PopperArrow$1.displayName = ARROW_NAME$3;
+function isNotNull$1(value) {
   return value !== null;
 }
-var transformOrigin = (options) => ({
+var transformOrigin$1 = (options) => ({
   name: "transformOrigin",
   options,
   fn(data) {
@@ -5835,7 +6174,7 @@ var transformOrigin = (options) => ({
     const isArrowHidden = cannotCenterArrow;
     const arrowWidth = isArrowHidden ? 0 : options.arrowWidth;
     const arrowHeight = isArrowHidden ? 0 : options.arrowHeight;
-    const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);
+    const [placedSide, placedAlign] = getSideAndAlignFromPlacement$1(placement);
     const noArrowAlign = { start: "0%", center: "50%", end: "100%" }[placedAlign];
     const arrowXCenter = (middlewareData.arrow?.x ?? 0) + arrowWidth / 2;
     const arrowYCenter = (middlewareData.arrow?.y ?? 0) + arrowHeight / 2;
@@ -5857,24 +6196,24 @@ var transformOrigin = (options) => ({
     return { data: { x, y } };
   }
 });
-function getSideAndAlignFromPlacement(placement) {
+function getSideAndAlignFromPlacement$1(placement) {
   const [side, align = "center"] = placement.split("-");
   return [side, align];
 }
-var Root2$2 = Popper;
-var Anchor = PopperAnchor;
-var Content$2 = PopperContent;
-var Arrow = PopperArrow;
+var Root2$4 = Popper$1;
+var Anchor$1 = PopperAnchor$1;
+var Content$3 = PopperContent$1;
+var Arrow$1 = PopperArrow$1;
 
-var PORTAL_NAME$2 = "Portal";
-var Portal$2 = React.forwardRef((props, forwardedRef) => {
+var PORTAL_NAME$3 = "Portal";
+var Portal$3 = React.forwardRef((props, forwardedRef) => {
   const { container: containerProp, ...portalProps } = props;
   const [mounted, setMounted] = React.useState(false);
   useLayoutEffect2(() => setMounted(true), []);
   const container = containerProp || mounted && globalThis?.document?.body;
   return container ? ReactDOM__default.createPortal(/* @__PURE__ */ jsx(Primitive.div, { ...portalProps, ref: forwardedRef }), container) : null;
 });
-Portal$2.displayName = PORTAL_NAME$2;
+Portal$3.displayName = PORTAL_NAME$3;
 
 // packages/react/use-previous/src/use-previous.tsx
 function usePrevious(value) {
@@ -6755,9 +7094,9 @@ var SELECT_NAME = "Select";
 var [Collection$1, useCollection$1, createCollectionScope$1] = createCollection(SELECT_NAME);
 var [createSelectContext, createSelectScope] = createContextScope(SELECT_NAME, [
   createCollectionScope$1,
-  createPopperScope
+  createPopperScope$1
 ]);
-var usePopperScope = createPopperScope();
+var usePopperScope$1 = createPopperScope$1();
 var [SelectProvider, useSelectContext] = createSelectContext(SELECT_NAME);
 var [SelectNativeOptionsProvider, useSelectNativeOptionsContext] = createSelectContext(SELECT_NAME);
 var Select$1 = (props) => {
@@ -6777,7 +7116,7 @@ var Select$1 = (props) => {
     required,
     form
   } = props;
-  const popperScope = usePopperScope(__scopeSelect);
+  const popperScope = usePopperScope$1(__scopeSelect);
   const [trigger, setTrigger] = React.useState(null);
   const [valueNode, setValueNode] = React.useState(null);
   const [valueNodeHasChildren, setValueNodeHasChildren] = React.useState(false);
@@ -6798,7 +7137,7 @@ var Select$1 = (props) => {
   const isFormControl = trigger ? form || !!trigger.closest("form") : true;
   const [nativeOptionsSet, setNativeOptionsSet] = React.useState(/* @__PURE__ */ new Set());
   const nativeSelectKey = Array.from(nativeOptionsSet).map((option) => option.props.value).join(";");
-  return /* @__PURE__ */ jsx(Root2$2, { ...popperScope, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(Root2$4, { ...popperScope, children: /* @__PURE__ */ jsxs(
     SelectProvider,
     {
       required,
@@ -6859,12 +7198,12 @@ var Select$1 = (props) => {
   ) });
 };
 Select$1.displayName = SELECT_NAME;
-var TRIGGER_NAME$2 = "SelectTrigger";
+var TRIGGER_NAME$3 = "SelectTrigger";
 var SelectTrigger = React.forwardRef(
   (props, forwardedRef) => {
     const { __scopeSelect, disabled = false, ...triggerProps } = props;
-    const popperScope = usePopperScope(__scopeSelect);
-    const context = useSelectContext(TRIGGER_NAME$2, __scopeSelect);
+    const popperScope = usePopperScope$1(__scopeSelect);
+    const context = useSelectContext(TRIGGER_NAME$3, __scopeSelect);
     const isDisabled = context.disabled || disabled;
     const composedRefs = useComposedRefs(forwardedRef, context.onTriggerChange);
     const getItems = useCollection$1(__scopeSelect);
@@ -6889,7 +7228,7 @@ var SelectTrigger = React.forwardRef(
         };
       }
     };
-    return /* @__PURE__ */ jsx(Anchor, { asChild: true, ...popperScope, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(Anchor$1, { asChild: true, ...popperScope, children: /* @__PURE__ */ jsx(
       Primitive.button,
       {
         type: "button",
@@ -6905,13 +7244,13 @@ var SelectTrigger = React.forwardRef(
         "data-placeholder": shouldShowPlaceholder(context.value) ? "" : void 0,
         ...triggerProps,
         ref: composedRefs,
-        onClick: composeEventHandlers(triggerProps.onClick, (event) => {
+        onClick: composeEventHandlers$1(triggerProps.onClick, (event) => {
           event.currentTarget.focus();
           if (pointerTypeRef.current !== "mouse") {
             handleOpen(event);
           }
         }),
-        onPointerDown: composeEventHandlers(triggerProps.onPointerDown, (event) => {
+        onPointerDown: composeEventHandlers$1(triggerProps.onPointerDown, (event) => {
           pointerTypeRef.current = event.pointerType;
           const target = event.target;
           if (target.hasPointerCapture(event.pointerId)) {
@@ -6922,7 +7261,7 @@ var SelectTrigger = React.forwardRef(
             event.preventDefault();
           }
         }),
-        onKeyDown: composeEventHandlers(triggerProps.onKeyDown, (event) => {
+        onKeyDown: composeEventHandlers$1(triggerProps.onKeyDown, (event) => {
           const isTypingAhead = searchRef.current !== "";
           const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;
           if (!isModifierKey && event.key.length === 1) handleTypeaheadSearch(event.key);
@@ -6936,7 +7275,7 @@ var SelectTrigger = React.forwardRef(
     ) });
   }
 );
-SelectTrigger.displayName = TRIGGER_NAME$2;
+SelectTrigger.displayName = TRIGGER_NAME$3;
 var VALUE_NAME = "SelectValue";
 var SelectValue = React.forwardRef(
   (props, forwardedRef) => {
@@ -6968,15 +7307,15 @@ var SelectIcon = React.forwardRef(
   }
 );
 SelectIcon.displayName = ICON_NAME;
-var PORTAL_NAME$1 = "SelectPortal";
+var PORTAL_NAME$2 = "SelectPortal";
 var SelectPortal = (props) => {
-  return /* @__PURE__ */ jsx(Portal$2, { asChild: true, ...props });
+  return /* @__PURE__ */ jsx(Portal$3, { asChild: true, ...props });
 };
-SelectPortal.displayName = PORTAL_NAME$1;
-var CONTENT_NAME$2 = "SelectContent";
+SelectPortal.displayName = PORTAL_NAME$2;
+var CONTENT_NAME$4 = "SelectContent";
 var SelectContent = React.forwardRef(
   (props, forwardedRef) => {
-    const context = useSelectContext(CONTENT_NAME$2, props.__scopeSelect);
+    const context = useSelectContext(CONTENT_NAME$4, props.__scopeSelect);
     const [fragment, setFragment] = React.useState();
     useLayoutEffect2(() => {
       setFragment(new DocumentFragment());
@@ -6991,11 +7330,11 @@ var SelectContent = React.forwardRef(
     return /* @__PURE__ */ jsx(SelectContentImpl, { ...props, ref: forwardedRef });
   }
 );
-SelectContent.displayName = CONTENT_NAME$2;
+SelectContent.displayName = CONTENT_NAME$4;
 var CONTENT_MARGIN = 10;
-var [SelectContentProvider, useSelectContentContext] = createSelectContext(CONTENT_NAME$2);
+var [SelectContentProvider, useSelectContentContext] = createSelectContext(CONTENT_NAME$4);
 var CONTENT_IMPL_NAME = "SelectContentImpl";
-var Slot$1 = createSlot("SelectContent.RemoveScroll");
+var Slot$2 = createSlot("SelectContent.RemoveScroll");
 var SelectContentImpl = React.forwardRef(
   (props, forwardedRef) => {
     const {
@@ -7019,7 +7358,7 @@ var SelectContentImpl = React.forwardRef(
       //
       ...contentProps
     } = props;
-    const context = useSelectContext(CONTENT_NAME$2, __scopeSelect);
+    const context = useSelectContext(CONTENT_NAME$4, __scopeSelect);
     const [content, setContent] = React.useState(null);
     const [viewport, setViewport] = React.useState(null);
     const composedRefs = useComposedRefs(forwardedRef, (node) => setContent(node));
@@ -7033,7 +7372,7 @@ var SelectContentImpl = React.forwardRef(
     React.useEffect(() => {
       if (content) return hideOthers(content);
     }, [content]);
-    useFocusGuards();
+    useFocusGuards$1();
     const focusFirst = React.useCallback(
       (candidates) => {
         const [firstItem, ...restItems] = getItems().map((item) => item.ref.current);
@@ -7158,7 +7497,7 @@ var SelectContentImpl = React.forwardRef(
         position,
         isPositioned,
         searchRef,
-        children: /* @__PURE__ */ jsx(ReactRemoveScroll, { as: Slot$1, allowPinchZoom: true, children: /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsx(ReactRemoveScroll, { as: Slot$2, allowPinchZoom: true, children: /* @__PURE__ */ jsx(
           FocusScope,
           {
             asChild: true,
@@ -7166,12 +7505,12 @@ var SelectContentImpl = React.forwardRef(
             onMountAutoFocus: (event) => {
               event.preventDefault();
             },
-            onUnmountAutoFocus: composeEventHandlers(onCloseAutoFocus, (event) => {
+            onUnmountAutoFocus: composeEventHandlers$1(onCloseAutoFocus, (event) => {
               context.trigger?.focus({ preventScroll: true });
               event.preventDefault();
             }),
             children: /* @__PURE__ */ jsx(
-              DismissableLayer,
+              DismissableLayer$1,
               {
                 asChild: true,
                 disableOutsidePointerEvents: true,
@@ -7199,7 +7538,7 @@ var SelectContentImpl = React.forwardRef(
                       outline: "none",
                       ...contentProps.style
                     },
-                    onKeyDown: composeEventHandlers(contentProps.onKeyDown, (event) => {
+                    onKeyDown: composeEventHandlers$1(contentProps.onKeyDown, (event) => {
                       const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;
                       if (event.key === "Tab") event.preventDefault();
                       if (!isModifierKey && event.key.length === 1) handleTypeaheadSearch(event.key);
@@ -7232,8 +7571,8 @@ SelectContentImpl.displayName = CONTENT_IMPL_NAME;
 var ITEM_ALIGNED_POSITION_NAME = "SelectItemAlignedPosition";
 var SelectItemAlignedPosition = React.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, onPlaced, ...popperProps } = props;
-  const context = useSelectContext(CONTENT_NAME$2, __scopeSelect);
-  const contentContext = useSelectContentContext(CONTENT_NAME$2, __scopeSelect);
+  const context = useSelectContext(CONTENT_NAME$4, __scopeSelect);
+  const contentContext = useSelectContentContext(CONTENT_NAME$4, __scopeSelect);
   const [contentWrapper, setContentWrapper] = React.useState(null);
   const [content, setContent] = React.useState(null);
   const composedRefs = useComposedRefs(forwardedRef, (node) => setContent(node));
@@ -7401,9 +7740,9 @@ var SelectPopperPosition = React.forwardRef((props, forwardedRef) => {
     collisionPadding = CONTENT_MARGIN,
     ...popperProps
   } = props;
-  const popperScope = usePopperScope(__scopeSelect);
+  const popperScope = usePopperScope$1(__scopeSelect);
   return /* @__PURE__ */ jsx(
-    Content$2,
+    Content$3,
     {
       ...popperScope,
       ...popperProps,
@@ -7427,7 +7766,7 @@ var SelectPopperPosition = React.forwardRef((props, forwardedRef) => {
   );
 });
 SelectPopperPosition.displayName = POPPER_POSITION_NAME;
-var [SelectViewportProvider, useSelectViewportContext] = createSelectContext(CONTENT_NAME$2, {});
+var [SelectViewportProvider, useSelectViewportContext] = createSelectContext(CONTENT_NAME$4, {});
 var VIEWPORT_NAME = "SelectViewport";
 var SelectViewport = React.forwardRef(
   (props, forwardedRef) => {
@@ -7466,7 +7805,7 @@ var SelectViewport = React.forwardRef(
             overflow: "hidden auto",
             ...viewportProps.style
           },
-          onScroll: composeEventHandlers(viewportProps.onScroll, (event) => {
+          onScroll: composeEventHandlers$1(viewportProps.onScroll, (event) => {
             const viewport = event.currentTarget;
             const { contentWrapper, shouldExpandOnScrollRef } = viewportContext;
             if (shouldExpandOnScrollRef?.current && contentWrapper) {
@@ -7579,18 +7918,18 @@ var SelectItem = React.forwardRef(
                 tabIndex: disabled ? void 0 : -1,
                 ...itemProps,
                 ref: composedRefs,
-                onFocus: composeEventHandlers(itemProps.onFocus, () => setIsFocused(true)),
-                onBlur: composeEventHandlers(itemProps.onBlur, () => setIsFocused(false)),
-                onClick: composeEventHandlers(itemProps.onClick, () => {
+                onFocus: composeEventHandlers$1(itemProps.onFocus, () => setIsFocused(true)),
+                onBlur: composeEventHandlers$1(itemProps.onBlur, () => setIsFocused(false)),
+                onClick: composeEventHandlers$1(itemProps.onClick, () => {
                   if (pointerTypeRef.current !== "mouse") handleSelect();
                 }),
-                onPointerUp: composeEventHandlers(itemProps.onPointerUp, () => {
+                onPointerUp: composeEventHandlers$1(itemProps.onPointerUp, () => {
                   if (pointerTypeRef.current === "mouse") handleSelect();
                 }),
-                onPointerDown: composeEventHandlers(itemProps.onPointerDown, (event) => {
+                onPointerDown: composeEventHandlers$1(itemProps.onPointerDown, (event) => {
                   pointerTypeRef.current = event.pointerType;
                 }),
-                onPointerMove: composeEventHandlers(itemProps.onPointerMove, (event) => {
+                onPointerMove: composeEventHandlers$1(itemProps.onPointerMove, (event) => {
                   pointerTypeRef.current = event.pointerType;
                   if (disabled) {
                     contentContext.onItemLeave?.();
@@ -7598,12 +7937,12 @@ var SelectItem = React.forwardRef(
                     event.currentTarget.focus({ preventScroll: true });
                   }
                 }),
-                onPointerLeave: composeEventHandlers(itemProps.onPointerLeave, (event) => {
+                onPointerLeave: composeEventHandlers$1(itemProps.onPointerLeave, (event) => {
                   if (event.currentTarget === document.activeElement) {
                     contentContext.onItemLeave?.();
                   }
                 }),
-                onKeyDown: composeEventHandlers(itemProps.onKeyDown, (event) => {
+                onKeyDown: composeEventHandlers$1(itemProps.onKeyDown, (event) => {
                   const isTypingAhead = contentContext.searchRef?.current !== "";
                   if (isTypingAhead && event.key === " ") return;
                   if (SELECTION_KEYS.includes(event.key)) handleSelect();
@@ -7751,18 +8090,18 @@ var SelectScrollButtonImpl = React.forwardRef((props, forwardedRef) => {
       ...scrollIndicatorProps,
       ref: forwardedRef,
       style: { flexShrink: 0, ...scrollIndicatorProps.style },
-      onPointerDown: composeEventHandlers(scrollIndicatorProps.onPointerDown, () => {
+      onPointerDown: composeEventHandlers$1(scrollIndicatorProps.onPointerDown, () => {
         if (autoScrollTimerRef.current === null) {
           autoScrollTimerRef.current = window.setInterval(onAutoScroll, 50);
         }
       }),
-      onPointerMove: composeEventHandlers(scrollIndicatorProps.onPointerMove, () => {
+      onPointerMove: composeEventHandlers$1(scrollIndicatorProps.onPointerMove, () => {
         contentContext.onItemLeave?.();
         if (autoScrollTimerRef.current === null) {
           autoScrollTimerRef.current = window.setInterval(onAutoScroll, 50);
         }
       }),
-      onPointerLeave: composeEventHandlers(scrollIndicatorProps.onPointerLeave, () => {
+      onPointerLeave: composeEventHandlers$1(scrollIndicatorProps.onPointerLeave, () => {
         clearAutoScrollTimer();
       })
     }
@@ -7776,17 +8115,17 @@ var SelectSeparator = React.forwardRef(
   }
 );
 SelectSeparator.displayName = SEPARATOR_NAME;
-var ARROW_NAME = "SelectArrow";
+var ARROW_NAME$2 = "SelectArrow";
 var SelectArrow = React.forwardRef(
   (props, forwardedRef) => {
     const { __scopeSelect, ...arrowProps } = props;
-    const popperScope = usePopperScope(__scopeSelect);
-    const context = useSelectContext(ARROW_NAME, __scopeSelect);
-    const contentContext = useSelectContentContext(ARROW_NAME, __scopeSelect);
-    return context.open && contentContext.position === "popper" ? /* @__PURE__ */ jsx(Arrow, { ...popperScope, ...arrowProps, ref: forwardedRef }) : null;
+    const popperScope = usePopperScope$1(__scopeSelect);
+    const context = useSelectContext(ARROW_NAME$2, __scopeSelect);
+    const contentContext = useSelectContentContext(ARROW_NAME$2, __scopeSelect);
+    return context.open && contentContext.position === "popper" ? /* @__PURE__ */ jsx(Arrow$1, { ...popperScope, ...arrowProps, ref: forwardedRef }) : null;
   }
 );
-SelectArrow.displayName = ARROW_NAME;
+SelectArrow.displayName = ARROW_NAME$2;
 var BUBBLE_INPUT_NAME = "SelectBubbleInput";
 var SelectBubbleInput = React.forwardRef(
   ({ __scopeSelect, value, ...props }, forwardedRef) => {
@@ -7863,12 +8202,12 @@ function findNextItem(items, search, currentItem) {
 function wrapArray$1(array, startIndex) {
   return array.map((_, index) => array[(startIndex + index) % array.length]);
 }
-var Root2$1 = Select$1;
-var Trigger$2 = SelectTrigger;
+var Root2$3 = Select$1;
+var Trigger$3 = SelectTrigger;
 var Value = SelectValue;
 var Icon = SelectIcon;
-var Portal$1 = SelectPortal;
-var Content2 = SelectContent;
+var Portal$2 = SelectPortal;
+var Content2$1 = SelectContent;
 var Viewport = SelectViewport;
 var Item$1 = SelectItem;
 var ItemText = SelectItemText;
@@ -8029,13 +8368,13 @@ const Select = _a => {
   const iconClasses = selectIcon({
     size
   });
-  return jsxs(Root2$1, {
+  return jsxs(Root2$3, {
     value: value,
     defaultValue: defaultValue,
     onValueChange: onChange,
     disabled: disabled,
     name: name,
-    children: [jsxs(Trigger$2, {
+    children: [jsxs(Trigger$3, {
       className: triggerClasses,
       children: [jsx("div", {
         className: 'w-full flex-1 text-left',
@@ -8048,8 +8387,8 @@ const Select = _a => {
           className: iconClasses
         })
       })]
-    }), jsx(Portal$1, {
-      children: jsx(Content2, {
+    }), jsx(Portal$2, {
+      children: jsx(Content2$1, {
         className: contentClasses,
         position: 'popper',
         sideOffset: 5,
@@ -9287,96 +9626,1028 @@ function NotActive(_a) {
   }));
 }
 
-/**
- * Copy a string to the clipboard and invoke a callback with the result.
- *
- * @param copyText  The text to copy. Defaults to empty string.
- * @param callback  Optional callback that will be called with { status: true } on success,
- *                  or { status: false, message: error } on failure.
- */
-function copyToClipboard(copyText = '', callback) {
-  navigator.clipboard.writeText(copyText).then(() => {
-    const result = {
-      status: true
-    };
-    callback === null || callback === void 0 ? void 0 : callback(result);
-  }).catch(err => {
-    const result = {
-      status: false,
-      message: err
-    };
-    callback === null || callback === void 0 ? void 0 : callback(result);
-  });
+// src/primitive.tsx
+function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
+  return function handleEvent(event) {
+    originalEventHandler?.(event);
+    if (checkForDefaultPrevented === false || !event.defaultPrevented) {
+      return ourEventHandler?.(event);
+    }
+  };
 }
 
-const copyBtn = cva('p-0 flex-shrink-0 h-[max-content] min-w-0 bg-transparent transition-colors', {
-  variants: {
-    theme: {
-      light: 'hover:text-gray-600 active:text-gray-800',
-      dark: 'hover:text-gray-300 active:text-gray-100'
-    }
-  },
-  defaultVariants: {
-    theme: 'light'
-  }
+var DISMISSABLE_LAYER_NAME = "DismissableLayer";
+var CONTEXT_UPDATE = "dismissableLayer.update";
+var POINTER_DOWN_OUTSIDE = "dismissableLayer.pointerDownOutside";
+var FOCUS_OUTSIDE = "dismissableLayer.focusOutside";
+var originalBodyPointerEvents;
+var DismissableLayerContext = React.createContext({
+  layers: /* @__PURE__ */ new Set(),
+  layersWithOutsidePointerEventsDisabled: /* @__PURE__ */ new Set(),
+  branches: /* @__PURE__ */ new Set()
 });
-const CopyButton = _a => {
-  var {
-      text,
-      className,
-      onCopy
-    } = _a,
-    props = __rest(_a, ["text", "className", "onCopy"]);
-  const {
-    theme
-  } = useTheme();
-  return jsx("button", Object.assign({
-    type: 'button',
-    className: `${copyBtn({
-      theme
-    })} ${className !== null && className !== void 0 ? className : ''} hover:cursor-pointer`,
-    onClick: e => {
-      e.stopPropagation();
-      e.preventDefault();
-      copyToClipboard(text, onCopy);
-    }
-  }, props, {
-    children: jsx(CopyIcon, {
-      className: 'w-4 h-4 transition',
-      color: theme === 'light' ? '#000000' : '#ffffff'
-    })
-  }));
-};
-
-/** CVA for the root container, now with light/dark theme */
-const identifier = cva('flex items-center font-dash-grotesque text-sm font-normal break-all', {
-  variants: {
-    theme: {
-      light: 'text-gray-900',
-      dark: 'text-white'
-    },
-    ellipsis: {
-      false: '',
-      true: 'overflow-hidden'
-    },
-    highlight: {
-      default: '',
-      dim: '',
-      highlight: '',
-      first: '',
-      last: '',
-      both: ''
-    }
-  },
-  defaultVariants: {
-    theme: 'light',
-    ellipsis: false,
-    highlight: 'default'
+var DismissableLayer = React.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      disableOutsidePointerEvents = false,
+      onEscapeKeyDown,
+      onPointerDownOutside,
+      onFocusOutside,
+      onInteractOutside,
+      onDismiss,
+      ...layerProps
+    } = props;
+    const context = React.useContext(DismissableLayerContext);
+    const [node, setNode] = React.useState(null);
+    const ownerDocument = node?.ownerDocument ?? globalThis?.document;
+    const [, force] = React.useState({});
+    const composedRefs = useComposedRefs(forwardedRef, (node2) => setNode(node2));
+    const layers = Array.from(context.layers);
+    const [highestLayerWithOutsidePointerEventsDisabled] = [...context.layersWithOutsidePointerEventsDisabled].slice(-1);
+    const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf(highestLayerWithOutsidePointerEventsDisabled);
+    const index = node ? layers.indexOf(node) : -1;
+    const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0;
+    const isPointerEventsEnabled = index >= highestLayerWithOutsidePointerEventsDisabledIndex;
+    const pointerDownOutside = usePointerDownOutside((event) => {
+      const target = event.target;
+      const isPointerDownOnBranch = [...context.branches].some((branch) => branch.contains(target));
+      if (!isPointerEventsEnabled || isPointerDownOnBranch) return;
+      onPointerDownOutside?.(event);
+      onInteractOutside?.(event);
+      if (!event.defaultPrevented) onDismiss?.();
+    }, ownerDocument);
+    const focusOutside = useFocusOutside((event) => {
+      const target = event.target;
+      const isFocusInBranch = [...context.branches].some((branch) => branch.contains(target));
+      if (isFocusInBranch) return;
+      onFocusOutside?.(event);
+      onInteractOutside?.(event);
+      if (!event.defaultPrevented) onDismiss?.();
+    }, ownerDocument);
+    useEscapeKeydown((event) => {
+      const isHighestLayer = index === context.layers.size - 1;
+      if (!isHighestLayer) return;
+      onEscapeKeyDown?.(event);
+      if (!event.defaultPrevented && onDismiss) {
+        event.preventDefault();
+        onDismiss();
+      }
+    }, ownerDocument);
+    React.useEffect(() => {
+      if (!node) return;
+      if (disableOutsidePointerEvents) {
+        if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
+          originalBodyPointerEvents = ownerDocument.body.style.pointerEvents;
+          ownerDocument.body.style.pointerEvents = "none";
+        }
+        context.layersWithOutsidePointerEventsDisabled.add(node);
+      }
+      context.layers.add(node);
+      dispatchUpdate();
+      return () => {
+        if (disableOutsidePointerEvents && context.layersWithOutsidePointerEventsDisabled.size === 1) {
+          ownerDocument.body.style.pointerEvents = originalBodyPointerEvents;
+        }
+      };
+    }, [node, ownerDocument, disableOutsidePointerEvents, context]);
+    React.useEffect(() => {
+      return () => {
+        if (!node) return;
+        context.layers.delete(node);
+        context.layersWithOutsidePointerEventsDisabled.delete(node);
+        dispatchUpdate();
+      };
+    }, [node, context]);
+    React.useEffect(() => {
+      const handleUpdate = () => force({});
+      document.addEventListener(CONTEXT_UPDATE, handleUpdate);
+      return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);
+    }, []);
+    return /* @__PURE__ */ jsx(
+      Primitive.div,
+      {
+        ...layerProps,
+        ref: composedRefs,
+        style: {
+          pointerEvents: isBodyPointerEventsDisabled ? isPointerEventsEnabled ? "auto" : "none" : void 0,
+          ...props.style
+        },
+        onFocusCapture: composeEventHandlers(props.onFocusCapture, focusOutside.onFocusCapture),
+        onBlurCapture: composeEventHandlers(props.onBlurCapture, focusOutside.onBlurCapture),
+        onPointerDownCapture: composeEventHandlers(
+          props.onPointerDownCapture,
+          pointerDownOutside.onPointerDownCapture
+        )
+      }
+    );
   }
+);
+DismissableLayer.displayName = DISMISSABLE_LAYER_NAME;
+var BRANCH_NAME = "DismissableLayerBranch";
+var DismissableLayerBranch = React.forwardRef((props, forwardedRef) => {
+  const context = React.useContext(DismissableLayerContext);
+  const ref = React.useRef(null);
+  const composedRefs = useComposedRefs(forwardedRef, ref);
+  React.useEffect(() => {
+    const node = ref.current;
+    if (node) {
+      context.branches.add(node);
+      return () => {
+        context.branches.delete(node);
+      };
+    }
+  }, [context.branches]);
+  return /* @__PURE__ */ jsx(Primitive.div, { ...props, ref: composedRefs });
 });
-/** CVA for each symbol span: inherits root color or dims */
-const symbol = cva('flex-1', {
-  variants: {
+DismissableLayerBranch.displayName = BRANCH_NAME;
+function usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis?.document) {
+  const handlePointerDownOutside = useCallbackRef$1(onPointerDownOutside);
+  const isPointerInsideReactTreeRef = React.useRef(false);
+  const handleClickRef = React.useRef(() => {
+  });
+  React.useEffect(() => {
+    const handlePointerDown = (event) => {
+      if (event.target && !isPointerInsideReactTreeRef.current) {
+        let handleAndDispatchPointerDownOutsideEvent2 = function() {
+          handleAndDispatchCustomEvent(
+            POINTER_DOWN_OUTSIDE,
+            handlePointerDownOutside,
+            eventDetail,
+            { discrete: true }
+          );
+        };
+        const eventDetail = { originalEvent: event };
+        if (event.pointerType === "touch") {
+          ownerDocument.removeEventListener("click", handleClickRef.current);
+          handleClickRef.current = handleAndDispatchPointerDownOutsideEvent2;
+          ownerDocument.addEventListener("click", handleClickRef.current, { once: true });
+        } else {
+          handleAndDispatchPointerDownOutsideEvent2();
+        }
+      } else {
+        ownerDocument.removeEventListener("click", handleClickRef.current);
+      }
+      isPointerInsideReactTreeRef.current = false;
+    };
+    const timerId = window.setTimeout(() => {
+      ownerDocument.addEventListener("pointerdown", handlePointerDown);
+    }, 0);
+    return () => {
+      window.clearTimeout(timerId);
+      ownerDocument.removeEventListener("pointerdown", handlePointerDown);
+      ownerDocument.removeEventListener("click", handleClickRef.current);
+    };
+  }, [ownerDocument, handlePointerDownOutside]);
+  return {
+    // ensures we check React component tree (not just DOM tree)
+    onPointerDownCapture: () => isPointerInsideReactTreeRef.current = true
+  };
+}
+function useFocusOutside(onFocusOutside, ownerDocument = globalThis?.document) {
+  const handleFocusOutside = useCallbackRef$1(onFocusOutside);
+  const isFocusInsideReactTreeRef = React.useRef(false);
+  React.useEffect(() => {
+    const handleFocus = (event) => {
+      if (event.target && !isFocusInsideReactTreeRef.current) {
+        const eventDetail = { originalEvent: event };
+        handleAndDispatchCustomEvent(FOCUS_OUTSIDE, handleFocusOutside, eventDetail, {
+          discrete: false
+        });
+      }
+    };
+    ownerDocument.addEventListener("focusin", handleFocus);
+    return () => ownerDocument.removeEventListener("focusin", handleFocus);
+  }, [ownerDocument, handleFocusOutside]);
+  return {
+    onFocusCapture: () => isFocusInsideReactTreeRef.current = true,
+    onBlurCapture: () => isFocusInsideReactTreeRef.current = false
+  };
+}
+function dispatchUpdate() {
+  const event = new CustomEvent(CONTEXT_UPDATE);
+  document.dispatchEvent(event);
+}
+function handleAndDispatchCustomEvent(name, handler, detail, { discrete }) {
+  const target = detail.originalEvent.target;
+  const event = new CustomEvent(name, { bubbles: false, cancelable: true, detail });
+  if (handler) target.addEventListener(name, handler, { once: true });
+  if (discrete) {
+    dispatchDiscreteCustomEvent(target, event);
+  } else {
+    target.dispatchEvent(event);
+  }
+}
+
+var count = 0;
+function useFocusGuards() {
+  React.useEffect(() => {
+    const edgeGuards = document.querySelectorAll("[data-radix-focus-guard]");
+    document.body.insertAdjacentElement("afterbegin", edgeGuards[0] ?? createFocusGuard());
+    document.body.insertAdjacentElement("beforeend", edgeGuards[1] ?? createFocusGuard());
+    count++;
+    return () => {
+      if (count === 1) {
+        document.querySelectorAll("[data-radix-focus-guard]").forEach((node) => node.remove());
+      }
+      count--;
+    };
+  }, []);
+}
+function createFocusGuard() {
+  const element = document.createElement("span");
+  element.setAttribute("data-radix-focus-guard", "");
+  element.tabIndex = 0;
+  element.style.outline = "none";
+  element.style.opacity = "0";
+  element.style.position = "fixed";
+  element.style.pointerEvents = "none";
+  return element;
+}
+
+var POPPER_NAME = "Popper";
+var [createPopperContext, createPopperScope] = createContextScope(POPPER_NAME);
+var [PopperProvider, usePopperContext] = createPopperContext(POPPER_NAME);
+var Popper = (props) => {
+  const { __scopePopper, children } = props;
+  const [anchor, setAnchor] = React.useState(null);
+  return /* @__PURE__ */ jsx(PopperProvider, { scope: __scopePopper, anchor, onAnchorChange: setAnchor, children });
+};
+Popper.displayName = POPPER_NAME;
+var ANCHOR_NAME$1 = "PopperAnchor";
+var PopperAnchor = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopePopper, virtualRef, ...anchorProps } = props;
+    const context = usePopperContext(ANCHOR_NAME$1, __scopePopper);
+    const ref = React.useRef(null);
+    const composedRefs = useComposedRefs(forwardedRef, ref);
+    const anchorRef = React.useRef(null);
+    React.useEffect(() => {
+      const previousAnchor = anchorRef.current;
+      anchorRef.current = virtualRef?.current || ref.current;
+      if (previousAnchor !== anchorRef.current) {
+        context.onAnchorChange(anchorRef.current);
+      }
+    });
+    return virtualRef ? null : /* @__PURE__ */ jsx(Primitive.div, { ...anchorProps, ref: composedRefs });
+  }
+);
+PopperAnchor.displayName = ANCHOR_NAME$1;
+var CONTENT_NAME$3 = "PopperContent";
+var [PopperContentProvider, useContentContext] = createPopperContext(CONTENT_NAME$3);
+var PopperContent = React.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      __scopePopper,
+      side = "bottom",
+      sideOffset = 0,
+      align = "center",
+      alignOffset = 0,
+      arrowPadding = 0,
+      avoidCollisions = true,
+      collisionBoundary = [],
+      collisionPadding: collisionPaddingProp = 0,
+      sticky = "partial",
+      hideWhenDetached = false,
+      updatePositionStrategy = "optimized",
+      onPlaced,
+      ...contentProps
+    } = props;
+    const context = usePopperContext(CONTENT_NAME$3, __scopePopper);
+    const [content, setContent] = React.useState(null);
+    const composedRefs = useComposedRefs(forwardedRef, (node) => setContent(node));
+    const [arrow$1, setArrow] = React.useState(null);
+    const arrowSize = useSize(arrow$1);
+    const arrowWidth = arrowSize?.width ?? 0;
+    const arrowHeight = arrowSize?.height ?? 0;
+    const desiredPlacement = side + (align !== "center" ? "-" + align : "");
+    const collisionPadding = typeof collisionPaddingProp === "number" ? collisionPaddingProp : { top: 0, right: 0, bottom: 0, left: 0, ...collisionPaddingProp };
+    const boundary = Array.isArray(collisionBoundary) ? collisionBoundary : [collisionBoundary];
+    const hasExplicitBoundaries = boundary.length > 0;
+    const detectOverflowOptions = {
+      padding: collisionPadding,
+      boundary: boundary.filter(isNotNull),
+      // with `strategy: 'fixed'`, this is the only way to get it to respect boundaries
+      altBoundary: hasExplicitBoundaries
+    };
+    const { refs, floatingStyles, placement, isPositioned, middlewareData } = useFloating({
+      // default to `fixed` strategy so users don't have to pick and we also avoid focus scroll issues
+      strategy: "fixed",
+      placement: desiredPlacement,
+      whileElementsMounted: (...args) => {
+        const cleanup = autoUpdate(...args, {
+          animationFrame: updatePositionStrategy === "always"
+        });
+        return cleanup;
+      },
+      elements: {
+        reference: context.anchor
+      },
+      middleware: [
+        offset({ mainAxis: sideOffset + arrowHeight, alignmentAxis: alignOffset }),
+        avoidCollisions && shift({
+          mainAxis: true,
+          crossAxis: false,
+          limiter: sticky === "partial" ? limitShift() : void 0,
+          ...detectOverflowOptions
+        }),
+        avoidCollisions && flip({ ...detectOverflowOptions }),
+        size({
+          ...detectOverflowOptions,
+          apply: ({ elements, rects, availableWidth, availableHeight }) => {
+            const { width: anchorWidth, height: anchorHeight } = rects.reference;
+            const contentStyle = elements.floating.style;
+            contentStyle.setProperty("--radix-popper-available-width", `${availableWidth}px`);
+            contentStyle.setProperty("--radix-popper-available-height", `${availableHeight}px`);
+            contentStyle.setProperty("--radix-popper-anchor-width", `${anchorWidth}px`);
+            contentStyle.setProperty("--radix-popper-anchor-height", `${anchorHeight}px`);
+          }
+        }),
+        arrow$1 && arrow({ element: arrow$1, padding: arrowPadding }),
+        transformOrigin({ arrowWidth, arrowHeight }),
+        hideWhenDetached && hide({ strategy: "referenceHidden", ...detectOverflowOptions })
+      ]
+    });
+    const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);
+    const handlePlaced = useCallbackRef$1(onPlaced);
+    useLayoutEffect2(() => {
+      if (isPositioned) {
+        handlePlaced?.();
+      }
+    }, [isPositioned, handlePlaced]);
+    const arrowX = middlewareData.arrow?.x;
+    const arrowY = middlewareData.arrow?.y;
+    const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;
+    const [contentZIndex, setContentZIndex] = React.useState();
+    useLayoutEffect2(() => {
+      if (content) setContentZIndex(window.getComputedStyle(content).zIndex);
+    }, [content]);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: refs.setFloating,
+        "data-radix-popper-content-wrapper": "",
+        style: {
+          ...floatingStyles,
+          transform: isPositioned ? floatingStyles.transform : "translate(0, -200%)",
+          // keep off the page when measuring
+          minWidth: "max-content",
+          zIndex: contentZIndex,
+          ["--radix-popper-transform-origin"]: [
+            middlewareData.transformOrigin?.x,
+            middlewareData.transformOrigin?.y
+          ].join(" "),
+          // hide the content if using the hide middleware and should be hidden
+          // set visibility to hidden and disable pointer events so the UI behaves
+          // as if the PopperContent isn't there at all
+          ...middlewareData.hide?.referenceHidden && {
+            visibility: "hidden",
+            pointerEvents: "none"
+          }
+        },
+        dir: props.dir,
+        children: /* @__PURE__ */ jsx(
+          PopperContentProvider,
+          {
+            scope: __scopePopper,
+            placedSide,
+            onArrowChange: setArrow,
+            arrowX,
+            arrowY,
+            shouldHideArrow: cannotCenterArrow,
+            children: /* @__PURE__ */ jsx(
+              Primitive.div,
+              {
+                "data-side": placedSide,
+                "data-align": placedAlign,
+                ...contentProps,
+                ref: composedRefs,
+                style: {
+                  ...contentProps.style,
+                  // if the PopperContent hasn't been placed yet (not all measurements done)
+                  // we prevent animations so that users's animation don't kick in too early referring wrong sides
+                  animation: !isPositioned ? "none" : void 0
+                }
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+PopperContent.displayName = CONTENT_NAME$3;
+var ARROW_NAME$1 = "PopperArrow";
+var OPPOSITE_SIDE = {
+  top: "bottom",
+  right: "left",
+  bottom: "top",
+  left: "right"
+};
+var PopperArrow = React.forwardRef(function PopperArrow2(props, forwardedRef) {
+  const { __scopePopper, ...arrowProps } = props;
+  const contentContext = useContentContext(ARROW_NAME$1, __scopePopper);
+  const baseSide = OPPOSITE_SIDE[contentContext.placedSide];
+  return (
+    // we have to use an extra wrapper because `ResizeObserver` (used by `useSize`)
+    // doesn't report size as we'd expect on SVG elements.
+    // it reports their bounding box which is effectively the largest path inside the SVG.
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref: contentContext.onArrowChange,
+        style: {
+          position: "absolute",
+          left: contentContext.arrowX,
+          top: contentContext.arrowY,
+          [baseSide]: 0,
+          transformOrigin: {
+            top: "",
+            right: "0 0",
+            bottom: "center 0",
+            left: "100% 0"
+          }[contentContext.placedSide],
+          transform: {
+            top: "translateY(100%)",
+            right: "translateY(50%) rotate(90deg) translateX(-50%)",
+            bottom: `rotate(180deg)`,
+            left: "translateY(50%) rotate(-90deg) translateX(50%)"
+          }[contentContext.placedSide],
+          visibility: contentContext.shouldHideArrow ? "hidden" : void 0
+        },
+        children: /* @__PURE__ */ jsx(
+          Root$2,
+          {
+            ...arrowProps,
+            ref: forwardedRef,
+            style: {
+              ...arrowProps.style,
+              // ensures the element can be measured correctly (mostly for if SVG)
+              display: "block"
+            }
+          }
+        )
+      }
+    )
+  );
+});
+PopperArrow.displayName = ARROW_NAME$1;
+function isNotNull(value) {
+  return value !== null;
+}
+var transformOrigin = (options) => ({
+  name: "transformOrigin",
+  options,
+  fn(data) {
+    const { placement, rects, middlewareData } = data;
+    const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;
+    const isArrowHidden = cannotCenterArrow;
+    const arrowWidth = isArrowHidden ? 0 : options.arrowWidth;
+    const arrowHeight = isArrowHidden ? 0 : options.arrowHeight;
+    const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);
+    const noArrowAlign = { start: "0%", center: "50%", end: "100%" }[placedAlign];
+    const arrowXCenter = (middlewareData.arrow?.x ?? 0) + arrowWidth / 2;
+    const arrowYCenter = (middlewareData.arrow?.y ?? 0) + arrowHeight / 2;
+    let x = "";
+    let y = "";
+    if (placedSide === "bottom") {
+      x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
+      y = `${-arrowHeight}px`;
+    } else if (placedSide === "top") {
+      x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
+      y = `${rects.floating.height + arrowHeight}px`;
+    } else if (placedSide === "right") {
+      x = `${-arrowHeight}px`;
+      y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
+    } else if (placedSide === "left") {
+      x = `${rects.floating.width + arrowHeight}px`;
+      y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
+    }
+    return { data: { x, y } };
+  }
+});
+function getSideAndAlignFromPlacement(placement) {
+  const [side, align = "center"] = placement.split("-");
+  return [side, align];
+}
+var Root2$2 = Popper;
+var Anchor = PopperAnchor;
+var Content$2 = PopperContent;
+var Arrow = PopperArrow;
+
+function useStateMachine$1(initialState, machine) {
+  return React.useReducer((state, event) => {
+    const nextState = machine[state][event];
+    return nextState ?? state;
+  }, initialState);
+}
+
+// src/presence.tsx
+var Presence$1 = (props) => {
+  const { present, children } = props;
+  const presence = usePresence$1(present);
+  const child = typeof children === "function" ? children({ present: presence.isPresent }) : React.Children.only(children);
+  const ref = useComposedRefs(presence.ref, getElementRef$1(child));
+  const forceMount = typeof children === "function";
+  return forceMount || presence.isPresent ? React.cloneElement(child, { ref }) : null;
+};
+Presence$1.displayName = "Presence";
+function usePresence$1(present) {
+  const [node, setNode] = React.useState();
+  const stylesRef = React.useRef(null);
+  const prevPresentRef = React.useRef(present);
+  const prevAnimationNameRef = React.useRef("none");
+  const initialState = present ? "mounted" : "unmounted";
+  const [state, send] = useStateMachine$1(initialState, {
+    mounted: {
+      UNMOUNT: "unmounted",
+      ANIMATION_OUT: "unmountSuspended"
+    },
+    unmountSuspended: {
+      MOUNT: "mounted",
+      ANIMATION_END: "unmounted"
+    },
+    unmounted: {
+      MOUNT: "mounted"
+    }
+  });
+  React.useEffect(() => {
+    const currentAnimationName = getAnimationName$1(stylesRef.current);
+    prevAnimationNameRef.current = state === "mounted" ? currentAnimationName : "none";
+  }, [state]);
+  useLayoutEffect2(() => {
+    const styles = stylesRef.current;
+    const wasPresent = prevPresentRef.current;
+    const hasPresentChanged = wasPresent !== present;
+    if (hasPresentChanged) {
+      const prevAnimationName = prevAnimationNameRef.current;
+      const currentAnimationName = getAnimationName$1(styles);
+      if (present) {
+        send("MOUNT");
+      } else if (currentAnimationName === "none" || styles?.display === "none") {
+        send("UNMOUNT");
+      } else {
+        const isAnimating = prevAnimationName !== currentAnimationName;
+        if (wasPresent && isAnimating) {
+          send("ANIMATION_OUT");
+        } else {
+          send("UNMOUNT");
+        }
+      }
+      prevPresentRef.current = present;
+    }
+  }, [present, send]);
+  useLayoutEffect2(() => {
+    if (node) {
+      let timeoutId;
+      const ownerWindow = node.ownerDocument.defaultView ?? window;
+      const handleAnimationEnd = (event) => {
+        const currentAnimationName = getAnimationName$1(stylesRef.current);
+        const isCurrentAnimation = currentAnimationName.includes(CSS.escape(event.animationName));
+        if (event.target === node && isCurrentAnimation) {
+          send("ANIMATION_END");
+          if (!prevPresentRef.current) {
+            const currentFillMode = node.style.animationFillMode;
+            node.style.animationFillMode = "forwards";
+            timeoutId = ownerWindow.setTimeout(() => {
+              if (node.style.animationFillMode === "forwards") {
+                node.style.animationFillMode = currentFillMode;
+              }
+            });
+          }
+        }
+      };
+      const handleAnimationStart = (event) => {
+        if (event.target === node) {
+          prevAnimationNameRef.current = getAnimationName$1(stylesRef.current);
+        }
+      };
+      node.addEventListener("animationstart", handleAnimationStart);
+      node.addEventListener("animationcancel", handleAnimationEnd);
+      node.addEventListener("animationend", handleAnimationEnd);
+      return () => {
+        ownerWindow.clearTimeout(timeoutId);
+        node.removeEventListener("animationstart", handleAnimationStart);
+        node.removeEventListener("animationcancel", handleAnimationEnd);
+        node.removeEventListener("animationend", handleAnimationEnd);
+      };
+    } else {
+      send("ANIMATION_END");
+    }
+  }, [node, send]);
+  return {
+    isPresent: ["mounted", "unmountSuspended"].includes(state),
+    ref: React.useCallback((node2) => {
+      stylesRef.current = node2 ? getComputedStyle(node2) : null;
+      setNode(node2);
+    }, [])
+  };
+}
+function getAnimationName$1(styles) {
+  return styles?.animationName || "none";
+}
+function getElementRef$1(element) {
+  let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
+  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.ref;
+  }
+  getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
+  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.props.ref;
+  }
+  return element.props.ref || element.ref;
+}
+
+var POPOVER_NAME = "Popover";
+var [createPopoverContext, createPopoverScope] = createContextScope(POPOVER_NAME, [
+  createPopperScope
+]);
+var usePopperScope = createPopperScope();
+var [PopoverProvider, usePopoverContext] = createPopoverContext(POPOVER_NAME);
+var Popover = (props) => {
+  const {
+    __scopePopover,
+    children,
+    open: openProp,
+    defaultOpen,
+    onOpenChange,
+    modal = false
+  } = props;
+  const popperScope = usePopperScope(__scopePopover);
+  const triggerRef = React.useRef(null);
+  const [hasCustomAnchor, setHasCustomAnchor] = React.useState(false);
+  const [open, setOpen] = useControllableState({
+    prop: openProp,
+    defaultProp: defaultOpen ?? false,
+    onChange: onOpenChange,
+    caller: POPOVER_NAME
+  });
+  return /* @__PURE__ */ jsx(Root2$2, { ...popperScope, children: /* @__PURE__ */ jsx(
+    PopoverProvider,
+    {
+      scope: __scopePopover,
+      contentId: useId(),
+      triggerRef,
+      open,
+      onOpenChange: setOpen,
+      onOpenToggle: React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
+      hasCustomAnchor,
+      onCustomAnchorAdd: React.useCallback(() => setHasCustomAnchor(true), []),
+      onCustomAnchorRemove: React.useCallback(() => setHasCustomAnchor(false), []),
+      modal,
+      children
+    }
+  ) });
+};
+Popover.displayName = POPOVER_NAME;
+var ANCHOR_NAME = "PopoverAnchor";
+var PopoverAnchor = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopePopover, ...anchorProps } = props;
+    const context = usePopoverContext(ANCHOR_NAME, __scopePopover);
+    const popperScope = usePopperScope(__scopePopover);
+    const { onCustomAnchorAdd, onCustomAnchorRemove } = context;
+    React.useEffect(() => {
+      onCustomAnchorAdd();
+      return () => onCustomAnchorRemove();
+    }, [onCustomAnchorAdd, onCustomAnchorRemove]);
+    return /* @__PURE__ */ jsx(Anchor, { ...popperScope, ...anchorProps, ref: forwardedRef });
+  }
+);
+PopoverAnchor.displayName = ANCHOR_NAME;
+var TRIGGER_NAME$2 = "PopoverTrigger";
+var PopoverTrigger = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopePopover, ...triggerProps } = props;
+    const context = usePopoverContext(TRIGGER_NAME$2, __scopePopover);
+    const popperScope = usePopperScope(__scopePopover);
+    const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);
+    const trigger = /* @__PURE__ */ jsx(
+      Primitive.button,
+      {
+        type: "button",
+        "aria-haspopup": "dialog",
+        "aria-expanded": context.open,
+        "aria-controls": context.contentId,
+        "data-state": getState$1(context.open),
+        ...triggerProps,
+        ref: composedTriggerRef,
+        onClick: composeEventHandlers(props.onClick, context.onOpenToggle)
+      }
+    );
+    return context.hasCustomAnchor ? trigger : /* @__PURE__ */ jsx(Anchor, { asChild: true, ...popperScope, children: trigger });
+  }
+);
+PopoverTrigger.displayName = TRIGGER_NAME$2;
+var PORTAL_NAME$1 = "PopoverPortal";
+var [PortalProvider$1, usePortalContext$1] = createPopoverContext(PORTAL_NAME$1, {
+  forceMount: void 0
+});
+var PopoverPortal = (props) => {
+  const { __scopePopover, forceMount, children, container } = props;
+  const context = usePopoverContext(PORTAL_NAME$1, __scopePopover);
+  return /* @__PURE__ */ jsx(PortalProvider$1, { scope: __scopePopover, forceMount, children: /* @__PURE__ */ jsx(Presence$1, { present: forceMount || context.open, children: /* @__PURE__ */ jsx(Portal$3, { asChild: true, container, children }) }) });
+};
+PopoverPortal.displayName = PORTAL_NAME$1;
+var CONTENT_NAME$2 = "PopoverContent";
+var PopoverContent = React.forwardRef(
+  (props, forwardedRef) => {
+    const portalContext = usePortalContext$1(CONTENT_NAME$2, props.__scopePopover);
+    const { forceMount = portalContext.forceMount, ...contentProps } = props;
+    const context = usePopoverContext(CONTENT_NAME$2, props.__scopePopover);
+    return /* @__PURE__ */ jsx(Presence$1, { present: forceMount || context.open, children: context.modal ? /* @__PURE__ */ jsx(PopoverContentModal, { ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ jsx(PopoverContentNonModal, { ...contentProps, ref: forwardedRef }) });
+  }
+);
+PopoverContent.displayName = CONTENT_NAME$2;
+var Slot$1 = createSlot("PopoverContent.RemoveScroll");
+var PopoverContentModal = React.forwardRef(
+  (props, forwardedRef) => {
+    const context = usePopoverContext(CONTENT_NAME$2, props.__scopePopover);
+    const contentRef = React.useRef(null);
+    const composedRefs = useComposedRefs(forwardedRef, contentRef);
+    const isRightClickOutsideRef = React.useRef(false);
+    React.useEffect(() => {
+      const content = contentRef.current;
+      if (content) return hideOthers(content);
+    }, []);
+    return /* @__PURE__ */ jsx(ReactRemoveScroll, { as: Slot$1, allowPinchZoom: true, children: /* @__PURE__ */ jsx(
+      PopoverContentImpl,
+      {
+        ...props,
+        ref: composedRefs,
+        trapFocus: context.open,
+        disableOutsidePointerEvents: true,
+        onCloseAutoFocus: composeEventHandlers(props.onCloseAutoFocus, (event) => {
+          event.preventDefault();
+          if (!isRightClickOutsideRef.current) context.triggerRef.current?.focus();
+        }),
+        onPointerDownOutside: composeEventHandlers(
+          props.onPointerDownOutside,
+          (event) => {
+            const originalEvent = event.detail.originalEvent;
+            const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
+            const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
+            isRightClickOutsideRef.current = isRightClick;
+          },
+          { checkForDefaultPrevented: false }
+        ),
+        onFocusOutside: composeEventHandlers(
+          props.onFocusOutside,
+          (event) => event.preventDefault(),
+          { checkForDefaultPrevented: false }
+        )
+      }
+    ) });
+  }
+);
+var PopoverContentNonModal = React.forwardRef(
+  (props, forwardedRef) => {
+    const context = usePopoverContext(CONTENT_NAME$2, props.__scopePopover);
+    const hasInteractedOutsideRef = React.useRef(false);
+    const hasPointerDownOutsideRef = React.useRef(false);
+    return /* @__PURE__ */ jsx(
+      PopoverContentImpl,
+      {
+        ...props,
+        ref: forwardedRef,
+        trapFocus: false,
+        disableOutsidePointerEvents: false,
+        onCloseAutoFocus: (event) => {
+          props.onCloseAutoFocus?.(event);
+          if (!event.defaultPrevented) {
+            if (!hasInteractedOutsideRef.current) context.triggerRef.current?.focus();
+            event.preventDefault();
+          }
+          hasInteractedOutsideRef.current = false;
+          hasPointerDownOutsideRef.current = false;
+        },
+        onInteractOutside: (event) => {
+          props.onInteractOutside?.(event);
+          if (!event.defaultPrevented) {
+            hasInteractedOutsideRef.current = true;
+            if (event.detail.originalEvent.type === "pointerdown") {
+              hasPointerDownOutsideRef.current = true;
+            }
+          }
+          const target = event.target;
+          const targetIsTrigger = context.triggerRef.current?.contains(target);
+          if (targetIsTrigger) event.preventDefault();
+          if (event.detail.originalEvent.type === "focusin" && hasPointerDownOutsideRef.current) {
+            event.preventDefault();
+          }
+        }
+      }
+    );
+  }
+);
+var PopoverContentImpl = React.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      __scopePopover,
+      trapFocus,
+      onOpenAutoFocus,
+      onCloseAutoFocus,
+      disableOutsidePointerEvents,
+      onEscapeKeyDown,
+      onPointerDownOutside,
+      onFocusOutside,
+      onInteractOutside,
+      ...contentProps
+    } = props;
+    const context = usePopoverContext(CONTENT_NAME$2, __scopePopover);
+    const popperScope = usePopperScope(__scopePopover);
+    useFocusGuards();
+    return /* @__PURE__ */ jsx(
+      FocusScope,
+      {
+        asChild: true,
+        loop: true,
+        trapped: trapFocus,
+        onMountAutoFocus: onOpenAutoFocus,
+        onUnmountAutoFocus: onCloseAutoFocus,
+        children: /* @__PURE__ */ jsx(
+          DismissableLayer,
+          {
+            asChild: true,
+            disableOutsidePointerEvents,
+            onInteractOutside,
+            onEscapeKeyDown,
+            onPointerDownOutside,
+            onFocusOutside,
+            onDismiss: () => context.onOpenChange(false),
+            children: /* @__PURE__ */ jsx(
+              Content$2,
+              {
+                "data-state": getState$1(context.open),
+                role: "dialog",
+                id: context.contentId,
+                ...popperScope,
+                ...contentProps,
+                ref: forwardedRef,
+                style: {
+                  ...contentProps.style,
+                  // re-namespace exposed content custom properties
+                  ...{
+                    "--radix-popover-content-transform-origin": "var(--radix-popper-transform-origin)",
+                    "--radix-popover-content-available-width": "var(--radix-popper-available-width)",
+                    "--radix-popover-content-available-height": "var(--radix-popper-available-height)",
+                    "--radix-popover-trigger-width": "var(--radix-popper-anchor-width)",
+                    "--radix-popover-trigger-height": "var(--radix-popper-anchor-height)"
+                  }
+                }
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+var CLOSE_NAME$1 = "PopoverClose";
+var PopoverClose = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopePopover, ...closeProps } = props;
+    const context = usePopoverContext(CLOSE_NAME$1, __scopePopover);
+    return /* @__PURE__ */ jsx(
+      Primitive.button,
+      {
+        type: "button",
+        ...closeProps,
+        ref: forwardedRef,
+        onClick: composeEventHandlers(props.onClick, () => context.onOpenChange(false))
+      }
+    );
+  }
+);
+PopoverClose.displayName = CLOSE_NAME$1;
+var ARROW_NAME = "PopoverArrow";
+var PopoverArrow = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopePopover, ...arrowProps } = props;
+    const popperScope = usePopperScope(__scopePopover);
+    return /* @__PURE__ */ jsx(Arrow, { ...popperScope, ...arrowProps, ref: forwardedRef });
+  }
+);
+PopoverArrow.displayName = ARROW_NAME;
+function getState$1(open) {
+  return open ? "open" : "closed";
+}
+var Root2$1 = Popover;
+var Trigger$2 = PopoverTrigger;
+var Portal$1 = PopoverPortal;
+var Content2 = PopoverContent;
+var Arrow2 = PopoverArrow;
+
+/**
+ * Copy a string to the clipboard and invoke a callback with the result.
+ *
+ * @param copyText  The text to copy. Defaults to empty string.
+ * @param callback  Optional callback that will be called with { status: true } on success,
+ *                  or { status: false, message: error } on failure.
+ */
+function copyToClipboard(copyText = '', callback) {
+  navigator.clipboard.writeText(copyText).then(() => {
+    const result = {
+      status: true
+    };
+    callback === null || callback === void 0 ? void 0 : callback(result);
+  }).catch(err => {
+    const result = {
+      status: false,
+      message: err
+    };
+    callback === null || callback === void 0 ? void 0 : callback(result);
+  });
+}
+
+const copyBtn = cva('p-0 flex-shrink-0 h-[max-content] min-w-0 bg-transparent transition-colors', {
+  variants: {
+    theme: {
+      light: 'hover:text-gray-600 active:text-gray-800',
+      dark: 'hover:text-gray-300 active:text-gray-100'
+    }
+  },
+  defaultVariants: {
+    theme: 'light'
+  }
+});
+const CopyButton = _a => {
+  var {
+      text,
+      className,
+      onCopy
+    } = _a,
+    props = __rest(_a, ["text", "className", "onCopy"]);
+  const {
+    theme
+  } = useTheme();
+  const [open, setOpen] = useState(false);
+  const handleCopy = e => {
+    e.stopPropagation();
+    e.preventDefault();
+    copyToClipboard(text, onCopy);
+    setOpen(true);
+    setTimeout(() => setOpen(false), 1000);
+  };
+  return jsxs(Root2$1, {
+    open: open,
+    children: [jsx(Trigger$2, {
+      asChild: true,
+      children: jsx("button", Object.assign({
+        type: 'button',
+        className: `${copyBtn({
+          theme
+        })} ${className !== null && className !== void 0 ? className : ''} hover:cursor-pointer`,
+        onClick: handleCopy
+      }, props, {
+        children: jsx(CopyIcon, {
+          className: 'w-4 h-4 transition',
+          color: theme === 'light' ? '#000000' : '#ffffff'
+        })
+      }))
+    }), jsx(Portal$1, {
+      children: jsxs(Content2, {
+        className: 'bg-white text-gray-900 text-sm px-2 py-1 rounded shadow-lg',
+        side: 'top',
+        sideOffset: 5,
+        children: ["Copied", jsx(Arrow2, {
+          className: 'fill-white'
+        })]
+      })
+    })]
+  });
+};
+
+/** CVA for the root container, now with light/dark theme */
+const identifier = cva('flex items-center font-dash-grotesque text-sm font-normal break-all', {
+  variants: {
+    theme: {
+      light: 'text-gray-900',
+      dark: 'text-white'
+    },
+    ellipsis: {
+      false: '',
+      true: 'overflow-hidden'
+    },
+    highlight: {
+      default: '',
+      dim: '',
+      highlight: '',
+      first: '',
+      last: '',
+      both: ''
+    }
+  },
+  defaultVariants: {
+    theme: 'light',
+    ellipsis: false,
+    highlight: 'default'
+  }
+});
+/** CVA for each symbol span: inherits root color or dims */
+const symbol = cva('flex-1', {
+  variants: {
     dim: {
       false: 'text-inherit',
       true: 'text-gray-500'
@@ -10207,7 +11478,7 @@ var DialogTrigger = React.forwardRef(
         "data-state": getState(context.open),
         ...triggerProps,
         ref: composedTriggerRef,
-        onClick: composeEventHandlers(props.onClick, context.onOpenToggle)
+        onClick: composeEventHandlers$1(props.onClick, context.onOpenToggle)
       }
     );
   }
@@ -10220,7 +11491,7 @@ var [PortalProvider, usePortalContext] = createDialogContext(PORTAL_NAME, {
 var DialogPortal = (props) => {
   const { __scopeDialog, forceMount, children, container } = props;
   const context = useDialogContext(PORTAL_NAME, __scopeDialog);
-  return /* @__PURE__ */ jsx(PortalProvider, { scope: __scopeDialog, forceMount, children: React.Children.map(children, (child) => /* @__PURE__ */ jsx(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx(Portal$2, { asChild: true, container, children: child }) })) });
+  return /* @__PURE__ */ jsx(PortalProvider, { scope: __scopeDialog, forceMount, children: React.Children.map(children, (child) => /* @__PURE__ */ jsx(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx(Portal$3, { asChild: true, container, children: child }) })) });
 };
 DialogPortal.displayName = PORTAL_NAME;
 var OVERLAY_NAME = "DialogOverlay";
@@ -10279,17 +11550,17 @@ var DialogContentModal = React.forwardRef(
         ref: composedRefs,
         trapFocus: context.open,
         disableOutsidePointerEvents: true,
-        onCloseAutoFocus: composeEventHandlers(props.onCloseAutoFocus, (event) => {
+        onCloseAutoFocus: composeEventHandlers$1(props.onCloseAutoFocus, (event) => {
           event.preventDefault();
           context.triggerRef.current?.focus();
         }),
-        onPointerDownOutside: composeEventHandlers(props.onPointerDownOutside, (event) => {
+        onPointerDownOutside: composeEventHandlers$1(props.onPointerDownOutside, (event) => {
           const originalEvent = event.detail.originalEvent;
           const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
           const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
           if (isRightClick) event.preventDefault();
         }),
-        onFocusOutside: composeEventHandlers(
+        onFocusOutside: composeEventHandlers$1(
           props.onFocusOutside,
           (event) => event.preventDefault()
         )
@@ -10343,7 +11614,7 @@ var DialogContentImpl = React.forwardRef(
     const context = useDialogContext(CONTENT_NAME$1, __scopeDialog);
     const contentRef = React.useRef(null);
     const composedRefs = useComposedRefs(forwardedRef, contentRef);
-    useFocusGuards();
+    useFocusGuards$1();
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         FocusScope,
@@ -10354,7 +11625,7 @@ var DialogContentImpl = React.forwardRef(
           onMountAutoFocus: onOpenAutoFocus,
           onUnmountAutoFocus: onCloseAutoFocus,
           children: /* @__PURE__ */ jsx(
-            DismissableLayer,
+            DismissableLayer$1,
             {
               role: "dialog",
               id: context.contentId,
@@ -10404,7 +11675,7 @@ var DialogClose = React.forwardRef(
         type: "button",
         ...closeProps,
         ref: forwardedRef,
-        onClick: composeEventHandlers(props.onClick, () => context.onOpenChange(false))
+        onClick: composeEventHandlers$1(props.onClick, () => context.onOpenChange(false))
       }
     );
   }
@@ -10698,10 +11969,10 @@ var RovingFocusGroupImpl = React.forwardRef((props, forwardedRef) => {
           ...groupProps,
           ref: composedRefs,
           style: { outline: "none", ...props.style },
-          onMouseDown: composeEventHandlers(props.onMouseDown, () => {
+          onMouseDown: composeEventHandlers$1(props.onMouseDown, () => {
             isClickFocusRef.current = true;
           }),
-          onFocus: composeEventHandlers(props.onFocus, (event) => {
+          onFocus: composeEventHandlers$1(props.onFocus, (event) => {
             const isKeyboardFocus = !isClickFocusRef.current;
             if (event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut) {
               const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS);
@@ -10719,7 +11990,7 @@ var RovingFocusGroupImpl = React.forwardRef((props, forwardedRef) => {
             }
             isClickFocusRef.current = false;
           }),
-          onBlur: composeEventHandlers(props.onBlur, () => setIsTabbingBackOut(false))
+          onBlur: composeEventHandlers$1(props.onBlur, () => setIsTabbingBackOut(false))
         }
       )
     }
@@ -10762,12 +12033,12 @@ var RovingFocusGroupItem = React.forwardRef(
             "data-orientation": context.orientation,
             ...itemProps,
             ref: forwardedRef,
-            onMouseDown: composeEventHandlers(props.onMouseDown, (event) => {
+            onMouseDown: composeEventHandlers$1(props.onMouseDown, (event) => {
               if (!focusable) event.preventDefault();
               else context.onItemFocus(id);
             }),
-            onFocus: composeEventHandlers(props.onFocus, () => context.onItemFocus(id)),
-            onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
+            onFocus: composeEventHandlers$1(props.onFocus, () => context.onItemFocus(id)),
+            onKeyDown: composeEventHandlers$1(props.onKeyDown, (event) => {
               if (event.key === "Tab" && event.shiftKey) {
                 context.onItemShiftTab();
                 return;
@@ -10936,17 +12207,17 @@ var TabsTrigger = React.forwardRef(
             id: triggerId,
             ...triggerProps,
             ref: forwardedRef,
-            onMouseDown: composeEventHandlers(props.onMouseDown, (event) => {
+            onMouseDown: composeEventHandlers$1(props.onMouseDown, (event) => {
               if (!disabled && event.button === 0 && event.ctrlKey === false) {
                 context.onValueChange(value);
               } else {
                 event.preventDefault();
               }
             }),
-            onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
+            onKeyDown: composeEventHandlers$1(props.onKeyDown, (event) => {
               if ([" ", "Enter"].includes(event.key)) context.onValueChange(value);
             }),
-            onFocus: composeEventHandlers(props.onFocus, () => {
+            onFocus: composeEventHandlers$1(props.onFocus, () => {
               const isAutomaticActivation = context.activationMode !== "manual";
               if (!isSelected && !disabled && isAutomaticActivation) {
                 context.onValueChange(value);
@@ -11149,5 +12420,5 @@ const Tabs = ({
   });
 };
 
-export { Accordion, ArrowIcon, Avatar, BigNumber, BroadcastedIcon, BurgerMenuIcon, Button, CalendarIcon, ChainSmallIcon, CheckIcon, CheckmarkIcon, ChevronIcon, CircleProcessIcon, CopyButton, CopyIcon, CreditsIcon, CrossIcon, DashLogo, DateBlock, DeleteIcon, DashDialog as Dialog, EditIcon, ErrorIcon, EyeClosedIcon, EyeOpenIcon, FilterIcon, Heading, Identifier, Input, KebabMenuIcon, KeyIcon, List$1 as List, NotActive, OverlayMenu, OverlaySelect, PlusIcon, PooledIcon, ProgressStepBar, ProtectedMessageIcon, QuestionMessageIcon, QueuedIcon, Select, SettingsIcon, ShieldSmallIcon, SmartphoneIcon, SuccessIcon, Switch, Tabs, Text, Textarea, ThemeProvider, TimeDelta, TransactionStatusIcon, ValueCard, WalletIcon, WebIcon, useTheme };
+export { Accordion, ArrowIcon, Avatar, Badge, BigNumber, BroadcastedIcon, BurgerMenuIcon, Button, CalendarIcon, ChainSmallIcon, CheckIcon, CheckmarkIcon, ChevronIcon, CircleProcessIcon, CopyButton, CopyIcon, CreditsIcon, CrossIcon, DashLogo, DateBlock, DeleteIcon, DashDialog as Dialog, EditIcon, ErrorIcon, EyeClosedIcon, EyeOpenIcon, FaceIcon, FilterIcon, FingerprintIcon, Heading, Identifier, Input, KebabMenuIcon, KeyIcon, List$1 as List, LockIcon, NotActive, OverlayMenu, OverlaySelect, PendingIcon, PlusIcon, PooledIcon, ProgressStepBar, ProtectedMessageIcon, QuestionMessageIcon, QueuedIcon, SearchIcon, Select, SettingsIcon, ShieldSmallIcon, SignIcon, SignLockIcon, SmartphoneIcon, SuccessIcon, Switch, Tabs, Text, Textarea, ThemeProvider, TimeDelta, TransactionStatusIcon, ValueCard, WalletIcon, WebIcon, useTheme };
 //# sourceMappingURL=index.esm.js.map