@tarsis/toolkit 0.5.1 → 0.5.3

package/dist/{index-CQ90hVPI.js → index-CBTCt41n.js}

@@ -1,133 +1,12 @@
-import { p as isBrowser$1, q as isObject$3, r as resolveElements, s as interpolate$2, t as frame$2, v as isMotionValue, J as JSAnimation, w as featureDefinitions, x as isControllingVariants, y as isVariantLabel, z as isForcedMotionValue, A as buildHTMLStyles, B as buildSVGAttrs, C as isSVGTag, D as useConstant, E as isVariantNode, F as isAnimationControls, G as resolveVariantFromProps, H as scrapeMotionValuesFromProps, I as scrapeMotionValuesFromProps$1, M as MotionConfigContext, K as optimizedAppearDataAttribute, L as warning, N as invariant, O as warnOnce, S as SVGVisualElement, P as HTMLVisualElement, Q as resolveVariant, R as animateTarget, T as variantProps, U as isKeyframesTarget, V as variantPriorityOrder, W as mixNumber, X as frameData, Y as pipe$1, Z as cancelFrame, _ as secondsToMilliseconds, $ as millisecondsToSeconds, a0 as progress$2, a1 as clamp$3, a2 as createBox, a3 as measurePageBox, a4 as convertBoxToBoundingBox, a5 as convertBoundingBoxToBox, a6 as addValueToWillChange, a7 as animateMotionValue, a8 as percent, a9 as noop$4, aa as microtask, ab as addUniqueItem, ac as removeItem, ad as time$1, ae as px$2, af as circOut, ag as scalePoint, ah as SubscriptionManager, ai as isSVGElement$1, aj as isSVGSVGElement, ak as getValueTransition, al as frameSteps, am as hasTransform, an as translateAxis, ao as transformBox, ap as hasScale, aq as applyBoxDelta, ar as has2DTranslate, as as applyTreeDeltas, at as createDelta, au as motionValue, av as animateSingleValue, aw as scaleCorrectors, ax as getOptimisedAppearId, ay as useMotionValue, az as collectMotionValues, aA as createScopedAnimate, f as useLiveRef, m as useThrottle, g as useMatchMedia, l as useRaf, b as useDebounce, i as useOutsideClick, o as useWindowReady, e as useInterval, d as useEffectEvent$1, h as useOklch } from './useWindowReady-CIGrizO6.js';
-import { g as getPath, a as lerp$1, d as distance$2, l as lineEq, w as wait } from './svg-CoSCBw2u.js';
+import { p as isBrowser$1, q as isObject$3, r as resolveElements, s as interpolate$2, t as frame$2, v as isMotionValue, J as JSAnimation, M as MotionConfigContext, w as useConstant, x as featureDefinitions, y as isControllingVariants, z as isVariantLabel, A as isForcedMotionValue, B as buildHTMLStyles, C as buildSVGAttrs, D as isSVGTag, E as isVariantNode, F as isAnimationControls, G as resolveVariantFromProps, H as scrapeMotionValuesFromProps, I as scrapeMotionValuesFromProps$1, K as optimizedAppearDataAttribute, L as warning, N as invariant, O as warnOnce, S as SVGVisualElement, P as HTMLVisualElement, Q as resolveVariant, R as animateTarget, T as variantProps, U as isKeyframesTarget, V as variantPriorityOrder, W as mixNumber, X as frameData, Y as pipe$1, Z as cancelFrame, _ as secondsToMilliseconds, $ as millisecondsToSeconds, a0 as progress$2, a1 as clamp$3, a2 as createBox, a3 as measurePageBox, a4 as convertBoxToBoundingBox, a5 as convertBoundingBoxToBox, a6 as addValueToWillChange, a7 as animateMotionValue, a8 as percent, a9 as noop$4, aa as microtask, ab as addUniqueItem, ac as removeItem, ad as time$1, ae as px$2, af as circOut, ag as scalePoint, ah as SubscriptionManager, ai as isSVGElement$1, aj as isSVGSVGElement, ak as getValueTransition, al as frameSteps, am as hasTransform, an as translateAxis, ao as transformBox, ap as hasScale, aq as applyBoxDelta, ar as has2DTranslate, as as applyTreeDeltas, at as createDelta, au as motionValue, av as animateSingleValue, aw as scaleCorrectors, ax as getOptimisedAppearId, ay as useMotionValue, az as collectMotionValues, aA as hasReducedMotionListener, aB as initPrefersReducedMotion, aC as prefersReducedMotion, aD as createScopedAnimate, f as useLiveRef, m as useThrottle, g as useMatchMedia, l as useRaf, b as useDebounce, i as useOutsideClick, o as useWindowReady, e as useInterval, d as useEffectEvent$1, h as useOklch } from './useWindowReady-DVV-s65K.js';
+import { n as noop$5, D as getPath, z as lerp$1, x as distance$2, y as lineEq, C as wait } from './svg-CQLdTbLk.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { useRef, useEffect, useState, useMemo, createContext, useLayoutEffect, useContext, useId as useId$1, useCallback, Fragment as Fragment$1, createElement as createElement$1, useInsertionEffect as useInsertionEffect$1, forwardRef, Component, Children, cloneElement, isValidElement } from 'react';
+import React__default, { useRef, useEffect, useState, useMemo, createContext, useLayoutEffect, useId as useId$1, useContext, useInsertionEffect as useInsertionEffect$1, useCallback, Children, isValidElement, Fragment as Fragment$1, createElement as createElement$1, forwardRef, Component, cloneElement } from 'react';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default, { unstable_batchedUpdates } from 'react-dom';
-import { noop as noop$5 } from './server.js';
 
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
-function getDefaultExportFromCjs (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-
-function getAugmentedNamespace(n) {
-  if (Object.prototype.hasOwnProperty.call(n, '__esModule')) return n;
-  var f = n.default;
-	if (typeof f == "function") {
-		var a = function a () {
-			var isInstance = false;
-      try {
-        isInstance = this instanceof a;
-      } catch {}
-			if (isInstance) {
-        return Reflect.construct(f, arguments, this.constructor);
-			}
-			return f.apply(this, arguments);
-		};
-		a.prototype = f.prototype;
-  } else a = {};
-  Object.defineProperty(a, '__esModule', {value: true});
-	Object.keys(n).forEach(function (k) {
-		var d = Object.getOwnPropertyDescriptor(n, k);
-		Object.defineProperty(a, k, d.get ? d : {
-			enumerable: true,
-			get: function () {
-				return n[k];
-			}
-		});
-	});
-	return a;
-}
-
-var classnames = {exports: {}};
-
-/*!
-	Copyright (c) 2018 Jed Watson.
-	Licensed under the MIT License (MIT), see
-	http://jedwatson.github.io/classnames
-*/
-
-var hasRequiredClassnames;
-
-function requireClassnames () {
-	if (hasRequiredClassnames) return classnames.exports;
-	hasRequiredClassnames = 1;
-	(function (module) {
-		/* global define */
-
-		(function () {
-
-			var hasOwn = {}.hasOwnProperty;
-
-			function classNames () {
-				var classes = '';
-
-				for (var i = 0; i < arguments.length; i++) {
-					var arg = arguments[i];
-					if (arg) {
-						classes = appendClass(classes, parseValue(arg));
-					}
-				}
-
-				return classes;
-			}
-
-			function parseValue (arg) {
-				if (typeof arg === 'string' || typeof arg === 'number') {
-					return arg;
-				}
-
-				if (typeof arg !== 'object') {
-					return '';
-				}
-
-				if (Array.isArray(arg)) {
-					return classNames.apply(null, arg);
-				}
-
-				if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
-					return arg.toString();
-				}
-
-				var classes = '';
-
-				for (var key in arg) {
-					if (hasOwn.call(arg, key) && arg[key]) {
-						classes = appendClass(classes, key);
-					}
-				}
-
-				return classes;
-			}
-
-			function appendClass (value, newClass) {
-				if (!newClass) {
-					return value;
-				}
-			
-				if (value) {
-					return value + ' ' + newClass;
-				}
-			
-				return value + newClass;
-			}
-
-			if (module.exports) {
-				classNames.default = classNames;
-				module.exports = classNames;
-			} else {
-				window.classNames = classNames;
-			}
-		}()); 
-	} (classnames));
-	return classnames.exports;
-}
-
-var classnamesExports = requireClassnames();
-const cn = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
+function r$1(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r$1(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r$1(e))&&(n&&(n+=" "),n+=t);return n}
 
 const root$4v = "_root_1k8u7_1";
 const isExpanded = "_isExpanded_1k8u7_9";
