@remotion/promo-pages 4.0.373 → 4.0.374

package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/design.js

@@ -25,7 +25,7 @@ import { createContext as createContext2, useContext } from "react";
 import { jsx as jsx10 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef2,
-  useContext as useContext12,
+  useContext as useContext13,
   useEffect as useEffect3,
   useMemo as useMemo10,
   useState as useState6
@@ -36,7 +36,7 @@ import { createContext as createContext3 } from "react";
 import React3, { useCallback, useMemo as useMemo22, useState } from "react";
 import { jsx as jsx32 } from "react/jsx-runtime";
 import {
-  createContext as createContext9,
+  createContext as createContext10,
   useLayoutEffect,
   useMemo as useMemo7,
   useRef as useRef2,
@@ -66,14 +66,16 @@ import React5, {
 import { jsx as jsx42 } from "react/jsx-runtime";
 import { createContext as createContext6, useContext as useContext3, useEffect, useRef, useState as useState3 } from "react";
 import { jsx as jsx52 } from "react/jsx-runtime";
-import { createContext as createContext8, useCallback as useCallback4, useContext as useContext7 } from "react";
+import { createContext as createContext9, useCallback as useCallback4, useContext as useContext8 } from "react";
+import { createContext as createContext8 } from "react";
+import * as React6 from "react";
 import { jsx as jsx62 } from "react/jsx-runtime";
-import { useContext as useContext9 } from "react";
-import { createContext as createContext10 } from "react";
-import { jsx as jsx72 } from "react/jsx-runtime";
-import { useContext as useContext8, useMemo as useMemo8 } from "react";
-import { useContext as useContext11, useMemo as useMemo9 } from "react";
 import { useContext as useContext10 } from "react";
+import { createContext as createContext11 } from "react";
+import { jsx as jsx72 } from "react/jsx-runtime";
+import { useContext as useContext9, useMemo as useMemo8 } from "react";
+import { useContext as useContext12, useMemo as useMemo9 } from "react";
+import { useContext as useContext11 } from "react";
 import { jsx as jsx82 } from "react/jsx-runtime";
 import { jsx as jsx92 } from "react/jsx-runtime";
 import {
@@ -84,12 +86,12 @@ import {
   useRef as useRef4,
   useState as useState7
 } from "react";
-import React10, { useCallback as useCallback5, useImperativeHandle as useImperativeHandle3, useRef as useRef3 } from "react";
+import React11, { useCallback as useCallback5, useImperativeHandle as useImperativeHandle3, useRef as useRef3 } from "react";
 import { jsx as jsx102 } from "react/jsx-runtime";
 import { jsx as jsx11 } from "react/jsx-runtime";
-import { useContext as useContext13, useEffect as useEffect5, useState as useState9 } from "react";
+import { useContext as useContext14, useEffect as useEffect5, useState as useState9 } from "react";
 import {
-  createContext as createContext11,
+  createContext as createContext12,
   useCallback as useCallback6,
   useLayoutEffect as useLayoutEffect3,
   useMemo as useMemo11,
@@ -97,12 +99,12 @@ import {
 } from "react";
 import { jsx as jsx12 } from "react/jsx-runtime";
 import { forwardRef as forwardRef6, useCallback as useCallback11, useContext as useContext27 } from "react";
-import React11, { createContext as createContext12, useMemo as useMemo12 } from "react";
+import React12, { createContext as createContext13, useMemo as useMemo12 } from "react";
 import { jsx as jsx13 } from "react/jsx-runtime";
-import { useContext as useContext14 } from "react";
-import { createContext as createContext13, useEffect as useEffect6, useState as useState10 } from "react";
+import { useContext as useContext15 } from "react";
+import { createContext as createContext14, useEffect as useEffect6, useState as useState10 } from "react";
 import { jsx as jsx14 } from "react/jsx-runtime";
-import { createContext as createContext14, useMemo as useMemo13, useReducer } from "react";
+import { createContext as createContext15, useMemo as useMemo13, useReducer } from "react";
 import { jsx as jsx15 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef4,
@@ -113,8 +115,6 @@ import {
   useRef as useRef12,
   useState as useState15
 } from "react";
-import { createContext as createContext15 } from "react";
-import * as React14 from "react";
 import { useContext as useContext17, useLayoutEffect as useLayoutEffect4, useRef as useRef7 } from "react";
 import React15, {
   createContext as createContext16,
@@ -328,7 +328,7 @@ function validateFps(fps, location, isGif) {
     throw new TypeError(`The FPS for a GIF cannot be higher than 50. Use the --every-nth-frame option to lower the FPS: https://remotion.dev/docs/render-as-gif`);
   }
 }
-function cancelRender(err) {
+function cancelRenderInternal(scope, err) {
   let error;
   if (isErrorLike(err)) {
     error = err;
@@ -340,9 +340,14 @@ function cancelRender(err) {
   } else {
     error = Error("Rendering was cancelled");
   }
-  window.remotion_cancelledError = error.stack;
+  if (scope) {
+    scope.remotion_cancelledError = error.stack;
+  }
   throw error;
 }
+function cancelRender(err) {
+  return cancelRenderInternal(typeof window !== "undefined" ? window : undefined, err);
+}
 function interpolateFunction(input, inputRange, outputRange, options) {
   const { extrapolateLeft, extrapolateRight, easing } = options;
   let result = input;
@@ -748,7 +753,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.373", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.374", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -1634,8 +1639,13 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
 }, error = (options, ...args) => {
   return console.error(...transformArgs({ args, logLevel: "error", tag: options.tag }));
-}, Log, handles, DELAY_RENDER_CALLSTACK_TOKEN = "The delayRender was called:", DELAY_RENDER_RETRIES_LEFT = "Retries left: ", DELAY_RENDER_RETRY_TOKEN = "- Rendering the frame will be retried.", DELAY_RENDER_CLEAR_TOKEN = "handle was cleared after", defaultTimeout = 30000, delayRenderInternal = (scope, environment, label, options) => {
-  if (typeof label !== "string" && typeof label !== "undefined") {
+}, Log, handles, DELAY_RENDER_CALLSTACK_TOKEN = "The delayRender was called:", DELAY_RENDER_RETRIES_LEFT = "Retries left: ", DELAY_RENDER_RETRY_TOKEN = "- Rendering the frame will be retried.", DELAY_RENDER_CLEAR_TOKEN = "handle was cleared after", defaultTimeout = 30000, delayRenderInternal = ({
+  scope,
+  environment,
+  label,
+  options
+}) => {
+  if (typeof label !== "string" && label !== null) {
     throw new Error("The label parameter of delayRender() must be a string or undefined, got: " + JSON.stringify(label));
   }
   const handle = Math.random();
@@ -1658,7 +1668,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
             DELAY_RENDER_CALLSTACK_TOKEN,
             called
           ].filter(truthy2).join(" ");
-          cancelRender(Error(message));
+          cancelRenderInternal(scope, Error(message));
         }, timeoutToUse)
       };
     }
@@ -1667,7 +1677,12 @@ Check that all your Remotion packages are on the same version. If your dependenc
     scope.remotion_renderReady = false;
   }
   return handle;
-}, continueRenderInternal = (scope, handle, environment) => {
+}, continueRenderInternal = ({
+  scope,
+  handle,
+  environment,
+  logLevel
+}) => {
   if (typeof handle === "undefined") {
     throw new TypeError("The continueRender() method must be called with a parameter that is the return value of delayRender(). No value was passed.");
   }
@@ -1687,7 +1702,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
           DELAY_RENDER_CLEAR_TOKEN,
           `${Date.now() - startTime}ms`
         ].filter(truthy2).join(" ");
-        Log.verbose({ logLevel: window.remotion_logLevel, tag: "delayRender()" }, message);
+        Log.verbose({ logLevel, tag: "delayRender()" }, message);
         delete scope.remotion_delayRenderTimeouts[handle];
       }
       return false;
@@ -1697,16 +1712,42 @@ Check that all your Remotion packages are on the same version. If your dependenc
   if (handles.length === 0 && typeof scope !== "undefined") {
     scope.remotion_renderReady = true;
   }
+}, LogLevelContext, useLogLevel = () => {
+  const { logLevel } = React6.useContext(LogLevelContext);
+  if (logLevel === null) {
+    throw new Error("useLogLevel must be used within a LogLevelProvider");
+  }
+  return logLevel;
+}, useMountTime = () => {
+  const { mountTime } = React6.useContext(LogLevelContext);
+  if (mountTime === null) {
+    throw new Error("useMountTime must be used within a LogLevelProvider");
+  }
+  return mountTime;
 }, DelayRenderContextType, useDelayRender = () => {
   const environment = useRemotionEnvironment();
-  const scope = useContext7(DelayRenderContextType);
+  const scope = useContext8(DelayRenderContextType);
+  const logLevel = useLogLevel();
   const delayRender2 = useCallback4((label, options) => {
-    return delayRenderInternal(scope ?? (typeof window !== "undefined" ? window : undefined), environment, label, options);
+    return delayRenderInternal({
+      scope: scope ?? (typeof window !== "undefined" ? window : undefined),
+      environment,
+      label: label ?? null,
+      options: options ?? {}
+    });
   }, [environment, scope]);
   const continueRender2 = useCallback4((handle) => {
-    continueRenderInternal(scope ?? (typeof window !== "undefined" ? window : undefined), handle, environment);
-  }, [environment, scope]);
-  return { delayRender: delayRender2, continueRender: continueRender2 };
+    continueRenderInternal({
+      scope: scope ?? (typeof window !== "undefined" ? window : undefined),
+      handle,
+      environment,
+      logLevel
+    });
+  }, [environment, logLevel, scope]);
+  const cancelRender2 = useCallback4((err) => {
+    return cancelRenderInternal(scope ?? (typeof window !== "undefined" ? window : undefined), err);
+  }, [scope]);
+  return { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 };
 }, SetTimelineContext, TimelineContext, TimelineContextProvider = ({ children, frameState }) => {
   const [playing, setPlaying] = useState5(false);
   const imperativePlaying = useRef2(false);
@@ -1772,7 +1813,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     children
   });
 }, useUnsafeVideoConfig = () => {
-  const context = useContext8(SequenceContext);
+  const context = useContext9(SequenceContext);
   const ctxWidth = context?.width ?? null;
   const ctxHeight = context?.height ?? null;
   const ctxDuration = context?.durationInFrames ?? null;
@@ -1812,7 +1853,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }, [ctxDuration, ctxHeight, ctxWidth, video]);
 }, useVideoConfig = () => {
   const videoConfig = useUnsafeVideoConfig();
-  const context = useContext9(CanUseRemotionHooks);
+  const context = useContext10(CanUseRemotionHooks);
   const isPlayer = useIsPlayer();
   if (!videoConfig) {
     if (typeof window !== "undefined" && window.remotion_isPlayer || isPlayer) {
@@ -1829,7 +1870,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   return videoConfig;
 }, useCurrentFrame = () => {
-  const canUseRemotionHooks = useContext10(CanUseRemotionHooks);
+  const canUseRemotionHooks = useContext11(CanUseRemotionHooks);
   const env = useRemotionEnvironment();
   if (!canUseRemotionHooks) {
     if (env.isPlayer) {
@@ -1838,7 +1879,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     throw new Error(`useCurrentFrame() can only be called inside a component that was registered as a composition. See https://www.remotion.dev/docs/the-fundamentals#defining-compositions`);
   }
   const frame = useTimelinePosition();
-  const context = useContext10(SequenceContext);
+  const context = useContext11(SequenceContext);
   const contextOffset = context ? context.cumulatedFrom + context.relativeFrom : 0;
   return frame - contextOffset;
 }, Freeze = ({
@@ -1868,8 +1909,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
       return active(frame);
     }
   }, [active, frame]);
-  const timelineContext = useContext11(TimelineContext);
-  const sequenceContext = useContext11(SequenceContext);
+  const timelineContext = useContext12(TimelineContext);
+  const sequenceContext = useContext12(SequenceContext);
   const relativeFrom = sequenceContext?.relativeFrom ?? 0;
   const timelineValue = useMemo9(() => {
     if (!isActive) {
@@ -1922,8 +1963,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
 }, ref) => {
   const { layout = "absolute-fill" } = other;
   const [id] = useState6(() => String(Math.random()));
-  const parentSequence = useContext12(SequenceContext);
-  const { rootId } = useContext12(TimelineContext);
+  const parentSequence = useContext13(SequenceContext);
+  const { rootId } = useContext13(TimelineContext);
   const cumulatedFrom = parentSequence ? parentSequence.cumulatedFrom + parentSequence.relativeFrom : 0;
   const nonce = useNonce();
   if (layout !== "absolute-fill" && layout !== "none") {
@@ -1948,8 +1989,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const videoConfig = useVideoConfig();
   const parentSequenceDuration = parentSequence ? Math.min(parentSequence.durationInFrames - from, durationInFrames) : durationInFrames;
   const actualDurationInFrames = Math.max(0, Math.min(videoConfig.durationInFrames - from, parentSequenceDuration));
-  const { registerSequence, unregisterSequence } = useContext12(SequenceManager);
-  const { hidden } = useContext12(SequenceVisibilityToggleContext);
+  const { registerSequence, unregisterSequence } = useContext13(SequenceManager);
+  const { hidden } = useContext13(SequenceVisibilityToggleContext);
   const premounting = useMemo10(() => {
     return parentSequence?.premounting || Boolean(other._remotionInternalIsPremounting);
   }, [other._remotionInternalIsPremounting, parentSequence?.premounting]);
@@ -2413,7 +2454,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     children
   });
 }, ArtifactThumbnail, Artifact = ({ filename, content, downloadBehavior }) => {
-  const { registerRenderAsset, unregisterRenderAsset } = useContext13(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext14(RenderAssetManager);
   const env = useRemotionEnvironment();
   const frame = useCurrentFrame();
   const [id] = useState9(() => {
@@ -2491,7 +2532,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const actualDuration = duration / playbackRate;
   return Math.floor(actualDuration);
 }, LoopContext, useLoop = () => {
-  return React11.useContext(LoopContext);
+  return React12.useContext(LoopContext);
 }, Loop = ({ durationInFrames, times = Infinity, children, name, ...props }) => {
   const currentFrame = useCurrentFrame();
   const { durationInFrames: compDuration } = useVideoConfig();
@@ -2579,7 +2620,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   return src.slice(0, hashIndex);
 }, usePreload = (src) => {
-  const preloads2 = useContext14(PreloadContext);
+  const preloads2 = useContext15(PreloadContext);
   const hashFragmentIndex = removeAndGetHashFragment(src);
   const withoutHashFragment = getSrcWithoutHash(src);
   if (!preloads2[withoutHashFragment]) {
@@ -2875,18 +2916,6 @@ Check that all your Remotion packages are on the same version. If your dependenc
     return "anonymous";
   }
   return;
-}, LogLevelContext, useLogLevel = () => {
-  const { logLevel } = React14.useContext(LogLevelContext);
-  if (logLevel === null) {
-    throw new Error("useLogLevel must be used within a LogLevelProvider");
-  }
-  return logLevel;
-}, useMountTime = () => {
-  const { mountTime } = React14.useContext(LogLevelContext);
-  if (mountTime === null) {
-    throw new Error("useMountTime must be used within a LogLevelProvider");
-  }
-  return mountTime;
 }, playAndHandleNotAllowedError = ({
   mediaRef,
   mediaType,
@@ -6823,8 +6852,12 @@ var init_esm = __esm(() => {
       window.remotion_delayRenderTimeouts = {};
     }
   }
-  DelayRenderContextType = createContext8(null);
-  SetTimelineContext = createContext9({
+  LogLevelContext = createContext8({
+    logLevel: "info",
+    mountTime: 0
+  });
+  DelayRenderContextType = createContext9(null);
+  SetTimelineContext = createContext10({
     setFrame: () => {
       throw new Error("default");
     },
@@ -6832,7 +6865,7 @@ var init_esm = __esm(() => {
       throw new Error("default");
     }
   });
-  TimelineContext = createContext9({
+  TimelineContext = createContext10({
     frame: {},
     playing: false,
     playbackRate: 1,
@@ -6845,11 +6878,11 @@ var init_esm = __esm(() => {
     },
     audioAndVideoTags: { current: [] }
   });
-  CanUseRemotionHooks = createContext10(false);
+  CanUseRemotionHooks = createContext11(false);
   RegularSequence = forwardRef2(RegularSequenceRefForwardingFunction);
   PremountedPostmountedSequence = forwardRef2(PremountedPostmountedSequenceRefForwardingFunction);
   Sequence = forwardRef2(SequenceRefForwardingFunction);
-  Canvas = React10.forwardRef(CanvasRefForwardingFunction);
+  Canvas = React11.forwardRef(CanvasRefForwardingFunction);
   AnimatedImage = forwardRef3(({
     src,
     width,
@@ -6957,7 +6990,7 @@ var init_esm = __esm(() => {
       ...props
     });
   });
-  RenderAssetManager = createContext11({
+  RenderAssetManager = createContext12({
     registerRenderAsset: () => {
       return;
     },
@@ -6968,21 +7001,17 @@ var init_esm = __esm(() => {
   });
   ArtifactThumbnail = Symbol("Thumbnail");
   Artifact.Thumbnail = ArtifactThumbnail;
-  LoopContext = createContext12(null);
+  LoopContext = createContext13(null);
   Loop.useLoop = useLoop;
-  PreloadContext = createContext13({});
+  PreloadContext = createContext14({});
   preloads = {};
   updaters = [];
-  DurationsContext = createContext14({
+  DurationsContext = createContext15({
     durations: {},
     setDurations: () => {
       throw new Error("context missing");
     }
   });
-  LogLevelContext = createContext15({
-    logLevel: "info",
-    mountTime: 0
-  });
   SharedAudioContext = createContext16(null);
   didWarn = {};
   BufferingContextReact = React16.createContext(null);
@@ -7201,7 +7230,7 @@ var init_esm = __esm(() => {
 });
 
 // ../design/dist/esm/index.mjs
-import { useCallback as useCallback18, useRef as useRef18, useState as useState22 } from "react";
+import { useCallback as useCallback18, useRef as useRef22, useState as useState22 } from "react";
 
 // ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -8542,7 +8571,7 @@ var getDefaultConfig = () => {
 var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 
 // ../design/dist/esm/index.mjs
-import React6, { useEffect as useEffect23, useMemo as useMemo33, useState as useState21 } from "react";
+import React7, { useEffect as useEffect23, useMemo as useMemo33, useState as useState21 } from "react";
 
 // ../paths/dist/esm/index.mjs
 var cutLInstruction = ({
@@ -12683,65 +12712,69 @@ var extrudeAndTransformElement = (options) => {
 init_esm();
 import { jsx as jsx37, Fragment } from "react/jsx-runtime";
 import { jsx as jsx210, jsxs as jsxs3 } from "react/jsx-runtime";
+import { useEffect as useEffect24, useMemo as useMemo210, useRef as useRef18 } from "react";
 import { jsx as jsx38 } from "react/jsx-runtime";
-import React34 from "react";
-import { jsx as jsx43 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs23 } from "react/jsx-runtime";
+import React42 from "react";
 import { jsx as jsx53 } from "react/jsx-runtime";
-import { jsx as jsx63, jsxs as jsxs23 } from "react/jsx-runtime";
-import { jsx as jsx73 } from "react/jsx-runtime";
-import * as React322 from "react";
-import * as ReactDOM4 from "react-dom";
-import React7 from "react";
-import * as React42 from "react";
+import { jsx as jsx63 } from "react/jsx-runtime";
+import { jsx as jsx73, jsxs as jsxs32 } from "react/jsx-runtime";
+import React52 from "react";
 import { jsx as jsx83 } from "react/jsx-runtime";
-import * as React52 from "react";
+import { jsx as jsx93 } from "react/jsx-runtime";
+import * as React34 from "react";
+import * as ReactDOM4 from "react-dom";
+import React9 from "react";
 import * as React62 from "react";
-import { Fragment as Fragment2, jsx as jsx93 } from "react/jsx-runtime";
 import { jsx as jsx103 } from "react/jsx-runtime";
+import * as React72 from "react";
 import * as React8 from "react";
-import { jsx as jsx112 } from "react/jsx-runtime";
-import * as React12 from "react";
-import * as React9 from "react";
-import * as ReactDOM from "react-dom";
+import { Fragment as Fragment2, jsx as jsx112 } from "react/jsx-runtime";
 import { jsx as jsx122 } from "react/jsx-runtime";
-import * as React102 from "react";
-import * as React112 from "react";
+import * as React10 from "react";
 import { jsx as jsx132 } from "react/jsx-runtime";
-import * as React13 from "react";
-import * as React142 from "react";
+import * as React14 from "react";
+import * as React112 from "react";
+import * as ReactDOM from "react-dom";
 import { jsx as jsx142 } from "react/jsx-runtime";
-import * as React162 from "react";
+import * as React122 from "react";
+import * as React13 from "react";
+import { jsx as jsx152 } from "react/jsx-runtime";
 import * as React152 from "react";
-import * as React20 from "react";
-import * as React172 from "react";
-import { useLayoutEffect as useLayoutEffect32, useEffect as useEffect72 } from "react";
-import * as ReactDOM2 from "react-dom";
+import * as React162 from "react";
+import { jsx as jsx162 } from "react/jsx-runtime";
 import * as React18 from "react";
-import { jsx as jsx152 } from "react/jsx-runtime";
+import * as React172 from "react";
+import * as React22 from "react";
 import * as React19 from "react";
-import { jsx as jsx162 } from "react/jsx-runtime";
-import * as React212 from "react";
-import ReactDOM3 from "react-dom";
+import { useLayoutEffect as useLayoutEffect32, useEffect as useEffect82 } from "react";
+import * as ReactDOM2 from "react-dom";
+import * as React20 from "react";
 import { jsx as jsx172 } from "react/jsx-runtime";
-import * as React22 from "react";
+import * as React212 from "react";
+import { jsx as jsx182 } from "react/jsx-runtime";
 import * as React23 from "react";
+import ReactDOM3 from "react-dom";
+import { jsx as jsx192 } from "react/jsx-runtime";
 import * as React24 from "react";
-import { jsx as jsx182 } from "react/jsx-runtime";
-import * as React312 from "react";
-import * as React272 from "react";
-import { useState as useState112 } from "react";
 import * as React252 from "react";
 import * as React26 from "react";
-import * as React30 from "react";
+import { jsx as jsx202 } from "react/jsx-runtime";
+import * as React332 from "react";
 import * as React29 from "react";
+import { useState as useState112 } from "react";
+import * as React272 from "react";
 import * as React28 from "react";
-import { Fragment as Fragment52, jsx as jsx192, jsxs as jsxs32 } from "react/jsx-runtime";
+import * as React322 from "react";
+import * as React312 from "react";
+import * as React30 from "react";
+import { Fragment as Fragment52, jsx as jsx212, jsxs as jsxs4 } from "react/jsx-runtime";
 import { forwardRef as forwardRef132, createElement as createElement7 } from "react";
 import { forwardRef as forwardRef122, createElement as createElement6 } from "react";
-import * as React332 from "react";
-import { jsx as jsx202, jsxs as jsxs4 } from "react/jsx-runtime";
-import { jsx as jsx212 } from "react/jsx-runtime";
-import { jsx as jsx223 } from "react/jsx-runtime";
+import * as React352 from "react";
+import { jsx as jsx223, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx232 } from "react/jsx-runtime";
+import { jsx as jsx242 } from "react/jsx-runtime";
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -12760,7 +12793,7 @@ var getChildNodeFrom = (htmlElement) => {
   return childNode;
 };
 var useHoverTransforms = (ref, disabled) => {
-  const [state, setState] = React6.useState({
+  const [state, setState] = React7.useState({
     progress: 0,
     isActive: false
   });
@@ -12772,7 +12805,7 @@ var useHoverTransforms = (ref, disabled) => {
       eventTarget.dispatchEvent(new Event("enabled"));
     }
   }, [disabled, eventTarget]);
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     const element = ref.current;
     if (!element)
       return;
@@ -12847,8 +12880,8 @@ var useHoverTransforms = (ref, disabled) => {
   return state;
 };
 var useClickTransforms = (ref) => {
-  const [hoverProgress, setHoverProgress] = React6.useState(0);
-  React6.useEffect(() => {
+  const [hoverProgress, setHoverProgress] = React7.useState(0);
+  React7.useEffect(() => {
     const element = getChildNodeFrom(ref.current);
     if (!element) {
       return;
@@ -13021,10 +13054,56 @@ var Outer = ({
     ]
   });
 };
-var Button = ({ children, className, disabled, depth, ...buttonProps }) => {
+var viewBox = 100;
+var lines = 8;
+var translated2 = "M 44 0 L 50 0 a 6 6 0 0 1 6 6 L 56 26 a 6 6 0 0 1 -6 6 L 50 32 a 6 6 0 0 1 -6 -6 L 44 6 a 6 6 0 0 1 6 -6 Z";
+var Spinner = ({ size, duration }) => {
+  const style = useMemo210(() => {
+    return {
+      width: size,
+      height: size
+    };
+  }, [size]);
+  const pathsRef = useRef18([]);
+  useEffect24(() => {
+    const animate = () => {
+      const now = performance.now();
+      for (let index = 0;index < lines; index++) {
+        const path = pathsRef.current[index];
+        if (!path)
+          continue;
+        const progress = (now / 1000 - index * (duration / lines)) % duration / duration;
+        const opacity = 1 - 0.85 * progress;
+        path.style.opacity = opacity.toString();
+      }
+      requestAnimationFrame(animate);
+    };
+    const id = requestAnimationFrame(animate);
+    return () => {
+      cancelAnimationFrame(id);
+    };
+  }, [duration]);
+  return /* @__PURE__ */ jsx38("svg", {
+    style,
+    viewBox: `0 0 ${viewBox} ${viewBox}`,
+    children: new Array(lines).fill(true).map((_, index) => {
+      return /* @__PURE__ */ jsx38("path", {
+        ref: (el) => pathsRef.current[index] = el,
+        style: {
+          rotate: `${index * Math.PI * 2 / lines}rad`,
+          transformOrigin: "center center",
+          opacity: 1
+        },
+        d: translated2,
+        fill: "currentColor"
+      }, index);
+    })
+  });
+};
+var Button = ({ children, className, disabled, depth, loading, ...buttonProps }) => {
   const [dimensions, setDimensions] = useState22(null);
-  const ref = useRef18(null);
-  const { isActive, progress } = useHoverTransforms(ref, Boolean(disabled));
+  const ref = useRef22(null);
+  const { isActive, progress } = useHoverTransforms(ref, Boolean(disabled || loading));
   const onPointerEnter = useCallback18((e) => {
     if (e.pointerType !== "mouse") {
       return;
@@ -13059,18 +13138,30 @@ var Button = ({ children, className, disabled, depth, ...buttonProps }) => {
       };
     });
   }, []);
-  const content = /* @__PURE__ */ jsx38("button", {
+  const content = /* @__PURE__ */ jsxs23("button", {
     type: "button",
-    disabled,
-    className: cn("text-text", "flex", "justify-center", "bg-button-bg", "items-center", "font-brand", "border-solid", "text-[1em]", "rounded-lg", "border-black", "border-2", "border-b-4", "cursor-pointer", "px-4", "h-12", "flex", "flex-row", "items-center", "disabled:cursor-default", "disabled:border-gray-500", "disabled:text-gray-500", className),
+    disabled: disabled || loading,
+    className: cn("text-text", "flex", "justify-center", "bg-button-bg", "items-center", "font-brand", "border-solid", "text-[1em]", "rounded-lg", "border-black", "border-2", "border-b-4", "cursor-pointer", "px-4", "h-12", "flex", "flex-row", "items-center", "disabled:cursor-default", "disabled:opacity-50", "relative", "overflow-hidden", className),
     ...buttonProps,
-    children
+    children: [
+      /* @__PURE__ */ jsx43("div", {
+        className: cn(loading && "invisible"),
+        children
+      }),
+      loading ? /* @__PURE__ */ jsx43("div", {
+        className: cn("absolute w-full h-full flex inset-0 items-center justify-center text-inherit bg-inherit"),
+        children: /* @__PURE__ */ jsx43(Spinner, {
+          size: 20,
+          duration: 1
+        })
+      }) : null
+    ]
   });
-  return /* @__PURE__ */ jsx38("div", {
+  return /* @__PURE__ */ jsx43("div", {
     ref,
     className: "contents",
     onPointerEnter,
-    children: dimensions && (isActive || progress > 0) ? /* @__PURE__ */ jsx38(Outer, {
+    children: dimensions && (isActive || progress > 0) ? /* @__PURE__ */ jsx43(Outer, {
       parentRef: ref,
       width: dimensions.width,
       height: dimensions.height,
@@ -13081,8 +13172,8 @@ var Button = ({ children, className, disabled, depth, ...buttonProps }) => {
     }) : content
   });
 };
-var Card = React34.forwardRef(({ children, className, ...rest }, ref) => {
-  return /* @__PURE__ */ jsx43("div", {
+var Card = React42.forwardRef(({ children, className, ...rest }, ref) => {
+  return /* @__PURE__ */ jsx53("div", {
     ref,
     className: cn("rounded-lg border-2 border-black bg-card-bg text-text border-b-4", className),
     ...rest,
@@ -13092,18 +13183,18 @@ var Card = React34.forwardRef(({ children, className, ...rest }, ref) => {
 Card.displayName = "Card";
 var d = "M143.056 81.4934C147.25 77.2994 147.25 70.4506 143.056 66.2566C138.862 62.0627 132.013 62.0627 127.819 66.2566L86.1875 107.888L69.1809 90.8816C64.9869 86.6877 58.1381 86.6877 53.9441 90.8816C49.7502 95.0756 49.7502 101.924 53.9441 106.118L78.5691 130.743C82.7631 134.937 89.6119 134.937 93.8059 130.743L143.056 81.4934Z";
 var CheckIcon = (props) => {
-  return /* @__PURE__ */ jsx53("svg", {
+  return /* @__PURE__ */ jsx63("svg", {
     ...props,
     viewBox: "50.79867500000001 63.11117499999997 95.40282500000015 70.77732499999999",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx53("path", {
+    children: /* @__PURE__ */ jsx63("path", {
       d,
       fill: "currentcolor"
     })
   });
 };
-var Triangle = ({ rotated: rotated2 }) => /* @__PURE__ */ jsx63("svg", {
+var Triangle = ({ rotated: rotated2 }) => /* @__PURE__ */ jsx73("svg", {
   width: "12px",
   height: "7px",
   viewBox: "0 0 12 7",
@@ -13111,7 +13202,7 @@ var Triangle = ({ rotated: rotated2 }) => /* @__PURE__ */ jsx63("svg", {
   style: {
     transform: rotated2 ? "rotate(180deg)" : "rotate(0deg)"
   },
-  children: /* @__PURE__ */ jsx63("path", {
+  children: /* @__PURE__ */ jsx73("path", {
     className: "fill-text",
     d: "M7.17096 0.475588C6.73198 0.0764969 6.01906 0.0764969 5.58007 0.475588L1.08483 4.56228C0.761737 4.85601 0.666915 5.29341 0.84251 5.67654C1.01811 6.05966 1.42549 6.3087 1.88203 6.3087H10.8725C11.3255 6.3087 11.7364 6.05966 11.912 5.67654C12.0876 5.29341 11.9893 4.85601 11.6697 4.56228L7.17448 0.475588H7.17096Z"
   })
@@ -13146,11 +13237,11 @@ var Counter = ({
   const increment = () => {
     setCount(count + step);
   };
-  return /* @__PURE__ */ jsxs23(Card, {
+  return /* @__PURE__ */ jsxs32(Card, {
     style: container2,
     className: cn("w-[140px] flex flex-row overflow-hidden"),
     children: [
-      /* @__PURE__ */ jsx63("input", {
+      /* @__PURE__ */ jsx73("input", {
         className: "fontbrand text-2xl font-medium min-w-[80px] border-0 text-end outline-0 text-text overflow-hidden flex-1 px-0 py-0 pr-2 w-full h-full tabular-nums",
         type: "number",
         onClick: (e) => e.currentTarget.select(),
@@ -13170,28 +13261,28 @@ var Counter = ({
           }
         }
       }),
-      /* @__PURE__ */ jsxs23("div", {
+      /* @__PURE__ */ jsxs32("div", {
         className: "flex flex-col  h-full",
         children: [
-          /* @__PURE__ */ jsx63("button", {
+          /* @__PURE__ */ jsx73("button", {
             type: "button",
             className: "border-0 flex-1 p-0 pt-[5px] bg-transparent",
             style: {
               ...buttonContainer
             },
             onClick: increment,
-            children: /* @__PURE__ */ jsx63(Triangle, {
+            children: /* @__PURE__ */ jsx73(Triangle, {
               rotated: false
             })
           }),
-          /* @__PURE__ */ jsx63("button", {
+          /* @__PURE__ */ jsx73("button", {
             type: "button",
             className: "border-0 flex-1 p-0 bg-transparent pb-[5px] pl-[1px]",
             style: {
               ...buttonContainer
             },
             onClick: decrement,
-            children: /* @__PURE__ */ jsx63(Triangle, {
+            children: /* @__PURE__ */ jsx73(Triangle, {
               rotated: true
             })
           })
@@ -13200,12 +13291,20 @@ var Counter = ({
     ]
   });
 };
+var Input = React52.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx83("input", {
+    ref,
+    className: cn("w-full dark:bg-[#121212] rounded-lg border-2 border-b-4 border-black outline-none h-14 px-3 fontbrand text-lg box-border", className),
+    ...props
+  });
+});
+Input.displayName = "Input";
 var PlanePaperIcon = (props) => {
-  return /* @__PURE__ */ jsx73("svg", {
+  return /* @__PURE__ */ jsx93("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     ...props,
     viewBox: "0 0 576 512",
-    children: /* @__PURE__ */ jsx73("path", {
+    children: /* @__PURE__ */ jsx93("path", {
       fill: "currentcolor",
       d: "M169.9 280L94.9 448.6 461.2 280 169.9 280zm291.3-48L94.9 63.4 169.9 232 461.2 232zM34.8 465.6L128 256 34.8 46.4C33 42.2 32 37.6 32 33 32 14.8 46.7 0 64.8 0 69.5 0 74.2 1 78.5 3L554.2 222c13.3 6.1 21.8 19.4 21.8 34s-8.5 27.9-21.8 34L78.5 509c-4.3 2-9 3-13.7 3-18.1 0-32.8-14.8-32.8-33 0-4.6 1-9.2 2.8-13.4z"
     })
@@ -13225,18 +13324,18 @@ function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForD
 function createContextScope(scopeName, createContextScopeDeps = []) {
   let defaultContexts = [];
   function createContext32(rootComponentName, defaultContext) {
-    const BaseContext = React42.createContext(defaultContext);
+    const BaseContext = React62.createContext(defaultContext);
     const index = defaultContexts.length;
     defaultContexts = [...defaultContexts, defaultContext];
     function Provider(props) {
       const { scope, children, ...context } = props;
       const Context = scope?.[scopeName][index] || BaseContext;
-      const value = React42.useMemo(() => context, Object.values(context));
-      return /* @__PURE__ */ jsx83(Context.Provider, { value, children });
+      const value = React62.useMemo(() => context, Object.values(context));
+      return /* @__PURE__ */ jsx103(Context.Provider, { value, children });
     }
     function useContext210(consumerName, scope) {
       const Context = scope?.[scopeName][index] || BaseContext;
-      const context = React42.useContext(Context);
+      const context = React62.useContext(Context);
       if (context)
         return context;
       if (defaultContext !== undefined)
@@ -13248,11 +13347,11 @@ function createContextScope(scopeName, createContextScopeDeps = []) {
   }
   const createScope = () => {
     const scopeContexts = defaultContexts.map((defaultContext) => {
-      return React42.createContext(defaultContext);
+      return React62.createContext(defaultContext);
     });
     return function useScope(scope) {
       const contexts = scope?.[scopeName] || scopeContexts;
-      return React42.useMemo(() => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }), [scope, contexts]);
+      return React62.useMemo(() => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }), [scope, contexts]);
     };
   };
   createScope.scopeName = scopeName;
@@ -13273,7 +13372,7 @@ function composeContextScopes(...scopes) {
         const currentScope = scopeProps[`__scope${scopeName}`];
         return { ...nextScopes2, ...currentScope };
       }, {});
-      return React42.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
+      return React62.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
     };
   };
   createScope.scopeName = baseScope.scopeName;
@@ -13290,45 +13389,45 @@ function composeRefs(...refs) {
   return (node) => refs.forEach((ref) => setRef(ref, node));
 }
 function useComposedRefs(...refs) {
-  return React52.useCallback(composeRefs(...refs), refs);
+  return React72.useCallback(composeRefs(...refs), refs);
 }
-var Slot = React62.forwardRef((props, forwardedRef) => {
+var Slot = React8.forwardRef((props, forwardedRef) => {
   const { children, ...slotProps } = props;
-  const childrenArray = React62.Children.toArray(children);
+  const childrenArray = React8.Children.toArray(children);
   const slottable = childrenArray.find(isSlottable);
   if (slottable) {
     const newElement = slottable.props.children;
     const newChildren = childrenArray.map((child) => {
       if (child === slottable) {
-        if (React62.Children.count(newElement) > 1)
-          return React62.Children.only(null);
-        return React62.isValidElement(newElement) ? newElement.props.children : null;
+        if (React8.Children.count(newElement) > 1)
+          return React8.Children.only(null);
+        return React8.isValidElement(newElement) ? newElement.props.children : null;
       } else {
         return child;
       }
     });
-    return /* @__PURE__ */ jsx93(SlotClone, { ...slotProps, ref: forwardedRef, children: React62.isValidElement(newElement) ? React62.cloneElement(newElement, undefined, newChildren) : null });
+    return /* @__PURE__ */ jsx112(SlotClone, { ...slotProps, ref: forwardedRef, children: React8.isValidElement(newElement) ? React8.cloneElement(newElement, undefined, newChildren) : null });
   }
-  return /* @__PURE__ */ jsx93(SlotClone, { ...slotProps, ref: forwardedRef, children });
+  return /* @__PURE__ */ jsx112(SlotClone, { ...slotProps, ref: forwardedRef, children });
 });
 Slot.displayName = "Slot";
-var SlotClone = React62.forwardRef((props, forwardedRef) => {
+var SlotClone = React8.forwardRef((props, forwardedRef) => {
   const { children, ...slotProps } = props;
-  if (React62.isValidElement(children)) {
+  if (React8.isValidElement(children)) {
     const childrenRef = getElementRef(children);
-    return React62.cloneElement(children, {
+    return React8.cloneElement(children, {
       ...mergeProps(slotProps, children.props),
       ref: forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef
     });
   }
-  return React62.Children.count(children) > 1 ? React62.Children.only(null) : null;
+  return React8.Children.count(children) > 1 ? React8.Children.only(null) : null;
 });
 SlotClone.displayName = "SlotClone";
 var Slottable = ({ children }) => {
-  return /* @__PURE__ */ jsx93(Fragment2, { children });
+  return /* @__PURE__ */ jsx112(Fragment2, { children });
 };
 function isSlottable(child) {
-  return React62.isValidElement(child) && child.type === Slottable;
+  return React8.isValidElement(child) && child.type === Slottable;
 }
 function mergeProps(slotProps, childProps) {
   const overrideProps = { ...childProps };
@@ -13372,36 +13471,36 @@ function createCollection(name) {
   const [CollectionProviderImpl, useCollectionContext] = createCollectionContext(PROVIDER_NAME, { collectionRef: { current: null }, itemMap: /* @__PURE__ */ new Map });
   const CollectionProvider = (props) => {
     const { scope, children } = props;
-    const ref = React7.useRef(null);
-    const itemMap = React7.useRef(/* @__PURE__ */ new Map).current;
-    return /* @__PURE__ */ jsx103(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
+    const ref = React9.useRef(null);
+    const itemMap = React9.useRef(/* @__PURE__ */ new Map).current;
+    return /* @__PURE__ */ jsx122(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
   };
   CollectionProvider.displayName = PROVIDER_NAME;
   const COLLECTION_SLOT_NAME = name + "CollectionSlot";
-  const CollectionSlot = React7.forwardRef((props, forwardedRef) => {
+  const CollectionSlot = React9.forwardRef((props, forwardedRef) => {
     const { scope, children } = props;
     const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
     const composedRefs = useComposedRefs(forwardedRef, context.collectionRef);
-    return /* @__PURE__ */ jsx103(Slot, { ref: composedRefs, children });
+    return /* @__PURE__ */ jsx122(Slot, { ref: composedRefs, children });
   });
   CollectionSlot.displayName = COLLECTION_SLOT_NAME;
   const ITEM_SLOT_NAME = name + "CollectionItemSlot";
   const ITEM_DATA_ATTR = "data-radix-collection-item";
-  const CollectionItemSlot = React7.forwardRef((props, forwardedRef) => {
+  const CollectionItemSlot = React9.forwardRef((props, forwardedRef) => {
     const { scope, children, ...itemData } = props;
-    const ref = React7.useRef(null);
+    const ref = React9.useRef(null);
     const composedRefs = useComposedRefs(forwardedRef, ref);
     const context = useCollectionContext(ITEM_SLOT_NAME, scope);
-    React7.useEffect(() => {
+    React9.useEffect(() => {
       context.itemMap.set(ref, { ref, ...itemData });
       return () => void context.itemMap.delete(ref);
     });
-    return /* @__PURE__ */ jsx103(Slot, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
+    return /* @__PURE__ */ jsx122(Slot, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
   });
   CollectionItemSlot.displayName = ITEM_SLOT_NAME;
   function useCollection(scope) {
     const context = useCollectionContext(name + "CollectionConsumer", scope);
-    const getItems = React7.useCallback(() => {
+    const getItems = React9.useCallback(() => {
       const collectionNode = context.collectionRef.current;
       if (!collectionNode)
         return [];
@@ -13418,9 +13517,9 @@ function createCollection(name) {
     createCollectionScope
   ];
 }
-var DirectionContext = React8.createContext(undefined);
+var DirectionContext = React10.createContext(undefined);
 function useDirection(localDir) {
-  const globalDir = React8.useContext(DirectionContext);
+  const globalDir = React10.useContext(DirectionContext);
   return localDir || globalDir || "ltr";
 }
 var NODES = [
@@ -13442,13 +13541,13 @@ var NODES = [
   "ul"
 ];
 var Primitive = NODES.reduce((primitive, node) => {
-  const Node2 = React9.forwardRef((props, forwardedRef) => {
+  const Node2 = React112.forwardRef((props, forwardedRef) => {
     const { asChild, ...primitiveProps } = props;
     const Comp = asChild ? Slot : node;
     if (typeof window !== "undefined") {
       window[Symbol.for("radix-ui")] = true;
     }
-    return /* @__PURE__ */ jsx122(Comp, { ...primitiveProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx142(Comp, { ...primitiveProps, ref: forwardedRef });
   });
   Node2.displayName = `Primitive.${node}`;
   return { ...primitive, [node]: Node2 };
@@ -13458,15 +13557,15 @@ function dispatchDiscreteCustomEvent(target, event) {
     ReactDOM.flushSync(() => target.dispatchEvent(event));
 }
 function useCallbackRef(callback) {
-  const callbackRef = React102.useRef(callback);
-  React102.useEffect(() => {
+  const callbackRef = React122.useRef(callback);
+  React122.useEffect(() => {
     callbackRef.current = callback;
   });
-  return React102.useMemo(() => (...args) => callbackRef.current?.(...args), []);
+  return React122.useMemo(() => (...args) => callbackRef.current?.(...args), []);
 }
 function useEscapeKeydown(onEscapeKeyDownProp, ownerDocument = globalThis?.document) {
   const onEscapeKeyDown = useCallbackRef(onEscapeKeyDownProp);
-  React112.useEffect(() => {
+  React13.useEffect(() => {
     const handleKeyDown = (event) => {
       if (event.key === "Escape") {
         onEscapeKeyDown(event);
@@ -13481,12 +13580,12 @@ var CONTEXT_UPDATE = "dismissableLayer.update";
 var POINTER_DOWN_OUTSIDE = "dismissableLayer.pointerDownOutside";
 var FOCUS_OUTSIDE = "dismissableLayer.focusOutside";
 var originalBodyPointerEvents;
-var DismissableLayerContext = React12.createContext({
+var DismissableLayerContext = React14.createContext({
   layers: /* @__PURE__ */ new Set,
   layersWithOutsidePointerEventsDisabled: /* @__PURE__ */ new Set,
   branches: /* @__PURE__ */ new Set
 });
-var DismissableLayer = React12.forwardRef((props, forwardedRef) => {
+var DismissableLayer = React14.forwardRef((props, forwardedRef) => {
   const {
     disableOutsidePointerEvents = false,
     onEscapeKeyDown,
@@ -13496,10 +13595,10 @@ var DismissableLayer = React12.forwardRef((props, forwardedRef) => {
     onDismiss,
     ...layerProps
   } = props;
-  const context = React12.useContext(DismissableLayerContext);
-  const [node, setNode] = React12.useState(null);
+  const context = React14.useContext(DismissableLayerContext);
+  const [node, setNode] = React14.useState(null);
   const ownerDocument = node?.ownerDocument ?? globalThis?.document;
-  const [, force] = React12.useState({});
+  const [, force] = React14.useState({});
   const composedRefs = useComposedRefs(forwardedRef, (node2) => setNode(node2));
   const layers = Array.from(context.layers);
   const [highestLayerWithOutsidePointerEventsDisabled] = [...context.layersWithOutsidePointerEventsDisabled].slice(-1);
@@ -13537,7 +13636,7 @@ var DismissableLayer = React12.forwardRef((props, forwardedRef) => {
       onDismiss();
     }
   }, ownerDocument);
-  React12.useEffect(() => {
+  React14.useEffect(() => {
     if (!node)
       return;
     if (disableOutsidePointerEvents) {
@@ -13555,7 +13654,7 @@ var DismissableLayer = React12.forwardRef((props, forwardedRef) => {
       }
     };
   }, [node, ownerDocument, disableOutsidePointerEvents, context]);
-  React12.useEffect(() => {
+  React14.useEffect(() => {
     return () => {
       if (!node)
         return;
@@ -13564,12 +13663,12 @@ var DismissableLayer = React12.forwardRef((props, forwardedRef) => {
       dispatchUpdate();
     };
   }, [node, context]);
-  React12.useEffect(() => {
+  React14.useEffect(() => {
     const handleUpdate = () => force({});
     document.addEventListener(CONTEXT_UPDATE, handleUpdate);
     return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);
   }, []);
-  return /* @__PURE__ */ jsx132(Primitive.div, {
+  return /* @__PURE__ */ jsx152(Primitive.div, {
     ...layerProps,
     ref: composedRefs,
     style: {
@@ -13583,11 +13682,11 @@ var DismissableLayer = React12.forwardRef((props, forwardedRef) => {
 });
 DismissableLayer.displayName = DISMISSABLE_LAYER_NAME;
 var BRANCH_NAME = "DismissableLayerBranch";
-var DismissableLayerBranch = React12.forwardRef((props, forwardedRef) => {
-  const context = React12.useContext(DismissableLayerContext);
-  const ref = React12.useRef(null);
+var DismissableLayerBranch = React14.forwardRef((props, forwardedRef) => {
+  const context = React14.useContext(DismissableLayerContext);
+  const ref = React14.useRef(null);
   const composedRefs = useComposedRefs(forwardedRef, ref);
-  React12.useEffect(() => {
+  React14.useEffect(() => {
     const node = ref.current;
     if (node) {
       context.branches.add(node);
@@ -13596,14 +13695,14 @@ var DismissableLayerBranch = React12.forwardRef((props, forwardedRef) => {
       };
     }
   }, [context.branches]);
-  return /* @__PURE__ */ jsx132(Primitive.div, { ...props, ref: composedRefs });
+  return /* @__PURE__ */ jsx152(Primitive.div, { ...props, ref: composedRefs });
 });
 DismissableLayerBranch.displayName = BRANCH_NAME;
 function usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis?.document) {
   const handlePointerDownOutside = useCallbackRef(onPointerDownOutside);
-  const isPointerInsideReactTreeRef = React12.useRef(false);
-  const handleClickRef = React12.useRef(() => {});
-  React12.useEffect(() => {
+  const isPointerInsideReactTreeRef = React14.useRef(false);
+  const handleClickRef = React14.useRef(() => {});
+  React14.useEffect(() => {
     const handlePointerDown = (event) => {
       if (event.target && !isPointerInsideReactTreeRef.current) {
         let handleAndDispatchPointerDownOutsideEvent2 = function() {
@@ -13638,8 +13737,8 @@ function usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis?
 }
 function useFocusOutside(onFocusOutside, ownerDocument = globalThis?.document) {
   const handleFocusOutside = useCallbackRef(onFocusOutside);
-  const isFocusInsideReactTreeRef = React12.useRef(false);
-  React12.useEffect(() => {
+  const isFocusInsideReactTreeRef = React14.useRef(false);
+  React14.useEffect(() => {
     const handleFocus = (event) => {
       if (event.target && !isFocusInsideReactTreeRef.current) {
         const eventDetail = { originalEvent: event };
@@ -13673,7 +13772,7 @@ function handleAndDispatchCustomEvent(name, handler, detail, { discrete }) {
 }
 var count = 0;
 function useFocusGuards() {
-  React13.useEffect(() => {
+  React152.useEffect(() => {
     const edgeGuards = document.querySelectorAll("[data-radix-focus-guard]");
     document.body.insertAdjacentElement("afterbegin", edgeGuards[0] ?? createFocusGuard());
     document.body.insertAdjacentElement("beforeend", edgeGuards[1] ?? createFocusGuard());
@@ -13697,7 +13796,7 @@ var AUTOFOCUS_ON_MOUNT = "focusScope.autoFocusOnMount";
 var AUTOFOCUS_ON_UNMOUNT = "focusScope.autoFocusOnUnmount";
 var EVENT_OPTIONS = { bubbles: false, cancelable: true };
 var FOCUS_SCOPE_NAME = "FocusScope";
-var FocusScope = React142.forwardRef((props, forwardedRef) => {
+var FocusScope = React162.forwardRef((props, forwardedRef) => {
   const {
     loop = false,
     trapped = false,
@@ -13705,12 +13804,12 @@ var FocusScope = React142.forwardRef((props, forwardedRef) => {
     onUnmountAutoFocus: onUnmountAutoFocusProp,
     ...scopeProps
   } = props;
-  const [container22, setContainer] = React142.useState(null);
+  const [container22, setContainer] = React162.useState(null);
   const onMountAutoFocus = useCallbackRef(onMountAutoFocusProp);
   const onUnmountAutoFocus = useCallbackRef(onUnmountAutoFocusProp);
-  const lastFocusedElementRef = React142.useRef(null);
+  const lastFocusedElementRef = React162.useRef(null);
   const composedRefs = useComposedRefs(forwardedRef, (node) => setContainer(node));
-  const focusScope = React142.useRef({
+  const focusScope = React162.useRef({
     paused: false,
     pause() {
       this.paused = true;
@@ -13719,7 +13818,7 @@ var FocusScope = React142.forwardRef((props, forwardedRef) => {
       this.paused = false;
     }
   }).current;
-  React142.useEffect(() => {
+  React162.useEffect(() => {
     if (trapped) {
       let handleFocusIn2 = function(event) {
         if (focusScope.paused || !container22)
@@ -13761,7 +13860,7 @@ var FocusScope = React142.forwardRef((props, forwardedRef) => {
       };
     }
   }, [trapped, container22, focusScope.paused]);
-  React142.useEffect(() => {
+  React162.useEffect(() => {
     if (container22) {
       focusScopesStack.add(focusScope);
       const previouslyFocusedElement = document.activeElement;
@@ -13792,7 +13891,7 @@ var FocusScope = React142.forwardRef((props, forwardedRef) => {
       };
     }
   }, [container22, onMountAutoFocus, onUnmountAutoFocus, focusScope]);
-  const handleKeyDown = React142.useCallback((event) => {
+  const handleKeyDown = React162.useCallback((event) => {
     if (!loop && !trapped)
       return;
     if (focusScope.paused)
@@ -13819,7 +13918,7 @@ var FocusScope = React142.forwardRef((props, forwardedRef) => {
       }
     }
   }, [loop, trapped, focusScope.paused]);
-  return /* @__PURE__ */ jsx142(Primitive.div, { tabIndex: -1, ...scopeProps, ref: composedRefs, onKeyDown: handleKeyDown });
+  return /* @__PURE__ */ jsx162(Primitive.div, { tabIndex: -1, ...scopeProps, ref: composedRefs, onKeyDown: handleKeyDown });
 });
 FocusScope.displayName = FOCUS_SCOPE_NAME;
 function focusFirst(candidates, { select = false } = {}) {
@@ -13908,13 +14007,13 @@ function arrayRemove(array, item) {
 function removeLinks(items) {
   return items.filter((item) => item.tagName !== "A");
 }
-var useLayoutEffect22 = Boolean(globalThis?.document) ? React152.useLayoutEffect : () => {};
-var useReactId = React162["useId".toString()] || (() => {
+var useLayoutEffect22 = Boolean(globalThis?.document) ? React172.useLayoutEffect : () => {};
+var useReactId = React18["useId".toString()] || (() => {
   return;
 });
 var count2 = 0;
 function useId(deterministicId) {
-  const [id, setId] = React162.useState(useReactId());
+  const [id, setId] = React18.useState(useReactId());
   useLayoutEffect22(() => {
     if (!deterministicId)
       setId((reactId) => reactId ?? String(count2++));
@@ -15432,7 +15531,7 @@ var computePosition2 = (reference, floating, options) => {
     platform: platformWithCache
   });
 };
-var index = typeof document !== "undefined" ? useLayoutEffect32 : useEffect72;
+var index = typeof document !== "undefined" ? useLayoutEffect32 : useEffect82;
 function deepEqual(a, b) {
   if (a === b) {
     return true;
@@ -15493,7 +15592,7 @@ function roundByDPR(element, value) {
   return Math.round(value * dpr) / dpr;
 }
 function useLatestRef(value) {
-  const ref = React172.useRef(value);
+  const ref = React19.useRef(value);
   index(() => {
     ref.current = value;
   });
@@ -15516,7 +15615,7 @@ function useFloating(options) {
     whileElementsMounted,
     open
   } = options;
-  const [data, setData] = React172.useState({
+  const [data, setData] = React19.useState({
     x: 0,
     y: 0,
     strategy,
@@ -15524,19 +15623,19 @@ function useFloating(options) {
     middlewareData: {},
     isPositioned: false
   });
-  const [latestMiddleware, setLatestMiddleware] = React172.useState(middleware);
+  const [latestMiddleware, setLatestMiddleware] = React19.useState(middleware);
   if (!deepEqual(latestMiddleware, middleware)) {
     setLatestMiddleware(middleware);
   }
-  const [_reference, _setReference] = React172.useState(null);
-  const [_floating, _setFloating] = React172.useState(null);
-  const setReference = React172.useCallback((node) => {
+  const [_reference, _setReference] = React19.useState(null);
+  const [_floating, _setFloating] = React19.useState(null);
+  const setReference = React19.useCallback((node) => {
     if (node !== referenceRef.current) {
       referenceRef.current = node;
       _setReference(node);
     }
   }, []);
-  const setFloating = React172.useCallback((node) => {
+  const setFloating = React19.useCallback((node) => {
     if (node !== floatingRef.current) {
       floatingRef.current = node;
       _setFloating(node);
@@ -15544,13 +15643,13 @@ function useFloating(options) {
   }, []);
   const referenceEl = externalReference || _reference;
   const floatingEl = externalFloating || _floating;
-  const referenceRef = React172.useRef(null);
-  const floatingRef = React172.useRef(null);
-  const dataRef = React172.useRef(data);
+  const referenceRef = React19.useRef(null);
+  const floatingRef = React19.useRef(null);
+  const dataRef = React19.useRef(data);
   const hasWhileElementsMounted = whileElementsMounted != null;
   const whileElementsMountedRef = useLatestRef(whileElementsMounted);
   const platformRef = useLatestRef(platform2);
-  const update = React172.useCallback(() => {
+  const update = React19.useCallback(() => {
     if (!referenceRef.current || !floatingRef.current) {
       return;
     }
@@ -15584,7 +15683,7 @@ function useFloating(options) {
       }));
     }
   }, [open]);
-  const isMountedRef = React172.useRef(false);
+  const isMountedRef = React19.useRef(false);
   index(() => {
     isMountedRef.current = true;
     return () => {
@@ -15603,17 +15702,17 @@ function useFloating(options) {
       update();
     }
   }, [referenceEl, floatingEl, update, whileElementsMountedRef, hasWhileElementsMounted]);
-  const refs = React172.useMemo(() => ({
+  const refs = React19.useMemo(() => ({
     reference: referenceRef,
     floating: floatingRef,
     setReference,
     setFloating
   }), [setReference, setFloating]);
-  const elements = React172.useMemo(() => ({
+  const elements = React19.useMemo(() => ({
     reference: referenceEl,
     floating: floatingEl
   }), [referenceEl, floatingEl]);
-  const floatingStyles = React172.useMemo(() => {
+  const floatingStyles = React19.useMemo(() => {
     const initialStyles = {
       position: strategy,
       left: 0,
@@ -15639,7 +15738,7 @@ function useFloating(options) {
       top: y
     };
   }, [strategy, transform, elements.floating, data.x, data.y]);
-  return React172.useMemo(() => ({
+  return React19.useMemo(() => ({
     ...data,
     update,
     refs,
@@ -15707,22 +15806,22 @@ var arrow3 = (options, deps) => ({
   options: [options, deps]
 });
 var NAME = "Arrow";
-var Arrow = React18.forwardRef((props, forwardedRef) => {
+var Arrow = React20.forwardRef((props, forwardedRef) => {
   const { children, width = 10, height = 5, ...arrowProps } = props;
-  return /* @__PURE__ */ jsx152(Primitive.svg, {
+  return /* @__PURE__ */ jsx172(Primitive.svg, {
     ...arrowProps,
     ref: forwardedRef,
     width,
     height,
     viewBox: "0 0 30 10",
     preserveAspectRatio: "none",
-    children: props.asChild ? children : /* @__PURE__ */ jsx152("polygon", { points: "0,0 30,0 15,10" })
+    children: props.asChild ? children : /* @__PURE__ */ jsx172("polygon", { points: "0,0 30,0 15,10" })
   });
 });
 Arrow.displayName = NAME;
 var Root2 = Arrow;
 function useSize(element) {
-  const [size4, setSize] = React19.useState(undefined);
+  const [size4, setSize] = React212.useState(undefined);
   useLayoutEffect22(() => {
     if (element) {
       setSize({ width: element.offsetWidth, height: element.offsetHeight });
@@ -15760,25 +15859,25 @@ var [createPopperContext, createPopperScope] = createContextScope(POPPER_NAME);
 var [PopperProvider, usePopperContext] = createPopperContext(POPPER_NAME);
 var Popper = (props) => {
   const { __scopePopper, children } = props;
-  const [anchor, setAnchor] = React20.useState(null);
-  return /* @__PURE__ */ jsx162(PopperProvider, { scope: __scopePopper, anchor, onAnchorChange: setAnchor, children });
+  const [anchor, setAnchor] = React22.useState(null);
+  return /* @__PURE__ */ jsx182(PopperProvider, { scope: __scopePopper, anchor, onAnchorChange: setAnchor, children });
 };
 Popper.displayName = POPPER_NAME;
 var ANCHOR_NAME = "PopperAnchor";
-var PopperAnchor = React20.forwardRef((props, forwardedRef) => {
+var PopperAnchor = React22.forwardRef((props, forwardedRef) => {
   const { __scopePopper, virtualRef, ...anchorProps } = props;
   const context = usePopperContext(ANCHOR_NAME, __scopePopper);
-  const ref = React20.useRef(null);
+  const ref = React22.useRef(null);
   const composedRefs = useComposedRefs(forwardedRef, ref);
-  React20.useEffect(() => {
+  React22.useEffect(() => {
     context.onAnchorChange(virtualRef?.current || ref.current);
   });
-  return virtualRef ? null : /* @__PURE__ */ jsx162(Primitive.div, { ...anchorProps, ref: composedRefs });
+  return virtualRef ? null : /* @__PURE__ */ jsx182(Primitive.div, { ...anchorProps, ref: composedRefs });
 });
 PopperAnchor.displayName = ANCHOR_NAME;
 var CONTENT_NAME = "PopperContent";
 var [PopperContentProvider, useContentContext] = createPopperContext(CONTENT_NAME);
-var PopperContent = React20.forwardRef((props, forwardedRef) => {
+var PopperContent = React22.forwardRef((props, forwardedRef) => {
   const {
     __scopePopper,
     side = "bottom",
@@ -15796,9 +15895,9 @@ var PopperContent = React20.forwardRef((props, forwardedRef) => {
     ...contentProps
   } = props;
   const context = usePopperContext(CONTENT_NAME, __scopePopper);
-  const [content, setContent] = React20.useState(null);
+  const [content, setContent] = React22.useState(null);
   const composedRefs = useComposedRefs(forwardedRef, (node) => setContent(node));
-  const [arrow4, setArrow] = React20.useState(null);
+  const [arrow4, setArrow] = React22.useState(null);
   const arrowSize = useSize(arrow4);
   const arrowWidth = arrowSize?.width ?? 0;
   const arrowHeight = arrowSize?.height ?? 0;
@@ -15858,12 +15957,12 @@ var PopperContent = React20.forwardRef((props, forwardedRef) => {
   const arrowX = middlewareData.arrow?.x;
   const arrowY = middlewareData.arrow?.y;
   const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;
-  const [contentZIndex, setContentZIndex] = React20.useState();
+  const [contentZIndex, setContentZIndex] = React22.useState();
   useLayoutEffect22(() => {
     if (content)
       setContentZIndex(window.getComputedStyle(content).zIndex);
   }, [content]);
-  return /* @__PURE__ */ jsx162("div", {
+  return /* @__PURE__ */ jsx182("div", {
     ref: refs.setFloating,
     "data-radix-popper-content-wrapper": "",
     style: {
@@ -15881,14 +15980,14 @@ var PopperContent = React20.forwardRef((props, forwardedRef) => {
       }
     },
     dir: props.dir,
-    children: /* @__PURE__ */ jsx162(PopperContentProvider, {
+    children: /* @__PURE__ */ jsx182(PopperContentProvider, {
       scope: __scopePopper,
       placedSide,
       onArrowChange: setArrow,
       arrowX,
       arrowY,
       shouldHideArrow: cannotCenterArrow,
-      children: /* @__PURE__ */ jsx162(Primitive.div, {
+      children: /* @__PURE__ */ jsx182(Primitive.div, {
         "data-side": placedSide,
         "data-align": placedAlign,
         ...contentProps,
@@ -15909,11 +16008,11 @@ var OPPOSITE_SIDE = {
   bottom: "top",
   left: "right"
 };
-var PopperArrow = React20.forwardRef(function PopperArrow2(props, forwardedRef) {
+var PopperArrow = React22.forwardRef(function PopperArrow2(props, forwardedRef) {
   const { __scopePopper, ...arrowProps } = props;
   const contentContext = useContentContext(ARROW_NAME, __scopePopper);
   const baseSide = OPPOSITE_SIDE[contentContext.placedSide];
-  return /* @__PURE__ */ jsx162("span", {
+  return /* @__PURE__ */ jsx182("span", {
     ref: contentContext.onArrowChange,
     style: {
       position: "absolute",
@@ -15934,7 +16033,7 @@ var PopperArrow = React20.forwardRef(function PopperArrow2(props, forwardedRef)
       }[contentContext.placedSide],
       visibility: contentContext.shouldHideArrow ? "hidden" : undefined
     },
-    children: /* @__PURE__ */ jsx162(Root2, {
+    children: /* @__PURE__ */ jsx182(Root2, {
       ...arrowProps,
       ref: forwardedRef,
       style: {
@@ -15988,12 +16087,12 @@ var Anchor = PopperAnchor;
 var Content = PopperContent;
 var Arrow2 = PopperArrow;
 var PORTAL_NAME = "Portal";
-var Portal = React212.forwardRef((props, forwardedRef) => {
+var Portal = React23.forwardRef((props, forwardedRef) => {
   const { container: containerProp, ...portalProps } = props;
-  const [mounted, setMounted] = React212.useState(false);
+  const [mounted, setMounted] = React23.useState(false);
   useLayoutEffect22(() => setMounted(true), []);
   const container22 = containerProp || mounted && globalThis?.document?.body;
-  return container22 ? ReactDOM3.createPortal(/* @__PURE__ */ jsx172(Primitive.div, { ...portalProps, ref: forwardedRef }), container22) : null;
+  return container22 ? ReactDOM3.createPortal(/* @__PURE__ */ jsx192(Primitive.div, { ...portalProps, ref: forwardedRef }), container22) : null;
 });
 Portal.displayName = PORTAL_NAME;
 function useControllableState({
@@ -16005,7 +16104,7 @@ function useControllableState({
   const isControlled = prop !== undefined;
   const value = isControlled ? prop : uncontrolledProp;
   const handleChange = useCallbackRef(onChange);
-  const setValue = React22.useCallback((nextValue) => {
+  const setValue = React24.useCallback((nextValue) => {
     if (isControlled) {
       const setter = nextValue;
       const value2 = typeof nextValue === "function" ? setter(prop) : nextValue;
@@ -16021,11 +16120,11 @@ function useUncontrolledState({
   defaultProp,
   onChange
 }) {
-  const uncontrolledState = React22.useState(defaultProp);
+  const uncontrolledState = React24.useState(defaultProp);
   const [value] = uncontrolledState;
-  const prevValueRef = React22.useRef(value);
+  const prevValueRef = React24.useRef(value);
   const handleChange = useCallbackRef(onChange);
-  React22.useEffect(() => {
+  React24.useEffect(() => {
     if (prevValueRef.current !== value) {
       handleChange(value);
       prevValueRef.current = value;
@@ -16034,8 +16133,8 @@ function useUncontrolledState({
   return uncontrolledState;
 }
 function usePrevious(value) {
-  const ref = React23.useRef({ value, previous: value });
-  return React23.useMemo(() => {
+  const ref = React252.useRef({ value, previous: value });
+  return React252.useMemo(() => {
     if (ref.current.value !== value) {
       ref.current.previous = ref.current.value;
       ref.current.value = value;
@@ -16044,8 +16143,8 @@ function usePrevious(value) {
   }, [value]);
 }
 var NAME2 = "VisuallyHidden";
-var VisuallyHidden = React24.forwardRef((props, forwardedRef) => {
-  return /* @__PURE__ */ jsx182(Primitive.span, {
+var VisuallyHidden = React26.forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx202(Primitive.span, {
     ...props,
     ref: forwardedRef,
     style: {
@@ -16252,7 +16351,7 @@ function useCallbackRef2(initialValue, callback) {
   ref.callback = callback;
   return ref.facade;
 }
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React252.useLayoutEffect : React252.useEffect;
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React272.useLayoutEffect : React272.useEffect;
 var currentValues = new WeakMap;
 function useMergeRefs(refs, defaultValue) {
   var callbackRef = useCallbackRef2(defaultValue || null, function(newValue) {
@@ -16374,7 +16473,7 @@ var SideCar = function(_a) {
   if (!Target) {
     throw new Error("Sidecar medium not found");
   }
-  return React26.createElement(Target, __assign({}, rest));
+  return React28.createElement(Target, __assign({}, rest));
 };
 SideCar.isSideCarExport = true;
 function exportSidecar(medium, exported) {
@@ -16385,9 +16484,9 @@ var effectCar = createSidecarMedium();
 var nothing = function() {
   return;
 };
-var RemoveScroll = React272.forwardRef(function(props, parentRef) {
-  var ref = React272.useRef(null);
-  var _a = React272.useState({
+var RemoveScroll = React29.forwardRef(function(props, parentRef) {
+  var ref = React29.useRef(null);
+  var _a = React29.useState({
     onScrollCapture: nothing,
     onWheelCapture: nothing,
     onTouchMoveCapture: nothing
@@ -16396,7 +16495,7 @@ var RemoveScroll = React272.forwardRef(function(props, parentRef) {
   var SideCar2 = sideCar;
   var containerRef = useMergeRefs([ref, parentRef]);
   var containerProps = __assign(__assign({}, rest), callbacks);
-  return React272.createElement(React272.Fragment, null, enabled && React272.createElement(SideCar2, { sideCar: effectCar, removeScrollBar, shards, noIsolation, inert, setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref, gapMode }), forwardProps ? React272.cloneElement(React272.Children.only(children), __assign(__assign({}, containerProps), { ref: containerRef })) : React272.createElement(Container, __assign({}, containerProps, { className, ref: containerRef }), children));
+  return React29.createElement(React29.Fragment, null, enabled && React29.createElement(SideCar2, { sideCar: effectCar, removeScrollBar, shards, noIsolation, inert, setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref, gapMode }), forwardProps ? React29.cloneElement(React29.Children.only(children), __assign(__assign({}, containerProps), { ref: containerRef })) : React29.createElement(Container, __assign({}, containerProps, { className, ref: containerRef }), children));
 });
 RemoveScroll.defaultProps = {
   enabled: true,
@@ -16464,7 +16563,7 @@ var stylesheetSingleton = function() {
 var styleHookSingleton = function() {
   var sheet = stylesheetSingleton();
   return function(styles, isDynamic) {
-    React28.useEffect(function() {
+    React30.useEffect(function() {
       sheet.add(styles);
       return function() {
         sheet.remove();
@@ -16569,7 +16668,7 @@ var getCurrentUseCounter = function() {
   return isFinite(counter) ? counter : 0;
 };
 var useLockAttribute = function() {
-  React29.useEffect(function() {
+  React312.useEffect(function() {
     document.body.setAttribute(lockAttribute, (getCurrentUseCounter() + 1).toString());
     return function() {
       var newCounter = getCurrentUseCounter() - 1;
@@ -16584,10 +16683,10 @@ var useLockAttribute = function() {
 var RemoveScrollBar = function(_a) {
   var { noRelative, noImportant, gapMode: _b } = _a, gapMode = _b === undefined ? "margin" : _b;
   useLockAttribute();
-  var gap = React29.useMemo(function() {
+  var gap = React312.useMemo(function() {
     return getGapWidth(gapMode);
   }, [gapMode]);
-  return React29.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? "!important" : "") });
+  return React312.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? "!important" : "") });
 };
 var passiveSupported = false;
 if (typeof window !== "undefined") {
@@ -16714,16 +16813,16 @@ var generateStyle = function(id) {
 var idCounter = 0;
 var lockStack = [];
 function RemoveScrollSideCar(props) {
-  var shouldPreventQueue = React30.useRef([]);
-  var touchStartRef = React30.useRef([0, 0]);
-  var activeAxis = React30.useRef();
-  var id = React30.useState(idCounter++)[0];
-  var Style2 = React30.useState(styleSingleton)[0];
-  var lastProps = React30.useRef(props);
-  React30.useEffect(function() {
+  var shouldPreventQueue = React322.useRef([]);
+  var touchStartRef = React322.useRef([0, 0]);
+  var activeAxis = React322.useRef();
+  var id = React322.useState(idCounter++)[0];
+  var Style2 = React322.useState(styleSingleton)[0];
+  var lastProps = React322.useRef(props);
+  React322.useEffect(function() {
     lastProps.current = props;
   }, [props]);
-  React30.useEffect(function() {
+  React322.useEffect(function() {
     if (props.inert) {
       document.body.classList.add("block-interactivity-".concat(id));
       var allow_1 = __spreadArray([props.lockRef.current], (props.shards || []).map(extractRef), true).filter(Boolean);
@@ -16739,7 +16838,7 @@ function RemoveScrollSideCar(props) {
     }
     return;
   }, [props.inert, props.lockRef.current, props.shards]);
-  var shouldCancelEvent = React30.useCallback(function(event, parent) {
+  var shouldCancelEvent = React322.useCallback(function(event, parent) {
     if ("touches" in event && event.touches.length === 2) {
       return !lastProps.current.allowPinchZoom;
     }
@@ -16775,7 +16874,7 @@ function RemoveScrollSideCar(props) {
     var cancelingAxis = activeAxis.current || currentAxis;
     return handleScroll(cancelingAxis, parent, event, cancelingAxis === "h" ? deltaX : deltaY, true);
   }, []);
-  var shouldPrevent = React30.useCallback(function(_event) {
+  var shouldPrevent = React322.useCallback(function(_event) {
     var event = _event;
     if (!lockStack.length || lockStack[lockStack.length - 1] !== Style2) {
       return;
@@ -16802,7 +16901,7 @@ function RemoveScrollSideCar(props) {
       }
     }
   }, []);
-  var shouldCancel = React30.useCallback(function(name, delta, target, should) {
+  var shouldCancel = React322.useCallback(function(name, delta, target, should) {
     var event = { name, delta, target, should, shadowParent: getOutermostShadowParent(target) };
     shouldPreventQueue.current.push(event);
     setTimeout(function() {
@@ -16811,17 +16910,17 @@ function RemoveScrollSideCar(props) {
       });
     }, 1);
   }, []);
-  var scrollTouchStart = React30.useCallback(function(event) {
+  var scrollTouchStart = React322.useCallback(function(event) {
     touchStartRef.current = getTouchXY(event);
     activeAxis.current = undefined;
   }, []);
-  var scrollWheel = React30.useCallback(function(event) {
+  var scrollWheel = React322.useCallback(function(event) {
     shouldCancel(event.type, getDeltaXY(event), event.target, shouldCancelEvent(event, props.lockRef.current));
   }, []);
-  var scrollTouchMove = React30.useCallback(function(event) {
+  var scrollTouchMove = React322.useCallback(function(event) {
     shouldCancel(event.type, getTouchXY(event), event.target, shouldCancelEvent(event, props.lockRef.current));
   }, []);
-  React30.useEffect(function() {
+  React322.useEffect(function() {
     lockStack.push(Style2);
     props.setCallbacks({
       onScrollCapture: scrollWheel,
@@ -16841,7 +16940,7 @@ function RemoveScrollSideCar(props) {
     };
   }, []);
   var { removeScrollBar, inert } = props;
-  return React30.createElement(React30.Fragment, null, inert ? React30.createElement(Style2, { styles: generateStyle(id) }) : null, removeScrollBar ? React30.createElement(RemoveScrollBar, { gapMode: props.gapMode }) : null);
+  return React322.createElement(React322.Fragment, null, inert ? React322.createElement(Style2, { styles: generateStyle(id) }) : null, removeScrollBar ? React322.createElement(RemoveScrollBar, { gapMode: props.gapMode }) : null);
 }
 function getOutermostShadowParent(node) {
   var shadowParent = null;
@@ -16855,8 +16954,8 @@ function getOutermostShadowParent(node) {
   return shadowParent;
 }
 var sidecar_default = exportSidecar(effectCar, RemoveScrollSideCar);
-var ReactRemoveScroll = React312.forwardRef(function(props, ref) {
-  return React312.createElement(RemoveScroll, __assign({}, props, { ref, sideCar: sidecar_default }));
+var ReactRemoveScroll = React332.forwardRef(function(props, ref) {
+  return React332.createElement(RemoveScroll, __assign({}, props, { ref, sideCar: sidecar_default }));
 });
 ReactRemoveScroll.classNames = RemoveScroll.classNames;
 var Combination_default = ReactRemoveScroll;
@@ -16888,9 +16987,9 @@ var Select = (props) => {
     required
   } = props;
   const popperScope = usePopperScope(__scopeSelect);
-  const [trigger, setTrigger] = React322.useState(null);
-  const [valueNode, setValueNode] = React322.useState(null);
-  const [valueNodeHasChildren, setValueNodeHasChildren] = React322.useState(false);
+  const [trigger, setTrigger] = React34.useState(null);
+  const [valueNode, setValueNode] = React34.useState(null);
+  const [valueNodeHasChildren, setValueNodeHasChildren] = React34.useState(false);
   const direction = useDirection(dir);
   const [open = false, setOpen] = useControllableState({
     prop: openProp,
@@ -16902,11 +17001,11 @@ var Select = (props) => {
     defaultProp: defaultValue,
     onChange: onValueChange
   });
-  const triggerPointerDownPosRef = React322.useRef(null);
+  const triggerPointerDownPosRef = React34.useRef(null);
   const isFormControl = trigger ? Boolean(trigger.closest("form")) : true;
-  const [nativeOptionsSet, setNativeOptionsSet] = React322.useState(/* @__PURE__ */ new Set);
+  const [nativeOptionsSet, setNativeOptionsSet] = React34.useState(/* @__PURE__ */ new Set);
   const nativeSelectKey = Array.from(nativeOptionsSet).map((option) => option.props.value).join(";");
-  return /* @__PURE__ */ jsx192(Root22, { ...popperScope, children: /* @__PURE__ */ jsxs32(SelectProvider, {
+  return /* @__PURE__ */ jsx212(Root22, { ...popperScope, children: /* @__PURE__ */ jsxs4(SelectProvider, {
     required,
     scope: __scopeSelect,
     trigger,
@@ -16924,12 +17023,12 @@ var Select = (props) => {
     triggerPointerDownPosRef,
     disabled,
     children: [
-      /* @__PURE__ */ jsx192(Collection.Provider, { scope: __scopeSelect, children: /* @__PURE__ */ jsx192(SelectNativeOptionsProvider, {
+      /* @__PURE__ */ jsx212(Collection.Provider, { scope: __scopeSelect, children: /* @__PURE__ */ jsx212(SelectNativeOptionsProvider, {
         scope: props.__scopeSelect,
-        onNativeOptionAdd: React322.useCallback((option) => {
+        onNativeOptionAdd: React34.useCallback((option) => {
           setNativeOptionsSet((prev) => new Set(prev).add(option));
         }, []),
-        onNativeOptionRemove: React322.useCallback((option) => {
+        onNativeOptionRemove: React34.useCallback((option) => {
           setNativeOptionsSet((prev) => {
             const optionsSet = new Set(prev);
             optionsSet.delete(option);
@@ -16938,7 +17037,7 @@ var Select = (props) => {
         }, []),
         children
       }) }),
-      isFormControl ? /* @__PURE__ */ jsxs32(BubbleSelect, {
+      isFormControl ? /* @__PURE__ */ jsxs4(BubbleSelect, {
         "aria-hidden": true,
         required,
         tabIndex: -1,
@@ -16948,7 +17047,7 @@ var Select = (props) => {
         onChange: (event) => setValue(event.target.value),
         disabled,
         children: [
-          value === undefined ? /* @__PURE__ */ jsx192("option", { value: "" }) : null,
+          value === undefined ? /* @__PURE__ */ jsx212("option", { value: "" }) : null,
           Array.from(nativeOptionsSet)
         ]
       }, nativeSelectKey) : null
@@ -16957,7 +17056,7 @@ var Select = (props) => {
 };
 Select.displayName = SELECT_NAME;
 var TRIGGER_NAME = "SelectTrigger";
-var SelectTrigger = React322.forwardRef((props, forwardedRef) => {
+var SelectTrigger = React34.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, disabled = false, ...triggerProps } = props;
   const popperScope = usePopperScope(__scopeSelect);
   const context = useSelectContext(TRIGGER_NAME, __scopeSelect);
@@ -16978,7 +17077,7 @@ var SelectTrigger = React322.forwardRef((props, forwardedRef) => {
       resetTypeahead();
     }
   };
-  return /* @__PURE__ */ jsx192(Anchor, { asChild: true, ...popperScope, children: /* @__PURE__ */ jsx192(Primitive.button, {
+  return /* @__PURE__ */ jsx212(Anchor, { asChild: true, ...popperScope, children: /* @__PURE__ */ jsx212(Primitive.button, {
     type: "button",
     role: "combobox",
     "aria-controls": context.contentId,
@@ -17025,7 +17124,7 @@ var SelectTrigger = React322.forwardRef((props, forwardedRef) => {
 });
 SelectTrigger.displayName = TRIGGER_NAME;
 var VALUE_NAME = "SelectValue";
-var SelectValue = React322.forwardRef((props, forwardedRef) => {
+var SelectValue = React34.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, className, style, children, placeholder = "", ...valueProps } = props;
   const context = useSelectContext(VALUE_NAME, __scopeSelect);
   const { onValueNodeHasChildrenChange } = context;
@@ -17034,43 +17133,43 @@ var SelectValue = React322.forwardRef((props, forwardedRef) => {
   useLayoutEffect22(() => {
     onValueNodeHasChildrenChange(hasChildren);
   }, [onValueNodeHasChildrenChange, hasChildren]);
-  return /* @__PURE__ */ jsx192(Primitive.span, {
+  return /* @__PURE__ */ jsx212(Primitive.span, {
     ...valueProps,
     ref: composedRefs,
     style: { pointerEvents: "none" },
-    children: shouldShowPlaceholder(context.value) ? /* @__PURE__ */ jsx192(Fragment52, { children: placeholder }) : children
+    children: shouldShowPlaceholder(context.value) ? /* @__PURE__ */ jsx212(Fragment52, { children: placeholder }) : children
   });
 });
 SelectValue.displayName = VALUE_NAME;
 var ICON_NAME = "SelectIcon";
-var SelectIcon = React322.forwardRef((props, forwardedRef) => {
+var SelectIcon = React34.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, children, ...iconProps } = props;
-  return /* @__PURE__ */ jsx192(Primitive.span, { "aria-hidden": true, ...iconProps, ref: forwardedRef, children: children || "▼" });
+  return /* @__PURE__ */ jsx212(Primitive.span, { "aria-hidden": true, ...iconProps, ref: forwardedRef, children: children || "▼" });
 });
 SelectIcon.displayName = ICON_NAME;
 var PORTAL_NAME2 = "SelectPortal";
 var SelectPortal = (props) => {
-  return /* @__PURE__ */ jsx192(Portal, { asChild: true, ...props });
+  return /* @__PURE__ */ jsx212(Portal, { asChild: true, ...props });
 };
 SelectPortal.displayName = PORTAL_NAME2;
 var CONTENT_NAME2 = "SelectContent";
-var SelectContent = React322.forwardRef((props, forwardedRef) => {
+var SelectContent = React34.forwardRef((props, forwardedRef) => {
   const context = useSelectContext(CONTENT_NAME2, props.__scopeSelect);
-  const [fragment, setFragment] = React322.useState();
+  const [fragment, setFragment] = React34.useState();
   useLayoutEffect22(() => {
     setFragment(new DocumentFragment);
   }, []);
   if (!context.open) {
     const frag = fragment;
-    return frag ? ReactDOM4.createPortal(/* @__PURE__ */ jsx192(SelectContentProvider, { scope: props.__scopeSelect, children: /* @__PURE__ */ jsx192(Collection.Slot, { scope: props.__scopeSelect, children: /* @__PURE__ */ jsx192("div", { children: props.children }) }) }), frag) : null;
+    return frag ? ReactDOM4.createPortal(/* @__PURE__ */ jsx212(SelectContentProvider, { scope: props.__scopeSelect, children: /* @__PURE__ */ jsx212(Collection.Slot, { scope: props.__scopeSelect, children: /* @__PURE__ */ jsx212("div", { children: props.children }) }) }), frag) : null;
   }
-  return /* @__PURE__ */ jsx192(SelectContentImpl, { ...props, ref: forwardedRef });
+  return /* @__PURE__ */ jsx212(SelectContentImpl, { ...props, ref: forwardedRef });
 });
 SelectContent.displayName = CONTENT_NAME2;
 var CONTENT_MARGIN = 10;
 var [SelectContentProvider, useSelectContentContext] = createSelectContext(CONTENT_NAME2);
 var CONTENT_IMPL_NAME = "SelectContentImpl";
-var SelectContentImpl = React322.forwardRef((props, forwardedRef) => {
+var SelectContentImpl = React34.forwardRef((props, forwardedRef) => {
   const {
     __scopeSelect,
     position = "item-aligned",
@@ -17090,20 +17189,20 @@ var SelectContentImpl = React322.forwardRef((props, forwardedRef) => {
     ...contentProps
   } = props;
   const context = useSelectContext(CONTENT_NAME2, __scopeSelect);
-  const [content, setContent] = React322.useState(null);
-  const [viewport, setViewport] = React322.useState(null);
+  const [content, setContent] = React34.useState(null);
+  const [viewport, setViewport] = React34.useState(null);
   const composedRefs = useComposedRefs(forwardedRef, (node) => setContent(node));
-  const [selectedItem, setSelectedItem] = React322.useState(null);
-  const [selectedItemText, setSelectedItemText] = React322.useState(null);
+  const [selectedItem, setSelectedItem] = React34.useState(null);
+  const [selectedItemText, setSelectedItemText] = React34.useState(null);
   const getItems = useCollection(__scopeSelect);
-  const [isPositioned, setIsPositioned] = React322.useState(false);
-  const firstValidItemFoundRef = React322.useRef(false);
-  React322.useEffect(() => {
+  const [isPositioned, setIsPositioned] = React34.useState(false);
+  const firstValidItemFoundRef = React34.useRef(false);
+  React34.useEffect(() => {
     if (content)
       return hideOthers(content);
   }, [content]);
   useFocusGuards();
-  const focusFirst2 = React322.useCallback((candidates) => {
+  const focusFirst2 = React34.useCallback((candidates) => {
     const [firstItem, ...restItems] = getItems().map((item) => item.ref.current);
     const [lastItem] = restItems.slice(-1);
     const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
@@ -17120,14 +17219,14 @@ var SelectContentImpl = React322.forwardRef((props, forwardedRef) => {
         return;
     }
   }, [getItems, viewport]);
-  const focusSelectedItem = React322.useCallback(() => focusFirst2([selectedItem, content]), [focusFirst2, selectedItem, content]);
-  React322.useEffect(() => {
+  const focusSelectedItem = React34.useCallback(() => focusFirst2([selectedItem, content]), [focusFirst2, selectedItem, content]);
+  React34.useEffect(() => {
     if (isPositioned) {
       focusSelectedItem();
     }
   }, [isPositioned, focusSelectedItem]);
   const { onOpenChange, triggerPointerDownPosRef } = context;
-  React322.useEffect(() => {
+  React34.useEffect(() => {
     if (content) {
       let pointerMoveDelta = { x: 0, y: 0 };
       const handlePointerMove = (event) => {
@@ -17157,7 +17256,7 @@ var SelectContentImpl = React322.forwardRef((props, forwardedRef) => {
       };
     }
   }, [content, onOpenChange, triggerPointerDownPosRef]);
-  React322.useEffect(() => {
+  React34.useEffect(() => {
     const close = () => onOpenChange(false);
     window.addEventListener("blur", close);
     window.addEventListener("resize", close);
@@ -17174,7 +17273,7 @@ var SelectContentImpl = React322.forwardRef((props, forwardedRef) => {
       setTimeout(() => nextItem.ref.current.focus());
     }
   });
-  const itemRefCallback = React322.useCallback((node, value, disabled) => {
+  const itemRefCallback = React34.useCallback((node, value, disabled) => {
     const isFirstValidItem = !firstValidItemFoundRef.current && !disabled;
     const isSelectedItem = context.value !== undefined && context.value === value;
     if (isSelectedItem || isFirstValidItem) {
@@ -17183,8 +17282,8 @@ var SelectContentImpl = React322.forwardRef((props, forwardedRef) => {
         firstValidItemFoundRef.current = true;
     }
   }, [context.value]);
-  const handleItemLeave = React322.useCallback(() => content?.focus(), [content]);
-  const itemTextRefCallback = React322.useCallback((node, value, disabled) => {
+  const handleItemLeave = React34.useCallback(() => content?.focus(), [content]);
+  const itemTextRefCallback = React34.useCallback((node, value, disabled) => {
     const isFirstValidItem = !firstValidItemFoundRef.current && !disabled;
     const isSelectedItem = context.value !== undefined && context.value === value;
     if (isSelectedItem || isFirstValidItem) {
@@ -17204,7 +17303,7 @@ var SelectContentImpl = React322.forwardRef((props, forwardedRef) => {
     hideWhenDetached,
     avoidCollisions
   } : {};
-  return /* @__PURE__ */ jsx192(SelectContentProvider, {
+  return /* @__PURE__ */ jsx212(SelectContentProvider, {
     scope: __scopeSelect,
     content,
     viewport,
@@ -17218,7 +17317,7 @@ var SelectContentImpl = React322.forwardRef((props, forwardedRef) => {
     position,
     isPositioned,
     searchRef,
-    children: /* @__PURE__ */ jsx192(Combination_default, { as: Slot, allowPinchZoom: true, children: /* @__PURE__ */ jsx192(FocusScope, {
+    children: /* @__PURE__ */ jsx212(Combination_default, { as: Slot, allowPinchZoom: true, children: /* @__PURE__ */ jsx212(FocusScope, {
       asChild: true,
       trapped: context.open,
       onMountAutoFocus: (event) => {
@@ -17228,14 +17327,14 @@ var SelectContentImpl = React322.forwardRef((props, forwardedRef) => {
         context.trigger?.focus({ preventScroll: true });
         event.preventDefault();
       }),
-      children: /* @__PURE__ */ jsx192(DismissableLayer, {
+      children: /* @__PURE__ */ jsx212(DismissableLayer, {
         asChild: true,
         disableOutsidePointerEvents: true,
         onEscapeKeyDown,
         onPointerDownOutside,
         onFocusOutside: (event) => event.preventDefault(),
         onDismiss: () => context.onOpenChange(false),
-        children: /* @__PURE__ */ jsx192(SelectPosition, {
+        children: /* @__PURE__ */ jsx212(SelectPosition, {
           role: "listbox",
           id: context.contentId,
           "data-state": context.open ? "open" : "closed",
@@ -17279,18 +17378,18 @@ var SelectContentImpl = React322.forwardRef((props, forwardedRef) => {
 });
 SelectContentImpl.displayName = CONTENT_IMPL_NAME;
 var ITEM_ALIGNED_POSITION_NAME = "SelectItemAlignedPosition";
-var SelectItemAlignedPosition = React322.forwardRef((props, forwardedRef) => {
+var SelectItemAlignedPosition = React34.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, onPlaced, ...popperProps } = props;
   const context = useSelectContext(CONTENT_NAME2, __scopeSelect);
   const contentContext = useSelectContentContext(CONTENT_NAME2, __scopeSelect);
-  const [contentWrapper, setContentWrapper] = React322.useState(null);
-  const [content, setContent] = React322.useState(null);
+  const [contentWrapper, setContentWrapper] = React34.useState(null);
+  const [content, setContent] = React34.useState(null);
   const composedRefs = useComposedRefs(forwardedRef, (node) => setContent(node));
   const getItems = useCollection(__scopeSelect);
-  const shouldExpandOnScrollRef = React322.useRef(false);
-  const shouldRepositionRef = React322.useRef(true);
+  const shouldExpandOnScrollRef = React34.useRef(false);
+  const shouldRepositionRef = React34.useRef(true);
   const { viewport, selectedItem, selectedItemText, focusSelectedItem } = contentContext;
-  const position = React322.useCallback(() => {
+  const position = React34.useCallback(() => {
     if (context.trigger && context.valueNode && contentWrapper && content && viewport && selectedItem && selectedItemText) {
       const triggerRect = context.trigger.getBoundingClientRect();
       const contentRect = content.getBoundingClientRect();
@@ -17371,24 +17470,24 @@ var SelectItemAlignedPosition = React322.forwardRef((props, forwardedRef) => {
     onPlaced
   ]);
   useLayoutEffect22(() => position(), [position]);
-  const [contentZIndex, setContentZIndex] = React322.useState();
+  const [contentZIndex, setContentZIndex] = React34.useState();
   useLayoutEffect22(() => {
     if (content)
       setContentZIndex(window.getComputedStyle(content).zIndex);
   }, [content]);
-  const handleScrollButtonChange = React322.useCallback((node) => {
+  const handleScrollButtonChange = React34.useCallback((node) => {
     if (node && shouldRepositionRef.current === true) {
       position();
       focusSelectedItem?.();
       shouldRepositionRef.current = false;
     }
   }, [position, focusSelectedItem]);
-  return /* @__PURE__ */ jsx192(SelectViewportProvider, {
+  return /* @__PURE__ */ jsx212(SelectViewportProvider, {
     scope: __scopeSelect,
     contentWrapper,
     shouldExpandOnScrollRef,
     onScrollButtonChange: handleScrollButtonChange,
-    children: /* @__PURE__ */ jsx192("div", {
+    children: /* @__PURE__ */ jsx212("div", {
       ref: setContentWrapper,
       style: {
         display: "flex",
@@ -17396,7 +17495,7 @@ var SelectItemAlignedPosition = React322.forwardRef((props, forwardedRef) => {
         position: "fixed",
         zIndex: contentZIndex
       },
-      children: /* @__PURE__ */ jsx192(Primitive.div, {
+      children: /* @__PURE__ */ jsx212(Primitive.div, {
         ...popperProps,
         ref: composedRefs,
         style: {
@@ -17410,7 +17509,7 @@ var SelectItemAlignedPosition = React322.forwardRef((props, forwardedRef) => {
 });
 SelectItemAlignedPosition.displayName = ITEM_ALIGNED_POSITION_NAME;
 var POPPER_POSITION_NAME = "SelectPopperPosition";
-var SelectPopperPosition = React322.forwardRef((props, forwardedRef) => {
+var SelectPopperPosition = React34.forwardRef((props, forwardedRef) => {
   const {
     __scopeSelect,
     align = "start",
@@ -17418,7 +17517,7 @@ var SelectPopperPosition = React322.forwardRef((props, forwardedRef) => {
     ...popperProps
   } = props;
   const popperScope = usePopperScope(__scopeSelect);
-  return /* @__PURE__ */ jsx192(Content, {
+  return /* @__PURE__ */ jsx212(Content, {
     ...popperScope,
     ...popperProps,
     ref: forwardedRef,
@@ -17440,20 +17539,20 @@ var SelectPopperPosition = React322.forwardRef((props, forwardedRef) => {
 SelectPopperPosition.displayName = POPPER_POSITION_NAME;
 var [SelectViewportProvider, useSelectViewportContext] = createSelectContext(CONTENT_NAME2, {});
 var VIEWPORT_NAME = "SelectViewport";
-var SelectViewport = React322.forwardRef((props, forwardedRef) => {
+var SelectViewport = React34.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, nonce, ...viewportProps } = props;
   const contentContext = useSelectContentContext(VIEWPORT_NAME, __scopeSelect);
   const viewportContext = useSelectViewportContext(VIEWPORT_NAME, __scopeSelect);
   const composedRefs = useComposedRefs(forwardedRef, contentContext.onViewportChange);
-  const prevScrollTopRef = React322.useRef(0);
-  return /* @__PURE__ */ jsxs32(Fragment52, { children: [
-    /* @__PURE__ */ jsx192("style", {
+  const prevScrollTopRef = React34.useRef(0);
+  return /* @__PURE__ */ jsxs4(Fragment52, { children: [
+    /* @__PURE__ */ jsx212("style", {
       dangerouslySetInnerHTML: {
         __html: `[data-radix-select-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-select-viewport]::-webkit-scrollbar{display:none}`
       },
       nonce
     }),
-    /* @__PURE__ */ jsx192(Collection.Slot, { scope: __scopeSelect, children: /* @__PURE__ */ jsx192(Primitive.div, {
+    /* @__PURE__ */ jsx212(Collection.Slot, { scope: __scopeSelect, children: /* @__PURE__ */ jsx212(Primitive.div, {
       "data-radix-select-viewport": "",
       role: "presentation",
       ...viewportProps,
@@ -17494,22 +17593,22 @@ var SelectViewport = React322.forwardRef((props, forwardedRef) => {
 SelectViewport.displayName = VIEWPORT_NAME;
 var GROUP_NAME = "SelectGroup";
 var [SelectGroupContextProvider, useSelectGroupContext] = createSelectContext(GROUP_NAME);
-var SelectGroup = React322.forwardRef((props, forwardedRef) => {
+var SelectGroup = React34.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...groupProps } = props;
   const groupId = useId();
-  return /* @__PURE__ */ jsx192(SelectGroupContextProvider, { scope: __scopeSelect, id: groupId, children: /* @__PURE__ */ jsx192(Primitive.div, { role: "group", "aria-labelledby": groupId, ...groupProps, ref: forwardedRef }) });
+  return /* @__PURE__ */ jsx212(SelectGroupContextProvider, { scope: __scopeSelect, id: groupId, children: /* @__PURE__ */ jsx212(Primitive.div, { role: "group", "aria-labelledby": groupId, ...groupProps, ref: forwardedRef }) });
 });
 SelectGroup.displayName = GROUP_NAME;
 var LABEL_NAME = "SelectLabel";
-var SelectLabel = React322.forwardRef((props, forwardedRef) => {
+var SelectLabel = React34.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...labelProps } = props;
   const groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect);
-  return /* @__PURE__ */ jsx192(Primitive.div, { id: groupContext.id, ...labelProps, ref: forwardedRef });
+  return /* @__PURE__ */ jsx212(Primitive.div, { id: groupContext.id, ...labelProps, ref: forwardedRef });
 });
 SelectLabel.displayName = LABEL_NAME;
 var ITEM_NAME = "SelectItem";
 var [SelectItemContextProvider, useSelectItemContext] = createSelectContext(ITEM_NAME);
-var SelectItem = React322.forwardRef((props, forwardedRef) => {
+var SelectItem = React34.forwardRef((props, forwardedRef) => {
   const {
     __scopeSelect,
     value,
@@ -17520,8 +17619,8 @@ var SelectItem = React322.forwardRef((props, forwardedRef) => {
   const context = useSelectContext(ITEM_NAME, __scopeSelect);
   const contentContext = useSelectContentContext(ITEM_NAME, __scopeSelect);
   const isSelected = context.value === value;
-  const [textValue, setTextValue] = React322.useState(textValueProp ?? "");
-  const [isFocused, setIsFocused] = React322.useState(false);
+  const [textValue, setTextValue] = React34.useState(textValueProp ?? "");
+  const [isFocused, setIsFocused] = React34.useState(false);
   const composedRefs = useComposedRefs(forwardedRef, (node) => contentContext.itemRefCallback?.(node, value, disabled));
   const textId = useId();
   const handleSelect = () => {
@@ -17533,21 +17632,21 @@ var SelectItem = React322.forwardRef((props, forwardedRef) => {
   if (value === "") {
     throw new Error("A <Select.Item /> must have a value prop that is not an empty string. This is because the Select value can be set to an empty string to clear the selection and show the placeholder.");
   }
-  return /* @__PURE__ */ jsx192(SelectItemContextProvider, {
+  return /* @__PURE__ */ jsx212(SelectItemContextProvider, {
     scope: __scopeSelect,
     value,
     disabled,
     textId,
     isSelected,
-    onItemTextChange: React322.useCallback((node) => {
+    onItemTextChange: React34.useCallback((node) => {
       setTextValue((prevTextValue) => prevTextValue || (node?.textContent ?? "").trim());
     }, []),
-    children: /* @__PURE__ */ jsx192(Collection.ItemSlot, {
+    children: /* @__PURE__ */ jsx212(Collection.ItemSlot, {
       scope: __scopeSelect,
       value,
       disabled,
       textValue,
-      children: /* @__PURE__ */ jsx192(Primitive.div, {
+      children: /* @__PURE__ */ jsx212(Primitive.div, {
         role: "option",
         "aria-labelledby": textId,
         "data-highlighted": isFocused ? "" : undefined,
@@ -17588,39 +17687,39 @@ var SelectItem = React322.forwardRef((props, forwardedRef) => {
 });
 SelectItem.displayName = ITEM_NAME;
 var ITEM_TEXT_NAME = "SelectItemText";
-var SelectItemText = React322.forwardRef((props, forwardedRef) => {
+var SelectItemText = React34.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, className, style, ...itemTextProps } = props;
   const context = useSelectContext(ITEM_TEXT_NAME, __scopeSelect);
   const contentContext = useSelectContentContext(ITEM_TEXT_NAME, __scopeSelect);
   const itemContext = useSelectItemContext(ITEM_TEXT_NAME, __scopeSelect);
   const nativeOptionsContext = useSelectNativeOptionsContext(ITEM_TEXT_NAME, __scopeSelect);
-  const [itemTextNode, setItemTextNode] = React322.useState(null);
+  const [itemTextNode, setItemTextNode] = React34.useState(null);
   const composedRefs = useComposedRefs(forwardedRef, (node) => setItemTextNode(node), itemContext.onItemTextChange, (node) => contentContext.itemTextRefCallback?.(node, itemContext.value, itemContext.disabled));
   const textContent = itemTextNode?.textContent;
-  const nativeOption = React322.useMemo(() => /* @__PURE__ */ jsx192("option", { value: itemContext.value, disabled: itemContext.disabled, children: textContent }, itemContext.value), [itemContext.disabled, itemContext.value, textContent]);
+  const nativeOption = React34.useMemo(() => /* @__PURE__ */ jsx212("option", { value: itemContext.value, disabled: itemContext.disabled, children: textContent }, itemContext.value), [itemContext.disabled, itemContext.value, textContent]);
   const { onNativeOptionAdd, onNativeOptionRemove } = nativeOptionsContext;
   useLayoutEffect22(() => {
     onNativeOptionAdd(nativeOption);
     return () => onNativeOptionRemove(nativeOption);
   }, [onNativeOptionAdd, onNativeOptionRemove, nativeOption]);
-  return /* @__PURE__ */ jsxs32(Fragment52, { children: [
-    /* @__PURE__ */ jsx192(Primitive.span, { id: itemContext.textId, ...itemTextProps, ref: composedRefs }),
+  return /* @__PURE__ */ jsxs4(Fragment52, { children: [
+    /* @__PURE__ */ jsx212(Primitive.span, { id: itemContext.textId, ...itemTextProps, ref: composedRefs }),
     itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren ? ReactDOM4.createPortal(itemTextProps.children, context.valueNode) : null
   ] });
 });
 SelectItemText.displayName = ITEM_TEXT_NAME;
 var ITEM_INDICATOR_NAME = "SelectItemIndicator";
-var SelectItemIndicator = React322.forwardRef((props, forwardedRef) => {
+var SelectItemIndicator = React34.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...itemIndicatorProps } = props;
   const itemContext = useSelectItemContext(ITEM_INDICATOR_NAME, __scopeSelect);
-  return itemContext.isSelected ? /* @__PURE__ */ jsx192(Primitive.span, { "aria-hidden": true, ...itemIndicatorProps, ref: forwardedRef }) : null;
+  return itemContext.isSelected ? /* @__PURE__ */ jsx212(Primitive.span, { "aria-hidden": true, ...itemIndicatorProps, ref: forwardedRef }) : null;
 });
 SelectItemIndicator.displayName = ITEM_INDICATOR_NAME;
 var SCROLL_UP_BUTTON_NAME = "SelectScrollUpButton";
-var SelectScrollUpButton = React322.forwardRef((props, forwardedRef) => {
+var SelectScrollUpButton = React34.forwardRef((props, forwardedRef) => {
   const contentContext = useSelectContentContext(SCROLL_UP_BUTTON_NAME, props.__scopeSelect);
   const viewportContext = useSelectViewportContext(SCROLL_UP_BUTTON_NAME, props.__scopeSelect);
-  const [canScrollUp, setCanScrollUp] = React322.useState(false);
+  const [canScrollUp, setCanScrollUp] = React34.useState(false);
   const composedRefs = useComposedRefs(forwardedRef, viewportContext.onScrollButtonChange);
   useLayoutEffect22(() => {
     if (contentContext.viewport && contentContext.isPositioned) {
@@ -17635,7 +17734,7 @@ var SelectScrollUpButton = React322.forwardRef((props, forwardedRef) => {
       return () => viewport.removeEventListener("scroll", handleScroll22);
     }
   }, [contentContext.viewport, contentContext.isPositioned]);
-  return canScrollUp ? /* @__PURE__ */ jsx192(SelectScrollButtonImpl, {
+  return canScrollUp ? /* @__PURE__ */ jsx212(SelectScrollButtonImpl, {
     ...props,
     ref: composedRefs,
     onAutoScroll: () => {
@@ -17648,10 +17747,10 @@ var SelectScrollUpButton = React322.forwardRef((props, forwardedRef) => {
 });
 SelectScrollUpButton.displayName = SCROLL_UP_BUTTON_NAME;
 var SCROLL_DOWN_BUTTON_NAME = "SelectScrollDownButton";
-var SelectScrollDownButton = React322.forwardRef((props, forwardedRef) => {
+var SelectScrollDownButton = React34.forwardRef((props, forwardedRef) => {
   const contentContext = useSelectContentContext(SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect);
   const viewportContext = useSelectViewportContext(SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect);
-  const [canScrollDown, setCanScrollDown] = React322.useState(false);
+  const [canScrollDown, setCanScrollDown] = React34.useState(false);
   const composedRefs = useComposedRefs(forwardedRef, viewportContext.onScrollButtonChange);
   useLayoutEffect22(() => {
     if (contentContext.viewport && contentContext.isPositioned) {
@@ -17667,7 +17766,7 @@ var SelectScrollDownButton = React322.forwardRef((props, forwardedRef) => {
       return () => viewport.removeEventListener("scroll", handleScroll22);
     }
   }, [contentContext.viewport, contentContext.isPositioned]);
-  return canScrollDown ? /* @__PURE__ */ jsx192(SelectScrollButtonImpl, {
+  return canScrollDown ? /* @__PURE__ */ jsx212(SelectScrollButtonImpl, {
     ...props,
     ref: composedRefs,
     onAutoScroll: () => {
@@ -17679,25 +17778,25 @@ var SelectScrollDownButton = React322.forwardRef((props, forwardedRef) => {
   }) : null;
 });
 SelectScrollDownButton.displayName = SCROLL_DOWN_BUTTON_NAME;
-var SelectScrollButtonImpl = React322.forwardRef((props, forwardedRef) => {
+var SelectScrollButtonImpl = React34.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, onAutoScroll, ...scrollIndicatorProps } = props;
   const contentContext = useSelectContentContext("SelectScrollButton", __scopeSelect);
-  const autoScrollTimerRef = React322.useRef(null);
+  const autoScrollTimerRef = React34.useRef(null);
   const getItems = useCollection(__scopeSelect);
-  const clearAutoScrollTimer = React322.useCallback(() => {
+  const clearAutoScrollTimer = React34.useCallback(() => {
     if (autoScrollTimerRef.current !== null) {
       window.clearInterval(autoScrollTimerRef.current);
       autoScrollTimerRef.current = null;
     }
   }, []);
-  React322.useEffect(() => {
+  React34.useEffect(() => {
     return () => clearAutoScrollTimer();
   }, [clearAutoScrollTimer]);
   useLayoutEffect22(() => {
     const activeItem = getItems().find((item) => item.ref.current === document.activeElement);
     activeItem?.ref.current?.scrollIntoView({ block: "nearest" });
   }, [getItems]);
-  return /* @__PURE__ */ jsx192(Primitive.div, {
+  return /* @__PURE__ */ jsx212(Primitive.div, {
     "aria-hidden": true,
     ...scrollIndicatorProps,
     ref: forwardedRef,
@@ -17719,29 +17818,29 @@ var SelectScrollButtonImpl = React322.forwardRef((props, forwardedRef) => {
   });
 });
 var SEPARATOR_NAME = "SelectSeparator";
-var SelectSeparator = React322.forwardRef((props, forwardedRef) => {
+var SelectSeparator = React34.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...separatorProps } = props;
-  return /* @__PURE__ */ jsx192(Primitive.div, { "aria-hidden": true, ...separatorProps, ref: forwardedRef });
+  return /* @__PURE__ */ jsx212(Primitive.div, { "aria-hidden": true, ...separatorProps, ref: forwardedRef });
 });
 SelectSeparator.displayName = SEPARATOR_NAME;
 var ARROW_NAME2 = "SelectArrow";
-var SelectArrow = React322.forwardRef((props, forwardedRef) => {
+var SelectArrow = React34.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...arrowProps } = props;
   const popperScope = usePopperScope(__scopeSelect);
   const context = useSelectContext(ARROW_NAME2, __scopeSelect);
   const contentContext = useSelectContentContext(ARROW_NAME2, __scopeSelect);
-  return context.open && contentContext.position === "popper" ? /* @__PURE__ */ jsx192(Arrow2, { ...popperScope, ...arrowProps, ref: forwardedRef }) : null;
+  return context.open && contentContext.position === "popper" ? /* @__PURE__ */ jsx212(Arrow2, { ...popperScope, ...arrowProps, ref: forwardedRef }) : null;
 });
 SelectArrow.displayName = ARROW_NAME2;
 function shouldShowPlaceholder(value) {
   return value === "" || value === undefined;
 }
-var BubbleSelect = React322.forwardRef((props, forwardedRef) => {
+var BubbleSelect = React34.forwardRef((props, forwardedRef) => {
   const { value, ...selectProps } = props;
-  const ref = React322.useRef(null);
+  const ref = React34.useRef(null);
   const composedRefs = useComposedRefs(forwardedRef, ref);
   const prevValue = usePrevious(value);
-  React322.useEffect(() => {
+  React34.useEffect(() => {
     const select = ref.current;
     const selectProto = window.HTMLSelectElement.prototype;
     const descriptor = Object.getOwnPropertyDescriptor(selectProto, "value");
@@ -17752,14 +17851,14 @@ var BubbleSelect = React322.forwardRef((props, forwardedRef) => {
       select.dispatchEvent(event);
     }
   }, [prevValue, value]);
-  return /* @__PURE__ */ jsx192(VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsx192("select", { ...selectProps, ref: composedRefs, defaultValue: value }) });
+  return /* @__PURE__ */ jsx212(VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsx212("select", { ...selectProps, ref: composedRefs, defaultValue: value }) });
 });
 BubbleSelect.displayName = "BubbleSelect";
 function useTypeaheadSearch(onSearchChange) {
   const handleSearchChange = useCallbackRef(onSearchChange);
-  const searchRef = React322.useRef("");
-  const timerRef = React322.useRef(0);
-  const handleTypeaheadSearch = React322.useCallback((key) => {
+  const searchRef = React34.useRef("");
+  const timerRef = React34.useRef(0);
+  const handleTypeaheadSearch = React34.useCallback((key) => {
     const search = searchRef.current + key;
     handleSearchChange(search);
     (function updateSearch(value) {
@@ -17769,11 +17868,11 @@ function useTypeaheadSearch(onSearchChange) {
         timerRef.current = window.setTimeout(() => updateSearch(""), 1000);
     })(search);
   }, [handleSearchChange]);
-  const resetTypeahead = React322.useCallback(() => {
+  const resetTypeahead = React34.useCallback(() => {
     searchRef.current = "";
     window.clearTimeout(timerRef.current);
   }, []);
-  React322.useEffect(() => {
+  React34.useEffect(() => {
     return () => window.clearTimeout(timerRef.current);
   }, []);
   return [searchRef, handleTypeaheadSearch, resetTypeahead];
@@ -17862,104 +17961,104 @@ var ChevronDown = createLucideIcon("ChevronDown", [
 var ChevronUp = createLucideIcon("ChevronUp", [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]]);
 var Select2 = Root222;
 var SelectValue2 = Value;
-var SelectTrigger2 = React332.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs4(Trigger, {
+var SelectTrigger2 = React352.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs5(Trigger, {
   ref,
   className: cn("flex h-10 w-full items-center justify-between rounded-md border-black border-2 border-b-4 bg-card-bg px-3 py-5 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 font-brand", className),
   ...props,
   children: [
     children,
-    /* @__PURE__ */ jsx202(Icon, {
+    /* @__PURE__ */ jsx223(Icon, {
       asChild: true,
-      children: /* @__PURE__ */ jsx202(ChevronDown, {
+      children: /* @__PURE__ */ jsx223(ChevronDown, {
         className: "h-4 w-4 opacity-50"
       })
     })
   ]
 }));
 SelectTrigger2.displayName = Trigger.displayName;
-var SelectScrollUpButton2 = React332.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx202(ScrollUpButton, {
+var SelectScrollUpButton2 = React352.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx223(ScrollUpButton, {
   ref,
   className: cn("flex cursor-default items-center justify-center py-1", className),
   ...props,
-  children: /* @__PURE__ */ jsx202(ChevronUp, {
+  children: /* @__PURE__ */ jsx223(ChevronUp, {
     className: "h-4 w-4"
   })
 }));
 SelectScrollUpButton2.displayName = ScrollUpButton.displayName;
-var SelectScrollDownButton2 = React332.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx202(ScrollDownButton, {
+var SelectScrollDownButton2 = React352.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx223(ScrollDownButton, {
   ref,
   className: cn("flex cursor-default items-center justify-center py-1", className),
   ...props,
-  children: /* @__PURE__ */ jsx202(ChevronDown, {
+  children: /* @__PURE__ */ jsx223(ChevronDown, {
     className: "h-4 w-4"
   })
 }));
 SelectScrollDownButton2.displayName = ScrollDownButton.displayName;
-var SelectContent2 = React332.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx202(Portal2, {
-  children: /* @__PURE__ */ jsxs4(Content2, {
+var SelectContent2 = React352.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx223(Portal2, {
+  children: /* @__PURE__ */ jsxs5(Content2, {
     ref,
     className: cn(" border-2 border-black relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md font-brand bg-card-bg text-text shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className),
     position,
     ...props,
     children: [
-      /* @__PURE__ */ jsx202(SelectScrollUpButton2, {}),
-      /* @__PURE__ */ jsx202(Viewport, {
+      /* @__PURE__ */ jsx223(SelectScrollUpButton2, {}),
+      /* @__PURE__ */ jsx223(Viewport, {
         className: cn("p-1", position === "popper" && "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)"),
         children
       }),
-      /* @__PURE__ */ jsx202(SelectScrollDownButton2, {})
+      /* @__PURE__ */ jsx223(SelectScrollDownButton2, {})
     ]
   })
 }));
 SelectContent2.displayName = Content2.displayName;
-var SelectLabel2 = React332.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx202(Label, {
+var SelectLabel2 = React352.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx223(Label, {
   ref,
   className: cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className),
   ...props
 }));
 SelectLabel2.displayName = Label.displayName;
-var SelectItem2 = React332.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs4(Item, {
+var SelectItem2 = React352.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs5(Item, {
   ref,
   className: cn("relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-slate-200 dark:focus:bg-white/10 data-disabled:pointer-events-none data-disabled:opacity-50 font-brand", className),
   ...props,
   children: [
-    /* @__PURE__ */ jsx202("span", {
+    /* @__PURE__ */ jsx223("span", {
       className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center",
-      children: /* @__PURE__ */ jsx202(ItemIndicator, {
-        children: /* @__PURE__ */ jsx202(Check, {
+      children: /* @__PURE__ */ jsx223(ItemIndicator, {
+        children: /* @__PURE__ */ jsx223(Check, {
           className: "h-4 w-4"
         })
       })
     }),
-    /* @__PURE__ */ jsx202(ItemText, {
+    /* @__PURE__ */ jsx223(ItemText, {
       children
     })
   ]
 }));
 SelectItem2.displayName = Item.displayName;
-var SelectSeparator2 = React332.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx202(Separator, {
+var SelectSeparator2 = React352.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx223(Separator, {
   ref,
   className: cn("-mx-1 my-1 h-px bg-muted", className),
   ...props
 }));
 SelectSeparator2.displayName = Separator.displayName;
 var Switch = ({ active, onToggle }) => {
-  return /* @__PURE__ */ jsx212("div", {
+  return /* @__PURE__ */ jsx232("div", {
     "data-active": active,
     className: "h-8 transition-all rounded-full w-14 border-2 border-b-4 bg-gray-200 p-[2px] cursor-pointer data-[active=true]:bg-brand border-black relative",
     onClick: onToggle,
-    children: /* @__PURE__ */ jsx212("div", {
+    children: /* @__PURE__ */ jsx232("div", {
       "data-active": active,
       className: "h-4 w-4 box-content left-[4px] top-[3px] transition-all rounded-full bg-white border-2 border-black absolute data-[active=true]:left-[calc(100%-24px)]"
     })
   });
 };
 var Triangle2 = (props) => {
-  return /* @__PURE__ */ jsx223("svg", {
+  return /* @__PURE__ */ jsx242("svg", {
     viewBox: "0 0 127 131",
     fill: "none",
     ...props,
-    children: /* @__PURE__ */ jsx223("path", {
+    children: /* @__PURE__ */ jsx242("path", {
       d: "M28.5644 0.011261C25.8196 0.159241 23.6077 0.591782 21.3786 1.43413C20.2669 1.84959 18.4446 2.75455 17.4418 3.38062C13.2472 5.993 10.0496 9.9201 8.38209 14.4903C8.04973 15.3953 7.15007 18.2809 6.5713 20.2672C2.71476 33.5453 0.525761 48.0643 0.0558711 63.4312C-0.0186237 65.8785 -0.0186237 71.7066 0.0558711 74.1141C0.371041 84.3018 1.35093 93.4992 3.12735 102.879C3.84937 106.675 5.00691 111.774 5.67736 114.091C7.04692 118.798 9.84334 122.805 13.8202 125.741C16.4848 127.711 19.5105 129.031 22.8627 129.68C24.4787 129.993 26.6104 130.135 28.1805 130.033C30.3523 129.89 34.6616 129.316 38.1628 128.695C53.9442 125.901 68.5223 120.898 81.7422 113.738C90.1143 109.202 97.2715 104.29 104.177 98.3312C111.059 92.4007 116.927 86.0206 122.09 78.8608C123.287 77.2045 123.889 76.237 124.491 75.019C126.038 71.8773 126.766 68.7527 126.76 65.2582C126.76 62.0027 126.141 59.1114 124.806 56.1518C124.164 54.7233 123.551 53.6988 122.176 51.7523C117.11 44.5868 111.489 38.3433 104.635 32.2762C94.011 22.8739 81.3927 15.1619 67.3017 9.45339C64.2474 8.21835 61.239 7.13128 57.6174 5.95315C49.9502 3.46598 40.4607 1.30891 32.4324 0.233231C31.1718 0.0624847 29.4584 -0.0342712 28.5644 0.011261Z",
       fill: "currentcolor"
     })
@@ -17968,7 +18067,7 @@ var Triangle2 = (props) => {
 
 // src/components/design.tsx
 import { useCallback as useCallback26, useState as useState34 } from "react";
-import { jsx as jsx39, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs6 } from "react/jsx-runtime";
 var Explainer = ({ children }) => {
   return /* @__PURE__ */ jsx39("div", {
     children: /* @__PURE__ */ jsx39("div", {
@@ -17981,15 +18080,22 @@ var DesignPage = () => {
   const [count3, setCount] = useState34(10);
   const [active, setActive] = useState34(false);
   const [submitButtonActive, setSubmitButtonActive] = useState34(true);
+  const [submitButtonPrimaryActive, setSubmitButtonPrimaryActive] = useState34(true);
   const onClick = useCallback26(() => {
     setSubmitButtonActive(false);
     setTimeout(() => {
       setSubmitButtonActive(true);
     }, 1000);
   }, []);
+  const onClickPrimary = useCallback26(() => {
+    setSubmitButtonPrimaryActive(false);
+    setTimeout(() => {
+      setSubmitButtonPrimaryActive(true);
+    }, 1000);
+  }, []);
   return /* @__PURE__ */ jsx39("div", {
     className: "bg-[var(--background)] relative",
-    children: /* @__PURE__ */ jsxs5("div", {
+    children: /* @__PURE__ */ jsxs6("div", {
       className: "max-w-[800px] mx-auto pt-10 pb-10 px-4",
       children: [
         /* @__PURE__ */ jsx39("h1", {
@@ -18017,7 +18123,7 @@ var DesignPage = () => {
         /* @__PURE__ */ jsx39(Explainer, {
           children: "Disabled"
         }),
-        /* @__PURE__ */ jsxs5(Button, {
+        /* @__PURE__ */ jsxs6(Button, {
           disabled: true,
           children: [
             "Don't",
@@ -18038,10 +18144,39 @@ var DesignPage = () => {
         }),
         /* @__PURE__ */ jsx39(Button, {
           onClick,
-          disabled: !submitButtonActive,
+          loading: !submitButtonActive,
           children: "Submit"
         }),
         /* @__PURE__ */ jsx39("br", {}),
+        /* @__PURE__ */ jsx39(Explainer, {
+          children: "Click to disable (primary)"
+        }),
+        /* @__PURE__ */ jsx39(Button, {
+          onClick: onClickPrimary,
+          className: "bg-brand text-white",
+          loading: !submitButtonPrimaryActive,
+          children: "Submit"
+        }),
+        /* @__PURE__ */ jsx39("br", {}),
+        /* @__PURE__ */ jsx39(Explainer, {
+          children: "Loading state"
+        }),
+        /* @__PURE__ */ jsx39(Button, {
+          onClick,
+          loading: true,
+          children: "Loading"
+        }),
+        /* @__PURE__ */ jsx39("br", {}),
+        /* @__PURE__ */ jsx39(Explainer, {
+          children: "Loading state (primary)"
+        }),
+        /* @__PURE__ */ jsx39(Button, {
+          onClick,
+          className: "bg-brand text-white",
+          loading: true,
+          children: "Loading"
+        }),
+        /* @__PURE__ */ jsx39("br", {}),
         /* @__PURE__ */ jsx39(Explainer, {
           children: "Rounded"
         }),
@@ -18103,7 +18238,7 @@ var DesignPage = () => {
           className: "text-brand",
           children: "<Card />"
         }),
-        /* @__PURE__ */ jsxs5(Card, {
+        /* @__PURE__ */ jsxs6(Card, {
           className: "px-4 py-4",
           children: [
             /* @__PURE__ */ jsx39("h3", {
@@ -18121,7 +18256,7 @@ var DesignPage = () => {
           className: "text-brand",
           children: "<Select />"
         }),
-        /* @__PURE__ */ jsxs5(Select2, {
+        /* @__PURE__ */ jsxs6(Select2, {
           defaultValue: "option1",
           children: [
             /* @__PURE__ */ jsx39(SelectTrigger2, {
@@ -18130,7 +18265,7 @@ var DesignPage = () => {
                 placeholder: "Select an option"
               })
             }),
-            /* @__PURE__ */ jsxs5(SelectContent2, {
+            /* @__PURE__ */ jsxs6(SelectContent2, {
               children: [
                 /* @__PURE__ */ jsx39(SelectItem2, {
                   value: "option1",
@@ -18147,6 +18282,42 @@ var DesignPage = () => {
               ]
             })
           ]
+        }),
+        /* @__PURE__ */ jsx39("br", {}),
+        /* @__PURE__ */ jsx39("h2", {
+          className: "text-brand",
+          children: "<Input />"
+        }),
+        /* @__PURE__ */ jsx39(Input, {
+          placeholder: "Enter your email"
+        }),
+        /* @__PURE__ */ jsx39("br", {}),
+        /* @__PURE__ */ jsx39("br", {}),
+        /* @__PURE__ */ jsx39("br", {}),
+        /* @__PURE__ */ jsx39("h1", {
+          children: "Example form set"
+        }),
+        /* @__PURE__ */ jsx39("br", {}),
+        /* @__PURE__ */ jsx39("h2", {
+          children: "Change email"
+        }),
+        /* @__PURE__ */ jsx39("p", {
+          className: "font-brand",
+          children: "A email will be sent to the new email address. You will need to click on the link in the email to confirm the change."
+        }),
+        /* @__PURE__ */ jsx39(Input, {
+          placeholder: "Enter your email",
+          className: "w-full block"
+        }),
+        /* @__PURE__ */ jsx39("div", {
+          className: "h-2"
+        }),
+        /* @__PURE__ */ jsx39("div", {
+          className: "flex flex-row justify-end",
+          children: /* @__PURE__ */ jsx39(Button, {
+            className: "bg-brand text-white",
+            children: "Change"
+          })
         })
       ]
     })