@nation-a/ui 0.4.0 → 0.5.1

package/dist/index.cjs

@@ -3,6 +3,23 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const reactDom = require("react-dom");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
 function isObject$1(value) {
   return typeof value === "object" && value != null && !Array.isArray(value);
 }
@@ -74,14 +91,14 @@ function mergeProps$1(...sources) {
 }
 var isNotNullish = (element) => element != null;
 function walkObject(target, predicate, options = {}) {
-  const { stop, getKey } = options;
+  const { stop: stop2, getKey } = options;
   function inner(value, path = []) {
     if (isObjectOrArray(value)) {
       const result = {};
       for (const [prop, child] of Object.entries(value)) {
         const key = (getKey == null ? void 0 : getKey(prop, child)) ?? prop;
         const childPath = [...path, key];
-        if (stop == null ? void 0 : stop(value, childPath)) {
+        if (stop2 == null ? void 0 : stop2(value, childPath)) {
           return predicate(value, path);
         }
         const next = inner(child, childPath);
@@ -344,15 +361,15 @@ function cx() {
   }
   return str;
 }
-const defaults = (conf) => ({
+const defaults$1 = (conf) => ({
   base: {},
   variants: {},
   defaultVariants: {},
   compoundVariants: [],
   ...conf
 });
-function cva(config) {
-  const { base, variants, defaultVariants, compoundVariants } = defaults(config);
+function cva(config2) {
+  const { base, variants, defaultVariants, compoundVariants } = defaults$1(config2);
   const getVariantProps = (variants2) => ({ ...defaultVariants, ...compact$1(variants2) });
   function resolve(props = {}) {
     var _a;
@@ -367,7 +384,7 @@ function cva(config) {
     return mergeCss(variantCss, compoundVariantCss);
   }
   function merge(__cva) {
-    const override = defaults(__cva.config);
+    const override = defaults$1(__cva.config);
     const variantKeys2 = uniq(__cva.variantKeys, Object.keys(variants));
     return cva({
       base: mergeCss(base, override.base),
@@ -391,7 +408,7 @@ function cva(config) {
     variantMap,
     variantKeys,
     raw: resolve,
-    config,
+    config: config2,
     merge,
     splitVariantProps,
     getVariantProps
@@ -412,18 +429,18 @@ function getCompoundVariantCss(compoundVariants, variantMap) {
   return result;
 }
 const slotClass = (className, slot) => className + "__" + slot;
-function sva(config) {
-  const slots = Object.entries(getSlotRecipes(config)).map(([slot, slotCva]) => [slot, cva(slotCva)]);
-  const defaultVariants = config.defaultVariants ?? {};
+function sva(config2) {
+  const slots = Object.entries(getSlotRecipes(config2)).map(([slot, slotCva]) => [slot, cva(slotCva)]);
+  const defaultVariants = config2.defaultVariants ?? {};
   function svaFn(props) {
-    const result = slots.map(([slot, cvaFn]) => [slot, cx(cvaFn(props), config.className && slotClass(config.className, slot))]);
+    const result = slots.map(([slot, cvaFn]) => [slot, cx(cvaFn(props), config2.className && slotClass(config2.className, slot))]);
     return Object.fromEntries(result);
   }
   function raw(props) {
     const result = slots.map(([slot, cvaFn]) => [slot, cvaFn.raw(props)]);
     return Object.fromEntries(result);
   }
-  const variants = config.variants ?? {};
+  const variants = config2.variants ?? {};
   const variantKeys = Object.keys(variants);
   function splitVariantProps(props) {
     return splitProps(props, variantKeys);
@@ -461,7 +478,7 @@ const composeCvaFn = (cvaA, cvaB) => {
   (_a = TypeError.captureStackTrace) == null ? void 0 : _a.call(TypeError, error);
   throw error;
 };
-const getDisplayName = (Component) => {
+const getDisplayName$1 = (Component) => {
   if (typeof Component === "string") return Component;
   return (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "Component";
 };
@@ -502,7 +519,7 @@ function styledFn(Dynamic, configOrCva = {}, options = {}) {
       className: classes()
     }, combinedProps.children ?? children);
   });
-  const name = getDisplayName(__base__);
+  const name = getDisplayName$1(__base__);
   StyledComponent.displayName = `styled.${name}`;
   StyledComponent.__cva__ = __cvaFn__;
   StyledComponent.__base__ = __base__;
@@ -572,7 +589,7 @@ function createContext(options = {}) {
   }
   return [Context.Provider, useContext$1, Context];
 }
-function toArray(v2) {
+function toArray$1(v2) {
   if (!v2) return [];
   return Array.isArray(v2) ? v2 : [v2];
 }
@@ -780,7 +797,7 @@ function nextTick(fn) {
     set2.forEach((fn2) => fn2());
   };
 }
-function raf$1(fn) {
+function raf$2(fn) {
   let cleanup;
   const id = globalThis.requestAnimationFrame(() => {
     cleanup = fn();
@@ -918,8 +935,8 @@ function mergeProps(...args) {
   }
   return result;
 }
-function createMachine(config) {
-  return config;
+function createMachine(config2) {
+  return config2;
 }
 function createScope(props) {
   const getRootNode = () => {
@@ -1041,16 +1058,16 @@ function useMachine(machine2, userProps = {}) {
     prop,
     bindable: useBindable,
     scope,
-    flush,
+    flush: flush$1,
     getContext() {
-      return ctx;
+      return ctx2;
     },
     getComputed() {
       return computed;
     }
   });
   const contextRef = useLiveRef(context2);
-  const ctx = {
+  const ctx2 = {
     get(key) {
       var _a2;
       return (_a2 = contextRef.current) == null ? void 0 : _a2[key].ref.current;
@@ -1092,10 +1109,10 @@ function useMachine(machine2, userProps = {}) {
       return !!((_b2 = (_a2 = machine2.states[state.ref.current]) == null ? void 0 : _a2.tags) == null ? void 0 : _b2.includes(tag));
     }
   });
-  const refs = useRefs(((_c = machine2.refs) == null ? void 0 : _c.call(machine2, { prop, context: ctx })) ?? {});
+  const refs = useRefs(((_c = machine2.refs) == null ? void 0 : _c.call(machine2, { prop, context: ctx2 })) ?? {});
   const getParams = () => ({
     state: getState(),
-    context: ctx,
+    context: ctx2,
     event: getEvent(),
     prop,
     send,
@@ -1104,7 +1121,7 @@ function useMachine(machine2, userProps = {}) {
     track: useTrack,
     refs,
     computed,
-    flush,
+    flush: flush$1,
     scope,
     choose
   });
@@ -1143,7 +1160,7 @@ function useMachine(machine2, userProps = {}) {
     return () => cleanups2.forEach((fn) => fn == null ? void 0 : fn());
   };
   const choose = (transitions) => {
-    return toArray(transitions).find((t) => {
+    return toArray$1(transitions).find((t) => {
       let result = !t.guard;
       if (isString(t.guard)) result = !!guard(t.guard);
       else if (isFunction(t.guard)) result = t.guard(getParams());
@@ -1154,7 +1171,7 @@ function useMachine(machine2, userProps = {}) {
     ensure(machine2.computed, `[zag-js] No computed object found on machine`);
     const fn = machine2.computed[key];
     return fn({
-      context: ctx,
+      context: ctx2,
       event: getEvent(),
       prop,
       refs,
@@ -1237,7 +1254,7 @@ function useMachine(machine2, userProps = {}) {
   return {
     state: getState(),
     send,
-    context: ctx,
+    context: ctx2,
     prop,
     scope,
     refs,
@@ -1256,7 +1273,7 @@ function useProp(value) {
     return ref.current[key];
   };
 }
-function flush(fn) {
+function flush$1(fn) {
   queueMicrotask(() => {
     reactDom.flushSync(() => fn());
   });
@@ -1510,7 +1527,7 @@ function trackInteractOutsideImpl(node, options) {
   function onPointerDown(event) {
     function handler() {
       var _a;
-      const func = defer ? raf$1 : (v2) => v2();
+      const func = defer ? raf$2 : (v2) => v2();
       const composedPath = ((_a = event.composedPath) == null ? void 0 : _a.call(event)) ?? [event.target];
       func(() => {
         if (!node || !isEventOutside(event)) return;
@@ -1545,7 +1562,7 @@ function trackInteractOutsideImpl(node, options) {
     cleanups2.add(frames.addEventListener("pointerdown", onPointerDown, true));
   }, 0);
   function onFocusin(event) {
-    const func = defer ? raf$1 : (v2) => v2();
+    const func = defer ? raf$2 : (v2) => v2();
     func(() => {
       if (!node || !isEventOutside(event)) return;
       if (onFocusOutside || onInteractOutside) {
@@ -1574,7 +1591,7 @@ function trackInteractOutsideImpl(node, options) {
 }
 function trackInteractOutside(nodeOrFn, options) {
   const { defer } = options;
-  const func = defer ? raf$1 : (v2) => v2();
+  const func = defer ? raf$2 : (v2) => v2();
   const cleanups2 = [];
   cleanups2.push(
     func(() => {
@@ -1769,7 +1786,7 @@ function trackDismissableElementImpl(node, options) {
 }
 function trackDismissableElement(nodeOrFn, options) {
   const { defer } = options;
-  const func = defer ? raf$1 : (v2) => v2();
+  const func = defer ? raf$2 : (v2) => v2();
   const cleanups2 = [];
   cleanups2.push(
     func(() => {
@@ -1788,19 +1805,19 @@ const [RenderStrategyPropsProvider, useRenderStrategyPropsContext] = createConte
 });
 const splitRenderStrategyProps = (props) => createSplitProps()(props, ["lazyMount", "unmountOnExit"]);
 function useEvent(callback, opts = {}) {
-  const { sync = false } = opts;
+  const { sync: sync2 = false } = opts;
   const callbackRef = useLatestRef(callback);
   return React.useCallback(
     // biome-ignore lint/suspicious/noExplicitAny: <explanation>
     (...args) => {
       var _a;
-      if (sync) return queueMicrotask(() => {
+      if (sync2) return queueMicrotask(() => {
         var _a2;
         return (_a2 = callbackRef.current) == null ? void 0 : _a2.call(callbackRef, ...args);
       });
       return (_a = callbackRef.current) == null ? void 0 : _a.call(callbackRef, ...args);
     },
-    [sync, callbackRef]
+    [sync2, callbackRef]
   );
 }
 function useLatestRef(value) {
@@ -1932,7 +1949,7 @@ var machine$1 = createMachine({
         if (!presentProp && (node == null ? void 0 : node.ownerDocument.visibilityState) === "hidden") {
           return send({ type: "UNMOUNT", src: "visibilitychange" });
         }
-        raf$1(() => {
+        raf$2(() => {
           var _a, _b;
           const animationName = getAnimationName(refs.get("styles"));
           context2.set("unmountAnimationName", animationName);
@@ -1944,7 +1961,7 @@ var machine$1 = createMachine({
         });
       },
       setPrevAnimationName: ({ context: context2, refs }) => {
-        raf$1(() => {
+        raf$2(() => {
           context2.set("prevAnimationName", getAnimationName(refs.get("styles")));
         });
       },
@@ -2119,13 +2136,13 @@ var hideOthers = (originalTarget, parentNode = getParentNode(originalTarget), ma
     controlAttribute: "aria-hidden"
   });
 };
-var raf = (fn) => {
+var raf$1 = (fn) => {
   const frameId = requestAnimationFrame(() => fn());
   return () => cancelAnimationFrame(frameId);
 };
 function ariaHidden(targetsOrFn, options = {}) {
   const { defer = true } = options;
-  const func = defer ? raf : (v2) => v2();
+  const func = defer ? raf$1 : (v2) => v2();
   const cleanups2 = [];
   cleanups2.push(
     func(() => {
@@ -2155,6 +2172,12 @@ const DialogBackdrop = React.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(ark.div, { ...mergedProps, ref: composeRefs(presence.ref, ref) });
 });
 DialogBackdrop.displayName = "DialogBackdrop";
+const DialogCloseTrigger = React.forwardRef((props, ref) => {
+  const dialog = useDialogContext();
+  const mergedProps = mergeProps(dialog.getCloseTriggerProps(), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(ark.button, { ...mergedProps, ref });
+});
+DialogCloseTrigger.displayName = "DialogCloseTrigger";
 const DialogContent = React.forwardRef((props, ref) => {
   const dialog = useDialogContext();
   const presence = usePresenceContext();
@@ -2181,8 +2204,8 @@ const DialogPositioner = React.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(ark.div, { ...mergedProps, ref });
 });
 DialogPositioner.displayName = "DialogPositioner";
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __defProp$1 = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 var activeFocusTraps = {
   activateTrap(trapStack, trap) {
@@ -2547,7 +2570,7 @@ var FocusTrap = class {
       return destinationNode;
     });
     this.trapStack = options.trapStack || sharedTrapStack;
-    const config = {
+    const config2 = {
       returnFocusOnDeactivate: true,
       escapeDeactivates: true,
       delayInitialFocus: true,
@@ -2559,8 +2582,8 @@ var FocusTrap = class {
       },
       ...options
     };
-    this.doc = config.document || getDocument(Array.isArray(elements) ? elements[0] : elements);
-    this.config = config;
+    this.doc = config2.document || getDocument(Array.isArray(elements) ? elements[0] : elements);
+    this.config = config2;
     this.updateContainerElements(elements);
     this.setupMutationObserver();
   }
@@ -2678,7 +2701,7 @@ var delay = (fn) => setTimeout(fn, 0);
 var isSelectableInput = (node) => node.localName === "input" && "select" in node && typeof node.select === "function";
 function trapFocus(el, options = {}) {
   let trap;
-  const cleanup = raf$1(() => {
+  const cleanup = raf$2(() => {
     const contentEl = typeof el === "function" ? el() : el;
     if (!contentEl) return;
     trap = new FocusTrap(contentEl, {
@@ -2780,41 +2803,41 @@ var anatomy = createAnatomy("dialog").parts(
   "closeTrigger"
 );
 var parts = anatomy.build();
-var getPositionerId = (ctx) => {
+var getPositionerId = (ctx2) => {
   var _a;
-  return ((_a = ctx.ids) == null ? void 0 : _a.positioner) ?? `dialog:${ctx.id}:positioner`;
+  return ((_a = ctx2.ids) == null ? void 0 : _a.positioner) ?? `dialog:${ctx2.id}:positioner`;
 };
-var getBackdropId = (ctx) => {
+var getBackdropId = (ctx2) => {
   var _a;
-  return ((_a = ctx.ids) == null ? void 0 : _a.backdrop) ?? `dialog:${ctx.id}:backdrop`;
+  return ((_a = ctx2.ids) == null ? void 0 : _a.backdrop) ?? `dialog:${ctx2.id}:backdrop`;
 };
-var getContentId = (ctx) => {
+var getContentId = (ctx2) => {
   var _a;
-  return ((_a = ctx.ids) == null ? void 0 : _a.content) ?? `dialog:${ctx.id}:content`;
+  return ((_a = ctx2.ids) == null ? void 0 : _a.content) ?? `dialog:${ctx2.id}:content`;
 };
-var getTriggerId = (ctx) => {
+var getTriggerId = (ctx2) => {
   var _a;
-  return ((_a = ctx.ids) == null ? void 0 : _a.trigger) ?? `dialog:${ctx.id}:trigger`;
+  return ((_a = ctx2.ids) == null ? void 0 : _a.trigger) ?? `dialog:${ctx2.id}:trigger`;
 };
-var getTitleId = (ctx) => {
+var getTitleId = (ctx2) => {
   var _a;
-  return ((_a = ctx.ids) == null ? void 0 : _a.title) ?? `dialog:${ctx.id}:title`;
+  return ((_a = ctx2.ids) == null ? void 0 : _a.title) ?? `dialog:${ctx2.id}:title`;
 };
-var getDescriptionId = (ctx) => {
+var getDescriptionId = (ctx2) => {
   var _a;
-  return ((_a = ctx.ids) == null ? void 0 : _a.description) ?? `dialog:${ctx.id}:description`;
+  return ((_a = ctx2.ids) == null ? void 0 : _a.description) ?? `dialog:${ctx2.id}:description`;
 };
-var getCloseTriggerId = (ctx) => {
+var getCloseTriggerId = (ctx2) => {
   var _a;
-  return ((_a = ctx.ids) == null ? void 0 : _a.closeTrigger) ?? `dialog:${ctx.id}:close`;
+  return ((_a = ctx2.ids) == null ? void 0 : _a.closeTrigger) ?? `dialog:${ctx2.id}:close`;
 };
-var getContentEl = (ctx) => ctx.getById(getContentId(ctx));
-var getPositionerEl = (ctx) => ctx.getById(getPositionerId(ctx));
-var getBackdropEl = (ctx) => ctx.getById(getBackdropId(ctx));
-var getTriggerEl = (ctx) => ctx.getById(getTriggerId(ctx));
-var getTitleEl = (ctx) => ctx.getById(getTitleId(ctx));
-var getDescriptionEl = (ctx) => ctx.getById(getDescriptionId(ctx));
-var getCloseTriggerEl = (ctx) => ctx.getById(getCloseTriggerId(ctx));
+var getContentEl = (ctx2) => ctx2.getById(getContentId(ctx2));
+var getPositionerEl = (ctx2) => ctx2.getById(getPositionerId(ctx2));
+var getBackdropEl = (ctx2) => ctx2.getById(getBackdropId(ctx2));
+var getTriggerEl = (ctx2) => ctx2.getById(getTriggerId(ctx2));
+var getTitleEl = (ctx2) => ctx2.getById(getTitleId(ctx2));
+var getDescriptionEl = (ctx2) => ctx2.getById(getDescriptionId(ctx2));
+var getCloseTriggerEl = (ctx2) => ctx2.getById(getCloseTriggerId(ctx2));
 function connect(service, normalize) {
   const { state, send, context: context2, prop, scope } = service;
   const ariaLabel = prop("aria-label");
@@ -3054,7 +3077,7 @@ var machine = createMachine({
     },
     actions: {
       checkRenderedElements({ context: context2, scope }) {
-        raf$1(() => {
+        raf$2(() => {
           context2.set("rendered", {
             title: !!getTitleEl(scope),
             description: !!getDescriptionEl(scope)
@@ -3062,7 +3085,7 @@ var machine = createMachine({
         });
       },
       syncZIndex({ scope }) {
-        raf$1(() => {
+        raf$2(() => {
           const contentEl = getContentEl(scope);
           if (!contentEl) return;
           const styles = getComputedStyle(contentEl);
@@ -3700,6 +3723,14 @@ const textRecipe = cva({
     variant: "body.md"
   },
   variants: {
+    font: {
+      inter: {
+        fontFamily: "inter"
+      },
+      notoSans: {
+        fontFamily: "notoSans"
+      }
+    },
     variant: {
       "display.lg": {
         textStyle: "display.lg"
@@ -3719,6 +3750,9 @@ const textRecipe = cva({
       "title.md": {
         textStyle: "title.md"
       },
+      "title.sm": {
+        textStyle: "title.sm"
+      },
       "body.lg": {
         textStyle: "body.lg"
       },
@@ -3738,7 +3772,7 @@ const textRecipe = cva({
   }
 });
 const Text = React.forwardRef((props, ref) => {
-  const { variant = "body.md", children, ...rest } = props;
+  const { variant = "body.md", font = "notoSans", children, ...rest } = props;
   const textType = (variant == null ? void 0 : variant.split(".")[0]) || "body";
   const componentMap = {
     display: styled("h1", textRecipe),
@@ -3748,7 +3782,7 @@ const Text = React.forwardRef((props, ref) => {
     label: styled("span", textRecipe)
   };
   const TextComponent = componentMap[textType];
-  return /* @__PURE__ */ jsxRuntime.jsx(TextComponent, { ref, textStyle: variant, ...rest, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(TextComponent, { ref, textStyle: variant, font, ...rest, children });
 });
 Text.displayName = "Text";
 const shouldForwardProp = (prop, variantKeys, options = {}) => {
@@ -3798,7 +3832,7 @@ const createStyleContext = (recipe) => {
 };
 const dialogRecipe = sva({
   className: "dialog",
-  slots: anatomy.keys(),
+  slots: [...anatomy.keys(), "header", "footer", "body"],
   base: {
     backdrop: {
       backdropFilter: "blur(4px)",
@@ -3827,17 +3861,22 @@ const dialogRecipe = sva({
       overflow: "auto",
       position: "fixed",
       top: "0",
-      width: "full",
-      height: "full",
-      zIndex: "modal"
+      width: "100vw",
+      height: "100vh",
+      zIndex: "modal",
+      p: "4"
     },
     content: {
-      background: "white",
-      borderRadius: "sm",
-      boxShadow: "overlay",
-      minW: "sm",
       position: "relative",
-      p: "3",
+      backgroundColor: "surface.layer_1",
+      borderRadius: "lg",
+      width: "full",
+      minW: "xs",
+      maxW: "md",
+      display: "flex",
+      flexDirection: "column",
+      gap: "6",
+      py: "4",
       _open: {
         animation: "dialog-in"
       },
@@ -3845,31 +3884,80 @@ const dialogRecipe = sva({
         animation: "dialog-out"
       }
     },
+    closeTrigger: {
+      position: "absolute",
+      top: "4",
+      right: "4"
+    },
     title: {
-      textStyle: "title.lg"
+      display: "flex",
+      alignItems: "center",
+      gap: "1",
+      color: "content.neutral.default",
+      textStyle: "headline.sm"
     },
     description: {
-      color: "content.neutral.default_inverse",
+      color: "content.neutral.default",
       textStyle: "body.md"
+    },
+    header: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "2",
+      px: "6"
+    },
+    footer: {
+      display: "flex",
+      gap: "2",
+      px: "4",
+      justifyContent: "flex-end"
+    },
+    body: {
+      px: "4"
     }
   }
 });
 const { withRootProvider, withContext } = createStyleContext(dialogRecipe);
 const Root = withRootProvider(DialogRoot);
-const Backdrop = withContext(DialogBackdrop, "backdrop");
+const Backdrop$1 = withContext(DialogBackdrop, "backdrop");
 const Trigger = withContext(DialogTrigger, "trigger");
 const Content = withContext(DialogContent, "content");
 const Title = withContext(DialogTitle, "title");
 const Description = withContext(DialogDescription, "description");
 const Positioner = withContext(DialogPositioner, "positioner");
+const Header = withContext(ark.header, "header");
+const Footer = withContext(
+  ({ orientation = "horizontal", className, ...props }) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ark.footer,
+      {
+        className: cx(
+          css$1({
+            display: "flex",
+            flexDirection: orientation === "horizontal" ? "row" : "column"
+          }),
+          className
+        ),
+        ...props
+      }
+    );
+  },
+  "footer"
+);
+const Body = withContext(ark.main, "body");
+const CloseTrigger = withContext(DialogCloseTrigger, "closeTrigger");
 const Dialog = {
   Root,
-  Backdrop,
+  Backdrop: Backdrop$1,
   Trigger,
   Content,
   Title,
   Description,
-  Positioner
+  Positioner,
+  Header,
+  Footer,
+  Body,
+  CloseTrigger
 };
 const iconButtonRecipe = cva({
   base: {
@@ -4046,6 +4134,3622 @@ const IconButton = React.forwardRef(
   }
 );
 IconButton.displayName = "IconButton";
+var updateQueue = makeQueue();
+var raf = (fn) => schedule(fn, updateQueue);
+var writeQueue = makeQueue();
+raf.write = (fn) => schedule(fn, writeQueue);
+var onStartQueue = makeQueue();
+raf.onStart = (fn) => schedule(fn, onStartQueue);
+var onFrameQueue = makeQueue();
+raf.onFrame = (fn) => schedule(fn, onFrameQueue);
+var onFinishQueue = makeQueue();
+raf.onFinish = (fn) => schedule(fn, onFinishQueue);
+var timeouts = [];
+raf.setTimeout = (handler, ms) => {
+  const time = raf.now() + ms;
+  const cancel = () => {
+    const i = timeouts.findIndex((t) => t.cancel == cancel);
+    if (~i)
+      timeouts.splice(i, 1);
+    pendingCount -= ~i ? 1 : 0;
+  };
+  const timeout = { time, handler, cancel };
+  timeouts.splice(findTimeout(time), 0, timeout);
+  pendingCount += 1;
+  start();
+  return timeout;
+};
+var findTimeout = (time) => ~(~timeouts.findIndex((t) => t.time > time) || ~timeouts.length);
+raf.cancel = (fn) => {
+  onStartQueue.delete(fn);
+  onFrameQueue.delete(fn);
+  onFinishQueue.delete(fn);
+  updateQueue.delete(fn);
+  writeQueue.delete(fn);
+};
+raf.sync = (fn) => {
+  sync = true;
+  raf.batchedUpdates(fn);
+  sync = false;
+};
+raf.throttle = (fn) => {
+  let lastArgs;
+  function queuedFn() {
+    try {
+      fn(...lastArgs);
+    } finally {
+      lastArgs = null;
+    }
+  }
+  function throttled(...args) {
+    lastArgs = args;
+    raf.onStart(queuedFn);
+  }
+  throttled.handler = fn;
+  throttled.cancel = () => {
+    onStartQueue.delete(queuedFn);
+    lastArgs = null;
+  };
+  return throttled;
+};
+var nativeRaf = typeof window != "undefined" ? window.requestAnimationFrame : (
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  () => {
+  }
+);
+raf.use = (impl) => nativeRaf = impl;
+raf.now = typeof performance != "undefined" ? () => performance.now() : Date.now;
+raf.batchedUpdates = (fn) => fn();
+raf.catch = console.error;
+raf.frameLoop = "always";
+raf.advance = () => {
+  if (raf.frameLoop !== "demand") {
+    console.warn(
+      "Cannot call the manual advancement of rafz whilst frameLoop is not set as demand"
+    );
+  } else {
+    update();
+  }
+};
+var ts = -1;
+var pendingCount = 0;
+var sync = false;
+function schedule(fn, queue) {
+  if (sync) {
+    queue.delete(fn);
+    fn(0);
+  } else {
+    queue.add(fn);
+    start();
+  }
+}
+function start() {
+  if (ts < 0) {
+    ts = 0;
+    if (raf.frameLoop !== "demand") {
+      nativeRaf(loop);
+    }
+  }
+}
+function stop() {
+  ts = -1;
+}
+function loop() {
+  if (~ts) {
+    nativeRaf(loop);
+    raf.batchedUpdates(update);
+  }
+}
+function update() {
+  const prevTs = ts;
+  ts = raf.now();
+  const count = findTimeout(ts);
+  if (count) {
+    eachSafely(timeouts.splice(0, count), (t) => t.handler());
+    pendingCount -= count;
+  }
+  if (!pendingCount) {
+    stop();
+    return;
+  }
+  onStartQueue.flush();
+  updateQueue.flush(prevTs ? Math.min(64, ts - prevTs) : 16.667);
+  onFrameQueue.flush();
+  writeQueue.flush();
+  onFinishQueue.flush();
+}
+function makeQueue() {
+  let next = /* @__PURE__ */ new Set();
+  let current = next;
+  return {
+    add(fn) {
+      pendingCount += current == next && !next.has(fn) ? 1 : 0;
+      next.add(fn);
+    },
+    delete(fn) {
+      pendingCount -= current == next && next.has(fn) ? 1 : 0;
+      return next.delete(fn);
+    },
+    flush(arg) {
+      if (current.size) {
+        next = /* @__PURE__ */ new Set();
+        pendingCount -= current.size;
+        eachSafely(current, (fn) => fn(arg) && next.add(fn));
+        pendingCount += next.size;
+        current = next;
+      }
+    }
+  };
+}
+function eachSafely(values, each2) {
+  values.forEach((value) => {
+    try {
+      each2(value);
+    } catch (e) {
+      raf.catch(e);
+    }
+  });
+}
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var globals_exports = {};
+__export(globals_exports, {
+  assign: () => assign,
+  colors: () => colors,
+  createStringInterpolator: () => createStringInterpolator,
+  skipAnimation: () => skipAnimation,
+  to: () => to,
+  willAdvance: () => willAdvance
+});
+function noop() {
+}
+var defineHidden = (obj, key, value) => Object.defineProperty(obj, key, { value, writable: true, configurable: true });
+var is = {
+  arr: Array.isArray,
+  obj: (a) => !!a && a.constructor.name === "Object",
+  fun: (a) => typeof a === "function",
+  str: (a) => typeof a === "string",
+  num: (a) => typeof a === "number",
+  und: (a) => a === void 0
+};
+function isEqual(a, b) {
+  if (is.arr(a)) {
+    if (!is.arr(b) || a.length !== b.length)
+      return false;
+    for (let i = 0; i < a.length; i++) {
+      if (a[i] !== b[i])
+        return false;
+    }
+    return true;
+  }
+  return a === b;
+}
+var each = (obj, fn) => obj.forEach(fn);
+function eachProp(obj, fn, ctx2) {
+  if (is.arr(obj)) {
+    for (let i = 0; i < obj.length; i++) {
+      fn.call(ctx2, obj[i], `${i}`);
+    }
+    return;
+  }
+  for (const key in obj) {
+    if (obj.hasOwnProperty(key)) {
+      fn.call(ctx2, obj[key], key);
+    }
+  }
+}
+var toArray = (a) => is.und(a) ? [] : is.arr(a) ? a : [a];
+function flush(queue, iterator) {
+  if (queue.size) {
+    const items = Array.from(queue);
+    queue.clear();
+    each(items, iterator);
+  }
+}
+var flushCalls = (queue, ...args) => flush(queue, (fn) => fn(...args));
+var isSSR = () => typeof window === "undefined" || !window.navigator || /ServerSideRendering|^Deno\//.test(window.navigator.userAgent);
+var createStringInterpolator;
+var to;
+var colors = null;
+var skipAnimation = false;
+var willAdvance = noop;
+var assign = (globals) => {
+  if (globals.to)
+    to = globals.to;
+  if (globals.now)
+    raf.now = globals.now;
+  if (globals.colors !== void 0)
+    colors = globals.colors;
+  if (globals.skipAnimation != null)
+    skipAnimation = globals.skipAnimation;
+  if (globals.createStringInterpolator)
+    createStringInterpolator = globals.createStringInterpolator;
+  if (globals.requestAnimationFrame)
+    raf.use(globals.requestAnimationFrame);
+  if (globals.batchedUpdates)
+    raf.batchedUpdates = globals.batchedUpdates;
+  if (globals.willAdvance)
+    willAdvance = globals.willAdvance;
+  if (globals.frameLoop)
+    raf.frameLoop = globals.frameLoop;
+};
+var startQueue = /* @__PURE__ */ new Set();
+var currentFrame = [];
+var prevFrame = [];
+var priority = 0;
+var frameLoop = {
+  get idle() {
+    return !startQueue.size && !currentFrame.length;
+  },
+  /** Advance the given animation on every frame until idle. */
+  start(animation) {
+    if (priority > animation.priority) {
+      startQueue.add(animation);
+      raf.onStart(flushStartQueue);
+    } else {
+      startSafely(animation);
+      raf(advance);
+    }
+  },
+  /** Advance all animations by the given time. */
+  advance,
+  /** Call this when an animation's priority changes. */
+  sort(animation) {
+    if (priority) {
+      raf.onFrame(() => frameLoop.sort(animation));
+    } else {
+      const prevIndex = currentFrame.indexOf(animation);
+      if (~prevIndex) {
+        currentFrame.splice(prevIndex, 1);
+        startUnsafely(animation);
+      }
+    }
+  },
+  /**
+   * Clear all animations. For testing purposes.
+   *
+   * ☠️ Never call this from within the frameloop.
+   */
+  clear() {
+    currentFrame = [];
+    startQueue.clear();
+  }
+};
+function flushStartQueue() {
+  startQueue.forEach(startSafely);
+  startQueue.clear();
+  raf(advance);
+}
+function startSafely(animation) {
+  if (!currentFrame.includes(animation))
+    startUnsafely(animation);
+}
+function startUnsafely(animation) {
+  currentFrame.splice(
+    findIndex(currentFrame, (other) => other.priority > animation.priority),
+    0,
+    animation
+  );
+}
+function advance(dt) {
+  const nextFrame = prevFrame;
+  for (let i = 0; i < currentFrame.length; i++) {
+    const animation = currentFrame[i];
+    priority = animation.priority;
+    if (!animation.idle) {
+      willAdvance(animation);
+      animation.advance(dt);
+      if (!animation.idle) {
+        nextFrame.push(animation);
+      }
+    }
+  }
+  priority = 0;
+  prevFrame = currentFrame;
+  prevFrame.length = 0;
+  currentFrame = nextFrame;
+  return currentFrame.length > 0;
+}
+function findIndex(arr, test) {
+  const index = arr.findIndex(test);
+  return index < 0 ? arr.length : index;
+}
+var colors2 = {
+  transparent: 0,
+  aliceblue: 4042850303,
+  antiquewhite: 4209760255,
+  aqua: 16777215,
+  aquamarine: 2147472639,
+  azure: 4043309055,
+  beige: 4126530815,
+  bisque: 4293182719,
+  black: 255,
+  blanchedalmond: 4293643775,
+  blue: 65535,
+  blueviolet: 2318131967,
+  brown: 2771004159,
+  burlywood: 3736635391,
+  burntsienna: 3934150143,
+  cadetblue: 1604231423,
+  chartreuse: 2147418367,
+  chocolate: 3530104575,
+  coral: 4286533887,
+  cornflowerblue: 1687547391,
+  cornsilk: 4294499583,
+  crimson: 3692313855,
+  cyan: 16777215,
+  darkblue: 35839,
+  darkcyan: 9145343,
+  darkgoldenrod: 3095792639,
+  darkgray: 2846468607,
+  darkgreen: 6553855,
+  darkgrey: 2846468607,
+  darkkhaki: 3182914559,
+  darkmagenta: 2332068863,
+  darkolivegreen: 1433087999,
+  darkorange: 4287365375,
+  darkorchid: 2570243327,
+  darkred: 2332033279,
+  darksalmon: 3918953215,
+  darkseagreen: 2411499519,
+  darkslateblue: 1211993087,
+  darkslategray: 793726975,
+  darkslategrey: 793726975,
+  darkturquoise: 13554175,
+  darkviolet: 2483082239,
+  deeppink: 4279538687,
+  deepskyblue: 12582911,
+  dimgray: 1768516095,
+  dimgrey: 1768516095,
+  dodgerblue: 512819199,
+  firebrick: 2988581631,
+  floralwhite: 4294635775,
+  forestgreen: 579543807,
+  fuchsia: 4278255615,
+  gainsboro: 3705462015,
+  ghostwhite: 4177068031,
+  gold: 4292280575,
+  goldenrod: 3668254975,
+  gray: 2155905279,
+  green: 8388863,
+  greenyellow: 2919182335,
+  grey: 2155905279,
+  honeydew: 4043305215,
+  hotpink: 4285117695,
+  indianred: 3445382399,
+  indigo: 1258324735,
+  ivory: 4294963455,
+  khaki: 4041641215,
+  lavender: 3873897215,
+  lavenderblush: 4293981695,
+  lawngreen: 2096890111,
+  lemonchiffon: 4294626815,
+  lightblue: 2916673279,
+  lightcoral: 4034953471,
+  lightcyan: 3774873599,
+  lightgoldenrodyellow: 4210742015,
+  lightgray: 3553874943,
+  lightgreen: 2431553791,
+  lightgrey: 3553874943,
+  lightpink: 4290167295,
+  lightsalmon: 4288707327,
+  lightseagreen: 548580095,
+  lightskyblue: 2278488831,
+  lightslategray: 2005441023,
+  lightslategrey: 2005441023,
+  lightsteelblue: 2965692159,
+  lightyellow: 4294959359,
+  lime: 16711935,
+  limegreen: 852308735,
+  linen: 4210091775,
+  magenta: 4278255615,
+  maroon: 2147483903,
+  mediumaquamarine: 1724754687,
+  mediumblue: 52735,
+  mediumorchid: 3126187007,
+  mediumpurple: 2473647103,
+  mediumseagreen: 1018393087,
+  mediumslateblue: 2070474495,
+  mediumspringgreen: 16423679,
+  mediumturquoise: 1221709055,
+  mediumvioletred: 3340076543,
+  midnightblue: 421097727,
+  mintcream: 4127193855,
+  mistyrose: 4293190143,
+  moccasin: 4293178879,
+  navajowhite: 4292783615,
+  navy: 33023,
+  oldlace: 4260751103,
+  olive: 2155872511,
+  olivedrab: 1804477439,
+  orange: 4289003775,
+  orangered: 4282712319,
+  orchid: 3664828159,
+  palegoldenrod: 4008225535,
+  palegreen: 2566625535,
+  paleturquoise: 2951671551,
+  palevioletred: 3681588223,
+  papayawhip: 4293907967,
+  peachpuff: 4292524543,
+  peru: 3448061951,
+  pink: 4290825215,
+  plum: 3718307327,
+  powderblue: 2967529215,
+  purple: 2147516671,
+  rebeccapurple: 1714657791,
+  red: 4278190335,
+  rosybrown: 3163525119,
+  royalblue: 1097458175,
+  saddlebrown: 2336560127,
+  salmon: 4202722047,
+  sandybrown: 4104413439,
+  seagreen: 780883967,
+  seashell: 4294307583,
+  sienna: 2689740287,
+  silver: 3233857791,
+  skyblue: 2278484991,
+  slateblue: 1784335871,
+  slategray: 1887473919,
+  slategrey: 1887473919,
+  snow: 4294638335,
+  springgreen: 16744447,
+  steelblue: 1182971135,
+  tan: 3535047935,
+  teal: 8421631,
+  thistle: 3636451583,
+  tomato: 4284696575,
+  turquoise: 1088475391,
+  violet: 4001558271,
+  wheat: 4125012991,
+  white: 4294967295,
+  whitesmoke: 4126537215,
+  yellow: 4294902015,
+  yellowgreen: 2597139199
+};
+var NUMBER = "[-+]?\\d*\\.?\\d+";
+var PERCENTAGE = NUMBER + "%";
+function call(...parts2) {
+  return "\\(\\s*(" + parts2.join(")\\s*,\\s*(") + ")\\s*\\)";
+}
+var rgb = new RegExp("rgb" + call(NUMBER, NUMBER, NUMBER));
+var rgba = new RegExp("rgba" + call(NUMBER, NUMBER, NUMBER, NUMBER));
+var hsl = new RegExp("hsl" + call(NUMBER, PERCENTAGE, PERCENTAGE));
+var hsla = new RegExp(
+  "hsla" + call(NUMBER, PERCENTAGE, PERCENTAGE, NUMBER)
+);
+var hex3 = /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/;
+var hex4 = /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/;
+var hex6 = /^#([0-9a-fA-F]{6})$/;
+var hex8 = /^#([0-9a-fA-F]{8})$/;
+function normalizeColor(color) {
+  let match;
+  if (typeof color === "number") {
+    return color >>> 0 === color && color >= 0 && color <= 4294967295 ? color : null;
+  }
+  if (match = hex6.exec(color))
+    return parseInt(match[1] + "ff", 16) >>> 0;
+  if (colors && colors[color] !== void 0) {
+    return colors[color];
+  }
+  if (match = rgb.exec(color)) {
+    return (parse255(match[1]) << 24 | // r
+    parse255(match[2]) << 16 | // g
+    parse255(match[3]) << 8 | // b
+    255) >>> // a
+    0;
+  }
+  if (match = rgba.exec(color)) {
+    return (parse255(match[1]) << 24 | // r
+    parse255(match[2]) << 16 | // g
+    parse255(match[3]) << 8 | // b
+    parse1(match[4])) >>> // a
+    0;
+  }
+  if (match = hex3.exec(color)) {
+    return parseInt(
+      match[1] + match[1] + // r
+      match[2] + match[2] + // g
+      match[3] + match[3] + // b
+      "ff",
+      // a
+      16
+    ) >>> 0;
+  }
+  if (match = hex8.exec(color))
+    return parseInt(match[1], 16) >>> 0;
+  if (match = hex4.exec(color)) {
+    return parseInt(
+      match[1] + match[1] + // r
+      match[2] + match[2] + // g
+      match[3] + match[3] + // b
+      match[4] + match[4],
+      // a
+      16
+    ) >>> 0;
+  }
+  if (match = hsl.exec(color)) {
+    return (hslToRgb(
+      parse360(match[1]),
+      // h
+      parsePercentage(match[2]),
+      // s
+      parsePercentage(match[3])
+      // l
+    ) | 255) >>> // a
+    0;
+  }
+  if (match = hsla.exec(color)) {
+    return (hslToRgb(
+      parse360(match[1]),
+      // h
+      parsePercentage(match[2]),
+      // s
+      parsePercentage(match[3])
+      // l
+    ) | parse1(match[4])) >>> // a
+    0;
+  }
+  return null;
+}
+function hue2rgb(p, q, t) {
+  if (t < 0)
+    t += 1;
+  if (t > 1)
+    t -= 1;
+  if (t < 1 / 6)
+    return p + (q - p) * 6 * t;
+  if (t < 1 / 2)
+    return q;
+  if (t < 2 / 3)
+    return p + (q - p) * (2 / 3 - t) * 6;
+  return p;
+}
+function hslToRgb(h, s, l) {
+  const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+  const p = 2 * l - q;
+  const r = hue2rgb(p, q, h + 1 / 3);
+  const g2 = hue2rgb(p, q, h);
+  const b = hue2rgb(p, q, h - 1 / 3);
+  return Math.round(r * 255) << 24 | Math.round(g2 * 255) << 16 | Math.round(b * 255) << 8;
+}
+function parse255(str) {
+  const int = parseInt(str, 10);
+  if (int < 0)
+    return 0;
+  if (int > 255)
+    return 255;
+  return int;
+}
+function parse360(str) {
+  const int = parseFloat(str);
+  return (int % 360 + 360) % 360 / 360;
+}
+function parse1(str) {
+  const num = parseFloat(str);
+  if (num < 0)
+    return 0;
+  if (num > 1)
+    return 255;
+  return Math.round(num * 255);
+}
+function parsePercentage(str) {
+  const int = parseFloat(str);
+  if (int < 0)
+    return 0;
+  if (int > 100)
+    return 1;
+  return int / 100;
+}
+function colorToRgba(input) {
+  let int32Color = normalizeColor(input);
+  if (int32Color === null)
+    return input;
+  int32Color = int32Color || 0;
+  const r = (int32Color & 4278190080) >>> 24;
+  const g2 = (int32Color & 16711680) >>> 16;
+  const b = (int32Color & 65280) >>> 8;
+  const a = (int32Color & 255) / 255;
+  return `rgba(${r}, ${g2}, ${b}, ${a})`;
+}
+var createInterpolator = (range, output, extrapolate) => {
+  if (is.fun(range)) {
+    return range;
+  }
+  if (is.arr(range)) {
+    return createInterpolator({
+      range,
+      output,
+      extrapolate
+    });
+  }
+  if (is.str(range.output[0])) {
+    return createStringInterpolator(range);
+  }
+  const config2 = range;
+  const outputRange = config2.output;
+  const inputRange = config2.range || [0, 1];
+  const extrapolateLeft = config2.extrapolateLeft || config2.extrapolate || "extend";
+  const extrapolateRight = config2.extrapolateRight || config2.extrapolate || "extend";
+  const easing = config2.easing || ((t) => t);
+  return (input) => {
+    const range2 = findRange(input, inputRange);
+    return interpolate(
+      input,
+      inputRange[range2],
+      inputRange[range2 + 1],
+      outputRange[range2],
+      outputRange[range2 + 1],
+      easing,
+      extrapolateLeft,
+      extrapolateRight,
+      config2.map
+    );
+  };
+};
+function interpolate(input, inputMin, inputMax, outputMin, outputMax, easing, extrapolateLeft, extrapolateRight, map) {
+  let result = map ? map(input) : input;
+  if (result < inputMin) {
+    if (extrapolateLeft === "identity")
+      return result;
+    else if (extrapolateLeft === "clamp")
+      result = inputMin;
+  }
+  if (result > inputMax) {
+    if (extrapolateRight === "identity")
+      return result;
+    else if (extrapolateRight === "clamp")
+      result = inputMax;
+  }
+  if (outputMin === outputMax)
+    return outputMin;
+  if (inputMin === inputMax)
+    return input <= inputMin ? outputMin : outputMax;
+  if (inputMin === -Infinity)
+    result = -result;
+  else if (inputMax === Infinity)
+    result = result - inputMin;
+  else
+    result = (result - inputMin) / (inputMax - inputMin);
+  result = easing(result);
+  if (outputMin === -Infinity)
+    result = -result;
+  else if (outputMax === Infinity)
+    result = result + outputMin;
+  else
+    result = result * (outputMax - outputMin) + outputMin;
+  return result;
+}
+function findRange(input, inputRange) {
+  for (var i = 1; i < inputRange.length - 1; ++i)
+    if (inputRange[i] >= input)
+      break;
+  return i - 1;
+}
+var easings$1 = {
+  linear: (x) => x
+};
+var $get = Symbol.for("FluidValue.get");
+var $observers = Symbol.for("FluidValue.observers");
+var hasFluidValue = (arg) => Boolean(arg && arg[$get]);
+var getFluidValue = (arg) => arg && arg[$get] ? arg[$get]() : arg;
+var getFluidObservers = (target) => target[$observers] || null;
+function callFluidObserver(observer2, event) {
+  if (observer2.eventObserved) {
+    observer2.eventObserved(event);
+  } else {
+    observer2(event);
+  }
+}
+function callFluidObservers(target, event) {
+  const observers = target[$observers];
+  if (observers) {
+    observers.forEach((observer2) => {
+      callFluidObserver(observer2, event);
+    });
+  }
+}
+var FluidValue = class {
+  constructor(get) {
+    if (!get && !(get = this.get)) {
+      throw Error("Unknown getter");
+    }
+    setFluidGetter(this, get);
+  }
+};
+var setFluidGetter = (target, get) => setHidden(target, $get, get);
+function addFluidObserver(target, observer2) {
+  if (target[$get]) {
+    let observers = target[$observers];
+    if (!observers) {
+      setHidden(target, $observers, observers = /* @__PURE__ */ new Set());
+    }
+    if (!observers.has(observer2)) {
+      observers.add(observer2);
+      if (target.observerAdded) {
+        target.observerAdded(observers.size, observer2);
+      }
+    }
+  }
+  return observer2;
+}
+function removeFluidObserver(target, observer2) {
+  const observers = target[$observers];
+  if (observers && observers.has(observer2)) {
+    const count = observers.size - 1;
+    if (count) {
+      observers.delete(observer2);
+    } else {
+      target[$observers] = null;
+    }
+    if (target.observerRemoved) {
+      target.observerRemoved(count, observer2);
+    }
+  }
+}
+var setHidden = (target, key, value) => Object.defineProperty(target, key, {
+  value,
+  writable: true,
+  configurable: true
+});
+var numberRegex = /[+\-]?(?:0|[1-9]\d*)(?:\.\d*)?(?:[eE][+\-]?\d+)?/g;
+var colorRegex = /(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d\.]+%?\))/gi;
+var unitRegex = new RegExp(`(${numberRegex.source})(%|[a-z]+)`, "i");
+var rgbaRegex = /rgba\(([0-9\.-]+), ([0-9\.-]+), ([0-9\.-]+), ([0-9\.-]+)\)/gi;
+var cssVariableRegex = /var\((--[a-zA-Z0-9-_]+),? ?([a-zA-Z0-9 ()%#.,-]+)?\)/;
+var variableToRgba = (input) => {
+  const [token, fallback] = parseCSSVariable(input);
+  if (!token || isSSR()) {
+    return input;
+  }
+  const value = window.getComputedStyle(document.documentElement).getPropertyValue(token);
+  if (value) {
+    return value.trim();
+  } else if (fallback && fallback.startsWith("--")) {
+    const value2 = window.getComputedStyle(document.documentElement).getPropertyValue(fallback);
+    if (value2) {
+      return value2;
+    } else {
+      return input;
+    }
+  } else if (fallback && cssVariableRegex.test(fallback)) {
+    return variableToRgba(fallback);
+  } else if (fallback) {
+    return fallback;
+  }
+  return input;
+};
+var parseCSSVariable = (current) => {
+  const match = cssVariableRegex.exec(current);
+  if (!match)
+    return [,];
+  const [, token, fallback] = match;
+  return [token, fallback];
+};
+var namedColorRegex;
+var rgbaRound = (_, p1, p2, p3, p4) => `rgba(${Math.round(p1)}, ${Math.round(p2)}, ${Math.round(p3)}, ${p4})`;
+var createStringInterpolator2 = (config2) => {
+  if (!namedColorRegex)
+    namedColorRegex = colors ? (
+      // match color names, ignore partial matches
+      new RegExp(`(${Object.keys(colors).join("|")})(?!\\w)`, "g")
+    ) : (
+      // never match
+      /^\b$/
+    );
+  const output = config2.output.map((value) => {
+    return getFluidValue(value).replace(cssVariableRegex, variableToRgba).replace(colorRegex, colorToRgba).replace(namedColorRegex, colorToRgba);
+  });
+  const keyframes2 = output.map((value) => value.match(numberRegex).map(Number));
+  const outputRanges = keyframes2[0].map(
+    (_, i) => keyframes2.map((values) => {
+      if (!(i in values)) {
+        throw Error('The arity of each "output" value must be equal');
+      }
+      return values[i];
+    })
+  );
+  const interpolators = outputRanges.map(
+    (output2) => createInterpolator({ ...config2, output: output2 })
+  );
+  return (input) => {
+    var _a;
+    const missingUnit = !unitRegex.test(output[0]) && ((_a = output.find((value) => unitRegex.test(value))) == null ? void 0 : _a.replace(numberRegex, ""));
+    let i = 0;
+    return output[0].replace(
+      numberRegex,
+      () => `${interpolators[i++](input)}${missingUnit || ""}`
+    ).replace(rgbaRegex, rgbaRound);
+  };
+};
+var prefix = "react-spring: ";
+var once = (fn) => {
+  const func = fn;
+  let called = false;
+  if (typeof func != "function") {
+    throw new TypeError(`${prefix}once requires a function parameter`);
+  }
+  return (...args) => {
+    if (!called) {
+      func(...args);
+      called = true;
+    }
+  };
+};
+var warnInterpolate = once(console.warn);
+function deprecateInterpolate() {
+  warnInterpolate(
+    `${prefix}The "interpolate" function is deprecated in v9 (use "to" instead)`
+  );
+}
+var warnDirectCall = once(console.warn);
+function deprecateDirectCall() {
+  warnDirectCall(
+    `${prefix}Directly calling start instead of using the api object is deprecated in v9 (use ".start" instead), this will be removed in later 0.X.0 versions`
+  );
+}
+function isAnimatedString(value) {
+  return is.str(value) && (value[0] == "#" || /\d/.test(value) || // Do not identify a CSS variable as an AnimatedString if its SSR
+  !isSSR() && cssVariableRegex.test(value) || value in (colors || {}));
+}
+var useIsomorphicLayoutEffect = isSSR() ? React.useEffect : React.useLayoutEffect;
+var useIsMounted = () => {
+  const isMounted = React.useRef(false);
+  useIsomorphicLayoutEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+  return isMounted;
+};
+function useForceUpdate() {
+  const update2 = React.useState()[1];
+  const isMounted = useIsMounted();
+  return () => {
+    if (isMounted.current) {
+      update2(Math.random());
+    }
+  };
+}
+function useMemoOne(getResult, inputs) {
+  const [initial] = React.useState(
+    () => ({
+      inputs,
+      result: getResult()
+    })
+  );
+  const committed = React.useRef();
+  const prevCache = committed.current;
+  let cache = prevCache;
+  if (cache) {
+    const useCache = Boolean(
+      inputs && cache.inputs && areInputsEqual(inputs, cache.inputs)
+    );
+    if (!useCache) {
+      cache = {
+        inputs,
+        result: getResult()
+      };
+    }
+  } else {
+    cache = initial;
+  }
+  React.useEffect(() => {
+    committed.current = cache;
+    if (prevCache == initial) {
+      initial.inputs = initial.result = void 0;
+    }
+  }, [cache]);
+  return cache.result;
+}
+function areInputsEqual(next, prev) {
+  if (next.length !== prev.length) {
+    return false;
+  }
+  for (let i = 0; i < next.length; i++) {
+    if (next[i] !== prev[i]) {
+      return false;
+    }
+  }
+  return true;
+}
+var useOnce = (effect) => React.useEffect(effect, emptyDeps);
+var emptyDeps = [];
+function usePrev(value) {
+  const prevRef = React.useRef();
+  React.useEffect(() => {
+    prevRef.current = value;
+  });
+  return prevRef.current;
+}
+var $node = Symbol.for("Animated:node");
+var isAnimated = (value) => !!value && value[$node] === value;
+var getAnimated = (owner) => owner && owner[$node];
+var setAnimated = (owner, node) => defineHidden(owner, $node, node);
+var getPayload = (owner) => owner && owner[$node] && owner[$node].getPayload();
+var Animated = class {
+  constructor() {
+    setAnimated(this, this);
+  }
+  /** Get every `AnimatedValue` used by this node. */
+  getPayload() {
+    return this.payload || [];
+  }
+};
+var AnimatedValue = class extends Animated {
+  constructor(_value) {
+    super();
+    this._value = _value;
+    this.done = true;
+    this.durationProgress = 0;
+    if (is.num(this._value)) {
+      this.lastPosition = this._value;
+    }
+  }
+  /** @internal */
+  static create(value) {
+    return new AnimatedValue(value);
+  }
+  getPayload() {
+    return [this];
+  }
+  getValue() {
+    return this._value;
+  }
+  setValue(value, step) {
+    if (is.num(value)) {
+      this.lastPosition = value;
+      if (step) {
+        value = Math.round(value / step) * step;
+        if (this.done) {
+          this.lastPosition = value;
+        }
+      }
+    }
+    if (this._value === value) {
+      return false;
+    }
+    this._value = value;
+    return true;
+  }
+  reset() {
+    const { done } = this;
+    this.done = false;
+    if (is.num(this._value)) {
+      this.elapsedTime = 0;
+      this.durationProgress = 0;
+      this.lastPosition = this._value;
+      if (done)
+        this.lastVelocity = null;
+      this.v0 = null;
+    }
+  }
+};
+var AnimatedString = class extends AnimatedValue {
+  constructor(value) {
+    super(0);
+    this._string = null;
+    this._toString = createInterpolator({
+      output: [value, value]
+    });
+  }
+  /** @internal */
+  static create(value) {
+    return new AnimatedString(value);
+  }
+  getValue() {
+    const value = this._string;
+    return value == null ? this._string = this._toString(this._value) : value;
+  }
+  setValue(value) {
+    if (is.str(value)) {
+      if (value == this._string) {
+        return false;
+      }
+      this._string = value;
+      this._value = 1;
+    } else if (super.setValue(value)) {
+      this._string = null;
+    } else {
+      return false;
+    }
+    return true;
+  }
+  reset(goal) {
+    if (goal) {
+      this._toString = createInterpolator({
+        output: [this.getValue(), goal]
+      });
+    }
+    this._value = 0;
+    super.reset();
+  }
+};
+var TreeContext = { dependencies: null };
+var AnimatedObject = class extends Animated {
+  constructor(source) {
+    super();
+    this.source = source;
+    this.setValue(source);
+  }
+  getValue(animated2) {
+    const values = {};
+    eachProp(this.source, (source, key) => {
+      if (isAnimated(source)) {
+        values[key] = source.getValue(animated2);
+      } else if (hasFluidValue(source)) {
+        values[key] = getFluidValue(source);
+      } else if (!animated2) {
+        values[key] = source;
+      }
+    });
+    return values;
+  }
+  /** Replace the raw object data */
+  setValue(source) {
+    this.source = source;
+    this.payload = this._makePayload(source);
+  }
+  reset() {
+    if (this.payload) {
+      each(this.payload, (node) => node.reset());
+    }
+  }
+  /** Create a payload set. */
+  _makePayload(source) {
+    if (source) {
+      const payload = /* @__PURE__ */ new Set();
+      eachProp(source, this._addToPayload, payload);
+      return Array.from(payload);
+    }
+  }
+  /** Add to a payload set. */
+  _addToPayload(source) {
+    if (TreeContext.dependencies && hasFluidValue(source)) {
+      TreeContext.dependencies.add(source);
+    }
+    const payload = getPayload(source);
+    if (payload) {
+      each(payload, (node) => this.add(node));
+    }
+  }
+};
+var AnimatedArray = class extends AnimatedObject {
+  constructor(source) {
+    super(source);
+  }
+  /** @internal */
+  static create(source) {
+    return new AnimatedArray(source);
+  }
+  getValue() {
+    return this.source.map((node) => node.getValue());
+  }
+  setValue(source) {
+    const payload = this.getPayload();
+    if (source.length == payload.length) {
+      return payload.map((node, i) => node.setValue(source[i])).some(Boolean);
+    }
+    super.setValue(source.map(makeAnimated));
+    return true;
+  }
+};
+function makeAnimated(value) {
+  const nodeType = isAnimatedString(value) ? AnimatedString : AnimatedValue;
+  return nodeType.create(value);
+}
+function getAnimatedType(value) {
+  const parentNode = getAnimated(value);
+  return parentNode ? parentNode.constructor : is.arr(value) ? AnimatedArray : isAnimatedString(value) ? AnimatedString : AnimatedValue;
+}
+var withAnimated = (Component, host2) => {
+  const hasInstance = (
+    // Function components must use "forwardRef" to avoid being
+    // re-rendered on every animation frame.
+    !is.fun(Component) || Component.prototype && Component.prototype.isReactComponent
+  );
+  return React.forwardRef((givenProps, givenRef) => {
+    const instanceRef = React.useRef(null);
+    const ref = hasInstance && // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useCallback(
+      (value) => {
+        instanceRef.current = updateRef(givenRef, value);
+      },
+      [givenRef]
+    );
+    const [props, deps] = getAnimatedState(givenProps, host2);
+    const forceUpdate = useForceUpdate();
+    const callback = () => {
+      const instance = instanceRef.current;
+      if (hasInstance && !instance) {
+        return;
+      }
+      const didUpdate = instance ? host2.applyAnimatedValues(instance, props.getValue(true)) : false;
+      if (didUpdate === false) {
+        forceUpdate();
+      }
+    };
+    const observer = new PropsObserver(callback, deps);
+    const observerRef = React.useRef();
+    useIsomorphicLayoutEffect(() => {
+      observerRef.current = observer;
+      each(deps, (dep) => addFluidObserver(dep, observer));
+      return () => {
+        if (observerRef.current) {
+          each(
+            observerRef.current.deps,
+            (dep) => removeFluidObserver(dep, observerRef.current)
+          );
+          raf.cancel(observerRef.current.update);
+        }
+      };
+    });
+    React.useEffect(callback, []);
+    useOnce(() => () => {
+      const observer2 = observerRef.current;
+      each(observer2.deps, (dep) => removeFluidObserver(dep, observer2));
+    });
+    const usedProps = host2.getComponentProps(props.getValue());
+    return /* @__PURE__ */ React__namespace.createElement(Component, { ...usedProps, ref });
+  });
+};
+var PropsObserver = class {
+  constructor(update2, deps) {
+    this.update = update2;
+    this.deps = deps;
+  }
+  eventObserved(event) {
+    if (event.type == "change") {
+      raf.write(this.update);
+    }
+  }
+};
+function getAnimatedState(props, host2) {
+  const dependencies = /* @__PURE__ */ new Set();
+  TreeContext.dependencies = dependencies;
+  if (props.style)
+    props = {
+      ...props,
+      style: host2.createAnimatedStyle(props.style)
+    };
+  props = new AnimatedObject(props);
+  TreeContext.dependencies = null;
+  return [props, dependencies];
+}
+function updateRef(ref, value) {
+  if (ref) {
+    if (is.fun(ref))
+      ref(value);
+    else
+      ref.current = value;
+  }
+  return value;
+}
+var cacheKey = Symbol.for("AnimatedComponent");
+var createHost = (components, {
+  applyAnimatedValues: applyAnimatedValues2 = () => false,
+  createAnimatedStyle = (style) => new AnimatedObject(style),
+  getComponentProps = (props) => props
+} = {}) => {
+  const hostConfig = {
+    applyAnimatedValues: applyAnimatedValues2,
+    createAnimatedStyle,
+    getComponentProps
+  };
+  const animated2 = (Component) => {
+    const displayName = getDisplayName(Component) || "Anonymous";
+    if (is.str(Component)) {
+      Component = animated2[Component] || (animated2[Component] = withAnimated(Component, hostConfig));
+    } else {
+      Component = Component[cacheKey] || (Component[cacheKey] = withAnimated(Component, hostConfig));
+    }
+    Component.displayName = `Animated(${displayName})`;
+    return Component;
+  };
+  eachProp(components, (Component, key) => {
+    if (is.arr(components)) {
+      key = getDisplayName(Component);
+    }
+    animated2[key] = animated2(Component);
+  });
+  return {
+    animated: animated2
+  };
+};
+var getDisplayName = (arg) => is.str(arg) ? arg : arg && is.str(arg.displayName) ? arg.displayName : is.fun(arg) && arg.name || null;
+function callProp(value, ...args) {
+  return is.fun(value) ? value(...args) : value;
+}
+var matchProp = (value, key) => value === true || !!(key && value && (is.fun(value) ? value(key) : toArray(value).includes(key)));
+var resolveProp = (prop, key) => is.obj(prop) ? key && prop[key] : prop;
+var getDefaultProp = (props, key) => props.default === true ? props[key] : props.default ? props.default[key] : void 0;
+var noopTransform = (value) => value;
+var getDefaultProps = (props, transform = noopTransform) => {
+  let keys = DEFAULT_PROPS;
+  if (props.default && props.default !== true) {
+    props = props.default;
+    keys = Object.keys(props);
+  }
+  const defaults2 = {};
+  for (const key of keys) {
+    const value = transform(props[key], key);
+    if (!is.und(value)) {
+      defaults2[key] = value;
+    }
+  }
+  return defaults2;
+};
+var DEFAULT_PROPS = [
+  "config",
+  "onProps",
+  "onStart",
+  "onChange",
+  "onPause",
+  "onResume",
+  "onRest"
+];
+var RESERVED_PROPS = {
+  config: 1,
+  from: 1,
+  to: 1,
+  ref: 1,
+  loop: 1,
+  reset: 1,
+  pause: 1,
+  cancel: 1,
+  reverse: 1,
+  immediate: 1,
+  default: 1,
+  delay: 1,
+  onProps: 1,
+  onStart: 1,
+  onChange: 1,
+  onPause: 1,
+  onResume: 1,
+  onRest: 1,
+  onResolve: 1,
+  // Transition props
+  items: 1,
+  trail: 1,
+  sort: 1,
+  expires: 1,
+  initial: 1,
+  enter: 1,
+  update: 1,
+  leave: 1,
+  children: 1,
+  onDestroyed: 1,
+  // Internal props
+  keys: 1,
+  callId: 1,
+  parentId: 1
+};
+function getForwardProps(props) {
+  const forward = {};
+  let count = 0;
+  eachProp(props, (value, prop) => {
+    if (!RESERVED_PROPS[prop]) {
+      forward[prop] = value;
+      count++;
+    }
+  });
+  if (count) {
+    return forward;
+  }
+}
+function inferTo(props) {
+  const to2 = getForwardProps(props);
+  if (to2) {
+    const out = { to: to2 };
+    eachProp(props, (val, key) => key in to2 || (out[key] = val));
+    return out;
+  }
+  return { ...props };
+}
+function computeGoal(value) {
+  value = getFluidValue(value);
+  return is.arr(value) ? value.map(computeGoal) : isAnimatedString(value) ? globals_exports.createStringInterpolator({
+    range: [0, 1],
+    output: [value, value]
+  })(1) : value;
+}
+function hasProps(props) {
+  for (const _ in props)
+    return true;
+  return false;
+}
+function isAsyncTo(to2) {
+  return is.fun(to2) || is.arr(to2) && is.obj(to2[0]);
+}
+function detachRefs(ctrl, ref) {
+  var _a;
+  (_a = ctrl.ref) == null ? void 0 : _a.delete(ctrl);
+  ref == null ? void 0 : ref.delete(ctrl);
+}
+function replaceRef(ctrl, ref) {
+  var _a;
+  if (ref && ctrl.ref !== ref) {
+    (_a = ctrl.ref) == null ? void 0 : _a.delete(ctrl);
+    ref.add(ctrl);
+    ctrl.ref = ref;
+  }
+}
+var config = {
+  default: { tension: 170, friction: 26 }
+};
+var defaults = {
+  ...config.default,
+  mass: 1,
+  damping: 1,
+  easing: easings$1.linear,
+  clamp: false
+};
+var AnimationConfig = class {
+  constructor() {
+    this.velocity = 0;
+    Object.assign(this, defaults);
+  }
+};
+function mergeConfig(config2, newConfig, defaultConfig) {
+  if (defaultConfig) {
+    defaultConfig = { ...defaultConfig };
+    sanitizeConfig(defaultConfig, newConfig);
+    newConfig = { ...defaultConfig, ...newConfig };
+  }
+  sanitizeConfig(config2, newConfig);
+  Object.assign(config2, newConfig);
+  for (const key in defaults) {
+    if (config2[key] == null) {
+      config2[key] = defaults[key];
+    }
+  }
+  let { frequency, damping } = config2;
+  const { mass } = config2;
+  if (!is.und(frequency)) {
+    if (frequency < 0.01)
+      frequency = 0.01;
+    if (damping < 0)
+      damping = 0;
+    config2.tension = Math.pow(2 * Math.PI / frequency, 2) * mass;
+    config2.friction = 4 * Math.PI * damping * mass / frequency;
+  }
+  return config2;
+}
+function sanitizeConfig(config2, props) {
+  if (!is.und(props.decay)) {
+    config2.duration = void 0;
+  } else {
+    const isTensionConfig = !is.und(props.tension) || !is.und(props.friction);
+    if (isTensionConfig || !is.und(props.frequency) || !is.und(props.damping) || !is.und(props.mass)) {
+      config2.duration = void 0;
+      config2.decay = void 0;
+    }
+    if (isTensionConfig) {
+      config2.frequency = void 0;
+    }
+  }
+}
+var emptyArray = [];
+var Animation = class {
+  constructor() {
+    this.changed = false;
+    this.values = emptyArray;
+    this.toValues = null;
+    this.fromValues = emptyArray;
+    this.config = new AnimationConfig();
+    this.immediate = false;
+  }
+};
+function scheduleProps(callId, { key, props, defaultProps, state, actions }) {
+  return new Promise((resolve, reject) => {
+    let delay2;
+    let timeout;
+    let cancel = matchProp(props.cancel ?? (defaultProps == null ? void 0 : defaultProps.cancel), key);
+    if (cancel) {
+      onStart();
+    } else {
+      if (!is.und(props.pause)) {
+        state.paused = matchProp(props.pause, key);
+      }
+      let pause = defaultProps == null ? void 0 : defaultProps.pause;
+      if (pause !== true) {
+        pause = state.paused || matchProp(pause, key);
+      }
+      delay2 = callProp(props.delay || 0, key);
+      if (pause) {
+        state.resumeQueue.add(onResume);
+        actions.pause();
+      } else {
+        actions.resume();
+        onResume();
+      }
+    }
+    function onPause() {
+      state.resumeQueue.add(onResume);
+      state.timeouts.delete(timeout);
+      timeout.cancel();
+      delay2 = timeout.time - raf.now();
+    }
+    function onResume() {
+      if (delay2 > 0 && !globals_exports.skipAnimation) {
+        state.delayed = true;
+        timeout = raf.setTimeout(onStart, delay2);
+        state.pauseQueue.add(onPause);
+        state.timeouts.add(timeout);
+      } else {
+        onStart();
+      }
+    }
+    function onStart() {
+      if (state.delayed) {
+        state.delayed = false;
+      }
+      state.pauseQueue.delete(onPause);
+      state.timeouts.delete(timeout);
+      if (callId <= (state.cancelId || 0)) {
+        cancel = true;
+      }
+      try {
+        actions.start({ ...props, callId, cancel }, resolve);
+      } catch (err) {
+        reject(err);
+      }
+    }
+  });
+}
+var getCombinedResult = (target, results) => results.length == 1 ? results[0] : results.some((result) => result.cancelled) ? getCancelledResult(target.get()) : results.every((result) => result.noop) ? getNoopResult(target.get()) : getFinishedResult(
+  target.get(),
+  results.every((result) => result.finished)
+);
+var getNoopResult = (value) => ({
+  value,
+  noop: true,
+  finished: true,
+  cancelled: false
+});
+var getFinishedResult = (value, finished, cancelled = false) => ({
+  value,
+  finished,
+  cancelled
+});
+var getCancelledResult = (value) => ({
+  value,
+  cancelled: true,
+  finished: false
+});
+function runAsync(to2, props, state, target) {
+  const { callId, parentId, onRest } = props;
+  const { asyncTo: prevTo, promise: prevPromise } = state;
+  if (!parentId && to2 === prevTo && !props.reset) {
+    return prevPromise;
+  }
+  return state.promise = (async () => {
+    state.asyncId = callId;
+    state.asyncTo = to2;
+    const defaultProps = getDefaultProps(
+      props,
+      (value, key) => (
+        // The `onRest` prop is only called when the `runAsync` promise is resolved.
+        key === "onRest" ? void 0 : value
+      )
+    );
+    let preventBail;
+    let bail;
+    const bailPromise = new Promise(
+      (resolve, reject) => (preventBail = resolve, bail = reject)
+    );
+    const bailIfEnded = (bailSignal) => {
+      const bailResult = (
+        // The `cancel` prop or `stop` method was used.
+        callId <= (state.cancelId || 0) && getCancelledResult(target) || // The async `to` prop was replaced.
+        callId !== state.asyncId && getFinishedResult(target, false)
+      );
+      if (bailResult) {
+        bailSignal.result = bailResult;
+        bail(bailSignal);
+        throw bailSignal;
+      }
+    };
+    const animate = (arg1, arg2) => {
+      const bailSignal = new BailSignal();
+      const skipAnimationSignal = new SkipAnimationSignal();
+      return (async () => {
+        if (globals_exports.skipAnimation) {
+          stopAsync(state);
+          skipAnimationSignal.result = getFinishedResult(target, false);
+          bail(skipAnimationSignal);
+          throw skipAnimationSignal;
+        }
+        bailIfEnded(bailSignal);
+        const props2 = is.obj(arg1) ? { ...arg1 } : { ...arg2, to: arg1 };
+        props2.parentId = callId;
+        eachProp(defaultProps, (value, key) => {
+          if (is.und(props2[key])) {
+            props2[key] = value;
+          }
+        });
+        const result2 = await target.start(props2);
+        bailIfEnded(bailSignal);
+        if (state.paused) {
+          await new Promise((resume) => {
+            state.resumeQueue.add(resume);
+          });
+        }
+        return result2;
+      })();
+    };
+    let result;
+    if (globals_exports.skipAnimation) {
+      stopAsync(state);
+      return getFinishedResult(target, false);
+    }
+    try {
+      let animating;
+      if (is.arr(to2)) {
+        animating = (async (queue) => {
+          for (const props2 of queue) {
+            await animate(props2);
+          }
+        })(to2);
+      } else {
+        animating = Promise.resolve(to2(animate, target.stop.bind(target)));
+      }
+      await Promise.all([animating.then(preventBail), bailPromise]);
+      result = getFinishedResult(target.get(), true, false);
+    } catch (err) {
+      if (err instanceof BailSignal) {
+        result = err.result;
+      } else if (err instanceof SkipAnimationSignal) {
+        result = err.result;
+      } else {
+        throw err;
+      }
+    } finally {
+      if (callId == state.asyncId) {
+        state.asyncId = parentId;
+        state.asyncTo = parentId ? prevTo : void 0;
+        state.promise = parentId ? prevPromise : void 0;
+      }
+    }
+    if (is.fun(onRest)) {
+      raf.batchedUpdates(() => {
+        onRest(result, target, target.item);
+      });
+    }
+    return result;
+  })();
+}
+function stopAsync(state, cancelId) {
+  flush(state.timeouts, (t) => t.cancel());
+  state.pauseQueue.clear();
+  state.resumeQueue.clear();
+  state.asyncId = state.asyncTo = state.promise = void 0;
+  if (cancelId)
+    state.cancelId = cancelId;
+}
+var BailSignal = class extends Error {
+  constructor() {
+    super(
+      "An async animation has been interrupted. You see this error because you forgot to use `await` or `.catch(...)` on its returned promise."
+    );
+  }
+};
+var SkipAnimationSignal = class extends Error {
+  constructor() {
+    super("SkipAnimationSignal");
+  }
+};
+var isFrameValue = (value) => value instanceof FrameValue;
+var nextId = 1;
+var FrameValue = class extends FluidValue {
+  constructor() {
+    super(...arguments);
+    this.id = nextId++;
+    this._priority = 0;
+  }
+  get priority() {
+    return this._priority;
+  }
+  set priority(priority2) {
+    if (this._priority != priority2) {
+      this._priority = priority2;
+      this._onPriorityChange(priority2);
+    }
+  }
+  /** Get the current value */
+  get() {
+    const node = getAnimated(this);
+    return node && node.getValue();
+  }
+  /** Create a spring that maps our value to another value */
+  to(...args) {
+    return globals_exports.to(this, args);
+  }
+  /** @deprecated Use the `to` method instead. */
+  interpolate(...args) {
+    deprecateInterpolate();
+    return globals_exports.to(this, args);
+  }
+  toJSON() {
+    return this.get();
+  }
+  observerAdded(count) {
+    if (count == 1)
+      this._attach();
+  }
+  observerRemoved(count) {
+    if (count == 0)
+      this._detach();
+  }
+  /** Called when the first child is added. */
+  _attach() {
+  }
+  /** Called when the last child is removed. */
+  _detach() {
+  }
+  /** Tell our children about our new value */
+  _onChange(value, idle = false) {
+    callFluidObservers(this, {
+      type: "change",
+      parent: this,
+      value,
+      idle
+    });
+  }
+  /** Tell our children about our new priority */
+  _onPriorityChange(priority2) {
+    if (!this.idle) {
+      frameLoop.sort(this);
+    }
+    callFluidObservers(this, {
+      type: "priority",
+      parent: this,
+      priority: priority2
+    });
+  }
+};
+var $P = Symbol.for("SpringPhase");
+var HAS_ANIMATED = 1;
+var IS_ANIMATING = 2;
+var IS_PAUSED = 4;
+var hasAnimated = (target) => (target[$P] & HAS_ANIMATED) > 0;
+var isAnimating = (target) => (target[$P] & IS_ANIMATING) > 0;
+var isPaused = (target) => (target[$P] & IS_PAUSED) > 0;
+var setActiveBit = (target, active) => active ? target[$P] |= IS_ANIMATING | HAS_ANIMATED : target[$P] &= -3;
+var setPausedBit = (target, paused) => paused ? target[$P] |= IS_PAUSED : target[$P] &= -5;
+var SpringValue = class extends FrameValue {
+  constructor(arg1, arg2) {
+    super();
+    this.animation = new Animation();
+    this.defaultProps = {};
+    this._state = {
+      paused: false,
+      delayed: false,
+      pauseQueue: /* @__PURE__ */ new Set(),
+      resumeQueue: /* @__PURE__ */ new Set(),
+      timeouts: /* @__PURE__ */ new Set()
+    };
+    this._pendingCalls = /* @__PURE__ */ new Set();
+    this._lastCallId = 0;
+    this._lastToId = 0;
+    this._memoizedDuration = 0;
+    if (!is.und(arg1) || !is.und(arg2)) {
+      const props = is.obj(arg1) ? { ...arg1 } : { ...arg2, from: arg1 };
+      if (is.und(props.default)) {
+        props.default = true;
+      }
+      this.start(props);
+    }
+  }
+  /** Equals true when not advancing on each frame. */
+  get idle() {
+    return !(isAnimating(this) || this._state.asyncTo) || isPaused(this);
+  }
+  get goal() {
+    return getFluidValue(this.animation.to);
+  }
+  get velocity() {
+    const node = getAnimated(this);
+    return node instanceof AnimatedValue ? node.lastVelocity || 0 : node.getPayload().map((node2) => node2.lastVelocity || 0);
+  }
+  /**
+   * When true, this value has been animated at least once.
+   */
+  get hasAnimated() {
+    return hasAnimated(this);
+  }
+  /**
+   * When true, this value has an unfinished animation,
+   * which is either active or paused.
+   */
+  get isAnimating() {
+    return isAnimating(this);
+  }
+  /**
+   * When true, all current and future animations are paused.
+   */
+  get isPaused() {
+    return isPaused(this);
+  }
+  /**
+   *
+   *
+   */
+  get isDelayed() {
+    return this._state.delayed;
+  }
+  /** Advance the current animation by a number of milliseconds */
+  advance(dt) {
+    let idle = true;
+    let changed = false;
+    const anim = this.animation;
+    let { toValues } = anim;
+    const { config: config2 } = anim;
+    const payload = getPayload(anim.to);
+    if (!payload && hasFluidValue(anim.to)) {
+      toValues = toArray(getFluidValue(anim.to));
+    }
+    anim.values.forEach((node2, i) => {
+      if (node2.done)
+        return;
+      const to2 = (
+        // Animated strings always go from 0 to 1.
+        node2.constructor == AnimatedString ? 1 : payload ? payload[i].lastPosition : toValues[i]
+      );
+      let finished = anim.immediate;
+      let position = to2;
+      if (!finished) {
+        position = node2.lastPosition;
+        if (config2.tension <= 0) {
+          node2.done = true;
+          return;
+        }
+        let elapsed = node2.elapsedTime += dt;
+        const from = anim.fromValues[i];
+        const v0 = node2.v0 != null ? node2.v0 : node2.v0 = is.arr(config2.velocity) ? config2.velocity[i] : config2.velocity;
+        let velocity;
+        const precision = config2.precision || (from == to2 ? 5e-3 : Math.min(1, Math.abs(to2 - from) * 1e-3));
+        if (!is.und(config2.duration)) {
+          let p = 1;
+          if (config2.duration > 0) {
+            if (this._memoizedDuration !== config2.duration) {
+              this._memoizedDuration = config2.duration;
+              if (node2.durationProgress > 0) {
+                node2.elapsedTime = config2.duration * node2.durationProgress;
+                elapsed = node2.elapsedTime += dt;
+              }
+            }
+            p = (config2.progress || 0) + elapsed / this._memoizedDuration;
+            p = p > 1 ? 1 : p < 0 ? 0 : p;
+            node2.durationProgress = p;
+          }
+          position = from + config2.easing(p) * (to2 - from);
+          velocity = (position - node2.lastPosition) / dt;
+          finished = p == 1;
+        } else if (config2.decay) {
+          const decay = config2.decay === true ? 0.998 : config2.decay;
+          const e = Math.exp(-(1 - decay) * elapsed);
+          position = from + v0 / (1 - decay) * (1 - e);
+          finished = Math.abs(node2.lastPosition - position) <= precision;
+          velocity = v0 * e;
+        } else {
+          velocity = node2.lastVelocity == null ? v0 : node2.lastVelocity;
+          const restVelocity = config2.restVelocity || precision / 10;
+          const bounceFactor = config2.clamp ? 0 : config2.bounce;
+          const canBounce = !is.und(bounceFactor);
+          const isGrowing = from == to2 ? node2.v0 > 0 : from < to2;
+          let isMoving;
+          let isBouncing = false;
+          const step = 1;
+          const numSteps = Math.ceil(dt / step);
+          for (let n = 0; n < numSteps; ++n) {
+            isMoving = Math.abs(velocity) > restVelocity;
+            if (!isMoving) {
+              finished = Math.abs(to2 - position) <= precision;
+              if (finished) {
+                break;
+              }
+            }
+            if (canBounce) {
+              isBouncing = position == to2 || position > to2 == isGrowing;
+              if (isBouncing) {
+                velocity = -velocity * bounceFactor;
+                position = to2;
+              }
+            }
+            const springForce = -config2.tension * 1e-6 * (position - to2);
+            const dampingForce = -config2.friction * 1e-3 * velocity;
+            const acceleration = (springForce + dampingForce) / config2.mass;
+            velocity = velocity + acceleration * step;
+            position = position + velocity * step;
+          }
+        }
+        node2.lastVelocity = velocity;
+        if (Number.isNaN(position)) {
+          console.warn(`Got NaN while animating:`, this);
+          finished = true;
+        }
+      }
+      if (payload && !payload[i].done) {
+        finished = false;
+      }
+      if (finished) {
+        node2.done = true;
+      } else {
+        idle = false;
+      }
+      if (node2.setValue(position, config2.round)) {
+        changed = true;
+      }
+    });
+    const node = getAnimated(this);
+    const currVal = node.getValue();
+    if (idle) {
+      const finalVal = getFluidValue(anim.to);
+      if ((currVal !== finalVal || changed) && !config2.decay) {
+        node.setValue(finalVal);
+        this._onChange(finalVal);
+      } else if (changed && config2.decay) {
+        this._onChange(currVal);
+      }
+      this._stop();
+    } else if (changed) {
+      this._onChange(currVal);
+    }
+  }
+  /** Set the current value, while stopping the current animation */
+  set(value) {
+    raf.batchedUpdates(() => {
+      this._stop();
+      this._focus(value);
+      this._set(value);
+    });
+    return this;
+  }
+  /**
+   * Freeze the active animation in time, as well as any updates merged
+   * before `resume` is called.
+   */
+  pause() {
+    this._update({ pause: true });
+  }
+  /** Resume the animation if paused. */
+  resume() {
+    this._update({ pause: false });
+  }
+  /** Skip to the end of the current animation. */
+  finish() {
+    if (isAnimating(this)) {
+      const { to: to2, config: config2 } = this.animation;
+      raf.batchedUpdates(() => {
+        this._onStart();
+        if (!config2.decay) {
+          this._set(to2, false);
+        }
+        this._stop();
+      });
+    }
+    return this;
+  }
+  /** Push props into the pending queue. */
+  update(props) {
+    const queue = this.queue || (this.queue = []);
+    queue.push(props);
+    return this;
+  }
+  start(to2, arg2) {
+    let queue;
+    if (!is.und(to2)) {
+      queue = [is.obj(to2) ? to2 : { ...arg2, to: to2 }];
+    } else {
+      queue = this.queue || [];
+      this.queue = [];
+    }
+    return Promise.all(
+      queue.map((props) => {
+        const up = this._update(props);
+        return up;
+      })
+    ).then((results) => getCombinedResult(this, results));
+  }
+  /**
+   * Stop the current animation, and cancel any delayed updates.
+   *
+   * Pass `true` to call `onRest` with `cancelled: true`.
+   */
+  stop(cancel) {
+    const { to: to2 } = this.animation;
+    this._focus(this.get());
+    stopAsync(this._state, cancel && this._lastCallId);
+    raf.batchedUpdates(() => this._stop(to2, cancel));
+    return this;
+  }
+  /** Restart the animation. */
+  reset() {
+    this._update({ reset: true });
+  }
+  /** @internal */
+  eventObserved(event) {
+    if (event.type == "change") {
+      this._start();
+    } else if (event.type == "priority") {
+      this.priority = event.priority + 1;
+    }
+  }
+  /**
+   * Parse the `to` and `from` range from the given `props` object.
+   *
+   * This also ensures the initial value is available to animated components
+   * during the render phase.
+   */
+  _prepareNode(props) {
+    const key = this.key || "";
+    let { to: to2, from } = props;
+    to2 = is.obj(to2) ? to2[key] : to2;
+    if (to2 == null || isAsyncTo(to2)) {
+      to2 = void 0;
+    }
+    from = is.obj(from) ? from[key] : from;
+    if (from == null) {
+      from = void 0;
+    }
+    const range = { to: to2, from };
+    if (!hasAnimated(this)) {
+      if (props.reverse)
+        [to2, from] = [from, to2];
+      from = getFluidValue(from);
+      if (!is.und(from)) {
+        this._set(from);
+      } else if (!getAnimated(this)) {
+        this._set(to2);
+      }
+    }
+    return range;
+  }
+  /** Every update is processed by this method before merging. */
+  _update({ ...props }, isLoop) {
+    const { key, defaultProps } = this;
+    if (props.default)
+      Object.assign(
+        defaultProps,
+        getDefaultProps(
+          props,
+          (value, prop) => /^on/.test(prop) ? resolveProp(value, key) : value
+        )
+      );
+    mergeActiveFn(this, props, "onProps");
+    sendEvent(this, "onProps", props, this);
+    const range = this._prepareNode(props);
+    if (Object.isFrozen(this)) {
+      throw Error(
+        "Cannot animate a `SpringValue` object that is frozen. Did you forget to pass your component to `animated(...)` before animating its props?"
+      );
+    }
+    const state = this._state;
+    return scheduleProps(++this._lastCallId, {
+      key,
+      props,
+      defaultProps,
+      state,
+      actions: {
+        pause: () => {
+          if (!isPaused(this)) {
+            setPausedBit(this, true);
+            flushCalls(state.pauseQueue);
+            sendEvent(
+              this,
+              "onPause",
+              getFinishedResult(this, checkFinished(this, this.animation.to)),
+              this
+            );
+          }
+        },
+        resume: () => {
+          if (isPaused(this)) {
+            setPausedBit(this, false);
+            if (isAnimating(this)) {
+              this._resume();
+            }
+            flushCalls(state.resumeQueue);
+            sendEvent(
+              this,
+              "onResume",
+              getFinishedResult(this, checkFinished(this, this.animation.to)),
+              this
+            );
+          }
+        },
+        start: this._merge.bind(this, range)
+      }
+    }).then((result) => {
+      if (props.loop && result.finished && !(isLoop && result.noop)) {
+        const nextProps = createLoopUpdate(props);
+        if (nextProps) {
+          return this._update(nextProps, true);
+        }
+      }
+      return result;
+    });
+  }
+  /** Merge props into the current animation */
+  _merge(range, props, resolve) {
+    if (props.cancel) {
+      this.stop(true);
+      return resolve(getCancelledResult(this));
+    }
+    const hasToProp = !is.und(range.to);
+    const hasFromProp = !is.und(range.from);
+    if (hasToProp || hasFromProp) {
+      if (props.callId > this._lastToId) {
+        this._lastToId = props.callId;
+      } else {
+        return resolve(getCancelledResult(this));
+      }
+    }
+    const { key, defaultProps, animation: anim } = this;
+    const { to: prevTo, from: prevFrom } = anim;
+    let { to: to2 = prevTo, from = prevFrom } = range;
+    if (hasFromProp && !hasToProp && (!props.default || is.und(to2))) {
+      to2 = from;
+    }
+    if (props.reverse)
+      [to2, from] = [from, to2];
+    const hasFromChanged = !isEqual(from, prevFrom);
+    if (hasFromChanged) {
+      anim.from = from;
+    }
+    from = getFluidValue(from);
+    const hasToChanged = !isEqual(to2, prevTo);
+    if (hasToChanged) {
+      this._focus(to2);
+    }
+    const hasAsyncTo = isAsyncTo(props.to);
+    const { config: config2 } = anim;
+    const { decay, velocity } = config2;
+    if (hasToProp || hasFromProp) {
+      config2.velocity = 0;
+    }
+    if (props.config && !hasAsyncTo) {
+      mergeConfig(
+        config2,
+        callProp(props.config, key),
+        // Avoid calling the same "config" prop twice.
+        props.config !== defaultProps.config ? callProp(defaultProps.config, key) : void 0
+      );
+    }
+    let node = getAnimated(this);
+    if (!node || is.und(to2)) {
+      return resolve(getFinishedResult(this, true));
+    }
+    const reset = (
+      // When `reset` is undefined, the `from` prop implies `reset: true`,
+      // except for declarative updates. When `reset` is defined, there
+      // must exist a value to animate from.
+      is.und(props.reset) ? hasFromProp && !props.default : !is.und(from) && matchProp(props.reset, key)
+    );
+    const value = reset ? from : this.get();
+    const goal = computeGoal(to2);
+    const isAnimatable = is.num(goal) || is.arr(goal) || isAnimatedString(goal);
+    const immediate = !hasAsyncTo && (!isAnimatable || matchProp(defaultProps.immediate || props.immediate, key));
+    if (hasToChanged) {
+      const nodeType = getAnimatedType(to2);
+      if (nodeType !== node.constructor) {
+        if (immediate) {
+          node = this._set(goal);
+        } else
+          throw Error(
+            `Cannot animate between ${node.constructor.name} and ${nodeType.name}, as the "to" prop suggests`
+          );
+      }
+    }
+    const goalType = node.constructor;
+    let started = hasFluidValue(to2);
+    let finished = false;
+    if (!started) {
+      const hasValueChanged = reset || !hasAnimated(this) && hasFromChanged;
+      if (hasToChanged || hasValueChanged) {
+        finished = isEqual(computeGoal(value), goal);
+        started = !finished;
+      }
+      if (!isEqual(anim.immediate, immediate) && !immediate || !isEqual(config2.decay, decay) || !isEqual(config2.velocity, velocity)) {
+        started = true;
+      }
+    }
+    if (finished && isAnimating(this)) {
+      if (anim.changed && !reset) {
+        started = true;
+      } else if (!started) {
+        this._stop(prevTo);
+      }
+    }
+    if (!hasAsyncTo) {
+      if (started || hasFluidValue(prevTo)) {
+        anim.values = node.getPayload();
+        anim.toValues = hasFluidValue(to2) ? null : goalType == AnimatedString ? [1] : toArray(goal);
+      }
+      if (anim.immediate != immediate) {
+        anim.immediate = immediate;
+        if (!immediate && !reset) {
+          this._set(prevTo);
+        }
+      }
+      if (started) {
+        const { onRest } = anim;
+        each(ACTIVE_EVENTS, (type) => mergeActiveFn(this, props, type));
+        const result = getFinishedResult(this, checkFinished(this, prevTo));
+        flushCalls(this._pendingCalls, result);
+        this._pendingCalls.add(resolve);
+        if (anim.changed)
+          raf.batchedUpdates(() => {
+            var _a;
+            anim.changed = !reset;
+            onRest == null ? void 0 : onRest(result, this);
+            if (reset) {
+              callProp(defaultProps.onRest, result);
+            } else {
+              (_a = anim.onStart) == null ? void 0 : _a.call(anim, result, this);
+            }
+          });
+      }
+    }
+    if (reset) {
+      this._set(value);
+    }
+    if (hasAsyncTo) {
+      resolve(runAsync(props.to, props, this._state, this));
+    } else if (started) {
+      this._start();
+    } else if (isAnimating(this) && !hasToChanged) {
+      this._pendingCalls.add(resolve);
+    } else {
+      resolve(getNoopResult(value));
+    }
+  }
+  /** Update the `animation.to` value, which might be a `FluidValue` */
+  _focus(value) {
+    const anim = this.animation;
+    if (value !== anim.to) {
+      if (getFluidObservers(this)) {
+        this._detach();
+      }
+      anim.to = value;
+      if (getFluidObservers(this)) {
+        this._attach();
+      }
+    }
+  }
+  _attach() {
+    let priority2 = 0;
+    const { to: to2 } = this.animation;
+    if (hasFluidValue(to2)) {
+      addFluidObserver(to2, this);
+      if (isFrameValue(to2)) {
+        priority2 = to2.priority + 1;
+      }
+    }
+    this.priority = priority2;
+  }
+  _detach() {
+    const { to: to2 } = this.animation;
+    if (hasFluidValue(to2)) {
+      removeFluidObserver(to2, this);
+    }
+  }
+  /**
+   * Update the current value from outside the frameloop,
+   * and return the `Animated` node.
+   */
+  _set(arg, idle = true) {
+    const value = getFluidValue(arg);
+    if (!is.und(value)) {
+      const oldNode = getAnimated(this);
+      if (!oldNode || !isEqual(value, oldNode.getValue())) {
+        const nodeType = getAnimatedType(value);
+        if (!oldNode || oldNode.constructor != nodeType) {
+          setAnimated(this, nodeType.create(value));
+        } else {
+          oldNode.setValue(value);
+        }
+        if (oldNode) {
+          raf.batchedUpdates(() => {
+            this._onChange(value, idle);
+          });
+        }
+      }
+    }
+    return getAnimated(this);
+  }
+  _onStart() {
+    const anim = this.animation;
+    if (!anim.changed) {
+      anim.changed = true;
+      sendEvent(
+        this,
+        "onStart",
+        getFinishedResult(this, checkFinished(this, anim.to)),
+        this
+      );
+    }
+  }
+  _onChange(value, idle) {
+    if (!idle) {
+      this._onStart();
+      callProp(this.animation.onChange, value, this);
+    }
+    callProp(this.defaultProps.onChange, value, this);
+    super._onChange(value, idle);
+  }
+  // This method resets the animation state (even if already animating) to
+  // ensure the latest from/to range is used, and it also ensures this spring
+  // is added to the frameloop.
+  _start() {
+    const anim = this.animation;
+    getAnimated(this).reset(getFluidValue(anim.to));
+    if (!anim.immediate) {
+      anim.fromValues = anim.values.map((node) => node.lastPosition);
+    }
+    if (!isAnimating(this)) {
+      setActiveBit(this, true);
+      if (!isPaused(this)) {
+        this._resume();
+      }
+    }
+  }
+  _resume() {
+    if (globals_exports.skipAnimation) {
+      this.finish();
+    } else {
+      frameLoop.start(this);
+    }
+  }
+  /**
+   * Exit the frameloop and notify `onRest` listeners.
+   *
+   * Always wrap `_stop` calls with `batchedUpdates`.
+   */
+  _stop(goal, cancel) {
+    if (isAnimating(this)) {
+      setActiveBit(this, false);
+      const anim = this.animation;
+      each(anim.values, (node) => {
+        node.done = true;
+      });
+      if (anim.toValues) {
+        anim.onChange = anim.onPause = anim.onResume = void 0;
+      }
+      callFluidObservers(this, {
+        type: "idle",
+        parent: this
+      });
+      const result = cancel ? getCancelledResult(this.get()) : getFinishedResult(this.get(), checkFinished(this, goal ?? anim.to));
+      flushCalls(this._pendingCalls, result);
+      if (anim.changed) {
+        anim.changed = false;
+        sendEvent(this, "onRest", result, this);
+      }
+    }
+  }
+};
+function checkFinished(target, to2) {
+  const goal = computeGoal(to2);
+  const value = computeGoal(target.get());
+  return isEqual(value, goal);
+}
+function createLoopUpdate(props, loop2 = props.loop, to2 = props.to) {
+  const loopRet = callProp(loop2);
+  if (loopRet) {
+    const overrides = loopRet !== true && inferTo(loopRet);
+    const reverse = (overrides || props).reverse;
+    const reset = !overrides || overrides.reset;
+    return createUpdate({
+      ...props,
+      loop: loop2,
+      // Avoid updating default props when looping.
+      default: false,
+      // Never loop the `pause` prop.
+      pause: void 0,
+      // For the "reverse" prop to loop as expected, the "to" prop
+      // must be undefined. The "reverse" prop is ignored when the
+      // "to" prop is an array or function.
+      to: !reverse || isAsyncTo(to2) ? to2 : void 0,
+      // Ignore the "from" prop except on reset.
+      from: reset ? props.from : void 0,
+      reset,
+      // The "loop" prop can return a "useSpring" props object to
+      // override any of the original props.
+      ...overrides
+    });
+  }
+}
+function createUpdate(props) {
+  const { to: to2, from } = props = inferTo(props);
+  const keys = /* @__PURE__ */ new Set();
+  if (is.obj(to2))
+    findDefined(to2, keys);
+  if (is.obj(from))
+    findDefined(from, keys);
+  props.keys = keys.size ? Array.from(keys) : null;
+  return props;
+}
+function declareUpdate(props) {
+  const update2 = createUpdate(props);
+  if (is.und(update2.default)) {
+    update2.default = getDefaultProps(update2);
+  }
+  return update2;
+}
+function findDefined(values, keys) {
+  eachProp(values, (value, key) => value != null && keys.add(key));
+}
+var ACTIVE_EVENTS = [
+  "onStart",
+  "onRest",
+  "onChange",
+  "onPause",
+  "onResume"
+];
+function mergeActiveFn(target, props, type) {
+  target.animation[type] = props[type] !== getDefaultProp(props, type) ? resolveProp(props[type], target.key) : void 0;
+}
+function sendEvent(target, type, ...args) {
+  var _a, _b, _c, _d;
+  (_b = (_a = target.animation)[type]) == null ? void 0 : _b.call(_a, ...args);
+  (_d = (_c = target.defaultProps)[type]) == null ? void 0 : _d.call(_c, ...args);
+}
+var BATCHED_EVENTS = ["onStart", "onChange", "onRest"];
+var nextId2 = 1;
+var Controller = class {
+  constructor(props, flush3) {
+    this.id = nextId2++;
+    this.springs = {};
+    this.queue = [];
+    this._lastAsyncId = 0;
+    this._active = /* @__PURE__ */ new Set();
+    this._changed = /* @__PURE__ */ new Set();
+    this._started = false;
+    this._state = {
+      paused: false,
+      pauseQueue: /* @__PURE__ */ new Set(),
+      resumeQueue: /* @__PURE__ */ new Set(),
+      timeouts: /* @__PURE__ */ new Set()
+    };
+    this._events = {
+      onStart: /* @__PURE__ */ new Map(),
+      onChange: /* @__PURE__ */ new Map(),
+      onRest: /* @__PURE__ */ new Map()
+    };
+    this._onFrame = this._onFrame.bind(this);
+    if (flush3) {
+      this._flush = flush3;
+    }
+    if (props) {
+      this.start({ default: true, ...props });
+    }
+  }
+  /**
+   * Equals `true` when no spring values are in the frameloop, and
+   * no async animation is currently active.
+   */
+  get idle() {
+    return !this._state.asyncTo && Object.values(this.springs).every((spring) => {
+      return spring.idle && !spring.isDelayed && !spring.isPaused;
+    });
+  }
+  get item() {
+    return this._item;
+  }
+  set item(item) {
+    this._item = item;
+  }
+  /** Get the current values of our springs */
+  get() {
+    const values = {};
+    this.each((spring, key) => values[key] = spring.get());
+    return values;
+  }
+  /** Set the current values without animating. */
+  set(values) {
+    for (const key in values) {
+      const value = values[key];
+      if (!is.und(value)) {
+        this.springs[key].set(value);
+      }
+    }
+  }
+  /** Push an update onto the queue of each value. */
+  update(props) {
+    if (props) {
+      this.queue.push(createUpdate(props));
+    }
+    return this;
+  }
+  /**
+   * Start the queued animations for every spring, and resolve the returned
+   * promise once all queued animations have finished or been cancelled.
+   *
+   * When you pass a queue (instead of nothing), that queue is used instead of
+   * the queued animations added with the `update` method, which are left alone.
+   */
+  start(props) {
+    let { queue } = this;
+    if (props) {
+      queue = toArray(props).map(createUpdate);
+    } else {
+      this.queue = [];
+    }
+    if (this._flush) {
+      return this._flush(this, queue);
+    }
+    prepareKeys(this, queue);
+    return flushUpdateQueue(this, queue);
+  }
+  /** @internal */
+  stop(arg, keys) {
+    if (arg !== !!arg) {
+      keys = arg;
+    }
+    if (keys) {
+      const springs = this.springs;
+      each(toArray(keys), (key) => springs[key].stop(!!arg));
+    } else {
+      stopAsync(this._state, this._lastAsyncId);
+      this.each((spring) => spring.stop(!!arg));
+    }
+    return this;
+  }
+  /** Freeze the active animation in time */
+  pause(keys) {
+    if (is.und(keys)) {
+      this.start({ pause: true });
+    } else {
+      const springs = this.springs;
+      each(toArray(keys), (key) => springs[key].pause());
+    }
+    return this;
+  }
+  /** Resume the animation if paused. */
+  resume(keys) {
+    if (is.und(keys)) {
+      this.start({ pause: false });
+    } else {
+      const springs = this.springs;
+      each(toArray(keys), (key) => springs[key].resume());
+    }
+    return this;
+  }
+  /** Call a function once per spring value */
+  each(iterator) {
+    eachProp(this.springs, iterator);
+  }
+  /** @internal Called at the end of every animation frame */
+  _onFrame() {
+    const { onStart, onChange, onRest } = this._events;
+    const active = this._active.size > 0;
+    const changed = this._changed.size > 0;
+    if (active && !this._started || changed && !this._started) {
+      this._started = true;
+      flush(onStart, ([onStart2, result]) => {
+        result.value = this.get();
+        onStart2(result, this, this._item);
+      });
+    }
+    const idle = !active && this._started;
+    const values = changed || idle && onRest.size ? this.get() : null;
+    if (changed && onChange.size) {
+      flush(onChange, ([onChange2, result]) => {
+        result.value = values;
+        onChange2(result, this, this._item);
+      });
+    }
+    if (idle) {
+      this._started = false;
+      flush(onRest, ([onRest2, result]) => {
+        result.value = values;
+        onRest2(result, this, this._item);
+      });
+    }
+  }
+  /** @internal */
+  eventObserved(event) {
+    if (event.type == "change") {
+      this._changed.add(event.parent);
+      if (!event.idle) {
+        this._active.add(event.parent);
+      }
+    } else if (event.type == "idle") {
+      this._active.delete(event.parent);
+    } else
+      return;
+    raf.onFrame(this._onFrame);
+  }
+};
+function flushUpdateQueue(ctrl, queue) {
+  return Promise.all(queue.map((props) => flushUpdate(ctrl, props))).then(
+    (results) => getCombinedResult(ctrl, results)
+  );
+}
+async function flushUpdate(ctrl, props, isLoop) {
+  const { keys, to: to2, from, loop: loop2, onRest, onResolve } = props;
+  const defaults2 = is.obj(props.default) && props.default;
+  if (loop2) {
+    props.loop = false;
+  }
+  if (to2 === false)
+    props.to = null;
+  if (from === false)
+    props.from = null;
+  const asyncTo = is.arr(to2) || is.fun(to2) ? to2 : void 0;
+  if (asyncTo) {
+    props.to = void 0;
+    props.onRest = void 0;
+    if (defaults2) {
+      defaults2.onRest = void 0;
+    }
+  } else {
+    each(BATCHED_EVENTS, (key) => {
+      const handler = props[key];
+      if (is.fun(handler)) {
+        const queue = ctrl["_events"][key];
+        props[key] = ({ finished, cancelled }) => {
+          const result2 = queue.get(handler);
+          if (result2) {
+            if (!finished)
+              result2.finished = false;
+            if (cancelled)
+              result2.cancelled = true;
+          } else {
+            queue.set(handler, {
+              value: null,
+              finished: finished || false,
+              cancelled: cancelled || false
+            });
+          }
+        };
+        if (defaults2) {
+          defaults2[key] = props[key];
+        }
+      }
+    });
+  }
+  const state = ctrl["_state"];
+  if (props.pause === !state.paused) {
+    state.paused = props.pause;
+    flushCalls(props.pause ? state.pauseQueue : state.resumeQueue);
+  } else if (state.paused) {
+    props.pause = true;
+  }
+  const promises = (keys || Object.keys(ctrl.springs)).map(
+    (key) => ctrl.springs[key].start(props)
+  );
+  const cancel = props.cancel === true || getDefaultProp(props, "cancel") === true;
+  if (asyncTo || cancel && state.asyncId) {
+    promises.push(
+      scheduleProps(++ctrl["_lastAsyncId"], {
+        props,
+        state,
+        actions: {
+          pause: noop,
+          resume: noop,
+          start(props2, resolve) {
+            if (cancel) {
+              stopAsync(state, ctrl["_lastAsyncId"]);
+              resolve(getCancelledResult(ctrl));
+            } else {
+              props2.onRest = onRest;
+              resolve(
+                runAsync(
+                  asyncTo,
+                  props2,
+                  state,
+                  ctrl
+                )
+              );
+            }
+          }
+        }
+      })
+    );
+  }
+  if (state.paused) {
+    await new Promise((resume) => {
+      state.resumeQueue.add(resume);
+    });
+  }
+  const result = getCombinedResult(ctrl, await Promise.all(promises));
+  if (loop2 && result.finished && !(isLoop && result.noop)) {
+    const nextProps = createLoopUpdate(props, loop2, to2);
+    if (nextProps) {
+      prepareKeys(ctrl, [nextProps]);
+      return flushUpdate(ctrl, nextProps, true);
+    }
+  }
+  if (onResolve) {
+    raf.batchedUpdates(() => onResolve(result, ctrl, ctrl.item));
+  }
+  return result;
+}
+function getSprings(ctrl, props) {
+  const springs = { ...ctrl.springs };
+  if (props) {
+    each(toArray(props), (props2) => {
+      if (is.und(props2.keys)) {
+        props2 = createUpdate(props2);
+      }
+      if (!is.obj(props2.to)) {
+        props2 = { ...props2, to: void 0 };
+      }
+      prepareSprings(springs, props2, (key) => {
+        return createSpring(key);
+      });
+    });
+  }
+  setSprings(ctrl, springs);
+  return springs;
+}
+function setSprings(ctrl, springs) {
+  eachProp(springs, (spring, key) => {
+    if (!ctrl.springs[key]) {
+      ctrl.springs[key] = spring;
+      addFluidObserver(spring, ctrl);
+    }
+  });
+}
+function createSpring(key, observer) {
+  const spring = new SpringValue();
+  spring.key = key;
+  if (observer) {
+    addFluidObserver(spring, observer);
+  }
+  return spring;
+}
+function prepareSprings(springs, props, create) {
+  if (props.keys) {
+    each(props.keys, (key) => {
+      const spring = springs[key] || (springs[key] = create(key));
+      spring["_prepareNode"](props);
+    });
+  }
+}
+function prepareKeys(ctrl, queue) {
+  each(queue, (props) => {
+    prepareSprings(ctrl.springs, props, (key) => {
+      return createSpring(key, ctrl);
+    });
+  });
+}
+var SpringContext = ({
+  children,
+  ...props
+}) => {
+  const inherited = React.useContext(ctx);
+  const pause = props.pause || !!inherited.pause, immediate = props.immediate || !!inherited.immediate;
+  props = useMemoOne(() => ({ pause, immediate }), [pause, immediate]);
+  const { Provider } = ctx;
+  return /* @__PURE__ */ React__namespace.createElement(Provider, { value: props }, children);
+};
+var ctx = makeContext(SpringContext, {});
+SpringContext.Provider = ctx.Provider;
+SpringContext.Consumer = ctx.Consumer;
+function makeContext(target, init) {
+  Object.assign(target, React__namespace.createContext(init));
+  target.Provider._context = target;
+  target.Consumer._context = target;
+  return target;
+}
+var SpringRef = () => {
+  const current = [];
+  const SpringRef2 = function(props) {
+    deprecateDirectCall();
+    const results = [];
+    each(current, (ctrl, i) => {
+      if (is.und(props)) {
+        results.push(ctrl.start());
+      } else {
+        const update2 = _getProps(props, ctrl, i);
+        if (update2) {
+          results.push(ctrl.start(update2));
+        }
+      }
+    });
+    return results;
+  };
+  SpringRef2.current = current;
+  SpringRef2.add = function(ctrl) {
+    if (!current.includes(ctrl)) {
+      current.push(ctrl);
+    }
+  };
+  SpringRef2.delete = function(ctrl) {
+    const i = current.indexOf(ctrl);
+    if (~i)
+      current.splice(i, 1);
+  };
+  SpringRef2.pause = function() {
+    each(current, (ctrl) => ctrl.pause(...arguments));
+    return this;
+  };
+  SpringRef2.resume = function() {
+    each(current, (ctrl) => ctrl.resume(...arguments));
+    return this;
+  };
+  SpringRef2.set = function(values) {
+    each(current, (ctrl, i) => {
+      const update2 = is.fun(values) ? values(i, ctrl) : values;
+      if (update2) {
+        ctrl.set(update2);
+      }
+    });
+  };
+  SpringRef2.start = function(props) {
+    const results = [];
+    each(current, (ctrl, i) => {
+      if (is.und(props)) {
+        results.push(ctrl.start());
+      } else {
+        const update2 = this._getProps(props, ctrl, i);
+        if (update2) {
+          results.push(ctrl.start(update2));
+        }
+      }
+    });
+    return results;
+  };
+  SpringRef2.stop = function() {
+    each(current, (ctrl) => ctrl.stop(...arguments));
+    return this;
+  };
+  SpringRef2.update = function(props) {
+    each(current, (ctrl, i) => ctrl.update(this._getProps(props, ctrl, i)));
+    return this;
+  };
+  const _getProps = function(arg, ctrl, index) {
+    return is.fun(arg) ? arg(index, ctrl) : arg;
+  };
+  SpringRef2._getProps = _getProps;
+  return SpringRef2;
+};
+function useSprings(length, props, deps) {
+  const propsFn = is.fun(props) && props;
+  if (propsFn && !deps)
+    deps = [];
+  const ref = React.useMemo(
+    () => propsFn || arguments.length == 3 ? SpringRef() : void 0,
+    []
+  );
+  const layoutId = React.useRef(0);
+  const forceUpdate = useForceUpdate();
+  const state = React.useMemo(
+    () => ({
+      ctrls: [],
+      queue: [],
+      flush(ctrl, updates2) {
+        const springs2 = getSprings(ctrl, updates2);
+        const canFlushSync = layoutId.current > 0 && !state.queue.length && !Object.keys(springs2).some((key) => !ctrl.springs[key]);
+        return canFlushSync ? flushUpdateQueue(ctrl, updates2) : new Promise((resolve) => {
+          setSprings(ctrl, springs2);
+          state.queue.push(() => {
+            resolve(flushUpdateQueue(ctrl, updates2));
+          });
+          forceUpdate();
+        });
+      }
+    }),
+    []
+  );
+  const ctrls = React.useRef([...state.ctrls]);
+  const updates = [];
+  const prevLength = usePrev(length) || 0;
+  React.useMemo(() => {
+    each(ctrls.current.slice(length, prevLength), (ctrl) => {
+      detachRefs(ctrl, ref);
+      ctrl.stop(true);
+    });
+    ctrls.current.length = length;
+    declareUpdates(prevLength, length);
+  }, [length]);
+  React.useMemo(() => {
+    declareUpdates(0, Math.min(prevLength, length));
+  }, deps);
+  function declareUpdates(startIndex, endIndex) {
+    for (let i = startIndex; i < endIndex; i++) {
+      const ctrl = ctrls.current[i] || (ctrls.current[i] = new Controller(null, state.flush));
+      const update2 = propsFn ? propsFn(i, ctrl) : props[i];
+      if (update2) {
+        updates[i] = declareUpdate(update2);
+      }
+    }
+  }
+  const springs = ctrls.current.map((ctrl, i) => getSprings(ctrl, updates[i]));
+  const context2 = React.useContext(SpringContext);
+  const prevContext = usePrev(context2);
+  const hasContext = context2 !== prevContext && hasProps(context2);
+  useIsomorphicLayoutEffect(() => {
+    layoutId.current++;
+    state.ctrls = ctrls.current;
+    const { queue } = state;
+    if (queue.length) {
+      state.queue = [];
+      each(queue, (cb) => cb());
+    }
+    each(ctrls.current, (ctrl, i) => {
+      ref == null ? void 0 : ref.add(ctrl);
+      if (hasContext) {
+        ctrl.start({ default: context2 });
+      }
+      const update2 = updates[i];
+      if (update2) {
+        replaceRef(ctrl, update2.ref);
+        if (ctrl.ref) {
+          ctrl.queue.push(update2);
+        } else {
+          ctrl.start(update2);
+        }
+      }
+    });
+  });
+  useOnce(() => () => {
+    each(state.ctrls, (ctrl) => ctrl.stop(true));
+  });
+  const values = springs.map((x) => ({ ...x }));
+  return ref ? [values, ref] : values;
+}
+function useSpring(props, deps) {
+  const isFn = is.fun(props);
+  const [[values], ref] = useSprings(
+    1,
+    isFn ? props : [props],
+    isFn ? deps || [] : deps
+  );
+  return isFn || arguments.length == 2 ? [values, ref] : values;
+}
+var Interpolation = class extends FrameValue {
+  constructor(source, args) {
+    super();
+    this.source = source;
+    this.idle = true;
+    this._active = /* @__PURE__ */ new Set();
+    this.calc = createInterpolator(...args);
+    const value = this._get();
+    const nodeType = getAnimatedType(value);
+    setAnimated(this, nodeType.create(value));
+  }
+  advance(_dt) {
+    const value = this._get();
+    const oldValue = this.get();
+    if (!isEqual(value, oldValue)) {
+      getAnimated(this).setValue(value);
+      this._onChange(value, this.idle);
+    }
+    if (!this.idle && checkIdle(this._active)) {
+      becomeIdle(this);
+    }
+  }
+  _get() {
+    const inputs = is.arr(this.source) ? this.source.map(getFluidValue) : toArray(getFluidValue(this.source));
+    return this.calc(...inputs);
+  }
+  _start() {
+    if (this.idle && !checkIdle(this._active)) {
+      this.idle = false;
+      each(getPayload(this), (node) => {
+        node.done = false;
+      });
+      if (globals_exports.skipAnimation) {
+        raf.batchedUpdates(() => this.advance());
+        becomeIdle(this);
+      } else {
+        frameLoop.start(this);
+      }
+    }
+  }
+  // Observe our sources only when we're observed.
+  _attach() {
+    let priority2 = 1;
+    each(toArray(this.source), (source) => {
+      if (hasFluidValue(source)) {
+        addFluidObserver(source, this);
+      }
+      if (isFrameValue(source)) {
+        if (!source.idle) {
+          this._active.add(source);
+        }
+        priority2 = Math.max(priority2, source.priority + 1);
+      }
+    });
+    this.priority = priority2;
+    this._start();
+  }
+  // Stop observing our sources once we have no observers.
+  _detach() {
+    each(toArray(this.source), (source) => {
+      if (hasFluidValue(source)) {
+        removeFluidObserver(source, this);
+      }
+    });
+    this._active.clear();
+    becomeIdle(this);
+  }
+  /** @internal */
+  eventObserved(event) {
+    if (event.type == "change") {
+      if (event.idle) {
+        this.advance();
+      } else {
+        this._active.add(event.parent);
+        this._start();
+      }
+    } else if (event.type == "idle") {
+      this._active.delete(event.parent);
+    } else if (event.type == "priority") {
+      this.priority = toArray(this.source).reduce(
+        (highest, parent) => Math.max(highest, (isFrameValue(parent) ? parent.priority : 0) + 1),
+        0
+      );
+    }
+  }
+};
+function isIdle(source) {
+  return source.idle !== false;
+}
+function checkIdle(active) {
+  return !active.size || Array.from(active).every(isIdle);
+}
+function becomeIdle(self) {
+  if (!self.idle) {
+    self.idle = true;
+    each(getPayload(self), (node) => {
+      node.done = true;
+    });
+    callFluidObservers(self, {
+      type: "idle",
+      parent: self
+    });
+  }
+}
+globals_exports.assign({
+  createStringInterpolator: createStringInterpolator2,
+  to: (source, args) => new Interpolation(source, args)
+});
+var isCustomPropRE = /^--/;
+function dangerousStyleValue(name, value) {
+  if (value == null || typeof value === "boolean" || value === "")
+    return "";
+  if (typeof value === "number" && value !== 0 && !isCustomPropRE.test(name) && !(isUnitlessNumber.hasOwnProperty(name) && isUnitlessNumber[name]))
+    return value + "px";
+  return ("" + value).trim();
+}
+var attributeCache = {};
+function applyAnimatedValues(instance, props) {
+  if (!instance.nodeType || !instance.setAttribute) {
+    return false;
+  }
+  const isFilterElement = instance.nodeName === "filter" || instance.parentNode && instance.parentNode.nodeName === "filter";
+  const {
+    className,
+    style,
+    children,
+    scrollTop,
+    scrollLeft,
+    viewBox,
+    ...attributes
+  } = props;
+  const values = Object.values(attributes);
+  const names = Object.keys(attributes).map(
+    (name) => isFilterElement || instance.hasAttribute(name) ? name : attributeCache[name] || (attributeCache[name] = name.replace(
+      /([A-Z])/g,
+      // Attributes are written in dash case
+      (n) => "-" + n.toLowerCase()
+    ))
+  );
+  if (children !== void 0) {
+    instance.textContent = children;
+  }
+  for (const name in style) {
+    if (style.hasOwnProperty(name)) {
+      const value = dangerousStyleValue(name, style[name]);
+      if (isCustomPropRE.test(name)) {
+        instance.style.setProperty(name, value);
+      } else {
+        instance.style[name] = value;
+      }
+    }
+  }
+  names.forEach((name, i) => {
+    instance.setAttribute(name, values[i]);
+  });
+  if (className !== void 0) {
+    instance.className = className;
+  }
+  if (scrollTop !== void 0) {
+    instance.scrollTop = scrollTop;
+  }
+  if (scrollLeft !== void 0) {
+    instance.scrollLeft = scrollLeft;
+  }
+  if (viewBox !== void 0) {
+    instance.setAttribute("viewBox", viewBox);
+  }
+}
+var isUnitlessNumber = {
+  animationIterationCount: true,
+  borderImageOutset: true,
+  borderImageSlice: true,
+  borderImageWidth: true,
+  boxFlex: true,
+  boxFlexGroup: true,
+  boxOrdinalGroup: true,
+  columnCount: true,
+  columns: true,
+  flex: true,
+  flexGrow: true,
+  flexPositive: true,
+  flexShrink: true,
+  flexNegative: true,
+  flexOrder: true,
+  gridRow: true,
+  gridRowEnd: true,
+  gridRowSpan: true,
+  gridRowStart: true,
+  gridColumn: true,
+  gridColumnEnd: true,
+  gridColumnSpan: true,
+  gridColumnStart: true,
+  fontWeight: true,
+  lineClamp: true,
+  lineHeight: true,
+  opacity: true,
+  order: true,
+  orphans: true,
+  tabSize: true,
+  widows: true,
+  zIndex: true,
+  zoom: true,
+  // SVG-related properties
+  fillOpacity: true,
+  floodOpacity: true,
+  stopOpacity: true,
+  strokeDasharray: true,
+  strokeDashoffset: true,
+  strokeMiterlimit: true,
+  strokeOpacity: true,
+  strokeWidth: true
+};
+var prefixKey = (prefix2, key) => prefix2 + key.charAt(0).toUpperCase() + key.substring(1);
+var prefixes = ["Webkit", "Ms", "Moz", "O"];
+isUnitlessNumber = Object.keys(isUnitlessNumber).reduce((acc, prop) => {
+  prefixes.forEach((prefix2) => acc[prefixKey(prefix2, prop)] = acc[prop]);
+  return acc;
+}, isUnitlessNumber);
+var domTransforms = /^(matrix|translate|scale|rotate|skew)/;
+var pxTransforms = /^(translate)/;
+var degTransforms = /^(rotate|skew)/;
+var addUnit = (value, unit) => is.num(value) && value !== 0 ? value + unit : value;
+var isValueIdentity = (value, id) => is.arr(value) ? value.every((v2) => isValueIdentity(v2, id)) : is.num(value) ? value === id : parseFloat(value) === id;
+var AnimatedStyle = class extends AnimatedObject {
+  constructor({ x, y, z, ...style }) {
+    const inputs = [];
+    const transforms = [];
+    if (x || y || z) {
+      inputs.push([x || 0, y || 0, z || 0]);
+      transforms.push((xyz) => [
+        `translate3d(${xyz.map((v2) => addUnit(v2, "px")).join(",")})`,
+        // prettier-ignore
+        isValueIdentity(xyz, 0)
+      ]);
+    }
+    eachProp(style, (value, key) => {
+      if (key === "transform") {
+        inputs.push([value || ""]);
+        transforms.push((transform) => [transform, transform === ""]);
+      } else if (domTransforms.test(key)) {
+        delete style[key];
+        if (is.und(value))
+          return;
+        const unit = pxTransforms.test(key) ? "px" : degTransforms.test(key) ? "deg" : "";
+        inputs.push(toArray(value));
+        transforms.push(
+          key === "rotate3d" ? ([x2, y2, z2, deg]) => [
+            `rotate3d(${x2},${y2},${z2},${addUnit(deg, unit)})`,
+            isValueIdentity(deg, 0)
+          ] : (input) => [
+            `${key}(${input.map((v2) => addUnit(v2, unit)).join(",")})`,
+            isValueIdentity(input, key.startsWith("scale") ? 1 : 0)
+          ]
+        );
+      }
+    });
+    if (inputs.length) {
+      style.transform = new FluidTransform(inputs, transforms);
+    }
+    super(style);
+  }
+};
+var FluidTransform = class extends FluidValue {
+  constructor(inputs, transforms) {
+    super();
+    this.inputs = inputs;
+    this.transforms = transforms;
+    this._value = null;
+  }
+  get() {
+    return this._value || (this._value = this._get());
+  }
+  _get() {
+    let transform = "";
+    let identity2 = true;
+    each(this.inputs, (input, i) => {
+      const arg1 = getFluidValue(input[0]);
+      const [t, id] = this.transforms[i](
+        is.arr(arg1) ? arg1 : input.map(getFluidValue)
+      );
+      transform += " " + t;
+      identity2 = identity2 && id;
+    });
+    return identity2 ? "none" : transform;
+  }
+  // Start observing our inputs once we have an observer.
+  observerAdded(count) {
+    if (count == 1)
+      each(
+        this.inputs,
+        (input) => each(
+          input,
+          (value) => hasFluidValue(value) && addFluidObserver(value, this)
+        )
+      );
+  }
+  // Stop observing our inputs once we have no observers.
+  observerRemoved(count) {
+    if (count == 0)
+      each(
+        this.inputs,
+        (input) => each(
+          input,
+          (value) => hasFluidValue(value) && removeFluidObserver(value, this)
+        )
+      );
+  }
+  eventObserved(event) {
+    if (event.type == "change") {
+      this._value = null;
+    }
+    callFluidObservers(this, event);
+  }
+};
+var primitives = [
+  "a",
+  "abbr",
+  "address",
+  "area",
+  "article",
+  "aside",
+  "audio",
+  "b",
+  "base",
+  "bdi",
+  "bdo",
+  "big",
+  "blockquote",
+  "body",
+  "br",
+  "button",
+  "canvas",
+  "caption",
+  "cite",
+  "code",
+  "col",
+  "colgroup",
+  "data",
+  "datalist",
+  "dd",
+  "del",
+  "details",
+  "dfn",
+  "dialog",
+  "div",
+  "dl",
+  "dt",
+  "em",
+  "embed",
+  "fieldset",
+  "figcaption",
+  "figure",
+  "footer",
+  "form",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "head",
+  "header",
+  "hgroup",
+  "hr",
+  "html",
+  "i",
+  "iframe",
+  "img",
+  "input",
+  "ins",
+  "kbd",
+  "keygen",
+  "label",
+  "legend",
+  "li",
+  "link",
+  "main",
+  "map",
+  "mark",
+  "menu",
+  "menuitem",
+  "meta",
+  "meter",
+  "nav",
+  "noscript",
+  "object",
+  "ol",
+  "optgroup",
+  "option",
+  "output",
+  "p",
+  "param",
+  "picture",
+  "pre",
+  "progress",
+  "q",
+  "rp",
+  "rt",
+  "ruby",
+  "s",
+  "samp",
+  "script",
+  "section",
+  "select",
+  "small",
+  "source",
+  "span",
+  "strong",
+  "style",
+  "sub",
+  "summary",
+  "sup",
+  "table",
+  "tbody",
+  "td",
+  "textarea",
+  "tfoot",
+  "th",
+  "thead",
+  "time",
+  "title",
+  "tr",
+  "track",
+  "u",
+  "ul",
+  "var",
+  "video",
+  "wbr",
+  // SVG
+  "circle",
+  "clipPath",
+  "defs",
+  "ellipse",
+  "foreignObject",
+  "g",
+  "image",
+  "line",
+  "linearGradient",
+  "mask",
+  "path",
+  "pattern",
+  "polygon",
+  "polyline",
+  "radialGradient",
+  "rect",
+  "stop",
+  "svg",
+  "text",
+  "tspan"
+];
+globals_exports.assign({
+  batchedUpdates: reactDom.unstable_batchedUpdates,
+  createStringInterpolator: createStringInterpolator2,
+  colors: colors2
+});
+var host = createHost(primitives, {
+  applyAnimatedValues,
+  createAnimatedStyle: (style) => new AnimatedStyle(style),
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  getComponentProps: ({ scrollTop, scrollLeft, ...props }) => props
+});
+var animated = host.animated;
+const SNAP_TO_MAX_THRESHOLD = 5;
+const SNAP_TO_MIN_THRESHOLD = 100;
+const BOTTOM_SHEET_HANDLE_HEIGHT = 45;
+const INTERACTIVE_ELEMENTS = 'input, button, a, textarea, select, label, [role="button"], [onClick]';
+const SPRING_CONFIG = {
+  up: {
+    tension: 80,
+    // 튕기기
+    friction: 10,
+    // 묵직함
+    mass: 0.1,
+    velocity: 0
+  },
+  down: {
+    tension: 70,
+    friction: 10,
+    mass: 0.1,
+    velocity: 0
+  },
+  moving: {
+    tension: 600,
+    friction: 30,
+    mass: 0.1,
+    velocity: 0.1
+  }
+};
+const useBottomSheet = (props) => {
+  const { isOpen, onOpen, onClose, snapPercent, expendOnContentDrag } = props;
+  const bottomSheetRef = React.useRef(null);
+  const contentRef = React.useRef(null);
+  const metrics = React.useRef({
+    initTouchPosition: null,
+    initTransformValue: 0,
+    canDragRef: true,
+    maxTransformValue: 0,
+    initialOpenHeightPx: 0
+  });
+  const [springs, api] = useSpring(() => ({
+    transform: "translateY(0px)",
+    config: SPRING_CONFIG.down
+  }));
+  const snapToMax = () => {
+    const { maxTransformValue } = metrics.current;
+    api.start({
+      transform: `translateY(${maxTransformValue}px)`,
+      config: SPRING_CONFIG.up
+    });
+    if (onOpen) onOpen();
+  };
+  const snapToMin = () => {
+    api.start({
+      transform: "translateY(0px)",
+      config: SPRING_CONFIG.down
+    });
+    if (onClose) onClose();
+  };
+  const handleContentTouch = (e) => {
+    const target = e.target;
+    if (!target.matches(INTERACTIVE_ELEMENTS) && expendOnContentDrag) {
+      metrics.current.canDragRef = true;
+    } else {
+      metrics.current.canDragRef = false;
+    }
+  };
+  const handleStart = (clientY, e) => {
+    if (!bottomSheetRef.current) {
+      return;
+    }
+    const contentElement = contentRef.current;
+    const target = e.target;
+    if ((contentElement == null ? void 0 : contentElement.scrollTop) !== 0 && target.matches(INTERACTIVE_ELEMENTS)) {
+      return;
+    }
+    const currentTransform = springs.transform.get();
+    const initTransformValue = Number(
+      currentTransform.replace("translateY(", "").replace("px)", "") || 0
+    );
+    metrics.current.initTransformValue = initTransformValue;
+    metrics.current.initTouchPosition = clientY;
+  };
+  const handleMove = (clientY, e) => {
+    var _a;
+    const { initTouchPosition, initTransformValue, canDragRef, initialOpenHeightPx } = metrics.current;
+    if (!initTouchPosition || !bottomSheetRef.current) return;
+    const currTouchPosition = clientY;
+    const yDiff = (initTouchPosition - currTouchPosition) * -1 + initTransformValue;
+    const isMovingDown = initTransformValue < yDiff;
+    if (!canDragRef && !(isMovingDown && ((_a = contentRef.current) == null ? void 0 : _a.scrollTop) === 0)) return;
+    e.preventDefault();
+    const currTopYOffset = yDiff * -1 + initialOpenHeightPx;
+    const translateYOffset = window.innerHeight < currTopYOffset ? window.innerHeight * -1 + initialOpenHeightPx : yDiff;
+    api.start({
+      transform: `translateY(${translateYOffset}px)`,
+      config: SPRING_CONFIG.moving
+    });
+  };
+  const handleEnd = () => {
+    const { initTouchPosition, initTransformValue } = metrics.current;
+    if (!initTouchPosition || !bottomSheetRef.current) {
+      return;
+    }
+    const currentTransform = springs.transform.get();
+    const finalTransformValue = Number(
+      currentTransform.replace("translateY(", "").replace("px)", "") || 0
+    );
+    const transformedDistance = initTransformValue - finalTransformValue;
+    if (transformedDistance < 0 && SNAP_TO_MIN_THRESHOLD < Math.abs(transformedDistance)) {
+      snapToMin();
+    } else if (transformedDistance > 0 && SNAP_TO_MAX_THRESHOLD < Math.abs(transformedDistance)) {
+      snapToMax();
+    } else {
+      const isMovingUp = finalTransformValue > initTransformValue;
+      api.start({
+        transform: `translateY(${initTransformValue}px)`,
+        config: isMovingUp ? SPRING_CONFIG.up : SPRING_CONFIG.down
+      });
+    }
+    metrics.current.canDragRef = true;
+    metrics.current.initTouchPosition = null;
+  };
+  const handleTouch = {
+    start: (e) => handleStart(e.touches[0].clientY, e),
+    move: (e) => handleMove(e.touches[0].clientY, e),
+    end: handleEnd
+  };
+  const handleMouse = {
+    down: (e) => handleStart(e.clientY, e),
+    move: (e) => handleMove(e.clientY, e),
+    up: handleEnd,
+    leave: handleEnd
+  };
+  React.useEffect(() => {
+    if (isOpen) snapToMax();
+    else snapToMin();
+    const handleTouchMove = (e) => {
+      if (bottomSheetRef.current && !bottomSheetRef.current.contains(e.target)) {
+        e.preventDefault();
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("touchmove", handleTouchMove, { passive: false });
+    } else {
+      document.removeEventListener("touchmove", handleTouchMove);
+    }
+    return () => {
+      document.removeEventListener("touchmove", handleTouchMove);
+    };
+  }, [isOpen]);
+  React.useEffect(() => {
+    const bottomSheetElement = bottomSheetRef.current;
+    const contentElement = contentRef.current;
+    metrics.current.initialOpenHeightPx = window.innerHeight * (snapPercent.min > 1 ? 1 : snapPercent.min);
+    if (snapPercent.max === "INNER_HEIGHT" && contentElement) {
+      metrics.current.maxTransformValue = (contentElement.clientHeight - BOTTOM_SHEET_HANDLE_HEIGHT) * -1;
+    } else if (typeof snapPercent.max === "number") {
+      metrics.current.maxTransformValue = (window.innerHeight - metrics.current.initialOpenHeightPx) * (snapPercent.max > 1 ? 1 : snapPercent.max) * -1;
+    }
+    bottomSheetElement == null ? void 0 : bottomSheetElement.addEventListener("touchstart", handleTouch.start);
+    bottomSheetElement == null ? void 0 : bottomSheetElement.addEventListener("touchmove", handleTouch.move);
+    bottomSheetElement == null ? void 0 : bottomSheetElement.addEventListener("touchend", handleTouch.end);
+    bottomSheetElement == null ? void 0 : bottomSheetElement.addEventListener("mousedown", handleMouse.down);
+    bottomSheetElement == null ? void 0 : bottomSheetElement.addEventListener("mousemove", handleMouse.move);
+    bottomSheetElement == null ? void 0 : bottomSheetElement.addEventListener("mouseup", handleMouse.up);
+    bottomSheetElement == null ? void 0 : bottomSheetElement.addEventListener("mouseleave", handleMouse.leave);
+    contentElement == null ? void 0 : contentElement.addEventListener("touchstart", handleContentTouch);
+    contentElement == null ? void 0 : contentElement.addEventListener("mousedown", handleContentTouch);
+    return () => {
+      bottomSheetElement == null ? void 0 : bottomSheetElement.removeEventListener("touchstart", handleTouch.start);
+      bottomSheetElement == null ? void 0 : bottomSheetElement.removeEventListener("touchmove", handleTouch.move);
+      bottomSheetElement == null ? void 0 : bottomSheetElement.removeEventListener("touchend", handleTouch.end);
+      bottomSheetElement == null ? void 0 : bottomSheetElement.removeEventListener("mousedown", handleMouse.down);
+      bottomSheetElement == null ? void 0 : bottomSheetElement.removeEventListener("mousemove", handleMouse.move);
+      bottomSheetElement == null ? void 0 : bottomSheetElement.removeEventListener("mouseup", handleMouse.up);
+      bottomSheetElement == null ? void 0 : bottomSheetElement.removeEventListener("mouseleave", handleMouse.leave);
+      contentElement == null ? void 0 : contentElement.removeEventListener("touchstart", handleContentTouch);
+      contentElement == null ? void 0 : contentElement.removeEventListener("mousedown", handleContentTouch);
+    };
+  }, []);
+  return { bottomSheetRef, contentRef, snapToMax, snapToMin, springs };
+};
+const DEFAULT_MIN_SNAP = 0;
+const DEFAULT_MAX_SNAP = "INNER_HEIGHT";
+const DEFAULT_BACKDROP_OPACITY = 0.5;
+const BottomSheetFrame = React.forwardRef(
+  ({ children, className, initialOpenHeightPx, springs }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      animated.section,
+      {
+        ref,
+        className: cx(css$1({
+          position: "fixed",
+          touchAction: "pan-y",
+          display: "flex",
+          flexDirection: "column",
+          width: "100%",
+          pointerEvents: "auto",
+          // 제스처 이벤트 허용
+          overflow: "hidden",
+          borderRadius: "40px 40px 0 0",
+          height: "100%",
+          zIndex: 999,
+          backgroundColor: "#ffffff",
+          shadow: "0 -15px 15px 0px rgba(0, 0, 0, 0.05)",
+          willChange: "auto"
+        }), className),
+        style: {
+          bottom: `calc(${initialOpenHeightPx}px - 100dvh)`,
+          transform: springs.transform
+        },
+        children
+      }
+    );
+  }
+);
+const Backdrop = React.forwardRef(({ onBackdropClick, isBackdropOpen, opacity: bgOpacity }, ref) => {
+  const [springs] = useSpring(() => ({
+    from: { opacity: 0 },
+    to: { opacity: isBackdropOpen ? 1 : 0 },
+    config: {
+      tension: 200,
+      friction: 25,
+      mass: 0.8
+    }
+  }), [isBackdropOpen]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    animated.div,
+    {
+      className: css$1({
+        zIndex: 99,
+        position: "fixed",
+        top: 0,
+        width: "100%",
+        height: "100dvh",
+        willChange: "opacity",
+        overflow: "hidden",
+        touchAction: "none"
+      }),
+      style: {
+        backgroundColor: springs.opacity.to((o) => `rgba(0, 0, 0, ${o * bgOpacity})`),
+        opacity: springs.opacity,
+        visibility: isBackdropOpen ? "visible" : "hidden"
+      },
+      onClick: () => onBackdropClick(),
+      ref
+    }
+  );
+});
+const BottomSheetHandle = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: css$1({ margin: "22px auto", height: 1.5, minHeight: 1.5, width: "45px", borderRadius: 999, background: "#bebebe" }) });
+const BottomSheet = (props) => {
+  const { isOpen = true, onClose, onOpen, children, className = "", snapPercent, bgBlocking = true, backdropOpacity = DEFAULT_BACKDROP_OPACITY, hideHandle = false, expendOnContentDrag = false } = props;
+  const { bottomSheetRef, contentRef, snapToMin, springs } = useBottomSheet({
+    isOpen,
+    onOpen,
+    onClose,
+    snapPercent: {
+      min: (snapPercent == null ? void 0 : snapPercent.min) ?? DEFAULT_MIN_SNAP,
+      max: (snapPercent == null ? void 0 : snapPercent.max) ?? DEFAULT_MAX_SNAP
+    },
+    expendOnContentDrag
+  });
+  const [initialOpenHeightPx, setInitialOpenHeightPx] = React.useState(DEFAULT_MIN_SNAP);
+  React.useEffect(() => {
+    if (snapPercent == null ? void 0 : snapPercent.min) setInitialOpenHeightPx(window.innerHeight * (snapPercent == null ? void 0 : snapPercent.min));
+  }, [snapPercent == null ? void 0 : snapPercent.min]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(animated.div, { children: [
+    bgBlocking && /* @__PURE__ */ jsxRuntime.jsx(Backdrop, { isBackdropOpen: isOpen, opacity: backdropOpacity, onBackdropClick: () => snapToMin() }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      BottomSheetFrame,
+      {
+        ref: bottomSheetRef,
+        className,
+        springs,
+        initialOpenHeightPx,
+        children: [
+          !hideHandle && /* @__PURE__ */ jsxRuntime.jsx(BottomSheetHandle, {}),
+          /* @__PURE__ */ jsxRuntime.jsx("section", { ref: contentRef, className: css$1({ overflowY: "auto" }), children })
+        ]
+      }
+    )
+  ] });
+};
+BottomSheetFrame.displayName = "BottomSheetFrame";
+Backdrop.displayName = "Backdrop";
 function definePreset(preset2) {
   return preset2;
 }
@@ -4346,6 +8050,7 @@ const preset = definePreset({
     }
   }
 });
+exports.BottomSheet = BottomSheet;
 exports.Button = Button;
 exports.Dialog = Dialog;
 exports.IconButton = IconButton;