@@ -153,7 +32,7 @@ const Expand = ({ isExpanded, children, className = "" }) => {
     "div",
     {
       ref,
-      className: cn(styles$4T.root, className, {
+      className: clsx(styles$4T.root, className, {
         [styles$4T.isExpanded]: isExpanded
       }),
       "aria-hidden": !isExpanded,
@@ -218,7 +97,7 @@ const GridAccordion = () => {
         ]
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: cn(styles$4S.content, { [styles$4S.expanded]: expanded }), children: /* @__PURE__ */ jsx("div", { className: styles$4S.textWrapper, children: /* @__PURE__ */ jsx("div", { className: styles$4S.text, children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod iure quibusdam corrupti eos quos perspiciatis?" }) }) })
+    /* @__PURE__ */ jsx("div", { className: clsx(styles$4S.content, { [styles$4S.expanded]: expanded }), children: /* @__PURE__ */ jsx("div", { className: styles$4S.textWrapper, children: /* @__PURE__ */ jsx("div", { className: styles$4S.text, children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod iure quibusdam corrupti eos quos perspiciatis?" }) }) })
   ] });
 };
 
@@ -234,7 +113,7 @@ const styles$4R = {
 const BackgroundCircles = () => {
   return /* @__PURE__ */ jsxs("div", { className: styles$4R.root, children: [
     /* @__PURE__ */ jsx("circle", { className: styles$4R.circle }),
-    /* @__PURE__ */ jsx("circle", { className: cn(styles$4R.circle, styles$4R.reverse) }),
+    /* @__PURE__ */ jsx("circle", { className: clsx(styles$4R.circle, styles$4R.reverse) }),
     /* @__PURE__ */ jsx("circle", { className: styles$4R.circle })
   ] });
 };
@@ -268,7 +147,7 @@ const styles$4P = {
 
 const RaysBackground = () => {
   const [checked, setChecked] = useState(false);
-  return /* @__PURE__ */ jsxs("section", { className: cn(styles$4P.root, { [styles$4P.checked]: checked }), children: [
+  return /* @__PURE__ */ jsxs("section", { className: clsx(styles$4P.root, { [styles$4P.checked]: checked }), children: [
     /* @__PURE__ */ jsx("div", { className: styles$4P.hero }),
     /* @__PURE__ */ jsxs("div", { className: styles$4P.content, children: [
       /* @__PURE__ */ jsx("h1", { className: styles$4P.h1ScalingSize, "data-text": "An awesome title", children: "An awesome title" }),
@@ -300,7 +179,7 @@ const Texture$1 = ({ className = "" }) => {
   return /* @__PURE__ */ jsx(
     "img",
     {
-      className: cn(styles$4O.root, className),
+      className: clsx(styles$4O.root, className),
       src: textureImage,
       alt: "",
       "aria-hidden": true,
@@ -51874,7 +51753,7 @@ const ActivateButton = () => {
   return /* @__PURE__ */ jsx("div", { className: styles$4M.root, children: /* @__PURE__ */ jsxs(
     "button",
     {
-      className: cn(styles$4M.btn, {
+      className: clsx(styles$4M.btn, {
         [styles$4M.activate]: state === "ACTIVATE" /* ACTIVATE */,
         [styles$4M.waiting]: state === "ACTIVATING" /* ACTIVATING */,
         [styles$4M.activated]: state === "ACTIVATED" /* ACTIVATED */
@@ -52058,7 +51937,7 @@ const AirplaneAnimation = () => {
     "label",
     {
       ref: rootRef,
-      className: cn(styles$4L.root, { [styles$4L.indeterminate]: indeterminate }),
+      className: clsx(styles$4L.root, { [styles$4L.indeterminate]: indeterminate }),
       children: [
         /* @__PURE__ */ jsx("input", { className: styles$4L.input, type: "checkbox", onChange: emitSmoke }),
         /* @__PURE__ */ jsx("span", { className: styles$4L.sr, children: "Airplane Mode" }),
@@ -52090,7 +51969,7 @@ const AnimatedHoverButton = ({
   className = "",
   ...rest
 }) => {
-  return /* @__PURE__ */ jsxs("button", { type: "button", ...rest, className: cn(styles$4K.root, className), children: [
+  return /* @__PURE__ */ jsxs("button", { type: "button", ...rest, className: clsx(styles$4K.root, className), children: [
     /* @__PURE__ */ jsx("div", { className: styles$4K.absolute }),
     /* @__PURE__ */ jsx("div", { className: styles$4K.relative, children: /* @__PURE__ */ jsx("div", { className: styles$4K.content, children }) })
   ] });
@@ -52208,11 +52087,11 @@ const BubblyParticlesButton = () => {
   );
 };
 
-const root$4i = "_root_rx43i_1";
-const button$o = "_button_rx43i_13";
-const p$1 = "_p_rx43i_26";
-const text$z = "_text_rx43i_26";
-const effects = "_effects_rx43i_240";
+const root$4i = "_root_yhweb_1";
+const button$o = "_button_yhweb_13";
+const p$1 = "_p_yhweb_26";
+const text$z = "_text_yhweb_26";
+const effects = "_effects_yhweb_240";
 const styles$4G = {
 	root: root$4i,
 	button: button$o,
@@ -52262,7 +52141,7 @@ const ButtonHoverFill = () => {
   return /* @__PURE__ */ jsxs(
     "button",
     {
-      className: cn(styles$4F.root, { [styles$4F.full]: isFull }),
+      className: clsx(styles$4F.root, { [styles$4F.full]: isFull }),
       onClick: () => setIsFull((state) => !state),
       children: [
         /* @__PURE__ */ jsx("span", { className: styles$4F.icon, children: /* @__PURE__ */ jsxs(
@@ -52321,7 +52200,7 @@ const styles$4D = {
 };
 
 const ButtonWithDot = () => {
-  return /* @__PURE__ */ jsxs("button", { className: cn(styles$4D.root, styles$4D.withDot), children: [
+  return /* @__PURE__ */ jsxs("button", { className: clsx(styles$4D.root, styles$4D.withDot), children: [
     /* @__PURE__ */ jsx("span", { className: styles$4D.dot }),
     /* @__PURE__ */ jsx("span", { className: styles$4D.text, children: "Dotted button" })
   ] });
@@ -58863,11 +58742,11 @@ const ColorfulButtons = () => {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: styles$4A.grid, children: [
       /* @__PURE__ */ jsx("button", { className: styles$4A.button, children: /* @__PURE__ */ jsx(Wrapper, { title: "Primary" }) }),
-      /* @__PURE__ */ jsx("button", { className: cn(styles$4A.button, styles$4A.dark), children: /* @__PURE__ */ jsx(Wrapper, { title: "Dark" }) })
+      /* @__PURE__ */ jsx("button", { className: clsx(styles$4A.button, styles$4A.dark), children: /* @__PURE__ */ jsx(Wrapper, { title: "Dark" }) })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "grid", children: [
-      /* @__PURE__ */ jsx("button", { className: cn(styles$4A.button, styles$4A.secondary), children: /* @__PURE__ */ jsx(Wrapper, { title: "Secondary" }) }),
-      /* @__PURE__ */ jsx("button", { className: cn(styles$4A.button, styles$4A.light), children: /* @__PURE__ */ jsx(Wrapper, { title: "Light" }) })
+      /* @__PURE__ */ jsx("button", { className: clsx(styles$4A.button, styles$4A.secondary), children: /* @__PURE__ */ jsx(Wrapper, { title: "Secondary" }) }),
+      /* @__PURE__ */ jsx("button", { className: clsx(styles$4A.button, styles$4A.light), children: /* @__PURE__ */ jsx(Wrapper, { title: "Light" }) })
     ] })
   ] });
 };
@@ -58878,7 +58757,7 @@ function Wrapper({ title }) {
       () => Array.from({ length: 12 }, (_, i) => /* @__PURE__ */ jsx(
         "div",
         {
-          className: cn(styles$4A.circle, styles$4A[`circle${i + 1}`])
+          className: clsx(styles$4A.circle, styles$4A[`circle${i + 1}`])
         },
         i
       )).reverse(),
@@ -60107,6 +59986,205 @@ function asNumber$1(v) {
     return typeof v === "number" ? v : parseFloat(v);
 }
 
+/**
+ * Taken from https://github.com/radix-ui/primitives/blob/main/packages/react/compose-refs/src/compose-refs.tsx
+ */
+/**
+ * Set a given ref to a given value
+ * This utility takes care of different types of refs: callback refs and RefObject(s)
+ */
+function setRef(ref, value) {
+    if (typeof ref === "function") {
+        return ref(value);
+    }
+    else if (ref !== null && ref !== undefined) {
+        ref.current = value;
+    }
+}
+/**
+ * A utility to compose multiple refs together
+ * Accepts callback refs and RefObject(s)
+ */
+function composeRefs(...refs) {
+    return (node) => {
+        let hasCleanup = false;
+        const cleanups = refs.map((ref) => {
+            const cleanup = setRef(ref, node);
+            if (!hasCleanup && typeof cleanup === "function") {
+                hasCleanup = true;
+            }
+            return cleanup;
+        });
+        // React <19 will log an error to the console if a callback ref returns a
+        // value. We don't use ref cleanups internally so this will only happen if a
+        // user's ref callback returns a value, which we only expect if they are
+        // using the cleanup functionality added in React 19.
+        if (hasCleanup) {
+            return () => {
+                for (let i = 0; i < cleanups.length; i++) {
+                    const cleanup = cleanups[i];
+                    if (typeof cleanup === "function") {
+                        cleanup();
+                    }
+                    else {
+                        setRef(refs[i], null);
+                    }
+                }
+            };
+        }
+    };
+}
+/**
+ * A custom hook that composes multiple refs
+ * Accepts callback refs and RefObject(s)
+ */
+function useComposedRefs(...refs) {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    return React.useCallback(composeRefs(...refs), refs);
+}
+
+/**
+ * Measurement functionality has to be within a separate component
+ * to leverage snapshot lifecycle.
+ */
+class PopChildMeasure extends React.Component {
+    getSnapshotBeforeUpdate(prevProps) {
+        const element = this.props.childRef.current;
+        if (element && prevProps.isPresent && !this.props.isPresent) {
+            const parent = element.offsetParent;
+            const parentWidth = isHTMLElement$2(parent)
+                ? parent.offsetWidth || 0
+                : 0;
+            const size = this.props.sizeRef.current;
+            size.height = element.offsetHeight || 0;
+            size.width = element.offsetWidth || 0;
+            size.top = element.offsetTop;
+            size.left = element.offsetLeft;
+            size.right = parentWidth - size.width - size.left;
+        }
+        return null;
+    }
+    /**
+     * Required with getSnapshotBeforeUpdate to stop React complaining.
+     */
+    componentDidUpdate() { }
+    render() {
+        return this.props.children;
+    }
+}
+function PopChild({ children, isPresent, anchorX, root }) {
+    const id = useId$1();
+    const ref = useRef(null);
+    const size = useRef({
+        width: 0,
+        height: 0,
+        top: 0,
+        left: 0,
+        right: 0,
+    });
+    const { nonce } = useContext(MotionConfigContext);
+    /**
+     * In React 19, refs are passed via props.ref instead of element.ref.
+     * We check props.ref first (React 19) and fall back to element.ref (React 18).
+     */
+    const childRef = children.props?.ref ??
+        children?.ref;
+    const composedRef = useComposedRefs(ref, childRef);
+    /**
+     * We create and inject a style block so we can apply this explicit
+     * sizing in a non-destructive manner by just deleting the style block.
+     *
+     * We can't apply size via render as the measurement happens
+     * in getSnapshotBeforeUpdate (post-render), likewise if we apply the
+     * styles directly on the DOM node, we might be overwriting
+     * styles set via the style prop.
+     */
+    useInsertionEffect$1(() => {
+        const { width, height, top, left, right } = size.current;
+        if (isPresent || !ref.current || !width || !height)
+            return;
+        const x = anchorX === "left" ? `left: ${left}` : `right: ${right}`;
+        ref.current.dataset.motionPopId = id;
+        const style = document.createElement("style");
+        if (nonce)
+            style.nonce = nonce;
+        const parent = root ?? document.head;
+        parent.appendChild(style);
+        if (style.sheet) {
+            style.sheet.insertRule(`
+          [data-motion-pop-id="${id}"] {
+            position: absolute !important;
+            width: ${width}px !important;
+            height: ${height}px !important;
+            ${x}px !important;
+            top: ${top}px !important;
+          }
+        `);
+        }
+        return () => {
+            if (parent.contains(style)) {
+                parent.removeChild(style);
+            }
+        };
+    }, [isPresent]);
+    return (jsx(PopChildMeasure, { isPresent: isPresent, childRef: ref, sizeRef: size, children: React.cloneElement(children, { ref: composedRef }) }));
+}
+
+const PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, presenceAffectsLayout, mode, anchorX, root }) => {
+    const presenceChildren = useConstant(newChildrenMap);
+    const id = useId$1();
+    let isReusedContext = true;
+    let context = useMemo(() => {
+        isReusedContext = false;
+        return {
+            id,
+            initial,
+            isPresent,
+            custom,
+            onExitComplete: (childId) => {
+                presenceChildren.set(childId, true);
+                for (const isComplete of presenceChildren.values()) {
+                    if (!isComplete)
+                        return; // can stop searching when any is incomplete
+                }
+                onExitComplete && onExitComplete();
+            },
+            register: (childId) => {
+                presenceChildren.set(childId, false);
+                return () => presenceChildren.delete(childId);
+            },
+        };
+    }, [isPresent, presenceChildren, onExitComplete]);
+    /**
+     * If the presence of a child affects the layout of the components around it,
+     * we want to make a new context value to ensure they get re-rendered
+     * so they can detect that layout change.
+     */
+    if (presenceAffectsLayout && isReusedContext) {
+        context = { ...context };
+    }
+    useMemo(() => {
+        presenceChildren.forEach((_, key) => presenceChildren.set(key, false));
+    }, [isPresent]);
+    /**
+     * If there's no `motion` components to fire exit animations, we want to remove this
+     * component immediately.
+     */
+    React.useEffect(() => {
+        !isPresent &&
+            !presenceChildren.size &&
+            onExitComplete &&
+            onExitComplete();
+    }, [isPresent]);
+    if (mode === "popLayout") {
+        children = (jsx(PopChild, { isPresent: isPresent, anchorX: anchorX, root: root, children: children }));
+    }
+    return (jsx(PresenceContext.Provider, { value: context, children: children }));
+};
+function newChildrenMap() {
+    return new Map();
+}
+
 /**
  * When a component is the child of `AnimatePresence`, it can use `usePresence`
  * to access information about whether it's still present in the React tree.
@@ -60147,6 +60225,181 @@ function usePresence(subscribe = true) {
     return !isPresent && onExitComplete ? [false, safeToRemove] : [true];
 }
 
+const getChildKey = (child) => child.key || "";
+function onlyElements(children) {
+    const filtered = [];
+    // We use forEach here instead of map as map mutates the component key by preprending `.$`
+    Children.forEach(children, (child) => {
+        if (isValidElement(child))
+            filtered.push(child);
+    });
+    return filtered;
+}
+
+/**
+ * `AnimatePresence` enables the animation of components that have been removed from the tree.
+ *
+ * When adding/removing more than a single child, every child **must** be given a unique `key` prop.
+ *
+ * Any `motion` components that have an `exit` property defined will animate out when removed from
+ * the tree.
+ *
+ * ```jsx
+ * import { motion, AnimatePresence } from 'framer-motion'
+ *
+ * export const Items = ({ items }) => (
+ *   <AnimatePresence>
+ *     {items.map(item => (
+ *       <motion.div
+ *         key={item.id}
+ *         initial={{ opacity: 0 }}
+ *         animate={{ opacity: 1 }}
+ *         exit={{ opacity: 0 }}
+ *       />
+ *     ))}
+ *   </AnimatePresence>
+ * )
+ * ```
+ *
+ * You can sequence exit animations throughout a tree using variants.
+ *
+ * If a child contains multiple `motion` components with `exit` props, it will only unmount the child
+ * once all `motion` components have finished animating out. Likewise, any components using
+ * `usePresence` all need to call `safeToRemove`.
+ *
+ * @public
+ */
+const AnimatePresence = ({ children, custom, initial = true, onExitComplete, presenceAffectsLayout = true, mode = "sync", propagate = false, anchorX = "left", root }) => {
+    const [isParentPresent, safeToRemove] = usePresence(propagate);
+    /**
+     * Filter any children that aren't ReactElements. We can only track components
+     * between renders with a props.key.
+     */
+    const presentChildren = useMemo(() => onlyElements(children), [children]);
+    /**
+     * Track the keys of the currently rendered children. This is used to
+     * determine which children are exiting.
+     */
+    const presentKeys = propagate && !isParentPresent ? [] : presentChildren.map(getChildKey);
+    /**
+     * If `initial={false}` we only want to pass this to components in the first render.
+     */
+    const isInitialRender = useRef(true);
+    /**
+     * A ref containing the currently present children. When all exit animations
+     * are complete, we use this to re-render the component with the latest children
+     * *committed* rather than the latest children *rendered*.
+     */
+    const pendingPresentChildren = useRef(presentChildren);
+    /**
+     * Track which exiting children have finished animating out.
+     */
+    const exitComplete = useConstant(() => new Map());
+    /**
+     * Track which components are currently processing exit to prevent duplicate processing.
+     */
+    const exitingComponents = useRef(new Set());
+    /**
+     * Save children to render as React state. To ensure this component is concurrent-safe,
+     * we check for exiting children via an effect.
+     */
+    const [diffedChildren, setDiffedChildren] = useState(presentChildren);
+    const [renderedChildren, setRenderedChildren] = useState(presentChildren);
+    useIsomorphicLayoutEffect$2(() => {
+        isInitialRender.current = false;
+        pendingPresentChildren.current = presentChildren;
+        /**
+         * Update complete status of exiting children.
+         */
+        for (let i = 0; i < renderedChildren.length; i++) {
+            const key = getChildKey(renderedChildren[i]);
+            if (!presentKeys.includes(key)) {
+                if (exitComplete.get(key) !== true) {
+                    exitComplete.set(key, false);
+                }
+            }
+            else {
+                exitComplete.delete(key);
+                exitingComponents.current.delete(key);
+            }
+        }
+    }, [renderedChildren, presentKeys.length, presentKeys.join("-")]);
+    const exitingChildren = [];
+    if (presentChildren !== diffedChildren) {
+        let nextChildren = [...presentChildren];
+        /**
+         * Loop through all the currently rendered components and decide which
+         * are exiting.
+         */
+        for (let i = 0; i < renderedChildren.length; i++) {
+            const child = renderedChildren[i];
+            const key = getChildKey(child);
+            if (!presentKeys.includes(key)) {
+                nextChildren.splice(i, 0, child);
+                exitingChildren.push(child);
+            }
+        }
+        /**
+         * If we're in "wait" mode, and we have exiting children, we want to
+         * only render these until they've all exited.
+         */
+        if (mode === "wait" && exitingChildren.length) {
+            nextChildren = exitingChildren;
+        }
+        setRenderedChildren(onlyElements(nextChildren));
+        setDiffedChildren(presentChildren);
+        /**
+         * Early return to ensure once we've set state with the latest diffed
+         * children, we can immediately re-render.
+         */
+        return null;
+    }
+    if (process.env.NODE_ENV !== "production" &&
+        mode === "wait" &&
+        renderedChildren.length > 1) {
+        console.warn(`You're attempting to animate multiple children within AnimatePresence, but its mode is set to "wait". This will lead to odd visual behaviour.`);
+    }
+    /**
+     * If we've been provided a forceRender function by the LayoutGroupContext,
+     * we can use it to force a re-render amongst all surrounding components once
+     * all components have finished animating out.
+     */
+    const { forceRender } = useContext(LayoutGroupContext);
+    return (jsx(Fragment, { children: renderedChildren.map((child) => {
+            const key = getChildKey(child);
+            const isPresent = propagate && !isParentPresent
+                ? false
+                : presentChildren === renderedChildren ||
+                    presentKeys.includes(key);
+            const onExit = () => {
+                if (exitingComponents.current.has(key)) {
+                    return;
+                }
+                exitingComponents.current.add(key);
+                if (exitComplete.has(key)) {
+                    exitComplete.set(key, true);
+                }
+                else {
+                    return;
+                }
+                let isEveryExitComplete = true;
+                exitComplete.forEach((isExitComplete) => {
+                    if (!isExitComplete)
+                        isEveryExitComplete = false;
+                });
+                if (isEveryExitComplete) {
+                    forceRender?.();
+                    setRenderedChildren(pendingPresentChildren.current);
+                    propagate && safeToRemove?.();
+                    onExitComplete && onExitComplete();
+                }
+            };
+            return (jsx(PresenceChild, { isPresent: isPresent, initial: !isInitialRender.current || initial
+                    ? undefined
+                    : false, custom: custom, presenceAffectsLayout: presenceAffectsLayout, mode: mode, root: root, onExitComplete: isPresent ? undefined : onExit, anchorX: anchorX, children: child }, key));
+        }) }));
+};
+
 const LazyContext = createContext({ strict: false });
 
 function loadFeatures(features) {
@@ -64808,6 +65061,47 @@ function useSpring$1(source, options = {}) {
     return value;
 }
 
+/**
+ * A hook that returns `true` if we should be using reduced motion based on the current device's Reduced Motion setting.
+ *
+ * This can be used to implement changes to your UI based on Reduced Motion. For instance, replacing motion-sickness inducing
+ * `x`/`y` animations with `opacity`, disabling the autoplay of background videos, or turning off parallax motion.
+ *
+ * It will actively respond to changes and re-render your components with the latest setting.
+ *
+ * ```jsx
+ * export function Sidebar({ isOpen }) {
+ *   const shouldReduceMotion = useReducedMotion()
+ *   const closedX = shouldReduceMotion ? 0 : "-100%"
+ *
+ *   return (
+ *     <motion.div animate={{
+ *       opacity: isOpen ? 1 : 0,
+ *       x: isOpen ? 0 : closedX
+ *     }} />
+ *   )
+ * }
+ * ```
+ *
+ * @return boolean
+ *
+ * @public
+ */
+function useReducedMotion() {
+    /**
+     * Lazy initialisation of prefersReducedMotion
+     */
+    !hasReducedMotionListener.current && initPrefersReducedMotion();
+    const [shouldReduceMotion] = useState(prefersReducedMotion.current);
+    if (process.env.NODE_ENV !== "production") {
+        warnOnce(shouldReduceMotion !== true, "You have Reduced Motion enabled on your device. Animations may not appear as expected.", "reduced-motion-disabled");
+    }
+    /**
+     * TODO See if people miss automatically updating shouldReduceMotion setting
+     */
+    return shouldReduceMotion;
+}
+
 function useAnimate() {
     const scope = useConstant(() => ({
         current: null, // Will be hydrated by React
@@ -64854,7 +65148,7 @@ const ConfettiButton = ({
     "button",
     {
       type: "button",
-      className: cn(styles$4z.root, className),
+      className: clsx(styles$4z.root, className),
       onClick: handleClick,
       ...props,
       children
@@ -65237,7 +65531,7 @@ const DDDButton = ({
 }) => /* @__PURE__ */ jsx(
   "button",
   {
-    className: cn(styles$4x.root, className),
+    className: clsx(styles$4x.root, className),
     type: "button",
     onClick,
     children: /* @__PURE__ */ jsx("span", { className: styles$4x.content, children })
@@ -65260,7 +65554,7 @@ const DockButton = ({
     ref,
     type: "button",
     ...rest,
-    className: cn(styles$4w.root, className),
+    className: clsx(styles$4w.root, className),
     children
   }
 );
@@ -65293,9 +65587,9 @@ const DoubleArrowButton = () => {
       onClick: () => {
         setBounceAlpha((prev) => !prev);
       },
-      children: /* @__PURE__ */ jsxs("div", { className: cn(styles$4v.cta, { [styles$4v.bounceAlpha]: bounceAlpha }), children: [
-        /* @__PURE__ */ jsx("span", { className: cn(styles$4v.arrow, styles$4v.next, styles$4v.first) }),
-        /* @__PURE__ */ jsx("span", { className: cn(styles$4v.arrow, styles$4v.next, styles$4v.second) })
+      children: /* @__PURE__ */ jsxs("div", { className: clsx(styles$4v.cta, { [styles$4v.bounceAlpha]: bounceAlpha }), children: [
+        /* @__PURE__ */ jsx("span", { className: clsx(styles$4v.arrow, styles$4v.next, styles$4v.first) }),
+        /* @__PURE__ */ jsx("span", { className: clsx(styles$4v.arrow, styles$4v.next, styles$4v.second) })
       ] })
     }
   ) });
@@ -65385,9 +65679,9 @@ const styles$4u = {
 const DoubleArrowCollabButton = ({ onClick, children }) => {
   return /* @__PURE__ */ jsxs("button", { type: "button", className: styles$4u.root, onClick, children: [
     /* @__PURE__ */ jsxs("div", { className: styles$4u.round, children: [
-      /* @__PURE__ */ jsxs("div", { className: cn(styles$4u.cta), children: [
-        /* @__PURE__ */ jsx("span", { className: cn(styles$4u.arrow, styles$4u.next, styles$4u.first) }),
-        /* @__PURE__ */ jsx("span", { className: cn(styles$4u.arrow, styles$4u.next, styles$4u.second) })
+      /* @__PURE__ */ jsxs("div", { className: clsx(styles$4u.cta), children: [
+        /* @__PURE__ */ jsx("span", { className: clsx(styles$4u.arrow, styles$4u.next, styles$4u.first) }),
+        /* @__PURE__ */ jsx("span", { className: clsx(styles$4u.arrow, styles$4u.next, styles$4u.second) })
       ] }),
       /* @__PURE__ */ jsx(ImSpotify, { className: styles$4u.collab })
     ] }),
@@ -65433,7 +65727,7 @@ const DoubleStateButton = ({
     ref,
     type: "button",
     ...rest,
-    className: cn(styles$4t.root, className),
+    className: clsx(styles$4t.root, className),
     children: [
       /* @__PURE__ */ jsxs("div", { className: styles$4t.wrapper, children: [
         /* @__PURE__ */ jsx("span", { className: styles$4t.first, children }),
@@ -65645,14 +65939,14 @@ const styles$4q = {
 const ElectrifiedButton = () => {
   return /* @__PURE__ */ jsxs("div", { className: styles$4q.root, children: [
     /* @__PURE__ */ jsxs("button", { className: styles$4q.electric, children: [
-      /* @__PURE__ */ jsx("span", { className: cn(styles$4q.part, styles$4q.part1) }),
-      /* @__PURE__ */ jsx("span", { className: cn(styles$4q.part, styles$4q.part2) }),
-      /* @__PURE__ */ jsx("span", { className: cn(styles$4q.part, styles$4q.part3) }),
-      /* @__PURE__ */ jsx("span", { className: cn(styles$4q.part, styles$4q.part4) }),
+      /* @__PURE__ */ jsx("span", { className: clsx(styles$4q.part, styles$4q.part1) }),
+      /* @__PURE__ */ jsx("span", { className: clsx(styles$4q.part, styles$4q.part2) }),
+      /* @__PURE__ */ jsx("span", { className: clsx(styles$4q.part, styles$4q.part3) }),
+      /* @__PURE__ */ jsx("span", { className: clsx(styles$4q.part, styles$4q.part4) }),
       /* @__PURE__ */ jsx(
         "svg",
         {
-          className: cn(styles$4q.svg, styles$4q.yellow, styles$4q.yellow1),
+          className: clsx(styles$4q.svg, styles$4q.yellow, styles$4q.yellow1),
           width: "415",
           height: "181",
           viewBox: "0 0 415 181",
@@ -65672,7 +65966,7 @@ const ElectrifiedButton = () => {
       /* @__PURE__ */ jsxs(
         "svg",
         {
-          className: cn(styles$4q.svg, styles$4q.yellow, styles$4q.yellow2),
+          className: clsx(styles$4q.svg, styles$4q.yellow, styles$4q.yellow2),
           width: "461",
           height: "227",
           viewBox: "0 0 461 227",
@@ -65725,7 +66019,7 @@ const ElectrifiedButton = () => {
       /* @__PURE__ */ jsx(
         "svg",
         {
-          className: cn(styles$4q.svg, styles$4q.blue, styles$4q.blue1),
+          className: clsx(styles$4q.svg, styles$4q.blue, styles$4q.blue1),
           width: "423",
           height: "192",
           viewBox: "0 0 423 192",
@@ -65745,7 +66039,7 @@ const ElectrifiedButton = () => {
       /* @__PURE__ */ jsxs(
         "svg",
         {
-          className: cn(styles$4q.svg, styles$4q.blue, styles$4q.blue2),
+          className: clsx(styles$4q.svg, styles$4q.blue, styles$4q.blue2),
           width: "470",
           height: "240",
           viewBox: "0 0 470 240",
@@ -65797,7 +66091,7 @@ const ElectrifiedButton = () => {
       ),
       "Button"
     ] }),
-    /* @__PURE__ */ jsx("button", { className: cn(styles$4q.electric, styles$4q.electric2), children: "Button" })
+    /* @__PURE__ */ jsx("button", { className: clsx(styles$4q.electric, styles$4q.electric2), children: "Button" })
   ] });
 };
 
@@ -66517,7 +66811,7 @@ const FailedDownloadButton = () => {
       "button",
       {
         type: "button",
-        className: cn(styles$4o.btn, { [styles$4o.failed]: failed }),
+        className: clsx(styles$4o.btn, { [styles$4o.failed]: failed }),
         onClick: fail,
         disabled: failed,
         children: [
@@ -66678,7 +66972,7 @@ const GlowButton = ({
       ref,
       type,
       ...rest,
-      className: cn(styles$4l.root, className),
+      className: clsx(styles$4l.root, className),
       children: /* @__PURE__ */ jsx("span", { className: styles$4l.text, children })
     }
   );
@@ -66969,7 +67263,7 @@ const HeartFoldButton = () => {
       "button",
       {
         type: "button",
-        className: cn(styles$4g.heart, { [styles$4g.active]: active }),
+        className: clsx(styles$4g.heart, { [styles$4g.active]: active }),
         onClick: handleClick,
         children: /* @__PURE__ */ jsx("div", { className: styles$4g.flip })
       }
@@ -66978,7 +67272,7 @@ const HeartFoldButton = () => {
       "button",
       {
         type: "button",
-        className: cn(styles$4g.button, { [styles$4g.active]: active }),
+        className: clsx(styles$4g.button, { [styles$4g.active]: active }),
         onClick: handleClick,
         children: [
           /* @__PURE__ */ jsx("div", { className: styles$4g.flip }),
@@ -67038,7 +67332,7 @@ const HoldSubmitButton = () => {
   return /* @__PURE__ */ jsxs(
     "button",
     {
-      className: cn(styles$4f.root, {
+      className: clsx(styles$4f.root, {
         [styles$4f.process]: process,
         [styles$4f.success]: success
       }),
@@ -67191,7 +67485,7 @@ const HoverGlowButton = ({
     {
       ref,
       type: "button",
-      className: cn(styles$4e.root, className),
+      className: clsx(styles$4e.root, className),
       onPointerMove: (e) => {
         const el = ref.current;
         if (!el) {
@@ -67253,7 +67547,7 @@ const Ios15Button = () => {
       return Array.from({ length: count$1 }, (_, i) => /* @__PURE__ */ jsx(
         "div",
         {
-          className: cn(styles$4d.circle, styles$4d[`circle-${i + 1}`])
+          className: clsx(styles$4d.circle, styles$4d[`circle-${i + 1}`])
         },
         i
       ));
@@ -67413,7 +67707,7 @@ const MorphingSubmitButton = () => {
     "button",
     {
       type: "button",
-      className: cn(styles$4a.root, {
+      className: clsx(styles$4a.root, {
         [styles$4a.running]: state === 1 /* RUNNING */,
         [styles$4a.done]: state === 2 /* DONE */
       }),
@@ -67730,7 +68024,7 @@ const MultiStageButton = () => {
       {
         id: "button",
         ref: button,
-        className: cn(styles$49.button, {
+        className: clsx(styles$49.button, {
           [styles$49.ready]: ready,
           [styles$49.complete]: complete,
           [styles$49.loading]: loading
@@ -67738,7 +68032,7 @@ const MultiStageButton = () => {
         onClick: clickButton,
         disabled,
         children: [
-          /* @__PURE__ */ jsxs("div", { className: cn(styles$49.message, styles$49.submitMessage), children: [
+          /* @__PURE__ */ jsxs("div", { className: clsx(styles$49.message, styles$49.submitMessage), children: [
             /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 13 12.2", children: [
               /* @__PURE__ */ jsx("polyline", { stroke: "currentColor", points: "2,7.1 6.5,11.1 11,7.1 " }),
               /* @__PURE__ */ jsx("line", { stroke: "currentColor", x1: "6.5", y1: "1.2", x2: "6.5", y2: "10.3" })
@@ -67756,7 +68050,7 @@ const MultiStageButton = () => {
               char + index
             )) })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: cn(styles$49.message, styles$49.loadingMessage), children: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 19 17", children: [
+          /* @__PURE__ */ jsx("div", { className: clsx(styles$49.message, styles$49.loadingMessage), children: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 19 17", children: [
             /* @__PURE__ */ jsx("circle", { className: styles$49.loadingCircle, cx: "2.2", cy: "10", r: "1.6" }),
             /* @__PURE__ */ jsx("circle", { className: styles$49.loadingCircle, cx: "9.5", cy: "10", r: "1.6" }),
             /* @__PURE__ */ jsx(
@@ -67769,7 +68063,7 @@ const MultiStageButton = () => {
               }
             )
           ] }) }),
-          /* @__PURE__ */ jsxs("div", { className: cn(styles$49.message, styles$49.successMessage), children: [
+          /* @__PURE__ */ jsxs("div", { className: clsx(styles$49.message, styles$49.successMessage), children: [
             /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 13 11", children: /* @__PURE__ */ jsx(
               "polyline",
               {
@@ -67803,12 +68097,12 @@ const styles$48 = {
 };
 
 const NeonButton = ({ className = "", ...rest }) => {
-  return /* @__PURE__ */ jsx("button", { type: "button", ...rest, className: cn(styles$48.root, className), children: "Neon" });
+  return /* @__PURE__ */ jsx("button", { type: "button", ...rest, className: clsx(styles$48.root, className), children: "Neon" });
 };
 
-const root$3P = "_root_b90b6_2";
-const i$6 = "_i_b90b6_22";
-const text$s = "_text_b90b6_482";
+const root$3P = "_root_1ol0v_2";
+const i$6 = "_i_1ol0v_22";
+const text$s = "_text_1ol0v_482";
 const styles$47 = {
 	root: root$3P,
 	i: i$6,
@@ -67846,7 +68140,7 @@ const OrbitalSubmitButton = () => {
     "button",
     {
       type: "button",
-      className: cn(styles$46.root, { [styles$46.processing]: processing }),
+      className: clsx(styles$46.root, { [styles$46.processing]: processing }),
       onClick: () => {
         setProcessing((prev) => !prev);
       },
@@ -68023,7 +68317,7 @@ const PlayPauseButton = () => {
       children: /* @__PURE__ */ jsxs(
         "svg",
         {
-          className: cn(styles$44.svg, { [styles$44.isPlay]: isPlay }),
+          className: clsx(styles$44.svg, { [styles$44.isPlay]: isPlay }),
           width: 16,
           height: 16,
           viewBox: "0 0 16 16",
@@ -68054,7 +68348,7 @@ const PlayPauseMusicButton = () => {
     "button",
     {
       type: "button",
-      className: cn(styles$43.root, {
+      className: clsx(styles$43.root, {
         [styles$43.paused]: paused,
         [styles$43.playing]: playing
       }),
@@ -68095,8 +68389,8 @@ const styles$42 = {
 
 const PositionHover = () => {
   return /* @__PURE__ */ jsxs("div", { className: styles$42.root, children: [
-    /* @__PURE__ */ jsx("a", { href: "#0", className: cn(styles$42.selfAware, styles$42.button), children: "I'm a self-aware button" }),
-    /* @__PURE__ */ jsx("a", { href: "#0", className: cn(styles$42.selfAware, styles$42.underline), children: "I'm a self-aware underline" })
+    /* @__PURE__ */ jsx("a", { href: "#0", className: clsx(styles$42.selfAware, styles$42.button), children: "I'm a self-aware button" }),
+    /* @__PURE__ */ jsx("a", { href: "#0", className: clsx(styles$42.selfAware, styles$42.underline), children: "I'm a self-aware underline" })
   ] });
 };
 
@@ -68196,7 +68490,7 @@ const PredictionButton = () => {
       /* @__PURE__ */ jsx(
         "button",
         {
-          className: cn(styles$41.btn, {
+          className: clsx(styles$41.btn, {
             [styles$41.inactive]: Boolean(prediction && show)
           }),
           onClick: () => {
@@ -68221,7 +68515,7 @@ const PredictionButton = () => {
       /* @__PURE__ */ jsxs(
         "svg",
         {
-          className: cn(styles$41.stars, {
+          className: clsx(styles$41.stars, {
             [styles$41.rotate]: Boolean(prediction && !show)
           }),
           width: "960",
@@ -68316,7 +68610,7 @@ const ProgressButton = ({
     "button",
     {
       type: "button",
-      className: cn(styles$40.root, className, { [styles$40.loading]: isLoading }),
+      className: clsx(styles$40.root, className, { [styles$40.loading]: isLoading }),
       onClick: (e) => {
         onClick(e);
         if (timeoutRef.current) {
@@ -68347,7 +68641,7 @@ const styles$3$ = {
 };
 
 const PsychedelicButton = ({ variant }) => {
-  return /* @__PURE__ */ jsx("div", { className: styles$3$.root, children: /* @__PURE__ */ jsx("button", { className: cn(styles$3$.button, styles$3$[variant]), children: "hover me" }) });
+  return /* @__PURE__ */ jsx("div", { className: styles$3$.root, children: /* @__PURE__ */ jsx("button", { className: clsx(styles$3$.button, styles$3$[variant]), children: "hover me" }) });
 };
 
 const root$3G = "_root_qhbgz_1";
@@ -68435,24 +68729,24 @@ const RunningButton = () => {
   const [active, setActive] = useState(false);
   return /* @__PURE__ */ jsxs("div", { className: styles$3Y.root, children: [
     /* @__PURE__ */ jsx("div", { className: styles$3Y.running, children: /* @__PURE__ */ jsx("div", { className: styles$3Y.outer, children: /* @__PURE__ */ jsxs("div", { className: styles$3Y.body, children: [
-      /* @__PURE__ */ jsx("div", { className: cn(styles$3Y.arm, styles$3Y.behind) }),
-      /* @__PURE__ */ jsx("div", { className: cn(styles$3Y.arm, styles$3Y.front) }),
-      /* @__PURE__ */ jsx("div", { className: cn(styles$3Y.leg, styles$3Y.behind) }),
-      /* @__PURE__ */ jsx("div", { className: cn(styles$3Y.leg, styles$3Y.front) })
+      /* @__PURE__ */ jsx("div", { className: clsx(styles$3Y.arm, styles$3Y.behind) }),
+      /* @__PURE__ */ jsx("div", { className: clsx(styles$3Y.arm, styles$3Y.front) }),
+      /* @__PURE__ */ jsx("div", { className: clsx(styles$3Y.leg, styles$3Y.behind) }),
+      /* @__PURE__ */ jsx("div", { className: clsx(styles$3Y.leg, styles$3Y.front) })
     ] }) }) }),
     /* @__PURE__ */ jsxs(
       "button",
       {
-        className: cn(styles$3Y.runningButton, { [styles$3Y.active]: active }),
+        className: clsx(styles$3Y.runningButton, { [styles$3Y.active]: active }),
         onClick: () => setActive((prev) => !prev),
         children: [
           /* @__PURE__ */ jsx("span", { className: styles$3Y.default, children: "Start" }),
           /* @__PURE__ */ jsx("span", { className: styles$3Y.active, children: "Tracking" }),
           /* @__PURE__ */ jsx("div", { className: styles$3Y.running, children: /* @__PURE__ */ jsx("div", { className: styles$3Y.outer, children: /* @__PURE__ */ jsxs("div", { className: styles$3Y.body, children: [
-            /* @__PURE__ */ jsx("div", { className: cn(styles$3Y.arm, styles$3Y.behind) }),
-            /* @__PURE__ */ jsx("div", { className: cn(styles$3Y.arm, styles$3Y.front) }),
-            /* @__PURE__ */ jsx("div", { className: cn(styles$3Y.leg, styles$3Y.behind) }),
-            /* @__PURE__ */ jsx("div", { className: cn(styles$3Y.leg, styles$3Y.front) })
+            /* @__PURE__ */ jsx("div", { className: clsx(styles$3Y.arm, styles$3Y.behind) }),
+            /* @__PURE__ */ jsx("div", { className: clsx(styles$3Y.arm, styles$3Y.front) }),
+            /* @__PURE__ */ jsx("div", { className: clsx(styles$3Y.leg, styles$3Y.behind) }),
+            /* @__PURE__ */ jsx("div", { className: clsx(styles$3Y.leg, styles$3Y.front) })
           ] }) }) })
         ]
       }
@@ -68744,7 +69038,7 @@ function Button({
     {
       onMouseEnter: () => setButtonFocus(true),
       onMouseLeave: () => setButtonFocus(false),
-      className: cn(styles$3V.buttonContainer, {
+      className: clsx(styles$3V.buttonContainer, {
         [styles$3V.pressed]: buttonPressed
       }),
       children: [
@@ -68785,7 +69079,7 @@ function Button({
           "video",
           {
             ref: surfaceReflectionRef,
-            className: cn(styles$3V.surfaceReflection, {
+            className: clsx(styles$3V.surfaceReflection, {
               [styles$3V.pressed]: buttonPressed
             })
           }
@@ -68793,7 +69087,7 @@ function Button({
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: cn(styles$3V.button, { [styles$3V.pressed]: buttonPressed }),
+            className: clsx(styles$3V.button, { [styles$3V.pressed]: buttonPressed }),
             onMouseDown: handleMouseDown,
             onTouchStart: handleTouchStart,
             onMouseUp: () => setButtonPressed(false),
@@ -68848,7 +69142,7 @@ const SkeuomorphicLikeButton = () => {
   return /* @__PURE__ */ jsxs(
     "button",
     {
-      className: cn(styles$3U.root, {
+      className: clsx(styles$3U.root, {
         [styles$3U.active]: active,
         [styles$3U.bounce]: bounce
       }),
@@ -68866,8 +69160,8 @@ const SkeuomorphicLikeButton = () => {
           active && /* @__PURE__ */ jsx("span", { children: "d" })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: styles$3U.numbers, children: [
-          /* @__PURE__ */ jsx("span", { className: cn(styles$3U.item, styles$3U.current), children: "24" }),
-          /* @__PURE__ */ jsx("span", { className: cn(styles$3U.item, styles$3U.next), children: "25" })
+          /* @__PURE__ */ jsx("span", { className: clsx(styles$3U.item, styles$3U.current), children: "24" }),
+          /* @__PURE__ */ jsx("span", { className: clsx(styles$3U.item, styles$3U.next), children: "25" })
         ] })
       ]
     }
@@ -68889,9 +69183,9 @@ const styles$3T = {
 
 const SlidingButton = () => {
   return /* @__PURE__ */ jsxs("button", { className: styles$3T.root, children: [
-    /* @__PURE__ */ jsx("span", { className: cn(styles$3T.icon, styles$3T.iconLogo) }),
+    /* @__PURE__ */ jsx("span", { className: clsx(styles$3T.icon, styles$3T.iconLogo) }),
     /* @__PURE__ */ jsx("span", { className: styles$3T.text, children: "Cool button" }),
-    /* @__PURE__ */ jsx("span", { className: cn(styles$3T.icon, styles$3T.iconArrow) })
+    /* @__PURE__ */ jsx("span", { className: clsx(styles$3T.icon, styles$3T.iconArrow) })
   ] });
 };
 
@@ -68932,7 +69226,7 @@ const SlidingStepper = () => {
   return /* @__PURE__ */ jsxs(
     "button",
     {
-      className: cn(styles$3S.root, {
+      className: clsx(styles$3S.root, {
         [styles$3S.moveLeft]: move === 1,
         [styles$3S.moveRight]: move === -1
       }),
@@ -69106,7 +69400,7 @@ const SparklyButton = () => {
       "button",
       {
         ref,
-        className: cn(styles$3Q.button, { [styles$3Q.over]: isOver }),
+        className: clsx(styles$3Q.button, { [styles$3Q.over]: isOver }),
         children: /* @__PURE__ */ jsx("span", { className: styles$3Q.content, children: "Sparkly Button" })
       }
     ),
@@ -69131,7 +69425,7 @@ const styles$3P = {
 };
 
 const SquishButton = ({ children, className = "", ...rest }) => {
-  return /* @__PURE__ */ jsx("button", { type: "button", ...rest, className: cn(styles$3P.root, className), children });
+  return /* @__PURE__ */ jsx("button", { type: "button", ...rest, className: clsx(styles$3P.root, className), children });
 };
 
 const root$3w = "_root_v4ko6_1";
@@ -69170,7 +69464,7 @@ const Fingerprint = ({ className = "" }) => {
   return /* @__PURE__ */ jsx(
     "svg",
     {
-      className: cn(styles$3N.root, className),
+      className: clsx(styles$3N.root, className),
       width: "34px",
       height: "34px",
       viewBox: "0 0 34 34",
@@ -69192,35 +69486,35 @@ const Fingerprint = ({ className = "" }) => {
             /* @__PURE__ */ jsx(
               "path",
               {
-                className: cn(styles$3N.a, { [styles$3N.active]: isActive }),
+                className: clsx(styles$3N.a, { [styles$3N.active]: isActive }),
                 d: "M3.14414922,1.97419264 C3.14414922,1.97419264 5.30885997,0.506351808 9.06036082,0.506351808 C12.8118617,0.506351808 14.781903,1.97419264 14.781903,1.97419264"
               }
             ),
             /* @__PURE__ */ jsx(
               "path",
               {
-                className: cn(styles$3N.b, { [styles$3N.active]: isActive }),
+                className: clsx(styles$3N.b, { [styles$3N.active]: isActive }),
                 d: "M0.466210729,7.27628774 C0.466210729,7.27628774 3.19024811,2.75878123 9.09512428,2.96502806 C15.0000005,3.17127489 17.4745821,7.17202872 17.4745821,7.17202872"
               }
             ),
             /* @__PURE__ */ jsx(
               "path",
               {
-                className: cn(styles$3N.c, { [styles$3N.active]: isActive }),
+                className: clsx(styles$3N.c, { [styles$3N.active]: isActive }),
                 d: "M2,16.4687762 C2,16.4687762 1.12580828,14.9305411 1.27082278,11.9727304 C1.45871447,8.14036841 5.19587478,5.30175361 9.05270871,5.30175361 C12.9095426,5.30175361 15.0000001,7.82879552 15.8975926,9.33195218 C16.5919575,10.4947729 17.7597991,14.4361492 14.6226101,15.0206592 C12.41268,15.4324056 11.5911303,13.4911155 11.5911303,12.9859143 C11.5911303,11.9727302 11.1054172,10.2336826 9.05270848,10.2336826 C6.99999978,10.2336826 6.11384543,11.8665663 6.4593664,13.7955614 C6.6532895,14.8782069 7.59887942,18.3701197 12.0173963,19.5605638"
               }
             ),
             /* @__PURE__ */ jsx(
               "path",
               {
-                className: cn(styles$3N.d, { [styles$3N.active]: isActive }),
+                className: clsx(styles$3N.d, { [styles$3N.active]: isActive }),
                 d: "M7.0204614,19.6657197 C7.0204614,19.6657197 3.88328263,16.5690127 3.88328268,12.9603117 C3.88328274,9.35161068 6.59923746,7.80642537 9.0076008,7.80642554 C11.4159641,7.8064257 14.1798468,9.55747124 14.1798468,12.759562"
               }
             ),
             /* @__PURE__ */ jsx(
               "path",
               {
-                className: cn(styles$3N.e, { [styles$3N.active]: isActive }),
+                className: clsx(styles$3N.e, { [styles$3N.active]: isActive }),
                 d: "M8.95538742,12.6694189 C8.95538742,12.6694189 9.04883608,18.1288401 15.069217,17.3610597"
               }
             )
@@ -69234,7 +69528,7 @@ const Fingerprint = ({ className = "" }) => {
 const SuccessLoader = ({ status }) => /* @__PURE__ */ jsx(
   "div",
   {
-    className: cn(styles$3O.root, {
+    className: clsx(styles$3O.root, {
       [styles$3O.success]: status === "success",
       [styles$3O.loading]: status === "loading",
       [styles$3O.pending]: status === "pending"
@@ -69272,7 +69566,7 @@ const SuccessLoadingButton = ({
     "button",
     {
       type: "button",
-      className: cn(styles$3M.root, className, {
+      className: clsx(styles$3M.root, className, {
         [styles$3M.success]: status === "success"
       }),
       disabled,
@@ -69316,7 +69610,7 @@ const ThreadsLikeButton = () => {
     "button",
     {
       type: "button",
-      className: cn(styles$3L.root, { [styles$3L.liked]: liked }),
+      className: clsx(styles$3L.root, { [styles$3L.liked]: liked }),
       onClick: () => setLiked((prev) => !prev),
       children: /* @__PURE__ */ jsxs(
         "svg",
@@ -69370,7 +69664,7 @@ const ThumbsUpButton = () => {
     "button",
     {
       type: "button",
-      className: cn(styles$3K.root, { [styles$3K.liked]: liked }),
+      className: clsx(styles$3K.root, { [styles$3K.liked]: liked }),
       onClick: (e) => {
         const button = e.currentTarget;
         setLiked((prev) => !prev);
@@ -69614,11 +69908,11 @@ const BrandCard = ({
   className = "",
   contentClassName = ""
 }) => {
-  return /* @__PURE__ */ jsxs("div", { className: cn(styles$3F.root, className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: clsx(styles$3F.root, className), children: [
     /* @__PURE__ */ jsx(
       "div",
       {
-        className: cn(styles$3F.content, contentClassName),
+        className: clsx(styles$3F.content, contentClassName),
         style: {
           "--hoverColor": hoverColor
         },
@@ -69672,7 +69966,7 @@ const CaptionCard = ({
   description = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores,\n            blanditiis?",
   className = ""
 }) => {
-  return /* @__PURE__ */ jsxs("button", { type: "button", className: cn(styles$3D.root, className), children: [
+  return /* @__PURE__ */ jsxs("button", { type: "button", className: clsx(styles$3D.root, className), children: [
     /* @__PURE__ */ jsx("figure", { className: styles$3D.imageWrapper, children: /* @__PURE__ */ jsx(
       "img",
       {
@@ -69813,7 +70107,7 @@ const CardGlow = () => {
                   strokeWidth: 1.5,
                   stroke: "none",
                   "data-slot": "icon",
-                  className: cn(styles$3C.w6, styles$3C.h6),
+                  className: clsx(styles$3C.w6, styles$3C.h6),
                   children: /* @__PURE__ */ jsx(
                     "path",
                     {
@@ -69833,7 +70127,7 @@ const CardGlow = () => {
                   strokeWidth: 1.5,
                   stroke: "none",
                   "data-slot": "icon",
-                  className: cn(styles$3C.w6, styles$3C.h6),
+                  className: clsx(styles$3C.w6, styles$3C.h6),
                   children: /* @__PURE__ */ jsx(
                     "path",
                     {
@@ -69853,7 +70147,7 @@ const CardGlow = () => {
                   strokeWidth: 1.5,
                   stroke: "none",
                   "data-slot": "icon",
-                  className: cn(styles$3C.w6, styles$3C.h6),
+                  className: clsx(styles$3C.w6, styles$3C.h6),
                   children: /* @__PURE__ */ jsx(
                     "path",
                     {
@@ -69873,7 +70167,7 @@ const CardGlow = () => {
                   strokeWidth: 1.5,
                   stroke: "none",
                   "data-slot": "icon",
-                  className: cn(styles$3C.w6, styles$3C.h6),
+                  className: clsx(styles$3C.w6, styles$3C.h6),
                   children: /* @__PURE__ */ jsx(
                     "path",
                     {
@@ -69917,7 +70211,7 @@ const CardTile = ({
 }) => /* @__PURE__ */ jsx(
   "button",
   {
-    className: cn(styles$3B.root, className),
+    className: clsx(styles$3B.root, className),
     type: "button",
     onClick,
     children: /* @__PURE__ */ jsx("div", { className: styles$3B.wrapper, children })
@@ -69978,7 +70272,7 @@ const ChequeredCard = () => {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cn(styles$3A.root, { [styles$3A.light]: light }),
+      className: clsx(styles$3A.root, { [styles$3A.light]: light }),
       onClick: () => {
         setLight((prev) => !prev);
       },
@@ -70001,20 +70295,20 @@ const ChequeredCard = () => {
         /* @__PURE__ */ jsx("div", { className: styles$3A.shine }),
         /* @__PURE__ */ jsxs("div", { className: styles$3A.background, children: [
           /* @__PURE__ */ jsxs("div", { className: styles$3A.tiles, children: [
-            /* @__PURE__ */ jsx("div", { className: cn(styles$3A.tile, styles$3A.tile1) }),
-            /* @__PURE__ */ jsx("div", { className: cn(styles$3A.tile, styles$3A.tile2) }),
-            /* @__PURE__ */ jsx("div", { className: cn(styles$3A.tile, styles$3A.tile3) }),
-            /* @__PURE__ */ jsx("div", { className: cn(styles$3A.tile, styles$3A.tile4) }),
-            /* @__PURE__ */ jsx("div", { className: cn(styles$3A.tile, styles$3A.tile5) }),
-            /* @__PURE__ */ jsx("div", { className: cn(styles$3A.tile, styles$3A.tile6) }),
-            /* @__PURE__ */ jsx("div", { className: cn(styles$3A.tile, styles$3A.tile7) }),
-            /* @__PURE__ */ jsx("div", { className: cn(styles$3A.tile, styles$3A.tile8) }),
-            /* @__PURE__ */ jsx("div", { className: cn(styles$3A.tile, styles$3A.tile9) }),
-            /* @__PURE__ */ jsx("div", { className: cn(styles$3A.tile, styles$3A.tile10) })
+            /* @__PURE__ */ jsx("div", { className: clsx(styles$3A.tile, styles$3A.tile1) }),
+            /* @__PURE__ */ jsx("div", { className: clsx(styles$3A.tile, styles$3A.tile2) }),
+            /* @__PURE__ */ jsx("div", { className: clsx(styles$3A.tile, styles$3A.tile3) }),
+            /* @__PURE__ */ jsx("div", { className: clsx(styles$3A.tile, styles$3A.tile4) }),
+            /* @__PURE__ */ jsx("div", { className: clsx(styles$3A.tile, styles$3A.tile5) }),
+            /* @__PURE__ */ jsx("div", { className: clsx(styles$3A.tile, styles$3A.tile6) }),
+            /* @__PURE__ */ jsx("div", { className: clsx(styles$3A.tile, styles$3A.tile7) }),
+            /* @__PURE__ */ jsx("div", { className: clsx(styles$3A.tile, styles$3A.tile8) }),
+            /* @__PURE__ */ jsx("div", { className: clsx(styles$3A.tile, styles$3A.tile9) }),
+            /* @__PURE__ */ jsx("div", { className: clsx(styles$3A.tile, styles$3A.tile10) })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: cn(styles$3A.line, styles$3A.line1) }),
-          /* @__PURE__ */ jsx("div", { className: cn(styles$3A.line, styles$3A.line2) }),
-          /* @__PURE__ */ jsx("div", { className: cn(styles$3A.line, styles$3A.line3) })
+          /* @__PURE__ */ jsx("div", { className: clsx(styles$3A.line, styles$3A.line1) }),
+          /* @__PURE__ */ jsx("div", { className: clsx(styles$3A.line, styles$3A.line2) }),
+          /* @__PURE__ */ jsx("div", { className: clsx(styles$3A.line, styles$3A.line3) })
         ] })
       ]
     }
@@ -70049,7 +70343,7 @@ const styles$3y = {
 	image: image$j
 };
 
-const EnvelopeTile = ({ className = "", header, children }) => /* @__PURE__ */ jsxs("div", { className: cn(styles$3y.root, className), children: [
+const EnvelopeTile = ({ className = "", header, children }) => /* @__PURE__ */ jsxs("div", { className: clsx(styles$3y.root, className), children: [
   /* @__PURE__ */ jsx("div", { className: styles$3y.corner, children: /* @__PURE__ */ jsx("div", { className: styles$3y.url, children: /* @__PURE__ */ jsx(
     "img",
     {
@@ -70101,7 +70395,7 @@ const GlowingTile = () => {
           /* @__PURE__ */ jsx(
             "button",
             {
-              className: cn(styles$3x.button, styles$3x.minus),
+              className: clsx(styles$3x.button, styles$3x.minus),
               onClick: () => setSpeed((state) => state - 1),
               children: "-"
             }
@@ -70110,7 +70404,7 @@ const GlowingTile = () => {
           /* @__PURE__ */ jsx(
             "button",
             {
-              className: cn(styles$3x.button, styles$3x.plus),
+              className: clsx(styles$3x.button, styles$3x.plus),
               onClick: () => setSpeed((state) => state + 1),
               children: "+"
             }
@@ -70118,7 +70412,7 @@ const GlowingTile = () => {
           /* @__PURE__ */ jsx(
             "button",
             {
-              className: cn(styles$3x.button, styles$3x.reset),
+              className: clsx(styles$3x.button, styles$3x.reset),
               onClick: () => setSpeed(0),
               children: "reset"
             }
@@ -70186,7 +70480,7 @@ const HoverTile = ({ color, global, children }) => {
     }
     ref.current.style.setProperty("--color", color);
   }, [color]);
-  return /* @__PURE__ */ jsxs("div", { ref, className: cn(styles$3v.root, { [styles$3v.global]: global }), children: [
+  return /* @__PURE__ */ jsxs("div", { ref, className: clsx(styles$3v.root, { [styles$3v.global]: global }), children: [
     /* @__PURE__ */ jsx("div", { className: styles$3v.border }),
     /* @__PURE__ */ jsx("div", { className: styles$3v.content, children })
   ] });
@@ -70350,7 +70644,7 @@ const ProductTile = ({
 }) => /* @__PURE__ */ jsx(
   "button",
   {
-    className: cn(styles$3r.root, className),
+    className: clsx(styles$3r.root, className),
     type: "button",
     onClick,
     children: /* @__PURE__ */ jsx("div", { className: styles$3r.content, children: /* @__PURE__ */ jsx("div", { className: styles$3r.icon, children }) })
@@ -70411,7 +70705,7 @@ const ProfileCard = () => {
   const [state, setState] = useState(
     "about"
   );
-  return /* @__PURE__ */ jsxs("div", { className: cn(styles$3q.root, { [styles$3q.isActive]: isActive }), children: [
+  return /* @__PURE__ */ jsxs("div", { className: clsx(styles$3q.root, { [styles$3q.isActive]: isActive }), children: [
     /* @__PURE__ */ jsxs("div", { className: styles$3q.header, children: [
       /* @__PURE__ */ jsx(
         "div",
@@ -70437,7 +70731,7 @@ const ProfileCard = () => {
       /* @__PURE__ */ jsxs(
         "div",
         {
-          className: cn(styles$3q.section, {
+          className: clsx(styles$3q.section, {
             [styles$3q.isActive]: state === "about"
           }),
           id: "about",
@@ -70462,7 +70756,7 @@ const ProfileCard = () => {
       /* @__PURE__ */ jsx(
         "div",
         {
-          className: cn(styles$3q.section, {
+          className: clsx(styles$3q.section, {
             [styles$3q.isActive]: state === "experience"
           }),
           id: "experience",
@@ -70504,7 +70798,7 @@ const ProfileCard = () => {
       /* @__PURE__ */ jsx(
         "div",
         {
-          className: cn(styles$3q.section, {
+          className: clsx(styles$3q.section, {
             [styles$3q.isActive]: state === "contact"
           }),
           id: "contact",
@@ -70574,7 +70868,7 @@ const ProfileCard = () => {
         /* @__PURE__ */ jsx(
           "button",
           {
-            className: cn(styles$3q.button, {
+            className: clsx(styles$3q.button, {
               [styles$3q.isActive]: state === "about"
             }),
             onClick: () => {
@@ -70587,7 +70881,7 @@ const ProfileCard = () => {
         /* @__PURE__ */ jsx(
           "button",
           {
-            className: cn(styles$3q.button, {
+            className: clsx(styles$3q.button, {
               [styles$3q.isActive]: state === "experience"
             }),
             onClick: () => {
@@ -70600,7 +70894,7 @@ const ProfileCard = () => {
         /* @__PURE__ */ jsx(
           "button",
           {
-            className: cn(styles$3q.button, {
+            className: clsx(styles$3q.button, {
               [styles$3q.isActive]: state === "contact"
             }),
             onClick: () => {
@@ -70640,7 +70934,7 @@ const ShineCard = ({ children, className, style, ...props }) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn(styles$3o.shineCard, className),
+      className: clsx(styles$3o.shineCard, className),
       style,
       ...props,
       children
@@ -70839,7 +71133,7 @@ const CardCarouselItem = ({
   hrefTitle,
   active
 }) => {
-  return /* @__PURE__ */ jsxs("div", { className: cn(styles$3l.item, { [styles$3l.active]: active }), children: [
+  return /* @__PURE__ */ jsxs("div", { className: clsx(styles$3l.item, { [styles$3l.active]: active }), children: [
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -71094,7 +71388,7 @@ const FullScreenImageCarousel = () => {
         "button",
         {
           type: "button",
-          className: cn(styles$3j.btn, styles$3j.prev),
+          className: clsx(styles$3j.btn, styles$3j.prev),
           onClick: handlePrevClick,
           "aria-controls": "fullscreen-image-carousel-slides",
           "aria-label": "Previous slide",
@@ -71105,7 +71399,7 @@ const FullScreenImageCarousel = () => {
         "button",
         {
           type: "button",
-          className: cn(styles$3j.btn, styles$3j.next),
+          className: clsx(styles$3j.btn, styles$3j.next),
           onClick: throttledHandleNextClick,
           "aria-controls": "fullscreen-image-carousel-slides",
           "aria-label": "Next slide",
@@ -71267,7 +71561,7 @@ const GalleryReverseScroll = () => {
     return { firstColumn: first, secondColumn: second, thirdColumn: third };
   }, []);
   return /* @__PURE__ */ jsxs("div", { className: styles$3i.root, children: [
-    /* @__PURE__ */ jsx("div", { className: cn(styles$3i.column, styles$3i.reverse), children: firstColumn.map((record, i) => /* @__PURE__ */ jsxs("figure", { className: styles$3i.columnItem, children: [
+    /* @__PURE__ */ jsx("div", { className: clsx(styles$3i.column, styles$3i.reverse), children: firstColumn.map((record, i) => /* @__PURE__ */ jsxs("figure", { className: styles$3i.columnItem, children: [
       /* @__PURE__ */ jsx("div", { className: styles$3i.itemImgWrap, children: /* @__PURE__ */ jsx("img", { src: record.url, alt: "", height: "", width: "" }) }),
       /* @__PURE__ */ jsxs("figcaption", { className: styles$3i.itemCaption, children: [
         /* @__PURE__ */ jsx("span", { children: record.description }),
@@ -71283,7 +71577,7 @@ const GalleryReverseScroll = () => {
         /* @__PURE__ */ jsx("span", { children: record.date })
       ] })
     ] }, i)) }),
-    /* @__PURE__ */ jsx("div", { className: cn(styles$3i.column, styles$3i.reverse), children: thirdColumn.map((record, i) => /* @__PURE__ */ jsxs("figure", { className: styles$3i.columnItem, children: [
+    /* @__PURE__ */ jsx("div", { className: clsx(styles$3i.column, styles$3i.reverse), children: thirdColumn.map((record, i) => /* @__PURE__ */ jsxs("figure", { className: styles$3i.columnItem, children: [
       /* @__PURE__ */ jsx("div", { className: styles$3i.itemImgWrap, children: /* @__PURE__ */ jsx("img", { src: record.url, alt: "", height: "", width: "" }) }),
       /* @__PURE__ */ jsxs("figcaption", { className: styles$3i.itemCaption, children: [
         /* @__PURE__ */ jsx("span", { children: record.description }),
@@ -71698,7 +71992,7 @@ const Scroller = ({
       }
     };
   }, [handleScroll, withArrows]);
-  return /* @__PURE__ */ jsx("div", { className: styles$3e.root, children: /* @__PURE__ */ jsx("div", { className: styles$3e.carousel, children: /* @__PURE__ */ jsxs("div", { className: cn(styles$3e.wrapper, { [styles$3e.hasArrow]: hasArrows }), children: [
+  return /* @__PURE__ */ jsx("div", { className: styles$3e.root, children: /* @__PURE__ */ jsx("div", { className: styles$3e.carousel, children: /* @__PURE__ */ jsxs("div", { className: clsx(styles$3e.wrapper, { [styles$3e.hasArrow]: hasArrows }), children: [
     /* @__PURE__ */ jsxs("div", { className: styles$3e.header, children: [
       /* @__PURE__ */ jsxs("div", { className: styles$3e.heading, children: [
         /* @__PURE__ */ jsx("h2", { className: styles$3e.headline, children: headline }),
@@ -71709,7 +72003,7 @@ const Scroller = ({
           "button",
           {
             type: "button",
-            className: cn(styles$3e.arrow, styles$3e.arrowPrev, {
+            className: clsx(styles$3e.arrow, styles$3e.arrowPrev, {
               [styles$3e.disabled]: isPrevDisabled
             }),
             disabled: isPrevDisabled,
@@ -71732,7 +72026,7 @@ const Scroller = ({
           "button",
           {
             type: "button",
-            className: cn(styles$3e.arrow, styles$3e.arrowNext, {
+            className: clsx(styles$3e.arrow, styles$3e.arrowNext, {
               [styles$3e.disabled]: isNextDisabled
             }),
             disabled: isNextDisabled,
@@ -71930,10 +72224,10 @@ const Checkbox = ({
   {
     ref,
     role: "presentation",
-    className: cn(styles$3b.root, rootClassName),
+    className: clsx(styles$3b.root, rootClassName),
     children: [
-      /* @__PURE__ */ jsx("input", { className: cn(styles$3b.realbox, inputClassName), type: "checkbox" }),
-      /* @__PURE__ */ jsx("span", { role: "presentation", className: cn(styles$3b.fauxbox, className) })
+      /* @__PURE__ */ jsx("input", { className: clsx(styles$3b.realbox, inputClassName), type: "checkbox" }),
+      /* @__PURE__ */ jsx("span", { role: "presentation", className: clsx(styles$3b.fauxbox, className) })
     ]
   }
 );
@@ -72111,7 +72405,7 @@ const StrikethroughCheckbox = ({
     /* @__PURE__ */ jsx(
       "input",
       {
-        className: cn(styles$39.input, { [styles$39.pristine]: pristine }),
+        className: clsx(styles$39.input, { [styles$39.pristine]: pristine }),
         type: "checkbox",
         name: typeof children === "string" ? children : void 0,
         defaultChecked,
@@ -72156,7 +72450,7 @@ const Chips = () => {
   return /* @__PURE__ */ jsx("div", { className: styles$38.root, children: /* @__PURE__ */ jsx("div", { className: styles$38.wrapper, children: /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cn(styles$38.chips, styles$38.chipsInitial, styles$38.inputField),
+      className: clsx(styles$38.chips, styles$38.chipsInitial, styles$38.inputField),
       children: [
         chips.map((chip, i) => /* @__PURE__ */ jsxs("div", { className: styles$38.chip, children: [
           chip,
@@ -72371,6 +72665,41 @@ function translateY(distance) {
 
 var e$2=function(t){return "number"==typeof t},i$5=function(t){return "function"==typeof t},n=function(t){return "[object Object]"===Object.prototype.toString.call(t)},r=function(t){return Array.prototype.slice.apply(t)},s$1=function(t){var e=t.reduce(function(t,e){return t[e]=(t[e]||0)+1,t},{});return Object.keys(e).filter(function(t){return e[t]>1})};function a$2(t){return [].slice.call(arguments,1).forEach(function(e){if(e)for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);}),t}var o,l=function(t,e,i){return t+(e-t)*i},p={__proto__:null,isNumber:e$2,isFunction:i$5,isObject:n,toArray:r,getDuplicateValsAsStrings:s$1,assign:a$2,tweenProp:l},c$2="data-flip-id",u$2="data-inverse-flip-id",d$2="data-portal-key",f$3="data-exit-container",h$1={__proto__:null,DATA_FLIP_ID:c$2,DATA_INVERSE_FLIP_ID:u$2,DATA_FLIP_CONFIG:"data-flip-config",DATA_PORTAL_KEY:d$2},g$1={noWobble:{stiffness:200,damping:26},gentle:{stiffness:120,damping:14},veryGentle:{stiffness:130,damping:17},wobbly:{stiffness:180,damping:12},stiff:{stiffness:260,damping:26}},m$1=function(t){return n(t)?t:Object.keys(g$1).indexOf(t)>-1?g$1[t]:{}};"undefined"!=typeof window&&(o=window.requestAnimationFrame);var v$1=o=o||function(t){window.setTimeout(t,1e3/60);},y$1=Date.now(),_="object"==typeof performance&&"function"==typeof performance.now?function(){return performance.now()}:function(){return Date.now()-y$1};function S(t,e){var i=t.indexOf(e);-1!==i&&t.splice(i,1);}var E$1=/*#__PURE__*/function(){function t(){}return t.prototype.run=function(){var t=this;v$1(function(){t.springSystem.loop(_());});},t}(),A$1=function(){this.position=0,this.velocity=0;},C=0,b$1=.001,I=/*#__PURE__*/function(){function t(t){this._id="s"+C++,this._springSystem=t,this.listeners=[],this._startValue=0,this._currentState=new A$1,this._displacementFromRestThreshold=.001,this._endValue=0,this._overshootClampingEnabled=false,this._previousState=new A$1,this._restSpeedThreshold=.001,this._tempState=new A$1,this._timeAccumulator=0,this._wasAtRest=true,this._cachedSpringConfig={};}var e=t.prototype;return e.getId=function(){return this._id},e.destroy=function(){this.listeners=[],this._springSystem.deregisterSpring(this);},e.setSpringConfig=function(t){return this._springConfig=t,this},e.getCurrentValue=function(){return this._currentState.position},e.getDisplacementDistanceForState=function(t){return Math.abs(this._endValue-t.position)},e.setEndValue=function(t){if(t===this._endValue)return this;if(this.prevEndValue=t,this._endValue===t&&this.isAtRest())return this;this._startValue=this.getCurrentValue(),this._endValue=t,this._springSystem.activateSpring(this.getId());for(var e=0,i=this.listeners.length;e<i;e++){var n=this.listeners[e].onSpringEndStateChange;n&&n(this);}return this},e.setVelocity=function(t){return t===this._currentState.velocity||(this._currentState.velocity=t,this._springSystem.activateSpring(this.getId())),this},e.setCurrentValue=function(t){this._startValue=t,this._currentState.position=t;for(var e=0,i=this.listeners.length;e<i;e++){var n=this.listeners[e];n.onSpringUpdate&&n.onSpringUpdate(this);}return this},e.setAtRest=function(){return this._endValue=this._currentState.position,this._tempState.position=this._currentState.position,this._currentState.velocity=0,this},e.setOvershootClampingEnabled=function(t){return this._overshootClampingEnabled=t,this},e.isOvershooting=function(){var t=this._startValue,e=this._endValue;return this._springConfig.tension>0&&(t<e&&this.getCurrentValue()>e||t>e&&this.getCurrentValue()<e)},e.advance=function(t,e){var i=this.isAtRest();if(!i||!this._wasAtRest){var n=e;e>.064&&(n=.064),this._timeAccumulator+=n;for(var r,s,a,o,l,p,c=this._springConfig.tension,u=this._springConfig.friction,d=this._currentState.position,f=this._currentState.velocity,h=this._tempState.position,g=this._tempState.velocity;this._timeAccumulator>=b$1;)this._timeAccumulator-=b$1,this._timeAccumulator<b$1&&(this._previousState.position=d,this._previousState.velocity=f),s=c*(this._endValue-h)-u*f,o=c*(this._endValue-(h=d+(r=f)*b$1*.5))-u*(g=f+s*b$1*.5),p=c*(this._endValue-(h=d+(a=g)*b$1*.5))-u*(g=f+o*b$1*.5),h=d+(l=g)*b$1,d+=1/6*(r+2*(a+l)+(g=f+p*b$1))*b$1,f+=1/6*(s+2*(o+p)+(c*(this._endValue-h)-u*g))*b$1;this._tempState.position=h,this._tempState.velocity=g,this._currentState.position=d,this._currentState.velocity=f,this._timeAccumulator>0&&this._interpolate(this._timeAccumulator/b$1),(this.isAtRest()||this._overshootClampingEnabled&&this.isOvershooting())&&(this._springConfig.tension>0?(this._startValue=this._endValue,this._currentState.position=this._endValue):(this._endValue=this._currentState.position,this._startValue=this._endValue),this.setVelocity(0),i=true);var m=false;this._wasAtRest&&(this._wasAtRest=false,m=true);var v=false;i&&(this._wasAtRest=true,v=true),this.notifyPositionUpdated(m,v);}},e.notifyPositionUpdated=function(t,e){var i=this;this.listeners.filter(Boolean).forEach(function(n){t&&n.onSpringActivate&&!i._onActivateCalled&&(n.onSpringActivate(i),i._onActivateCalled=true),n.onSpringUpdate&&n.onSpringUpdate(i),e&&n.onSpringAtRest&&n.onSpringAtRest(i);});},e.systemShouldAdvance=function(){return !this.isAtRest()||!this.wasAtRest()},e.wasAtRest=function(){return this._wasAtRest},e.isAtRest=function(){return Math.abs(this._currentState.velocity)<this._restSpeedThreshold&&(this.getDisplacementDistanceForState(this._currentState)<=this._displacementFromRestThreshold||0===this._springConfig.tension)},e._interpolate=function(t){this._currentState.position=this._currentState.position*t+this._previousState.position*(1-t),this._currentState.velocity=this._currentState.velocity*t+this._previousState.velocity*(1-t);},e.addListener=function(t){return this.listeners.push(t),this},e.addOneTimeListener=function(t){var e=this;return Object.keys(t).forEach(function(i){var n;t[i]=(n=t[i],function(){n.apply(void 0,[].slice.call(arguments)),e.removeListener(t);});}),this.listeners.push(t),this},e.removeListener=function(t){return S(this.listeners,t),this},t}(),w=/*#__PURE__*/function(){function t(t){this.looper=t||new E$1,this.looper.springSystem=this,this.listeners=[],this._activeSprings=[],this._idleSpringIndices=[],this._isIdle=true,this._lastTimeMillis=-1,this._springRegistry={};}var e=t.prototype;return e.createSpring=function(t,e){return this.createSpringWithConfig({tension:t,friction:e})},e.createSpringWithConfig=function(t){var e=new I(this);return this.registerSpring(e),e.setSpringConfig(t),e},e.getIsIdle=function(){return this._isIdle},e.registerSpring=function(t){this._springRegistry[t.getId()]=t;},e.deregisterSpring=function(t){S(this._activeSprings,t),delete this._springRegistry[t.getId()];},e.advance=function(t,e){for(var i=this;this._idleSpringIndices.length>0;)this._idleSpringIndices.pop();for(this._activeSprings.filter(Boolean).forEach(function(n){n.systemShouldAdvance()?n.advance(t/1e3,e/1e3):i._idleSpringIndices.push(i._activeSprings.indexOf(n));});this._idleSpringIndices.length>0;){var n=this._idleSpringIndices.pop();n>=0&&this._activeSprings.splice(n,1);}},e.loop=function(t){var e;-1===this._lastTimeMillis&&(this._lastTimeMillis=t-1);var i=t-this._lastTimeMillis;this._lastTimeMillis=t;var n=0,r=this.listeners.length;for(n=0;n<r;n++)(e=this.listeners[n]).onBeforeIntegrate&&e.onBeforeIntegrate(this);for(this.advance(t,i),0===this._activeSprings.length&&(this._isIdle=true,this._lastTimeMillis=-1),n=0;n<r;n++)(e=this.listeners[n]).onAfterIntegrate&&e.onAfterIntegrate(this);this._isIdle||this.looper.run();},e.activateSpring=function(t){var e=this._springRegistry[t];-1===this._activeSprings.indexOf(e)&&this._activeSprings.push(e),this.getIsIdle()&&(this._isIdle=false,this.looper.run());},t}(),O=new w,x=function(t){var e=t.springConfig,i=e.overshootClamping,n=t.getOnUpdateFunc,r=t.onAnimationEnd,s=t.onSpringActivate,a=O.createSpring(e.stiffness,e.damping);a.setOvershootClampingEnabled(!!i);var o={onSpringActivate:s,onSpringAtRest:function(){a.destroy(),r();},onSpringUpdate:n({spring:a,onAnimationEnd:r})};return a.addListener(o),a},U$1=function(t){var e=x(t);return e.setEndValue(1),e},V$2=function(t,e){if(void 0===e&&(e={}),t&&t.length){e.reverse&&t.reverse();var i,n="number"!=typeof(i=e.speed)?1.1:1+Math.min(Math.max(5*i,0),5),r=1/Math.max(Math.min(t.length,100),10),s=t.map(function(t,e){var i=t.getOnUpdateFunc;return t.getOnUpdateFunc=function(t){var a=i(t);return function(t){var i=t.getCurrentValue();(i=i<.01?0:i>.99?1:i)>=r&&s[e+1]&&s[e+1](Math.max(Math.min(i*n,1),0)),a(t);}},t}).map(function(t){var e=x(t);if(e)return e.setEndValue.bind(e)}).filter(Boolean);s[0]&&s[0](1);}},F$1=function(t){return [0,1,4,5,12,13].map(function(e){return t[e]})},P=function(t){return t.top<window.innerHeight&&t.bottom>0&&t.left<window.innerWidth&&t.right>0};function D(t){return JSON.parse(t.dataset.flipConfig||"{}")}var R=function(t,e){var i;return a$2(t,((i={})[e[0]]=e[1],i))},T$1=function(t,e){return r(e?document.querySelectorAll("["+d$2+'="'+e+'"]'):t.querySelectorAll("["+c$2+"]"))},M=function(t){return t.map(function(t){return [t,t.getBoundingClientRect()]})},L$1=function(n){var o=n.cachedOrderedFlipIds,p=void 0===o?[]:o,f=n.inProgressAnimations,h=void 0===f?{}:f,v=n.flippedElementPositionsBeforeUpdate,y=void 0===v?{}:v,_=n.flipCallbacks,S=void 0===_?{}:_,E=n.containerEl,A=n.applyTransformOrigin,C=n.spring,b=n.debug,I=n.portalKey,w=n.staggerConfig,O=void 0===w?{}:w,x=n.decisionData,j=void 0===x?{}:x,B=n.handleEnterUpdateDelete,N=n.onComplete,L=n.onStart;if(!window.matchMedia("(prefers-reduced-motion: reduce)").matches){var q,X=M(T$1((q={element:E,portalKey:I}).element,q.portalKey)).map(function(t){var e=t[0],i=t[1],n=window.getComputedStyle(e);return [e.dataset.flipId,{element:e,rect:i,opacity:parseFloat(n.opacity),transform:n.transform}]}).reduce(R,{}),Y=function(t){var e=t.containerEl,i=t.portalKey;return i?function(t){return function(e){return r(document.querySelectorAll("["+d$2+'="'+t+'"]'+e))}}(i):e?function(t){var e=Math.random().toFixed(5);return t.dataset.flipperId=e,function(i){return r(t.querySelectorAll('[data-flipper-id="'+e+'"] '+i))}}(e):function(){return []}}({containerEl:E,portalKey:I}),W=function(t){return function(e){return t("["+c$2+'="'+e+'"]')[0]}}(Y),K=function(t){return y[t]&&X[t]},H=Object.keys(y).concat(Object.keys(X)).filter(function(t){return !K(t)}),J={flipCallbacks:S,getElement:W,flippedElementPositionsBeforeUpdate:y,flippedElementPositionsAfterUpdate:X,inProgressAnimations:h,decisionData:j},z=function(t){var e,i=t.unflippedIds,n=t.flipCallbacks,r=t.getElement,s=t.flippedElementPositionsBeforeUpdate,a=t.flippedElementPositionsAfterUpdate,o=t.inProgressAnimations,l=t.decisionData,p=i.filter(function(t){return a[t]}).filter(function(t){return n[t]&&n[t].onAppear}),c=i.filter(function(t){return s[t]&&n[t]&&n[t].onExit}),u=new Promise(function(t){e=t;}),d=[],f=0,h=c.map(function(t,i){var r=s[t].domDataForExitAnimations,a=r.element,p=r.parent,c=r.childPosition,u=c.top,h=c.left,g=c.width,m=c.height;"static"===getComputedStyle(p).position&&(p.style.position="relative"),a.style.transform="matrix(1, 0, 0, 1, 0, 0)",a.style.position="absolute",a.style.top=u+"px",a.style.left=h+"px",a.style.height=m+"px",a.style.width=g+"px";var v=d.filter(function(t){return t[0]===p})[0];v||(v=[p,document.createDocumentFragment()],d.push(v)),v[1].appendChild(a),f+=1;var y=function(){try{p.removeChild(a);}catch(t){}finally{0==(f-=1)&&e();}};return o[t]={stop:y},function(){return n[t].onExit(a,i,y,l)}});return d.forEach(function(t){t[0].appendChild(t[1]);}),h.length||e(),{hideEnteringElements:function(){p.forEach(function(t){var e=r(t);e&&(e.style.opacity="0");});},animateEnteringElements:function(){p.forEach(function(t,e){var i=r(t);i&&n[t].onAppear(i,e,l);});},animateExitingElements:function(){return h.forEach(function(t){return t()}),u}}}(a$2({},J,{unflippedIds:H})),G=z.hideEnteringElements,Q=z.animateEnteringElements,Z=z.animateExitingElements,$=a$2({},J,{containerEl:E,flippedIds:p.filter(K),applyTransformOrigin:A,spring:C,debug:b,staggerConfig:O,scopedSelector:Y,onComplete:N});L&&L(E,j);var tt=function(n){var o,p=n.flippedIds,c=n.flipCallbacks,d=n.inProgressAnimations,f=n.flippedElementPositionsBeforeUpdate,h=n.flippedElementPositionsAfterUpdate,v=n.applyTransformOrigin,y=n.spring,_=n.getElement,S=n.debug,E=n.staggerConfig,A=void 0===E?{}:E,C=n.decisionData,b=void 0===C?{}:C,I=n.onComplete,w=n.containerEl,O=new Promise(function(t){o=t;});if(I&&O.then(function(){return I(w,b)}),!p.length)return function(){return o([]),O};var x=[],R=_(p[0]),T=R?R.ownerDocument.querySelector("body"):document.querySelector("body");s$1(p);var M=p.map(function(n){var s=f[n].rect,p=h[n].rect,_=f[n].opacity,S=h[n].opacity,E=p.width<1||p.height<1,A=h[n].element;if(!P(s)&&!P(p))return  false;if(!A)return  false;var C,I,w,O=D(A),U=(w=(I=void 0===(C={flipperSpring:y,flippedSpring:O.spring})?{}:C).flippedSpring,a$2({},g$1.noWobble,m$1(I.flipperSpring),m$1(w))),V=true===O.stagger?"default":O.stagger,R={element:A,id:n,stagger:V,springConfig:U};if(c[n]&&c[n].shouldFlip&&!c[n].shouldFlip(b.previous,b.current))return  false;var k=Math.abs(s.left-p.left)+Math.abs(s.top-p.top),j=Math.abs(s.width-p.width)+Math.abs(s.height-p.height),B=Math.abs(S-_);if(0===s.height&&0===p.height||0===s.width&&0===p.width||k<.5&&j<.5&&B<.01)return  false;var N=parse$2(h[n].transform),L={matrix:N},q={matrix:[]},X=[N];O.translate&&(X.push(translateX(s.left-p.left)),X.push(translateY(s.top-p.top))),O.scale&&(X.push(scaleX(Math.max(s.width,1)/Math.max(p.width,1))),X.push(scaleY(Math.max(s.height,1)/Math.max(p.height,1)))),O.opacity&&(q.opacity=_,L.opacity=S);var Y=[];if(!c[n]||!c[n].shouldInvert||c[n].shouldInvert(b.previous,b.current)){var W=function(t,e){return r(t.querySelectorAll("["+u$2+'="'+e+'"]'))}(A,n);Y=W.map(function(t){return [t,D(t)]});}q.matrix=F$1(X.reduce(multiply)),L.matrix=F$1(L.matrix);var K,H=function(t){var i=t.element,n=t.invertedChildren,r=t.body;return function(t){var s=t.matrix,a=t.opacity,o=t.forceMinVals;if(e$2(a)&&(i.style.opacity=a+""),o&&(i.style.minHeight="1px",i.style.minWidth="1px"),s){var l=function(t){return "matrix("+t.join(", ")+")"}(s);i.style.transform=l,n&&function(t){var e=t.matrix,i=t.body;t.invertedChildren.forEach(function(t){var n=t[0],r=t[1];if(i.contains(n)){var s=e[0],a=e[3],o=e[5],l={translateX:0,translateY:0,scaleX:1,scaleY:1},p="";r.translate&&(l.translateX=-e[4]/s,l.translateY=-o/a,p+="translate("+l.translateX+"px, "+l.translateY+"px)"),r.scale&&(l.scaleX=1/s,l.scaleY=1/a,p+=" scale("+l.scaleX+", "+l.scaleY+")"),n.style.transform=p;}});}({invertedChildren:n,matrix:s,body:r});}}}({element:A,invertedChildren:Y,body:T});if(c[n]&&c[n].onComplete){var J=c[n].onComplete;K=function(){return J(A,b)};}var z=e$2(q.opacity)&&e$2(L.opacity)&&q.opacity!==L.opacity,G=false;return a$2({},R,{stagger:V,springConfig:U,getOnUpdateFunc:function(t){var e=t.spring,i=t.onAnimationEnd;return d[n]={destroy:e.destroy.bind(e),onAnimationEnd:i},function(t){c[n]&&c[n].onSpringUpdate&&c[n].onSpringUpdate(t.getCurrentValue()),G||(G=true,c[n]&&c[n].onStart&&c[n].onStart(A,b));var e=t.getCurrentValue();if(T.contains(A)){var i={matrix:[]};i.matrix=q.matrix.map(function(t,i){return l(t,L.matrix[i],e)}),z&&(i.opacity=l(q.opacity,L.opacity,e)),H(i);}else t.destroy();}},initializeFlip:function(){H({matrix:q.matrix,opacity:z?q.opacity:void 0,forceMinVals:E}),c[n]&&c[n].onStartImmediate&&c[n].onStartImmediate(A,b),O.transformOrigin?A.style.transformOrigin=O.transformOrigin:v&&(A.style.transformOrigin="0 0"),Y.forEach(function(t){var e=t[0],i=t[1];i.transformOrigin?e.style.transformOrigin=i.transformOrigin:v&&(e.style.transformOrigin="0 0");});},onAnimationEnd:function(t){delete d[n],i$5(K)&&K(),A.style.transform="",Y.forEach(function(t){t[0].style.transform="";}),E&&A&&(A.style.minHeight="",A.style.minWidth=""),t||(x.push(n),x.length>=M.length&&o(x));},delayUntil:O.delayUntil})}).filter(Boolean);if(M.forEach(function(t){return (0, t.initializeFlip)()}),S)return function(){};var k=M.filter(function(t){return t.delayUntil&&(e=t.delayUntil,M.filter(function(t){return t.id===e}).length);var e;}),j={},B={},N={};k.forEach(function(t){t.stagger?(N[t.stagger]=true,B[t.delayUntil]?B[t.delayUntil].push(t.stagger):B[t.delayUntil]=[t.stagger]):j[t.delayUntil]?j[t.delayUntil].push(t):j[t.delayUntil]=[t];});var L=M.filter(function(t){return t.stagger}).reduce(function(t,e){return t[e.stagger]?t[e.stagger].push(e):t[e.stagger]=[e],t},{}),q=M.filter(function(t){return  -1===k.indexOf(t)});return q.forEach(function(t){t.onSpringActivate=function(){j[t.id]&&j[t.id].forEach(U$1),B[t.id]&&Object.keys(B[t.id].reduce(function(t,e){var i;return a$2(t,((i={})[e]=true,i))},{})).forEach(function(t){V$2(L[t],A[t]);});};}),function(){return M.length||o([]),q.filter(function(t){return !t.stagger}).forEach(U$1),Object.keys(L).forEach(function(t){N[t]||V$2(L[t],A[t]);}),O}}($);B?B({hideEnteringElements:G,animateEnteringElements:Q,animateExitingElements:Z,animateFlippedElements:tt}):(G(),Z().then(Q),tt());}},q=function(t){var e=t.element,i=t.flipCallbacks,n=void 0===i?{}:i,s=t.inProgressAnimations,o=void 0===s?{}:s,l=T$1(e,t.portalKey),p=r(e.querySelectorAll("["+u$2+"]")),c={},d=[],h={};l.filter(function(t){return n&&n[t.dataset.flipId]&&n[t.dataset.flipId].onExit}).forEach(function(t){var e=t.parentNode;if(t.closest){var i=t.closest("["+f$3+"]");i&&(e=i);}var n=d.findIndex(function(t){return t[0]===e});-1===n&&(d.push([e,e.getBoundingClientRect()]),n=d.length-1),c[t.dataset.flipId]=d[n][1],h[t.dataset.flipId]=e;});var g=M(l),m=g.map(function(t){var e=t[0],i=t[1],r={};if(n&&n[e.dataset.flipId]&&n[e.dataset.flipId].onExit){var s=c[e.dataset.flipId];a$2(r,{element:e,parent:h[e.dataset.flipId],childPosition:{top:i.top-s.top,left:i.left-s.left,width:i.width,height:i.height}});}return [e.dataset.flipId,{rect:i,opacity:parseFloat(window.getComputedStyle(e).opacity||"1"),domDataForExitAnimations:r}]}).reduce(R,{});return function(t,e){Object.keys(t).forEach(function(e){t[e].destroy&&t[e].destroy(),t[e].onAnimationEnd&&t[e].onAnimationEnd(true),delete t[e];}),e.forEach(function(t){t.style.transform="",t.style.opacity="";});}(o,l.concat(p)),{flippedElementPositions:m,cachedOrderedFlipIds:g.map(function(t){return t[0].dataset.flipId})}};new w;
 
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+function getAugmentedNamespace(n) {
+  if (Object.prototype.hasOwnProperty.call(n, '__esModule')) return n;
+  var f = n.default;
+	if (typeof f == "function") {
+		var a = function a () {
+			var isInstance = false;
+      try {
+        isInstance = this instanceof a;
+      } catch {}
+			if (isInstance) {
+        return Reflect.construct(f, arguments, this.constructor);
+			}
+			return f.apply(this, arguments);
+		};
+		a.prototype = f.prototype;
+  } else a = {};
+  Object.defineProperty(a, '__esModule', {value: true});
+	Object.keys(n).forEach(function (k) {
+		var d = Object.getOwnPropertyDescriptor(n, k);
+		Object.defineProperty(a, k, d.get ? d : {
+			enumerable: true,
+			get: function () {
+				return n[k];
+			}
+		});
+	});
+	return a;
+}
+
 function s(){return s=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n]);}return e},s.apply(this,arguments)}function c$1(e,t){return c$1=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},c$1(e,t)}function d$1(e,t){if(null==e)return {};var r,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)t.indexOf(r=o[n])>=0||(i[r]=e[r]);return i}var f$2=/*#__PURE__*/createContext({}),u$1=/*#__PURE__*/createContext("portal"),h=/*#__PURE__*/function(r){var n,o;function p(){for(var e,t=arguments.length,n=new Array(t),i=0;i<t;i++)n[i]=arguments[i];return (e=r.call.apply(r,[this].concat(n))||this).inProgressAnimations={},e.flipCallbacks={},e.el=void 0,e}o=r,(n=p).prototype=Object.create(o.prototype),n.prototype.constructor=n,c$1(n,o);var l=p.prototype;return l.getSnapshotBeforeUpdate=function(t){return t.flipKey!==this.props.flipKey&&this.el?q({element:this.el,flipCallbacks:this.flipCallbacks,inProgressAnimations:this.inProgressAnimations,portalKey:this.props.portalKey}):null},l.componentDidUpdate=function(e,r,n){this.props.flipKey!==e.flipKey&&this.el&&L$1({flippedElementPositionsBeforeUpdate:n.flippedElementPositions,cachedOrderedFlipIds:n.cachedOrderedFlipIds,containerEl:this.el,inProgressAnimations:this.inProgressAnimations,flipCallbacks:this.flipCallbacks,applyTransformOrigin:this.props.applyTransformOrigin,spring:this.props.spring,debug:this.props.debug,portalKey:this.props.portalKey,staggerConfig:this.props.staggerConfig,handleEnterUpdateDelete:this.props.handleEnterUpdateDelete,decisionData:{previous:e.decisionData,current:this.props.decisionData},onComplete:this.props.onComplete,onStart:this.props.onStart});},l.render=function(){var e=this,t=this.props,r=t.portalKey,n=/*#__PURE__*/React__default.createElement(f$2.Provider,{value:this.flipCallbacks},/*#__PURE__*/React__default.createElement(t.element,{className:t.className,ref:function(t){return e.el=t}},this.props.children));return r&&(n=/*#__PURE__*/React__default.createElement(u$1.Provider,{value:r},n)),n},p}(Component);h.defaultProps={applyTransformOrigin:true,element:"div"};var m=["children","flipId","inverseFlipId","portalKey"],y=["children","flipId","shouldFlip","shouldInvert","onAppear","onStart","onStartImmediate","onComplete","onExit","onSpringUpdate"],g=function(e){var t,i=e.children,o=e.flipId,p$1=e.inverseFlipId,s=e.portalKey,c=d$1(e,m),f=i,u=function(e){return "function"==typeof e}(f);if(!u)try{f=Children.only(i);}catch(e){throw new Error("Each Flipped component must wrap a single child")}c.scale||c.translate||c.opacity||p.assign(c,{translate:true,scale:true,opacity:true});var h=((t={})[h$1.DATA_FLIP_CONFIG]=JSON.stringify(c),t);return void 0!==o?h[h$1.DATA_FLIP_ID]=String(o):p$1&&(h[h$1.DATA_INVERSE_FLIP_ID]=String(p$1)),void 0!==s&&(h[h$1.DATA_PORTAL_KEY]=s),u?f(h):/*#__PURE__*/cloneElement(f,h)},v=function(e){var t=e.children,n=e.flipId,o=e.shouldFlip,p$1=e.shouldInvert,l=e.onAppear,a=e.onStart,c=e.onStartImmediate,h=e.onComplete,m=e.onExit,v=e.onSpringUpdate,I=d$1(e,y);return t?I.inverseFlipId?/*#__PURE__*/React__default.createElement(g,s({},I),t):/*#__PURE__*/React__default.createElement(u$1.Consumer,null,function(e){return React__default.createElement(f$2.Consumer,null,function(d){return p.isObject(d)&&n&&(d[n]={shouldFlip:o,shouldInvert:p$1,onAppear:l,onStart:a,onStartImmediate:c,onComplete:h,onExit:m,onSpringUpdate:v}),/*#__PURE__*/React__default.createElement(g,s({flipId:n},I,{portalKey:e}),t)})}):null};v.displayName="Flipped";
 
 // THIS FILE IS AUTO GENERATED
@@ -72481,7 +72810,7 @@ const DailClock = () => {
     /* @__PURE__ */ jsx(
       "div",
       {
-        className: cn(styles$36.seconds, { [styles$36.pause]: seconds === 0 }),
+        className: clsx(styles$36.seconds, { [styles$36.pause]: seconds === 0 }),
         style: {
           "--dRotate": `${6 * seconds}deg`
         },
@@ -72491,7 +72820,7 @@ const DailClock = () => {
     /* @__PURE__ */ jsx(
       "div",
       {
-        className: cn(styles$36.minutes, { [styles$36.pause]: minutes === 0 }),
+        className: clsx(styles$36.minutes, { [styles$36.pause]: minutes === 0 }),
         style: {
           "--dRotate": `${6 * minutes}deg`
         },
@@ -72557,7 +72886,7 @@ const MotionClock = () => {
           /* @__PURE__ */ jsx(
             "div",
             {
-              className: cn(styles$35.hand, styles$35.hr),
+              className: clsx(styles$35.hand, styles$35.hr),
               style: {
                 animationDelay: `${-delays[0]}s`
               }
@@ -72566,7 +72895,7 @@ const MotionClock = () => {
           /* @__PURE__ */ jsx(
             "div",
             {
-              className: cn(styles$35.hand, styles$35.min),
+              className: clsx(styles$35.hand, styles$35.min),
               style: {
                 animationDelay: `${-delays[1]}s`
               }
@@ -72575,7 +72904,7 @@ const MotionClock = () => {
           /* @__PURE__ */ jsx(
             "div",
             {
-              className: cn(styles$35.hand, styles$35.sec),
+              className: clsx(styles$35.hand, styles$35.sec),
               style: {
                 animationDelay: `${-delays[2]}s`
               },
@@ -72629,11 +72958,11 @@ const NeumorphicAnalogClock = ({ className }) => {
     const secDelay = msInMin * (time % msInMin / msInMin) / msInSec;
     return [hrDelay, minDelay, secDelay];
   });
-  return /* @__PURE__ */ jsxs("div", { className: cn(styles$34.root, className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: clsx(styles$34.root, className), children: [
     /* @__PURE__ */ jsx(
       "div",
       {
-        className: cn(styles$34.hand, styles$34.hr),
+        className: clsx(styles$34.hand, styles$34.hr),
         style: {
           animationDelay: `${-delays[0]}s`
         }
@@ -72642,7 +72971,7 @@ const NeumorphicAnalogClock = ({ className }) => {
     /* @__PURE__ */ jsx(
       "div",
       {
-        className: cn(styles$34.hand, styles$34.min),
+        className: clsx(styles$34.hand, styles$34.min),
         style: {
           animationDelay: `${-delays[1]}s`
         }
@@ -72651,7 +72980,7 @@ const NeumorphicAnalogClock = ({ className }) => {
     /* @__PURE__ */ jsx(
       "div",
       {
-        className: cn(styles$34.hand, styles$34.sec),
+        className: clsx(styles$34.hand, styles$34.sec),
         style: {
           animationDelay: `${-delays[2]}s`
         }
@@ -72758,7 +73087,7 @@ const CircleTextHover = () => {
           "div",
           {
             ref: cursorRef,
-            className: cn(styles$33.cursor, { [styles$33.active]: activeCursor }),
+            className: clsx(styles$33.cursor, { [styles$33.active]: activeCursor }),
             children: [
               /* @__PURE__ */ jsx("div", { className: styles$33.icon, children: Icon ? /* @__PURE__ */ jsx(Icon, {}) : null }),
               /* @__PURE__ */ jsx("div", { className: styles$33.link, children: inner })
@@ -73173,7 +73502,7 @@ const MagicMouseEffect = () => {
         "text-shadow",
         `0px 0px 1.5rem rgb(${color} / 0.5)`
       );
-      star.className = cn(styles$2_.star, config$1.animations[countRef.current % 3]);
+      star.className = clsx(styles$2_.star, config$1.animations[countRef.current % 3]);
       star.style.setProperty(
         "animation-duration",
         ms(config$1.starAnimationDuration)
@@ -73413,7 +73742,7 @@ const DialControl = ({ limit = true }) => {
     /* @__PURE__ */ jsx("div", { className: styles$2Z.container, children: /* @__PURE__ */ jsx("div", { className: styles$2Z.nav, children: /* @__PURE__ */ jsx("ul", { className: styles$2Z.list, children: items$j.map((item, index) => /* @__PURE__ */ jsx(
       "li",
       {
-        className: cn(styles$2Z.item, {
+        className: clsx(styles$2Z.item, {
           [styles$2Z.active]: active === index
         }),
         onClick: () => {
@@ -73449,7 +73778,7 @@ const DialFuturistic = () => {
   return /* @__PURE__ */ jsx("div", { ref, className: styles$2Y.root, "data-theme": theme, children: /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cn(styles$2Y.selector, {
+      className: clsx(styles$2Y.selector, {
         [styles$2Y.active]: activeIndex !== null
       }),
       children: [
@@ -73544,11 +73873,11 @@ const items$h = [
 const MetalCircleController = () => {
   const [active, setActive] = useState(2);
   return /* @__PURE__ */ jsxs("div", { className: styles$2X.root, children: [
-    /* @__PURE__ */ jsx("div", { className: cn(styles$2X.dial, styles$2X[`pos${active}`]), children: /* @__PURE__ */ jsx("div", { className: styles$2X.grad }) }),
+    /* @__PURE__ */ jsx("div", { className: clsx(styles$2X.dial, styles$2X[`pos${active}`]), children: /* @__PURE__ */ jsx("div", { className: styles$2X.grad }) }),
     /* @__PURE__ */ jsx("div", { className: styles$2X.container, children: /* @__PURE__ */ jsx("div", { className: styles$2X.nav, children: /* @__PURE__ */ jsx("ul", { className: styles$2X.list, children: items$h.map((item, index) => /* @__PURE__ */ jsx(
       "li",
       {
-        className: cn(styles$2X.item, {
+        className: clsx(styles$2X.item, {
           [styles$2X.active]: active === index
         }),
         onClick: () => {
@@ -77764,9 +78093,11 @@ function useRole(context, props) {
   } : {}, [enabled, reference, floating, item]);
 }
 
-const tooltip = "_tooltip_45btf_1";
+const tooltip = "_tooltip_pli88_1";
+const tooltipContent = "_tooltipContent_pli88_6";
 const styles$2R = {
-	tooltip: tooltip
+	tooltip: tooltip,
+	tooltipContent: tooltipContent
 };
 
 const Tooltip = ({
@@ -77777,7 +78108,29 @@ const Tooltip = ({
   placement = "top",
   offset: offsetValue = 8
 }) => {
-  const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(true);
+  const shouldReduceMotion = useReducedMotion();
+  const variants = shouldReduceMotion ? void 0 : {
+    initial: { scale: 0.6, opacity: 0 },
+    animate: {
+      scale: 1,
+      opacity: 1,
+      transition: {
+        type: "spring",
+        stiffness: 150,
+        damping: 20,
+        mass: 1.2
+      }
+    },
+    exit: {
+      scale: 0.4,
+      opacity: 0,
+      transition: {
+        duration: 0.1,
+        ease: "easeIn"
+      }
+    }
+  };
   const { refs, floatingStyles, context } = useFloating({
     open: isOpen,
     onOpenChange: setIsOpen,
@@ -77833,16 +78186,27 @@ const Tooltip = ({
     };
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       cloneElement(childElement, mergedProps),
-      isOpen && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: isOpen && /* @__PURE__ */ jsx(
         "div",
         {
           ref: refs.setFloating,
           style: floatingStyles,
           ...getFloatingProps(),
-          className: cn(styles$2R.tooltip, className),
-          children: label
-        }
-      ) })
+          className: styles$2R.tooltip,
+          children: /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              className: clsx(styles$2R.tooltipContent, className),
+              variants,
+              initial: shouldReduceMotion ? void 0 : "initial",
+              animate: shouldReduceMotion ? void 0 : "animate",
+              exit: shouldReduceMotion ? void 0 : "exit",
+              children: label
+            }
+          )
+        },
+        "tooltip"
+      ) }) })
     ] });
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -77855,16 +78219,27 @@ const Tooltip = ({
         children
       }
     ),
-    isOpen && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: isOpen && /* @__PURE__ */ jsx(
       "div",
       {
         ref: refs.setFloating,
         style: floatingStyles,
         ...getFloatingProps(),
-        className: cn(styles$2R.tooltip, className),
-        children: label
-      }
-    ) })
+        className: styles$2R.tooltip,
+        children: /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            className: clsx(styles$2R.tooltipContent, className),
+            variants,
+            initial: shouldReduceMotion ? void 0 : "initial",
+            animate: shouldReduceMotion ? void 0 : "animate",
+            exit: shouldReduceMotion ? void 0 : "exit",
+            children: label
+          }
+        )
+      },
+      "tooltip"
+    ) }) })
   ] });
 };
 
@@ -78083,13 +78458,13 @@ const DockMotionItem = ({
     "div",
     {
       ref,
-      className: cn(styles$2S.root, { [styles$2S.block]: type === "block" }),
+      className: clsx(styles$2S.root, { [styles$2S.block]: type === "block" }),
       children: /* @__PURE__ */ jsxs(
         ContentElement,
         {
           ref: scope,
           layoutId: itemKey,
-          className: cn(styles$2S.item, className),
+          className: clsx(styles$2S.item, className),
           onMouseEnter,
           style: contentStyle,
           "data-action": isInteractive,
@@ -78161,7 +78536,7 @@ const DockMotion$1 = ({
   return /* @__PURE__ */ jsxs(
     "footer",
     {
-      className: cn(styles$2U.root, className),
+      className: clsx(styles$2U.root, className),
       "data-dock": "motion",
       children: [
         embedded,
@@ -78201,7 +78576,7 @@ const DockMotion$1 = ({
                       props.onClick?.(e);
                     },
                     mouseX,
-                    className: cn(props?.className, styles$2U.child)
+                    className: clsx(props?.className, styles$2U.child)
                   });
                 }
                 if (item.type === DockMotionDivider) {
@@ -78263,21 +78638,21 @@ const styles$2O = {
 
 const DenseGrid = () => {
   return /* @__PURE__ */ jsxs("div", { className: styles$2O.root, children: [
-    /* @__PURE__ */ jsx("div", { className: cn(styles$2O.item, styles$2O.horizontal), children: /* @__PURE__ */ jsx("img", { src: "https://images.unsplash.com/photo-1506252374453-ef5237291d83?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=968&q=80" }) }),
-    /* @__PURE__ */ jsx("div", { className: cn(styles$2O.item, styles$2O.vertical), children: /* @__PURE__ */ jsx("img", { src: "https://images.unsplash.com/photo-1536273176101-b3810e5cb3c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2000&q=80" }) }),
-    /* @__PURE__ */ jsx("div", { className: cn(styles$2O.item, styles$2O.horizontal), children: /* @__PURE__ */ jsx("img", { src: "https://images.unsplash.com/photo-1524546101258-e99b0826ea9c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1936&q=80" }) }),
-    /* @__PURE__ */ jsx("div", { className: cn(styles$2O.item, styles$2O.big), children: /* @__PURE__ */ jsx("img", { src: "https://images.unsplash.com/photo-1486239154832-a989a601c41d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" }) }),
-    /* @__PURE__ */ jsx("div", { className: cn(styles$2O.item, styles$2O.vertical), children: /* @__PURE__ */ jsx("img", { src: "https://images.unsplash.com/photo-1519458524098-335b2a5747b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" }) }),
+    /* @__PURE__ */ jsx("div", { className: clsx(styles$2O.item, styles$2O.horizontal), children: /* @__PURE__ */ jsx("img", { src: "https://images.unsplash.com/photo-1506252374453-ef5237291d83?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=968&q=80" }) }),
+    /* @__PURE__ */ jsx("div", { className: clsx(styles$2O.item, styles$2O.vertical), children: /* @__PURE__ */ jsx("img", { src: "https://images.unsplash.com/photo-1536273176101-b3810e5cb3c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2000&q=80" }) }),
+    /* @__PURE__ */ jsx("div", { className: clsx(styles$2O.item, styles$2O.horizontal), children: /* @__PURE__ */ jsx("img", { src: "https://images.unsplash.com/photo-1524546101258-e99b0826ea9c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1936&q=80" }) }),
+    /* @__PURE__ */ jsx("div", { className: clsx(styles$2O.item, styles$2O.big), children: /* @__PURE__ */ jsx("img", { src: "https://images.unsplash.com/photo-1486239154832-a989a601c41d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" }) }),
+    /* @__PURE__ */ jsx("div", { className: clsx(styles$2O.item, styles$2O.vertical), children: /* @__PURE__ */ jsx("img", { src: "https://images.unsplash.com/photo-1519458524098-335b2a5747b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" }) }),
     /* @__PURE__ */ jsx("div", { className: styles$2O.item, children: /* @__PURE__ */ jsx("img", { src: "https://images.unsplash.com/photo-1548737787-a776beb45cfd?ixlib=rb-1.2.1&auto=format&fit=crop&w=701&q=80" }) }),
-    /* @__PURE__ */ jsx("div", { className: cn(styles$2O.item, styles$2O.vertical), children: /* @__PURE__ */ jsx("img", { src: "https://images.unsplash.com/photo-1513836279014-a89f7a76ae86?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" }) }),
+    /* @__PURE__ */ jsx("div", { className: clsx(styles$2O.item, styles$2O.vertical), children: /* @__PURE__ */ jsx("img", { src: "https://images.unsplash.com/photo-1513836279014-a89f7a76ae86?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" }) }),
     /* @__PURE__ */ jsx("div", { className: styles$2O.item, children: /* @__PURE__ */ jsx("img", { src: "https://images.unsplash.com/photo-1474218861938-d6b14818c8e2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1489&q=80" }) }),
     /* @__PURE__ */ jsx("div", { className: styles$2O.item, children: /* @__PURE__ */ jsx("img", { src: "https://images.unsplash.com/photo-1502842113467-03fdcac39fe5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" }) }),
     /* @__PURE__ */ jsx("div", { className: styles$2O.item, children: /* @__PURE__ */ jsx("img", { src: "https://images.unsplash.com/photo-1548599042-0df640181771?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" }) }),
-    /* @__PURE__ */ jsx("div", { className: cn(styles$2O.item, styles$2O.big), children: /* @__PURE__ */ jsx("img", { src: "https://images.unsplash.com/photo-1515405969538-5642ed9d0cc4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80" }) }),
+    /* @__PURE__ */ jsx("div", { className: clsx(styles$2O.item, styles$2O.big), children: /* @__PURE__ */ jsx("img", { src: "https://images.unsplash.com/photo-1515405969538-5642ed9d0cc4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80" }) }),
     /* @__PURE__ */ jsx("div", { className: styles$2O.item, children: /* @__PURE__ */ jsx("img", { src: "https://images.unsplash.com/photo-1519999482648-25049ddd37b1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=926&q=80" }) }),
-    /* @__PURE__ */ jsx("div", { className: cn(styles$2O.item, styles$2O.horizontal), children: /* @__PURE__ */ jsx("img", { src: "https://images.unsplash.com/photo-1460627390041-532a28402358?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" }) }),
+    /* @__PURE__ */ jsx("div", { className: clsx(styles$2O.item, styles$2O.horizontal), children: /* @__PURE__ */ jsx("img", { src: "https://images.unsplash.com/photo-1460627390041-532a28402358?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" }) }),
     /* @__PURE__ */ jsx("div", { className: styles$2O.item, children: /* @__PURE__ */ jsx("img", { src: "https://images.unsplash.com/photo-1514673309919-5998bbbadf7f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=688&q=80" }) }),
-    /* @__PURE__ */ jsx("div", { className: cn(styles$2O.item, styles$2O.horizontal), children: /* @__PURE__ */ jsx("img", { src: "https://images.unsplash.com/photo-1543335785-8aadf6d8183c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1489&q=80" }) })
+    /* @__PURE__ */ jsx("div", { className: clsx(styles$2O.item, styles$2O.horizontal), children: /* @__PURE__ */ jsx("img", { src: "https://images.unsplash.com/photo-1543335785-8aadf6d8183c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1489&q=80" }) })
   ] });
 };
 
@@ -78432,7 +78807,7 @@ const items$d = [
   }
 ];
 const GridHover = () => {
-  return /* @__PURE__ */ jsx("ul", { className: cn(styles$2M.root, styles$2M.withColor, styles$2M.withBlur), children: items$d.map((image) => /* @__PURE__ */ jsx("li", { className: styles$2M.item, children: /* @__PURE__ */ jsxs("a", { href: "#", children: [
+  return /* @__PURE__ */ jsx("ul", { className: clsx(styles$2M.root, styles$2M.withColor, styles$2M.withBlur), children: items$d.map((image) => /* @__PURE__ */ jsx("li", { className: styles$2M.item, children: /* @__PURE__ */ jsxs("a", { href: "#", children: [
     /* @__PURE__ */ jsx("img", { src: image.src, alt: "" }),
     /* @__PURE__ */ jsx("span", { className: styles$2M.description, children: image.title })
   ] }) }, image.title + image.src)) });
@@ -78466,23 +78841,23 @@ const styles$2L = {
 };
 
 const LIST = [
-  cn(styles$2L.card2, styles$2L.cardImg),
-  cn(styles$2L.card3, styles$2L.cardImg),
-  cn(styles$2L.cardImg, styles$2L.card1, styles$2L.cardMain),
-  cn(styles$2L.card4, styles$2L.cardImg),
-  cn(styles$2L.cardImg, styles$2L.card5),
-  cn(styles$2L.card6, styles$2L.cardImg)
+  clsx(styles$2L.card2, styles$2L.cardImg),
+  clsx(styles$2L.card3, styles$2L.cardImg),
+  clsx(styles$2L.cardImg, styles$2L.card1, styles$2L.cardMain),
+  clsx(styles$2L.card4, styles$2L.cardImg),
+  clsx(styles$2L.cardImg, styles$2L.card5),
+  clsx(styles$2L.card6, styles$2L.cardImg)
 ];
 const GridViewTransition = () => {
   const [activeIndex, setActiveIndex] = useState(null);
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn(styles$2L.root, { [styles$2L.expanded]: activeIndex !== null }),
+      className: clsx(styles$2L.root, { [styles$2L.expanded]: activeIndex !== null }),
       children: LIST.map((item, index) => /* @__PURE__ */ jsx(
         "div",
         {
-          className: cn(styles$2L.card, item, {
+          className: clsx(styles$2L.card, item, {
             [styles$2L.active]: activeIndex === index
           }),
           onClick: () => {
@@ -78566,7 +78941,7 @@ const BoldHamburger = () => {
     "button",
     {
       type: "button",
-      className: cn(styles$2J.root, { [styles$2J.active]: isActive }),
+      className: clsx(styles$2J.root, { [styles$2J.active]: isActive }),
       onClick: () => setIsActive((prev) => !prev),
       children: [
         /* @__PURE__ */ jsx("div", { className: styles$2J.top }),
@@ -78608,7 +78983,7 @@ const HamburgerX = ({ isOpen, onClick = noop$5 }) => /* @__PURE__ */ jsx(
   "button",
   {
     type: "button",
-    className: cn(styles$2H.root, { [styles$2H.isOpen]: isOpen }),
+    className: clsx(styles$2H.root, { [styles$2H.isOpen]: isOpen }),
     onClick,
     children: /* @__PURE__ */ jsx("div", { className: styles$2H.icon })
   }
@@ -78625,7 +79000,7 @@ const Header = ({
   children,
   className = "",
   contentClassName = ""
-}) => /* @__PURE__ */ jsx("header", { className: cn(styles$2G.root, className), children: /* @__PURE__ */ jsx("div", { className: cn(styles$2G.content, contentClassName), children }) });
+}) => /* @__PURE__ */ jsx("header", { className: clsx(styles$2G.root, className), children: /* @__PURE__ */ jsx("div", { className: clsx(styles$2G.content, contentClassName), children }) });
 
 const root$2u = "_root_m9k88_1";
 const main$4 = "_main_m9k88_6";
@@ -78677,7 +79052,7 @@ const StickyHeader = () => {
       ] }),
       /* @__PURE__ */ jsx("a", { href: "#", className: styles$2F.editButton, children: "✎" })
     ] }) }),
-    /* @__PURE__ */ jsxs("main", { className: cn(styles$2F.main, styles$2F.limited), children: [
+    /* @__PURE__ */ jsxs("main", { className: clsx(styles$2F.main, styles$2F.limited), children: [
       /* @__PURE__ */ jsxs("div", { className: styles$2F.col, children: [
         /* @__PURE__ */ jsx("div", { className: styles$2F.box, style: { height: "20vh" } }),
         /* @__PURE__ */ jsx("div", { className: styles$2F.box, style: { height: "5vh" } }),
@@ -78716,7 +79091,7 @@ const AnimatedHeroTitle = () => {
     /* @__PURE__ */ jsxs(
       "span",
       {
-        className: cn(styles$2E.bg, styles$2E.bg1),
+        className: clsx(styles$2E.bg, styles$2E.bg1),
         style: {
           "--content": "Develop.",
           "--padding": "0.05em",
@@ -78725,14 +79100,14 @@ const AnimatedHeroTitle = () => {
         },
         children: [
           /* @__PURE__ */ jsx("span", { className: styles$2E.shadow, children: "Develop." }),
-          /* @__PURE__ */ jsx("span", { className: cn(styles$2E.fg, styles$2E.fg1), children: "Develop." })
+          /* @__PURE__ */ jsx("span", { className: clsx(styles$2E.fg, styles$2E.fg1), children: "Develop." })
         ]
       }
     ),
     /* @__PURE__ */ jsxs(
       "span",
       {
-        className: cn(styles$2E.bg, styles$2E.b2),
+        className: clsx(styles$2E.bg, styles$2E.b2),
         style: {
           "--content": "Preview.",
           "--padding": "0.05em",
@@ -78741,14 +79116,14 @@ const AnimatedHeroTitle = () => {
         },
         children: [
           /* @__PURE__ */ jsx("span", { className: styles$2E.shadow, children: "Preview." }),
-          /* @__PURE__ */ jsx("span", { className: cn(styles$2E.fg, styles$2E.fg2, styles$2E.mx2), children: "Preview." })
+          /* @__PURE__ */ jsx("span", { className: clsx(styles$2E.fg, styles$2E.fg2, styles$2E.mx2), children: "Preview." })
         ]
       }
     ),
     /* @__PURE__ */ jsxs(
       "span",
       {
-        className: cn(styles$2E.bg, styles$2E.b3),
+        className: clsx(styles$2E.bg, styles$2E.b3),
         style: {
           "--content": "Ship.",
           "--padding": "0.05em",
@@ -78757,7 +79132,7 @@ const AnimatedHeroTitle = () => {
         },
         children: [
           /* @__PURE__ */ jsx("span", { className: styles$2E.shadow, children: "Ship." }),
-          /* @__PURE__ */ jsx("span", { className: cn(styles$2E.fg, styles$2E.fg3), children: "Ship." })
+          /* @__PURE__ */ jsx("span", { className: clsx(styles$2E.fg, styles$2E.fg3), children: "Ship." })
         ]
       }
     )
@@ -78958,7 +79333,7 @@ const SquircleAvatar = () => {
         alt: ""
       }
     ) }),
-    /* @__PURE__ */ jsx("div", { className: cn(styles$2y.avatar, styles$2y.squircle), children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: clsx(styles$2y.avatar, styles$2y.squircle), children: /* @__PURE__ */ jsx(
       "img",
       {
         className: styles$2y.img,
@@ -79153,7 +79528,7 @@ const ClearInput = () => {
       duration: 0.2
     });
   }, [svgLineProxy]);
-  return /* @__PURE__ */ jsxs("div", { ref, className: cn(styles$2x.root, { [styles$2x.clearing]: clearing }), children: [
+  return /* @__PURE__ */ jsxs("div", { ref, className: clsx(styles$2x.root, { [styles$2x.clearing]: clearing }), children: [
     /* @__PURE__ */ jsx("div", { className: styles$2x.text, children: /* @__PURE__ */ jsx(
       "input",
       {
@@ -79189,7 +79564,7 @@ const regex = new RegExp(
 );
 const EmailInput = () => {
   const [valid, setValid] = useState(false);
-  return /* @__PURE__ */ jsxs("div", { className: cn(styles$2w.root, { [styles$2w.valid]: valid }), children: [
+  return /* @__PURE__ */ jsxs("div", { className: clsx(styles$2w.root, { [styles$2w.valid]: valid }), children: [
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -79389,7 +79764,7 @@ function validateEmail(email) {
 const NewsletterInput = () => {
   const [valid, setValid] = useState(false);
   const [submitting, setSubmitting] = useState(false);
-  return /* @__PURE__ */ jsxs("div", { className: cn(styles$2s.root, { [styles$2s.valid]: valid }), children: [
+  return /* @__PURE__ */ jsxs("div", { className: clsx(styles$2s.root, { [styles$2s.valid]: valid }), children: [
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -79405,7 +79780,7 @@ const NewsletterInput = () => {
       "button",
       {
         type: "button",
-        className: cn(styles$2s.button, { [styles$2s.active]: submitting }),
+        className: clsx(styles$2s.button, { [styles$2s.active]: submitting }),
         disabled: submitting,
         onClick: (e) => {
           const button = e.currentTarget;
@@ -79612,7 +79987,7 @@ const PasswordInput = () => {
     "div",
     {
       ref,
-      className: cn(styles$2r.root, { [styles$2r.show]: show }),
+      className: clsx(styles$2r.root, { [styles$2r.show]: show }),
       onPointerMove: (e) => {
         const button = e.currentTarget;
         const rect = button.getBoundingClientRect();
@@ -79731,7 +80106,7 @@ const styles$2p = {
 const ShadowedClick = () => {
   const [isActiveSubmit, setIsActiveSubmit] = useState(false);
   return /* @__PURE__ */ jsxs("div", { className: styles$2p.root, children: [
-    /* @__PURE__ */ jsx("div", { className: cn(styles$2p.mask, { [styles$2p.active]: isActiveSubmit }) }),
+    /* @__PURE__ */ jsx("div", { className: clsx(styles$2p.mask, { [styles$2p.active]: isActiveSubmit }) }),
     /* @__PURE__ */ jsxs(
       "form",
       {
@@ -79827,7 +80202,7 @@ const styles$2o = {
 };
 
 const BorderLink = ({ children, className = "", ...rest }) => {
-  return /* @__PURE__ */ jsx("a", { ...rest, className: cn(styles$2o.root, className), children: /* @__PURE__ */ jsx("span", { className: styles$2o.background, children: /* @__PURE__ */ jsx("span", { className: styles$2o.border, children }) }) });
+  return /* @__PURE__ */ jsx("a", { ...rest, className: clsx(styles$2o.root, className), children: /* @__PURE__ */ jsx("span", { className: styles$2o.background, children: /* @__PURE__ */ jsx("span", { className: styles$2o.border, children }) }) });
 };
 
 const root$2d = "_root_wu2q7_1";
@@ -79838,7 +80213,7 @@ const styles$2n = {
 };
 
 const CircleLink = ({ children, className = "", ...rest }) => {
-  return /* @__PURE__ */ jsxs("a", { ...rest, className: cn(styles$2n.root, className), children: [
+  return /* @__PURE__ */ jsxs("a", { ...rest, className: clsx(styles$2n.root, className), children: [
     children,
     /* @__PURE__ */ jsx("svg", { className: styles$2n.svg, viewBox: "0 0 70 36", children: /* @__PURE__ */ jsx("path", { d: "M6.9739 30.8153H63.0244C65.5269 30.8152 75.5358 -3.68471 35.4998 2.81531C-16.1598 11.2025 0.894099 33.9766 26.9922 34.3153C104.062 35.3153 54.5169 -6.68469 23.489 9.31527" }) })
   ] });
@@ -79905,7 +80280,7 @@ const RegularLink = ({
   "a",
   {
     ...rest,
-    className: cn(styles$2k.root, className),
+    className: clsx(styles$2k.root, className),
     href,
     target,
     rel,
@@ -79956,7 +80331,7 @@ const UnderlinedLink = ({
   "a",
   {
     ...rest,
-    className: cn(styles$2i.root, className),
+    className: clsx(styles$2i.root, className),
     href,
     target,
     rel,
@@ -80091,8 +80466,8 @@ const CanOfDigits = ({
   initialValue = 1e3
 }) => {
   const [value, setValue] = useState(initialValue);
-  return /* @__PURE__ */ jsxs("span", { className: cn(styles$2e.root, className), children: [
-    /* @__PURE__ */ jsx("label", { className: cn(styles$2e.label, styles$2e.sr), htmlFor: "digits", children: "Digits" }),
+  return /* @__PURE__ */ jsxs("span", { className: clsx(styles$2e.root, className), children: [
+    /* @__PURE__ */ jsx("label", { className: clsx(styles$2e.label, styles$2e.sr), htmlFor: "digits", children: "Digits" }),
     controls && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         "input",
@@ -80175,7 +80550,7 @@ const styles$2c = {
 };
 
 const CircleDotsLoader = ({ type = "fade" }) => {
-  return /* @__PURE__ */ jsx("div", { className: cn(styles$2c.root, styles$2c[type]), children: Array.from({ length: 12 }, (_, i) => /* @__PURE__ */ jsx("div", { className: cn(styles$2c[`circle${i + 1}`], styles$2c.child) }, i)) });
+  return /* @__PURE__ */ jsx("div", { className: clsx(styles$2c.root, styles$2c[type]), children: Array.from({ length: 12 }, (_, i) => /* @__PURE__ */ jsx("div", { className: clsx(styles$2c[`circle${i + 1}`], styles$2c.child) }, i)) });
 };
 
 const root$21 = "_root_aw2sz_1";
@@ -80193,10 +80568,10 @@ const styles$2b = {
 
 const CubeLoader = () => {
   return /* @__PURE__ */ jsxs("div", { className: styles$2b.root, children: [
-    /* @__PURE__ */ jsx("div", { className: cn(styles$2b.cube, styles$2b.cube1) }),
-    /* @__PURE__ */ jsx("div", { className: cn(styles$2b.cube, styles$2b.cube2) }),
-    /* @__PURE__ */ jsx("div", { className: cn(styles$2b.cube, styles$2b.cube3) }),
-    /* @__PURE__ */ jsx("div", { className: cn(styles$2b.cube, styles$2b.cube4) })
+    /* @__PURE__ */ jsx("div", { className: clsx(styles$2b.cube, styles$2b.cube1) }),
+    /* @__PURE__ */ jsx("div", { className: clsx(styles$2b.cube, styles$2b.cube2) }),
+    /* @__PURE__ */ jsx("div", { className: clsx(styles$2b.cube, styles$2b.cube3) }),
+    /* @__PURE__ */ jsx("div", { className: clsx(styles$2b.cube, styles$2b.cube4) })
   ] });
 };
 
@@ -80222,7 +80597,7 @@ const EndlessLoader = ({ container }) => {
         return;
       }
       try {
-        const GLModule = await import('./gl-B5722hRa.js');
+        const GLModule = await import('./gl-BE-pAc_o.js');
         if (!isActiveRef.current) {
           return;
         }
@@ -80603,7 +80978,7 @@ const RingLoader = ({
 }) => {
   const split = children.split("").map((char, index) => /* @__PURE__ */ jsx("div", { className: styles$22.sector, children: char }, char + index));
   const rest = Array.from({ length: 30 - split.length }, (_, index) => /* @__PURE__ */ jsx("div", { className: styles$22.sector }, index));
-  return /* @__PURE__ */ jsxs("div", { className: cn(styles$22.root, className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: clsx(styles$22.root, className), children: [
     /* @__PURE__ */ jsxs("div", { className: styles$22.ring, children: [
       split,
       rest
@@ -80882,7 +81257,7 @@ const SpinningClickAnimation = ({
     "button",
     {
       type: "button",
-      className: cn(styles$1Z.root, className),
+      className: clsx(styles$1Z.root, className),
       ref,
       onClick: () => {
         const keyframes = [
@@ -81048,7 +81423,7 @@ const styles$1W = {
 	scrollingThings: scrollingThings};
 
 const SubtleBorderAnimation = () => {
-  return /* @__PURE__ */ jsx("div", { className: styles$1W.root, children: /* @__PURE__ */ jsxs("div", { className: cn(styles$1W.outer, styles$1W.visible), children: [
+  return /* @__PURE__ */ jsx("div", { className: styles$1W.root, children: /* @__PURE__ */ jsxs("div", { className: clsx(styles$1W.outer, styles$1W.visible), children: [
     /* @__PURE__ */ jsx("div", { className: styles$1W.background1 }),
     /* @__PURE__ */ jsxs("div", { className: styles$1W.background2, children: [
       /* @__PURE__ */ jsx(
@@ -81162,7 +81537,7 @@ const items$c = [
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 24 24",
         fill: "currentColor",
-        className: cn(styles$1T.w6, styles$1T.h6),
+        className: clsx(styles$1T.w6, styles$1T.h6),
         children: /* @__PURE__ */ jsx(
           "path",
           {
@@ -81182,7 +81557,7 @@ const items$c = [
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 24 24",
         fill: "currentColor",
-        className: cn(styles$1T.w6, styles$1T.h6),
+        className: clsx(styles$1T.w6, styles$1T.h6),
         children: /* @__PURE__ */ jsx(
           "path",
           {
@@ -81202,7 +81577,7 @@ const items$c = [
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 24 24",
         fill: "currentColor",
-        className: cn(styles$1T.w6, styles$1T.h6),
+        className: clsx(styles$1T.w6, styles$1T.h6),
         children: /* @__PURE__ */ jsx(
           "path",
           {
@@ -81222,7 +81597,7 @@ const items$c = [
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 24 24",
         fill: "currentColor",
-        className: cn(styles$1T.w6, styles$1T.h6),
+        className: clsx(styles$1T.w6, styles$1T.h6),
         children: /* @__PURE__ */ jsx(
           "path",
           {
@@ -81242,7 +81617,7 @@ const items$c = [
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 24 24",
         fill: "currentColor",
-        className: cn(styles$1T.w6, styles$1T.h6),
+        className: clsx(styles$1T.w6, styles$1T.h6),
         children: /* @__PURE__ */ jsx(
           "path",
           {
@@ -81262,7 +81637,7 @@ const items$c = [
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 24 24",
         fill: "currentColor",
-        className: cn(styles$1T.w6, styles$1T.h6),
+        className: clsx(styles$1T.w6, styles$1T.h6),
         children: /* @__PURE__ */ jsx(
           "path",
           {
@@ -81282,7 +81657,7 @@ const items$c = [
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 24 24",
         fill: "currentColor",
-        className: cn(styles$1T.w6, styles$1T.h6),
+        className: clsx(styles$1T.w6, styles$1T.h6),
         children: /* @__PURE__ */ jsx(
           "path",
           {
@@ -81302,7 +81677,7 @@ const items$c = [
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 24 24",
         fill: "currentColor",
-        className: cn(styles$1T.w6, styles$1T.h6),
+        className: clsx(styles$1T.w6, styles$1T.h6),
         children: [
           /* @__PURE__ */ jsx("path", { d: "M10.464 8.746c.227-.18.497-.311.786-.394v2.795a2.252 2.252 0 0 1-.786-.393c-.394-.313-.546-.681-.546-1.004 0-.323.152-.691.546-1.004ZM12.75 15.662v-2.824c.347.085.664.228.921.421.427.32.579.686.579.991 0 .305-.152.671-.579.991a2.534 2.534 0 0 1-.921.42Z" }),
           /* @__PURE__ */ jsx(
@@ -81325,7 +81700,7 @@ const items$c = [
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 24 24",
         fill: "currentColor",
-        className: cn(styles$1T.w6, styles$1T.h6),
+        className: clsx(styles$1T.w6, styles$1T.h6),
         children: /* @__PURE__ */ jsx("path", { d: "m11.645 20.91-.007-.003-.022-.012a15.247 15.247 0 0 1-.383-.218 25.18 25.18 0 0 1-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0 1 12 5.052 5.5 5.5 0 0 1 16.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 0 1-4.244 3.17 15.247 15.247 0 0 1-.383.219l-.022.012-.007.004-.003.001a.752.752 0 0 1-.704 0l-.003-.001Z" })
       }
     )
@@ -81338,7 +81713,7 @@ const items$c = [
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 24 24",
         fill: "currentColor",
-        className: cn(styles$1T.w6, styles$1T.h6),
+        className: clsx(styles$1T.w6, styles$1T.h6),
         children: /* @__PURE__ */ jsx(
           "path",
           {
@@ -81358,7 +81733,7 @@ const items$c = [
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 24 24",
         fill: "currentColor",
-        className: cn(styles$1T.w6, styles$1T.h6),
+        className: clsx(styles$1T.w6, styles$1T.h6),
         children: /* @__PURE__ */ jsx("path", { d: "M9.375 3a1.875 1.875 0 0 0 0 3.75h1.875v4.5H3.375A1.875 1.875 0 0 1 1.5 9.375v-.75c0-1.036.84-1.875 1.875-1.875h3.193A3.375 3.375 0 0 1 12 2.753a3.375 3.375 0 0 1 5.432 3.997h3.943c1.035 0 1.875.84 1.875 1.875v.75c0 1.036-.84 1.875-1.875 1.875H12.75v-4.5h1.875a1.875 1.875 0 1 0-1.875-1.875V6.75h-1.5V4.875C11.25 3.839 10.41 3 9.375 3ZM11.25 12.75H3v6.75a2.25 2.25 0 0 0 2.25 2.25h6v-9ZM12.75 12.75v9h6.75a2.25 2.25 0 0 0 2.25-2.25v-6.75h-9Z" })
       }
     )
@@ -81371,7 +81746,7 @@ const items$c = [
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 24 24",
         fill: "currentColor",
-        className: cn(styles$1T.w6, styles$1T.h6),
+        className: clsx(styles$1T.w6, styles$1T.h6),
         children: [
           /* @__PURE__ */ jsx("path", { d: "M17.004 10.407c.138.435-.216.842-.672.842h-3.465a.75.75 0 0 1-.65-.375l-1.732-3c-.229-.396-.053-.907.393-1.004a5.252 5.252 0 0 1 6.126 3.537ZM8.12 8.464c.307-.338.838-.235 1.066.16l1.732 3a.75.75 0 0 1 0 .75l-1.732 3c-.229.397-.76.5-1.067.161A5.23 5.23 0 0 1 6.75 12a5.23 5.23 0 0 1 1.37-3.536ZM10.878 17.13c-.447-.098-.623-.608-.394-1.004l1.733-3.002a.75.75 0 0 1 .65-.375h3.465c.457 0 .81.407.672.842a5.252 5.252 0 0 1-6.126 3.539Z" }),
           /* @__PURE__ */ jsx(
@@ -81439,7 +81814,7 @@ const CardMarquee = () => {
             xmlns: "http://www.w3.org/2000/svg",
             viewBox: "0 0 24 24",
             fill: "currentColor",
-            className: cn(styles$1T.w6, styles$1T.h6),
+            className: clsx(styles$1T.w6, styles$1T.h6),
             "aria-hidden": true,
             children: [
               /* @__PURE__ */ jsx("path", { d: "M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z" }),
@@ -81523,7 +81898,7 @@ const Ticker = () => {
         "data-active": isActive,
         "data-speed": "fast",
         "data-direction": "right",
-        children: /* @__PURE__ */ jsxs("ul", { className: cn(styles$1S.tags, styles$1S.list), children: [
+        children: /* @__PURE__ */ jsxs("ul", { className: clsx(styles$1S.tags, styles$1S.list), children: [
           items.map((item) => /* @__PURE__ */ jsx("li", { children: item }, item)),
           isActive && items.map((item) => /* @__PURE__ */ jsx("li", { "aria-hidden": true, children: item }, item + "hidden"))
         ] })
@@ -81800,10 +82175,10 @@ const AnimatedIconsNav = () => {
   }, []);
   return /* @__PURE__ */ jsxs("div", { className: styles$1R.root, children: [
     /* @__PURE__ */ jsxs("div", { className: styles$1R.cards, children: [
-      /* @__PURE__ */ jsx("div", { className: cn(styles$1R.card, { [styles$1R.flyOut]: showCards }) }),
-      /* @__PURE__ */ jsx("div", { className: cn(styles$1R.card, { [styles$1R.flyOut]: showCards }) })
+      /* @__PURE__ */ jsx("div", { className: clsx(styles$1R.card, { [styles$1R.flyOut]: showCards }) }),
+      /* @__PURE__ */ jsx("div", { className: clsx(styles$1R.card, { [styles$1R.flyOut]: showCards }) })
     ] }),
-    /* @__PURE__ */ jsxs("nav", { className: cn(styles$1R.nav, styles$1R[`tilt${page}`]), children: [
+    /* @__PURE__ */ jsxs("nav", { className: clsx(styles$1R.nav, styles$1R[`tilt${page}`]), children: [
       /* @__PURE__ */ jsx("ul", { className: styles$1R.items, children: items$a.map((item, index) => /* @__PURE__ */ jsx("li", { className: styles$1R.item, children: /* @__PURE__ */ jsxs(
         "button",
         {
@@ -81923,7 +82298,7 @@ const AnimatedShareMenu = () => {
         "button",
         {
           id: "share-btn",
-          className: cn(styles$1Q.btn, { [styles$1Q.open]: open }),
+          className: clsx(styles$1Q.btn, { [styles$1Q.open]: open }),
           type: "button",
           title: open ? "Close" : "Share",
           onClick: () => setOpen((prev) => !prev),
@@ -82119,8 +82494,8 @@ const CurtainRevealMenu = () => {
           setToggle((prev) => !prev);
         },
         children: [
-          /* @__PURE__ */ jsx(RxHamburgerMenu, { className: cn(styles$1P.icon, styles$1P.open) }),
-          /* @__PURE__ */ jsx(RxDropdownMenu, { className: cn(styles$1P.icon, styles$1P.close) })
+          /* @__PURE__ */ jsx(RxHamburgerMenu, { className: clsx(styles$1P.icon, styles$1P.open) }),
+          /* @__PURE__ */ jsx(RxDropdownMenu, { className: clsx(styles$1P.icon, styles$1P.close) })
         ]
       }
     )
@@ -82252,7 +82627,7 @@ const DropdownMenu = ({ value, items = ITEMS }) => {
         /* @__PURE__ */ jsxs(
           "button",
           {
-            className: cn(styles$1N.mainButton, styles$1N.dropdownButton),
+            className: clsx(styles$1N.mainButton, styles$1N.dropdownButton),
             onClick: () => {
               const listWrapperSizes = 3.5;
               const dropdownOpenHeight = 4.6 * ITEMS.length + listWrapperSizes;
@@ -82263,7 +82638,7 @@ const DropdownMenu = ({ value, items = ITEMS }) => {
               /* @__PURE__ */ jsx(
                 "span",
                 {
-                  className: cn(styles$1N.dropdownTitle, styles$1N.textTruncate, {
+                  className: clsx(styles$1N.dropdownTitle, styles$1N.textTruncate, {
                     [styles$1N.placeholder]: !active
                   }),
                   children: active ? active.title : "Choose a platform"
@@ -82310,7 +82685,7 @@ const DropdownMenu = ({ value, items = ITEMS }) => {
                     "button",
                     {
                       type: "button",
-                      className: cn(styles$1N.dropdownButton, styles$1N.listButton),
+                      className: clsx(styles$1N.dropdownButton, styles$1N.listButton),
                       "data-translate-value": `${100 * index}%`,
                       children: /* @__PURE__ */ jsx("span", { className: styles$1N.textTruncate, children: item.title })
                     }
@@ -82430,7 +82805,7 @@ const GlowingSelect = ({ accessible, nomotion }) => {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cn(styles$1L.select, { [styles$1L.nomotion]: nomotion }),
+      className: clsx(styles$1L.select, { [styles$1L.nomotion]: nomotion }),
       tabIndex: 0,
       role: "button",
       style: {
@@ -82489,7 +82864,7 @@ const GlowingTab = ({
     {
       ref,
       type: "button",
-      className: cn(styles$1K.button, { [styles$1K.active]: isActive }),
+      className: clsx(styles$1K.button, { [styles$1K.active]: isActive }),
       onClick,
       ...rest,
       children: [
@@ -82678,7 +83053,7 @@ const GlowingTab2 = ({ id, text, active, onClick, rootRef }) => {
     );
     nav.style.setProperty("--after-bg-width", String(width));
   }, [active, rootRef]);
-  return /* @__PURE__ */ jsx("li", { className: cn(styles$1J.item, { [styles$1J.active]: active }), children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("li", { className: clsx(styles$1J.item, { [styles$1J.active]: active }), children: /* @__PURE__ */ jsx(
     "a",
     {
       ref,
@@ -82863,12 +83238,12 @@ const MagnifiedNavItems = () => {
         /* @__PURE__ */ jsx("path", { d: "M20.473,23H3.003c-1.276,0-2.228-1.175-1.957-2.422,.705-3.239,3.029-8.578,10.693-8.578s9.987,5.336,10.692,8.575c.272,1.248-.681,2.425-1.959,2.425Z" })
       ] }) })
     ] }),
-    /* @__PURE__ */ jsxs("nav", { ref: navRef, className: cn(styles$1I.nav, styles$1I[`page${page + 1}`]), children: [
+    /* @__PURE__ */ jsxs("nav", { ref: navRef, className: clsx(styles$1I.nav, styles$1I[`page${page + 1}`]), children: [
       /* @__PURE__ */ jsx("ul", { className: styles$1I.items, children: items$7.map((item, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
         "button",
         {
           type: "button",
-          className: cn(styles$1I.itemLink, item.color),
+          className: clsx(styles$1I.itemLink, item.color),
           onClick: () => {
             setPage(index);
           },
@@ -82895,7 +83270,7 @@ const MagnifiedNavItems = () => {
       /* @__PURE__ */ jsx("div", { ref: fakeIconsRef, className: styles$1I.fakeIcons, children: items$7.map((item, index) => /* @__PURE__ */ jsx("div", { className: styles$1I.fakeIconBox, children: /* @__PURE__ */ jsx(
         "svg",
         {
-          className: cn(styles$1I.fakeIcon, item.fake),
+          className: clsx(styles$1I.fakeIcon, item.fake),
           width: "24px",
           height: "24px",
           "aria-hidden": "true",
@@ -82973,7 +83348,7 @@ const MobileNavBar = () => {
         /* @__PURE__ */ jsxs(
           "button",
           {
-            className: cn(styles$1H.navitem, {
+            className: clsx(styles$1H.navitem, {
               [styles$1H.active]: activeItem === 0 /* Home */
             }),
             "data-clr": "#e4ecfa",
@@ -82989,7 +83364,7 @@ const MobileNavBar = () => {
         /* @__PURE__ */ jsxs(
           "button",
           {
-            className: cn(styles$1H.navitem, {
+            className: clsx(styles$1H.navitem, {
               [styles$1H.active]: activeItem === 1 /* Person */
             }),
             "data-clr": "#fff6cc",
@@ -83005,7 +83380,7 @@ const MobileNavBar = () => {
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: cn(styles$1H.navsearch, { [styles$1H.active]: activeSearch }),
+            className: clsx(styles$1H.navsearch, { [styles$1H.active]: activeSearch }),
             children: [
               /* @__PURE__ */ jsx(
                 "input",
@@ -83039,7 +83414,7 @@ const MobileNavBar = () => {
         /* @__PURE__ */ jsxs(
           "button",
           {
-            className: cn(styles$1H.navitem, {
+            className: clsx(styles$1H.navitem, {
               [styles$1H.active]: activeItem === 2 /* Settings */
             }),
             "data-clr": "#f0e4fa",
@@ -83402,7 +83777,7 @@ const styles$1D = {
 
 const PinDropdown = () => {
   const [isActive, setIsActive] = useState(false);
-  return /* @__PURE__ */ jsxs("div", { className: cn(styles$1D.root, { [styles$1D.active]: isActive }), children: [
+  return /* @__PURE__ */ jsxs("div", { className: clsx(styles$1D.root, { [styles$1D.active]: isActive }), children: [
     /* @__PURE__ */ jsx(
       "button",
       {
@@ -83413,9 +83788,9 @@ const PinDropdown = () => {
           setIsActive((prev) => !prev);
         }, []),
         children: /* @__PURE__ */ jsxs("div", { className: styles$1D.menuIconWrapper, children: [
-          /* @__PURE__ */ jsx("div", { className: cn(styles$1D.menuIconLine, styles$1D.half, styles$1D.first) }),
+          /* @__PURE__ */ jsx("div", { className: clsx(styles$1D.menuIconLine, styles$1D.half, styles$1D.first) }),
           /* @__PURE__ */ jsx("div", { className: styles$1D.menuIconLine }),
-          /* @__PURE__ */ jsx("div", { className: cn(styles$1D.menuIconLine, styles$1D.half, styles$1D.last) })
+          /* @__PURE__ */ jsx("div", { className: clsx(styles$1D.menuIconLine, styles$1D.half, styles$1D.last) })
         ] })
       }
     ),
@@ -83535,7 +83910,7 @@ const RadialMenu = () => {
     }, []),
     isActive
   );
-  return /* @__PURE__ */ jsx("nav", { ref, className: cn(styles$1C.root, { [styles$1C.isActive]: isActive }), children: /* @__PURE__ */ jsxs("div", { className: styles$1C.menu, children: [
+  return /* @__PURE__ */ jsx("nav", { ref, className: clsx(styles$1C.root, { [styles$1C.isActive]: isActive }), children: /* @__PURE__ */ jsxs("div", { className: styles$1C.menu, children: [
     /* @__PURE__ */ jsxs(
       "label",
       {
@@ -83811,7 +84186,7 @@ const RadialNavigation = ({
   return /* @__PURE__ */ jsxs(
     "nav",
     {
-      className: cn(styles$1B.root, className, {
+      className: clsx(styles$1B.root, className, {
         [styles$1B.active]: isActive || isActiveByViewport,
         [styles$1B.highlighted]: isHighlighted || isActiveByViewport,
         [styles$1B.opposite]: direction === "right",
@@ -83825,7 +84200,7 @@ const RadialNavigation = ({
           "button",
           {
             type: "button",
-            className: cn(styles$1B.item, {
+            className: clsx(styles$1B.item, {
               [styles$1B.activeItem]: activeId === item.id
             }),
             "data-action": true,
@@ -83953,10 +84328,10 @@ const SinglePopoverMenu = () => {
         /* @__PURE__ */ jsx("div", { className: "sub-menu-holder" })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: cn(styles$1A.item, styles$1A.highlight), children: [
+    /* @__PURE__ */ jsxs("div", { className: clsx(styles$1A.item, styles$1A.highlight), children: [
       /* @__PURE__ */ jsx("div", { className: styles$1A.menuText, children: /* @__PURE__ */ jsx("a", { href: "apps/tarsis/recipes/SinglePopoverMenu#", children: "Services" }) }),
-      /* @__PURE__ */ jsxs("div", { className: cn(styles$1A.subMenu, styles$1A.double), children: [
-        /* @__PURE__ */ jsxs("div", { className: cn(styles$1A.iconBox, styles$1A.gb, styles$1A.a), children: [
+      /* @__PURE__ */ jsxs("div", { className: clsx(styles$1A.subMenu, styles$1A.double), children: [
+        /* @__PURE__ */ jsxs("div", { className: clsx(styles$1A.iconBox, styles$1A.gb, styles$1A.a), children: [
           /* @__PURE__ */ jsx("div", { className: styles$1A.icon, children: /* @__PURE__ */ jsx("i", { className: "far fa-question-circle" }) }),
           /* @__PURE__ */ jsxs("div", { className: styles$1A.text, children: [
             /* @__PURE__ */ jsxs("div", { className: styles$1A.title, children: [
@@ -83966,7 +84341,7 @@ const SinglePopoverMenu = () => {
             /* @__PURE__ */ jsx("div", { className: styles$1A.subText, children: "From Professionals" })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: cn(styles$1A.iconBox, styles$1A.gb, styles$1A.b), children: [
+        /* @__PURE__ */ jsxs("div", { className: clsx(styles$1A.iconBox, styles$1A.gb, styles$1A.b), children: [
           /* @__PURE__ */ jsx("div", { className: styles$1A.icon, children: /* @__PURE__ */ jsx("i", { className: "far fa-users-class" }) }),
           /* @__PURE__ */ jsxs("div", { className: styles$1A.text, children: [
             /* @__PURE__ */ jsxs("div", { className: styles$1A.title, children: [
@@ -83976,7 +84351,7 @@ const SinglePopoverMenu = () => {
             /* @__PURE__ */ jsx("div", { className: styles$1A.subText, children: "In Classroom" })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: cn(styles$1A.iconBox, styles$1A.gb, styles$1A.c), children: [
+        /* @__PURE__ */ jsxs("div", { className: clsx(styles$1A.iconBox, styles$1A.gb, styles$1A.c), children: [
           /* @__PURE__ */ jsx("div", { className: styles$1A.icon, children: /* @__PURE__ */ jsx("i", { className: "far fa-school" }) }),
           /* @__PURE__ */ jsxs("div", { className: styles$1A.text, children: [
             /* @__PURE__ */ jsxs("div", { className: styles$1A.title, children: [
@@ -83986,7 +84361,7 @@ const SinglePopoverMenu = () => {
             /* @__PURE__ */ jsx("div", { className: styles$1A.subText, children: "By Video" })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: cn(styles$1A.iconBox, styles$1A.gb, styles$1A.d), children: [
+        /* @__PURE__ */ jsxs("div", { className: clsx(styles$1A.iconBox, styles$1A.gb, styles$1A.d), children: [
           /* @__PURE__ */ jsx("div", { className: styles$1A.icon, children: /* @__PURE__ */ jsx("i", { className: "far fa-chess-rook" }) }),
           /* @__PURE__ */ jsxs("div", { className: styles$1A.text, children: [
             /* @__PURE__ */ jsxs("div", { className: styles$1A.title, children: [
@@ -83996,7 +84371,7 @@ const SinglePopoverMenu = () => {
             /* @__PURE__ */ jsx("div", { className: styles$1A.subText, children: "The Castle" })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: cn(styles$1A.iconBox, styles$1A.gb, styles$1A.e), children: [
+        /* @__PURE__ */ jsxs("div", { className: clsx(styles$1A.iconBox, styles$1A.gb, styles$1A.e), children: [
           /* @__PURE__ */ jsx("div", { className: styles$1A.icon, children: /* @__PURE__ */ jsx("i", { className: "far fa-video-plus" }) }),
           /* @__PURE__ */ jsxs("div", { className: styles$1A.text, children: [
             /* @__PURE__ */ jsxs("div", { className: styles$1A.title, children: [
@@ -84006,7 +84381,7 @@ const SinglePopoverMenu = () => {
             /* @__PURE__ */ jsx("div", { className: styles$1A.subText, children: "A Creator" })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: cn(styles$1A.iconBox, styles$1A.gb, styles$1A.f), children: [
+        /* @__PURE__ */ jsxs("div", { className: clsx(styles$1A.iconBox, styles$1A.gb, styles$1A.f), children: [
           /* @__PURE__ */ jsx("div", { className: styles$1A.icon, children: /* @__PURE__ */ jsx("i", { className: "far fa-cat" }) }),
           /* @__PURE__ */ jsxs("div", { className: styles$1A.text, children: [
             /* @__PURE__ */ jsxs("div", { className: styles$1A.title, children: [
@@ -84024,20 +84399,20 @@ const SinglePopoverMenu = () => {
         /* @__PURE__ */ jsx("div", { className: "sub-menu-holder" })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: cn(styles$1A.item, styles$1A.highlight), children: [
+    /* @__PURE__ */ jsxs("div", { className: clsx(styles$1A.item, styles$1A.highlight), children: [
       /* @__PURE__ */ jsx("div", { className: styles$1A.menuText, children: /* @__PURE__ */ jsx("a", { href: "apps/tarsis/recipes/SinglePopoverMenu#", children: "Support" }) }),
-      /* @__PURE__ */ jsxs("div", { className: cn(styles$1A.subMenu, styles$1A.triple), children: [
+      /* @__PURE__ */ jsxs("div", { className: clsx(styles$1A.subMenu, styles$1A.triple), children: [
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: cn(
+            className: clsx(
               styles$1A.iconBox,
               styles$1A.gb,
               styles$1A.a,
               styles$1A.topContainer
             ),
             children: [
-              /* @__PURE__ */ jsx("div", { className: cn(styles$1A.icon, styles$1A.big), children: /* @__PURE__ */ jsx("i", { className: "far fa-book" }) }),
+              /* @__PURE__ */ jsx("div", { className: clsx(styles$1A.icon, styles$1A.big), children: /* @__PURE__ */ jsx("i", { className: "far fa-book" }) }),
               /* @__PURE__ */ jsxs("div", { className: styles$1A.text, children: [
                 /* @__PURE__ */ jsx("div", { className: styles$1A.title, children: "Where to start" }),
                 /* @__PURE__ */ jsx("div", { className: styles$1A.subText, children: "Find out where to begin below" })
@@ -84059,28 +84434,28 @@ const SinglePopoverMenu = () => {
           /* @__PURE__ */ jsx("a", { href: "apps/tarsis/recipes/SinglePopoverMenu#", children: "Brain Enhancer" }),
           /* @__PURE__ */ jsx("a", { href: "apps/tarsis/recipes/SinglePopoverMenu#", children: "Network Maker" })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: cn(styles$1A.iconBox, styles$1A.flat), children: [
+        /* @__PURE__ */ jsxs("div", { className: clsx(styles$1A.iconBox, styles$1A.flat), children: [
           /* @__PURE__ */ jsx("div", { className: styles$1A.icon, children: /* @__PURE__ */ jsx("i", { className: "fal fa-plug" }) }),
           /* @__PURE__ */ jsx("div", { className: styles$1A.text, children: /* @__PURE__ */ jsxs("div", { className: styles$1A.title, children: [
             "API Guide ",
             /* @__PURE__ */ jsx("i", { className: "far fa-arrow-right" })
           ] }) })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: cn(styles$1A.iconBox, styles$1A.flat), children: [
+        /* @__PURE__ */ jsxs("div", { className: clsx(styles$1A.iconBox, styles$1A.flat), children: [
           /* @__PURE__ */ jsx("div", { className: styles$1A.icon, children: /* @__PURE__ */ jsx("i", { className: "fal fa-comments" }) }),
           /* @__PURE__ */ jsx("div", { className: styles$1A.text, children: /* @__PURE__ */ jsxs("div", { className: styles$1A.title, children: [
             "Support Line ",
             /* @__PURE__ */ jsx("i", { className: "far fa-arrow-right" })
           ] }) })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: cn(styles$1A.iconBox, styles$1A.flat), children: [
+        /* @__PURE__ */ jsxs("div", { className: clsx(styles$1A.iconBox, styles$1A.flat), children: [
           /* @__PURE__ */ jsx("div", { className: styles$1A.icon, children: /* @__PURE__ */ jsx("i", { className: "fal fa-phone-volume" }) }),
           /* @__PURE__ */ jsx("div", { className: styles$1A.text, children: /* @__PURE__ */ jsxs("div", { className: styles$1A.title, children: [
             "Live Chat ",
             /* @__PURE__ */ jsx("i", { className: "far fa-arrow-right" })
           ] }) })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: cn(styles$1A.iconBox, styles$1A.flat), children: [
+        /* @__PURE__ */ jsxs("div", { className: clsx(styles$1A.iconBox, styles$1A.flat), children: [
           /* @__PURE__ */ jsx("div", { className: styles$1A.icon, children: /* @__PURE__ */ jsx("i", { className: "fal fa-book-spells" }) }),
           /* @__PURE__ */ jsx("div", { className: styles$1A.text, children: /* @__PURE__ */ jsxs("div", { className: styles$1A.title, children: [
             "Documentation ",
@@ -84089,7 +84464,7 @@ const SinglePopoverMenu = () => {
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: cn(styles$1A.item, styles$1A.highlight), children: [
+    /* @__PURE__ */ jsxs("div", { className: clsx(styles$1A.item, styles$1A.highlight), children: [
       /* @__PURE__ */ jsx("div", { className: styles$1A.menuText, children: /* @__PURE__ */ jsx("a", { href: "apps/tarsis/recipes/SinglePopoverMenu#", children: "Community" }) }),
       /* @__PURE__ */ jsxs("div", { className: styles$1A.subMenu, children: [
         /* @__PURE__ */ jsxs("div", { className: styles$1A.iconBox, children: [
@@ -84214,7 +84589,7 @@ const TabBarAnimation = () => {
   return /* @__PURE__ */ jsx("nav", { ref: navRef, className: styles$1z.root, children: /* @__PURE__ */ jsx("ul", { className: styles$1z.list, children: options$2.map((option, index) => /* @__PURE__ */ jsx(
     "li",
     {
-      className: cn(styles$1z.item, {
+      className: clsx(styles$1z.item, {
         [styles$1z.active]: activeIndex === index
       }),
       children: /* @__PURE__ */ jsx(
@@ -84315,7 +84690,7 @@ const WavyItem = ({
   className = "",
   ...props
 }) => {
-  return /* @__PURE__ */ jsx("li", { className: cn(styles$1y.item, className, { [styles$1y.active]: isActive }), children: /* @__PURE__ */ jsx("a", { className: styles$1y.link, href, ...props, children }) });
+  return /* @__PURE__ */ jsx("li", { className: clsx(styles$1y.item, className, { [styles$1y.active]: isActive }), children: /* @__PURE__ */ jsx("a", { className: styles$1y.link, href, ...props, children }) });
 };
 
 const options$1 = [
@@ -84522,8 +84897,8 @@ const ParallaxEmoji = () => {
       children: [
         /* @__PURE__ */ jsx(EmojiLayer, { className: styles$1w.face, depth: 0.2 }),
         /* @__PURE__ */ jsx(EmojiLayer, { className: styles$1w.shine, depth: 0.3 }),
-        /* @__PURE__ */ jsx(EmojiLayer, { className: cn(styles$1w.eye, styles$1w.left), depth: 0.8 }),
-        /* @__PURE__ */ jsx(EmojiLayer, { className: cn(styles$1w.eye, styles$1w.right), depth: 0.8 }),
+        /* @__PURE__ */ jsx(EmojiLayer, { className: clsx(styles$1w.eye, styles$1w.left), depth: 0.8 }),
+        /* @__PURE__ */ jsx(EmojiLayer, { className: clsx(styles$1w.eye, styles$1w.right), depth: 0.8 }),
         /* @__PURE__ */ jsx(EmojiLayer, { className: styles$1w.mouth, depth: 0.8 })
       ]
     }
@@ -84581,9 +84956,9 @@ const ApertureVideo = () => {
             poster: "/images/aperture.webp"
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: cn(styles$1v.aperture, styles$1v.apertureLeft) }),
-        /* @__PURE__ */ jsx("div", { className: cn(styles$1v.aperture, styles$1v.apertureTopRight) }),
-        /* @__PURE__ */ jsx("div", { className: cn(styles$1v.aperture, styles$1v.apertureBottomRight) })
+        /* @__PURE__ */ jsx("div", { className: clsx(styles$1v.aperture, styles$1v.apertureLeft) }),
+        /* @__PURE__ */ jsx("div", { className: clsx(styles$1v.aperture, styles$1v.apertureTopRight) }),
+        /* @__PURE__ */ jsx("div", { className: clsx(styles$1v.aperture, styles$1v.apertureBottomRight) })
       ] })
     }
   );
@@ -84629,11 +85004,11 @@ const RadioRolling = () => {
       ),
       /* @__PURE__ */ jsx("label", { className: styles$1u.label, htmlFor: option, children: option })
     ] }, option)),
-    /* @__PURE__ */ jsxs("div", { className: cn(styles$1u.circles, { [styles$1u.flip]: flip }), children: [
+    /* @__PURE__ */ jsxs("div", { className: clsx(styles$1u.circles, { [styles$1u.flip]: flip }), children: [
       /* @__PURE__ */ jsx("div", { className: styles$1u.circle }),
       /* @__PURE__ */ jsx("div", { className: styles$1u.circle }),
       /* @__PURE__ */ jsx("div", { className: styles$1u.circle }),
-      /* @__PURE__ */ jsx("div", { className: cn(styles$1u.circle, styles$1u.circleChecked) }),
+      /* @__PURE__ */ jsx("div", { className: clsx(styles$1u.circle, styles$1u.circleChecked) }),
       /* @__PURE__ */ jsx("div", { className: styles$1u.circle }),
       /* @__PURE__ */ jsx("div", { className: styles$1u.circle }),
       /* @__PURE__ */ jsx("div", { className: styles$1u.circle })
@@ -84826,7 +85201,7 @@ const ScrollDrivenTextBlowOut = () => {
       /* @__PURE__ */ jsxs(
         "svg",
         {
-          className: cn(styles$1q.svg, styles$1q.signature),
+          className: clsx(styles$1q.svg, styles$1q.signature),
           viewBox: "0 0 271 209",
           fill: "none",
           xmlns: "http://www.w3.org/2000/svg",
@@ -85147,7 +85522,7 @@ const DDDRangeSlider = () => {
     "div",
     {
       ref: rootRef,
-      className: cn(styles$1l.root, styles$1l.pristine, {
+      className: clsx(styles$1l.root, styles$1l.pristine, {
         [styles$1l.pristine]: isPristine,
         [styles$1l.active]: active
       }),
@@ -85288,16 +85663,16 @@ const FeedbackReactions = () => {
       /* @__PURE__ */ jsxs("label", { className: styles$1i.angry, children: [
         /* @__PURE__ */ jsx("input", { type: "radio", value: "1", name: "feedback" }),
         /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("svg", { className: cn(styles$1i.eye, styles$1i.left), children: /* @__PURE__ */ jsx("use", { xlinkHref: "#eye" }) }),
-          /* @__PURE__ */ jsx("svg", { className: cn(styles$1i.eye, styles$1i.right), children: /* @__PURE__ */ jsx("use", { xlinkHref: "#eye" }) }),
+          /* @__PURE__ */ jsx("svg", { className: clsx(styles$1i.eye, styles$1i.left), children: /* @__PURE__ */ jsx("use", { xlinkHref: "#eye" }) }),
+          /* @__PURE__ */ jsx("svg", { className: clsx(styles$1i.eye, styles$1i.right), children: /* @__PURE__ */ jsx("use", { xlinkHref: "#eye" }) }),
           /* @__PURE__ */ jsx("svg", { className: styles$1i.mouth, children: /* @__PURE__ */ jsx("use", { xlinkHref: "#mouth" }) })
         ] })
       ] }),
       /* @__PURE__ */ jsxs("label", { className: styles$1i.sad, children: [
         /* @__PURE__ */ jsx("input", { type: "radio", value: "2", name: "feedback" }),
         /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("svg", { className: cn(styles$1i.eye, styles$1i.left), children: /* @__PURE__ */ jsx("use", { xlinkHref: "#eye" }) }),
-          /* @__PURE__ */ jsx("svg", { className: cn(styles$1i.eye, styles$1i.right), children: /* @__PURE__ */ jsx("use", { xlinkHref: "#eye" }) }),
+          /* @__PURE__ */ jsx("svg", { className: clsx(styles$1i.eye, styles$1i.left), children: /* @__PURE__ */ jsx("use", { xlinkHref: "#eye" }) }),
+          /* @__PURE__ */ jsx("svg", { className: clsx(styles$1i.eye, styles$1i.right), children: /* @__PURE__ */ jsx("use", { xlinkHref: "#eye" }) }),
           /* @__PURE__ */ jsx("svg", { className: styles$1i.mouth, children: /* @__PURE__ */ jsx("use", { xlinkHref: "#mouth" }) })
         ] })
       ] }),
@@ -85308,16 +85683,16 @@ const FeedbackReactions = () => {
       /* @__PURE__ */ jsxs("label", { className: styles$1i.good, children: [
         /* @__PURE__ */ jsx("input", { type: "radio", value: "4", name: "feedback", defaultChecked: true }),
         /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("svg", { className: cn(styles$1i.eye, styles$1i.left), children: /* @__PURE__ */ jsx("use", { xlinkHref: "#eye" }) }),
-          /* @__PURE__ */ jsx("svg", { className: cn(styles$1i.eye, styles$1i.right), children: /* @__PURE__ */ jsx("use", { xlinkHref: "#eye" }) }),
+          /* @__PURE__ */ jsx("svg", { className: clsx(styles$1i.eye, styles$1i.left), children: /* @__PURE__ */ jsx("use", { xlinkHref: "#eye" }) }),
+          /* @__PURE__ */ jsx("svg", { className: clsx(styles$1i.eye, styles$1i.right), children: /* @__PURE__ */ jsx("use", { xlinkHref: "#eye" }) }),
           /* @__PURE__ */ jsx("svg", { className: styles$1i.mouth, children: /* @__PURE__ */ jsx("use", { xlinkHref: "#mouth" }) })
         ] })
       ] }),
       /* @__PURE__ */ jsxs("label", { className: styles$1i.happy, children: [
         /* @__PURE__ */ jsx("input", { type: "radio", value: "5", name: "feedback" }),
         /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("svg", { className: cn(styles$1i.eye, styles$1i.left), children: /* @__PURE__ */ jsx("use", { xlinkHref: "#eye" }) }),
-          /* @__PURE__ */ jsx("svg", { className: cn(styles$1i.eye, styles$1i.right), children: /* @__PURE__ */ jsx("use", { xlinkHref: "#eye" }) })
+          /* @__PURE__ */ jsx("svg", { className: clsx(styles$1i.eye, styles$1i.left), children: /* @__PURE__ */ jsx("use", { xlinkHref: "#eye" }) }),
+          /* @__PURE__ */ jsx("svg", { className: clsx(styles$1i.eye, styles$1i.right), children: /* @__PURE__ */ jsx("use", { xlinkHref: "#eye" }) })
         ] })
       ] })
     ] }),
@@ -85386,7 +85761,7 @@ const styles$1h = {
 
 const DaySwitch = () => {
   const [morning, setMorning] = useState(false);
-  return /* @__PURE__ */ jsxs("div", { className: cn(styles$1h.root, { [styles$1h.morning]: morning }), children: [
+  return /* @__PURE__ */ jsxs("div", { className: clsx(styles$1h.root, { [styles$1h.morning]: morning }), children: [
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -85402,22 +85777,22 @@ const DaySwitch = () => {
     ),
     /* @__PURE__ */ jsxs("label", { htmlFor: "hide-checkbox", className: styles$1h.toggle, children: [
       /* @__PURE__ */ jsxs("span", { className: styles$1h.toggleButton, children: [
-        /* @__PURE__ */ jsx("span", { className: cn(styles$1h.crater, styles$1h.crater1) }),
-        /* @__PURE__ */ jsx("span", { className: cn(styles$1h.crater, styles$1h.crater2) }),
-        /* @__PURE__ */ jsx("span", { className: cn(styles$1h.crater, styles$1h.crater3) }),
-        /* @__PURE__ */ jsx("span", { className: cn(styles$1h.crater, styles$1h.crater4) }),
-        /* @__PURE__ */ jsx("span", { className: cn(styles$1h.crater, styles$1h.crater5) }),
-        /* @__PURE__ */ jsx("span", { className: cn(styles$1h.crater, styles$1h.crater6) }),
-        /* @__PURE__ */ jsx("span", { className: cn(styles$1h.crater, styles$1h.crater7) })
+        /* @__PURE__ */ jsx("span", { className: clsx(styles$1h.crater, styles$1h.crater1) }),
+        /* @__PURE__ */ jsx("span", { className: clsx(styles$1h.crater, styles$1h.crater2) }),
+        /* @__PURE__ */ jsx("span", { className: clsx(styles$1h.crater, styles$1h.crater3) }),
+        /* @__PURE__ */ jsx("span", { className: clsx(styles$1h.crater, styles$1h.crater4) }),
+        /* @__PURE__ */ jsx("span", { className: clsx(styles$1h.crater, styles$1h.crater5) }),
+        /* @__PURE__ */ jsx("span", { className: clsx(styles$1h.crater, styles$1h.crater6) }),
+        /* @__PURE__ */ jsx("span", { className: clsx(styles$1h.crater, styles$1h.crater7) })
       ] }),
-      /* @__PURE__ */ jsx("span", { className: cn(styles$1h.star, styles$1h.star1) }),
-      /* @__PURE__ */ jsx("span", { className: cn(styles$1h.star, styles$1h.star2) }),
-      /* @__PURE__ */ jsx("span", { className: cn(styles$1h.star, styles$1h.star3) }),
-      /* @__PURE__ */ jsx("span", { className: cn(styles$1h.star, styles$1h.star4) }),
-      /* @__PURE__ */ jsx("span", { className: cn(styles$1h.star, styles$1h.star5, styles$1h.half) }),
-      /* @__PURE__ */ jsx("span", { className: cn(styles$1h.star, styles$1h.star6, styles$1h.half) }),
-      /* @__PURE__ */ jsx("span", { className: cn(styles$1h.star, styles$1h.star7, styles$1h.half) }),
-      /* @__PURE__ */ jsx("span", { className: cn(styles$1h.star, styles$1h.star8, styles$1h.half) })
+      /* @__PURE__ */ jsx("span", { className: clsx(styles$1h.star, styles$1h.star1) }),
+      /* @__PURE__ */ jsx("span", { className: clsx(styles$1h.star, styles$1h.star2) }),
+      /* @__PURE__ */ jsx("span", { className: clsx(styles$1h.star, styles$1h.star3) }),
+      /* @__PURE__ */ jsx("span", { className: clsx(styles$1h.star, styles$1h.star4) }),
+      /* @__PURE__ */ jsx("span", { className: clsx(styles$1h.star, styles$1h.star5, styles$1h.half) }),
+      /* @__PURE__ */ jsx("span", { className: clsx(styles$1h.star, styles$1h.star6, styles$1h.half) }),
+      /* @__PURE__ */ jsx("span", { className: clsx(styles$1h.star, styles$1h.star7, styles$1h.half) }),
+      /* @__PURE__ */ jsx("span", { className: clsx(styles$1h.star, styles$1h.star8, styles$1h.half) })
     ] })
   ] });
 };
@@ -85494,7 +85869,7 @@ const styles$1f = {
 };
 
 const IosSwitch = ({ className, ...props }) => {
-  return /* @__PURE__ */ jsx("div", { className: cn(styles$1f.root, className), children: /* @__PURE__ */ jsxs("label", { className: styles$1f.label, children: [
+  return /* @__PURE__ */ jsx("div", { className: clsx(styles$1f.root, className), children: /* @__PURE__ */ jsxs("label", { className: styles$1f.label, children: [
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -85622,7 +85997,7 @@ const styles$1d = {
 
 const NeuromorphicToggle = ({ dark = true }) => {
   const [isActive, setIsActive] = useState(false);
-  return /* @__PURE__ */ jsx("div", { className: cn(styles$1d.root, { [styles$1d.dark]: dark }), children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("div", { className: clsx(styles$1d.root, { [styles$1d.dark]: dark }), children: /* @__PURE__ */ jsxs(
     "button",
     {
       className: styles$1d.button,
@@ -85710,7 +86085,7 @@ const styles$1b = {
 
 const StretchToggle = () => {
   const [pristine, setPristine] = useState(false);
-  return /* @__PURE__ */ jsx("div", { className: styles$1b.root, children: /* @__PURE__ */ jsxs("label", { className: cn(styles$1b.toggle, { [styles$1b.pristine]: pristine }), children: [
+  return /* @__PURE__ */ jsx("div", { className: styles$1b.root, children: /* @__PURE__ */ jsxs("label", { className: clsx(styles$1b.toggle, { [styles$1b.pristine]: pristine }), children: [
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -85741,7 +86116,7 @@ const TippingSwitch = ({ withText = false }) => {
     "input",
     {
       type: "checkbox",
-      className: cn(styles$1a.input, { [styles$1a.withText]: withText })
+      className: clsx(styles$1a.input, { [styles$1a.withText]: withText })
     }
   );
 };
@@ -85783,7 +86158,7 @@ const styles$17 = {
 	root: root$12,
 	text: text$8};
 
-const EnlightenedText = ({ children }) => /* @__PURE__ */ jsx("span", { className: cn(styles$17.root, styles$17.text), children });
+const EnlightenedText = ({ children }) => /* @__PURE__ */ jsx("span", { className: clsx(styles$17.root, styles$17.text), children });
 
 const root$11 = "_root_g9iok_1";
 const text$7 = "_text_g9iok_9";
@@ -85946,7 +86321,7 @@ const JellyText = ({ children, className = "" }) => {
     "div",
     {
       ref,
-      className: cn(styles$14.root, className),
+      className: clsx(styles$14.root, className),
       "aria-description": children,
       children: parts
     }
@@ -86163,11 +86538,11 @@ const ScrambledText = ({ children, reveal = false }) => {
   );
 };
 
-const root$Y = "_root_xpoci_1";
-const line = "_line_xpoci_9";
-const word$1 = "_word_xpoci_14";
-const link = "_link_xpoci_18";
-const letter = "_letter_xpoci_22";
+const root$Y = "_root_19h89_1";
+const line = "_line_19h89_9";
+const word$1 = "_word_19h89_14";
+const link = "_link_19h89_18";
+const letter = "_letter_19h89_22";
 const styles$11 = {
 	root: root$Y,
 	line: line,
@@ -86180,7 +86555,7 @@ const Word = ({ children, href }) => {
     return children.split("").map((letter, index) => /* @__PURE__ */ jsx("span", { className: styles$11.letter, children: letter }, letter + index));
   }, [children]);
   if (href) {
-    return /* @__PURE__ */ jsx("a", { className: cn(styles$11.word, styles$11.link), children: content });
+    return /* @__PURE__ */ jsx("a", { className: clsx(styles$11.word, styles$11.link), children: content });
   }
   return /* @__PURE__ */ jsx("span", { className: styles$11.word, children: content });
 };
@@ -86218,16 +86593,16 @@ const styles$10 = {
 	second: second$1};
 
 const ShakingText = ({ children }) => /* @__PURE__ */ jsxs("span", { className: styles$10.root, children: [
-  /* @__PURE__ */ jsx("span", { className: cn(styles$10.text, styles$10.first), children }),
+  /* @__PURE__ */ jsx("span", { className: clsx(styles$10.text, styles$10.first), children }),
   children,
-  /* @__PURE__ */ jsx("span", { className: cn(styles$10.text, styles$10.second), children })
+  /* @__PURE__ */ jsx("span", { className: clsx(styles$10.text, styles$10.second), children })
 ] });
 
 const root$W = "_root_ijw1m_1";
 const styles$$ = {
 	root: root$W};
 
-const ShiningText = ({ children, className = "" }) => /* @__PURE__ */ jsx("span", { className: cn(styles$$.root, className), children });
+const ShiningText = ({ children, className = "" }) => /* @__PURE__ */ jsx("span", { className: clsx(styles$$.root, className), children });
 
 const root$V = "_root_wb10x_1";
 const word = "_word_wb10x_12";
@@ -86368,7 +86743,7 @@ const Toast = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn(styles$W.toast, className, { [styles$W.visible]: visible }),
+      className: clsx(styles$W.toast, className, { [styles$W.visible]: visible }),
       role: "alert",
       onClick: onDismiss,
       onKeyDown: (e) => {
@@ -86465,7 +86840,7 @@ const Toasts = ({ container, maxQueue = 4 }) => {
         children: toasts.map((t, index) => /* @__PURE__ */ jsx(
           Toast,
           {
-            className: cn(
+            className: clsx(
               styles$W.toastItem,
               toasts.length === index + 1 ? styles$W.first : toasts.length === index + 2 ? styles$W.second : toasts.length === index + 3 ? styles$W.third : styles$W.forth
             ),
@@ -86495,7 +86870,7 @@ const Filter = ({ children, defaultActive = false }) => {
     "button",
     {
       type: "button",
-      className: cn(styles$V.button, { [styles$V.active]: isActive }),
+      className: clsx(styles$V.button, { [styles$V.active]: isActive }),
       onClick: () => setIsActive((prev) => !prev),
       children
     }
@@ -86553,7 +86928,7 @@ const Duck = () => {
     scheduleAnimation();
     return cleanup;
   }, []);
-  return /* @__PURE__ */ jsx("div", { className: cn(styles$U.root, { [styles$U.animating]: animating }), children: /* @__PURE__ */ jsx("div", { className: styles$U.sideToSide, children: /* @__PURE__ */ jsx("div", { className: styles$U.upAndDown, children: /* @__PURE__ */ jsxs("svg", { className: styles$U.duck, viewBox: "-100 -300 600 600", children: [
+  return /* @__PURE__ */ jsx("div", { className: clsx(styles$U.root, { [styles$U.animating]: animating }), children: /* @__PURE__ */ jsx("div", { className: styles$U.sideToSide, children: /* @__PURE__ */ jsx("div", { className: styles$U.upAndDown, children: /* @__PURE__ */ jsxs("svg", { className: styles$U.duck, viewBox: "-100 -300 600 600", children: [
     /* @__PURE__ */ jsx(
       "path",
       {
@@ -86643,7 +87018,7 @@ const DynamicIsland = ({ position = "fixed" }) => /* @__PURE__ */ jsxs(Fragment,
   /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn(styles$T.root, { [styles$T.static]: position === "static" }),
+      className: clsx(styles$T.root, { [styles$T.static]: position === "static" }),
       children: /* @__PURE__ */ jsxs("div", { className: styles$T.island, children: [
         /* @__PURE__ */ jsx("div", { className: styles$T.notch }),
         /* @__PURE__ */ jsx(
@@ -86819,13 +87194,13 @@ const SegmentedControls = ({
 }) => /* @__PURE__ */ jsx(
   "nav",
   {
-    className: cn(styles$R.root, { [styles$R.isVertical]: isVertical }),
+    className: clsx(styles$R.root, { [styles$R.isVertical]: isVertical }),
     role: "tablist",
     children: options.map((option) => /* @__PURE__ */ jsx(
       "button",
       {
         role: "button",
-        className: cn(styles$R.control, {
+        className: clsx(styles$R.control, {
           [styles$R.active]: activeId === option.id
         }),
         onClick: () => onChange(option.id),
@@ -86862,10 +87237,10 @@ const ShapeSelection = ({ children }) => {
     }
   }, []);
   return /* @__PURE__ */ jsxs("span", { ref, className: styles$Q.root, children: [
-    /* @__PURE__ */ jsx("div", { className: cn(styles$Q.dot, styles$Q.topLeft) }),
-    /* @__PURE__ */ jsx("div", { className: cn(styles$Q.dot, styles$Q.topRight) }),
-    /* @__PURE__ */ jsx("div", { className: cn(styles$Q.dot, styles$Q.bottomLeft) }),
-    /* @__PURE__ */ jsx("div", { className: cn(styles$Q.dot, styles$Q.bottomRight) }),
+    /* @__PURE__ */ jsx("div", { className: clsx(styles$Q.dot, styles$Q.topLeft) }),
+    /* @__PURE__ */ jsx("div", { className: clsx(styles$Q.dot, styles$Q.topRight) }),
+    /* @__PURE__ */ jsx("div", { className: clsx(styles$Q.dot, styles$Q.bottomLeft) }),
+    /* @__PURE__ */ jsx("div", { className: clsx(styles$Q.dot, styles$Q.bottomRight) }),
     /* @__PURE__ */ jsx("span", { className: styles$Q.content, children }),
     rect && /* @__PURE__ */ jsxs("div", { className: styles$Q.size, children: [
       Math.round(rect.width),
@@ -86913,7 +87288,7 @@ const Appearance = ({ type = "reveal" }) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn(styles$P.root, {
+      className: clsx(styles$P.root, {
         [styles$P.reveal]: type === "reveal",
         [styles$P.fadeIn]: type === "fade-in",
         [styles$P.glow]: type === "glow"
@@ -92165,7 +92540,7 @@ const BackgroundSlider = () => {
           sensitivity: 1
         },
         children: SLIDES.map((slide, index) => /* @__PURE__ */ jsxs(SwiperSlide, { className: styles$M.swiperSlide, children: [
-          /* @__PURE__ */ jsx("h1", { className: cn(styles$M.title, styles$M[`slide${index + 1}`]), children: slide.title }),
+          /* @__PURE__ */ jsx("h1", { className: clsx(styles$M.title, styles$M[`slide${index + 1}`]), children: slide.title }),
           /* @__PURE__ */ jsx("img", { className: styles$M.image, src: slide.image, alt: "" })
         ] }, slide.title))
       }
@@ -92237,7 +92612,7 @@ const BouncyClock = () => {
   return /* @__PURE__ */ jsx("div", { className: styles$K.root, children: digits.map((digit, i) => /* @__PURE__ */ jsx(
     "span",
     {
-      className: cn(styles$K.digit, {
+      className: clsx(styles$K.digit, {
         [styles$K.bounce]: prev[i] !== void 0 && digit !== prev[i]
       }),
       children: digit
@@ -92299,7 +92674,7 @@ const BreakingProgress = ({ loop = false }) => {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cn(styles$J.root, {
+      className: clsx(styles$J.root, {
         [styles$J.falling]: falling,
         [styles$J.resetting]: resetting
       }),
@@ -92352,7 +92727,7 @@ const CardDetails = () => {
         alt: "image"
       }
     ) }),
-    /* @__PURE__ */ jsxs("div", { className: cn(styles$I.detail, styles$I.detail1), children: [
+    /* @__PURE__ */ jsxs("div", { className: clsx(styles$I.detail, styles$I.detail1), children: [
       /* @__PURE__ */ jsx("span", { className: styles$I.detailText, children: "SPACIOUS" }),
       /* @__PURE__ */ jsx("div", { className: styles$I.detailIcon, children: /* @__PURE__ */ jsx(RxPlus, { className: styles$I.icon }) }),
       /* @__PURE__ */ jsx("div", { className: styles$I.detailImage, children: /* @__PURE__ */ jsx(
@@ -92364,7 +92739,7 @@ const CardDetails = () => {
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: cn(styles$I.detail, styles$I.detail2), children: [
+    /* @__PURE__ */ jsxs("div", { className: clsx(styles$I.detail, styles$I.detail2), children: [
       /* @__PURE__ */ jsx("span", { className: styles$I.detailText, children: "ACCESSIBLE" }),
       /* @__PURE__ */ jsx("div", { className: styles$I.detailIcon, children: /* @__PURE__ */ jsx(RxPlus, { className: styles$I.icon }) }),
       /* @__PURE__ */ jsx("div", { className: styles$I.detailImage, children: /* @__PURE__ */ jsx(
@@ -92459,7 +92834,7 @@ const styles$E = {
 };
 
 const File = ({ type }) => {
-  return /* @__PURE__ */ jsx("div", { className: cn(styles$E.icon, styles$E[type]), children: /* @__PURE__ */ jsx("i", { className: styles$E.i, title: type }) });
+  return /* @__PURE__ */ jsx("div", { className: clsx(styles$E.icon, styles$E[type]), children: /* @__PURE__ */ jsx("i", { className: styles$E.i, title: type }) });
 };
 const FileIcons = () => {
   return /* @__PURE__ */ jsxs("div", { className: styles$E.root, children: [
@@ -92720,7 +93095,7 @@ const options = [
 ];
 const LayeredComponents = () => {
   const [rotated, setRotated] = useState(true);
-  return /* @__PURE__ */ jsxs("div", { className: cn(styles$y.root, { [styles$y.checked]: rotated }), children: [
+  return /* @__PURE__ */ jsxs("div", { className: clsx(styles$y.root, { [styles$y.checked]: rotated }), children: [
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -96121,7 +96496,7 @@ const Lock = () => {
       }
     };
     const asynchronously = async () => {
-      const Flickity = await import('./index-BeKLV88y.js').then(n => n.i).then((m) => m.default);
+      const Flickity = await import('./index-DI2YEpFt.js').then(n => n.i).then((m) => m.default);
       if (!rowsRef.current || !window) return;
       const rows = rowsRef.current.children;
       for (let i = 0, len = rows.length; i < len; i++) {
@@ -96163,7 +96538,7 @@ const Lock = () => {
     "div",
     {
       ref: lockRef,
-      className: cn(styles$x.root, { [styles$x.verified]: isVerified }),
+      className: clsx(styles$x.root, { [styles$x.verified]: isVerified }),
       children: [
         /* @__PURE__ */ jsxs("div", { className: styles$x.screen, children: [
           /* @__PURE__ */ jsx("div", { className: styles$x.code, children: code }),
@@ -96279,9 +96654,9 @@ const MotionDigits = () => {
         /* @__PURE__ */ jsx("option", { value: 2e4, label: "20000" })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: styles$w.number, children: [
-        /* @__PURE__ */ jsx("div", { className: cn(styles$w.left, { [styles$w.animate]: animateLeft }), children: left }),
-        /* @__PURE__ */ jsx("div", { className: cn(styles$w.separator, { [styles$w.show]: separator }), children: "," }),
-        /* @__PURE__ */ jsx("div", { className: cn(styles$w.right, { [styles$w.animate]: animateRight }), children: right })
+        /* @__PURE__ */ jsx("div", { className: clsx(styles$w.left, { [styles$w.animate]: animateLeft }), children: left }),
+        /* @__PURE__ */ jsx("div", { className: clsx(styles$w.separator, { [styles$w.show]: separator }), children: "," }),
+        /* @__PURE__ */ jsx("div", { className: clsx(styles$w.right, { [styles$w.animate]: animateRight }), children: right })
       ] })
     ] }),
     /* @__PURE__ */ jsx(
@@ -96628,7 +97003,7 @@ const NotificationBell = () => {
     "button",
     {
       type: "button",
-      className: cn(styles$s.root, { [styles$s.active]: isActive }),
+      className: clsx(styles$s.root, { [styles$s.active]: isActive }),
       onClick: () => {
         read();
       },
@@ -96708,7 +97083,7 @@ const PhotoZoom = () => {
         "video",
         {
           ref: videoRef,
-          className: cn(styles$r.video, {
+          className: clsx(styles$r.video, {
             [styles$r.flippingIn]: isFlippingIn,
             [styles$r.flippingOut]: isFlippingOut
           }),
@@ -96726,14 +97101,14 @@ const PhotoZoom = () => {
         "div",
         {
           ref: flashRef,
-          className: cn(styles$r.flash, { [styles$r.shutterClick]: isShuttering })
+          className: clsx(styles$r.flash, { [styles$r.shutterClick]: isShuttering })
         }
       )
     ] }),
     /* @__PURE__ */ jsx("div", { className: styles$r.controls, children: ZOOM_OPTIONS.map((zoom) => /* @__PURE__ */ jsxs(
       "button",
       {
-        className: cn(styles$r.control, {
+        className: clsx(styles$r.control, {
           [styles$r.active]: zoom.level === activeZoom
         }),
         onClick: () => {
@@ -96992,7 +97367,7 @@ const RealisticSmoke = () => {
               height: "397",
               x: "83",
               y: "112.564",
-              className: cn(styles$o.blick, { [styles$o.ready]: renderBlick1 }),
+              className: clsx(styles$o.blick, { [styles$o.ready]: renderBlick1 }),
               children: /* @__PURE__ */ jsx(
                 "animate",
                 {
@@ -97029,7 +97404,7 @@ const RealisticSmoke = () => {
               height: "287",
               x: "69",
               y: "19.2447",
-              className: cn(styles$o.blick, { [styles$o.ready]: renderBlick2 }),
+              className: clsx(styles$o.blick, { [styles$o.ready]: renderBlick2 }),
               children: /* @__PURE__ */ jsx(
                 "animate",
                 {
@@ -97064,7 +97439,7 @@ const RevealImageAnimation = () => {
       "img",
       {
         src: "https://picsum.photos/id/995/250/250",
-        className: cn(styles$n.root, { [styles$n.alt]: true })
+        className: clsx(styles$n.root, { [styles$n.alt]: true })
       }
     )
   );
@@ -101965,9 +102340,9 @@ const BaileysBead = ({ theta, offset = 0, opa }) => {
           opacity: opacity.to((o) => o * mapOpacityToAngle())
         },
         children: [
-          /* @__PURE__ */ jsx("div", { className: cn(styles$j.bead, styles$j.bead3) }),
-          /* @__PURE__ */ jsx("div", { className: cn(styles$j.bead, styles$j.bead2) }),
-          /* @__PURE__ */ jsx("div", { className: cn(styles$j.bead, styles$j.bead1) })
+          /* @__PURE__ */ jsx("div", { className: clsx(styles$j.bead, styles$j.bead3) }),
+          /* @__PURE__ */ jsx("div", { className: clsx(styles$j.bead, styles$j.bead2) }),
+          /* @__PURE__ */ jsx("div", { className: clsx(styles$j.bead, styles$j.bead1) })
         ]
       }
     )
@@ -102105,7 +102480,7 @@ const SpeechToText = () => {
       recognitionRef.current = null;
     }
   }, []);
-  return /* @__PURE__ */ jsxs("div", { className: cn(styles$i.container, { [styles$i.speaking]: isSpeaking }), children: [
+  return /* @__PURE__ */ jsxs("div", { className: clsx(styles$i.container, { [styles$i.speaking]: isSpeaking }), children: [
     /* @__PURE__ */ jsx(
       "textarea",
       {
@@ -102157,12 +102532,12 @@ const styles$h = {
 
 const StaticSolarEclipse = () => {
   return /* @__PURE__ */ jsxs("div", { className: styles$h.root, children: [
-    /* @__PURE__ */ jsx("div", { className: cn(styles$h.layer, styles$h.layer1) }),
-    /* @__PURE__ */ jsx("div", { className: cn(styles$h.layer, styles$h.layer2) }),
-    /* @__PURE__ */ jsx("div", { className: cn(styles$h.layer, styles$h.layer3) }),
-    /* @__PURE__ */ jsx("div", { className: cn(styles$h.layer, styles$h.layer4) }),
-    /* @__PURE__ */ jsx("div", { className: cn(styles$h.layer, styles$h.layer5) }),
-    /* @__PURE__ */ jsx("div", { className: cn(styles$h.layer, styles$h.layer6) })
+    /* @__PURE__ */ jsx("div", { className: clsx(styles$h.layer, styles$h.layer1) }),
+    /* @__PURE__ */ jsx("div", { className: clsx(styles$h.layer, styles$h.layer2) }),
+    /* @__PURE__ */ jsx("div", { className: clsx(styles$h.layer, styles$h.layer3) }),
+    /* @__PURE__ */ jsx("div", { className: clsx(styles$h.layer, styles$h.layer4) }),
+    /* @__PURE__ */ jsx("div", { className: clsx(styles$h.layer, styles$h.layer5) }),
+    /* @__PURE__ */ jsx("div", { className: clsx(styles$h.layer, styles$h.layer6) })
   ] });
 };
 
@@ -102565,7 +102940,7 @@ const TextImageHover = () => {
               /* @__PURE__ */ jsx(
                 "image",
                 {
-                  className: cn(styles$c.image, {
+                  className: clsx(styles$c.image, {
                     [styles$c.active]: activeIndex === 0
                   }),
                   x: "50",
@@ -102578,7 +102953,7 @@ const TextImageHover = () => {
               /* @__PURE__ */ jsx(
                 "image",
                 {
-                  className: cn(styles$c.image, {
+                  className: clsx(styles$c.image, {
                     [styles$c.active]: activeIndex === 1
                   }),
                   x: "50",
@@ -102629,7 +103004,7 @@ const BlurVignette = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn(styles$a.root, className),
+      className: clsx(styles$a.root, className),
       style: {
         "--background-image-url": `url(${url})`,
         "--radius": `${radius}px`,
@@ -105236,7 +105611,7 @@ const FORMATTERS = {
   })
 };
 const Character = ({ className, parentKey, value }) => {
-  return /* @__PURE__ */ jsx("span", { "data-value": value, className: cn(styles$7.character, className), children: /* @__PURE__ */ jsxs("span", { className: styles$7.track, style: { "--v": value }, children: [
+  return /* @__PURE__ */ jsx("span", { "data-value": value, className: clsx(styles$7.character, className), children: /* @__PURE__ */ jsxs("span", { className: styles$7.track, style: { "--v": value }, children: [
     /* @__PURE__ */ jsx("span", { children: "9" }),
     [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((val, index) => {
       return /* @__PURE__ */ jsx("span", { children: val }, `${parentKey}--${index}`);
@@ -105307,7 +105682,7 @@ const Counter = () => {
           return /* @__PURE__ */ jsx(
             "span",
             {
-              className: cn(styles$7.character, styles$7.symbol),
+              className: clsx(styles$7.character, styles$7.symbol),
               children: character
             },
             index
@@ -105352,7 +105727,7 @@ const Illumination = () => {
       "div",
       {
         ref,
-        className: cn(styles$6.root, { [styles$6.loading]: loading }),
+        className: clsx(styles$6.root, { [styles$6.loading]: loading }),
         onPointerMove: (e) => {
           setInteracted(true);
           const { x, y } = e.nativeEvent;
@@ -105441,7 +105816,7 @@ const LandingXYScroll = () => {
     /* @__PURE__ */ jsx(
       "section",
       {
-        className: cn(styles$5.section, styles$5.sectionPin),
+        className: clsx(styles$5.section, styles$5.sectionPin),
         id: "sectionPin",
         children: /* @__PURE__ */ jsx("div", { className: styles$5.pinWrapSticky, children: /* @__PURE__ */ jsxs("div", { className: styles$5.pinWrap, children: [
           /* @__PURE__ */ jsx("h2", { className: styles$5.h2, children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }),
@@ -105487,7 +105862,7 @@ const LandingXYScroll = () => {
               alt: ""
             }
           ),
-          /* @__PURE__ */ jsxs("h2", { className: cn(styles$5.h2, styles$5.credit), children: [
+          /* @__PURE__ */ jsxs("h2", { className: clsx(styles$5.h2, styles$5.credit), children: [
             "Created by",
             /* @__PURE__ */ jsx(
               "a",
@@ -113463,10 +113838,10 @@ rotate(${15 * (Math.random() - 0.5)}deg)`;
 }
 const ThanosDisappearEffect = () => {
   useOklch();
-  return /* @__PURE__ */ jsx("div", { className: cn(styles$3.container, styles$3.grid), children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("div", { className: clsx(styles$3.container, styles$3.grid), children: /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cn(
+      className: clsx(
         styles$3.item,
         styles$3.disintegrationTarget,
         styles$3.grid,